refactor: remove enums from workspace actions

Parkreiner · Parkreiner · commit 24169583da7d · 2023-10-10T13:21:03.000Z
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -14,14 +14,10 @@ import {
   UpdateButton,
   ActivateButton,
 } from "./Buttons";
-import {
-  ButtonMapping,
-  ButtonTypesEnum,
-  actionsByWorkspaceStatus,
-} from "./constants";
-import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
-import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
-import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
+import { ButtonMapping, actionsByWorkspaceStatus } from "./constants";
+import SettingsIcon from "@mui/icons-material/SettingsOutlined";
+import HistoryIcon from "@mui/icons-material/HistoryOutlined";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import IconButton from "@mui/material/IconButton";
 
 export interface WorkspaceActionsProps {
@@ -68,40 +64,30 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
   // A mapping of button type to the corresponding React component
   const buttonMapping: ButtonMapping = {
-    [ButtonTypesEnum.update]: <UpdateButton handleAction={handleUpdate} />,
-    [ButtonTypesEnum.updating]: (
-      <UpdateButton loading handleAction={handleUpdate} />
-    ),
-    [ButtonTypesEnum.start]: (
-      <StartButton workspace={workspace} handleAction={handleStart} />
-    ),
-    [ButtonTypesEnum.starting]: (
+    update: <UpdateButton handleAction={handleUpdate} />,
+    updating: <UpdateButton loading handleAction={handleUpdate} />,
+    start: <StartButton workspace={workspace} handleAction={handleStart} />,
+    starting: (
       <StartButton loading workspace={workspace} handleAction={handleStart} />
     ),
-    [ButtonTypesEnum.stop]: <StopButton handleAction={handleStop} />,
-    [ButtonTypesEnum.stopping]: (
-      <StopButton loading handleAction={handleStop} />
-    ),
-    [ButtonTypesEnum.restart]: (
+    stop: <StopButton handleAction={handleStop} />,
+    stopping: <StopButton loading handleAction={handleStop} />,
+    restart: (
       <RestartButton workspace={workspace} handleAction={handleRestart} />
     ),
-    [ButtonTypesEnum.restarting]: (
+    restarting: (
       <RestartButton
         loading
         workspace={workspace}
         handleAction={handleRestart}
       />
     ),
-    [ButtonTypesEnum.deleting]: <ActionLoadingButton label="Deleting" />,
-    [ButtonTypesEnum.canceling]: <DisabledButton label="Canceling..." />,
-    [ButtonTypesEnum.deleted]: <DisabledButton label="Deleted" />,
-    [ButtonTypesEnum.pending]: <ActionLoadingButton label="Pending..." />,
-    [ButtonTypesEnum.activate]: (
-      <ActivateButton handleAction={handleDormantActivate} />
-    ),
-    [ButtonTypesEnum.activating]: (
-      <ActivateButton loading handleAction={handleDormantActivate} />
-    ),
+    deleting: <ActionLoadingButton label="Deleting" />,
+    canceling: <DisabledButton label="Canceling..." />,
+    deleted: <DisabledButton label="Deleted" />,
+    pending: <ActionLoadingButton label="Pending..." />,
+    activate: <ActivateButton handleAction={handleDormantActivate} />,
+    activating: <ActivateButton loading handleAction={handleDormantActivate} />,
   };
 
   // Returns a function that will execute the action and close the menu
@@ -113,10 +99,8 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   return (
     <div className={styles.actions} data-testid="workspace-actions">
       {canBeUpdated &&
-        (isUpdating
-          ? buttonMapping[ButtonTypesEnum.updating]
-          : buttonMapping[ButtonTypesEnum.update])}
-      {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
+        (isUpdating ? buttonMapping.updating : buttonMapping.update)}
+      {isRestarting && buttonMapping.restarting}
       {!isRestarting &&
         actionsByStatus.map((action) => (
           <Fragment key={action}>{buttonMapping[action]}</Fragment>
@@ -142,20 +126,20 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
           onClose={() => setIsMenuOpen(false)}
         >
           <MenuItem onClick={onMenuItemClick(handleSettings)}>
-            <SettingsOutlined />
+            <SettingsIcon />
             Settings
           </MenuItem>
           {canChangeVersions && (
             <MenuItem onClick={onMenuItemClick(handleChangeVersion)}>
-              <HistoryOutlined />
+              <HistoryIcon />
               Change version&hellip;
             </MenuItem>
           )}
           <MenuItem
             onClick={onMenuItemClick(handleDelete)}
             data-testid="delete-button"
           >
-            <DeleteOutlined />
+            <DeleteIcon />
             Delete&hellip;
           </MenuItem>
         </Menu>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts b/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts
@@ -1,31 +1,27 @@
-import { Workspace, WorkspaceStatus } from "api/typesGenerated";
-import { ReactNode } from "react";
+import { type Workspace, type WorkspaceStatus } from "api/typesGenerated";
+import { type ReactElement } from "react";
 
-// the button types we have
-export enum ButtonTypesEnum {
-  start = "start",
-  starting = "starting",
-  stop = "stop",
-  stopping = "stopping",
-  restart = "restart",
-  restarting = "restarting",
-  deleting = "deleting",
-  update = "update",
-  updating = "updating",
-  activate = "activate",
-  activating = "activating",
-  // disabled buttons
-  canceling = "canceling",
-  deleted = "deleted",
-  pending = "pending",
-}
+/**
+ * Buttons supported by workspace actions. Canceling, Deleted, and Pending
+ * should all be associated with disabled states
+ */
+type ButtonType =
+  | Exclude<WorkspaceStatus, "failed" | "canceled" | "running" | "stopped">
+  | "start"
+  | "stop"
+  | "restart"
+  | "restarting"
+  | "update"
+  | "updating"
+  | "activate"
+  | "activating";
 
 export type ButtonMapping = {
-  [key in ButtonTypesEnum]: ReactNode;
+  [key in ButtonType]: ReactElement;
 };
 
 interface WorkspaceAbilities {
-  actions: ButtonTypesEnum[];
+  actions: readonly ButtonType[];
   canCancel: boolean;
   canAcceptJobs: boolean;
 }
@@ -36,67 +32,67 @@ export const actionsByWorkspaceStatus = (
 ): WorkspaceAbilities => {
   if (workspace.dormant_at) {
     return {
-      actions: [ButtonTypesEnum.activate],
+      actions: ["activate"],
       canCancel: false,
       canAcceptJobs: false,
     };
   }
   return statusToActions[status];
 };
 
-const statusToActions: Record<WorkspaceStatus, WorkspaceAbilities> = {
+const statusToActions = {
   starting: {
-    actions: [ButtonTypesEnum.starting],
+    actions: ["starting"],
     canCancel: true,
     canAcceptJobs: false,
   },
   running: {
-    actions: [ButtonTypesEnum.stop, ButtonTypesEnum.restart],
+    actions: ["stop", "restart"],
     canCancel: false,
     canAcceptJobs: true,
   },
   stopping: {
-    actions: [ButtonTypesEnum.stopping],
+    actions: ["stopping"],
     canCancel: true,
     canAcceptJobs: false,
   },
   stopped: {
-    actions: [ButtonTypesEnum.start],
+    actions: ["start"],
     canCancel: false,
     canAcceptJobs: true,
   },
   canceled: {
-    actions: [ButtonTypesEnum.start, ButtonTypesEnum.stop],
+    actions: ["start", "stop"],
     canCancel: false,
     canAcceptJobs: true,
   },
   // in the case of an error
   failed: {
-    actions: [ButtonTypesEnum.start, ButtonTypesEnum.stop],
+    actions: ["start", "stop"],
     canCancel: false,
     canAcceptJobs: true,
   },
   /**
    * disabled states
    */
   canceling: {
-    actions: [ButtonTypesEnum.canceling],
+    actions: ["canceling"],
     canCancel: false,
     canAcceptJobs: false,
   },
   deleting: {
-    actions: [ButtonTypesEnum.deleting],
+    actions: ["deleting"],
     canCancel: true,
     canAcceptJobs: false,
   },
   deleted: {
-    actions: [ButtonTypesEnum.deleted],
+    actions: ["deleted"],
     canCancel: false,
     canAcceptJobs: false,
   },
   pending: {
-    actions: [ButtonTypesEnum.pending],
+    actions: ["pending"],
     canCancel: false,
     canAcceptJobs: false,
   },
-};
+} as const satisfies Record<WorkspaceStatus, WorkspaceAbilities>;
