ui/schedules: temp sched calendar override button

web/src/app/schedules/ScheduleDetails.js

@@ -32,6 +32,16 @@ const query = gql`
   }
 `
 
+export const ScheduleCalendarContext = React.createContext({
+  onNewTempSched: () => {},
+  onEditTempSched: () => {},
+  onDeleteTempSched: () => {},
+  // ts files infer function signature, need parameter list
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setOverrideDialog: (overrideVal) => {},
+  overrideDialog: null,
+})
+
 export default function ScheduleDetails({ scheduleID }) {
   const [showEdit, setShowEdit] = useState(false)
   const [showDelete, setShowDelete] = useState(false)
@@ -43,6 +53,7 @@ export default function ScheduleDetails({ scheduleID }) {
   const onNewTempSched = useCallback(() => setConfigTempSchedule(true), [])
   const onEditTempSched = useCallback(setConfigTempSchedule, [])
   const onDeleteTempSched = useCallback(setDeleteTempSchedule, [])
+  const [overrideDialog, setOverrideDialog] = useState(null)
 
   const {
     data: _data,
@@ -96,12 +107,17 @@ export default function ScheduleDetails({ scheduleID }) {
         subheader={`Time Zone: ${data.timeZone || 'Loading...'}`}
         details={data.description}
         pageContent={
-          <ScheduleCalendarQuery
-            scheduleID={scheduleID}
-            onNewTempSched={onNewTempSched}
-            onEditTempSched={onEditTempSched}
-            onDeleteTempSched={onDeleteTempSched}
-          />
+          <ScheduleCalendarContext.Provider
+            value={{
+              onNewTempSched,
+              onEditTempSched,
+              onDeleteTempSched,
+              setOverrideDialog,
+              overrideDialog,
+            }}
+          >
+            <ScheduleCalendarQuery scheduleID={scheduleID} />
+          </ScheduleCalendarContext.Provider>
         }
         primaryActions={[
           <CalendarSubscribeButton

web/src/app/schedules/ScheduleOverrideCreateDialog.js

@@ -1,25 +1,44 @@
 import React, { useState } from 'react'
 import { gql, useMutation } from '@apollo/client'
 import p from 'prop-types'
-
 import FormDialog from '../dialogs/FormDialog'
 import { DateTime } from 'luxon'
 import ScheduleOverrideForm from './ScheduleOverrideForm'
 import { fieldErrors, nonFieldErrors } from '../util/errutil'
 import useOverrideNotices from './useOverrideNotices'
 
-const copyText = {
+export const variantDetails = {
   add: {
-    title: 'Temporarily Add a User',
-    desc: 'This will add a new shift for the selected user, while the override is active. Existing shifts will remain unaffected.',
+    title: 'Temporarily Add User',
+    desc: 'Create a new shift for the selected user. Existing shifts will remain unaffected.',
+    name: 'Additional Coverage',
+    helperText: 'Add an additional on-call user for a given time frame.',
   },
   remove: {
-    title: 'Temporarily Remove a User',
-    desc: 'This will remove (or split/shorten) shifts belonging to the selected user, while the override is active.',
+    title: 'Temporarily Remove User',
+    desc: 'Remove (or split/shorten) shifts belonging to the selected user during the specified time frame.',
+    name: 'Remove Coverage',
+    helperText: "Remove one user's shifts during a given time frame.",
   },
   replace: {
-    title: 'Temporarily Replace a User',
-    desc: 'This will replace the selected user with another during any existing shifts, while the override is active. No new shifts will be created, only who is on-call will be changed.',
+    title: 'Temporarily Replace User',
+    desc: 'Select one user to take over the shifts of another user during the specified time frame.',
+    name: "Cover Someone's Shifts",
+    helperText:
+      'Have one user take over the shifts of another user during a given time frame.',
+  },
+  temp: {
+    title: 'Create Temporary Schedule',
+    desc: 'Replace the entire schedule for a given period of time.',
+    name: 'Temporary Schedule',
+    helperText:
+      'Define a fixed shift-by-shift schedule to use for a given time frame.',
+  },
+  choose: {
+    title: 'Choose Override Action',
+    desc: 'Select the type of override you would like to apply to this schedule.',
+    name: 'Choose',
+    helperText: 'Determine which override action you want to take.',
   },
 }
 
@@ -30,7 +49,6 @@ const mutation = gql`
     }
   }
 `
-
 export default function ScheduleOverrideCreateDialog(props) {
   const [value, setValue] = useState({
     addUserID: '',
@@ -55,8 +73,8 @@ export default function ScheduleOverrideCreateDialog(props) {
   return (
     <FormDialog
       onClose={props.onClose}
-      title={copyText[props.variant].title}
-      subTitle={copyText[props.variant].desc}
+      title={variantDetails[props.variant].title}
+      subTitle={variantDetails[props.variant].desc}
       errors={nonFieldErrors(error)}
       notices={notices} // create and edit dialogue
       onSubmit={() => mutate()}

web/src/app/schedules/calendar/ScheduleCalendar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useContext } from 'react'
 import { PropTypes as p } from 'prop-types'
 import { Card, Button, makeStyles } from '@material-ui/core'
 import Grid from '@material-ui/core/Grid'
@@ -7,11 +7,8 @@ import Switch from '@material-ui/core/Switch'
 import Typography from '@material-ui/core/Typography'
 import { Calendar } from 'react-big-calendar'
 import 'react-big-calendar/lib/css/react-big-calendar.css'
-import ScheduleCalendarEventWrapper, {
-  EventHandlerContext,
-} from './ScheduleCalendarEventWrapper'
+import ScheduleCalendarEventWrapper from './ScheduleCalendarEventWrapper'
 import ScheduleCalendarToolbar from './ScheduleCalendarToolbar'
-import ScheduleOverrideCreateDialog from '../ScheduleOverrideCreateDialog'
 import { useResetURLParams, useURLParam } from '../../actions'
 import { DateTime, Interval } from 'luxon'
 import { theme } from '../../mui'
@@ -23,6 +20,8 @@ import FilterContainer from '../../util/FilterContainer'
 import { UserSelect } from '../../selection'
 import SpinContainer from '../../loading/components/SpinContainer'
 import { useCalendarNavigation } from './hooks'
+import { ScheduleCalendarContext } from '../ScheduleDetails'
+import ScheduleCalendarOverrideDialog from '../calendar/ScheduleCalendarOverrideDialog'
 
 const localizer = LuxonLocalizer(DateTime, { firstDayOfWeek: 0 })
 
@@ -40,20 +39,18 @@ const useStyles = makeStyles((theme) => ({
 
 function ScheduleCalendar(props) {
   const classes = useStyles()
+
+  const { overrideDialog, setOverrideDialog } = useContext(
+    ScheduleCalendarContext,
+  )
+
   const { weekly, start } = useCalendarNavigation()
 
-  const [overrideDialog, setOverrideDialog] = useState(null)
   const [activeOnly, setActiveOnly] = useURLParam('activeOnly', false)
   const [userFilter, setUserFilter] = useURLParam('userFilter', [])
   const resetFilter = useResetURLParams('userFilter', 'activeOnly')
 
-  const {
-    shifts,
-    temporarySchedules,
-    onNewTempSched,
-    onEditTempSched,
-    onDeleteTempSched,
-  } = props
+  const { shifts, temporarySchedules } = props
 
   const eventStyleGetter = (event, start, end, isSelected) => {
     if (event.fixed) {
@@ -170,55 +167,52 @@ function ScheduleCalendar(props) {
             <Button
               variant='contained'
               color='primary'
-              data-cy='new-temp-sched'
-              onClick={onNewTempSched}
+              data-cy='new-override'
+              onClick={() =>
+                setOverrideDialog({
+                  variantOptions: ['replace', 'remove', 'add', 'temp'],
+                  removeUserReadOnly: false,
+                })
+              }
               className={classes.tempSchedBtn}
               startIcon={<GroupAdd />}
               title='Make temporary change to schedule'
             >
-              Temp Sched
+              Override
             </Button>
           }
         />
         <SpinContainer loading={props.loading}>
-          <EventHandlerContext.Provider
-            value={{
-              onEditTempSched,
-              onDeleteTempSched,
-              onOverrideClick: setOverrideDialog,
+          <Calendar
+            date={DateTime.fromISO(start).toJSDate()}
+            localizer={localizer}
+            events={getCalEvents(shifts, temporarySchedules)}
+            style={{
+              height: weekly ? '100%' : '45rem',
+              fontFamily: theme.typography.body2.fontFamily,
+              fontSize: theme.typography.body2.fontSize,
             }}
-          >
-            <Calendar
-              date={DateTime.fromISO(start).toJSDate()}
-              localizer={localizer}
-              events={getCalEvents(shifts, temporarySchedules)}
-              style={{
-                height: weekly ? '100%' : '45rem',
-                fontFamily: theme.typography.body2.fontFamily,
-                fontSize: theme.typography.body2.fontSize,
-              }}
-              tooltipAccessor={() => null}
-              views={['month', 'week']}
-              view={weekly ? 'week' : 'month'}
-              showAllEvents
-              eventPropGetter={eventStyleGetter}
-              onNavigate={() => {}} // stub to hide false console err
-              onView={() => {}} // stub to hide false console err
-              components={{
-                eventWrapper: ScheduleCalendarEventWrapper,
-                toolbar: () => null,
-              }}
-            />
-          </EventHandlerContext.Provider>
+            tooltipAccessor={() => null}
+            views={['month', 'week']}
+            view={weekly ? 'week' : 'month'}
+            showAllEvents
+            eventPropGetter={eventStyleGetter}
+            onNavigate={() => {}} // stub to hide false console err
+            onView={() => {}} // stub to hide false console err
+            components={{
+              eventWrapper: ScheduleCalendarEventWrapper,
+              toolbar: () => null,
+            }}
+          />
         </SpinContainer>
       </Card>
       {Boolean(overrideDialog) && (
-        <ScheduleOverrideCreateDialog
+        <ScheduleCalendarOverrideDialog
           defaultValue={overrideDialog.defaultValue}
-          variant={overrideDialog.variant}
+          variantOptions={overrideDialog.variantOptions}
           scheduleID={props.scheduleID}
           onClose={() => setOverrideDialog(null)}
-          removeUserReadOnly
+          removeUserReadOnly={overrideDialog.removeUserReadOnly}
         />
       )}
     </React.Fragment>

web/src/app/schedules/calendar/ScheduleCalendarEventWrapper.js

@@ -6,6 +6,7 @@ import Popover from '@material-ui/core/Popover'
 import Typography from '@material-ui/core/Typography'
 import { makeStyles } from '@material-ui/core'
 import { DateTime } from 'luxon'
+import { ScheduleCalendarContext } from '../ScheduleDetails'
 
 const useStyles = makeStyles({
   button: {
@@ -26,17 +27,12 @@ const useStyles = makeStyles({
   },
 })
 
-export const EventHandlerContext = React.createContext({
-  onOverrideClick: () => {},
-  onEditTempSched: () => {},
-  onDeleteTempSched: () => {},
-})
-
 export default function ScheduleCalendarEventWrapper({ children, event }) {
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
-  const { onOverrideClick, onEditTempSched, onDeleteTempSched } =
-    useContext(EventHandlerContext)
+  const { setOverrideDialog, onEditTempSched, onDeleteTempSched } = useContext(
+    ScheduleCalendarContext,
+  )
   const open = Boolean(anchorEl)
   const id = open ? 'shift-popover' : undefined
 
@@ -55,11 +51,12 @@ export default function ScheduleCalendarEventWrapper({ children, event }) {
     }
   }
 
-  function handleShowOverrideForm(type) {
+  function handleShowOverrideForm() {
     handleCloseShiftInfo()
 
-    onOverrideClick({
-      variant: type,
+    setOverrideDialog({
+      variantOptions: ['replace', 'remove'],
+      removeUserReadOnly: true,
       defaultValue: {
         start: event.start.toISOString(),
         end: event.end.toISOString(),
@@ -111,29 +108,17 @@ export default function ScheduleCalendarEventWrapper({ children, event }) {
   function renderOverrideButtons() {
     return (
       <React.Fragment>
-        <Grid item>
-          <Button
-            data-cy='replace-override'
-            size='small'
-            onClick={() => handleShowOverrideForm('replace')}
-            variant='contained'
-            color='primary'
-            title={`Temporarily replace ${event.title} from this schedule`}
-          >
-            Replace
-          </Button>
-        </Grid>
         <Grid item className={classes.flexGrow} />
         <Grid item>
           <Button
-            data-cy='remove-override'
+            data-cy='override'
             size='small'
-            onClick={() => handleShowOverrideForm('remove')}
+            onClick={handleShowOverrideForm}
             variant='contained'
             color='primary'
             title={`Temporarily remove ${event.title} from this schedule`}
           >
-            Remove
+            Override Shift
           </Button>
         </Grid>
       </React.Fragment>