fix: Remove "Starts at Manual" label (#4179)

kylecarbs · web-flow · commit 4f6355506c68 · 2022-10-03T17:03:11.000Z
Fixes #2798.
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.stories.tsx
@@ -72,6 +72,22 @@ WorkspaceOffLong.args = {
   },
 }
 
+export const WorkspaceOn = Template.bind({})
+WorkspaceOn.args = {
+  deadlineMinusEnabled: () => true,
+  deadlinePlusEnabled: () => true,
+  workspace: {
+    ...Mocks.MockWorkspace,
+
+    latest_build: {
+      ...Mocks.MockWorkspaceBuild,
+      transition: "start",
+      deadline: "2022-05-17T23:59:00.00Z",
+    },
+    ttl_ms: 2 * 365 * 24 * 60 * 60 * 1000, // 2 years
+  },
+}
+
 export const CannotEdit = Template.bind({})
 CannotEdit.args = {
   workspace: {
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -31,6 +31,16 @@ export const shouldDisplayPlusMinus = (workspace: Workspace): boolean => {
   return isWorkspaceOn(workspace) && Boolean(workspace.latest_build.deadline)
 }
 
+export const shouldDisplayScheduleLabel = (workspace: Workspace): boolean => {
+  if (shouldDisplayPlusMinus(workspace)) {
+    return true
+  }
+  if (isWorkspaceOn(workspace)) {
+    return false
+  }
+  return Boolean(workspace.autostart_schedule)
+}
+
 export interface WorkspaceScheduleButtonProps {
   workspace: Workspace
   onDeadlinePlus: () => void
@@ -60,41 +70,45 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
 
   return (
     <span className={styles.wrapper}>
-      <span className={styles.label}>
-        <WorkspaceScheduleLabel workspace={workspace} />
-        {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
-          <span className={styles.actions}>
-            <IconButton
-              className={styles.iconButton}
-              size="small"
-              disabled={!deadlineMinusEnabled()}
-              onClick={onDeadlineMinus}
-            >
-              <Tooltip title={t("workspaceScheduleButton.editDeadlineMinus")}>
-                <RemoveIcon />
-              </Tooltip>
-            </IconButton>
-            <IconButton
-              className={styles.iconButton}
-              size="small"
-              disabled={!deadlinePlusEnabled()}
-              onClick={onDeadlinePlus}
-            >
-              <Tooltip title={t("workspaceScheduleButton.editDeadlinePlus")}>
-                <AddIcon />
-              </Tooltip>
-            </IconButton>
-          </span>
-        )}
-      </span>
+      {shouldDisplayScheduleLabel(workspace) && (
+        <span className={styles.label}>
+          <WorkspaceScheduleLabel workspace={workspace} />
+          {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
+            <span className={styles.actions}>
+              <IconButton
+                className={styles.iconButton}
+                size="small"
+                disabled={!deadlineMinusEnabled()}
+                onClick={onDeadlineMinus}
+              >
+                <Tooltip title={t("workspaceScheduleButton.editDeadlineMinus")}>
+                  <RemoveIcon />
+                </Tooltip>
+              </IconButton>
+              <IconButton
+                className={styles.iconButton}
+                size="small"
+                disabled={!deadlinePlusEnabled()}
+                onClick={onDeadlinePlus}
+              >
+                <Tooltip title={t("workspaceScheduleButton.editDeadlinePlus")}>
+                  <AddIcon />
+                </Tooltip>
+              </IconButton>
+            </span>
+          )}
+        </span>
+      )}
       <>
         <Button
           ref={anchorRef}
           startIcon={<ScheduleIcon />}
           onClick={() => {
             setIsOpen(true)
           }}
-          className={styles.scheduleButton}
+          className={`${styles.scheduleButton} ${
+            shouldDisplayScheduleLabel(workspace) ? "label" : ""
+          }`}
         >
           {t("workspaceScheduleButton.schedule")}
         </Button>
@@ -124,8 +138,8 @@ const useStyles = makeStyles((theme) => ({
   wrapper: {
     display: "inline-flex",
     alignItems: "center",
-    border: `1px solid ${theme.palette.divider}`,
     borderRadius: `${theme.shape.borderRadius}px`,
+    border: `1px solid ${theme.palette.divider}`,
 
     [theme.breakpoints.down("sm")]: {
       flexDirection: "column",
@@ -153,15 +167,22 @@ const useStyles = makeStyles((theme) => ({
   },
   scheduleButton: {
     border: "none",
-    borderLeft: `1px solid ${theme.palette.divider}`,
-    borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+    borderRadius: `${theme.shape.borderRadius}px`,
     flexShrink: 0,
 
+    "&.label": {
+      borderLeft: `1px solid ${theme.palette.divider}`,
+      borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+    },
+
     [theme.breakpoints.down("sm")]: {
       width: "100%",
-      borderLeft: 0,
-      borderTop: `1px solid ${theme.palette.divider}`,
-      borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+
+      "&.label": {
+        borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+        borderLeft: 0,
+        borderTop: `1px solid ${theme.palette.divider}`,
+      },
     },
   },
   iconButton: {
