Skip to content

Commit a9e3b16

Browse files
savathoonsavathoon
committed
break out app group header component for readability
1 parent 1c1ff99 commit a9e3b16

File tree

3 files changed

+102
-68
lines changed

3 files changed

+102
-68
lines changed

‎src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import ListTags from './pages/tags/List';
3131
import ListUsers from './pages/users/List';
3232
import NavItems from './components/NavItems';
3333
import NotFound from './pages/NotFound';
34-
import ReadApp from './pages/apps/Read';
34+
import {ReadApp} from './pages/apps/app_detail';
3535
import ReadGroup from './pages/groups/Read';
3636
import ReadTag from './pages/tags/Read';
3737
import ReadUser from './pages/users/Read';

‎src/pages/apps/app_detail/app_header.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {Grid, Paper, Typography, Box, Chip, Stack, Tooltip} from '@mui/material';
2+
import {grey} from '@mui/material/colors';
3+
import CreateUpdateApp from '../CreateUpdate';
4+
import DeleteApp from '../Delete';
5+
import {App} from '../../../api/apiSchemas';
6+
import {useNavigate} from 'react-router-dom';
7+
8+
import TagIcon from '@mui/icons-material/LocalOffer';
9+
import {useCurrentUser} from '../../../authentication';
10+
import {MoveTooltip} from '.';
11+
12+
interface AppHeaderProps {
13+
app: App;
14+
moveTooltip: MoveTooltip;
15+
}
16+
17+
const AppHeader: React.FC<AppHeaderProps> = ({app, moveTooltip}) => {
18+
const currentUser = useCurrentUser();
19+
const navigate = useNavigate();
20+
21+
const classNames = `app-detail-header app-detail-header ${app.name}`;
22+
23+
return (
24+
<Grid item xs={12} className={classNames}>
25+
<Paper
26+
sx={{
27+
p: 2,
28+
height: 240,
29+
display: 'flex',
30+
flexDirection: 'column',
31+
justifyContent: 'center',
32+
textAlign: 'center',
33+
position: 'relative',
34+
}}>
35+
<Typography variant="h3" sx={{margin: '5px 40px 0px 10px'}}>
36+
{app.name}
37+
</Typography>
38+
<Typography variant="h5" sx={{margin: '5px 40px 0px 10px'}}>
39+
{app.description}
40+
</Typography>
41+
{app.active_app_tags ? (
42+
<Box>
43+
{app.active_app_tags.map((tagMap) => (
44+
<Chip
45+
key={'tag' + tagMap.active_tag!.id}
46+
label={tagMap.active_tag!.name}
47+
color="primary"
48+
onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
49+
icon={<TagIcon />}
50+
sx={{
51+
margin: '2px',
52+
marginTop: '5px',
53+
bgcolor: tagMap.active_tag!.enabled ? 'primary' : grey[500],
54+
}}
55+
/>
56+
))}
57+
</Box>
58+
) : null}
59+
<Stack style={{position: 'absolute', right: '10px'}}>
60+
<Tooltip title="Edit" placement="right" PopperProps={moveTooltip}>
61+
<div>
62+
<CreateUpdateApp currentUser={currentUser} app={app} />
63+
</div>
64+
</Tooltip>
65+
<Tooltip title="Delete" placement="right" PopperProps={moveTooltip}>
66+
<div>
67+
<DeleteApp currentUser={currentUser} app={app} />
68+
</div>
69+
</Tooltip>
70+
</Stack>
71+
</Paper>
72+
</Grid>
73+
);
74+
};
75+
76+
export default AppHeader;

‎src/pages/apps/Read.tsx renamed to ‎src/pages/apps/app_detail/index.tsx

Lines changed: 25 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,19 @@ import TableRow from '@mui/material/TableRow';
1919
import Tooltip from '@mui/material/Tooltip';
2020
import Typography from '@mui/material/Typography';
2121

22-
import TagIcon from '@mui/icons-material/LocalOffer';
22+
import Ending from '../../../components/Ending';
23+
import {groupBy, displayUserName} from '../../../helpers';
24+
import {isAccessAdmin, isAppOwnerGroupOwner} from '../../../authorization';
25+
import {useGetAppById} from '../../../api/apiComponents';
26+
import {App, OktaUserGroupMember} from '../../../api/apiSchemas';
2327

24-
import {grey} from '@mui/material/colors';
25-
26-
import Ending from '../../components/Ending';
27-
import {groupBy, displayUserName} from '../../helpers';
28-
import {isAccessAdmin, isAppOwnerGroupOwner} from '../../authorization';
29-
import {useGetAppById} from '../../api/apiComponents';
30-
import {App, OktaUserGroupMember} from '../../api/apiSchemas';
31-
32-
import {useCurrentUser} from '../../authentication';
33-
import CreateUpdateGroup from '../groups/CreateUpdate';
34-
import CreateUpdateApp from './CreateUpdate';
35-
import DeleteApp from './Delete';
36-
import NotFound from '../NotFound';
37-
import Loading from '../../components/Loading';
28+
import {useCurrentUser} from '../../../authentication';
29+
import CreateUpdateGroup from '../../groups/CreateUpdate';
30+
import CreateUpdateApp from '../CreateUpdate';
31+
import DeleteApp from '../Delete';
32+
import NotFound from '../../NotFound';
33+
import Loading from '../../../components/Loading';
34+
import AppHeader from './app_header';
3835

3936
function sortGroupMembers(
4037
[aUserId, aUsers]: [string, Array<OktaUserGroupMember>],
@@ -51,7 +48,16 @@ function groupMemberships(
5148
return groupBy(memberships ?? [], 'active_user.id');
5249
}
5350

54-
export default function ReadApp() {
51+
export type Modifier = {
52+
name: string;
53+
options: {};
54+
};
55+
56+
export type MoveTooltip = {
57+
modifiers: Modifier[];
58+
};
59+
60+
export const ReadApp = () => {
5561
const currentUser = useCurrentUser();
5662

5763
const {id} = useParams();
@@ -71,61 +77,13 @@ export default function ReadApp() {
7177

7278
const app = data ?? ({} as App);
7379

74-
const moveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};
80+
const moveTooltip: MoveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};
7581

7682
return (
7783
<React.Fragment>
7884
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
7985
<Grid container spacing={3}>
80-
<Grid item xs={12}>
81-
<Paper
82-
sx={{
83-
p: 2,
84-
height: 240,
85-
display: 'flex',
86-
flexDirection: 'column',
87-
justifyContent: 'center',
88-
textAlign: 'center',
89-
position: 'relative',
90-
}}>
91-
<Typography variant="h3" sx={{margin: '5px 40px 0px 10px'}}>
92-
{app.name}
93-
</Typography>
94-
<Typography variant="h5" sx={{margin: '5px 40px 0px 10px'}}>
95-
{app.description}
96-
</Typography>
97-
{app.active_app_tags ? (
98-
<Box>
99-
{app.active_app_tags.map((tagMap) => (
100-
<Chip
101-
key={'tag' + tagMap.active_tag!.id}
102-
label={tagMap.active_tag!.name}
103-
color="primary"
104-
onClick={() => navigate(`/tags/${tagMap.active_tag!.name}`)}
105-
icon={<TagIcon />}
106-
sx={{
107-
margin: '2px',
108-
marginTop: '5px',
109-
bgcolor: tagMap.active_tag!.enabled ? 'primary' : grey[500],
110-
}}
111-
/>
112-
))}
113-
</Box>
114-
) : null}
115-
<Stack style={{position: 'absolute', right: '10px'}}>
116-
<Tooltip title="Edit" placement="right" PopperProps={moveTooltip}>
117-
<div>
118-
<CreateUpdateApp currentUser={currentUser} app={app} />
119-
</div>
120-
</Tooltip>
121-
<Tooltip title="Delete" placement="right" PopperProps={moveTooltip}>
122-
<div>
123-
<DeleteApp currentUser={currentUser} app={app} />
124-
</div>
125-
</Tooltip>
126-
</Stack>
127-
</Paper>
128-
</Grid>
86+
<AppHeader app={app} moveTooltip={moveTooltip} />
12987
{isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app.id ?? '') ? (
13088
<Grid item xs={12}>
13189
<Paper
@@ -513,4 +471,4 @@ export default function ReadApp() {
513471
</Container>
514472
</React.Fragment>
515473
);
516-
}
474+
};

0 commit comments

Comments
 (0)