Start sketching out new design

presleyp · presleyp · commit d7c9df7c7d36 · 2022-10-04T19:18:26.000Z
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -6,6 +6,7 @@ import Tooltip from "@material-ui/core/Tooltip"
 import AddIcon from "@material-ui/icons/Add"
 import RemoveIcon from "@material-ui/icons/Remove"
 import ScheduleIcon from "@material-ui/icons/Schedule"
+import { Maybe } from "components/Conditionals/Maybe"
 import dayjs from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import duration from "dayjs/plugin/duration"
@@ -70,10 +71,10 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
 
   return (
     <span className={styles.wrapper}>
-      {shouldDisplayScheduleLabel(workspace) && (
+      <Maybe condition={shouldDisplayScheduleLabel(workspace)}>
         <span className={styles.label}>
           <WorkspaceScheduleLabel workspace={workspace} />
-          {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
+          <Maybe condition={canUpdateWorkspace && shouldDisplayPlusMinus(workspace)}>
             <span className={styles.actions}>
               <IconButton
                 className={styles.iconButton}
@@ -96,9 +97,9 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
                 </Tooltip>
               </IconButton>
             </span>
-          )}
+          </Maybe>
         </span>
-      )}
+      </Maybe>
       <>
         <Button
           ref={anchorRef}
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleLabel.tsx
@@ -1,31 +1,61 @@
 import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
+import { Maybe } from "components/Conditionals/Maybe"
+import { LoadingButton } from "components/LoadingButton/LoadingButton"
+import { useTranslation } from "react-i18next"
 import { Workspace } from "../../api/typesGenerated"
 import { combineClasses } from "../../util/combineClasses"
-import { autoStartDisplay, autoStopDisplay, isShuttingDown, Language } from "../../util/schedule"
+import { autoStartDisplay, autoStopDisplay, isShuttingDown } from "../../util/schedule"
 import { isWorkspaceOn } from "../../util/workspace"
 
+const AutoStopDisplay = ({ workspace }: { workspace: Workspace }): JSX.Element => {
+  const { t } = useTranslation("common")
+  const autoStopTime = autoStopDisplay(workspace)
+  return (
+    <ChooseOne>
+      <Cond condition={isEditing}>
+        <>
+          <TextField
+            value={autoStopTime}
+            onChange={}
+          />
+          <LoadingButton disabled={}>
+            {t("schedule.submitUpdate")}
+          </LoadingButton>
+        </>
+      </Cond>
+      <Cond>
+        {autoStopTime}
+      </Cond>
+    </ChooseOne>
+   )
+}
+
 export const WorkspaceScheduleLabel: React.FC<{ workspace: Workspace }> = ({ workspace }) => {
   const styles = useStyles()
+  const { t } = useTranslation("common")
 
-  if (isWorkspaceOn(workspace)) {
-    const stopLabel = autoStopDisplay(workspace)
-    const shouldDisplayStrongLabel = !isShuttingDown(workspace)
-
-    // If it is shutting down, we don't need to display the auto stop label
-    return (
+  return <ChooseOne>
+    <Cond condition={isWorkspaceOn(workspace)}>
       <span className={combineClasses([styles.labelText, "chromatic-ignore"])}>
-        {shouldDisplayStrongLabel && <strong>{Language.autoStopLabel}</strong>}{" "}
-        <span className={styles.value}>{stopLabel}</span>
+        <Maybe condition={!isShuttingDown(workspace)}>
+          <strong>{t("schedule.autoStopLabel")}</strong>
+        </Maybe>
+        {" "}
+        <span className={styles.value}>
+          <AutoStopDisplay workspace={workspace} />
+        </span>
       </span>
-    )
-  }
-
-  return (
-    <span className={combineClasses([styles.labelText, "chromatic-ignore"])}>
-      <strong>{Language.autoStartLabel}</strong>{" "}
-      <span className={styles.value}>{autoStartDisplay(workspace.autostart_schedule)}</span>
-    </span>
-  )
+    </Cond>
+    <Cond>
+      <span className={combineClasses([styles.labelText, "chromatic-ignore"])}>
+        <strong>{t("schedule.autoStartLabel")}</strong>
+        {" "}
+        <span className={styles.value}>{autoStartDisplay(workspace.autostart_schedule)}</span>
+      </span>
+    </Cond>
+  </ChooseOne>
 }
 
 const useStyles = makeStyles((theme) => ({
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
@@ -18,5 +18,10 @@
     "confirm": "Are you sure you want to proceed? Type the name of this {{entity}} below to confirm.",
     "confirmLabel": "Name of {{entity}} to delete",
     "incorrectName": "Incorrect {{entity}} name."
+  },
+  "schedule": {
+    "autoStartLabel": "Starts at",
+    "autoStopLabel": "Stops at",
+    "submitUpdate": "Update"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,10 @@`
`18`	`18`	`"confirm": "Are you sure you want to proceed? Type the name of this {{entity}} below to confirm.",`
`19`	`19`	`"confirmLabel": "Name of {{entity}} to delete",`
`20`	`20`	`"incorrectName": "Incorrect {{entity}} name."`
	`21`	`+ },`
	`22`	`+ "schedule": {`
	`23`	`+ "autoStartLabel": "Starts at",`
	`24`	`+ "autoStopLabel": "Stops at",`
	`25`	`+ "submitUpdate": "Update"`
`21`	`26`	`}`
`22`	`27`	`}`