From 983e18f616a18c3578a7217c43dc4f2d9b04b102 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 19:14:06 +0000 Subject: [PATCH 1/6] fix: Store dismissedBanner key in localStorage --- site/.eslintrc.yaml | 1 - site/package.json | 1 - site/src/api/api.ts | 7 +++++++ site/src/components/AuthAndFrame/AuthAndFrame.tsx | 2 +- .../xServices/updateCheck/updateCheckXService.ts | 14 ++++++++++---- site/yarn.lock | 5 ----- 6 files changed, 18 insertions(+), 12 deletions(-) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 9c60bca004266..734731f3d4922 100644 --- 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 index dc9457a0da627..8f5b044f1c3f4 100644 --- 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 index ad3eb9ed28605..37d4c62f4dce1 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -407,7 +407,14 @@ export const getBuildInfo = async (): Promise => { export const getUpdateCheck = async (): Promise => { 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 index e0256915aa9ee..8930565ece105 100644 --- a/site/src/components/AuthAndFrame/AuthAndFrame.tsx +++ b/site/src/components/AuthAndFrame/AuthAndFrame.tsx @@ -27,7 +27,7 @@ export const AuthAndFrame: FC = ({ 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 index ef5ca67eabaf8..d3db94963fe79 100644 --- 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 index f12e781f26c37..0b7a6eac63b51 100644 --- 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" From fd7af7d2734f4915d76fe90a65da229e45c34e14 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 19:28:31 +0000 Subject: [PATCH 2/6] cleanup --- site/src/api/api.ts | 7 ------- site/src/xServices/updateCheck/updateCheckXService.ts | 4 +++- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 37d4c62f4dce1..ad3eb9ed28605 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -407,14 +407,7 @@ export const getBuildInfo = async (): Promise => { export const getUpdateCheck = async (): Promise => { 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/xServices/updateCheck/updateCheckXService.ts b/site/src/xServices/updateCheck/updateCheckXService.ts index d3db94963fe79..477a96ae5958f 100644 --- a/site/src/xServices/updateCheck/updateCheckXService.ts +++ b/site/src/xServices/updateCheck/updateCheckXService.ts @@ -142,7 +142,9 @@ export const updateCheckMachine = createMachine( permissions: (_, event) => event.data as Permissions, }), assignShow: assign((context) => ({ - show: localStorage.getItem("dismissedVersion") !== context.updateCheck?.version, + show: + localStorage.getItem("dismissedVersion") !== + context.updateCheck?.version, })), assignHide: assign({ show: false, From 4a4bfb28dd95bc22d357e4c8ee22312667341797 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 19:31:36 +0000 Subject: [PATCH 3/6] removed comment --- site/src/components/AuthAndFrame/AuthAndFrame.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx index 8930565ece105..e0256915aa9ee 100644 --- a/site/src/components/AuthAndFrame/AuthAndFrame.tsx +++ b/site/src/components/AuthAndFrame/AuthAndFrame.tsx @@ -27,7 +27,7 @@ export const AuthAndFrame: FC = ({ children }) => { useEffect(() => { if (authState.matches("signedIn")) { - updateCheckSend("CHECK") // this calls getUpdateCheck which returns the latest version + updateCheckSend("CHECK") } else { updateCheckSend("CLEAR") } From 6874ec9134612774ccb52c33e1f5206c0de3f8d2 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 19:33:22 +0000 Subject: [PATCH 4/6] spelling --- site/src/xServices/updateCheck/updateCheckXService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/xServices/updateCheck/updateCheckXService.ts b/site/src/xServices/updateCheck/updateCheckXService.ts index 477a96ae5958f..dddce422a41df 100644 --- a/site/src/xServices/updateCheck/updateCheckXService.ts +++ b/site/src/xServices/updateCheck/updateCheckXService.ts @@ -165,7 +165,7 @@ export const updateCheckMachine = createMachine( })), 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 + // 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) } }, From dd37d8bde4e6209bc617947053e49a52a7d08acb Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 20:00:17 +0000 Subject: [PATCH 5/6] fixed eslint --- site/.eslintrc.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 734731f3d4922..58bb2490505b5 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -30,7 +30,6 @@ plugins: - import - react-hooks - jest - - no-storage - unicorn root: true rules: From c4e5057acc9b439a7c25bbda80cfdb895f27ec47 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Mon, 12 Dec 2022 21:04:58 +0000 Subject: [PATCH 6/6] wote test --- .../AuthAndFrame/AuthAndFrame.test.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 site/src/components/AuthAndFrame/AuthAndFrame.test.tsx diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.test.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.test.tsx new file mode 100644 index 0000000000000..2ea19161659d0 --- /dev/null +++ b/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() + fireEvent.click( + screen.getByRole("button", { + name: t("ctas.dismissCta", { ns: "common" }), + }), + ) + expect(localStorageMock.getItem).toHaveBeenCalledWith("dismissedVersion") + }) +})