diff --git a/src/components/TopBar/AboutDialog.d.ts b/src/components/TopBar/AboutDialog.d.ts index 457c87ff..c414311c 100644 --- a/src/components/TopBar/AboutDialog.d.ts +++ b/src/components/TopBar/AboutDialog.d.ts @@ -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) => void; diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js index a4a9711b..8b717bd8 100644 --- a/src/components/TopBar/AboutDialog.js +++ b/src/components/TopBar/AboutDialog.js @@ -22,6 +22,7 @@ import { DialogActions, DialogContent, DialogTitle, + Divider, Fade, Grid, Skeleton, @@ -51,6 +52,7 @@ const AboutDialog = ({ onClose, getGlobalVersion, getLogoThemed, + appName, appVersion, appLicense, getAdditionalComponents, @@ -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]); @@ -146,49 +163,15 @@ const AboutDialog = ({ > {logo} - - {appLicense && ( - <> -
- -
-
{appLicense}
- - )} -
Version
-
{appVersion || '?unknown?'}
-
- GridSuite version{' '} - {!loadingGlobalVersion && {actualGlobalVersion || '?unknown?'}} + )} - {getAdditionalComponents && ( - - - - - - {loadingAdditionalComponents ? ( + + + + + + + {loadingAdditionalComponents ? ( + <> + {[...Array(3)].map((e, i) => ( + + + + ))} + + ) : ( + Array.isArray(additionalComponents) && ( <> - {[...Array(3)].map((e, i) => ( + {additionalComponents.map((cmpnt, idx) => ( - - - ))} - - ) : ( - Array.isArray(additionalComponents) && ( - <> - {additionalComponents.map( - (cmpnt, idx) => ( - - - - {ComponentsTypeIcons[ - cmpnt - .type - ] || - ComponentsTypeIcons[ - 'other' - ]} - - } + + + {ComponentsTypeIcons[ + cmpnt.type + ] || + ComponentsTypeIcons[ + 'other' + ]} + + } + title={cmpnt.name || ''} + subheader={ + cmpnt.version || '' + } + /> + + {cmpnt.gitTag && ( + ' - } - subheader={ - cmpnt.version || - '' - } - /> - - {cmpnt.gitTag && ( - + - - } - variant="filled" - size="small" - label={ - cmpnt.gitTag - } - /> - - )} - {cmpnt.license && ( - + /> + } + arrow + > + + } + variant="filled" + size="small" + label={ + cmpnt.gitTag + } + /> + + )} + {cmpnt.license && ( + - - } - variant="outlined" - size="small" - label={ - 'License: ' + - cmpnt.license - } - /> - - )} - - - - ) - )} - - ) - )} - - - )} + /> + } + arrow + > + } + variant="outlined" + size="small" + label={ + 'License: ' + + cmpnt.license + } + /> + + )} + + + + ))} + + ) + )} + +