@gridsuite/commons-ui 0.41.0 → 0.43.0

package/es/components/ElementSearchDialog/element-search-dialog.js

@@ -7,9 +7,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { Dialog, DialogContent, TextField, Autocomplete } from '@mui/material';
+import { Autocomplete, Dialog, DialogContent, TextField } from '@mui/material';
 import PropTypes from 'prop-types';
-import SearchIcon from '@mui/icons-material/Search';
+import { Search, SearchOff } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
 var ElementSearchDialog = function ElementSearchDialog(props) {
   var intl = useIntl();
@@ -127,7 +127,9 @@ var ElementSearchDialog = function ElementSearchDialog(props) {
           id: 'element_search/label'
         }),
         InputProps: _extends({}, params.InputProps, {
-          startAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchIcon, {
+          startAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, searchTermDisabled ? /*#__PURE__*/React.createElement(SearchOff, {
+            color: "disabled"
+          }) : /*#__PURE__*/React.createElement(Search, {
             color: "disabled"
           }), params.InputProps.startAdornment)
         })

package/es/components/TopBar/AboutDialog.js

@@ -0,0 +1,456 @@
+/**
+ * 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, Tooltip, tooltipClasses, Typography, useMediaQuery, useTheme, Zoom } 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 styles = {
+  general: {
+    '.MuiAccordion-root': {
+      //dunno why the theme has the background as black in dark mode
+      bgcolor: 'unset'
+    }
+  },
+  mainSection: {
+    height: '5em'
+  },
+  logoSection: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  mainInfos: {
+    textAlign: 'center',
+    marginTop: 0
+  },
+  versionField: function versionField(isUnknown) {
+    return isUnknown ? {
+      fontSize: '1.5em',
+      fontWeight: 'bold'
+    } : {
+      fontStyle: 'italic'
+    };
+  },
+  detailsSection: {
+    '.MuiAccordionSummary-content > .MuiSvgIcon-root': {
+      marginRight: '0.5rem'
+    }
+  }
+};
+function getGlobalVersion(fnPromise, type, setData, setLoader) {
+  if (fnPromise) {
+    console.debug('Getting', type, 'global version...');
+    return new Promise(function (resolve, reject) {
+      if (setLoader) {
+        setLoader(true);
+      }
+      resolve();
+    }).then(function () {
+      return fnPromise();
+    }).then(function (value) {
+      console.debug(type, 'global version is', value);
+      setData(value !== null && value !== void 0 ? value : null);
+    }, function (reason) {
+      console.debug(type, "global version isn't available", reason);
+      setData(null);
+    })["finally"](function () {
+      if (setLoader) {
+        setLoader(false);
+      }
+    });
+  } else {
+    console.debug('No getter for global version');
+    setData(null);
+  }
+}
+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,
+    globalVersionPromise = _ref.globalVersionPromise,
+    appName = _ref.appName,
+    appVersion = _ref.appVersion,
+    appGitTag = _ref.appGitTag,
+    appLicense = _ref.appLicense,
+    additionalModulesPromise = _ref.additionalModulesPromise;
+  var theme = useTheme();
+  var _useState = useState(false),
+    isRefreshing = _useState[0],
+    setRefreshState = _useState[1];
+  var _useState2 = useState(false),
+    loadingGlobalVersion = _useState2[0],
+    setLoadingGlobalVersion = _useState2[1];
+  var _useState3 = useState(false),
+    showGlobalVersion = _useState3[0],
+    setShowGlobalVersion = _useState3[1];
+
+  /* We want to get the initial version once at first render to detect later a new deploy */
+  var _useState4 = useState(undefined),
+    initialGlobalVersion = _useState4[0],
+    setInitialGlobalVersion = _useState4[1];
+  useEffect(function () {
+    if (initialGlobalVersion === undefined) {
+      getGlobalVersion(globalVersionPromise, 'Initial', setInitialGlobalVersion, undefined);
+    }
+  }, [globalVersionPromise, initialGlobalVersion]);
+  var _useState5 = useState(null),
+    actualGlobalVersion = _useState5[0],
+    setActualGlobalVersion = _useState5[1];
+  useEffect(function () {
+    if (open) {
+      getGlobalVersion(globalVersionPromise, 'Actual', setActualGlobalVersion, function (loading) {
+        setLoadingGlobalVersion(loading);
+        setShowGlobalVersion(false);
+      });
+    }
+  }, [open, globalVersionPromise]);
+  var _useState6 = useState(false),
+    loadingAdditionalModules = _useState6[0],
+    setLoadingAdditionalModules = _useState6[1];
+  var _useState7 = useState(null),
+    modules = _useState7[0],
+    setModules = _useState7[1];
+  useEffect(function () {
+    if (open) {
+      var currentApp = {
+        name: "Grid" + appName,
+        type: 'app',
+        version: appVersion,
+        gitTag: appGitTag,
+        license: appLicense
+      };
+      (additionalModulesPromise ? Promise.resolve(setLoadingAdditionalModules(true)).then(function () {
+        return additionalModulesPromise();
+      }) : Promise.reject(new Error('no getter'))).then(function (values) {
+        return Array.isArray(values) ? values : [];
+      }, function (reason) {
+        return [];
+      }).then(function (values) {
+        setModules([currentApp].concat(values));
+      })["finally"](function () {
+        return setLoadingAdditionalModules(false);
+      });
+    }
+  }, [open, additionalModulesPromise, appName, appVersion, appGitTag, appLicense]);
+  var handleClose = useCallback(function () {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: handleClose,
+    open: open,
+    fullWidth: true,
+    maxWidth: "md",
+    fullScreen: useMediaQuery(theme.breakpoints.down('md')),
+    sx: styles.general,
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description",
+    TransitionProps: {
+      onExited: function onExited(node) {
+        setModules(null);
+        setActualGlobalVersion(null);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(DialogTitle, {
+    id: "alert-dialog-title"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: 'about-dialog/title'
+  }), initialGlobalVersion !== undefined && initialGlobalVersion !== null && actualGlobalVersion !== null && initialGlobalVersion !== 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: 2
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/alert-running-old-version-msg"
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.mainSection
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles.logoSection
+  }, /*#__PURE__*/React.createElement(LogoText, {
+    appName: "Suite",
+    appColor: theme.palette.grey['500']
+  })), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.mainInfos
+  }, /*#__PURE__*/React.createElement(Fade, {
+    "in": loadingGlobalVersion,
+    appear: true,
+    unmountOnExit: true,
+    onExited: function onExited(node) {
+      return setShowGlobalVersion(true);
+    }
+  }, /*#__PURE__*/React.createElement(CircularProgress, null)), showGlobalVersion && /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "about-dialog/version",
+    defaultMessage: "Version {version}",
+    values: {
+      version: /*#__PURE__*/React.createElement(Typography, {
+        component: "span",
+        sx: styles.versionField(!loadingGlobalVersion && actualGlobalVersion)
+      }, actualGlobalVersion || 'unknown')
+    }
+  }))))), /*#__PURE__*/React.createElement(DialogContent, {
+    id: "alert-dialog-description"
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: styles.detailsSection
+  }, /*#__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",
+    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.version,
+      gitTag: module.gitTag,
+      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,
+  globalVersionPromise: PropTypes.func,
+  additionalModulesPromise: PropTypes.func
+} : {};
+var moduleStyles = {
+  icons: {
+    flexGrow: 0,
+    position: 'relative',
+    top: '4px',
+    flexShrink: 0
+  },
+  version: {
+    flexGrow: 0,
+    alignSelf: 'flex-end',
+    flexShrink: 0
+  },
+  tooltip: function tooltip(theme) {
+    var _ref2;
+    return _ref2 = {}, _ref2["& ." + tooltipClasses.tooltip] = {
+      border: '1px solid #dadde9',
+      boxShadow: theme.shadows[1]
+    }, _ref2;
+  },
+  tooltipDetails: {
+    display: 'grid',
+    gridTemplateColumns: 'max-content auto',
+    margin: 0,
+    dt: {
+      gridColumnStart: 1,
+      '&:after': {
+        content: '" :"'
+      }
+    },
+    dd: {
+      gridColumnStart: 2,
+      paddingLeft: '0.5em'
+    }
+  }
+};
+var ModuleTypesIcons = {
+  app: /*#__PURE__*/React.createElement(WidgetsOutlined, {
+    sx: moduleStyles.icons,
+    fontSize: "small",
+    color: "primary"
+  }),
+  server: /*#__PURE__*/React.createElement(DnsOutlined, {
+    sx: moduleStyles.icons,
+    fontSize: "small",
+    color: "secondary"
+  }),
+  other: /*#__PURE__*/React.createElement(QuestionMark, {
+    sx: moduleStyles.icons,
+    fontSize: "small"
+  })
+};
+function insensitiveCaseCompare(str, obj) {
+  return str.localeCompare(obj, undefined, {
+    sensitivity: 'base'
+  });
+}
+function tooltipTypeLabel(type) {
+  if (insensitiveCaseCompare('app', type) === 0) {
+    return 'about-dialog/module-tooltip-app';
+  } else if (insensitiveCaseCompare('server', type) === 0) {
+    return 'about-dialog/module-tooltip-server';
+  } else {
+    return 'about-dialog/module-tooltip-other';
+  }
+}
+var Module = function Module(_ref3) {
+  var type = _ref3.type,
+    name = _ref3.name,
+    version = _ref3.version,
+    gitTag = _ref3.gitTag,
+    license = _ref3.license;
+  return /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    sx: {
+      '.MuiTypography-root': {
+        minWidth: '3em'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    TransitionComponent: Zoom,
+    enterDelay: 2500,
+    enterNextDelay: 350,
+    leaveDelay: 200,
+    placement: "bottom-start",
+    arrow: true,
+    sx: moduleStyles.tooltip,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1"
+    }, name || '<?>'), /*#__PURE__*/React.createElement(Box, {
+      component: "dl",
+      sx: moduleStyles.tooltipDetails
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dt"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "about-dialog/label-type"
+    })), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dd"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: tooltipTypeLabel(type)
+    })), version && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dt"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "about-dialog/label-version"
+    })), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dd"
+    }, version)), gitTag && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dt"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "about-dialog/label-git-version"
+    })), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      component: "dd"
+    }, gitTag))))
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "baseline",
+    spacing: 1
+  }, ModuleTypesIcons[type] || ModuleTypesIcons['other'], /*#__PURE__*/React.createElement(Typography, {
+    display: "inline",
+    noWrap: true
+  }, name || '<?>'), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: function color(theme) {
+      return theme.palette.text.secondary;
+    },
+    display: "inline",
+    noWrap: true,
+    sx: moduleStyles.version
+  }, gitTag || version || null))));
+};
+Module.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: PropTypes.string,
+  name: PropTypes.string,
+  version: PropTypes.string,
+  gitTag: 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,63 +6,24 @@ 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, { useMemo, useRef, useState } 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, IconButton, 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, Fullscreen as FullscreenIcon, FullscreenExit as FullscreenExitIcon, HelpOutline as HelpOutlineIcon, Person as PersonIcon, 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'
+  menuContainer: {
+    marginLeft: 1
   },
   link: {
     textDecoration: 'none',
@@ -162,6 +123,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,21 +132,14 @@ var TopBar = function TopBar(_ref2) {
     children = _ref2.children,
     appsAndUrls = _ref2.appsAndUrls,
     onAboutClick = _ref2.onAboutClick,
+    globalVersionPromise = _ref2.globalVersionPromise,
+    additionalModulesPromise = _ref2.additionalModulesPromise,
     onThemeClick = _ref2.onThemeClick,
     theme = _ref2.theme,
     onEquipmentLabellingClick = _ref2.onEquipmentLabellingClick,
     equipmentLabelling = _ref2.equipmentLabelling,
-    withElementsSearch = _ref2.withElementsSearch,
-    searchDisabled = _ref2.searchDisabled,
-    searchingLabel = _ref2.searchingLabel,
-    onSearchTermChange = _ref2.onSearchTermChange,
-    _onSelectionChange = _ref2.onSelectionChange,
-    elementsFound = _ref2.elementsFound,
-    renderElement = _ref2.renderElement,
     onLanguageClick = _ref2.onLanguageClick,
-    language = _ref2.language,
-    searchTermDisabled = _ref2.searchTermDisabled,
-    searchTermDisableReason = _ref2.searchTermDisableReason;
+    language = _ref2.language;
   var _React$useState = React.useState(null),
     anchorElSettingsMenu = _React$useState[0],
     setAnchorElSettingsMenu = _React$useState[1];
@@ -194,12 +150,6 @@ var TopBar = function TopBar(_ref2) {
   var _useState = useState(false),
     isFullScreen = _useState[0],
     setIsFullScreen = _useState[1];
-  var _useState2 = useState(false),
-    isDialogSearchOpen = _useState2[0],
-    setDialogSearchOpen = _useState2[1];
-  var handleClickElementSearch = function handleClickElementSearch() {
-    setDialogSearchOpen(true);
-  };
   var handleToggleSettingsMenu = function handleToggleSettingsMenu(event) {
     setAnchorElSettingsMenu(event.currentTarget);
   };
@@ -251,26 +201,25 @@ var TopBar = function TopBar(_ref2) {
       onLanguageClick(value);
     }
   };
+  var _useState2 = useState(false),
+    isAboutDialogOpen = _useState2[0],
+    setAboutDialogOpen = _useState2[1];
   var onAboutClicked = function onAboutClicked() {
     setAnchorElSettingsMenu(false);
     if (onAboutClick) {
       onAboutClick();
+    } else {
+      setAboutDialogOpen(true);
     }
   };
-  useEffect(function () {
-    if (user && withElementsSearch && !searchDisabled) {
-      var openSearch = function openSearch(e) {
-        if (e.ctrlKey && e.shiftKey && (e.key === 'F' || e.key === 'f')) {
-          e.preventDefault();
-          setDialogSearchOpen(true);
-        }
-      };
-      document.addEventListener('keydown', openSearch);
-      return function () {
-        return document.removeEventListener('keydown', openSearch);
-      };
-    }
-  }, [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,43 +230,10 @@ 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,
-    onClose: function onClose() {
-      return setDialogSearchOpen(false);
-    },
-    searchingLabel: searchingLabel,
-    onSearchTermChange: onSearchTermChange,
-    onSelectionChange: function onSelectionChange(element) {
-      setDialogSearchOpen(false);
-      _onSelectionChange(element);
-    },
-    elementsFound: elementsFound,
-    renderElement: renderElement,
-    searchTermDisabled: searchTermDisabled,
-    searchTermDisableReason: searchTermDisableReason
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    color: "inherit",
-    onClick: handleClickElementSearch,
-    disabled: searchDisabled
-  }, /*#__PURE__*/React.createElement(SearchIcon, null)))), user && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  }, children), user && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "apps",
     "aria-controls": "apps-menu",
     "aria-haspopup": "true",
     onClick: handleClickAppsMenu,
@@ -350,7 +266,9 @@ var TopBar = function TopBar(_ref2) {
         fontWeight: 'bold'
       }
     }, item.name))));
-  }))), user && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  }))), user && /*#__PURE__*/React.createElement(Box, {
+    sx: styles.menuContainerg
+  }, /*#__PURE__*/React.createElement(Button, {
     "aria-controls": "settings-menu",
     "aria-haspopup": "true",
     sx: styles.showHideMenu,
@@ -484,8 +402,7 @@ var TopBar = function TopBar(_ref2) {
     value: LANG_FRENCH,
     "aria-label": LANG_FRENCH,
     sx: styles.toggleButton
-  }, FR))), /*#__PURE__*/React.createElement(StyledMenuItem, {
-    disabled: !onParametersClick,
+  }, FR))), onParametersClick && /*#__PURE__*/React.createElement(StyledMenuItem, {
     onClick: onParametersClicked,
     sx: styles.borderTop
   }, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(SettingsIcon, {
@@ -497,7 +414,6 @@ var TopBar = function TopBar(_ref2) {
     defaultMessage: 'Settings'
   })))), /*#__PURE__*/React.createElement(StyledMenuItem, {
     sx: styles.borderBottom,
-    disabled: !onAboutClick,
     style: {
       opacity: '1'
     },
@@ -534,7 +450,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,
+    globalVersionPromise: globalVersionPromise,
+    additionalModulesPromise: additionalModulesPromise
+  })));
 };
 TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onParametersClick: PropTypes.func,
@@ -543,23 +469,19 @@ 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,
+  globalVersionPromise: PropTypes.func,
+  additionalModulesPromise: PropTypes.func,
   onEquipmentLabellingClick: PropTypes.func,
   equipmentLabelling: PropTypes.bool,
-  withElementsSearch: PropTypes.bool,
-  searchDisabled: PropTypes.bool,
-  searchingLabel: PropTypes.string,
-  onSearchTermChange: PropTypes.func,
-  onSelectionChange: PropTypes.func,
-  elementsFound: PropTypes.array,
   onLanguageClick: PropTypes.func.isRequired,
-  language: PropTypes.string.isRequired,
-  searchTermDisabled: PropTypes.bool,
-  searchTermDisableReason: PropTypes.string
+  language: PropTypes.string.isRequired
 } : {};
 export default TopBar;

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,17 @@ 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 {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/label-version': 'Version',
+  'about-dialog/label-git-version': 'Tag',
+  'about-dialog/label-type': 'Type',
+  'about-dialog/module-tooltip-app': 'application',
+  'about-dialog/module-tooltip-server': 'server',
+  'about-dialog/module-tooltip-other': 'other'
 };
 export default top_bar_en;

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

@@ -10,12 +10,23 @@ 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 {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/label-version': 'Version',
+  'about-dialog/label-git-version': 'Tag',
+  'about-dialog/label-type': 'Type',
+  'about-dialog/module-tooltip-app': 'application',
+  'about-dialog/module-tooltip-server': 'serveur',
+  'about-dialog/module-tooltip-other': 'autre'
 };
 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.43.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",