fix: Store dismissedBanner key in localStorage

Kira-Pilot · Kira-Pilot · commit 983e18f616a1 · 2022-12-12T19:14:06.000Z
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -98,7 +98,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
diff --git a/site/package.json b/site/package.json
@@ -111,7 +111,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",
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -407,7 +407,14 @@ export const getBuildInfo = async (): Promise<TypesGen.BuildInfoResponse> => {
 export const getUpdateCheck =
   async (): Promise<TypesGen.UpdateCheckResponse> => {
     const response = await axios.get("/api/v2/updatecheck")
+    // return {
+    //   current: true,
+    //   url: "https://github.com/coder/coder/releases/tag/v0.13.1",
+    //   version: "v0.13.1"
+    // }
+    console.log('response.data', response.data)
     return response.data
+    return { current: false, version: 'v0.13.1', url: 'https://github.com/coder/coder/releases/tag/v0.13.1' }
   }
 
 export const putWorkspaceAutostart = async (
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -27,7 +27,7 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {
 
   useEffect(() => {
     if (authState.matches("signedIn")) {
-      updateCheckSend("CHECK")
+      updateCheckSend("CHECK") // this calls getUpdateCheck which returns the latest version
     } else {
       updateCheckSend("CLEAR")
     }
diff --git a/site/src/xServices/updateCheck/updateCheckXService.ts b/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,9 @@ 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 +161,12 @@ export const updateCheckMachine = createMachine(
         ...context,
         error: undefined,
       })),
+      setDismissedVersion: (context) => {
+        if (context.updateCheck?.version) {
+          // We use localStorage to ensure users who have dimissed the UpdateCheckBanner are not plagued by it on page reload
+          localStorage.setItem("dismissedVersion", context.updateCheck.version)
+        }
+      },
     },
     guards: {
       canViewUpdateCheck: (context) =>
diff --git a/site/yarn.lock b/site/yarn.lock
@@ -6550,11 +6550,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"

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => {`
`27`	`27`
`28`	`28`	`useEffect(() => {`
`29`	`29`	`if (authState.matches("signedIn")) {`
`30`		`- updateCheckSend("CHECK")`
	`30`	`+ updateCheckSend("CHECK") // this calls getUpdateCheck which returns the latest version`
`31`	`31`	`} else {`
`32`	`32`	`updateCheckSend("CLEAR")`
`33`	`33`	`}`