Skip to content

Commit

Permalink
Merge pull request #1050 from amvanbaren/redundant-fragments
Browse files Browse the repository at this point in the history 
Remove redundant fragments
  • Loading branch information
@amvanbaren
amvanbaren authored Nov 19, 2024
2 parents 593029d + b27aad1 commit 2c82308
Show file tree
Hide file tree
Showing 10 changed files with 454 additions and 478 deletions.
72 changes: 35 additions & 37 deletions webui/src/components/banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,46 +14,44 @@ import { Paper, Grid, Button, Collapse } from '@mui/material';
export const Banner: FunctionComponent<PropsWithChildren<BannerProps>> = props => {
const cardColor = props.theme === 'dark' ? '#fff' : '#000';
const cardBackground = `${props.color}.${props.theme}`;
return <>
<Collapse in={props.open}>
<Paper
elevation={0}
sx={{
display: 'block',
width: '100%',
mx: 'auto',
pb: 1, pr: 1, pl: 2, pt: 1.25,
return <Collapse in={props.open}>
<Paper
elevation={0}
sx={{
display: 'block',
width: '100%',
mx: 'auto',
pb: 1, pr: 1, pl: 2, pt: 1.25,
color: cardColor,
bgcolor: cardBackground,
'& a': {
color: cardColor,
bgcolor: cardBackground,
'& a': {
color: cardColor,
fontWeight: 'bold'
}
}}
fontWeight: 'bold'
}
}}
>
<Grid
container
spacing={2}
>
<Grid
container
spacing={2}
>
<Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
{props.children}
</Grid>
{
props.showDismissButton &&
<Grid item xs={12} sm='auto' sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
<Button
sx={{ float: 'right' }}
variant='outlined'
onClick={props.dismissButtonOnClick}
>
{props.dismissButtonLabel ?? 'Close'}
</Button>
</Grid>
}
<Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
{props.children}
</Grid>
</Paper>
</Collapse>
</>;
{
props.showDismissButton &&
<Grid item xs={12} sm='auto' sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
<Button
sx={{ float: 'right' }}
variant='outlined'
onClick={props.dismissButtonOnClick}
>
{props.dismissButtonLabel ?? 'Close'}
</Button>
</Grid>
}
</Grid>
</Paper>
</Collapse>;
};

interface BannerProps {
Expand Down
158 changes: 78 additions & 80 deletions webui/src/pages/admin-dashboard/extension-version-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,94 +97,92 @@ export const ExtensionVersionContainer: FunctionComponent<ExtensionVersionContai
setTargetPlatformVersions(newTargetPlatformVersions);
};

return <>
<Grid container direction='column' sx={{ height: '100%' }}>
<Grid item container sx={{ filter: extension.deprecated ? 'grayscale(100%)' : null }}>
{
icon ?
<Grid item xs={12} md={4}>
<Box
component='img'
src={icon}
alt={extension.displayName || extension.name}
sx={{
height: '7.5rem',
maxWidth: '9rem'
}}
/>
</Grid>
: ''
}
<Grid item container xs={12} md={8}>
<Grid item container direction='column' justifyContent='center'>
<Grid item>
<Typography variant='h5' sx={{ fontWeight: 'bold' }}>
{extension.displayName || extension.name}
</Typography>
</Grid>
{ extension.deprecated &&
<Grid item container direction='row'>
<Grid item>
<WarningIcon fontSize='small' />
</Grid>
<Grid item>
<Typography>&nbsp;This extension has been deprecated.</Typography>
</Grid>
return <Grid container direction='column' sx={{ height: '100%' }}>
<Grid item container sx={{ filter: extension.deprecated ? 'grayscale(100%)' : null }}>
{
icon ?
<Grid item xs={12} md={4}>
<Box
component='img'
src={icon}
alt={extension.displayName || extension.name}
sx={{
height: '7.5rem',
maxWidth: '9rem'
}}
/>
</Grid>
: ''
}
<Grid item container xs={12} md={8}>
<Grid item container direction='column' justifyContent='center'>
<Grid item>
<Typography variant='h5' sx={{ fontWeight: 'bold' }}>
{extension.displayName || extension.name}
</Typography>
</Grid>
{extension.deprecated &&
<Grid item container direction='row'>
<Grid item>
<WarningIcon fontSize='small' />
</Grid>
<Grid item>
<Typography>&nbsp;This extension has been deprecated.</Typography>
</Grid>
}
<Grid item>
<Typography sx={{ fontFamily: 'Monaco, monospace' }}>{extension.namespace}.{extension.name}</Typography>
</Grid>
<Grid item>
<Typography sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{extension.description}</Typography>
</Grid>
}
<Grid item>
<Typography sx={{ fontFamily: 'Monaco, monospace' }}>{extension.namespace}.{extension.name}</Typography>
</Grid>
<Grid item>
<Typography sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{extension.description}</Typography>
</Grid>
</Grid>
</Grid>
<Grid item container sx={{ flex: 1 }}>
<Grid item xs={12} md={4}></Grid>
<Grid item container xs={12} md={8} direction='column'>
<FormControl component='fieldset'>
<FormGroup>
{
targetPlatformVersions.map((targetPlatformVersion, index) => {
let label: string;
let indent: number;
if (targetPlatformVersion.version === WILDCARD && targetPlatformVersion.targetPlatform === WILDCARD) {
label = 'All Versions';
indent = 0;
} else if (targetPlatformVersion.targetPlatform === WILDCARD) {
label = targetPlatformVersion.version;
indent = 4;
} else {
label = getTargetPlatformDisplayName(targetPlatformVersion.targetPlatform);
indent = 8;
}

const name = `${targetPlatformVersion.targetPlatform}/${targetPlatformVersion.version}`;
return <FormControlLabel
sx={{ pl: indent }}
key={`${name}_${index}`}
control={<Checkbox checked={targetPlatformVersion.checked} onChange={handleChange} name={name} />}
label={label} />;
})
}
</FormGroup>
</FormControl>
</Grid>
</Grid>
<Grid item container sx={{ flex: 1 }}>
<Grid item xs={12} md={4}></Grid>
<Grid item container xs={12} md={8} direction='column'>
<FormControl component='fieldset'>
<FormGroup>
{
targetPlatformVersions.map((targetPlatformVersion, index) => {
let label: string;
let indent: number;
if (targetPlatformVersion.version === WILDCARD && targetPlatformVersion.targetPlatform === WILDCARD) {
label = 'All Versions';
indent = 0;
} else if (targetPlatformVersion.targetPlatform === WILDCARD) {
label = targetPlatformVersion.version;
indent = 4;
} else {
label = getTargetPlatformDisplayName(targetPlatformVersion.targetPlatform);
indent = 8;
}

const name = `${targetPlatformVersion.targetPlatform}/${targetPlatformVersion.version}`;
return <FormControlLabel
sx={{ pl: indent }}
key={`${name}_${index}`}
control={<Checkbox checked={targetPlatformVersion.checked} onChange={handleChange} name={name} />}
label={label} />;
})
}
</FormGroup>
</FormControl>
</Grid>
<Grid item container>
<Grid item xs={12} md={4}>
</Grid>
<Grid item container xs={12} md={8}>
<ExtensionRemoveDialog
onUpdate={props.onUpdate}
extension={extension}
targetPlatformVersions={targetPlatformVersions.filter((targetPlatformVersion) => targetPlatformVersion.checked)} />
</Grid>
</Grid>
<Grid item container>
<Grid item xs={12} md={4}>
</Grid>
<Grid item container xs={12} md={8}>
<ExtensionRemoveDialog
onUpdate={props.onUpdate}
extension={extension}
targetPlatformVersions={targetPlatformVersions.filter((targetPlatformVersion) => targetPlatformVersion.checked)} />
</Grid>
</Grid>
</>;
</Grid>;
};

export interface ExtensionVersionContainerProps {
Expand Down
32 changes: 15 additions & 17 deletions webui/src/pages/admin-dashboard/search-list-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,23 @@ import { Grid } from '@mui/material';
import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';

export const SearchListContainer: FunctionComponent<SearchListContainerProps> = props => {
return (<>
<Grid container direction='column' spacing={2} sx={{ flexWrap: 'nowrap', mb: 4 }}>
<Grid style={{ flex: 1 }} item container direction='column' spacing={1} justifyContent='flex-end'>
{props.searchContainer.map((searchField, key) => {
return <Grid key={key} container item justifyContent='center'>
<Grid item xs={8}>
{searchField}
</Grid>
</Grid>;
})}
</Grid>
<Grid style={{ flex: 4, overflow: 'hidden' }} item container justifyContent='center'>
<Grid style={{ height: '100%' }} item xs={8}>
<DelayedLoadIndicator loading={props.loading} />
{props.listContainer}
</Grid>
return <Grid container direction='column' spacing={2} sx={{ flexWrap: 'nowrap', mb: 4 }}>
<Grid style={{ flex: 1 }} item container direction='column' spacing={1} justifyContent='flex-end'>
{props.searchContainer.map((searchField, key) => {
return <Grid key={key} container item justifyContent='center'>
<Grid item xs={8}>
{searchField}
</Grid>
</Grid>;
})}
</Grid>
<Grid style={{ flex: 4, overflow: 'hidden' }} item container justifyContent='center'>
<Grid style={{ height: '100%' }} item xs={8}>
<DelayedLoadIndicator loading={props.loading} />
{props.listContainer}
</Grid>
</Grid>
</>);
</Grid>;
};

export interface SearchListContainerProps {
Expand Down
56 changes: 26 additions & 30 deletions webui/src/pages/admin-dashboard/welcome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,22 @@ import { Link } from 'react-router-dom';
import { AdminDashboardRoutes } from './admin-dashboard';

export const Welcome: FunctionComponent = props => {
return <>
<Grid container direction='column' spacing={2} sx={{ height: '100%' }}>
<Grid item container direction='column' alignItems='center' justifyContent='flex-end'>
<Paper elevation={3} sx={{ p: 4 }}>
<Typography sx={{ mb: 2 }} align='center' variant='h5'>Welcome to the Admin Dashboard!</Typography>
<Typography align='center'>You can switch pages in the sidepanel menu on the left side.</Typography>
<Typography align='center'>
Choose between administration for
</Typography>
<Grid container justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
<WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
<WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
<WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
</Grid>
</Paper>
</Grid>
return <Grid container direction='column' spacing={2} sx={{ height: '100%' }}>
<Grid item container direction='column' alignItems='center' justifyContent='flex-end'>
<Paper elevation={3} sx={{ p: 4 }}>
<Typography sx={{ mb: 2 }} align='center' variant='h5'>Welcome to the Admin Dashboard!</Typography>
<Typography align='center'>You can switch pages in the sidepanel menu on the left side.</Typography>
<Typography align='center'>
Choose between administration for
</Typography>
<Grid container justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
<WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
<WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
<WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
</Grid>
</Paper>
</Grid>
</>;
</Grid>;
};

const StyledLink = styled(Link)(({ theme }: { theme: Theme }) => ({
Expand All @@ -44,18 +42,16 @@ const StyledLink = styled(Link)(({ theme }: { theme: Theme }) => ({
}));

const WelcomeLinkItem: FunctionComponent<{ route: string, label: string, description: string }> = props => {
return <>
<Grid container item xs={8} sx={{ mb: 2 }}>
<Grid container alignItems='center' item xs={12} md={4}>
<Typography>
<StyledLink to={props.route}>
{props.label}
</StyledLink>
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant='body1' style={{ lineHeight: 1.5 }}>{props.description}</Typography>
</Grid>
return <Grid container item xs={8} sx={{ mb: 2 }}>
<Grid container alignItems='center' item xs={12} md={4}>
<Typography>
<StyledLink to={props.route}>
{props.label}
</StyledLink>
</Typography>
</Grid>
<Grid item xs={12} md={8}>
<Typography variant='body1' style={{ lineHeight: 1.5 }}>{props.description}</Typography>
</Grid>
</>;
</Grid>;
};
Loading

0 comments on commit 2c82308

Please sign in to comment.