fix: ws schedule as 12-hour format (#2209)

greyscaled · web-flow · commit 411d7da661be · 2022-06-09T16:20:29.000-04:00
This does not finish all tasks in #2175 but is one of the asks.
diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -13,7 +13,7 @@ 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 { stripTimezone } from "../../util/schedule"
 import { isWorkspaceOn } from "../../util/workspace"
 import { Stack } from "../Stack/Stack"
 
@@ -31,20 +31,11 @@ export const Language = {
       return "Manual"
     }
   },
-  autoStartLabel: (schedule: string | undefined): string => {
-    const prefix = "Start"
-    const timezone = schedule ? extractTimezone(schedule) : dayjs.tz.guess()
-
-    if (schedule) {
-      return `${prefix} (${dayjs().tz(timezone).format("z")})`
-    } else {
-      return prefix
-    }
-  },
+  autoStartLabel: "START",
+  autoStopLabel: "SHUTDOWN",
   autoStopDisplay: (workspace: Workspace): string => {
-    const schedule = workspace.autostart_schedule
     const deadline = dayjs(workspace.latest_build.deadline).utc()
-    // a mannual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
+    // a manual shutdown has a deadline of '"0001-01-01T00:00:00Z"'
     // SEE: #1834
     const hasDeadline = deadline.year() > 1
     const ttl = workspace.ttl_ms
@@ -59,8 +50,7 @@ export const Language = {
       if (now.isAfter(deadline)) {
         return "Workspace is shutting down"
       } else {
-        const timezone = schedule ? extractTimezone(schedule) : dayjs.tz.guess()
-        return deadline.tz(timezone).format("HH:mm A")
+        return deadline.tz(dayjs.tz.guess()).format("hh:mm A")
       }
     } else if (!ttl || ttl < 1) {
       // If the workspace is not on, and the ttl is 0 or undefined, then the
@@ -74,7 +64,7 @@ export const Language = {
     }
   },
   editScheduleLink: "Edit schedule",
-  schedule: "Schedule",
+  schedule: `Schedule (${dayjs.tz.guess()})`,
 }
 
 export interface WorkspaceScheduleProps {
@@ -92,11 +82,13 @@ export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) =>
           {Language.schedule}
         </Typography>
         <div>
-          <span className={styles.scheduleLabel}>{Language.autoStartLabel(workspace.autostart_schedule)}</span>
-          <span className={styles.scheduleValue}>{Language.autoStartDisplay(workspace.autostart_schedule)}</span>
+          <span className={styles.scheduleLabel}>{Language.autoStartLabel}</span>
+          <span className={styles.scheduleValue} data-chromatic="ignore">
+            {Language.autoStartDisplay(workspace.autostart_schedule)}
+          </span>
         </div>
         <div>
-          <span className={styles.scheduleLabel}>Shutdown</span>
+          <span className={styles.scheduleLabel}>{Language.autoStopLabel}</span>
           <span className={styles.scheduleValue} data-chromatic="ignore">
             {Language.autoStopDisplay(workspace)}
           </span>
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -43,7 +43,9 @@ const renderWorkspacePage = async () => {
 
 const testButton = async (label: string, actionMock: jest.SpyInstance) => {
   await renderWorkspacePage()
-  const button = await screen.findByText(label)
+  // REMARK: exact here because the "Start" button and "START" label for
+  //         workspace schedule could otherwise conflict.
+  const button = await screen.findByText(label, { exact: true })
   await waitFor(() => fireEvent.click(button))
   expect(actionMock).toBeCalled()
 }
