Refactor primary buttons

BrunoQuaresma · BrunoQuaresma · commit ebf001122d67 · 2023-04-13T14:07:05.000Z
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 import { WorkspaceStatus } from "../../api/typesGenerated"
 import {
   ActionLoadingButton,
+  CancelButton,
   ChangeVersionButton,
   DeleteButton,
   DisabledButton,
@@ -43,7 +44,8 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   canChangeVersions,
 }) => {
   const { t } = useTranslation("workspacePage")
-  const { canCancel, canAcceptJobs, actions } = buttonAbilities(workspaceStatus)
+  const { canCancel, canAcceptJobs, primaryActions, secondaryActions } =
+    buttonAbilities(workspaceStatus)
   const canBeUpdated = isOutdated && canAcceptJobs
 
   // A mapping of button type to the corresponding React component
@@ -83,26 +85,36 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     ),
   }
 
-  // memoize so this isn't recalculated every time we fetch the workspace
-  const [primaryAction, ...secondaryActions] = useMemo(
-    () =>
-      isUpdating
-        ? [ButtonTypesEnum.updating, ...actions]
-        : canBeUpdated
-        ? [ButtonTypesEnum.update, ...actions]
-        : actions,
-    [actions, canBeUpdated, isUpdating],
-  )
-
   return (
-    <DropdownButton
-      primaryAction={buttonMapping[primaryAction]}
-      canCancel={canCancel}
-      handleCancel={handleCancel}
-      secondaryActions={secondaryActions.map((action) => ({
-        action,
-        button: buttonMapping[action],
-      }))}
-    />
+    <div>
+      {canBeUpdated &&
+        (isUpdating
+          ? buttonMapping[ButtonTypesEnum.updating]
+          : buttonMapping[ButtonTypesEnum.update])}
+      {primaryActions.map((primaryAction) => buttonMapping[primaryAction])}
+      {canCancel && <CancelButton handleAction={handleCancel} />}
+    </div>
   )
+  // // memoize so this isn't recalculated every time we fetch the workspace
+  // const [primaryAction, ...secondaryActions] = useMemo(
+  //   () =>
+  //     isUpdating
+  //       ? [ButtonTypesEnum.updating, ...actions]
+  //       : canBeUpdated
+  //       ? [ButtonTypesEnum.update, ...actions]
+  //       : actions,
+  //   [actions, canBeUpdated, isUpdating],
+  // )
+
+  // return (
+  //   <DropdownButton
+  //     primaryAction={buttonMapping[primaryAction]}
+  //     canCancel={canCancel}
+  //     handleCancel={handleCancel}
+  //     secondaryActions={secondaryActions.map((action) => ({
+  //       action,
+  //       button: buttonMapping[action],
+  //     }))}
+  //   />
+  // )
 }
diff --git a/site/src/components/WorkspaceActions/constants.ts b/site/src/components/WorkspaceActions/constants.ts
@@ -24,7 +24,8 @@ export type ButtonMapping = {
 }
 
 interface WorkspaceAbilities {
-  actions: ButtonTypesEnum[]
+  primaryActions: ButtonTypesEnum[]
+  secondaryActions?: ButtonTypesEnum[]
   canCancel: boolean
   canAcceptJobs: boolean
 }
@@ -35,80 +36,68 @@ export const buttonAbilities = (
   return statusToAbilities[status]
 }
 
+const defaultSecondaryActions = [
+  ButtonTypesEnum.settings,
+  ButtonTypesEnum.changeVersion,
+  ButtonTypesEnum.delete,
+]
+
 const statusToAbilities: Record<WorkspaceStatus, WorkspaceAbilities> = {
   starting: {
-    actions: [ButtonTypesEnum.starting],
+    primaryActions: [ButtonTypesEnum.starting],
     canCancel: true,
     canAcceptJobs: false,
   },
   running: {
-    actions: [
-      ButtonTypesEnum.stop,
-      ButtonTypesEnum.settings,
-      ButtonTypesEnum.changeVersion,
-      ButtonTypesEnum.delete,
-    ],
+    primaryActions: [ButtonTypesEnum.stop],
+    secondaryActions: defaultSecondaryActions,
     canCancel: false,
     canAcceptJobs: true,
   },
   stopping: {
-    actions: [ButtonTypesEnum.stopping],
+    primaryActions: [ButtonTypesEnum.stopping],
     canCancel: true,
     canAcceptJobs: false,
   },
   stopped: {
-    actions: [
-      ButtonTypesEnum.start,
-      ButtonTypesEnum.settings,
-      ButtonTypesEnum.changeVersion,
-      ButtonTypesEnum.delete,
-    ],
+    primaryActions: [ButtonTypesEnum.start],
+    secondaryActions: defaultSecondaryActions,
     canCancel: false,
     canAcceptJobs: true,
   },
   canceled: {
-    actions: [
-      ButtonTypesEnum.start,
-      ButtonTypesEnum.stop,
-      ButtonTypesEnum.settings,
-      ButtonTypesEnum.changeVersion,
-      ButtonTypesEnum.delete,
-    ],
+    primaryActions: [ButtonTypesEnum.start, ButtonTypesEnum.stop],
+    secondaryActions: defaultSecondaryActions,
     canCancel: false,
     canAcceptJobs: true,
   },
   // in the case of an error
   failed: {
-    actions: [
-      ButtonTypesEnum.start,
-      ButtonTypesEnum.stop,
-      ButtonTypesEnum.settings,
-      ButtonTypesEnum.changeVersion,
-      ButtonTypesEnum.delete,
-    ],
+    primaryActions: [ButtonTypesEnum.start, ButtonTypesEnum.stop],
+    secondaryActions: defaultSecondaryActions,
     canCancel: false,
     canAcceptJobs: true,
   },
   /**
    * disabled states
    */
   canceling: {
-    actions: [ButtonTypesEnum.canceling],
+    primaryActions: [ButtonTypesEnum.canceling],
     canCancel: false,
     canAcceptJobs: false,
   },
   deleting: {
-    actions: [ButtonTypesEnum.deleting],
+    primaryActions: [ButtonTypesEnum.deleting],
     canCancel: true,
     canAcceptJobs: false,
   },
   deleted: {
-    actions: [ButtonTypesEnum.deleted],
+    primaryActions: [ButtonTypesEnum.deleted],
     canCancel: false,
     canAcceptJobs: true,
   },
   pending: {
-    actions: [ButtonTypesEnum.pending],
+    primaryActions: [ButtonTypesEnum.pending],
     canCancel: false,
     canAcceptJobs: false,
   },
