ui/time pickers: remove ensureInterval, falling back to backend validation

web/src/app/lists/FlatList.tsx

@@ -1,4 +1,5 @@
 import React, {
+  createRef,
   useEffect,
   useRef,
   useState,
@@ -283,20 +284,25 @@ export default function FlatList({
   function renderTransitionItems(): JSX.Element[] {
     return items.map((item, idx) => {
       if ('subHeader' in item) {
+        const subheaderRef = createRef<HTMLDivElement>()
         return (
           <CSSTransition
+            nodeRef={subheaderRef}
             key={'header_' + item.id}
             timeout={0}
             exit={false}
             enter={false}
           >
-            {renderSubheaderItem(item, idx)}
+            <div ref={subheaderRef}>{renderSubheaderItem(item, idx)}</div>
           </CSSTransition>
         )
       }
+
       if ('type' in item) {
+        const noticeRef = createRef<HTMLDivElement>()
         return (
           <CSSTransition
+            nodeRef={noticeRef}
             key={'notice_' + item.id}
             timeout={500}
             exit={Boolean(item.transition)}
@@ -308,12 +314,15 @@ export default function FlatList({
               exitActive: classes.slideExitActive,
             }}
           >
-            {renderNoticeItem(item, idx)}
+            <div ref={noticeRef}>{renderNoticeItem(item, idx)}</div>
           </CSSTransition>
         )
       }
+
+      const itemRef = createRef<HTMLDivElement>()
       return (
         <CSSTransition
+          nodeRef={itemRef}
           key={'item_' + item.id}
           timeout={500}
           classNames={{
@@ -323,7 +332,9 @@ export default function FlatList({
             exitActive: classes.slideExitActive,
           }}
         >
-          <FlatListItem index={idx} item={item} />
+          <div ref={itemRef}>
+            <FlatListItem index={idx} item={item} />
+          </div>
         </CSSTransition>
       )
     })

web/src/app/schedules/ScheduleOverrideForm.tsx

@@ -11,7 +11,6 @@ import { ISODateTimePicker } from '../util/ISOPickers'
 import { useScheduleTZ } from './useScheduleTZ'
 import { fmtLocal } from '../util/timeFormat'
 import { FieldError } from '../util/errutil'
-import { ensureInterval } from './timeUtil'
 
 const query = gql`
   query ($id: ID!) {
@@ -93,7 +92,7 @@ export default function ScheduleOverrideForm(
       value={value}
       {...formProps}
       onChange={(newValue: ScheduleOverrideFormValue) => {
-        formProps.onChange(ensureInterval(value, newValue))
+        formProps.onChange(newValue)
       }}
     >
       <Grid container spacing={2}>

web/src/app/schedules/temp-sched/TempSchedAddNewShift.tsx

@@ -30,6 +30,7 @@ type AddShiftsStepProps = {
   setShowForm: (showForm: boolean) => void
   shift: Shift | null
   setShift: (shift: Shift) => void
+  intervalValid: boolean
 }
 
 type DTShift = {
@@ -84,6 +85,7 @@ export default function TempSchedAddNewShift({
   setShowForm,
   shift,
   setShift,
+  intervalValid,
 }: AddShiftsStepProps): JSX.Element {
   const [submitted, setSubmitted] = useState(false)
 
@@ -129,6 +131,7 @@ export default function TempSchedAddNewShift({
   }
 
   function handleAddShift(): void {
+    if (!intervalValid) return
     if (fieldErrors(true).length) {
       setSubmitted(true)
       return
@@ -289,6 +292,7 @@ export default function TempSchedAddNewShift({
             color='secondary'
             variant='contained'
             onClick={handleAddShift}
+            disabled={!intervalValid}
           >
             Add
           </Button>

web/src/app/schedules/temp-sched/TempSchedDialog.tsx

@@ -18,13 +18,12 @@ import FormDialog from '../../dialogs/FormDialog'
 import { contentText, dtToDuration, Shift, TempSchedValue } from './sharedUtils'
 import { FormContainer, FormField } from '../../forms'
 import TempSchedAddNewShift from './TempSchedAddNewShift'
-import { isISOAfter, parseInterval } from '../../util/shifts'
+import { checkInterval, parseInterval } from '../../util/shifts'
 import { useScheduleTZ } from '../useScheduleTZ'
 import TempSchedShiftsList from './TempSchedShiftsList'
 import { ISODateTimePicker } from '../../util/ISOPickers'
 import { getCoverageGapItems } from './shiftsListUtil'
 import { fmtLocal } from '../../util/timeFormat'
-import { ensureInterval } from '../timeUtil'
 
 const mutation = gql`
   mutation ($input: SetTemporaryScheduleInput!) {
@@ -110,6 +109,8 @@ export default function TempSchedDialog({
         return true
       }),
   })
+
+  const isValidIvl = checkInterval(value)
   const startDT = DateTime.fromISO(value.start, { zone })
   const [shift, setShift] = useState<Shift>({
     start: startDT.toISO(),
@@ -120,16 +121,10 @@ export default function TempSchedDialog({
   const [allowNoCoverage, setAllowNoCoverage] = useState(false)
   const [hasSubmitted, setHasSubmitted] = useState(false)
 
-  function validate(): Error | null {
-    if (isISOAfter(value.start, value.end)) {
-      return new Error('Start date/time cannot be after end date/time.')
-    }
-    return null
-  }
-
   const hasInvalidShift = (() => {
-    if (q.loading) return false
+    if (q.loading || !isValidIvl) return false
     const schedInterval = parseInterval(value, zone)
+
     return value.shifts.some(
       (s) =>
         DateTime.fromISO(s.end) > DateTime.fromISO(now) &&
@@ -165,8 +160,9 @@ export default function TempSchedDialog({
   }
 
   const hasCoverageGaps = (() => {
-    if (q.loading) return false
+    if (q.loading || !isValidIvl) return false
     const schedInterval = parseInterval(value, zone)
+    if (schedInterval.length('days') > 365) return false
     return (
       getCoverageGapItems(
         schedInterval,
@@ -188,10 +184,14 @@ export default function TempSchedDialog({
         shifts: value.shifts
           .map((s) => _.pick(s, 'start', 'end', 'userID'))
           .filter((s) => {
-            // clamp/filter out shifts that are in the past
+            // filter out shifts that are in the past
             if (DateTime.fromISO(s.end) <= DateTime.fromISO(now)) {
               return false
             }
+            // filter out shifts out of interval bounds
+            if (DateTime.fromISO(s.end) <= DateTime.fromISO(s.start)) {
+              return false
+            }
 
             s.start = clampForward(now, s.start)
             return true
@@ -260,7 +260,7 @@ export default function TempSchedDialog({
           disabled={loading}
           value={value}
           onChange={(newValue: TempSchedValue) => {
-            setValue({ ...value, ...ensureInterval(value, newValue) })
+            setValue({ ...value, ...newValue })
           }}
         >
           <Grid
@@ -297,11 +297,6 @@ export default function TempSchedDialog({
                   required
                   name='start'
                   label='Schedule Start'
-                  min={now}
-                  max={DateTime.fromISO(now, { zone })
-                    .plus({ year: 1 })
-                    .toISO()}
-                  validate={() => validate()}
                   timeZone={zone}
                   disabled={q.loading}
                   hint={isLocalZone ? '' : fmtLocal(value.start)}
@@ -314,11 +309,6 @@ export default function TempSchedDialog({
                   required
                   name='end'
                   label='Schedule End'
-                  min={value.start}
-                  max={DateTime.fromISO(value.start, { zone })
-                    .plus({ month: 3 })
-                    .toISO()}
-                  validate={() => validate()}
                   timeZone={zone}
                   disabled={q.loading}
                   hint={isLocalZone ? '' : fmtLocal(value.end)}
@@ -335,6 +325,7 @@ export default function TempSchedDialog({
                   setShowForm={setShowForm}
                   shift={shift}
                   setShift={setShift}
+                  intervalValid={isValidIvl}
                 />
               </Grid>
             </Grid>

web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx

@@ -16,7 +16,7 @@ import FlatList, {
 } from '../../lists/FlatList'
 import { UserAvatar } from '../../util/avatars'
 import { useUserInfo } from '../../util/useUserInfo'
-import { parseInterval } from '../../util/shifts'
+import { checkInterval, parseInterval } from '../../util/shifts'
 import { useScheduleTZ } from '../useScheduleTZ'
 import { CircularProgress } from '@mui/material'
 import { splitAtMidnight } from '../../util/luxon-helpers'
@@ -88,19 +88,27 @@ export default function TempSchedShiftsList({
     )
   }
 
-  const schedInterval = parseInterval({ start, end }, zone)
-
   function items(): FlatListListItem[] {
     // render helpful message if interval is invalid
-    // shouldn't ever be seen because of our validation checks, but just in case
-    if (!schedInterval.isValid) {
+    if (!checkInterval({ start, end })) {
       return [
         {
           id: 'invalid-sched-interval',
           type: 'ERROR',
           message: 'Invalid Start/End',
-          details:
-            'Oops! There was a problem with the interval selected for your temporary schedule. Please try again.',
+          details: 'Please ensure the start date is before the end date.',
+        },
+      ]
+    }
+
+    const schedInterval = parseInterval({ start, end }, zone)
+    if (schedInterval.length('months') > 6) {
+      return [
+        {
+          id: 'invalid-sched-interval',
+          type: 'ERROR',
+          message: 'Interval Duration Too Long',
+          details: 'Please ensure the date range is less than 6 months.',
         },
       ]
     }

web/src/app/schedules/temp-sched/shiftsListUtil.tsx

@@ -32,7 +32,7 @@ export function getSubheaderItems(
   shifts: Shift[],
   zone: ExplicitZone,
 ): Sortable<FlatListSub>[] {
-  if (!schedInterval.isValid) {
+  if (!schedInterval.isValid || schedInterval.length('months') > 6) {
     return []
   }
 
@@ -67,7 +67,7 @@ export function getOutOfBoundsItems(
   shifts: Shift[],
   zone: ExplicitZone,
 ): Sortable<FlatListNotice>[] {
-  if (!schedInterval.isValid) {
+  if (!schedInterval.isValid || schedInterval.length('months') > 6) {
     return []
   }
 
@@ -121,7 +121,7 @@ export function getCoverageGapItems(
   zone: ExplicitZone,
   handleCoverageClick: (coverageGap: Interval) => void,
 ): Sortable<FlatListNotice>[] {
-  if (!schedInterval.isValid) {
+  if (!schedInterval.isValid || schedInterval.length('months') > 6) {
     return []
   }
   const shiftIntervals = shifts.map((s) => parseInterval(s, zone))