Skip to content

Commit

Permalink
Review PO : move app infos in components section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tristan-WorkGH
Tristan-WorkGH committed Nov 30, 2023
1 parent 615f7ec commit fcf13b5
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 171 deletions.
1 change: 1 addition & 0 deletions src/components/TopBar/AboutDialog.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type AboutAdditionalComponent = {
export const AboutDialog: FunctionComponent<{
open: boolean;
onClose?: () => void;
appName: string;
appVersion?: string;
appLicense?: string;
getGlobalVersion?: (setVersion: React.SetStateAction<string>) => void;
Expand Down
316 changes: 145 additions & 171 deletions src/components/TopBar/AboutDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Divider,
Fade,
Grid,
Skeleton,
Expand Down Expand Up @@ -51,6 +52,7 @@ const AboutDialog = ({
onClose,
getGlobalVersion,
getLogoThemed,
appName,
appVersion,
appLicense,
getAdditionalComponents,
Expand Down Expand Up @@ -100,12 +102,27 @@ const AboutDialog = ({
useState(false);
const [additionalComponents, setAdditionalComponents] = useState(null);
useEffect(() => {
if (open && getAdditionalComponents) {
setLoadingAdditionalComponents(true);
getAdditionalComponents((values) => {
setLoadingAdditionalComponents(false);
setAdditionalComponents(values);
});
if (open) {
//
const currentApp = {
name: `Grid${appName}`,
type: 'app',
version: appVersion,
license: appLicense,
};
if (getAdditionalComponents) {
setLoadingAdditionalComponents(true);
getAdditionalComponents((values) => {
setLoadingAdditionalComponents(false);
if (Array.isArray(values)) {
setAdditionalComponents([currentApp, ...values]);
} else {
setAdditionalComponents([currentApp]);
}
});
} else {
setAdditionalComponents([currentApp]);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, getAdditionalComponents]);
Expand Down Expand Up @@ -146,49 +163,15 @@ const AboutDialog = ({
>
{logo}
</Box>
<Box
component="dl"
sx={{
textAlign: 'center',
marginTop: 0,
'dt, dd': {
display: 'inline',
margin: 0,
},
dt: {
marginRight: '0.5em',
'&:after': {
content: '":"',
},
'&:before': {
content: "'\\A'",
whiteSpace: 'pre',
},
'&:first-child': {
'&:before': {
content: "''",
},
},
},
dd: {
fontStyle: 'italic',
},
}}
>
{appLicense && (
<>
<dt>
<FormattedMessage id="about-dialog/license" />
</dt>
<dd>{appLicense}</dd>
</>
)}
<dt>Version</dt>
<dd>{appVersion || '?unknown?'}</dd>
</Box>
<Box component="p">
GridSuite version{' '}
{!loadingGlobalVersion && <b>{actualGlobalVersion || '?unknown?'}</b>}
<FormattedMessage
id="about-dialog/deploy"
values={{
version: loadingGlobalVersion
? '…'
: actualGlobalVersion || '?unknown?',
}}
/>
<Fade
in={loadingGlobalVersion}
style={{ transitionDelay: '500ms' }}
Expand All @@ -208,139 +191,129 @@ const AboutDialog = ({
</Alert>
</Collapse>
)}
{getAdditionalComponents && (
<Box
sx={{
'.MuiPaper-root': {
width: '100%',
},
'.MuiCard-root': {
height: '100%',
width: '100%',
},
'.MuiCardHeader-root': {
padding: 1,
},
'.MuiCardContent-root': {
padding: 1,
paddingTop: 0,
},
}}
>
<Box component="p">
<FormattedMessage id="about-dialog/components-version" />
</Box>
<Grid container spacing={{ xs: 1, sm: 2 }}>
{loadingAdditionalComponents ? (
<Divider />
<Box
sx={{
'.MuiPaper-root': {
width: '100%',
},
'.MuiCard-root': {
height: '100%',
width: '100%',
},
'.MuiCardHeader-root': {
padding: 1,
},
'.MuiCardContent-root': {
padding: 1,
paddingTop: 0,
},
}}
>
<Box component="p">
<FormattedMessage id="about-dialog/components-version" />
</Box>
<Grid container spacing={{ xs: 1, sm: 2 }}>
{loadingAdditionalComponents ? (
<>
{[...Array(3)].map((e, i) => (
<Grid
item
xs={12}
sm={6}
md={4}
key={`loader-${i}`}
>
<Skeleton
variant="rectangular"
height={80}
/>
</Grid>
))}
</>
) : (
Array.isArray(additionalComponents) && (
<>
{[...Array(3)].map((e, i) => (
{additionalComponents.map((cmpnt, idx) => (
<Grid
item
xs={12}
sm={6}
md={4}
key={`loader-${i}`}
key={`cmpnt-${idx}`}
>
<Skeleton
variant="rectangular"
height={80}
/>
</Grid>
))}
</>
) : (
Array.isArray(additionalComponents) && (
<>
{additionalComponents.map(
(cmpnt, idx) => (
<Grid
item
xs={12}
sm={6}
md={4}
key={`cmpnt-${idx}`}
>
<Card>
<CardHeader
avatar={
<Avatar aria-label="component">
{ComponentsTypeIcons[
cmpnt
.type
] ||
ComponentsTypeIcons[
'other'
]}
</Avatar>
}
<Card>
<CardHeader
avatar={
<Avatar aria-label="component">
{ComponentsTypeIcons[
cmpnt.type
] ||
ComponentsTypeIcons[
'other'
]}
</Avatar>
}
title={cmpnt.name || '<?>'}
subheader={
cmpnt.version || ''
}
/>
<CardContent>
{cmpnt.gitTag && (
<Tooltip
title={
cmpnt.name ||
'<?>'
}
subheader={
cmpnt.version ||
''
}
/>
<CardContent>
{cmpnt.gitTag && (
<Tooltip
title={
<FormattedMessage
id={
'about-dialog/git-version'
}
/>
<FormattedMessage
id={
'about-dialog/git-version'
}
arrow
>
<Chip
icon={
<Bookmark />
}
variant="filled"
size="small"
label={
cmpnt.gitTag
}
/>
</Tooltip>
)}
{cmpnt.license && (
<Tooltip
title={
<FormattedMessage
id={
'about-dialog/license'
}
/>
/>
}
arrow
>
<Chip
icon={
<Bookmark />
}
variant="filled"
size="small"
label={
cmpnt.gitTag
}
/>
</Tooltip>
)}
{cmpnt.license && (
<Tooltip
title={
<FormattedMessage
id={
'about-dialog/license'
}
arrow
>
<Chip
icon={
<Gavel />
}
variant="outlined"
size="small"
label={
'License: ' +
cmpnt.license
}
/>
</Tooltip>
)}
</CardContent>
</Card>
</Grid>
)
)}
</>
)
)}
</Grid>
</Box>
)}
/>
}
arrow
>
<Chip
icon={<Gavel />}
variant="outlined"
size="small"
label={
'License: ' +
cmpnt.license
}
/>
</Tooltip>
)}
</CardContent>
</Card>
</Grid>
))}
</>
)
)}
</Grid>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} autoFocus>
Expand All @@ -356,6 +329,7 @@ export default AboutDialog;
AboutDialog.propTypes = {
open: PropTypes.bool.isRequired,
onClose: PropTypes.func,
appName: PropTypes.string.isRequired,
appVersion: PropTypes.string,
appLicense: PropTypes.string,
getGlobalVersion: PropTypes.func,
Expand Down
1 change: 1 addition & 0 deletions src/components/TopBar/TopBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -747,6 +747,7 @@ const TopBar = ({
<AboutDialog
open={isAboutDialogOpen}
onClose={() => setAboutDialogOpen(false)}
appName={appName}
appVersion={appVersion}
appLicense={appLicense}
getGlobalVersion={getGlobalVersion}
Expand Down
Loading

0 comments on commit fcf13b5

Please sign in to comment.