Refactor outdated warning

coder · BrunoQuaresma · Jan 12, 2024 · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024
commit 0b286284ebda1e5a88b289695d9b59b41abce031
diff --git a/site/src/api/queries/workspaceQuota.ts b/site/src/api/queries/workspaceQuota.ts
@@ -12,7 +12,7 @@ export const workspaceQuota = (username: string) => {
   };
 };
 
-const getWorkspaceResolveAutostartQueryKey = (workspaceId: string) => [
+export const getWorkspaceResolveAutostartQueryKey = (workspaceId: string) => [
   workspaceId,
   "workspaceResolveAutostart",
 ];

diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -9,6 +9,7 @@ import EventSource from "eventsourcemock";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import { DashboardProviderContext } from "components/Dashboard/DashboardProvider";
 import { WorkspaceBuildLogsSection } from "pages/WorkspacePage/WorkspaceBuildLogsSection";
+import { getWorkspaceResolveAutostartQueryKey } from "api/queries/workspaceQuota";
 
 const MockedAppearance = {
   config: Mocks.MockAppearanceConfig,
@@ -196,9 +197,20 @@ export const Outdated: Story = {
 export const CantAutostart: Story = {
   args: {
     ...Running.args,
-    canAutostart: false,
     workspace: Mocks.MockOutdatedRunningWorkspaceRequireActiveVersion,
   },
+  parameters: {
+    queries: [
+      {
+        key: getWorkspaceResolveAutostartQueryKey(
+          Mocks.MockOutdatedRunningWorkspaceRequireActiveVersion.id,
+        ),
+        data: {
+          parameter_mismatch: false,
+        },
+      },
+    ],
+  },
 };
 
 export const GetBuildsError: Story = {

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -26,6 +26,7 @@ import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
 import HubOutlined from "@mui/icons-material/HubOutlined";
 import { ResourcesSidebar } from "./ResourcesSidebar";
 import { ResourceCard } from "components/Resources/ResourceCard";
+import { WorkspaceNotifications } from "./WorkspaceNotifications";
 
 export type WorkspaceError =
   | "getBuildsError"
@@ -48,7 +49,6 @@ export interface WorkspaceProps {
   isRestarting: boolean;
   workspace: TypesGen.Workspace;
   canUpdateWorkspace: boolean;
-  updateMessage?: string;
   canChangeVersions: boolean;
   hideSSHButton?: boolean;
   hideVSCodeDesktopButton?: boolean;
@@ -60,7 +60,7 @@ export interface WorkspaceProps {
   handleBuildRetry: () => void;
   handleBuildRetryDebug: () => void;
   buildLogs?: React.ReactNode;
-  canAutostart: boolean;
+  latestVersion?: TypesGen.TemplateVersion;
 }
 
 /**
@@ -80,7 +80,6 @@ export const Workspace: FC<WorkspaceProps> = ({
   isUpdating,
   isRestarting,
   canUpdateWorkspace,
-  updateMessage,
   canChangeVersions,
   workspaceErrors,
   hideSSHButton,
@@ -92,7 +91,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   handleBuildRetry,
   handleBuildRetryDebug,
   buildLogs,
-  canAutostart,
+  latestVersion,
 }) => {
   const navigate = useNavigate();
   const { saveLocal, getLocal } = useLocalStorage();
@@ -135,13 +134,6 @@ export const Workspace: FC<WorkspaceProps> = ({
     };
   }, [workspace, now, showAlertPendingInQueue]);
 
-  const updateRequired =
-    (workspace.template_require_active_version ||
-      workspace.automatic_updates === "always") &&
-    workspace.outdated;
-  const autoStartFailing = workspace.autostart_schedule && !canAutostart;
-  const requiresManualUpdate = updateRequired && autoStartFailing;
-
   const transitionStats =
     template !== undefined ? ActiveTransition(template, workspace) : undefined;
 
@@ -244,25 +236,10 @@ export const Workspace: FC<WorkspaceProps> = ({
       <div css={styles.content}>
         <div css={styles.dotBackground}>
           <Stack direction="column" css={styles.firstColumnSpacer} spacing={4}>
-            {workspace.outdated &&
-              (requiresManualUpdate ? (
-                <Alert severity="warning">
-                  <AlertTitle>
-                    Autostart has been disabled for your workspace.
-                  </AlertTitle>
-                  <AlertDetail>
-                    Autostart is unable to automatically update your workspace.
-                    Manually update your workspace to reenable Autostart.
-                  </AlertDetail>
-                </Alert>
-              ) : (
-                <Alert severity="info">
-                  <AlertTitle>
-                    An update is available for your workspace
-                  </AlertTitle>
-                  {updateMessage && <AlertDetail>{updateMessage}</AlertDetail>}
-                </Alert>
-              ))}
+            <WorkspaceNotifications
+              workspace={workspace}
+              latestVersion={latestVersion}
+            />
 
             {Boolean(workspaceErrors.buildError) && (
               <ErrorAlert error={workspaceErrors.buildError} dismissible />

diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications.tsx
@@ -0,0 +1,52 @@
+import AlertTitle from "@mui/material/AlertTitle";
+import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
+import { TemplateVersion, Workspace } from "api/typesGenerated";
+import { Alert, AlertDetail } from "components/Alert/Alert";
+import { FC } from "react";
+import { useQuery } from "react-query";
+
+type WorkspaceNotificationsProps = {
+  workspace: Workspace;
+  latestVersion?: TemplateVersion;
+};
+
+export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = (
+  props,
+) => {
+  const { workspace, latestVersion } = props;
+
+  // Outdated
+  const canAutostartResponse = useQuery(
+    workspaceResolveAutostart(workspace.id),
+  );
+  const canAutostart = !canAutostartResponse.data?.parameter_mismatch ?? false;
+  const updateRequired =
+    (workspace.template_require_active_version ||
+      workspace.automatic_updates === "always") &&
+    workspace.outdated;
+  const autoStartFailing = workspace.autostart_schedule && !canAutostart;
+  const requiresManualUpdate = updateRequired && autoStartFailing;
+
+  return (
+    <>
+      {workspace.outdated &&
+        latestVersion &&
+        (requiresManualUpdate ? (
+          <Alert severity="warning">
+            <AlertTitle>
+              Autostart has been disabled for your workspace.
+            </AlertTitle>
+            <AlertDetail>
+              Autostart is unable to automatically update your workspace.
+              Manually update your workspace to reenable Autostart.
+            </AlertDetail>
+          </Alert>
+        ) : (
+          <Alert severity="info">
+            <AlertTitle>An update is available for your workspace</AlertTitle>
+            <AlertDetail>{latestVersion.message}</AlertDetail>
+          </Alert>
+        ))}
+    </>
+  );
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -33,7 +33,6 @@ import { getErrorMessage } from "api/errors";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { deploymentConfig, deploymentSSHConfig } from "api/queries/deployment";
 import { WorkspacePermissions } from "./permissions";
-import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
 import dayjs from "dayjs";
 
@@ -83,12 +82,6 @@ export const WorkspaceReadyPage = ({
     mutationFn: restartWorkspace,
   });
 
-  // Auto start
-  const canAutostartResponse = useQuery(
-    workspaceResolveAutostart(workspace.id),
-  );
-  const canAutostart = !canAutostartResponse.data?.parameter_mismatch ?? false;
-
   // SSH Prefix
   const sshPrefixQuery = useQuery(deploymentSSHConfig());
 
@@ -225,7 +218,7 @@ export const WorkspaceReadyPage = ({
           }
         }}
         canUpdateWorkspace={canUpdateWorkspace}
-        updateMessage={latestVersion?.message}
+        latestVersion={latestVersion}
         canChangeVersions={canChangeVersions}
         hideSSHButton={featureVisibility["browser_only"]}
         hideVSCodeDesktopButton={featureVisibility["browser_only"]}
@@ -246,7 +239,6 @@ export const WorkspaceReadyPage = ({
             <WorkspaceBuildLogsSection logs={buildLogs} />
           )
         }
-        canAutostart={canAutostart}
       />
 
       <WorkspaceDeleteDialog