fixup! feat: edit workspace schedule page

coder · greyscaled · May 26, 2022 · May 24, 2022 · May 24, 2022 · May 24, 2022
commit 3f73a6cef72cc152fafb668541dcfab123d85423
@@ -17,6 +17,7 @@ import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
+import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
 import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"
 
 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
@@ -73,6 +74,14 @@ export const AppRouter: React.FC = () => (
                 </AuthAndFrame>
               }
             />
+            <Route
+              path="schedule"
+              element={
+                <AuthAndFrame>
+                  <WorkspaceSchedulePage />
+                </AuthAndFrame>
+              }
+            />
           </Route>
         </Route>
 

@@ -15,42 +15,44 @@ import { Stack } from "../Stack/Stack"
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
-const autoStartLabel = (schedule: string): string => {
-  const prefix = "Start"
-
-  if (schedule) {
-    return `${prefix} (${extractTimezone(schedule)})`
-  } else {
-    return prefix
-  }
-}
-
-const autoStartDisplay = (schedule: string): string => {
-  if (schedule) {
-    return cronstrue.toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
-  }
-  return "Manual"
-}
+const Language = {
+  autoStartDisplay: (schedule: string): string => {
+    if (schedule) {
+      return cronstrue.toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
+    }
+    return "Manual"
+  },
+  autoStartLabel: (schedule: string): string => {
+    const prefix = "Start"
 
-const autoStopDisplay = (workspace: Workspace): string => {
-  const latest = workspace.latest_build
+    if (schedule) {
+      return `${prefix} (${extractTimezone(schedule)})`
+    } else {
+      return prefix
+    }
+  },
+  autoStopDisplay: (workspace: Workspace): string => {
+    const latest = workspace.latest_build
 
-  if (!workspace.ttl || workspace.ttl < 1) {
-    return "Manual"
-  }
+    if (!workspace.ttl || workspace.ttl < 1) {
+      return "Manual"
+    }
 
-  if (latest.transition === "start") {
-    const now = dayjs()
-    const updatedAt = dayjs(latest.updated_at)
-    const deadline = updatedAt.add(workspace.ttl / 1_000_000, "ms")
-    if (now.isAfter(deadline)) {
-      return "Workspace is shutting down now"
+    if (latest.transition === "start") {
+      const now = dayjs()
+      const updatedAt = dayjs(latest.updated_at)
+      const deadline = updatedAt.add(workspace.ttl / 1_000_000, "ms")
+      if (now.isAfter(deadline)) {
+        return "Workspace is shutting down now"
+      }
+      return now.to(deadline)
     }
-    return now.to(deadline)
-  }
 
-  const duration = dayjs.duration(workspace.ttl / 1_000_000, "milliseconds")
-  return `${duration.humanize()} after start`
+    const duration = dayjs.duration(workspace.ttl / 1_000_000, "milliseconds")
+    return `${duration.humanize()} after start`
+  },
+  editScheduleLink: "Edit schedule",
+  schedule: "Schedule",
 }
 
 export interface WorkspaceScheduleProps {
@@ -65,18 +67,20 @@ export const WorkspaceSchedule: React.FC<WorkspaceScheduleProps> = ({ workspace
       <Stack spacing={2}>
         <Typography variant="body1" className={styles.title}>
           <ScheduleIcon className={styles.scheduleIcon} />
-          Schedule
+          {Language.schedule}
         </Typography>
         <div>
-          <span className={styles.scheduleLabel}>{autoStartLabel(workspace.autostart_schedule)}</span>
-          <span className={styles.scheduleValue}>{autoStartDisplay(workspace.autostart_schedule)}</span>
+          <span className={styles.scheduleLabel}>{Language.autoStartLabel(workspace.autostart_schedule)}</span>
+          <span className={styles.scheduleValue}>{Language.autoStartDisplay(workspace.autostart_schedule)}</span>
         </div>
         <div>
           <span className={styles.scheduleLabel}>Shutdown</span>
-          <span className={styles.scheduleValue}>{autoStopDisplay(workspace)}</span>
+          <span className={styles.scheduleValue}>{Language.autoStopDisplay(workspace)}</span>
         </div>
         <div>
-          <Link className={styles.scheduleAction}>Edit schedule</Link>
+          <Link className={styles.scheduleAction} href={`/workspace/${workspace.id}/schedule`}>
+            {Language.editScheduleLink}
+          </Link>
         </div>
       </Stack>
     </div>