Add about dialog

demo/src/app.js

@@ -5,19 +5,10 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 
 import TopBar from '../../src/components/TopBar';
 import SnackbarProvider from '../../src/components/SnackbarProvider';
-
-import {
-    createTheme,
-    StyledEngineProvider,
-    ThemeProvider,
-} from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
-import withStyles from '@mui/styles/withStyles';
-import { styled } from '@mui/system';
 import AuthenticationRouter from '../../src/components/AuthenticationRouter';
 import CardErrorBoundary from '../../src/components/CardErrorBoundary';
 import {
@@ -32,11 +23,33 @@ import {
     LIGHT_THEME,
     logout,
 } from '../../src';
+import { useSnackMessage } from '../../src/hooks/useSnackMessage';
+
+import {
+    createTheme,
+    StyledEngineProvider,
+    ThemeProvider,
+} from '@mui/material/styles';
+import { makeStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/system';
+import {
+    Box,
+    Button,
+    Checkbox,
+    CssBaseline,
+    FormControl,
+    FormControlLabel,
+    FormGroup,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+    Typography,
+} from '@mui/material';
+
 import { useMatch } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
-
 import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
-import { useSnackMessage } from '../../src/hooks/useSnackMessage';
 
 import {
     element_search_en,
@@ -60,20 +73,9 @@ import {
     multiple_selection_dialog_en,
     multiple_selection_dialog_fr,
 } from '../../src/index';
-import CssBaseline from '@mui/material/CssBaseline';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 
 import PowsyblLogo from '-!@svgr/webpack!../images/powsybl_logo.svg';
+import AppPackage from '../../package.json';
 
 import ReportViewerDialog from '../../src/components/ReportViewerDialog';
 import TreeViewFinder, {
@@ -430,6 +432,47 @@ const AppContent = ({ language, onLanguageClick }) => {
         []
     );
 
+    const aboutTimerVersion = useRef();
+    const aboutTimerCmpnt = useRef();
+    function simulateGetGlobalVersion(setter) {
+        console.log('getGlobalVersion() called');
+        aboutTimerVersion.current = window.setTimeout(
+            () => setter('1.0.0-demo'),
+            1250
+        );
+    }
+    function simulateGetAdditionalComponents(setComponents) {
+        console.log('getAdditionalComponents() called');
+        aboutTimerCmpnt.current = window.setTimeout(
+            () =>
+                setComponents([
+                    { name: 'Server1' },
+                    {
+                        name: 'Server2',
+                        version: '1.0.0',
+                    },
+                    {
+                        name: 'Server3',
+                        version: '1.0.0',
+                        gitTag: 'v1.0.0',
+                        license: 'MPL',
+                        type: 'server',
+                    },
+                    { name: 'Server10' },
+                    { name: 'Server11' },
+                    { name: 'Server12' },
+                    { name: 'Server13' },
+                    { name: 'Server14' },
+                    { name: 'Server15' },
+                    { name: 'Server16' },
+                    { name: 'Server17' },
+                    { name: 'Server18' },
+                    { name: 'Server19' },
+                ]),
+            3000
+        );
+    }
+
     const CustomTreeViewFinder =
         stylesProvider === 'emotion'
             ? CustomTreeViewFinderEmotion
@@ -657,7 +700,12 @@ const AppContent = ({ language, onLanguageClick }) => {
                             onLogoClick={() => console.log('logo')}
                             onThemeClick={handleThemeClick}
                             theme={theme}
-                            onAboutClick={() => console.log('about')}
+                            appVersion={AppPackage.version}
+                            appLicense={AppPackage.license}
+                            getGlobalVersion={simulateGetGlobalVersion}
+                            getAdditionalComponents={
+                                simulateGetAdditionalComponents
+                            }
                             onEquipmentLabellingClick={
                                 handleEquipmentLabellingClick
                             }

src/components/TopBar/AboutDialog.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v.2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { FunctionComponent } from 'react';
+import { PaletteMode } from '@mui/material';
+
+export type AboutAdditionalComponent = {
+    readonly name: string;
+    readonly type?: "app" | "server" | "other";
+    readonly version?: string;
+    readonly gitTag?: string;
+    readonly license?: string;
+};
+
+export const AboutDialog: FunctionComponent<{
+    open: boolean;
+    onClose?: () => void;
+    appVersion?: string;
+    appLicense?: string;
+    getGlobalVersion?: (setVersion: React.SetStateAction<string>) => void;
+    getLogoThemed?: (themeMode: PaletteMode) => React.ReactElement;
+    getAdditionalComponents?: (setComponents: React.SetStateAction<AboutAdditionalComponent[]>) => void;
+}>;
+
+export default AboutDialog;