coder · aslilac · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -49,3 +49,17 @@ export const templateExamples = (orgId: string) => {
     queryFn: () => API.getTemplateExamples(orgId),
   };
 };
+
+export const templateVersion = (versionId: string) => {
+  return {
+    queryKey: ["templateVersion", versionId],
+    queryFn: () => API.getTemplateVersion(versionId),
+  };
+};
+
+export const templateVersions = (templateId: string) => {
+  return {
+    queryKey: ["templateVersions", templateId],
+    queryFn: () => API.getTemplateVersions(templateId),
+  };
+};
diff --git a/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -11,7 +11,7 @@ import InfoIcon from "@mui/icons-material/InfoOutlined";
 import { makeStyles } from "@mui/styles";
 import { colors } from "theme/colors";
 import { useQuery } from "@tanstack/react-query";
-import { getTemplate, getTemplateVersion } from "api/api";
+import { templateVersion } from "api/queries/templates";
 import Box from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
 import Link from "@mui/material/Link";
@@ -25,28 +25,19 @@ export const Language = {
 
 interface TooltipProps {
   onUpdateVersion: () => void;
-  templateId: string;
+  latestVersionId: string;
   templateName: string;
   ariaLabel?: string;
 }
 
 export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
   onUpdateVersion,
   ariaLabel,
-  templateId,
+  latestVersionId,
   templateName,
 }) => {
   const styles = useStyles();
-  const { data: activeVersion } = useQuery({
-    queryFn: async () => {
-      const template = await getTemplate(templateId);
-      const activeVersion = await getTemplateVersion(
-        template.active_version_id,
-      );
-      return activeVersion;
-    },
-    queryKey: ["templates", templateId, "activeVersion"],
-  });
+  const { data: activeVersion } = useQuery(templateVersion(latestVersionId));
 
   return (
     <HelpTooltip

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -60,6 +60,7 @@ export interface WorkspaceProps {
   builds?: TypesGen.WorkspaceBuild[];
   templateWarnings?: TypesGen.TemplateVersionWarning[];
   canUpdateWorkspace: boolean;
+  updateMessage?: string;
   canRetryDebugMode: boolean;
   canChangeVersions: boolean;
   hideSSHButton?: boolean;
@@ -93,6 +94,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   resources,
   builds,
   canUpdateWorkspace,
+  updateMessage,
   canRetryDebugMode,
   canChangeVersions,
   workspaceErrors,
@@ -219,6 +221,12 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
           className={styles.firstColumnSpacer}
           spacing={4}
         >
+          {workspace.outdated && (
+            <Alert severity="info">
+              <AlertTitle>An update is available for your workspace</AlertTitle>
+              {updateMessage && <AlertDetail>{updateMessage}</AlertDetail>}
+            </Alert>
+          )}
           {buildError}
           {cancellationError}
           {workspace.latest_build.status === "running" &&

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -24,13 +24,13 @@ export const UpdateButton: FC<WorkspaceAction> = ({
   return (
     <LoadingButton
       loading={loading}
-      loadingIndicator="Updating..."
+      loadingIndicator={<>Updating&hellip;</>}
       loadingPosition="start"
       data-testid="workspace-update-button"
       startIcon={<CloudQueueIcon />}
       onClick={handleAction}
     >
-      Update
+      Update&hellip;
     </LoadingButton>
   );
 };
@@ -42,7 +42,7 @@ export const ActivateButton: FC<WorkspaceAction> = ({
   return (
     <LoadingButton
       loading={loading}
-      loadingIndicator="Activating..."
+      loadingIndicator={<>Activating&hellip;</>}
       loadingPosition="start"
       startIcon={<PowerSettingsNewIcon />}
       onClick={handleAction}
@@ -70,7 +70,7 @@ export const StartButton: FC<
     >
       <LoadingButton
         loading={loading}
-        loadingIndicator="Starting..."
+        loadingIndicator={<>Starting&hellip;</>}
         loadingPosition="start"
         startIcon={<PlayCircleOutlineIcon />}
         onClick={() => handleAction()}
@@ -90,7 +90,7 @@ export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
   return (
     <LoadingButton
       loading={loading}
-      loadingIndicator="Stopping..."
+      loadingIndicator={<>Stopping&hellip;</>}
       loadingPosition="start"
       startIcon={<CropSquareIcon />}
       onClick={handleAction}
@@ -119,13 +119,13 @@ export const RestartButton: FC<
     >
       <LoadingButton
         loading={loading}
-        loadingIndicator="Restarting..."
+        loadingIndicator={<>Restarting&hellip;</>}
         loadingPosition="start"
         startIcon={<ReplayIcon />}
         onClick={() => handleAction()}
         data-testid="workspace-restart-button"
       >
-        Restart
+        Restart&hellip;
       </LoadingButton>
       <BuildParametersPopover
         workspace={workspace}

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -148,12 +148,15 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
           {canChangeVersions && (
             <MenuItem onClick={onMenuItemClick(handleChangeVersion)}>
               <HistoryOutlined />
-              Change version
+              Change version&hellip;
             </MenuItem>
           )}
-          <MenuItem onClick={onMenuItemClick(handleDelete)}>
+          <MenuItem
+            onClick={onMenuItemClick(handleDelete)}
+            data-testid="delete-button"
+          >
             <DeleteOutlined />
-            Delete
+            Delete&hellip;
           </MenuItem>
         </Menu>
       </div>

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -24,13 +24,13 @@ import {
   MockEntitlementsWithScheduling,
   MockDeploymentConfig,
 } from "testHelpers/entities";
-import * as api from "../../api/api";
-import { Workspace } from "../../api/typesGenerated";
+import * as api from "api/api";
+import { Workspace } from "api/typesGenerated";
 import {
   renderWithAuth,
   waitForLoaderToBeRemoved,
-} from "../../testHelpers/renderHelpers";
-import { server } from "../../testHelpers/server";
+} from "testHelpers/renderHelpers";
+import { server } from "testHelpers/server";
 import { WorkspacePage } from "./WorkspacePage";
 
 // It renders the workspace page and waits for it be loaded
@@ -113,7 +113,7 @@ describe("WorkspacePage", () => {
     await user.click(trigger);
 
     // Click on delete
-    const button = await screen.findByText("Delete");
+    const button = await screen.findByTestId("delete-button");
     await user.click(button);
 
     // Get dialog and confirm
@@ -172,28 +172,6 @@ describe("WorkspacePage", () => {
     });
   });
 
-  it("requests a stop without confirmation when the user presses Restart", async () => {
-    const stopWorkspaceMock = jest
-      .spyOn(api, "stopWorkspace")
-      .mockResolvedValueOnce(MockWorkspaceBuild);
-    window.localStorage.setItem(
-      `${MockUser.id}_ignoredWarnings`,
-      JSON.stringify({ restart: new Date().toISOString() }),
-    );
-
-    // Render
-    await renderWorkspacePage();
-
-    // Actions
-    const user = userEvent.setup();
-    await user.click(screen.getByTestId("workspace-restart-button"));
-
-    // Assertions
-    await waitFor(() => {
-      expect(stopWorkspaceMock).toBeCalled();
-    });
-  });
-
   it("requests cancellation when the user presses Cancel", async () => {
     server.use(
       rest.get(
@@ -409,44 +387,4 @@ describe("WorkspacePage", () => {
       });
     });
   });
-
-  it("restart the workspace with one time parameters without the confirmation dialog", async () => {
-    window.localStorage.setItem(
-      `${MockUser.id}_ignoredWarnings`,
-      JSON.stringify({
-        restart: new Date().toISOString(),
-      }),
-    );
-    jest.spyOn(api, "getWorkspaceParameters").mockResolvedValue({
-      templateVersionRichParameters: [
-        {
-          ...MockTemplateVersionParameter1,
-          ephemeral: true,
-          name: "rebuild",
-          description: "Rebuild",
-          required: false,
-        },
-      ],
-      buildParameters: [{ name: "rebuild", value: "false" }],
-    });
-    const restartWorkspaceSpy = jest.spyOn(api, "restartWorkspace");
-    const user = userEvent.setup();
-    await renderWorkspacePage();
-    await user.click(screen.getByTestId("build-parameters-button"));
-    const buildParametersForm = await screen.findByTestId(
-      "build-parameters-form",
-    );
-    const rebuildField = within(buildParametersForm).getByLabelText("Rebuild", {
-      exact: false,
-    });
-    await user.clear(rebuildField);
-    await user.type(rebuildField, "true");
-    await user.click(screen.getByTestId("build-parameters-submit"));
-    await waitFor(() => {
-      expect(restartWorkspaceSpy).toBeCalledWith({
-        workspace: MockWorkspace,
-        buildParameters: [{ name: "rebuild", value: "true" }],
-      });
-    });
-  });
 });