From 33b8e199759494de5271db0da875b53fb58c9507 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 22 Apr 2024 17:46:49 +0000 Subject: [PATCH 1/5] feat: show version on login page --- site/src/api/queries/buildInfo.ts | 3 +++ .../src/modules/dashboard/DashboardProvider.tsx | 10 +--------- site/src/modules/dashboard/Navbar/Navbar.tsx | 7 +++++-- .../Navbar/UserDropdown/UserDropdown.tsx | 3 +-- site/src/modules/resources/AgentVersion.tsx | 2 +- .../WorkspaceStatusBadge.stories.tsx | 17 ++++++++++++----- site/src/pages/LoginPage/LoginPage.tsx | 4 ++++ site/src/pages/LoginPage/LoginPageView.tsx | 9 +++++++-- .../pages/WorkspacePage/Workspace.stories.tsx | 5 ++++- .../pages/WorkspacePage/WorkspaceReadyPage.tsx | 6 +++--- .../WorkspacesPageView.stories.tsx | 9 ++++++++- site/src/testHelpers/storybook.tsx | 1 - 12 files changed, 49 insertions(+), 27 deletions(-) diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts index b0761f001d6d6..62a9237d98799 100644 --- a/site/src/api/queries/buildInfo.ts +++ b/site/src/api/queries/buildInfo.ts @@ -11,5 +11,8 @@ export const buildInfo = (): UseQueryOptions => { queryKey: buildInfoKey, initialData: initialBuildInfoData, queryFn: () => API.getBuildInfo(), + // The version of the app can't change without reloading the page. + cacheTime: Infinity, + staleTime: Infinity, }; }; diff --git a/site/src/modules/dashboard/DashboardProvider.tsx b/site/src/modules/dashboard/DashboardProvider.tsx index f389311754807..7c1871946cf4c 100644 --- a/site/src/modules/dashboard/DashboardProvider.tsx +++ b/site/src/modules/dashboard/DashboardProvider.tsx @@ -7,12 +7,10 @@ import { } from "react"; import { useQuery } from "react-query"; import { appearance } from "api/queries/appearance"; -import { buildInfo } from "api/queries/buildInfo"; import { entitlements } from "api/queries/entitlements"; import { experiments } from "api/queries/experiments"; import type { AppearanceConfig, - BuildInfoResponse, Entitlements, Experiments, } from "api/typesGenerated"; @@ -27,7 +25,6 @@ interface Appearance { } export interface DashboardValue { - buildInfo: BuildInfoResponse; entitlements: Entitlements; experiments: Experiments; appearance: Appearance; @@ -38,16 +35,12 @@ export const DashboardContext = createContext( ); export const DashboardProvider: FC = ({ children }) => { - const buildInfoQuery = useQuery(buildInfo()); const entitlementsQuery = useQuery(entitlements()); const experimentsQuery = useQuery(experiments()); const appearanceQuery = useQuery(appearance()); const isLoading = - !buildInfoQuery.data || - !entitlementsQuery.data || - !appearanceQuery.data || - !experimentsQuery.data; + !entitlementsQuery.data || !appearanceQuery.data || !experimentsQuery.data; const [configPreview, setConfigPreview] = useState(); @@ -84,7 +77,6 @@ export const DashboardProvider: FC = ({ children }) => { return ( { - const { appearance, buildInfo } = useDashboard(); + const { appearance } = useDashboard(); + const buildInfoQuery = useQuery(buildInfo()); const { user: me, permissions, signOut } = useAuthenticated(); const featureVisibility = useFeatureVisibility(); const canViewAuditLog = @@ -19,7 +22,7 @@ export const Navbar: FC = () => { void; - children?: ReactNode; } export const UserDropdown: FC = ({ diff --git a/site/src/modules/resources/AgentVersion.tsx b/site/src/modules/resources/AgentVersion.tsx index bba87833f3999..1c62f68bbd519 100644 --- a/site/src/modules/resources/AgentVersion.tsx +++ b/site/src/modules/resources/AgentVersion.tsx @@ -24,7 +24,7 @@ export const AgentVersion: FC = ({ ); if (status === agentVersionStatus.Updated) { - return Updated; + return null; } return ( diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx index 572ac83aae577..a9c065c33b330 100644 --- a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx @@ -1,20 +1,20 @@ import type { Meta, StoryObj } from "@storybook/react"; import { DashboardContext } from "modules/dashboard/DashboardProvider"; import { + MockAppearanceConfig, + MockBuildInfo, MockCanceledWorkspace, MockCancelingWorkspace, MockDeletedWorkspace, MockDeletingWorkspace, + MockEntitlementsWithScheduling, + MockExperiments, MockFailedWorkspace, MockPendingWorkspace, MockStartingWorkspace, MockStoppedWorkspace, MockStoppingWorkspace, MockWorkspace, - MockBuildInfo, - MockEntitlementsWithScheduling, - MockExperiments, - MockAppearanceConfig, } from "testHelpers/entities"; import { WorkspaceStatusBadge } from "./WorkspaceStatusBadge"; @@ -27,11 +27,18 @@ const MockedAppearance = { const meta: Meta = { title: "modules/workspaces/WorkspaceStatusBadge", component: WorkspaceStatusBadge, + parameters: { + queries: [ + { + key: ["buildInfo"], + data: MockBuildInfo, + }, + ], + }, decorators: [ (Story) => ( { const redirectTo = retrieveRedirect(location.search); const applicationName = getApplicationName(); const navigate = useNavigate(); + const buildInfoQuery = useQuery(buildInfo()); if (isSignedIn) { // If the redirect is going to a workspace application, and we @@ -63,6 +66,7 @@ export const LoginPage: FC = () => { authMethods={authMethods} error={signInError} isLoading={isLoading} + buildInfo={buildInfoQuery.data} isSigningIn={isSigningIn} onSignIn={async ({ email, password }) => { await signIn(email, password); diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index e62e8be0d834e..88a590256542d 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -1,7 +1,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import type { FC } from "react"; import { useLocation } from "react-router-dom"; -import type { AuthMethods } from "api/typesGenerated"; +import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated"; import { CoderIcon } from "components/Icons/CoderIcon"; import { Loader } from "components/Loader/Loader"; import { getApplicationName, getLogoURL } from "utils/appearance"; @@ -12,6 +12,7 @@ export interface LoginPageViewProps { authMethods: AuthMethods | undefined; error: unknown; isLoading: boolean; + buildInfo?: BuildInfoResponse; isSigningIn: boolean; onSignIn: (credentials: { email: string; password: string }) => void; } @@ -20,6 +21,7 @@ export const LoginPageView: FC = ({ authMethods, error, isLoading, + buildInfo, isSigningIn, onSignIn, }) => { @@ -64,7 +66,10 @@ export const LoginPageView: FC = ({ /> )} diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx index dd0ef043ac84d..7f4db0efb8888 100644 --- a/site/src/pages/WorkspacePage/Workspace.stories.tsx +++ b/site/src/pages/WorkspacePage/Workspace.stories.tsx @@ -27,6 +27,10 @@ const meta: Meta = { component: Workspace, parameters: { queries: [ + { + key: ["buildInfo"], + data: Mocks.MockBuildInfo, + }, { key: ["portForward", Mocks.MockWorkspaceAgent.id], data: Mocks.MockListeningPortsResponse, @@ -37,7 +41,6 @@ const meta: Meta = { (Story) => ( = ({ }) => { const navigate = useNavigate(); const queryClient = useQueryClient(); - const { buildInfo } = useDashboard(); + const buildInfoQuery = useQuery(buildInfo()); const featureVisibility = useFeatureVisibility(); if (workspace === undefined) { throw Error("Workspace is undefined"); @@ -248,7 +248,7 @@ export const WorkspaceReadyPage: FC = ({ canChangeVersions={canChangeVersions} hideSSHButton={featureVisibility["browser_only"]} hideVSCodeDesktopButton={featureVisibility["browser_only"]} - buildInfo={buildInfo} + buildInfo={buildInfoQuery.data} sshPrefix={sshPrefixQuery.data?.hostname_prefix} template={template} buildLogs={ diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx index 965dfe4b6b006..1c7b61558a8cf 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx @@ -139,11 +139,18 @@ const meta: Meta = { count: 13, page: 1, }, + parameters: { + queries: [ + { + key: ["buildInfo"], + data: MockBuildInfo, + }, + ], + }, decorators: [ (Story) => ( Date: Mon, 22 Apr 2024 18:04:07 +0000 Subject: [PATCH 2/5] disable refetch too --- site/src/api/queries/buildInfo.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts index 62a9237d98799..caf01b88a14f2 100644 --- a/site/src/api/queries/buildInfo.ts +++ b/site/src/api/queries/buildInfo.ts @@ -14,5 +14,8 @@ export const buildInfo = (): UseQueryOptions => { // The version of the app can't change without reloading the page. cacheTime: Infinity, staleTime: Infinity, + refetchOnMount: false, + refetchOnReconnect: false, + refetchOnWindowFocus: false, }; }; From 5ab68b89a17e905ce1e256f33e7e4bd2812e08a7 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 22 Apr 2024 18:44:51 +0000 Subject: [PATCH 3/5] ok --- site/src/testHelpers/storybook.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx index 20df0ec1bd768..666d8b91c5c98 100644 --- a/site/src/testHelpers/storybook.tsx +++ b/site/src/testHelpers/storybook.tsx @@ -3,11 +3,7 @@ import type { FC } from "react"; import { withDefaultFeatures } from "api/api"; import type { Entitlements } from "api/typesGenerated"; import { DashboardContext } from "modules/dashboard/DashboardProvider"; -import { - MockAppearanceConfig, - MockBuildInfo, - MockEntitlements, -} from "./entities"; +import { MockAppearanceConfig, MockEntitlements } from "./entities"; export const withDashboardProvider = ( Story: FC, From f69ad6817f858266bf783c4fc0f67674df94a550 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 23 Apr 2024 16:55:01 +0000 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/api/queries/util.ts | 2 +- site/src/contexts/ProxyContext.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/api/queries/util.ts b/site/src/api/queries/util.ts index 35aaef11505eb..6dc02ac897482 100644 --- a/site/src/api/queries/util.ts +++ b/site/src/api/queries/util.ts @@ -1,4 +1,4 @@ -import { UseQueryOptions } from "react-query"; +import type { UseQueryOptions } from "react-query"; /** * cachedQuery allows the caller to only make a request a single time, and use diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx index 7779a51d4f0f0..07e1486dd12e6 100644 --- a/site/src/contexts/ProxyContext.tsx +++ b/site/src/contexts/ProxyContext.tsx @@ -7,7 +7,7 @@ import { useEffect, useState, } from "react"; -import { type UseQueryOptions, useQuery } from "react-query"; +import { useQuery } from "react-query"; import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api"; import { cachedQuery } from "api/queries/util"; import type { Region, WorkspaceProxy } from "api/typesGenerated"; From 805bf2af92f2a75c61d03bad8491009facbf45a8 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 23 Apr 2024 16:58:03 +0000 Subject: [PATCH 5/5] `©` --- site/src/pages/LoginPage/LoginPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index 88a590256542d..cd585f3f1db65 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -67,7 +67,7 @@ export const LoginPageView: FC = ({ )}