From b0d52039f9feb14cb0edf90374609d7eb69ae1f6 Mon Sep 17 00:00:00 2001
From: G r e y <grey@coder.com>
Date: Tue, 24 May 2022 09:55:30 -0400
Subject: [PATCH] refactor: resource strings in WorkspaceSchedule (#1702)

---
 .../WorkspaceSchedule/WorkspaceSchedule.tsx   | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
index 8e3b33af0f..f15a731f89 100644
--- a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
+++ b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -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 autoStopDisplay = (workspace: Workspace): string => {
-  const latest = workspace.latest_build
-
-  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"
+const Language = {
+  autoStartDisplay: (schedule: string): string => {
+    if (schedule) {
+      return cronstrue.toString(stripTimezone(schedule), { throwExceptionOnParseError: false })
     }
-    return now.to(deadline)
-  }
+    return "Manual"
+  },
+  autoStartLabel: (schedule: string): string => {
+    const prefix = "Start"
 
-  const duration = dayjs.duration(workspace.ttl / 1_000_000, "milliseconds")
-  return `${duration.humanize()} after start`
+    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 (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)
+    }
+
+    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,18 @@ 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}>{Language.editScheduleLink}</Link>
         </div>
       </Stack>
     </div>