fix(ui): reformat code

ui/src/App.test.tsx

@@ -291,52 +291,45 @@ describe("<App /> theme", () => {
 
   const testCases: testCaseT[] = [
     {
-      name:
-        "applies LightTheme when config=auto and browser doesn't support prefers-color-scheme",
+      name: "applies LightTheme when config=auto and browser doesn't support prefers-color-scheme",
       settings: "auto",
       matchMedia: {},
       theme: "LightTheme",
     },
     {
-      name:
-        "applies LightTheme when config=auto and browser prefers-color-scheme:light matches",
+      name: "applies LightTheme when config=auto and browser prefers-color-scheme:light matches",
       settings: "auto",
       matchMedia: lightMatch(),
       theme: "LightTheme",
     },
     {
-      name:
-        "applies DarkTheme when config=auto and browser prefers-color-scheme:dark matches",
+      name: "applies DarkTheme when config=auto and browser prefers-color-scheme:dark matches",
       settings: "auto",
       matchMedia: darkMatch(),
       theme: "DarkTheme",
     },
 
     {
-      name:
-        "applies LightTheme when config=light and browser doesn't support prefers-color-scheme",
+      name: "applies LightTheme when config=light and browser doesn't support prefers-color-scheme",
       settings: "light",
       matchMedia: {},
       theme: "LightTheme",
     },
     {
-      name:
-        "applies LightTheme when config=light and browser prefers-color-scheme:light matches",
+      name: "applies LightTheme when config=light and browser prefers-color-scheme:light matches",
       settings: "light",
       matchMedia: lightMatch(),
       theme: "LightTheme",
     },
 
     {
-      name:
-        "applies DarkTheme when config=dark and browser doesn't support prefers-color-scheme",
+      name: "applies DarkTheme when config=dark and browser doesn't support prefers-color-scheme",
       settings: "dark",
       matchMedia: {},
       theme: "DarkTheme",
     },
     {
-      name:
-        "applies DarkTheme when config=dark and browser prefers-color-scheme:dark matches",
+      name: "applies DarkTheme when config=dark and browser prefers-color-scheme:dark matches",
       settings: "dark",
       matchMedia: darkMatch(),
       theme: "DarkTheme",

ui/src/Components/AlertAck/index.tsx

@@ -41,9 +41,8 @@ const AlertAck: FC<{
   const [currentCluster, setCurrentCluster] = useState<number>(0);
   const [isAcking, setIsAcking] = useState<boolean>(false);
 
-  const { response, error, inProgress, reset } = useFetchAny<PostResponseT>(
-    upstreams
-  );
+  const { response, error, inProgress, reset } =
+    useFetchAny<PostResponseT>(upstreams);
 
   const onACK = () => {
     setIsAcking(true);

ui/src/Components/AlertHistory/index.tsx

@@ -20,9 +20,8 @@ export const AlertHistory: FC<{ group: APIAlertGroupT }> = ({ group }) => {
   const [sources, setSources] = useState<string[]>([]);
   const [upstreams, setUpstreams] = useState<UpstreamT[]>([]);
   const [labels] = useState({ ...group.labels, ...group.shared.labels });
-  const { response, error, inProgress } = useFetchAny<HistoryResponseT>(
-    upstreams
-  );
+  const { response, error, inProgress } =
+    useFetchAny<HistoryResponseT>(upstreams);
   const [maxValue, setMaxValue] = useState<number>(0);
 
   useEffect(() => {

ui/src/Components/Grid/AlertGrid/index.test.tsx

@@ -579,20 +579,7 @@ describe("<AlertGrid />", () => {
     }
 
     expect(results).toStrictEqual([
-      400,
-      396,
-      400,
-      396,
-      400,
-      396,
-      400,
-      396,
-      400,
-      396,
-      400,
-      396,
-      400,
-      396,
+      400, 396, 400, 396, 400, 396, 400, 396, 400, 396, 400, 396, 400, 396,
     ]);
   });
 

ui/src/Components/ManagedSilence/DeleteSilence.test.tsx

@@ -175,9 +175,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("sends a DELETE request after clicking 'Confirm' button", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: "success", error: null, isDeleting: false });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: "success", error: null, isDeleting: false });
 
     const tree = MountedDeleteSilenceModalContent();
     tree.find(".btn-danger").simulate("click");
@@ -198,9 +198,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("sends headers from alertmanager config", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: "success", error: null, isDeleting: false });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: "success", error: null, isDeleting: false });
 
     const upstreams = generateUpstreams();
     upstreams.instances[0].headers = {
@@ -227,9 +227,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("uses CORS credentials from alertmanager config", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: "success", error: null, isDeleting: false });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: "success", error: null, isDeleting: false });
 
     const upstreams = generateUpstreams();
     upstreams.instances[0].corsCredentials = "omit";
@@ -254,9 +254,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("renders ProgressMessage while awaiting response status", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: null, error: null, isDeleting: true });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: null, error: null, isDeleting: true });
 
     const tree = MountedDeleteSilenceModalContent();
     tree.find(".btn-danger").simulate("click");
@@ -265,9 +265,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("renders SuccessMessage on successful response status", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: "success", error: null, isDeleting: false });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: "success", error: null, isDeleting: false });
 
     const tree = MountedDeleteSilenceModalContent();
     tree.find(".btn-danger").simulate("click");
@@ -276,9 +276,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("renders ErrorMessage on failed delete fetch request", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({
       response: null,
       error: "failed",
       isDeleting: false,
@@ -291,9 +291,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("'Retry' button is present after failed delete", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({
       response: null,
       error: "fake error",
       isDeleting: false,
@@ -306,9 +306,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("'Retry' button is not present after successful delete", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({ response: "success", error: null, isDeleting: false });
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({ response: "success", error: null, isDeleting: false });
 
     const tree = MountedDeleteSilenceModalContent();
     tree.find(".btn-danger").simulate("click");
@@ -317,9 +317,9 @@ describe("<DeleteSilenceModalContent />", () => {
   });
 
   it("Clicking 'Retry' button triggers new delete", () => {
-    (useFetchDelete as jest.MockedFunction<
-      typeof useFetchDelete
-    >).mockReturnValue({
+    (
+      useFetchDelete as jest.MockedFunction<typeof useFetchDelete>
+    ).mockReturnValue({
       response: null,
       error: "fake error",
       isDeleting: false,

ui/src/Components/ManagedSilence/DeleteSilence.tsx

@@ -68,10 +68,7 @@ const DeleteResult: FC<{
     credentials: am.corsCredentials,
   });
 
-  const {
-    error,
-    isDeleting,
-  } = useFetchDelete(
+  const { error, isDeleting } = useFetchDelete(
     `${am.uri}/api/v2/silence/${silence.id}`,
     deleteFetchOptions,
     [currentTime]
@@ -175,9 +172,8 @@ const DeleteSilence: FC<{
 }> = ({ alertStore, silenceFormStore, cluster, silence, isUpper = false }) => {
   const [visible, setVisible] = useState<boolean>(false);
 
-  const members = alertStore.data.getClusterAlertmanagersWithoutReadOnly(
-    cluster
-  );
+  const members =
+    alertStore.data.getClusterAlertmanagersWithoutReadOnly(cluster);
 
   return (
     <>

ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.tsx

@@ -22,14 +22,10 @@ const MatchCounter: FC<{
     filters.push(AlertManagersToFilter(silenceFormStore.data.alertmanagers));
   }
 
-  const {
-    response,
-    error,
-    isLoading,
-    isRetrying,
-  } = useFetchGet<APIAlertsResponseT>(
-    FormatBackendURI("alerts.json?") + FormatAlertsQ(filters)
-  );
+  const { response, error, isLoading, isRetrying } =
+    useFetchGet<APIAlertsResponseT>(
+      FormatBackendURI("alerts.json?") + FormatAlertsQ(filters)
+    );
 
   return error ? (
     <TooltipWrapper

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.tsx

@@ -20,12 +20,8 @@ const SilenceSubmitProgress: FC<{
   payload: AlertmanagerSilencePayloadT;
 }> = ({ alertStore, silenceFormStore, cluster, members, payload }) => {
   const [upstreams, setUpstreams] = useState<UpstreamT[]>([]);
-  const {
-    response,
-    error,
-    inProgress,
-    responseURI,
-  } = useFetchAny<PostResponseT>(upstreams);
+  const { response, error, inProgress, responseURI } =
+    useFetchAny<PostResponseT>(upstreams);
   const [publicURIs, setPublicURIs] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {

ui/src/Components/TooltipWrapper/index.tsx

@@ -12,9 +12,8 @@ const TooltipWrapper: FC<{
   children: ReactNode;
   className?: string;
 }> = ({ title, children, className }) => {
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
-    null
-  );
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "top",

ui/src/setupTests.ts

@@ -36,7 +36,8 @@ require("jest-canvas-mock");
 require("jest-date-mock");
 
 // https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#new-deprecations
-const reactDeprecationWarning = /.*has been renamed, and is not recommended for use.*/;
+const reactDeprecationWarning =
+  /.*has been renamed, and is not recommended for use.*/;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const consoleHandler = (message?: any, ...args: any): void => {
   if (reactDeprecationWarning.test(message as string) === false) {
@@ -58,9 +59,9 @@ React.useLayoutEffect = React.useEffect;
 beforeEach(() => {
   useFetchGetMock.fetch.reset();
   (useFetchGet as jest.MockedFunction<typeof useFetchGetMock>).mockRestore();
-  (useFetchGet as jest.MockedFunction<
-    typeof useFetchGetMock
-  >).mockImplementation(useFetchGetMock);
+  (
+    useFetchGet as jest.MockedFunction<typeof useFetchGetMock>
+  ).mockImplementation(useFetchGetMock);
 
   (useInView as jest.MockedFunction<typeof useInView>).mockReturnValue([
     jest.fn(),