Add stepper max

presleyp · presleyp · commit 31567ce1a578 · 2022-10-12T18:45:18.000Z
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -38,6 +38,8 @@ export interface WorkspaceProps {
     onDeadlineMinus: (hours: number) => void
     deadlinePlusEnabled: () => boolean
     deadlineMinusEnabled: () => boolean
+    maxDeadlineIncrease: number
+    maxDeadlineDecrease: number
   }
   handleStart: () => void
   handleStop: () => void
@@ -121,6 +123,8 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               onDeadlinePlus={scheduleProps.onDeadlinePlus}
               deadlineMinusEnabled={scheduleProps.deadlineMinusEnabled}
               deadlinePlusEnabled={scheduleProps.deadlinePlusEnabled}
+              maxDeadlineDecrease={scheduleProps.maxDeadlineDecrease}
+              maxDeadlineIncrease={scheduleProps.maxDeadlineIncrease}
               canUpdateWorkspace={canUpdateWorkspace}
             />
             <WorkspaceActions
diff --git a/site/src/components/WorkspaceScheduleButton/EditHours.tsx b/site/src/components/WorkspaceScheduleButton/EditHours.tsx
@@ -7,9 +7,10 @@ import { useTranslation } from "react-i18next"
 
 interface EditHoursProps {
   handleSubmit: (hours: number) => void
+  max: number
 }
 
-export const EditHours = ({ handleSubmit }: EditHoursProps): JSX.Element => {
+export const EditHours = ({ handleSubmit, max }: EditHoursProps): JSX.Element => {
   const { t } = useTranslation("workspacePage")
   const [hours, setHours] = useState(1)
   const styles = useStyles()
@@ -19,7 +20,7 @@ export const EditHours = ({ handleSubmit }: EditHoursProps): JSX.Element => {
       <Stack direction="row" alignItems="baseline" spacing={1}>
       <TextField
         className={styles.inputField}
-        inputProps={{ min: 0, step: 1 }}
+        inputProps={{ min: 0, max, step: 1 }}
         label={t("workspaceScheduleButton.hours")}
         value={hours}
         onChange={(e) => setHours(parseInt(e.target.value))}
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.test.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.test.tsx
@@ -2,7 +2,7 @@ import dayjs from "dayjs"
 import utc from "dayjs/plugin/utc"
 import * as TypesGen from "../../api/typesGenerated"
 import * as Mocks from "../../testHelpers/entities"
-import { shouldDisplayPlusMinus } from "./WorkspaceScheduleButton"
+import { canEditDeadline } from "./WorkspaceScheduleButton"
 
 dayjs.extend(utc)
 
@@ -13,15 +13,15 @@ describe("WorkspaceScheduleButton", () => {
       const workspace: TypesGen.Workspace = Mocks.MockStoppedWorkspace
 
       // Then: shouldDisplayPlusMinus should be false
-      expect(shouldDisplayPlusMinus(workspace)).toBeFalsy()
+      expect(canEditDeadline(workspace)).toBeFalsy()
     })
 
     it("should display if the workspace is running", () => {
       // Given: a stopped workspace
       const workspace: TypesGen.Workspace = Mocks.MockWorkspace
 
       // Then: shouldDisplayPlusMinus should be false
-      expect(shouldDisplayPlusMinus(workspace)).toBeTruthy()
+      expect(canEditDeadline(workspace)).toBeTruthy()
     })
   })
 })
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -50,6 +50,8 @@ export interface WorkspaceScheduleButtonProps {
   onDeadlineMinus: (hours: number) => void
   deadlineMinusEnabled: () => boolean
   deadlinePlusEnabled: () => boolean
+  maxDeadlineIncrease: number
+  maxDeadlineDecrease: number
   canUpdateWorkspace: boolean
 }
 
@@ -63,6 +65,8 @@ export const WorkspaceScheduleButton: React.FC<
   onDeadlineMinus,
   deadlinePlusEnabled,
   deadlineMinusEnabled,
+  maxDeadlineDecrease,
+  maxDeadlineIncrease,
   canUpdateWorkspace,
 }) => {
   const { t } = useTranslation("workspacePage")
@@ -121,7 +125,7 @@ export const WorkspaceScheduleButton: React.FC<
               </IconButton>
             </span>
             <Maybe condition={editMode !== "off"}>
-              <EditHours handleSubmit={handleSubmitHours} />
+              <EditHours handleSubmit={handleSubmitHours} max={editMode === "add" ? maxDeadlineIncrease : maxDeadlineDecrease} />
             </Maybe>
           </Maybe>
         </Stack>
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -4,6 +4,8 @@ import dayjs from "dayjs"
 import { useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
+import { getMaxDeadline, getMaxDeadlineChange, getMinDeadline } from "util/schedule"
+//import { getMaxDeadlineDecrease, getMaxDeadlineIncrease } from "util/schedule"
 import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
 import { StateFrom } from "xstate"
 import { DeleteDialog } from "../../components/Dialogs/DeleteDialog/DeleteDialog"
@@ -95,6 +97,8 @@ export const WorkspaceReadyPage = ({
           },
           deadlineMinusEnabled: () => !bannerState.matches("atMinDeadline"),
           deadlinePlusEnabled: () => !bannerState.matches("atMaxDeadline"),
+          maxDeadlineDecrease: getMaxDeadlineChange(bannerState.context.workspace.deadline, getMinDeadline()),
+          maxDeadlineIncrease: getMaxDeadlineChange(bannerState.context.workspace.deadline, getMaxDeadline(workspace, bannerState.context.template))
         }}
         isUpdating={workspaceState.hasTag("updating")}
         workspace={workspace}
diff --git a/site/src/util/schedule.test.ts b/site/src/util/schedule.test.ts
@@ -9,6 +9,7 @@ import {
   deadlineExtensionMin,
   extractTimezone,
   getMaxDeadline,
+  getMaxDeadlineChange,
   getMinDeadline,
   stripTimezone,
 } from "./schedule"
@@ -124,3 +125,19 @@ describe("canReduceDeadline", () => {
     expect(canReduceDeadline(dayjs().add(100, "years"))).toBeTruthy()
   })
 })
+
+describe("getMaxDeadlineChange", () => {
+  it("should return the number of hours you can add before hitting the max deadline", () => {
+    const deadline = dayjs()
+    const maxDeadline = dayjs().add(1, "hour").add(40, "minutes")
+    // you can only add one hour even though the max is 1:40 away
+    expect(getMaxDeadlineChange(deadline, maxDeadline)).toEqual(1)
+  })
+
+  it("should return the number of hours you can subtract before hitting the min deadline", () => {
+    const deadline = dayjs().add(2, "hours").add(40, "minutes")
+    const minDeadline = dayjs()
+    // you can only subtract 2 hours even though the min is 2:40 less
+    expect(getMaxDeadlineChange(deadline, minDeadline)).toEqual(2)
+  })
+})
diff --git a/site/src/util/schedule.ts b/site/src/util/schedule.ts
@@ -167,3 +167,14 @@ export function canReduceDeadline(deadline: dayjs.Dayjs): boolean {
 
 export const getDeadline = (workspace: Workspace): dayjs.Dayjs =>
   dayjs(workspace.latest_build.deadline).utc()
+
+/**
+ * Get number of hours you can add or subtract to the current deadline before hitting the max or min deadline.
+ * @param deadline
+ * @param workspace
+ * @param template
+ * @returns number, in hours
+ */
+export const getMaxDeadlineChange = (deadline: dayjs.Dayjs, extremeDeadline: dayjs.Dayjs): number => {
+  return Math.abs(deadline.diff(extremeDeadline, "hours"))
+}
