@gridsuite/commons-ui 0.41.0 → 0.42.0

package/es/components/TopBar/AboutDialog.js

@@ -0,0 +1,333 @@
+/**
+ * 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 React, { useCallback, useEffect, useState } from 'react';
+import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, Button, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogTitle, Fade, Grid, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { Apps, DnsOutlined, ExpandMore, Gavel, QuestionMark, Refresh, WidgetsOutlined } from '@mui/icons-material';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { LogoText } from './GridLogo';
+var moduleTypeSort = {
+  app: 1,
+  server: 10,
+  other: 20
+};
+function compareModules(c1, c2) {
+  //sort by type then by name
+  return [moduleTypeSort[c1.type] || 100] - [moduleTypeSort[c2.type] || 100] || (c1.name || '').localeCompare(c2.name || '');
+}
+var AboutDialog = function AboutDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    getGlobalVersion = _ref.getGlobalVersion,
+    appName = _ref.appName,
+    appVersion = _ref.appVersion,
+    appGitTag = _ref.appGitTag,
+    appLicense = _ref.appLicense,
+    getAdditionalModules = _ref.getAdditionalModules;
+  var theme = useTheme();
+  var _useState = useState(false),
+    isRefreshing = _useState[0],
+    setRefreshState = _useState[1];
+  var _useState2 = useState(false),
+    loadingGlobalVersion = _useState2[0],
+    setLoadingGlobalVersion = _useState2[1];
+
+  /* We want to get the initial version once at first render to detect later a new deploy */
+  var _useState3 = useState(undefined),
+    startingGlobalVersion = _useState3[0],
+    setStartingGlobalVersion = _useState3[1];
+  useEffect(function () {
+    if (startingGlobalVersion === undefined && getGlobalVersion) {
+      getGlobalVersion(function (value) {
+        setStartingGlobalVersion(value);
+        setActualGlobalVersion(value);
+      });
+    }
+  }, [getGlobalVersion, startingGlobalVersion]);
+  var _useState4 = useState(null),
+    actualGlobalVersion = _useState4[0],
+    setActualGlobalVersion = _useState4[1];
+  useEffect(function () {
+    if (open && getGlobalVersion) {
+      setLoadingGlobalVersion(true);
+      getGlobalVersion(function (value) {
+        setLoadingGlobalVersion(false);
+        setActualGlobalVersion(value || null);
+      });
+    }
+  }, [open, getGlobalVersion]);
+  var _useState5 = useState(false),
+    loadingAdditionalModules = _useState5[0],
+    setLoadingAdditionalModules = _useState5[1];
+  var _useState6 = useState(null),
+    modules = _useState6[0],
+    setModules = _useState6[1];
+  useEffect(function () {
+    if (open) {
+      var currentApp = {
+        name: "Grid" + appName,
+        type: 'app',
+        version: appVersion,
+        gitTag: appGitTag,
+        license: appLicense
+      };
+      if (getAdditionalModules) {
+        setLoadingAdditionalModules(true);
+        getAdditionalModules(function (values) {
+          setLoadingAdditionalModules(false);
+          if (Array.isArray(values)) {
+            setModules([currentApp].concat(values));
+          } else {
+            setModules([currentApp]);
+          }
+        });
+      } else {
+        setModules([currentApp]);
+      }
+    }
+  }, [open, getAdditionalModules, appName, appVersion, appGitTag, appLicense]);
+  var handleClose = useCallback(function () {
+    if (onClose) {
+      onClose();
+    }
+    setModules(null);
+    setActualGlobalVersion(null);
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: handleClose,
+    open: open,
+    fullWidth: true,
+    maxWidth: "md",
+    fullScreen: useMediaQuery(theme.breakpoints.down('md')),
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description"
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    id: "alert-dialog-title"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: 'about-dialog/title'
+  })), /*#__PURE__*/React.createElement(DialogContent, {
+    dividers: true,
+    id: "alert-dialog-description"
+  }, /*#__PURE__*/React.createElement(Box, null, startingGlobalVersion !== undefined && startingGlobalVersion !== null && actualGlobalVersion !== null && startingGlobalVersion !== actualGlobalVersion && /*#__PURE__*/React.createElement(Collapse, {
+    "in": open
+  }, /*#__PURE__*/React.createElement(Alert, {
+    severity: "warning",
+    variant: "outlined",
+    action: /*#__PURE__*/React.createElement(LoadingButton, {
+      color: "inherit",
+      size: "small",
+      startIcon: /*#__PURE__*/React.createElement(Refresh, {
+        fontSize: "small"
+      }),
+      loadingPosition: "start",
+      loading: isRefreshing,
+      onClick: function onClick() {
+        setRefreshState(true);
+        window.location.reload();
+      }
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "refresh"
+    })),
+    sx: {
+      marginBottom: 1
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/alert-running-old-version-msg"
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(LogoText, {
+    appName: "Suite",
+    appColor: theme.palette.grey['500']
+  })), /*#__PURE__*/React.createElement(Box, {
+    component: "dl",
+    sx: {
+      textAlign: 'center',
+      marginTop: 0,
+      'dt, dd': {
+        display: 'inline',
+        margin: 0
+      },
+      dt: {
+        marginRight: '0.5em',
+        '&:after': {
+          content: '" :"'
+        },
+        '&:before': {
+          content: "'\\A'",
+          whiteSpace: 'pre'
+        },
+        '&:first-child': {
+          '&:before': {
+            content: "''"
+          }
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement("dt", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/version"
+  })), /*#__PURE__*/React.createElement("dd", null, loadingGlobalVersion ? '…' : actualGlobalVersion ? /*#__PURE__*/React.createElement("b", {
+    style: {
+      fontSize: '1.5em'
+    }
+  }, actualGlobalVersion) : /*#__PURE__*/React.createElement("i", null, "unknown")), /*#__PURE__*/React.createElement(Fade, {
+    "in": loadingGlobalVersion,
+    style: {
+      transitionDelay: '500ms'
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: "1rem"
+  })))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      '.MuiAccordion-root': {
+        //dunno why the theme has the background as black in dark mode
+        bgcolor: 'unset'
+      },
+      '.MuiAccordionSummary-content > .MuiSvgIcon-root': {
+        marginRight: '0.5rem'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Accordion, {
+    disableGutters: true,
+    variant: "outlined",
+    disabled: true,
+    sx: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(AccordionSummary, {
+    expandIcon: /*#__PURE__*/React.createElement(ExpandMore, null),
+    "aria-controls": "panel1-content",
+    id: "panel1-header"
+  }, /*#__PURE__*/React.createElement(Gavel, {
+    fontSize: "small"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      width: '33%',
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/license"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      color: 'text.secondary'
+    }
+  }, appLicense)), /*#__PURE__*/React.createElement(AccordionDetails, null, "license app summary text")), /*#__PURE__*/React.createElement(Accordion, {
+    disableGutters: true,
+    variant: "outlined",
+    defaultExpanded: true,
+    TransitionProps: {
+      unmountOnExit: true
+    }
+  }, /*#__PURE__*/React.createElement(AccordionSummary, {
+    expandIcon: /*#__PURE__*/React.createElement(ExpandMore, null),
+    "aria-controls": "panel2-content",
+    id: "panel2-header"
+  }, /*#__PURE__*/React.createElement(Apps, {
+    fontSize: "small"
+  }), /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/modules-section"
+  })), /*#__PURE__*/React.createElement(AccordionDetails, null, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    sx: {
+      pl: 2
+    },
+    spacing: 1
+  }, loadingAdditionalModules ? /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: true,
+    display: "inline-flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    color: "inherit"
+  })) : Array.isArray(modules) && /*#__PURE__*/React.createElement(React.Fragment, null, [].concat(modules).sort(compareModules).map(function (module, idx) {
+    return /*#__PURE__*/React.createElement(Module, {
+      key: "module-" + idx,
+      type: module.type,
+      name: module.name,
+      version: module.gitTag || module.version,
+      license: module.license
+    });
+  })) || /*#__PURE__*/React.createElement(Typography, {
+    color: function color(theme) {
+      return theme.palette.error.main;
+    }
+  }, "Error")))))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClose,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "close"
+  }))));
+};
+export default AboutDialog;
+AboutDialog.propTypes = process.env.NODE_ENV !== "production" ? {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  appName: PropTypes.string.isRequired,
+  appVersion: PropTypes.string,
+  appGitTag: PropTypes.string,
+  appLicense: PropTypes.string,
+  getGlobalVersion: PropTypes.func,
+  getAdditionalModules: PropTypes.func
+} : {};
+var ModuleTypesIcons = {
+  app: /*#__PURE__*/React.createElement(WidgetsOutlined, {
+    fontSize: "small",
+    color: "primary"
+  }),
+  server: /*#__PURE__*/React.createElement(DnsOutlined, {
+    fontSize: "small",
+    color: "secondary"
+  }),
+  other: /*#__PURE__*/React.createElement(QuestionMark, {
+    fontSize: "small"
+  })
+};
+var Module = function Module(_ref2) {
+  var type = _ref2.type,
+    name = _ref2.name,
+    version = _ref2.version,
+    license = _ref2.license;
+  return /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    sx: {
+      '.MuiTypography-root': {
+        minWidth: '3em'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "baseline",
+    spacing: 1
+  }, ModuleTypesIcons[type] || ModuleTypesIcons['other'], /*#__PURE__*/React.createElement(Typography, {
+    display: "inline-block",
+    noWrap: true
+  }, name || '<?>'), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: function color(theme) {
+      return theme.palette.text.secondary;
+    },
+    display: "inline",
+    marginLeft: 1,
+    noWrap: true
+  }, version || null)));
+};
+Module.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  version: PropTypes.string,
+  license: PropTypes.string
+} : {};

package/es/components/TopBar/GridLogo.js

@@ -0,0 +1,73 @@
+/**
+ * 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 React from 'react';
+import { Box, Typography } from '@mui/material';
+import { BrokenImage } from '@mui/icons-material';
+import { mergeSx } from '../../utils/styles';
+import PropTypes from 'prop-types';
+var styles = {
+  logo: {
+    flexShrink: 0,
+    width: 48,
+    height: 48,
+    marginBottom: '8px'
+  },
+  title: {
+    marginLeft: '18px'
+  },
+  clickable: {
+    cursor: 'pointer'
+  }
+};
+var GridLogo = function GridLogo(_ref) {
+  var appLogo = _ref.appLogo,
+    appName = _ref.appName,
+    appColor = _ref.appColor,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    sx: mergeSx(styles.logo, onClick && styles.clickable),
+    onClick: onClick
+  }, appLogo || /*#__PURE__*/React.createElement(BrokenImage, null)), /*#__PURE__*/React.createElement(LogoText, {
+    appName: appName,
+    appColor: appColor,
+    onClick: onClick,
+    style: styles.title
+  }));
+};
+export default GridLogo;
+GridLogo.propTypes = process.env.NODE_ENV !== "production" ? {
+  appLogo: PropTypes.element,
+  appName: PropTypes.string.isRequired,
+  appColor: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : {};
+export var LogoText = function LogoText(_ref2) {
+  var appName = _ref2.appName,
+    appColor = _ref2.appColor,
+    style = _ref2.style,
+    onClick = _ref2.onClick;
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "h4",
+    sx: mergeSx(style, onClick && styles.clickable),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "Grid"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: appColor
+    }
+  }, appName));
+};
+LogoText.propTypes = process.env.NODE_ENV !== "production" ? {
+  appName: PropTypes.string.isRequired,
+  appColor: PropTypes.string.isRequired,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  onClick: PropTypes.func
+} : {};

package/es/components/TopBar/TopBar.js

@@ -6,64 +6,27 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import AppBar from '@mui/material/AppBar';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { AppBar, Box, Button, ClickAwayListener, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, Popper, ToggleButton, ToggleButtonGroup, Toolbar, Typography } from '@mui/material';
+import { Apps as AppsIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Brightness3 as Brightness3Icon, Computer as ComputerIcon, ExitToApp as ExitToAppIcon, FullscreenExit as FullscreenExitIcon, Fullscreen as FullscreenIcon, HelpOutline as HelpOutlineIcon, Person as PersonIcon, Search as SearchIcon, Settings as SettingsIcon, WbSunny as WbSunnyIcon } from '@mui/icons-material';
 import { darken } from '@mui/material/styles';
 import { styled } from '@mui/system';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import SettingsIcon from '@mui/icons-material/Settings';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Box from '@mui/material/Box';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import AppsIcon from '@mui/icons-material/Apps';
-import SearchIcon from '@mui/icons-material/Search';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
-import PersonIcon from '@mui/icons-material/Person';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import Brightness3Icon from '@mui/icons-material/Brightness3';
-import WbSunnyIcon from '@mui/icons-material/WbSunny';
-import ComputerIcon from '@mui/icons-material/Computer';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import PropTypes from 'prop-types';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';
-import Popper from '@mui/material/Popper';
-import Paper from '@mui/material/Paper';
-import MenuList from '@mui/material/MenuList';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { mergeSx } from '../../utils/styles';
 import ElementSearchDialog from '../ElementSearchDialog';
+import GridLogo from './GridLogo';
+import AboutDialog from './AboutDialog';
 var styles = {
   grow: {
     flexGrow: 1,
     display: 'flex',
     overflow: 'hidden'
   },
-  logo: {
-    flexShrink: 0,
-    width: 48,
-    height: 48,
-    marginBottom: '8px'
-  },
   menuIcon: {
     width: 24,
     height: 24
   },
-  title: {
-    marginLeft: '18px'
-  },
-  clickable: {
-    cursor: 'pointer'
-  },
   link: {
     textDecoration: 'none',
     color: 'inherit'
@@ -162,6 +125,8 @@ var TopBar = function TopBar(_ref2) {
   var appName = _ref2.appName,
     appColor = _ref2.appColor,
     appLogo = _ref2.appLogo,
+    appVersion = _ref2.appVersion,
+    appLicense = _ref2.appLicense,
     onParametersClick = _ref2.onParametersClick,
     onLogoutClick = _ref2.onLogoutClick,
     onLogoClick = _ref2.onLogoClick,
@@ -169,6 +134,8 @@ var TopBar = function TopBar(_ref2) {
     children = _ref2.children,
     appsAndUrls = _ref2.appsAndUrls,
     onAboutClick = _ref2.onAboutClick,
+    getGlobalVersion = _ref2.getGlobalVersion,
+    getAdditionalModules = _ref2.getAdditionalModules,
     onThemeClick = _ref2.onThemeClick,
     theme = _ref2.theme,
     onEquipmentLabellingClick = _ref2.onEquipmentLabellingClick,
@@ -251,10 +218,15 @@ var TopBar = function TopBar(_ref2) {
       onLanguageClick(value);
     }
   };
+  var _useState3 = useState(false),
+    isAboutDialogOpen = _useState3[0],
+    setAboutDialogOpen = _useState3[1];
   var onAboutClicked = function onAboutClicked() {
     setAnchorElSettingsMenu(false);
     if (onAboutClick) {
       onAboutClick();
+    } else {
+      setAboutDialogOpen(true);
     }
   };
   useEffect(function () {
@@ -271,6 +243,14 @@ var TopBar = function TopBar(_ref2) {
       };
     }
   }, [user, withElementsSearch, searchDisabled]);
+  var logo_clickable = useMemo(function () {
+    return /*#__PURE__*/React.createElement(GridLogo, {
+      onClick: onLogoClick,
+      appLogo: appLogo,
+      appName: appName,
+      appColor: appColor
+    });
+  }, [onLogoClick, appLogo, appName, appColor]);
   return /*#__PURE__*/React.createElement(AppBar, {
     position: "static",
     color: "default",
@@ -281,22 +261,7 @@ var TopBar = function TopBar(_ref2) {
     onFullScreenError: function onFullScreenError(e) {
       return console.debug('full screen error : ' + e.message);
     }
-  }), /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(Box, {
-    sx: mergeSx(styles.logo, onLogoClick && styles.clickable),
-    onClick: onLogoClick
-  }, appLogo), /*#__PURE__*/React.createElement(Typography, {
-    variant: "h4",
-    sx: mergeSx(styles.title, onLogoClick && styles.clickable),
-    onClick: onLogoClick
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: 'bold'
-    }
-  }, "Grid"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: appColor
-    }
-  }, appName)), /*#__PURE__*/React.createElement(Box, {
+  }), /*#__PURE__*/React.createElement(Toolbar, null, logo_clickable, /*#__PURE__*/React.createElement(Box, {
     sx: styles.grow
   }, children), user && withElementsSearch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementSearchDialog, {
     open: isDialogSearchOpen,
@@ -497,7 +462,6 @@ var TopBar = function TopBar(_ref2) {
     defaultMessage: 'Settings'
   })))), /*#__PURE__*/React.createElement(StyledMenuItem, {
     sx: styles.borderBottom,
-    disabled: !onAboutClick,
     style: {
       opacity: '1'
     },
@@ -534,7 +498,17 @@ var TopBar = function TopBar(_ref2) {
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "top-bar/logout",
     defaultMessage: 'Logout'
-  })))))))))));
+  }))))))))), /*#__PURE__*/React.createElement(AboutDialog, {
+    open: isAboutDialogOpen,
+    onClose: function onClose() {
+      return setAboutDialogOpen(false);
+    },
+    appName: appName,
+    appVersion: appVersion,
+    appLicense: appLicense,
+    getGlobalVersion: getGlobalVersion,
+    getAdditionalModules: getAdditionalModules
+  })));
 };
 TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onParametersClick: PropTypes.func,
@@ -543,12 +517,16 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   appName: PropTypes.string,
   appColor: PropTypes.string,
   appLogo: PropTypes.object,
+  appVersion: PropTypes.string,
+  appLicense: PropTypes.string,
   user: PropTypes.object,
   children: PropTypes.node,
   appsAndUrls: PropTypes.array,
   onThemeClick: PropTypes.func,
   theme: PropTypes.string,
   onAboutClick: PropTypes.func,
+  getGlobalVersion: PropTypes.func,
+  getAdditionalModules: PropTypes.func,
   onEquipmentLabellingClick: PropTypes.func,
   equipmentLabelling: PropTypes.bool,
   withElementsSearch: PropTypes.bool,
@@ -557,6 +535,7 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onSearchTermChange: PropTypes.func,
   onSelectionChange: PropTypes.func,
   elementsFound: PropTypes.array,
+  renderElement: PropTypes.func.isRequired,
   onLanguageClick: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
   searchTermDisabled: PropTypes.bool,

package/es/components/TopBar/index.js

@@ -4,4 +4,6 @@
  * 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/.
  */
-export { default } from './TopBar';
+export { default } from './TopBar';
+export * from './GridLogo';
+export { default as AboutDialog } from './AboutDialog';

package/es/components/translations/top-bar-en.js

@@ -16,6 +16,12 @@ var top_bar_en = {
   'top-bar/id': 'Id',
   'top-bar/name': 'Name',
   'top-bar/language': 'Language',
-  'top-bar/customTheme': 'Custom theme'
+  'top-bar/customTheme': 'Custom theme',
+  'about-dialog/title': 'About',
+  'about-dialog/version': 'Version',
+  'about-dialog/alert-running-old-version-msg': 'Running old version.\nSave your work and refresh the application to load the latest version.',
+  'about-dialog/license': 'License',
+  'about-dialog/modules-section': 'Modules details',
+  'about-dialog/git-version': 'Tag'
 };
 export default top_bar_en;

package/es/components/translations/top-bar-fr.js

@@ -10,12 +10,18 @@ var top_bar_fr = {
   'top-bar/logout': 'Se déconnecter',
   'top-bar/goFullScreen': 'Plein écran',
   'top-bar/exitFullScreen': 'Quitter mode plein écran',
-  'top-bar/about': 'A propos',
+  'top-bar/about': 'À propos',
   'top-bar/displayMode': "Mode d'affichage",
   'top-bar/equipmentLabel': 'Label des ouvrages',
   'top-bar/id': 'Id',
   'top-bar/name': 'Nom',
   'top-bar/language': 'Langue',
-  'top-bar/customTheme': 'Choix de theme'
+  'top-bar/customTheme': 'Choix de theme',
+  'about-dialog/title': 'À propos',
+  'about-dialog/version': 'Version',
+  'about-dialog/alert-running-old-version-msg': "Ancienne version de l'application.\nVeuillez sauvegarder votre travail et rafraîchir l'application pour charger la dernière version",
+  'about-dialog/license': 'Licence',
+  'about-dialog/modules-section': 'Détails des modules',
+  'about-dialog/git-version': 'Tag'
 };
 export default top_bar_fr;

package/es/index.js

@@ -7,6 +7,7 @@
 
 export { default as TreeViewFinder } from './components/TreeViewFinder';
 export { default as TopBar } from './components/TopBar';
+export { default as AboutDialog } from './components/TopBar/AboutDialog';
 export { default as SnackbarProvider } from './components/SnackbarProvider';
 export { default as AuthenticationRouter } from './components/AuthenticationRouter';
 export { default as MuiVirtualizedTable } from './components/MuiVirtualizedTable';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.41.0",
+    "version": "0.42.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",