ui/list: padding and console fixes

web/src/app/lists/FlatList.tsx

@@ -101,8 +101,8 @@ export interface FlatListNotice extends Notice {
   handleOnClick?: (event: MouseEvent) => void
   'data-cy'?: string
 }
-export interface FlatListItemOptions extends ListItemProps {
-  title?: string
+export interface FlatListItemOptions extends Omit<ListItemProps, 'title'> {
+  title?: React.ReactNode
   primaryText?: React.ReactNode
   highlight?: boolean
   subText?: JSX.Element | string
@@ -119,7 +119,7 @@ export interface FlatListItemOptions extends ListItemProps {
 }
 
 export interface SectionTitle {
-  title: string
+  title: React.ReactNode
   icon?: React.ReactNode | null
   subText?: JSX.Element | string
 }
@@ -172,7 +172,7 @@ export default function FlatList({
   const classes = useStyles()
 
   // collapsable sections state
-  const [openSections, setOpenSections] = useState<string[]>(
+  const [openSections, setOpenSections] = useState<React.ReactNode[]>(
     sections && sections.length ? [sections[0].title] : [],
   )
 
@@ -182,7 +182,9 @@ export default function FlatList({
     if (
       openSections.length &&
       sectionArr?.length &&
-      !sectionArr?.find((section: string) => section === openSections[0])
+      !sectionArr?.find(
+        (section: React.ReactNode) => section === openSections[0],
+      )
     ) {
       setOpenSections([sectionArr[0]])
     }
@@ -367,7 +369,7 @@ export default function FlatList({
   }
 
   function renderCollapsableItems(): JSX.Element[] | undefined {
-    const toggleSection = (section: string): void => {
+    const toggleSection = (section: React.ReactNode): void => {
       if (openSections?.includes(section)) {
         setOpenSections(
           openSections.filter((openSection) => openSection !== section),

web/src/app/lists/FlatListItem.tsx

@@ -63,7 +63,7 @@ export default function FlatListItem(props: FlatListItemProps): JSX.Element {
   let linkProps = {}
   if (url) {
     linkProps = {
-      // MUI renders differently based on if secondaryAction is present
+      // if you render a link with a secondary action, MUI will render the <a> tag without an <li> around it
       component: secondaryAction ? AppLink : AppLinkListItem,
       to: url,
       button: true,
@@ -102,6 +102,7 @@ export default function FlatListItem(props: FlatListItemProps): JSX.Element {
             [classes.listItemDisabled]: disabled,
           }),
           tabIndex: 0,
+          component: typeof subText === 'string' ? 'p' : 'div',
         }}
       />
       {secondaryAction && (

web/src/app/services/IntegrationKeyList.tsx

@@ -13,7 +13,7 @@ import IntegrationKeyDeleteDialog from './IntegrationKeyDeleteDialog'
 import CopyText from '../util/CopyText'
 import AppLink from '../util/AppLink'
 import { useIsWidthDown } from '../util/useWidth'
-import { Add, ArrowDownward } from '@mui/icons-material'
+import { Add } from '@mui/icons-material'
 import makeStyles from '@mui/styles/makeStyles'
 import Spinner from '../loading/components/Spinner'
 import { GenericError } from '../error-pages'
@@ -24,9 +24,9 @@ import {
   AccordionDetails,
   AccordionSummary,
   Chip,
-  Divider,
   Typography,
 } from '@mui/material'
+import { ChevronDown } from 'mdi-material-ui'
 
 const query = gql`
   query ($serviceID: ID!) {
@@ -147,11 +147,12 @@ export default function IntegrationKeyList(props: {
     .map(
       (key: IntegrationKey): FlatListListItem => ({
         title: key.name,
-        subText: <Chip label={key.externalSystemName} />,
+        subText: <Chip label={key.externalSystemName} sx={{ mt: 1 }} />,
         secondaryAction: (
           <IconButton
             onClick={(): void => setDeleteDialog(key.id)}
             size='large'
+            sx={{ right: '-16px' }}
           >
             <Trash />
           </IconButton>
@@ -188,20 +189,20 @@ export default function IntegrationKeyList(props: {
               }
             />
             {!!extItems.length && (
-              <React.Fragment>
-                <Divider />
-                <Accordion disableGutters elevation={0}>
-                  <AccordionSummary expandIcon={<ArrowDownward />}>
-                    <Typography>Externally Managed Keys</Typography>
-                  </AccordionSummary>
-                  <AccordionDetails>
-                    <FlatList
-                      headerNote='These keys are managed by other applications.'
-                      items={extItems}
-                    />
-                  </AccordionDetails>
-                </Accordion>
-              </React.Fragment>
+              <Accordion disableGutters elevation={0}>
+                <AccordionSummary
+                  expandIcon={<ChevronDown />}
+                  sx={{ ml: '6px', mr: '12px' }}
+                >
+                  <Typography>Externally Managed Keys</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <FlatList
+                    headerNote='These keys are managed by other applications.'
+                    items={extItems}
+                  />
+                </AccordionDetails>
+              </Accordion>
             )}
           </CardContent>
         </Card>

web/src/app/util/AppLink.tsx

@@ -62,10 +62,12 @@ const AppLink: ForwardRefRenderFunction<HTMLAnchorElement, AppLinkProps> =
 
 export default forwardRef(AppLink)
 
+// forwardRef required to shut console up
 export const AppLinkListItem = forwardRef<HTMLAnchorElement, AppLinkProps>(
-  (props, ref) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (props, _) => (
     <li>
-      <AppLink ref={ref} {...props} />
+      <AppLink {...props} />
     </li>
   ),
 )