coder · Parkreiner · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { WatchAgentMetadataContext } from "components/Resources/AgentMetadata";
 import { ProvisionerJobLog } from "api/typesGenerated";
 import * as Mocks from "testHelpers/entities";
-import { Workspace, WorkspaceErrors } from "./Workspace";
+import { Workspace } from "./Workspace";
 import { withReactContext } from "storybook-react-context";
 import EventSource from "eventsourcemock";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
@@ -133,7 +133,7 @@ export const Failed: Story = {
     ...Running.args,
     workspace: Mocks.MockFailedWorkspace,
     workspaceErrors: {
-      [WorkspaceErrors.BUILD_ERROR]: Mocks.mockApiError({
+      buildError: Mocks.mockApiError({
         message: "A workspace build is already active.",
       }),
     },
@@ -224,7 +224,7 @@ export const GetBuildsError: Story = {
   args: {
     ...Running.args,
     workspaceErrors: {
-      [WorkspaceErrors.GET_BUILDS_ERROR]: Mocks.mockApiError({
+      getBuildsError: Mocks.mockApiError({
         message: "There is a problem fetching builds.",
       }),
     },
@@ -235,7 +235,7 @@ export const CancellationError: Story = {
   args: {
     ...Failed.args,
     workspaceErrors: {
-      [WorkspaceErrors.CANCELLATION_ERROR]: Mocks.mockApiError({
+      cancellationError: Mocks.mockApiError({
         message: "Job could not be canceled.",
       }),
     },

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -29,11 +29,13 @@ import { BuildsTable } from "./BuildsTable";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { WorkspaceStats } from "./WorkspaceStats";
 
-export enum WorkspaceErrors {
-  GET_BUILDS_ERROR = "getBuildsError",
-  BUILD_ERROR = "buildError",
-  CANCELLATION_ERROR = "cancellationError",
-}
+export type WorkspaceError =
+  | "getBuildsError"
+  | "buildError"
+  | "cancellationError";
+
+export type WorkspaceErrors = Partial<Record<WorkspaceError, unknown>>;
+
 export interface WorkspaceProps {
   scheduleProps: {
     onDeadlinePlus: (hours: number) => void;
@@ -60,7 +62,7 @@ export interface WorkspaceProps {
   canChangeVersions: boolean;
   hideSSHButton?: boolean;
   hideVSCodeDesktopButton?: boolean;
-  workspaceErrors: Partial<Record<WorkspaceErrors, unknown>>;
+  workspaceErrors: WorkspaceErrors;
   buildInfo?: TypesGen.BuildInfoResponse;
   sshPrefix?: string;
   template?: TypesGen.Template;
@@ -111,31 +113,14 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   canAutostart,
 }) => {
   const navigate = useNavigate();
-  const serverVersion = buildInfo?.version || "";
   const { saveLocal, getLocal } = useLocalStorage();
 
-  const buildError = Boolean(workspaceErrors[WorkspaceErrors.BUILD_ERROR]) && (
-    <ErrorAlert
-      error={workspaceErrors[WorkspaceErrors.BUILD_ERROR]}
-      dismissible
-    />
-  );
-
-  const cancellationError = Boolean(
-    workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR],
-  ) && (
-    <ErrorAlert
-      error={workspaceErrors[WorkspaceErrors.CANCELLATION_ERROR]}
-      dismissible
-    />
-  );
-
-  let transitionStats: TypesGen.TransitionStats | undefined = undefined;
-  if (template !== undefined) {
-    transitionStats = ActiveTransition(template, workspace);
-  }
-
   const [showAlertPendingInQueue, setShowAlertPendingInQueue] = useState(false);
+
+  // 2023-11-08 - MES - This effect will be called every single render because
+  // "now" will always change and invalidate the dependency array. Need to
+  // figure out if this effect really should run every render (possibly meaning
+  // no dependency array at all), or how to get the array stabilized (ideal)
   const now = dayjs();
   useEffect(() => {
     if (
@@ -174,6 +159,9 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   const autoStartFailing = workspace.autostart_schedule && !canAutostart;
   const requiresManualUpdate = updateRequired && autoStartFailing;
 
+  const transitionStats =
+    template !== undefined ? ActiveTransition(template, workspace) : undefined;
+
   return (
     <>
       <FullWidthPageHeader>
@@ -213,6 +201,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               handleUpdate={handleUpdate}
               handleCancel={handleCancel}
               handleSettings={handleSettings}
+              handleRetry={handleBuildRetry}
               handleChangeVersion={handleChangeVersion}
               handleDormantActivate={handleDormantActivate}
               canChangeVersions={canChangeVersions}
@@ -244,8 +233,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
                 {updateMessage && <AlertDetail>{updateMessage}</AlertDetail>}
               </Alert>
             ))}
-          {buildError}
-          {cancellationError}
+
+          {Boolean(workspaceErrors.buildError) && (
+            <ErrorAlert error={workspaceErrors.buildError} dismissible />
+          )}
+
+          {Boolean(workspaceErrors.cancellationError) && (
+            <ErrorAlert error={workspaceErrors.cancellationError} dismissible />
+          )}
+
           {workspace.latest_build.status === "running" &&
             !workspace.health.healthy && (
               <Alert
@@ -313,7 +309,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               actions={
                 canRetryDebugMode && (
                   <Button
-                    key={0}
                     onClick={handleBuildRetry}
                     variant="text"
                     size="small"
@@ -350,17 +345,15 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
                   showBuiltinApps={canUpdateWorkspace}
                   hideSSHButton={hideSSHButton}
                   hideVSCodeDesktopButton={hideVSCodeDesktopButton}
-                  serverVersion={serverVersion}
+                  serverVersion={buildInfo?.version || ""}
                   onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
                 />
               )}
             />
           )}
 
-          {workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR] ? (
-            <ErrorAlert
-              error={workspaceErrors[WorkspaceErrors.GET_BUILDS_ERROR]}
-            />
+          {workspaceErrors.getBuildsError ? (
+            <ErrorAlert error={workspaceErrors.getBuildsError} />
           ) : (
             <BuildsTable
               builds={builds}

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -1,23 +1,25 @@
+import { type FC } from "react";
+import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
+import { BuildParametersPopover } from "./BuildParametersPopover";
+
 import Button from "@mui/material/Button";
-import BlockIcon from "@mui/icons-material/Block";
+import LoadingButton from "@mui/lab/LoadingButton";
+import ButtonGroup from "@mui/material/ButtonGroup";
 import CloudQueueIcon from "@mui/icons-material/CloudQueue";
 import CropSquareIcon from "@mui/icons-material/CropSquare";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import ReplayIcon from "@mui/icons-material/Replay";
-import { FC } from "react";
-import BlockOutlined from "@mui/icons-material/BlockOutlined";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
-import { BuildParametersPopover } from "./BuildParametersPopover";
+import BlockIcon from "@mui/icons-material/Block";
+import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import LoadingButton from "@mui/lab/LoadingButton";
+import RetryIcon from "@mui/icons-material/BuildOutlined";
 
-interface WorkspaceAction {
+interface WorkspaceActionProps {
   loading?: boolean;
   handleAction: () => void;
 }
 
-export const UpdateButton: FC<WorkspaceAction> = ({
+export const UpdateButton: FC<WorkspaceActionProps> = ({
   handleAction,
   loading,
 }) => {
@@ -34,7 +36,7 @@ export const UpdateButton: FC<WorkspaceAction> = ({
   );
 };
 
-export const ActivateButton: FC<WorkspaceAction> = ({
+export const ActivateButton: FC<WorkspaceActionProps> = ({
   handleAction,
   loading,
 }) => {
@@ -51,7 +53,7 @@ export const ActivateButton: FC<WorkspaceAction> = ({
 };
 
 export const StartButton: FC<
-  Omit<WorkspaceAction, "handleAction"> & {
+  Omit<WorkspaceActionProps, "handleAction"> & {
     workspace: Workspace;
     handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
   }
@@ -83,7 +85,10 @@ export const StartButton: FC<
   );
 };
 
-export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
+export const StopButton: FC<WorkspaceActionProps> = ({
+  handleAction,
+  loading,
+}) => {
   return (
     <LoadingButton
       loading={loading}
@@ -98,7 +103,7 @@ export const StopButton: FC<WorkspaceAction> = ({ handleAction, loading }) => {
 };
 
 export const RestartButton: FC<
-  Omit<WorkspaceAction, "handleAction"> & {
+  Omit<WorkspaceActionProps, "handleAction"> & {
     workspace: Workspace;
     handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
   }
@@ -131,7 +136,7 @@ export const RestartButton: FC<
   );
 };
 
-export const CancelButton: FC<WorkspaceAction> = ({ handleAction }) => {
+export const CancelButton: FC<WorkspaceActionProps> = ({ handleAction }) => {
   return (
     <Button startIcon={<BlockIcon />} onClick={handleAction}>
       Cancel
@@ -145,7 +150,7 @@ interface DisabledProps {
 
 export const DisabledButton: FC<DisabledProps> = ({ label }) => {
   return (
-    <Button startIcon={<BlockOutlined />} disabled>
+    <Button startIcon={<OutlinedBlockIcon />} disabled>
       {label}
     </Button>
   );
@@ -162,3 +167,13 @@ export const ActionLoadingButton: FC<LoadingProps> = ({ label }) => {
     </LoadingButton>
   );
 };
+
+export function RetryButton({
+  handleAction,
+}: Omit<WorkspaceActionProps, "loading">) {
+  return (
+    <Button startIcon={<RetryIcon />} onClick={handleAction}>
+      Retry
+    </Button>
+  );
+}