feat: show version on login page

coder · aslilac · Apr 23, 2024 · Apr 22, 2024 · Apr 22, 2024 · Apr 22, 2024
commit 33b8e199759494de5271db0da875b53fb58c9507
diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts
@@ -11,5 +11,8 @@ export const buildInfo = (): UseQueryOptions<BuildInfoResponse> => {
     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
@@ -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<DashboardValue | undefined>(
 );
 
 export const DashboardProvider: FC<PropsWithChildren> = ({ 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<AppearanceConfig>();
 
@@ -84,7 +77,6 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <DashboardContext.Provider
       value={{
-        buildInfo: buildInfoQuery.data,
         entitlements: entitlementsQuery.data,
         experiments: experimentsQuery.data,
         appearance: {

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -1,12 +1,15 @@
 import type { FC } from "react";
+import { useQuery } from "react-query";
+import { buildInfo } from "api/queries/buildInfo";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useProxy } from "contexts/ProxyContext";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "../useFeatureVisibility";
 import { NavbarView } from "./NavbarView";
 
 export const Navbar: FC = () => {
-  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 = () => {
     <NavbarView
       user={me}
       logo_url={appearance.config.logo_url}
-      buildInfo={buildInfo}
+      buildInfo={buildInfoQuery.data}
       supportLinks={appearance.config.support_links}
       onSignOut={signOut}
       canViewAuditLog={canViewAuditLog}

diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -1,6 +1,6 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Badge from "@mui/material/Badge";
-import type { FC, ReactNode } from "react";
+import type { FC } from "react";
 import type * as TypesGen from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
@@ -17,7 +17,6 @@ export interface UserDropdownProps {
   buildInfo?: TypesGen.BuildInfoResponse;
   supportLinks?: readonly TypesGen.LinkConfig[];
   onSignOut: () => void;
-  children?: ReactNode;
 }
 
 export const UserDropdown: FC<UserDropdownProps> = ({

diff --git a/site/src/modules/resources/AgentVersion.tsx b/site/src/modules/resources/AgentVersion.tsx
@@ -24,7 +24,7 @@ export const AgentVersion: FC<AgentVersionProps> = ({
   );
 
   if (status === agentVersionStatus.Updated) {
-    return <span>Updated</span>;
+    return null;
   }
 
   return (

diff --git 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<typeof WorkspaceStatusBadge> = {
   title: "modules/workspaces/WorkspaceStatusBadge",
   component: WorkspaceStatusBadge,
+  parameters: {
+    queries: [
+      {
+        key: ["buildInfo"],
+        data: MockBuildInfo,
+      },
+    ],
+  },
   decorators: [
     (Story) => (
       <DashboardContext.Provider
         value={{
-          buildInfo: MockBuildInfo,
           entitlements: MockEntitlementsWithScheduling,
           experiments: MockExperiments,
           appearance: MockedAppearance,

diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -1,6 +1,8 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
+import { useQuery } from "react-query";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
+import { buildInfo } from "api/queries/buildInfo";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { getApplicationName } from "utils/appearance";
 import { retrieveRedirect } from "utils/redirect";
@@ -20,6 +22,7 @@ export const LoginPage: FC = () => {
   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
@@ -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<LoginPageViewProps> = ({
   authMethods,
   error,
   isLoading,
+  buildInfo,
   isSigningIn,
   onSignIn,
 }) => {
@@ -64,7 +66,10 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
           />
         )}
         <footer css={styles.footer}>
-          Copyright © {new Date().getFullYear()} Coder Technologies, Inc.
+          <div>
+            Copyright © {new Date().getFullYear()} Coder Technologies, Inc.
+          </div>
+          <div>{buildInfo?.version}</div>
         </footer>
       </div>
     </div>

diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -27,6 +27,10 @@ const meta: Meta<typeof Workspace> = {
   component: Workspace,
   parameters: {
     queries: [
+      {
+        key: ["buildInfo"],
+        data: Mocks.MockBuildInfo,
+      },
       {
         key: ["portForward", Mocks.MockWorkspaceAgent.id],
         data: Mocks.MockListeningPortsResponse,
@@ -37,7 +41,6 @@ const meta: Meta<typeof Workspace> = {
     (Story) => (
       <DashboardContext.Provider
         value={{
-          buildInfo: Mocks.MockBuildInfo,
           entitlements: Mocks.MockEntitlementsWithScheduling,
           experiments: Mocks.MockExperiments,
           appearance: MockedAppearance,

diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { MissingBuildParameters, restartWorkspace } from "api/api";
 import { getErrorMessage } from "api/errors";
+import { buildInfo } from "api/queries/buildInfo";
 import { deploymentConfig, deploymentSSHConfig } from "api/queries/deployment";
 import { templateVersion, templateVersions } from "api/queries/templates";
 import {
@@ -27,7 +28,6 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { pageTitle } from "utils/page";
 import { ChangeVersionDialog } from "./ChangeVersionDialog";
@@ -50,7 +50,7 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
 }) => {
   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<WorkspaceReadyPageProps> = ({
         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
@@ -139,11 +139,18 @@ const meta: Meta<typeof WorkspacesPageView> = {
     count: 13,
     page: 1,
   },
+  parameters: {
+    queries: [
+      {
+        key: ["buildInfo"],
+        data: MockBuildInfo,
+      },
+    ],
+  },
   decorators: [
     (Story) => (
       <DashboardContext.Provider
         value={{
-          buildInfo: MockBuildInfo,
           entitlements: MockEntitlementsWithScheduling,
           experiments: MockExperiments,
           appearance: MockedAppearance,

diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx
@@ -5,7 +5,7 @@
 import { DashboardContext } from "modules/dashboard/DashboardProvider";
 import {
  MockAppearanceConfig,
  MockBuildInfo,
  MockEntitlements,
 } from "./entities";

@@ -30,7 +30,6 @@
   return (
     <DashboardContext.Provider
       value={{
-        buildInfo: MockBuildInfo,
         entitlements,
         experiments,
         appearance: {