site: add buttons to workspace schedule to edit deadline

johnstcn · johnstcn · commit 8e5188828f20 · 2022-06-30T09:37:46.000Z
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -19,6 +19,10 @@ export interface WorkspaceProps {
     isLoading?: boolean
     onExtend: () => void
   }
+  scheduleProps: {
+    onDeadlinePlus: () => void
+    onDeadlineMinus: () => void
+  }
   handleStart: () => void
   handleStop: () => void
   handleDelete: () => void
@@ -36,6 +40,7 @@ export interface WorkspaceProps {
  */
 export const Workspace: FC<WorkspaceProps> = ({
   bannerProps,
+  scheduleProps,
   handleStart,
   handleStop,
   handleDelete,
@@ -99,7 +104,11 @@ export const Workspace: FC<WorkspaceProps> = ({
         </Stack>
 
         <Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
-          <WorkspaceSchedule workspace={workspace} />
+          <WorkspaceSchedule
+            workspace={workspace}
+            onDeadlineMinus={scheduleProps.onDeadlineMinus}
+            onDeadlinePlus={scheduleProps.onDeadlinePlus}
+          />
         </Stack>
       </Stack>
     </Margins>
diff --git a/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -1,3 +1,4 @@
+import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
@@ -66,6 +67,8 @@ export const Language = {
     }
   },
   editScheduleLink: "Edit schedule",
+  editDeadlineMinus: "[-1 hour]",
+  editDeadlinePlus: "[+1 hour]",
   scheduleHeader: (workspace: Workspace): string => {
     const tz = workspace.autostart_schedule
       ? extractTimezone(workspace.autostart_schedule)
@@ -76,6 +79,16 @@ export const Language = {
 
 export interface WorkspaceScheduleProps {
   workspace: Workspace
+  onDeadlinePlus: () => void
+  onDeadlineMinus: () => void
+}
+
+export const shouldDisplayPlusMins = (workspace: Workspace): boolean => {
+  if (!isWorkspaceOn(workspace)) {
+    return false
+  }
+  const deadline = dayjs(workspace.latest_build.deadline).utc()
+  return deadline.year() > 1
 }
 
 export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) => {
@@ -100,6 +113,16 @@ export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) =>
             {Language.autoStopDisplay(workspace)}
           </span>
         </div>
+        <div>
+          <Stack direction="row">
+            <Button className={styles.editDeadline}>
+              <span className={styles.scheduleLabel}>{Language.editDeadlineMinus}</span>
+            </Button>
+            <Button className={styles.editDeadline}>
+              <span className={styles.scheduleLabel}>{Language.editDeadlinePlus}</span>
+            </Button>
+          </Stack>
+        </div>
         <div>
           <Link
             className={styles.scheduleAction}
@@ -146,4 +169,12 @@ const useStyles = makeStyles((theme) => ({
   scheduleAction: {
     cursor: "pointer",
   },
+  editDeadline: {
+    fontSize: 12,
+    textTransform: "uppercase",
+    display: "inline-block",
+    fontWeight: 600,
+    color: theme.palette.text.secondary,
+    margin: theme.spacing(0),
+  },
 }))
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -59,6 +59,14 @@ export const WorkspacePage: React.FC = () => {
               bannerSend({ type: "EXTEND_DEADLINE_DEFAULT", workspaceId: workspace.id })
             },
           }}
+          scheduleProps={{
+            onDeadlineMinus: () => {
+              console.log("not implemented")
+            },
+            onDeadlinePlus: () => {
+              console.log("not implemented")
+            },
+          }}
           workspace={workspace}
           handleStart={() => workspaceSend("START")}
           handleStop={() => workspaceSend("STOP")}
