ui/schedules: migrate schedule components from FlatList to CompList

web/src/app/lists/CompListItems.tsx

@@ -12,8 +12,12 @@ import AppLink from '../util/AppLink'
 import { ExpandLess, ExpandMore } from '@mui/icons-material'
 
 export type CompListItemTextProps = {
-  title: React.ReactNode
+  title?: React.ReactNode
   icon?: React.ReactNode
+  /* Set to true to always create space for the icon, even if it is not set */
+  alwaysShowIcon?: boolean
+  highlight?: boolean
+
   subText?: React.ReactNode
   action?: React.ReactNode
   disableTypography?: boolean
@@ -24,8 +28,10 @@ export function CompListItemText(
   props: CompListItemTextProps,
 ): React.ReactNode {
   return (
-    <ListItem>
-      {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
+    <ListItem className={props.highlight ? 'Mui-selected' : ''}>
+      {(props.icon || props.alwaysShowIcon) && (
+        <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>
+      )}
       <ListItemText
         disableTypography={props.disableTypography}
         primary={props.title}
@@ -40,13 +46,14 @@ export function CompListItemText(
 
 export type CompListItemNavProps = CompListItemTextProps & {
   url: string
+  newTab?: boolean
 }
 
 /* A list item that links to a URL. */
 export function CompListItemNav(props: CompListItemNavProps): React.ReactNode {
   return (
     <li>
-      <ListItemButton component={AppLink} to={props.url}>
+      <ListItemButton component={AppLink} to={props.url} newTab={props.newTab}>
         {props.icon && <ListItemIcon tabIndex={-1}>{props.icon}</ListItemIcon>}
         <ListItemText primary={props.title} secondary={props.subText} />
         {props.action && (

web/src/app/schedules/ScheduleAssignedToList.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList from '../lists/FlatList'
 import Card from '@mui/material/Card'
 import Spinner from '../loading/components/Spinner'
 import { GenericError } from '../error-pages'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query ($id: ID!) {
@@ -36,15 +37,15 @@ export default function ScheduleAssignedToList(props: {
 
   return (
     <Card sx={{ width: '100%' }}>
-      <FlatList
-        items={data.schedule.assignedTo.map(
-          (t: { name: string; id: string }) => ({
-            title: t.name,
-            url: `/escalation-policies/${t.id}`,
-          }),
-        )}
-        emptyMessage='This schedule is not assigned to any escalation policies.'
-      />
+      <CompList emptyMessage='This schedule is not assigned to any escalation policies.'>
+        {data.schedule.assignedTo.map((t: { name: string; id: string }) => (
+          <CompListItemNav
+            key={t.id}
+            title={t.name}
+            url={`/escalation-policies/${t.id}`}
+          />
+        ))}
+      </CompList>
     </Card>
   )
 }

web/src/app/schedules/ScheduleList.tsx

@@ -5,8 +5,9 @@ import { useURLParam } from '../actions'
 import { ScheduleConnection } from '../../schema'
 import ListPageControls from '../lists/ListPageControls'
 import Search from '../util/Search'
-import FlatList from '../lists/FlatList'
 import { FavoriteIcon } from '../util/SetFavoriteButton'
+import CompList from '../lists/CompList'
+import { CompListItemNav } from '../lists/CompListItems'
 
 const query = gql`
   query schedulesQuery($input: ScheduleSearchOptions) {
@@ -67,17 +68,17 @@ export default function ScheduleList(): JSX.Element {
         slots={{
           search: <Search />,
           list: (
-            <FlatList
-              emptyMessage='No results'
-              items={
-                q.data?.schedules.nodes.map((u) => ({
-                  title: u.name,
-                  subText: u.description,
-                  url: u.id,
-                  secondaryAction: u.isFavorite ? <FavoriteIcon /> : undefined,
-                })) || []
-              }
-            />
+            <CompList emptyMessage='No results'>
+              {q.data?.schedules.nodes.map((u) => (
+                <CompListItemNav
+                  key={u.id}
+                  title={u.name}
+                  subText={u.description}
+                  url={u.id}
+                  action={u.isFavorite ? <FavoriteIcon /> : undefined}
+                />
+              ))}
+            </CompList>
           ),
         }}
       />

web/src/app/schedules/ScheduleOverrideList.jsx

@@ -19,7 +19,8 @@ import { defaultTempSchedValue } from './temp-sched/sharedUtils'
 import ScheduleOverrideDialog from './ScheduleOverrideDialog'
 import CreateFAB from '../lists/CreateFAB'
 import ListPageControls from '../lists/ListPageControls'
-import FlatList from '../lists/FlatList'
+import CompList from '../lists/CompList'
+import { CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleOverrides($input: UserOverrideSearchOptions) {
@@ -143,35 +144,10 @@ export default function ScheduleOverrideList({ scheduleID }) {
         loading={q.fetching}
         slots={{
           list: (
-            <FlatList
+            <CompList
               emptyMessage='No results'
-              headerNote={note}
-              items={
-                q.data?.userOverrides.nodes.map((n) => ({
-                  title: n.addUser ? n.addUser.name : n.removeUser.name,
-                  subText: subText(n),
-                  icon: (
-                    <UserAvatar
-                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
-                    />
-                  ),
-                  secondaryAction: (
-                    <OtherActions
-                      actions={[
-                        {
-                          label: 'Edit',
-                          onClick: () => setEditID(n.id),
-                        },
-                        {
-                          label: 'Delete',
-                          onClick: () => setDeleteID(n.id),
-                        },
-                      ]}
-                    />
-                  ),
-                })) || []
-              }
-              headerAction={
+              note={note}
+              action={
                 <React.Fragment>
                   <FilterContainer onReset={() => resetFilter()}>
                     <Grid item xs={12}>
@@ -212,7 +188,34 @@ export default function ScheduleOverrideList({ scheduleID }) {
                   )}
                 </React.Fragment>
               }
-            />
+            >
+              {q.data?.userOverrides.nodes.map((n) => (
+                <CompListItemText
+                  key={n.id}
+                  title={n.addUser ? n.addUser.name : n.removeUser.name}
+                  subText={subText(n)}
+                  icon={
+                    <UserAvatar
+                      userID={n.addUser ? n.addUser.id : n.removeUser.id}
+                    />
+                  }
+                  action={
+                    <OtherActions
+                      actions={[
+                        {
+                          label: 'Edit',
+                          onClick: () => setEditID(n.id),
+                        },
+                        {
+                          label: 'Delete',
+                          onClick: () => setDeleteID(n.id),
+                        },
+                      ]}
+                    />
+                  }
+                />
+              ))}
+            </CompList>
           ),
         }}
       />

web/src/app/schedules/ScheduleRuleList.tsx

@@ -1,6 +1,5 @@
 import React, { Suspense, useState } from 'react'
 import { useQuery, gql } from 'urql'
-import FlatList, { FlatListListItem } from '../lists/FlatList'
 import { Button, ButtonGroup, Card } from '@mui/material'
 import { GroupAdd, PersonAdd } from '@mui/icons-material'
 import Tooltip from '@mui/material/Tooltip'
@@ -18,6 +17,8 @@ import { DateTime } from 'luxon'
 import { useScheduleTZ } from './useScheduleTZ'
 import { useIsWidthDown } from '../util/useWidth'
 import { ScheduleRule, ScheduleTarget, TargetType } from '../../schema'
+import CompList from '../lists/CompList'
+import { CompListItemNav, CompListItemText } from '../lists/CompListItems'
 
 const query = gql`
   query scheduleRules($id: ID!) {
@@ -99,64 +100,75 @@ export default function ScheduleRuleList(
     targets: ScheduleTarget[],
     timeZone: string,
   ): JSX.Element {
-    const items: FlatListListItem[] = []
+    const items: React.ReactNode[] = []
 
     let lastType: TargetType
     sortBy(targets, ['target.type', 'target.name']).forEach((tgt) => {
       const { name, id, type } = tgt.target
       if (type !== lastType) {
-        items.push({ subHeader: startCase(type + 's') })
+        items.push(
+          <CompListItemText key={type} subText={startCase(type + 's')} />,
+        )
         lastType = type
       }
 
-      items.push({
-        title: name,
-        url: (type === 'rotation' ? '/rotations/' : '/users/') + id,
-        subText: renderSubText(tgt.rules, timeZone),
-        icon:
-          type === 'rotation' ? <RotationAvatar /> : <UserAvatar userID={id} />,
-        secondaryAction: (
-          <OtherActions
-            actions={[
-              {
-                label: 'Edit',
-                onClick: () => setEditTarget({ type, id }),
-              },
-              {
-                label: 'Delete',
-                onClick: () => setDeleteTarget({ type, id }),
-              },
-            ]}
-          />
-        ),
-      })
+      items.push(
+        <CompListItemNav
+          key={id}
+          title={name}
+          newTab
+          url={(type === 'rotation' ? '/rotations/' : '/users/') + id}
+          subText={renderSubText(tgt.rules, timeZone)}
+          icon={
+            type === 'rotation' ? (
+              <RotationAvatar />
+            ) : (
+              <UserAvatar userID={id} />
+            )
+          }
+          action={
+            <OtherActions
+              actions={[
+                {
+                  label: 'Edit',
+                  onClick: () => setEditTarget({ type, id }),
+                },
+                {
+                  label: 'Delete',
+                  onClick: () => setDeleteTarget({ type, id }),
+                },
+              ]}
+            />
+          }
+        />,
+      )
     })
 
     return (
       <React.Fragment>
         <Card style={{ width: '100%', marginBottom: 64 }}>
-          <FlatList
-            headerNote={`Showing times in ${data.schedule.timeZone}.`}
-            items={items}
-            headerAction={
-              !isMobile ? (
-                <ButtonGroup variant='contained'>
-                  <Button
-                    startIcon={<GroupAdd />}
-                    onClick={() => setCreateType('rotation')}
-                  >
-                    Add Rotation
-                  </Button>
-                  <Button
-                    startIcon={<PersonAdd />}
-                    onClick={() => setCreateType('user')}
-                  >
-                    Add User
-                  </Button>
-                </ButtonGroup>
-              ) : undefined
+          <CompList
+            note={`Showing times in ${data.schedule.timeZone}.`}
+            hideActionOnMobile
+            action={
+              <ButtonGroup variant='contained'>
+                <Button
+                  startIcon={<GroupAdd />}
+                  onClick={() => setCreateType('rotation')}
+                >
+                  Add Rotation
+                </Button>
+                <Button
+                  startIcon={<PersonAdd />}
+                  onClick={() => setCreateType('user')}
+                >
+                  Add User
+                </Button>
+              </ButtonGroup>
             }
-          />
+          >
+            {items}
+          </CompList>
         </Card>
 
         {isMobile && (