coder
diff --git a/‎coderd/autostart/schedule/schedule.go
Lines changed: 1 addition & 0 deletions b/‎coderd/autostart/schedule/schedule.go
Lines changed: 1 addition & 0 deletions
diff --git a/‎codersdk/workspaces.go
Lines changed: 2 additions & 2 deletions b/‎codersdk/workspaces.go
Lines changed: 2 additions & 2 deletions
diff --git a/‎site/package.json
Lines changed: 1 addition & 0 deletions b/‎site/package.json
Lines changed: 1 addition & 0 deletions
diff --git a/‎site/src/api/index.ts
Lines changed: 20 additions & 0 deletions b/‎site/src/api/index.ts
Lines changed: 20 additions & 0 deletions
diff --git a/‎site/src/api/types.ts
Lines changed: 13 additions & 1 deletion b/‎site/src/api/types.ts
Lines changed: 13 additions & 1 deletion
diff --git a/‎site/src/components/Workspace/Workspace.tsx
Lines changed: 2 additions & 0 deletions b/‎site/src/components/Workspace/Workspace.tsx
Lines changed: 2 additions & 0 deletions
diff --git a/‎site/src/components/Workspace/WorkspaceSchedule.stories.tsx
Lines changed: 17 additions & 0 deletions b/‎site/src/components/Workspace/WorkspaceSchedule.stories.tsx
Lines changed: 17 additions & 0 deletions
diff --git a/‎site/src/components/Workspace/WorkspaceSchedule.tsx
Lines changed: 59 additions & 0 deletions b/‎site/src/components/Workspace/WorkspaceSchedule.tsx
Lines changed: 59 additions & 0 deletions
diff --git a/‎site/src/test_helpers/entities.ts
Lines changed: 22 additions & 0 deletions b/‎site/src/test_helpers/entities.ts
Lines changed: 22 additions & 0 deletions
diff --git a/‎site/src/test_helpers/handlers.ts
Lines changed: 6 additions & 0 deletions b/‎site/src/test_helpers/handlers.ts
Lines changed: 6 additions & 0 deletions
@@ -26,6 +26,7 @@ var defaultParser = cron.NewParser(parserFormatWeekly)
 //  local_sched, _ := schedule.Weekly("59 23 *")
 //  fmt.Println(sched.Next(time.Now().Format(time.RFC3339)))
 //  // Output: 2022-04-04T23:59:00Z
+//
 //  us_sched, _ := schedule.Weekly("CRON_TZ=US/Central 30 9 1-5")
 //  fmt.Println(sched.Next(time.Now()).Format(time.RFC3339))
 //  // Output: 2022-04-04T14:30:00Z
 
@@ -92,7 +92,7 @@ func (c *Client) WorkspaceBuildByName(ctx context.Context, workspace uuid.UUID,
 
 // UpdateWorkspaceAutostartRequest is a request to update a workspace's autostart schedule.
 type UpdateWorkspaceAutostartRequest struct {
-	Schedule string
+	Schedule string `json:"schedule"`
 }
 
 // UpdateWorkspaceAutostart sets the autostart schedule for workspace by id.
@@ -112,7 +112,7 @@ func (c *Client) UpdateWorkspaceAutostart(ctx context.Context, id uuid.UUID, req
 
 // UpdateWorkspaceAutostopRequest is a request to update a workspace's autostop schedule.
 type UpdateWorkspaceAutostopRequest struct {
-	Schedule string
+	Schedule string `json:"schedule"`
 }
 
 // UpdateWorkspaceAutostop sets the autostop schedule for workspace by id.
 
@@ -33,6 +33,7 @@
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.0.0",
     "axios": "0.26.1",
+    "cronstrue": "2.2.0",
     "formik": "2.2.9",
     "history": "5.3.0",
     "react": "17.0.2",
 
@@ -73,3 +73,23 @@ export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
   const response = await axios.get("/api/v2/buildinfo")
   return response.data
 }
+
+export const putWorkspaceAutostart = async (
+  workspaceID: string,
+  autostart: Types.WorkspaceAutostartRequest,
+): Promise<void> => {
+  const payload = JSON.stringify(autostart)
+  await axios.put(`/api/v2/workspaces/${workspaceID}/autostart`, payload, {
+    headers: { ...CONTENT_TYPE_JSON },
+  })
+}
+
+export const putWorkspaceAutostop = async (
+  workspaceID: string,
+  autostop: Types.WorkspaceAutostopRequest,
+): Promise<void> => {
+  const payload = JSON.stringify(autostop)
+  await axios.put(`/api/v2/workspaces/${workspaceID}/autostop`, payload, {
+    headers: { ...CONTENT_TYPE_JSON },
+  })
+}
@@ -54,14 +54,18 @@ export interface CreateWorkspaceRequest {
   template_id: string
 }
 
-// Must be kept in sync with backend Workspace struct
+/**
+ * @remarks Keep in sync with codersdk/workspaces.go
+ */
 export interface Workspace {
   id: string
   created_at: string
   updated_at: string
   owner_id: string
   template_id: string
   name: string
+  autostart_schedule: string
+  autostop_schedule: string
 }
 
 export interface APIKeyResponse {
@@ -74,3 +78,11 @@ export interface UserAgent {
   readonly ip_address: string
   readonly os: string
 }
+
+export interface WorkspaceAutostartRequest {
+  schedule: string
+}
+
+export interface WorkspaceAutostopRequest {
+  schedule: string
+}
@@ -7,6 +7,7 @@ import React from "react"
 import { Link } from "react-router-dom"
 import * as Types from "../../api/types"
 import * as Constants from "./constants"
+import { WorkspaceSchedule } from "./WorkspaceSchedule"
 import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
@@ -30,6 +31,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
             <WorkspaceSection title="Applications">
               <Placeholder />
             </WorkspaceSection>
+            <WorkspaceSchedule autostart={workspace.autostart_schedule} autostop={workspace.autostop_schedule} />
             <WorkspaceSection title="Dev URLs">
               <Placeholder />
             </WorkspaceSection>
 
@@ -0,0 +1,17 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { MockWorkspaceAutostartEnabled } from "../../test_helpers"
+import { WorkspaceSchedule, WorkspaceScheduleProps } from "./WorkspaceSchedule"
+
+export default {
+  title: "Workspaces/WorkspaceSchedule",
+  component: WorkspaceSchedule,
+}
+
+const Template: Story<WorkspaceScheduleProps> = (args) => <WorkspaceSchedule {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  autostart: MockWorkspaceAutostartEnabled.schedule,
+  autostop: "",
+}
@@ -0,0 +1,59 @@
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
+import cronstrue from "cronstrue"
+import React from "react"
+import { expandScheduleCronString, extractTimezone } from "../../util/schedule"
+import { WorkspaceSection } from "./WorkspaceSection"
+
+const Language = {
+  autoStartLabel: (schedule: string): string => {
+    const prefix = "Workspace start"
+
+    if (schedule) {
+      return `${prefix} (${extractTimezone(schedule)})`
+    } else {
+      return prefix
+    }
+  },
+  autoStopLabel: (schedule: string): string => {
+    const prefix = "Workspace shutdown"
+
+    if (schedule) {
+      return `${prefix} (${extractTimezone(schedule)})`
+    } else {
+      return prefix
+    }
+  },
+  cronHumanDisplay: (schedule: string): string => {
+    if (schedule) {
+      return cronstrue.toString(expandScheduleCronString(schedule), { throwExceptionOnParseError: false })
+    }
+    return "Manual"
+  },
+}
+
+export interface WorkspaceScheduleProps {
+  autostart: string
+  autostop: string
+}
+
+/**
+ * WorkspaceSchedule displays a workspace schedule in a human-readable format
+ *
+ * @remarks Visual Component
+ */
+export const WorkspaceSchedule: React.FC<WorkspaceScheduleProps> = ({ autostart, autostop }) => {
+  return (
+    <WorkspaceSection title="Workspace schedule">
+      <Box mt={2}>
+        <Typography variant="h6">{Language.autoStartLabel(autostart)}</Typography>
+        <Typography>{Language.cronHumanDisplay(autostart)}</Typography>
+      </Box>
+
+      <Box mt={2}>
+        <Typography variant="h6">{Language.autoStopLabel(autostop)}</Typography>
+        <Typography>{Language.cronHumanDisplay(autostop)}</Typography>
+      </Box>
+    </WorkspaceSection>
+  )
+}
@@ -6,6 +6,7 @@ import {
   UserAgent,
   UserResponse,
   Workspace,
+  WorkspaceAutostartRequest,
 } from "../api/types"
 
 export const MockSessionToken = { session_token: "my-session-token" }
@@ -46,13 +47,34 @@ export const MockTemplate: Template = {
   active_version_id: "",
 }
 
+export const MockWorkspaceAutostartDisabled: WorkspaceAutostartRequest = {
+  schedule: "",
+}
+
+export const MockWorkspaceAutostartEnabled: WorkspaceAutostartRequest = {
+  // Runs at 9:30am Monday through Friday using Canada/Eastern
+  // (America/Toronto) time
+  schedule: "CRON_TZ=Canada/Eastern 30 9 1-5",
+}
+
+export const MockWorkspaceAutostopDisabled: WorkspaceAutostartRequest = {
+  schedule: "",
+}
+
+export const MockWorkspaceAutostopEnabled: WorkspaceAutostartRequest = {
+  // Runs at 9:30pm Monday through Friday using America/Toronto
+  schedule: "CRON_TZ=America/Toronto 30 21 1-5",
+}
+
 export const MockWorkspace: Workspace = {
   id: "test-workspace",
   name: "Test-Workspace",
   created_at: "",
   updated_at: "",
   template_id: MockTemplate.id,
   owner_id: MockUser.id,
+  autostart_schedule: MockWorkspaceAutostartEnabled.schedule,
+  autostop_schedule: MockWorkspaceAutostopEnabled.schedule,
 }
 
 export const MockUserAgent: UserAgent = {
 
@@ -44,4 +44,10 @@ export const handlers = [
   rest.get("/api/v2/workspaces/:workspaceId", async (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockWorkspace))
   }),
+  rest.put("/api/v2/workspaces/:workspaceId/autostart", async (req, res, ctx) => {
+    return res(ctx.status(200))
+  }),
+  rest.put("/api/v2/workspaces/:workspaceId/autostop", async (req, res, ctx) => {
+    return res(ctx.status(200))
+  }),
 ]