Inject informations into about dialog (#309)

decs.d.ts

@@ -1,13 +1,19 @@
 declare module '@gridsuite/commons-ui' {
     import { FunctionComponent, ReactElement } from 'react';
+    import { InferProps } from 'prop-types';
     import { AutocompleteProps } from '@mui/material/Autocomplete/Autocomplete';
     import {
         ButtonProps,
-        ButtonTypeMap,
         RadioGroupProps,
         TextFieldProps,
     } from '@mui/material';
+    import {TopBar as RawTopBar} from '@gridsuite/commons-ui';
 
+    export const DARK_THEME: String, LIGHT_THEME: String;
+
+    export const TopBar: FunctionComponent<InferProps<typeof RawTopBar.propTypes>>;
+
+    function logout(dispatch: any, userManagerInstance: any): Promise<any | undefined>;
     interface SnackInputs {
         messageTxt?: string;
         messageId?: string;

package.json

@@ -1,12 +1,13 @@
 {
     "name": "gridexplore-app",
     "version": "0.1.0",
+    "license": "MPL-2.0",
     "homepage": ".",
     "private": true,
     "dependencies": {
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
-        "@gridsuite/commons-ui": "0.41.0",
+        "@gridsuite/commons-ui": "^0.42.0",
         "@hookform/resolvers": "^3.0.0",
         "@mui/icons-material": "^5.5.0",
         "@mui/lab": "^5.0.0-alpha.72",
@@ -71,9 +72,9 @@
         ]
     },
     "devDependencies": {
-        "http-proxy-middleware": "^2.0.0",
-        "prettier": "^2.0.0",
         "eslint-config-prettier": "^8.0.0",
-        "eslint-plugin-prettier": "^4.0.0"
+        "eslint-plugin-prettier": "^4.0.0",
+        "http-proxy-middleware": "^2.0.0",
+        "prettier": "^2.0.0"
     }
 }

src/components/app-top-bar.js

@@ -11,12 +11,18 @@ import ParametersDialog, {
 } from './dialogs/parameters-dialog';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchAppsAndUrls } from '../utils/rest-api';
+import {
+    fetchAppsAndUrls,
+    fetchVersion,
+    getServersInfos,
+} from '../utils/rest-api';
 import PropTypes from 'prop-types';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as GridExploreLogoLight } from '../images/GridExplore_logo_light.svg';
 import { ReactComponent as GridExploreLogoDark } from '../images/GridExplore_logo_dark.svg';
 import { setAppsAndUrls } from '../redux/actions';
+import AppPackage from '../../package.json';
+
 const AppTopBar = ({ user, userManager }) => {
     const navigate = useNavigate();
 
@@ -41,14 +47,6 @@ const AppTopBar = ({ user, userManager }) => {
         }
     }, [user, dispatch]);
 
-    function hideParameters() {
-        setShowParameters(false);
-    }
-
-    function onLogoClicked() {
-        navigate('/', { replace: true });
-    }
-
     return (
         <>
             <TopBar
@@ -61,19 +59,57 @@ const AppTopBar = ({ user, userManager }) => {
                         <GridExploreLogoDark />
                     )
                 }
+                appVersion={AppPackage.version}
+                appLicense={AppPackage.license}
                 onLogoutClick={() => logout(dispatch, userManager.instance)}
-                onLogoClick={() => onLogoClicked()}
+                onLogoClick={() => navigate('/', { replace: true })}
                 user={user}
                 appsAndUrls={appsAndUrls}
-                onAboutClick={() => console.debug('about')}
                 onThemeClick={handleChangeTheme}
                 theme={themeLocal}
                 onLanguageClick={handleChangeLanguage}
                 language={languageLocal}
+                getGlobalVersion={(setGlobalVersion) =>
+                    fetchVersion()
+                        .then((res) => setGlobalVersion(res.deployVersion))
+                        .catch((reason) => {
+                            console.error(
+                                'Error while fetching the version : ' + reason
+                            );
+                            setGlobalVersion(null);
+                        })
+                }
+                getAdditionalModules={(setServers) =>
+                    getServersInfos()
+                        .then((res) =>
+                            setServers(
+                                Object.entries(res).map(([name, infos]) => ({
+                                    name:
+                                        infos?.build?.name ||
+                                        infos?.build?.artifact ||
+                                        name,
+                                    type: 'server',
+                                    version: infos?.build?.version,
+                                    gitTag:
+                                        infos?.git?.tags ||
+                                        infos?.git?.commit?.id[
+                                            'describe-short'
+                                        ],
+                                }))
+                            )
+                        )
+                        .catch((reason) => {
+                            console.error(
+                                'Error while fetching the servers infos : ' +
+                                    reason
+                            );
+                            setServers(null);
+                        })
+                }
             />
             <ParametersDialog
                 showParameters={showParameters}
-                hideParameters={hideParameters}
+                hideParameters={() => setShowParameters(false)}
             />
         </>
     );

src/translations/en.json

@@ -1,4 +1,5 @@
 {
+  "close": "Close",
   "parameters": "Parameters",
   "paramsChangingError": "An error occured when changing the parameters",
   "paramsRetrievingError": "An error occurred while retrieving the parameters",

src/translations/fr.json

@@ -1,4 +1,5 @@
 {
+  "close": "Fermer",
   "parameters": "Paramètres",
   "paramsChangingError": "Une erreur est survenue lors de la modification des paramètres",
   "paramsRetrievingError": "Une erreur est survenue lors de la récupération des paramètres",

src/utils/rest-api.js

@@ -28,6 +28,7 @@ const PREFIX_NOTIFICATION_WS =
     process.env.REACT_APP_WS_GATEWAY + '/directory-notification';
 const PREFIX_FILTERS_QUERIES =
     process.env.REACT_APP_API_GATEWAY + '/filter/v1/filters';
+const PREFIX_STUDY_QUERIES = process.env.REACT_APP_API_GATEWAY + '/study';
 
 function getToken() {
     const state = store.getState();
@@ -175,44 +176,48 @@ export function fetchValidateUser(user) {
         });
 }
 
+function fetchEnv() {
+    return fetch('env.json').then((res) => res.json());
+}
+
 export function fetchAuthorizationCodeFlowFeatureFlag() {
     console.info(`Fetching authorization code flow feature flag...`);
-    return fetch('env.json')
+    return fetchEnv()
+        .then((res) =>
+            fetch(res.appsMetadataServerUrl + '/authentication.json')
+        )
         .then((res) => res.json())
         .then((res) => {
-            return fetch(res.appsMetadataServerUrl + '/authentication.json')
-                .then((res) => res.json())
-                .then((res) => {
-                    console.log(
-                        `Authorization code flow is ${
-                            res.authorizationCodeFlowFeatureFlag
-                                ? 'enabled'
-                                : 'disabled'
-                        }`
-                    );
-                    return res.authorizationCodeFlowFeatureFlag;
-                })
-                .catch((error) => {
-                    console.error(error);
-                    console.warn(
-                        `Something wrong happened when retrieving authentication.json: authorization code flow will be disabled`
-                    );
-                    return false;
-                });
+            console.log(
+                `Authorization code flow is ${
+                    res.authorizationCodeFlowFeatureFlag
+                        ? 'enabled'
+                        : 'disabled'
+                }`
+            );
+            return res.authorizationCodeFlowFeatureFlag;
+        })
+        .catch((error) => {
+            console.error(error);
+            console.warn(
+                `Something wrong happened when retrieving authentication.json: authorization code flow will be disabled`
+            );
+            return false;
         });
 }
 
 export function fetchAppsAndUrls() {
     console.info(`Fetching apps and urls...`);
-    return fetch('env.json')
-        .then((res) => res.json())
-        .then((res) => {
-            return fetch(
-                res.appsMetadataServerUrl + '/apps-metadata.json'
-            ).then((response) => {
-                return response.json();
-            });
-        });
+    return fetchEnv()
+        .then((env) => fetch(env.appsMetadataServerUrl + '/apps-metadata.json'))
+        .then((response) => response.json());
+}
+
+export function fetchVersion() {
+    console.info(`Fetching global metadata...`);
+    return fetchEnv()
+        .then((env) => fetch(env.appsMetadataServerUrl + '/version.json'))
+        .then((response) => response.json());
 }
 
 export function fetchConfigParameters(appName) {
@@ -981,3 +986,8 @@ export function downloadCase(caseUuid) {
         method: 'get',
     });
 }
+
+export function getServersInfos() {
+    console.info('get backend servers informations');
+    return backendFetchJson(PREFIX_STUDY_QUERIES + '/v1/servers/infos');
+}