refactor: remove enums from workspace actions

coder · Parkreiner · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
commit a1d4ed81c835f716d8521e81ab6ef6d1df58723c
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -11,11 +11,7 @@ import {
   UpdateButton,
   ActivateButton,
 } from "./Buttons";
-import {
-  ButtonMapping,
-  ButtonTypesEnum,
-  actionsByWorkspaceStatus,
-} from "./constants";
+import { ButtonMapping, actionsByWorkspaceStatus } from "./constants";
 
 import Divider from "@mui/material/Divider";
 import DuplicateIcon from "@mui/icons-material/FileCopyOutlined";
@@ -76,42 +72,32 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   const { duplicateWorkspace, isDuplicationReady } =
     useWorkspaceDuplication(workspace);
 
-  // A mapping of button type to the corresponding React component
+  // A mapping of button type to their corresponding React components
   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} />,
   };
 
   return (
@@ -120,18 +106,17 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
       data-testid="workspace-actions"
     >
       {canBeUpdated &&
-        (isUpdating
-          ? buttonMapping[ButtonTypesEnum.updating]
-          : buttonMapping[ButtonTypesEnum.update])}
+        (isUpdating ? buttonMapping.updating : buttonMapping.update)}
 
-      {isRestarting && buttonMapping[ButtonTypesEnum.restarting]}
+      {isRestarting && buttonMapping.restarting}
 
       {!isRestarting &&
         actionsByStatus.map((action) => (
           <Fragment key={action}>{buttonMapping[action]}</Fragment>
         ))}
 
       {canCancel && <CancelButton handleAction={handleCancel} />}
+
       <MoreMenu>
         <MoreMenuTrigger>
           <ThreeDotsButton

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts b/site/src/pages/WorkspacePage/WorkspaceActions/constants.ts
@@ -2,31 +2,39 @@ import { Workspace, WorkspaceStatus } from "api/typesGenerated";
 import { ReactNode } from "react";
 import { workspaceUpdatePolicy } from "utils/workspace";
 
-// 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",
-}
+/**
+ * An iterable of all button types supported by the workspace actions UI
+ */
+const buttonTypes = [
+  "start",
+  "starting",
+  "stop",
+  "stopping",
+  "restart",
+  "restarting",
+  "deleting",
+  "update",
+  "updating",
+  "activate",
+  "activating",
+
+  // These are buttons that should be with disabled UI elements
+  "canceling",
+  "deleted",
+  "pending",
+] as const;
+
+/**
+ * A button type supported by the workspace actions UI
+ */
+export type ButtonType = (typeof buttonTypes)[number];
 
 export type ButtonMapping = {
-  [key in ButtonTypesEnum]: ReactNode;
+  [key in ButtonType]: ReactNode;
 };
 
 interface WorkspaceAbilities {
-  actions: ButtonTypesEnum[];
+  actions: ButtonType[];
   canCancel: boolean;
   canAcceptJobs: boolean;
 }
@@ -38,7 +46,7 @@ export const actionsByWorkspaceStatus = (
 ): WorkspaceAbilities => {
   if (workspace.dormant_at) {
     return {
-      actions: [ButtonTypesEnum.activate],
+      actions: ["activate"],
       canCancel: false,
       canAcceptJobs: false,
     };
@@ -49,7 +57,7 @@ export const actionsByWorkspaceStatus = (
   ) {
     if (status === "running") {
       return {
-        actions: [ButtonTypesEnum.stop],
+        actions: ["stop"],
         canCancel: false,
         canAcceptJobs: true,
       };
@@ -67,56 +75,56 @@ export const actionsByWorkspaceStatus = (
 
 const statusToActions: Record<WorkspaceStatus, WorkspaceAbilities> = {
   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,
   },