Cleaning up components

coder · BrunoQuaresma · Jul 1, 2022 · Jul 1, 2022 · Jul 1, 2022 · Jul 1, 2022
commit a564dcb1d5fc8b23e1c0d5af3fd23e51e5e26e51
diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -1,6 +1,5 @@
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import cronstrue from "cronstrue"
 import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import duration from "dayjs/plugin/duration"
@@ -11,8 +10,12 @@ import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { Workspace } from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { extractTimezone, stripTimezone } from "../../util/schedule"
-import { isWorkspaceOn } from "../../util/workspace"
+import {
+  autoStartDisplay,
+  autoStopDisplay,
+  extractTimezone,
+  Language as ScheduleLanguage,
+} from "../../util/schedule"
 import { Stack } from "../Stack/Stack"
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
@@ -24,45 +27,6 @@ dayjs.extend(relativeTime)
 dayjs.extend(timezone)
 
 export const Language = {
-  autoStartDisplay: (schedule: string | undefined): string => {
-    if (schedule) {
-      return cronstrue.toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
-    } else {
-      return "Manual"
-    }
-  },
-  autoStartLabel: "Starts at",
-  autoStopLabel: "Stops at",
-  autoStopDisplay: (workspace: Workspace): string => {
-    const deadline = dayjs(workspace.latest_build.deadline).utc()
-    // a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
-    // SEE: #1834
-    const hasDeadline = deadline.year() > 1
-    const ttl = workspace.ttl_ms
-
-    if (isWorkspaceOn(workspace) && hasDeadline) {
-      // Workspace is on --> derive from latest_build.deadline. Note that the
-      // user may modify their workspace object (ttl) while the workspace is
-      // running and depending on system semantics, the deadline may still
-      // represent the previously defined ttl. Thus, we always derive from the
-      // deadline as the source of truth.
-      const now = dayjs().utc()
-      if (now.isAfter(deadline)) {
-        return "Workspace is shutting down"
-      } else {
-        return deadline.tz(dayjs.tz.guess()).format("MMM D, YYYY h:mm A")
-      }
-    } else if (!ttl || ttl < 1) {
-      // If the workspace is not on, and the ttl is 0 or undefined, then the
-      // workspace is set to manually shutdown.
-      return "Manual"
-    } else {
-      // The workspace has a ttl set, but is either in an unknown state or is
-      // not running. Therefore, we derive from workspace.ttl.
-      const duration = dayjs.duration(ttl, "milliseconds")
-      return `${duration.humanize()} after start`
-    }
-  },
   editScheduleLink: "Edit schedule",
   timezoneLabel: "Timezone",
 }
@@ -85,16 +49,16 @@ export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) =>
           <span className={styles.scheduleValue}>{timezone}</span>
         </div>
         <div>
-          <span className={styles.scheduleLabel}>{Language.autoStartLabel}</span>
+          <span className={styles.scheduleLabel}>{ScheduleLanguage.autoStartLabel}</span>
           <span className={[styles.scheduleValue, "chromatic-ignore"].join(" ")}>
-            {Language.autoStartDisplay(workspace.autostart_schedule)}
+            {autoStartDisplay(workspace.autostart_schedule)}
           </span>
         </div>
         <div>
-          <span className={styles.scheduleLabel}>{Language.autoStopLabel}</span>
+          <span className={styles.scheduleLabel}>{ScheduleLanguage.autoStopLabel}</span>
           <Stack direction="row">
             <span className={[styles.scheduleValue, "chromatic-ignore"].join(" ")}>
-              {Language.autoStopDisplay(workspace)}
+              {autoStopDisplay(workspace)}
             </span>
           </Stack>
         </div>

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -6,7 +6,6 @@ import Tooltip from "@material-ui/core/Tooltip"
 import AddIcon from "@material-ui/icons/Add"
 import RemoveIcon from "@material-ui/icons/Remove"
 import ScheduleIcon from "@material-ui/icons/Schedule"
-import cronstrue from "cronstrue"
 import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import duration from "dayjs/plugin/duration"
@@ -15,10 +14,10 @@ import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
 import { useRef, useState } from "react"
 import { Workspace } from "../../api/typesGenerated"
-import { extractTimezone, stripTimezone } from "../../util/schedule"
 import { isWorkspaceOn } from "../../util/workspace"
 import { Stack } from "../Stack/Stack"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
+import { WorkspaceScheduleLabel } from "./WorkspaceScheduleLabel"
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
 //         sorted alphabetically.
@@ -29,60 +28,8 @@ dayjs.extend(relativeTime)
 dayjs.extend(timezone)
 
 export const Language = {
-  autoStartDisplay: (schedule: string | undefined): string => {
-    if (schedule) {
-      return (
-        cronstrue
-          .toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
-          // We don't want to keep the At because it is on the label
-          .replace("At", "")
-      )
-    } else {
-      return "Manual"
-    }
-  },
-  autoStartLabel: "Starts at",
-  autoStopLabel: "Stops at",
-  workspaceShuttingDownLabel: "Workspace is shutting down",
-  autoStopDisplay: (workspace: Workspace): string => {
-    const deadline = dayjs(workspace.latest_build.deadline).utc()
-    // a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
-    // SEE: #1834
-    const hasDeadline = deadline.year() > 1
-    const ttl = workspace.ttl_ms
-
-    if (isWorkspaceOn(workspace) && hasDeadline) {
-      // Workspace is on --> derive from latest_build.deadline. Note that the
-      // user may modify their workspace object (ttl) while the workspace is
-      // running and depending on system semantics, the deadline may still
-      // represent the previously defined ttl. Thus, we always derive from the
-      // deadline as the source of truth.
-      const now = dayjs().utc()
-      if (now.isAfter(deadline)) {
-        return Language.workspaceShuttingDownLabel
-      } else {
-        return deadline.tz(dayjs.tz.guess()).format("MMM D, YYYY h:mm A")
-      }
-    } else if (!ttl || ttl < 1) {
-      // If the workspace is not on, and the ttl is 0 or undefined, then the
-      // workspace is set to manually shutdown.
-      return "Manual"
-    } else {
-      // The workspace has a ttl set, but is either in an unknown state or is
-      // not running. Therefore, we derive from workspace.ttl.
-      const duration = dayjs.duration(ttl, "milliseconds")
-      return `${duration.humanize()} after start`
-    }
-  },
-  editScheduleLink: "Edit schedule",
   editDeadlineMinus: "Subtract one hour",
   editDeadlinePlus: "Add one hour",
-  scheduleHeader: (workspace: Workspace): string => {
-    const tz = workspace.autostart_schedule
-      ? extractTimezone(workspace.autostart_schedule)
-      : dayjs.tz.guess()
-    return `Schedule (${tz})`
-  },
 }
 
 export const shouldDisplayPlusMinus = (workspace: Workspace): boolean => {
@@ -103,44 +50,16 @@ export const deadlinePlusDisabled = (workspace: Workspace, now: dayjs.Dayjs): bo
   return delta >= 24 * 60 * 60 * 1000 // 24 hours
 }
 
-const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ workspace }) => {
-  const styles = useStyles()
-
-  if (isWorkspaceOn(workspace)) {
-    const stopLabel = Language.autoStopDisplay(workspace)
-    const isShuttingDown = stopLabel === Language.workspaceShuttingDownLabel
-
-    // If it is shutting down, we don't need to display the auto stop label
-    return (
-      <span className={styles.labelText}>
-        {!isShuttingDown && (
-          <strong className={styles.labelStrong}>{Language.autoStopLabel}</strong>
-        )}
-        {stopLabel}
-      </span>
-    )
-  }
-
-  return (
-    <span className={styles.labelText}>
-      <strong className={styles.labelStrong}>{Language.autoStartLabel}</strong>
-      {Language.autoStartDisplay(workspace.autostart_schedule)}
-    </span>
-  )
-}
-
 export interface WorkspaceScheduleButtonProps {
   workspace: Workspace
   onDeadlinePlus: () => void
   onDeadlineMinus: () => void
-  now?: dayjs.Dayjs
 }
 
 export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = ({
   workspace,
   onDeadlinePlus,
   onDeadlineMinus,
-  now,
 }) => {
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
@@ -160,7 +79,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
             <IconButton
               className={styles.iconButton}
               size="small"
-              disabled={deadlineMinusDisabled(workspace, now ?? dayjs())}
+              disabled={deadlineMinusDisabled(workspace, dayjs())}
               onClick={onDeadlineMinus}
             >
               <Tooltip title={Language.editDeadlineMinus}>
@@ -170,7 +89,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
             <IconButton
               className={styles.iconButton}
               size="small"
-              disabled={deadlinePlusDisabled(workspace, now ?? dayjs())}
+              disabled={deadlinePlusDisabled(workspace, dayjs())}
               onClick={onDeadlinePlus}
             >
               <Tooltip title={Language.editDeadlinePlus}>
@@ -231,14 +150,6 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 42,
   },
 
-  labelText: {
-    marginRight: theme.spacing(2),
-  },
-
-  labelStrong: {
-    marginRight: theme.spacing(0.5),
-  },
-
   iconButton: {
     borderRadius: 2,
   },

diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
@@ -0,0 +1,40 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Workspace } from "../../api/typesGenerated"
+import { autoStartDisplay, autoStopDisplay, Language } from "../../util/schedule"
+import { isWorkspaceOn } from "../../util/workspace"
+
+export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ workspace }) => {
+  const styles = useStyles()
+
+  if (isWorkspaceOn(workspace)) {
+    const stopLabel = autoStopDisplay(workspace)
+    const isShuttingDown = stopLabel === Language.workspaceShuttingDownLabel
+
+    // If it is shutting down, we don't need to display the auto stop label
+    return (
+      <span className={styles.labelText}>
+        {!isShuttingDown && (
+          <strong className={styles.labelStrong}>{Language.autoStopLabel}</strong>
+        )}
+        {stopLabel}
+      </span>
+    )
+  }
+
+  return (
+    <span className={styles.labelText}>
+      <strong className={styles.labelStrong}>{Language.autoStartLabel}</strong>
+      {autoStartDisplay(workspace.autostart_schedule)}
+    </span>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  labelText: {
+    marginRight: theme.spacing(2),
+  },
+
+  labelStrong: {
+    marginRight: theme.spacing(0.5),
+  },
+}))
diff --git a/site/src/util/schedule.ts b/site/src/util/schedule.ts
@@ -1,3 +1,21 @@
+import cronstrue from "cronstrue"
+import dayjs from "dayjs"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+import duration from "dayjs/plugin/duration"
+import relativeTime from "dayjs/plugin/relativeTime"
+import timezone from "dayjs/plugin/timezone"
+import utc from "dayjs/plugin/utc"
+import { Workspace } from "../api/typesGenerated"
+import { isWorkspaceOn } from "./workspace"
+
+// REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
+//         sorted alphabetically.
+dayjs.extend(utc)
+dayjs.extend(advancedFormat)
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+dayjs.extend(timezone)
+
 /**
  * @fileoverview Client-side counterpart of the coderd/autostart/schedule Go
  * package. This package is a variation on crontab that uses minute, hour and
@@ -30,3 +48,56 @@ export const extractTimezone = (raw: string, defaultTZ = DEFAULT_TIMEZONE): stri
     return defaultTZ
   }
 }
+
+/** Language used in the schedule components */
+export const Language = {
+  manual: "Manual",
+  workspaceShuttingDownLabel: "Workspace is shutting down",
+  afterStart: "after start",
+  autoStartLabel: "Starts at",
+  autoStopLabel: "Stops at",
+}
+
+export const autoStartDisplay = (schedule: string | undefined): string => {
+  if (schedule) {
+    return (
+      cronstrue
+        .toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
+        // We don't want to keep the At because it is on the label
+        .replace("At", "")
+    )
+  } else {
+    return Language.manual
+  }
+}
+
+export const autoStopDisplay = (workspace: Workspace): string => {
+  const deadline = dayjs(workspace.latest_build.deadline).utc()
+  // a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
+  // SEE: #1834
+  const hasDeadline = deadline.year() > 1
+  const ttl = workspace.ttl_ms
+
+  if (isWorkspaceOn(workspace) && hasDeadline) {
+    // Workspace is on --> derive from latest_build.deadline. Note that the
+    // user may modify their workspace object (ttl) while the workspace is
+    // running and depending on system semantics, the deadline may still
+    // represent the previously defined ttl. Thus, we always derive from the
+    // deadline as the source of truth.
+    const now = dayjs().utc()
+    if (now.isAfter(deadline)) {
+      return Language.workspaceShuttingDownLabel
+    } else {
+      return deadline.tz(dayjs.tz.guess()).format("MMM D, YYYY h:mm A")
+    }
+  } else if (!ttl || ttl < 1) {
+    // If the workspace is not on, and the ttl is 0 or undefined, then the
+    // workspace is set to manually shutdown.
+    return Language.manual
+  } else {
+    // The workspace has a ttl set, but is either in an unknown state or is
+    // not running. Therefore, we derive from workspace.ttl.
+    const duration = dayjs.duration(ttl, "milliseconds")
+    return `${duration.humanize()} ${Language.afterStart}`
+  }
+}