ui: add user shifts calendar to profile

web/src/app/loading/components/Spinner.tsx

@@ -62,7 +62,10 @@ export default function Spinner(props: SpinnerProps): JSX.Element | null {
 
   return (
     <div style={style}>
-      <CircularProgress size={props.text ? '1em' : '40px'} />
+      <CircularProgress
+        data-cy='loading-spinner'
+        size={props.text ? '1em' : '40px'}
+      />
       &nbsp;<Typography variant='body2'>{props.text}</Typography>
     </div>
   )

web/src/app/schedules/calendar/ScheduleCalendarQuery.tsx → web/src/app/schedules/ScheduleCalendarQuery.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { gql, useQuery } from 'urql'
-import ScheduleCalendar from './ScheduleCalendar'
-import { getStartOfWeek, getEndOfWeek } from '../../util/luxon-helpers'
+import { getStartOfWeek, getEndOfWeek } from '../util/luxon-helpers'
 import { DateTime } from 'luxon'
-import { useIsWidthDown } from '../../util/useWidth'
-import { GenericError, ObjectNotFound } from '../../error-pages'
-import { useCalendarNavigation } from './hooks'
+import { useIsWidthDown } from '../util/useWidth'
+import { GenericError, ObjectNotFound } from '../error-pages'
+import { useCalendarNavigation } from '../util/calendar/hooks'
+import Calendar from '../util/calendar/Calendar'
 
 const query = gql`
   query scheduleCalendarShifts(
@@ -104,7 +104,7 @@ function ScheduleCalendarQuery({
     return <ObjectNotFound type='schedule' />
 
   return (
-    <ScheduleCalendar
+    <Calendar
       scheduleID={scheduleID}
       loading={fetching}
       shifts={data?.schedule?.shifts ?? []}

web/src/app/schedules/ScheduleDetails.tsx

@@ -6,7 +6,7 @@ import { Edit, Delete } from '@mui/icons-material'
 import DetailsPage from '../details/DetailsPage'
 import ScheduleEditDialog from './ScheduleEditDialog'
 import ScheduleDeleteDialog from './ScheduleDeleteDialog'
-import ScheduleCalendarQuery from './calendar/ScheduleCalendarQuery'
+import ScheduleCalendarQuery from './ScheduleCalendarQuery'
 import { QuerySetFavoriteButton } from '../util/QuerySetFavoriteButton'
 import CalendarSubscribeButton from './calendar-subscribe/CalendarSubscribeButton'
 import { ObjectNotFound, GenericError } from '../error-pages'

web/src/app/users/UserDetails.tsx

@@ -20,6 +20,7 @@ import UserDeleteDialog from './UserDeleteDialog'
 import { QuerySetFavoriteButton } from '../util/QuerySetFavoriteButton'
 import { EscalationPolicyStep } from '../../schema'
 import { useIsWidthDown } from '../util/useWidth'
+import UserShiftsCalendar from './UserShiftsCalendar'
 
 const userQuery = gql`
   query userInfo($id: ID!) {
@@ -240,6 +241,13 @@ export default function UserDetails(props: {
               userID={userID}
               readOnly={props.readOnly}
             />
+            {!mobile && (
+              <Suspense>
+                <Grid item xs={12}>
+                  <UserShiftsCalendar userID={userID} />
+                </Grid>
+              </Suspense>
+            )}
           </Grid>
         }
         secondaryActions={options}

web/src/app/users/UserNotificationRuleList.tsx

@@ -16,8 +16,8 @@ import UserNotificationRuleDeleteDialog from './UserNotificationRuleDeleteDialog
 import { styles as globalStyles } from '../styles/materialStyles'
 import UserNotificationRuleCreateDialog from './UserNotificationRuleCreateDialog'
 import { useIsWidthDown } from '../util/useWidth'
-import { User } from '../../schema'
 import { ObjectNotFound, GenericError } from '../error-pages'
+import { User } from '../../schema'
 
 const query = gql`
   query nrList($id: ID!) {
@@ -82,7 +82,7 @@ export default function UserNotificationRuleList(props: {
                 variant='contained'
                 onClick={() => setShowAddDialog(true)}
                 startIcon={<Add />}
-                disabled={user.contactMethods.length === 0}
+                disabled={user?.contactMethods.length === 0}
               >
                 Add Rule
               </Button>
@@ -91,18 +91,20 @@ export default function UserNotificationRuleList(props: {
         />
         <FlatList
           data-cy='notification-rules'
-          items={sortNotificationRules(user.notificationRules).map((nr) => ({
-            title: formatNotificationRule(nr.delayMinutes, nr.contactMethod),
-            secondaryAction: props.readOnly ? null : (
-              <IconButton
-                aria-label='Delete notification rule'
-                onClick={() => setDeleteID(nr.id)}
-                color='secondary'
-              >
-                <Delete />
-              </IconButton>
-            ),
-          }))}
+          items={sortNotificationRules(user?.notificationRules ?? []).map(
+            (nr) => ({
+              title: formatNotificationRule(nr.delayMinutes, nr.contactMethod),
+              secondaryAction: props.readOnly ? null : (
+                <IconButton
+                  aria-label='Delete notification rule'
+                  onClick={() => setDeleteID(nr.id)}
+                  color='secondary'
+                >
+                  <Delete />
+                </IconButton>
+              ),
+            }),
+          )}
           emptyMessage='No notification rules'
         />
       </Card>

web/src/app/users/UserShiftsCalendar.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { gql, useQuery } from 'urql'
+import { getStartOfWeek, getEndOfWeek } from '../util/luxon-helpers'
+import { DateTime } from 'luxon'
+import { GenericError } from '../error-pages'
+import { useCalendarNavigation } from '../util/calendar/hooks'
+import Calendar, { Shift } from '../util/calendar/Calendar'
+import { OnCallShift, Schedule } from '../../schema'
+
+const query = gql`
+  query user($id: ID!, $start: ISOTimestamp!, $end: ISOTimestamp!) {
+    user(id: $id) {
+      id
+      assignedSchedules {
+        id
+        name
+        shifts(start: $start, end: $end, userIDs: [$id]) {
+          start
+          end
+        }
+      }
+    }
+  }
+`
+
+interface UserShiftsCalendarProps {
+  userID: string
+}
+
+export default function UserShiftsCalendar({
+  userID,
+}: UserShiftsCalendarProps): JSX.Element | null {
+  const { weekly, start } = useCalendarNavigation()
+
+  const queryStart = weekly
+    ? getStartOfWeek(DateTime.fromISO(start)).toISO()
+    : getStartOfWeek(DateTime.fromISO(start).startOf('month')).toISO()
+
+  const queryEnd = weekly
+    ? getEndOfWeek(DateTime.fromISO(start)).toISO()
+    : getEndOfWeek(DateTime.fromISO(start).endOf('month')).toISO()
+
+  const [{ data, error }] = useQuery({
+    query,
+    variables: {
+      id: userID,
+      start: queryStart,
+      end: queryEnd,
+    },
+  })
+
+  if (error) return <GenericError error={error.message} />
+
+  function makeCalendarShifts(): OnCallShift[] {
+    const assignedSchedules: Schedule[] = data?.user?.assignedSchedules ?? []
+
+    const s: Shift[] = []
+    assignedSchedules.forEach((a) => {
+      a.shifts.forEach((shift) => {
+        s.push({
+          userID: shift.userID,
+          start: shift.start,
+          end: shift.end,
+          truncated: shift.truncated,
+          targetName: a.name,
+          targetID: a.id,
+        })
+      })
+    })
+
+    return s
+  }
+
+  return (
+    <Calendar loading={false} shifts={makeCalendarShifts()} showScheduleLink />
+  )
+}