break out app group header component for readability

discord · Oct 28, 2024 · a9e3b16 · a9e3b16
1 parent 1c1ff99
commit a9e3b16
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 68 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -31,7 +31,7 @@ import ListTags from './pages/tags/List';
 import ListUsers from './pages/users/List';
 import NavItems from './components/NavItems';
 import NotFound from './pages/NotFound';
-import ReadApp from './pages/apps/Read';
+import {ReadApp} from './pages/apps/app_detail';
 import ReadGroup from './pages/groups/Read';
 import ReadTag from './pages/tags/Read';
 import ReadUser from './pages/users/Read';

diff --git a/src/pages/apps/app_detail/app_header.tsx b/src/pages/apps/app_detail/app_header.tsx
@@ -0,0 +1,76 @@
+import {Grid, Paper, Typography, Box, Chip, Stack, Tooltip} from '@mui/material';
+import {grey} from '@mui/material/colors';
+import CreateUpdateApp from '../CreateUpdate';
+import DeleteApp from '../Delete';
+import {App} from '../../../api/apiSchemas';
+import {useNavigate} from 'react-router-dom';
+
+import TagIcon from '@mui/icons-material/LocalOffer';
+import {useCurrentUser} from '../../../authentication';
+import {MoveTooltip} from '.';
+
+interface AppHeaderProps {
+  app: App;
+  moveTooltip: MoveTooltip;
+}
+
+const AppHeader: React.FC<AppHeaderProps> = ({app, moveTooltip}) => {
+  const currentUser = useCurrentUser();
+  const navigate = useNavigate();
+
+  const classNames = `app-detail-header app-detail-header ${app.name}`;
+
+  return (
+    <Grid item xs={12} className={classNames}>
+      <Paper
+        sx={{
+          p: 2,
+          height: 240,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          textAlign: 'center',
+          position: 'relative',
+        }}>
+        <Typography variant="h3" sx={{margin: '5px 40px 0px 10px'}}>
+          {app.name}
+        </Typography>
+        <Typography variant="h5" sx={{margin: '5px 40px 0px 10px'}}>
+          {app.description}
+        </Typography>
+        {app.active_app_tags ? (
+          <Box>
+            {app.active_app_tags.map((tagMap) => (
+              <Chip
+                key={'tag' + tagMap.active_tag!.id}
+                label={tagMap.active_tag!.name}
+                color="primary"
+                onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
+                icon={<TagIcon />}
+                sx={{
+                  margin: '2px',
+                  marginTop: '5px',
+                  bgcolor: tagMap.active_tag!.enabled ? 'primary' : grey[500],
+                }}
+              />
+            ))}
+          </Box>
+        ) : null}
+        <Stack style={{position: 'absolute', right: '10px'}}>
+          <Tooltip title="Edit" placement="right" PopperProps={moveTooltip}>
+            <div>
+              <CreateUpdateApp currentUser={currentUser} app={app} />
+            </div>
+          </Tooltip>
+          <Tooltip title="Delete" placement="right" PopperProps={moveTooltip}>
+            <div>
+              <DeleteApp currentUser={currentUser} app={app} />
+            </div>
+          </Tooltip>
+        </Stack>
+      </Paper>
+    </Grid>
+  );
+};
+
+export default AppHeader;
diff --git a/src/pages/apps/Read.tsx → src/pages/apps/app_detail/index.tsx b/src/pages/apps/Read.tsx → src/pages/apps/app_detail/index.tsx
@@ -19,22 +19,19 @@ import TableRow from '@mui/material/TableRow';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 
-import TagIcon from '@mui/icons-material/LocalOffer';
+import Ending from '../../../components/Ending';
+import {groupBy, displayUserName} from '../../../helpers';
+import {isAccessAdmin, isAppOwnerGroupOwner} from '../../../authorization';
+import {useGetAppById} from '../../../api/apiComponents';
+import {App, OktaUserGroupMember} from '../../../api/apiSchemas';
 
-import {grey} from '@mui/material/colors';
-
-import Ending from '../../components/Ending';
-import {groupBy, displayUserName} from '../../helpers';
-import {isAccessAdmin, isAppOwnerGroupOwner} from '../../authorization';
-import {useGetAppById} from '../../api/apiComponents';
-import {App, OktaUserGroupMember} from '../../api/apiSchemas';
-
-import {useCurrentUser} from '../../authentication';
-import CreateUpdateGroup from '../groups/CreateUpdate';
-import CreateUpdateApp from './CreateUpdate';
-import DeleteApp from './Delete';
-import NotFound from '../NotFound';
-import Loading from '../../components/Loading';
+import {useCurrentUser} from '../../../authentication';
+import CreateUpdateGroup from '../../groups/CreateUpdate';
+import CreateUpdateApp from '../CreateUpdate';
+import DeleteApp from '../Delete';
+import NotFound from '../../NotFound';
+import Loading from '../../../components/Loading';
+import AppHeader from './app_header';
 
 function sortGroupMembers(
   [aUserId, aUsers]: [string, Array<OktaUserGroupMember>],
@@ -51,7 +48,16 @@ function groupMemberships(
   return groupBy(memberships ?? [], 'active_user.id');
 }
 
-export default function ReadApp() {
+export type Modifier = {
+  name: string;
+  options: {};
+};
+
+export type MoveTooltip = {
+  modifiers: Modifier[];
+};
+
+export const ReadApp = () => {
   const currentUser = useCurrentUser();
 
   const {id} = useParams();
@@ -71,61 +77,13 @@ export default function ReadApp() {
 
   const app = data ?? ({} as App);
 
-  const moveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};
+  const moveTooltip: MoveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};
 
   return (
     <React.Fragment>
       <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
         <Grid container spacing={3}>
-          <Grid item xs={12}>
-            <Paper
-              sx={{
-                p: 2,
-                height: 240,
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                textAlign: 'center',
-                position: 'relative',
-              }}>
-              <Typography variant="h3" sx={{margin: '5px 40px 0px 10px'}}>
-                {app.name}
-              </Typography>
-              <Typography variant="h5" sx={{margin: '5px 40px 0px 10px'}}>
-                {app.description}
-              </Typography>
-              {app.active_app_tags ? (
-                <Box>
-                  {app.active_app_tags.map((tagMap) => (
-                    <Chip
-                      key={'tag' + tagMap.active_tag!.id}
-                      label={tagMap.active_tag!.name}
-                      color="primary"
-                      onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
-                      icon={<TagIcon />}
-                      sx={{
-                        margin: '2px',
-                        marginTop: '5px',
-                        bgcolor: tagMap.active_tag!.enabled ? 'primary' : grey[500],
-                      }}
-                    />
-                  ))}
-                </Box>
-              ) : null}
-              <Stack style={{position: 'absolute', right: '10px'}}>
-                <Tooltip title="Edit" placement="right" PopperProps={moveTooltip}>
-                  <div>
-                    <CreateUpdateApp currentUser={currentUser} app={app} />
-                  </div>
-                </Tooltip>
-                <Tooltip title="Delete" placement="right" PopperProps={moveTooltip}>
-                  <div>
-                    <DeleteApp currentUser={currentUser} app={app} />
-                  </div>
-                </Tooltip>
-              </Stack>
-            </Paper>
-          </Grid>
+          <AppHeader app={app} moveTooltip={moveTooltip} />
           {isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app.id ?? '') ? (
             <Grid item xs={12}>
               <Paper
@@ -513,4 +471,4 @@ export default function ReadApp() {
       </Container>
     </React.Fragment>
   );
-}
+};