Skip to content

Commit

Permalink
[feat] Update Headers (#180)
Browse files Browse the repository at this point in the history 
Co-authored-by: Peter Collins <somethingnew2-0@users.noreply.github.com>
  • Loading branch information
@amyjchen @somethingnew2-0
amyjchen and somethingnew2-0 authored Nov 1, 2024
1 parent 9015a9c commit be55f39
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 300 deletions.
25 changes: 25 additions & 0 deletions src/components/AvatarButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {Avatar, ButtonBase, Typography} from '@mui/material';
import {ReactNode} from 'react';

interface AvatarButtonProps {
icon: ReactNode;
text?: string;
strikethrough?: boolean;
onClick?: () => void;
}

export default function AvatarButton({icon, text, strikethrough, onClick}: AvatarButtonProps) {
return (
<ButtonBase
disabled={onClick == null}
sx={{display: 'flex', flexDirection: 'column', gap: 0.5, p: 0.5, borderRadius: 2, width: 100}}
onClick={onClick}>
<Avatar sx={{bgcolor: 'primary.main'}}>{icon}</Avatar>
{text && (
<Typography variant="body2" sx={{...(strikethrough && {textDecoration: 'line-through'})}}>
{text}
</Typography>
)}
</ButtonBase>
);
}
94 changes: 48 additions & 46 deletions src/pages/apps/Read.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,56 +71,58 @@ export default function ReadApp() {

const moveTooltip = {modifiers: [{name: 'offset', options: {offset: [0, -10]}}]};

const hasActions = isAccessAdmin(currentUser) || isAppOwnerGroupOwner(currentUser, app?.id ?? '');
return (
<React.Fragment>
<Container maxWidth="lg" sx={{mt: 4, mb: 4}}>
<Container maxWidth="lg" sx={{my: 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: (theme) => (tagMap.active_tag!.enabled ? 'primary' : theme.palette.action.disabled),
}}
/>
))}
</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>
<Paper sx={{p: 2}}>
<Stack direction="column" gap={2}>
<Stack alignItems="center" direction="column" gap={1}>
<Typography variant="h3" textAlign="center">
{app.name}
</Typography>
<Typography variant="h5" textAlign="center">
{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: (theme) =>
tagMap.active_tag!.enabled ? 'primary' : theme.palette.action.disabled,
}}
/>
))}
</Box>
) : null}
</Stack>
{hasActions && (
<>
<Divider />
<Stack direction="row" justifyContent="center">
<Tooltip title="Edit" placement="top" PopperProps={moveTooltip}>
<div>
<CreateUpdateApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
<Tooltip title="Delete" placement="top" PopperProps={moveTooltip}>
<div>
<DeleteApp currentUser={currentUser} app={app} />
</div>
</Tooltip>
</Stack>
</>
)}
</Stack>
</Paper>
</Grid>
Expand Down
12 changes: 12 additions & 0 deletions src/pages/groups/AppLinkButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {useNavigate} from 'react-router-dom';

import {AppGroup} from '../../api/apiSchemas';
import AppIcon from '@mui/icons-material/AppShortcut';
import AvatarButton from '../../components/AvatarButton';

export default function AppLink({group}: {group: AppGroup}) {
const navigate = useNavigate();
const deleted = group.app?.deleted_at != null;
const handleClick = deleted ? undefined : () => navigate(`/apps/${group.app?.name}`);
return <AvatarButton icon={<AppIcon />} text={group.app?.name} strikethrough={deleted} onClick={handleClick} />;
}
15 changes: 2 additions & 13 deletions src/pages/groups/ExternallyManaged.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,19 @@ import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Link from '@mui/material/Avatar';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';

import ExternalIcon from '@mui/icons-material/Outbound';

import {useGetGroupById} from '../../api/apiComponents';
import {PolymorphicGroup} from '../../api/apiSchemas';
import AvatarButton from '../../components/AvatarButton';

interface ExternallyManagedButtonProps {
setOpen(open: boolean): any;
}

function ExternallyManagedButton(props: ExternallyManagedButtonProps) {
return (
<ListItemButton key="managedexternally" onClick={() => props.setOpen(true)}>
<ListItemAvatar>
<Avatar sx={{bgcolor: 'primary.main'}}>
<ExternalIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="Managed Externally" />
</ListItemButton>
);
return <AvatarButton icon={<ExternalIcon />} onClick={() => props.setOpen(true)} text="Managed Externally" />;
}

interface RuleLinksProps {
Expand Down
Loading

0 comments on commit be55f39

Please sign in to comment.