ui/services: sort on call users by escalation step

web/src/app/lists/FlatList.tsx

@@ -15,7 +15,13 @@ import Typography from '@mui/material/Typography'
 import ListSubheader from '@mui/material/ListSubheader'
 import makeStyles from '@mui/styles/makeStyles'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
-import { Alert, AlertTitle } from '@mui/material'
+import {
+  Alert,
+  AlertTitle,
+  ListItemButton,
+  ListItemIcon,
+  Collapse,
+} from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 import DoneIcon from '@mui/icons-material/Done'
 import {
@@ -36,6 +42,7 @@ import classnames from 'classnames'
 import { Notice, toSeverity } from '../details/Notices'
 import FlatListItem from './FlatListItem'
 import { DraggableListItem, getAnnouncements } from './DraggableListItem'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
 
 const useStyles = makeStyles({
   alert: {
@@ -96,6 +103,7 @@ export interface FlatListItem {
   highlight?: boolean
   subText?: JSX.Element | string
   icon?: JSX.Element | null
+  section?: string | number
   secondaryAction?: JSX.Element | null
   url?: string
   id?: string // required for drag and drop functionality
@@ -104,11 +112,19 @@ export interface FlatListItem {
   disabled?: boolean
 }
 
+export interface SectionTitle {
+  title: string
+  icon?: JSX.Element | null
+}
+
 export type FlatListListItem = FlatListSub | FlatListItem | FlatListNotice
 
 export interface FlatListProps extends ListProps {
   items: FlatListListItem[]
 
+  // sectition titles for collaspable sections
+  sections?: SectionTitle[]
+
   // header elements will be displayed at the top of the list.
   headerNote?: JSX.Element | string | ReactNode // left-aligned
   headerAction?: JSX.Element // right-aligned
@@ -127,6 +143,9 @@ export interface FlatListProps extends ListProps {
   // will render transition in list
   transition?: boolean
 
+  // will render items in collaspable sections in list
+  collapsable?: boolean
+
   // renders an edit button that hides the options buttons until toggled on
   toggleDnD?: boolean
 }
@@ -138,12 +157,31 @@ export default function FlatList({
   headerAction,
   items,
   inset,
+  sections,
   transition,
+  collapsable,
   toggleDnD,
   ...listProps
 }: FlatListProps): JSX.Element {
   const classes = useStyles()
 
+  // collapsable sections state
+  const [openSections, setOpenSections] = useState<string[]>(
+    sections && sections.length ? [sections[0].title] : [],
+  )
+
+  useEffect(() => {
+    const sectionArr = sections?.map((section) => section.title)
+    // update openSections if there are new sections
+    if (
+      openSections.length &&
+      sectionArr?.length &&
+      !sectionArr?.find((section: string) => section === openSections[0])
+    ) {
+      setOpenSections([sectionArr[0]])
+    }
+  }, [sections])
+
   // drag and drop stuff
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -333,6 +371,46 @@ export default function FlatList({
     })
   }
 
+  function renderCollapsableItems(): JSX.Element[] | undefined {
+    const toggleSection = (section: string): void => {
+      if (openSections?.includes(section)) {
+        setOpenSections(
+          openSections.filter((openSection) => openSection !== section),
+        )
+      } else {
+        setOpenSections([...openSections, section])
+      }
+    }
+    return sections?.map((section, idx) => {
+      const open = openSections?.includes(section.title)
+      return (
+        <React.Fragment key={idx}>
+          <ListItemButton onClick={() => toggleSection(section.title)}>
+            {section.icon && <ListItemIcon>{section.icon}</ListItemIcon>}
+            <ListItemText primary={section.title} />
+            {open ? <ExpandLess /> : <ExpandMore />}
+          </ListItemButton>
+          <Collapse in={open} unmountOnExit>
+            <List>
+              {items
+                .filter((item: FlatListItem) => item.section === section.title)
+                .map((item, idx) => {
+                  return (
+                    <FlatListItem
+                      index={idx}
+                      key={idx}
+                      item={item}
+                      showOptions={toggleDnD ? draggable : true}
+                    />
+                  )
+                })}
+            </List>
+          </Collapse>
+        </React.Fragment>
+      )
+    })
+  }
+
   function renderList(): JSX.Element {
     let sx = listProps.sx
     if (onReorder) {
@@ -342,6 +420,16 @@ export default function FlatList({
       }
     }
 
+    const renderListItems = ():
+      | (JSX.Element | undefined)[]
+      | JSX.Element
+      | JSX.Element[]
+      | undefined => {
+      if (transition) return renderTransitions()
+      if (collapsable) return renderCollapsableItems()
+      return renderItems()
+    }
+
     return (
       <List {...listProps} sx={sx}>
         {(headerNote || headerAction || onReorder) && (
@@ -372,7 +460,7 @@ export default function FlatList({
           </MUIListItem>
         )}
         {!items.length && renderEmptyMessage()}
-        {transition ? renderTransitions() : renderItems()}
+        {renderListItems()}
       </List>
     )
   }

web/src/app/services/ServiceOnCallList.js

@@ -32,19 +32,8 @@ const query = gql`
   }
 `
 
-const stepsText = (_steps) => {
-  const steps = _.chain(_steps)
-    .sort()
-    .map((s) => `#${s + 1}`)
-    .value()
-  if (steps.length === 1) {
-    return 'Step ' + steps[0]
-  }
-
-  const last = steps.pop()
-  return (
-    `Steps ` + steps.join(', ') + (steps.length > 2 ? ', and ' : ' and ') + last
-  )
+const stepText = (s) => {
+  return `Step #${s + 1}`
 }
 
 export default function ServiceOnCallList({ serviceID }) {
@@ -54,6 +43,7 @@ export default function ServiceOnCallList({ serviceID }) {
   })
 
   let items = []
+  let sections = []
   const style = {}
   if (error) {
     items = [
@@ -71,21 +61,27 @@ export default function ServiceOnCallList({ serviceID }) {
       },
     ]
     style.color = 'gray'
+    sections = [
+      {
+        title: 'Fetching users...',
+        icon: <CircularProgress />,
+      },
+    ]
   } else {
+    const chainedItems = _.chain(data?.service?.onCallUsers)
+    sections = chainedItems
+      .groupBy('stepNumber')
+      .keys()
+      .map((s) => ({ title: stepText(Number(s)) }))
+      .value()
+
     items = _.chain(data?.service?.onCallUsers)
-      .groupBy('userID')
-      .mapValues((v) => ({
-        id: v[0].userID,
-        name: v[0].userName,
-        steps: _.map(v, 'stepNumber'),
-      }))
-      .values()
-      .sortBy('name')
+      .sortBy(['stepNumber', 'userName'])
       .map((u) => ({
-        title: u.name,
-        subText: stepsText(u.steps),
-        icon: <UserAvatar userID={u.id} />,
-        url: `/users/${u.id}`,
+        title: u.userName,
+        icon: <UserAvatar userID={u.userID} />,
+        section: stepText(u.stepNumber),
+        url: `/users/${u.userID}`,
       }))
       .value()
   }
@@ -100,6 +96,8 @@ export default function ServiceOnCallList({ serviceID }) {
       <FlatList
         emptyMessage='No users on-call for this service'
         items={items}
+        sections={sections}
+        collapsable
       />
     </Card>
   )

web/src/cypress/e2e/services.cy.ts

@@ -59,7 +59,7 @@ function testServices(screen: ScreenFormat): void {
       cy.url().should('eq', Cypress.config().baseUrl + `/services/${svc.id}`)
     })
 
-    describe.only('Filtering', () => {
+    describe('Filtering', () => {
       let label1: Label
       let label2: Label // uses key/value from label1
       let intKey: IntegrationKey