Fix about window (#326)

* Modules not visible by default
* remove dialog borders
* Wait end animation before reset values
* more detailed tooltip
* tags already visible when long
* fix "moving" main version after loading finish
* use promises to have natural flow of data
* Add missing translations for demo
* use transition listeners to manage state

demo/src/app.js

@@ -76,6 +76,7 @@ import {
     treeview_finder_en,
     treeview_finder_fr,
 } from '../../src/index';
+import translations from './demo_intl';
 
 import PowsyblLogo from '-!@svgr/webpack!../images/powsybl_logo.svg';
 import AppPackage from '../../package.json';
@@ -121,6 +122,7 @@ const messages = {
         ...flat_parameters_en,
         ...multiple_selection_dialog_en,
         ...inputs_en,
+        ...translations.en,
     },
     fr: {
         ...report_viewer_fr,
@@ -134,6 +136,7 @@ const messages = {
         ...flat_parameters_fr,
         ...multiple_selection_dialog_fr,
         ...inputs_fr,
+        ...translations.fr,
     },
 };
 
@@ -436,52 +439,98 @@ const AppContent = ({ language, onLanguageClick }) => {
 
     const aboutTimerVersion = useRef();
     const aboutTimerCmpnt = useRef();
-    function simulateGetGlobalVersion(setter) {
+    function simulateGetGlobalVersion() {
         console.log('getGlobalVersion() called');
-        aboutTimerVersion.current = window.setTimeout(
-            () => setter('1.0.0-demo'),
-            1250
+        return new Promise(
+            (resolve, reject) =>
+                (aboutTimerVersion.current = window.setTimeout(
+                    () => resolve('1.0.0-demo'),
+                    1250
+                ))
         );
     }
-    function simulateGetAdditionalComponents(setComponents) {
+    function simulateGetAdditionalComponents() {
         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
+        return new Promise(
+            (resolve, reject) =>
+                (aboutTimerCmpnt.current = window.setTimeout(
+                    () =>
+                        resolve(
+                            [
+                                {
+                                    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-long-tag',
+                                },
+                                {
+                                    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
+                ))
         );
     }
 
@@ -714,8 +763,8 @@ const AppContent = ({ language, onLanguageClick }) => {
                             theme={theme}
                             appVersion={AppPackage.version}
                             appLicense={AppPackage.license}
-                            getGlobalVersion={simulateGetGlobalVersion}
-                            getAdditionalModules={
+                            globalVersionPromise={simulateGetGlobalVersion}
+                            additionalModulesPromise={
                                 simulateGetAdditionalComponents
                             }
                             onEquipmentLabellingClick={

demo/src/demo_intl.js

@@ -0,0 +1,16 @@
+/*
+ * 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/.
+ */
+
+const translations = {
+    fr: {
+        close: 'Fermer',
+    },
+    en: {
+        close: 'Close',
+    },
+};
+export default translations;