Add about dialog

.gitignore

@@ -5,4 +5,5 @@
 /node_modules
 /umd
 npm-debug.log*
-/.idea
+/.idea
+*.tgz

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, useRef, useState } 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,19 +23,50 @@ 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,
+    Grid,
+    InputLabel,
+    MenuItem,
+    Select,
+    Tab,
+    Tabs,
+    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 {
+    card_error_boundary_en,
+    card_error_boundary_fr,
     element_search_en,
     element_search_fr,
     equipment_search_en,
     equipment_search_fr,
+    flat_parameters_en,
+    flat_parameters_fr,
     login_en,
     login_fr,
+    multiple_selection_dialog_en,
+    multiple_selection_dialog_fr,
     report_viewer_en,
     report_viewer_fr,
     table_en,
@@ -53,27 +75,10 @@ import {
     top_bar_fr,
     treeview_finder_en,
     treeview_finder_fr,
-    card_error_boundary_en,
-    card_error_boundary_fr,
-    flat_parameters_en,
-    flat_parameters_fr,
-    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, {
@@ -91,7 +96,6 @@ import {
 import { LOGS_JSON } from '../data/ReportViewer';
 
 import { searchEquipments } from '../data/EquipmentSearchBar';
-import { Grid, Tab, Tabs } from '@mui/material';
 import { EquipmentItem } from '../../src/components/ElementSearchDialog/equipment-item';
 import OverflowableText from '../../src/components/OverflowableText';
 
@@ -430,6 +434,57 @@ 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(
+                    [
+                        { type: 'server', name: 'Server 1', version: '1.0.0' },
+                        { type: 'server', name: 'Server 2', version: '1.0.0' },
+                        {
+                            type: 'server',
+                            name: 'Server 3',
+                            version: '1.0.0',
+                            gitTag: 'v1.0.0',
+                            license: 'MPL',
+                        },
+                        { type: 'server', name: 'Server 4', version: '1.0.0' },
+                        { type: 'server', name: 'Server 5', version: '1.0.0' },
+                        { type: 'server', name: 'Server 6', version: '1.0.0' },
+                        { type: 'server', name: 'Server 7', version: '1.0.0' },
+                        { type: 'server', name: 'Server 8', version: '1.0.0' },
+                        { type: 'server', name: 'Server 9', version: '1.0.0' },
+                        { type: 'app', name: 'My App 1', version: 'demo' },
+                        {
+                            type: 'app',
+                            name: 'My application with a long name',
+                            version: 'v0.0.1',
+                        },
+                        { type: 'other', name: 'Something', version: 'none' },
+                        {
+                            name: 'Component with a very long name without version',
+                        },
+                    ].concat(
+                        [...new Array(30)].map(() => ({
+                            name: 'Filling for demo',
+                            version: '???',
+                        }))
+                    )
+                ),
+            3000
+        );
+    }
+
     const CustomTreeViewFinder =
         stylesProvider === 'emotion'
             ? CustomTreeViewFinderEmotion
@@ -657,7 +712,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}
+                            getAdditionalModules={
+                                simulateGetAdditionalComponents
+                            }
                             onEquipmentLabellingClick={
                                 handleEquipmentLabellingClick
                             }