From 4a17efa66aa04f787e76cf30bee59dd47bd32909 Mon Sep 17 00:00:00 2001
From: GCHQDeveloper36 <73173408+GCHQDeveloper36@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:13:19 +0000
Subject: [PATCH] Use accordions for schema selection, hiding inactive schemas
 by default

---
 .../model/[modelId]/access-request/schema.tsx | 61 ++++++++++++++-----
 frontend/src/schemas/SchemaSelect.tsx         | 56 +++++++++++++----
 2 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/frontend/pages/model/[modelId]/access-request/schema.tsx b/frontend/pages/model/[modelId]/access-request/schema.tsx
index 25390ab61..ca8d8bd8a 100644
--- a/frontend/pages/model/[modelId]/access-request/schema.tsx
+++ b/frontend/pages/model/[modelId]/access-request/schema.tsx
@@ -1,6 +1,18 @@
 import { Schema } from '@mui/icons-material'
 import ArrowBack from '@mui/icons-material/ArrowBack'
-import { Box, Button, Card, Container, Grid, Stack, Typography } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Card,
+  Container,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material'
 import { useGetSchemas } from 'actions/schema'
 import _ from 'lodash-es'
 import { useRouter } from 'next/router'
@@ -31,6 +43,13 @@ export default function AccessRequestSchema() {
     [modelId, router],
   )
 
+  const accordionStyling = {
+    '&:before': {
+      display: 'none',
+    },
+    width: '100%',
+  } as const
+
   const activeSchemaButtons = useMemo(
     () =>
       activeSchemas.length ? (
@@ -93,20 +112,32 @@ export default function AccessRequestSchema() {
               </Typography>
             </Stack>
             <Stack sx={{ mt: 2 }} spacing={2} alignItems='center'>
-              <Typography color='primary' component='h2' variant='h6'>
-                Active Schemas
-              </Typography>
-              <Box sx={{ m: 2 }}>
-                <Grid container spacing={2} justifyContent='center'>
-                  {modelId && activeSchemaButtons}
-                </Grid>
-              </Box>
-              <Typography color='primary' component='h2' variant='h6'>
-                Inactive Schemas
-              </Typography>
-              <Grid container spacing={2} justifyContent='center'>
-                {modelId && inactiveSchemaButtons}
-              </Grid>
+              <Accordion defaultExpanded sx={accordionStyling}>
+                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography sx={{ width: '100%' }} align='center' color='primary' variant='h6' component='h2'>
+                    Active Schemas
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Box sx={{ m: 2 }}>
+                    <Grid container spacing={2} justifyContent='center'>
+                      {modelId && activeSchemaButtons}
+                    </Grid>
+                  </Box>
+                </AccordionDetails>
+              </Accordion>
+              <Accordion sx={accordionStyling}>
+                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography sx={{ width: '100%' }} align='center' color='primary' variant='h6' component='h2'>
+                    Inactive Schemas
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Grid container spacing={2} justifyContent='center'>
+                    {modelId && inactiveSchemaButtons}
+                  </Grid>
+                </AccordionDetails>
+              </Accordion>
             </Stack>
           </Card>
         </Container>
diff --git a/frontend/src/schemas/SchemaSelect.tsx b/frontend/src/schemas/SchemaSelect.tsx
index 711da36a1..0c879cd1b 100644
--- a/frontend/src/schemas/SchemaSelect.tsx
+++ b/frontend/src/schemas/SchemaSelect.tsx
@@ -1,6 +1,17 @@
 import { Schema } from '@mui/icons-material'
 import ArrowBack from '@mui/icons-material/ArrowBack'
-import { Button, Card, Container, Grid, Stack, Typography } from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Card,
+  Container,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material'
 import { useGetModel } from 'actions/model'
 import { postFromSchema } from 'actions/modelCard'
 import { useGetSchemas } from 'actions/schema'
@@ -56,6 +67,13 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
     [currentUser, entry, mutateEntry, router],
   )
 
+  const accordionStyling = {
+    '&:before': {
+      display: 'none',
+    },
+    width: '100%',
+  } as const
+
   const activeSchemaButtons = useMemo(
     () =>
       activeSchemas.length ? (
@@ -120,18 +138,30 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
               </Typography>
             </Stack>
             <Stack sx={{ mt: 2 }} spacing={2} alignItems='center'>
-              <Typography color='primary' variant='h6' component='h2'>
-                Active Schemas
-              </Typography>
-              <Grid container spacing={2} justifyContent='center'>
-                {activeSchemaButtons}
-              </Grid>
-              <Typography color='primary' variant='h6' component='h2'>
-                Inactive Schemas
-              </Typography>
-              <Grid container spacing={2} justifyContent='center'>
-                {inactiveSchemaButtons}
-              </Grid>
+              <Accordion defaultExpanded sx={accordionStyling}>
+                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography sx={{ width: '100%' }} align='center' color='primary' variant='h6' component='h2'>
+                    Active Schemas
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Grid container spacing={2} justifyContent='center'>
+                    {activeSchemaButtons}
+                  </Grid>
+                </AccordionDetails>
+              </Accordion>
+              <Accordion sx={accordionStyling}>
+                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                  <Typography sx={{ width: '100%' }} align='center' color='primary' variant='h6' component='h2'>
+                    Inactive Schemas
+                  </Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Grid container spacing={2} justifyContent='center'>
+                    {inactiveSchemaButtons}
+                  </Grid>
+                </AccordionDetails>
+              </Accordion>
               <MessageAlert message={errorMessage} severity='error' />
             </Stack>
           </Card>