coder · BrunoQuaresma · Oct 20, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 20, 2023
diff --git a/site/src/api/queries/updateCheck.ts b/site/src/api/queries/updateCheck.ts
@@ -0,0 +1,8 @@
+import * as API from "api/api";
+
+export const updateCheck = () => {
+  return {
+    queryKey: ["updateCheck"],
+    queryFn: () => API.getUpdateCheck(),
+  };
+};
diff --git a/site/src/components/Dashboard/DashboardLayout.test.tsx b/site/src/components/Dashboard/DashboardLayout.test.tsx
@@ -1,14 +1,22 @@
 import { renderWithAuth } from "testHelpers/renderHelpers";
 import { DashboardLayout } from "./DashboardLayout";
-import * as API from "api/api";
 import { screen } from "@testing-library/react";
+import { rest } from "msw";
+import { server } from "testHelpers/server";
 
 test("Show the new Coder version notification", async () => {
-  jest.spyOn(API, "getUpdateCheck").mockResolvedValue({
-    current: false,
-    version: "v0.12.9",
-    url: "https://github.com/coder/coder/releases/tag/v0.12.9",
-  });
+  server.use(
+    rest.get("/api/v2/updatecheck", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          current: false,
+          version: "v0.12.9",
+          url: "https://github.com/coder/coder/releases/tag/v0.12.9",
+        }),
+      );
+    }),
+  );
   renderWithAuth(<DashboardLayout />, {
     children: [{ element: <h1>Test page</h1> }],
   });

diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -1,4 +1,3 @@
-import { useMachine } from "@xstate/react";
 import { DeploymentBanner } from "./DeploymentBanner/DeploymentBanner";
 import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner";
 import { Loader } from "components/Loader/Loader";
@@ -7,23 +6,18 @@ import { usePermissions } from "hooks/usePermissions";
 import { FC, Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import { dashboardContentBottomPadding } from "theme/constants";
-import { updateCheckMachine } from "xServices/updateCheck/updateCheckXService";
 import { Navbar } from "./Navbar/Navbar";
 import Snackbar from "@mui/material/Snackbar";
 import Link from "@mui/material/Link";
 import Box, { BoxProps } from "@mui/material/Box";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import Button from "@mui/material/Button";
 import { docs } from "utils/docs";
+import { useUpdateCheck } from "./useUpdateCheck";
 
 export const DashboardLayout: FC = () => {
   const permissions = usePermissions();
-  const [updateCheckState, updateCheckSend] = useMachine(updateCheckMachine, {
-    context: {
-      permissions,
-    },
-  });
-  const { updateCheck } = updateCheckState.context;
+  const updateCheck = useUpdateCheck(permissions.viewUpdateCheck);
   const canViewDeployment = Boolean(permissions.viewDeploymentValues);
 
   return (
@@ -57,7 +51,7 @@ export const DashboardLayout: FC = () => {
 
         <Snackbar
           data-testid="update-check-snackbar"
-          open={updateCheckState.matches("show")}
+          open={updateCheck.isVisible}
           anchorOrigin={{
             vertical: "bottom",
             horizontal: "right",
@@ -89,19 +83,15 @@ export const DashboardLayout: FC = () => {
                 })}
               />
               <Box>
-                Coder {updateCheck?.version} is now available. View the{" "}
-                <Link href={updateCheck?.url}>release notes</Link> and{" "}
+                Coder {updateCheck.data?.version} is now available. View the{" "}
+                <Link href={updateCheck.data?.url}>release notes</Link> and{" "}
                 <Link href={docs("/admin/upgrade")}>upgrade instructions</Link>{" "}
                 for more information.
               </Box>
             </Box>
           }
           action={
-            <Button
-              variant="text"
-              size="small"
-              onClick={() => updateCheckSend("DISMISS")}
-            >
+            <Button variant="text" size="small" onClick={updateCheck.dismiss}>
               Dismiss
             </Button>
           }

diff --git a/site/src/components/Dashboard/useUpdateCheck.test.tsx b/site/src/components/Dashboard/useUpdateCheck.test.tsx
@@ -0,0 +1,121 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { useUpdateCheck } from "./useUpdateCheck";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactNode } from "react";
+import { rest } from "msw";
+import { MockUpdateCheck } from "testHelpers/entities";
+import { server } from "testHelpers/server";
+
+const createWrapper = () => {
+  const queryClient = new QueryClient();
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+it("is dismissed when does not have permission to see it", () => {
+  const { result } = renderHook(() => useUpdateCheck(false), {
+    wrapper: createWrapper(),
+  });
+  expect(result.current.isVisible).toBeFalsy();
+});
+
+it("is dismissed when it is already using current version", async () => {
+  server.use(
+    rest.get("/api/v2/updatecheck", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...MockUpdateCheck,
+          current: true,
+        }),
+      );
+    }),
+  );
+  const { result } = renderHook(() => useUpdateCheck(true), {
+    wrapper: createWrapper(),
+  });
+
+  await waitFor(() => {
+    expect(result.current.isVisible).toBeFalsy();
+  });
+});
+
+it("is dismissed when it was dismissed previously", async () => {
+  server.use(
+    rest.get("/api/v2/updatecheck", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...MockUpdateCheck,
+          current: false,
+        }),
+      );
+    }),
+  );
+  window.localStorage.setItem("dismissedVersion", MockUpdateCheck.version);
+  const { result } = renderHook(() => useUpdateCheck(true), {
+    wrapper: createWrapper(),
+  });
+
+  await waitFor(() => {
+    expect(result.current.isVisible).toBeFalsy();
+  });
+});
+
+it("shows when has permission and is outdated", async () => {
+  server.use(
+    rest.get("/api/v2/updatecheck", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...MockUpdateCheck,
+          current: false,
+        }),
+      );
+    }),
+  );
+  const { result } = renderHook(() => useUpdateCheck(true), {
+    wrapper: createWrapper(),
+  });
+
+  await waitFor(() => {
+    expect(result.current.isVisible).toBeTruthy();
+  });
+});
+
+it("shows when has permission and is outdated", async () => {
+  server.use(
+    rest.get("/api/v2/updatecheck", (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          ...MockUpdateCheck,
+          current: false,
+        }),
+      );
+    }),
+  );
+  const { result } = renderHook(() => useUpdateCheck(true), {
+    wrapper: createWrapper(),
+  });
+
+  await waitFor(() => {
+    expect(result.current.isVisible).toBeTruthy();
+  });
+
+  act(() => {
+    result.current.dismiss();
+  });
+
+  await waitFor(() => {
+    expect(result.current.isVisible).toBeFalsy();
+  });
+  expect(localStorage.getItem("dismissedVersion")).toEqual(
+    MockUpdateCheck.version,
+  );
+});
diff --git a/site/src/components/Dashboard/useUpdateCheck.ts b/site/src/components/Dashboard/useUpdateCheck.ts
@@ -0,0 +1,45 @@
+import { updateCheck } from "api/queries/updateCheck";
+import { useMemo, useState } from "react";
+import { useQuery } from "react-query";
+
+export const useUpdateCheck = (enabled: boolean) => {
+  const [dismissedVersion, setDismissedVersion] = useState(() =>
+    getDismissedVersionOnLocal(),
+  );
+  const updateCheckQuery = useQuery({
+    ...updateCheck(),
+    enabled,
+  });
+
+  const isVisible: boolean = useMemo(() => {
+    if (!updateCheckQuery.data) {
+      return false;
+    }
+
+    const isNotDismissed = dismissedVersion !== updateCheckQuery.data.version;
+    const isOutdated = !updateCheckQuery.data.current;
+    return isNotDismissed && isOutdated ? true : false;
+  }, [dismissedVersion, updateCheckQuery.data]);
+
+  const dismiss = () => {
+    if (!updateCheckQuery.data) {
+      return;
+    }
+    setDismissedVersion(updateCheckQuery.data.version);
+    saveDismissedVersionOnLocal(updateCheckQuery.data.version);
+  };
+
+  return {
+    isVisible,
+    dismiss,
+    data: updateCheckQuery.data,
+  };
+};
+
+const saveDismissedVersionOnLocal = (version: string): void => {
+  window.localStorage.setItem("dismissedVersion", version);
+};
+
+const getDismissedVersionOnLocal = (): string | undefined => {
+  return localStorage.getItem("dismissedVersion") ?? undefined;
+};