fix: Store dismissedBanner key in localStorage (#5388)

* fix: Store dismissedBanner key in localStorage

* cleanup

* removed comment

* spelling

* fixed eslint

* wote test

site/.eslintrc.yaml

@@ -30,7 +30,6 @@ plugins:
   - import
   - react-hooks
   - jest
-  - no-storage
   - unicorn
 root: true
 rules:
@@ -98,7 +97,6 @@ rules:
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-  no-storage/no-browser-storage: error
   no-unused-vars: "off"
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn

site/package.json

@@ -113,7 +113,6 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jest": "27.0.1",
     "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-no-storage": "1.0.2",
     "eslint-plugin-react": "7.31.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-unicorn": "44.0.0",

site/src/components/AuthAndFrame/AuthAndFrame.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, screen } from "@testing-library/react"
+import { renderWithAuth } from "testHelpers/renderHelpers"
+import { AccountPage } from "pages/UserSettingsPage/AccountPage/AccountPage"
+import i18next from "i18next"
+
+const { t } = i18next
+
+describe("AuthAndFrame", () => {
+  it("sets localStorage key-value when dismissed", async () => {
+    const localStorageMock = {
+      ...global.localStorage,
+      getItem: jest.fn(),
+    }
+    global.localStorage = localStorageMock
+
+    // rendering a random page that is wrapped in AuthAndFrame
+    return renderWithAuth(<AccountPage />)
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: t("ctas.dismissCta", { ns: "common" }),
+      }),
+    )
+    expect(localStorageMock.getItem).toHaveBeenCalledWith("dismissedVersion")
+  })
+})

site/src/xServices/updateCheck/updateCheckXService.ts

@@ -117,7 +117,7 @@ export const updateCheckMachine = createMachine(
       dismissOrClear: {
         on: {
           DISMISS: {
-            actions: ["assignHide"],
+            actions: ["assignHide", "setDismissedVersion"],
             target: "dismissed",
           },
           CLEAR: {
@@ -141,9 +141,11 @@ export const updateCheckMachine = createMachine(
       assignPermissions: assign({
         permissions: (_, event) => event.data as Permissions,
       }),
-      assignShow: assign({
-        show: true,
-      }),
+      assignShow: assign((context) => ({
+        show:
+          localStorage.getItem("dismissedVersion") !==
+          context.updateCheck?.version,
+      })),
       assignHide: assign({
         show: false,
       }),
@@ -161,6 +163,12 @@ export const updateCheckMachine = createMachine(
         ...context,
         error: undefined,
       })),
+      setDismissedVersion: (context) => {
+        if (context.updateCheck?.version) {
+          // We use localStorage to ensure users who have dismissed the UpdateCheckBanner are not plagued by its reappearance on page reload
+          localStorage.setItem("dismissedVersion", context.updateCheck.version)
+        }
+      },
     },
     guards: {
       canViewUpdateCheck: (context) =>

site/yarn.lock

@@ -6557,11 +6557,6 @@ eslint-plugin-jsx-a11y@6.6.1:
     minimatch "^3.1.2"
     semver "^6.3.0"
 
-eslint-plugin-no-storage@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-no-storage/-/eslint-plugin-no-storage-1.0.2.tgz#b32b2f00c4084f8e70c6c4ea79704ffe28b6caad"
-  integrity sha512-INY2pA4ynTsPIb7wP6+j1QEzDx+zVZ1rZsQkC3up+TQLXsVGg3AnYSqDv/LlwR1QPfh4fDEgQ2Hg5Zxk2XxxEw==
-
 eslint-plugin-react-hooks@4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"