Break out admin action button group into sub component on apps page, …

…part 0 of breaking down the group tables into accordions

src/pages/apps/detail/AppsAdminActionGroup.tsx

@@ -0,0 +1,23 @@
+import {Grid, Paper} from '@mui/material';
+import CreateUpdateGroup from '../../groups/CreateUpdate';
+import {OktaUser, App} from '../../../api/apiSchemas';
+
+interface AppsAdminActionGroupProps {
+  currentUser: OktaUser;
+  app: App;
+}
+
+export const AppsAdminActionGroup: React.FC<AppsAdminActionGroupProps> = ({currentUser, app}) => {
+  return (
+    <Grid item xs={12} className={'app-detail app-detail-admin-action-group'}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        <CreateUpdateGroup defaultGroupType={'app_group'} currentUser={currentUser} app={app}></CreateUpdateGroup>
+      </Paper>
+    </Grid>
+  );
+};

src/pages/apps/detail/header.tsx → src/pages/apps/detail/AppsHeader.tsx

@@ -2,20 +2,19 @@ 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 {App, OktaUser} from '../../../api/apiSchemas';
 import {useNavigate} from 'react-router-dom';
 
 import TagIcon from '@mui/icons-material/LocalOffer';
-import {useCurrentUser} from '../../../authentication';
 import {MoveTooltip} from '.';
 
 interface AppsHeaderProps {
   app: App;
   moveTooltip: MoveTooltip;
+  currentUser: OktaUser;
 }
 
-const AppsHeader: React.FC<AppsHeaderProps> = ({app, moveTooltip}) => {
-  const currentUser = useCurrentUser();
+const AppsHeader: React.FC<AppsHeaderProps> = ({app, moveTooltip, currentUser}) => {
   const navigate = useNavigate();
 
   const classNames = `app-detail-header app-detail-header ${app.name}`;

src/pages/apps/detail/index.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {Link as RouterLink, useNavigate, useParams} from 'react-router-dom';
+import {Link as RouterLink, useParams} from 'react-router-dom';
 
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
@@ -26,12 +26,10 @@ 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 AppsHeader from './header';
+import AppsHeader from './AppsHeader';
+import {AppsAdminActionGroup} from './AppsAdminActionGroup';
 
 function sortGroupMembers(
   [aUserId, aUsers]: [string, Array<OktaUserGroupMember>],
@@ -61,7 +59,6 @@ export const ReadApp = () => {
   const currentUser = useCurrentUser();
 
   const {id} = useParams();
-  const navigate = useNavigate();
 
   const {data, isError, isLoading} = useGetAppById({
     pathParams: {appId: id ?? ''},
@@ -83,22 +80,11 @@ export const ReadApp = () => {
     <React.Fragment>
       <Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
         <Grid container spacing={3}>
-          <AppsHeader app={app} moveTooltip={moveTooltip} />
-          {isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app.id ?? '') ? (
-            <Grid item xs={12}>
-              <Paper
-                sx={{
-                  p: 2,
-                  display: 'flex',
-                  alignItems: 'center',
-                }}>
-                <CreateUpdateGroup
-                  defaultGroupType={'app_group'}
-                  currentUser={currentUser}
-                  app={app}></CreateUpdateGroup>
-              </Paper>
-            </Grid>
-          ) : null}
+          <AppsHeader app={app} moveTooltip={moveTooltip} currentUser={currentUser} />
+          {isAccessAdmin(currentUser) ||
+            (isAppOwnerGroupOwner(currentUser, app.id ?? '') && (
+              <AppsAdminActionGroup app={app} currentUser={currentUser} />
+            ))}
           {app.active_owner_app_groups?.map((appGroup) => (
             <React.Fragment key={appGroup.id}>
               <Grid item xs={6} key={appGroup.id + 'owners'}>