@gridsuite/commons-ui 0.42.0 → 0.43.1

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

@@ -6,12 +6,71 @@
  */
 
 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 { 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,
@@ -24,12 +83,12 @@ function compareModules(c1, c2) {
 var AboutDialog = function AboutDialog(_ref) {
   var open = _ref.open,
     onClose = _ref.onClose,
-    getGlobalVersion = _ref.getGlobalVersion,
+    globalVersionPromise = _ref.globalVersionPromise,
     appName = _ref.appName,
     appVersion = _ref.appVersion,
     appGitTag = _ref.appGitTag,
     appLicense = _ref.appLicense,
-    getAdditionalModules = _ref.getAdditionalModules;
+    additionalModulesPromise = _ref.additionalModulesPromise;
   var theme = useTheme();
   var _useState = useState(false),
     isRefreshing = _useState[0],
@@ -37,37 +96,36 @@ var AboutDialog = function AboutDialog(_ref) {
   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 _useState3 = useState(undefined),
-    startingGlobalVersion = _useState3[0],
-    setStartingGlobalVersion = _useState3[1];
+  var _useState4 = useState(undefined),
+    initialGlobalVersion = _useState4[0],
+    setInitialGlobalVersion = _useState4[1];
   useEffect(function () {
-    if (startingGlobalVersion === undefined && getGlobalVersion) {
-      getGlobalVersion(function (value) {
-        setStartingGlobalVersion(value);
-        setActualGlobalVersion(value);
-      });
+    if (initialGlobalVersion === undefined) {
+      getGlobalVersion(globalVersionPromise, 'Initial', setInitialGlobalVersion, undefined);
     }
-  }, [getGlobalVersion, startingGlobalVersion]);
-  var _useState4 = useState(null),
-    actualGlobalVersion = _useState4[0],
-    setActualGlobalVersion = _useState4[1];
+  }, [globalVersionPromise, initialGlobalVersion]);
+  var _useState5 = useState(null),
+    actualGlobalVersion = _useState5[0],
+    setActualGlobalVersion = _useState5[1];
   useEffect(function () {
-    if (open && getGlobalVersion) {
-      setLoadingGlobalVersion(true);
-      getGlobalVersion(function (value) {
-        setLoadingGlobalVersion(false);
-        setActualGlobalVersion(value || null);
+    if (open) {
+      getGlobalVersion(globalVersionPromise, 'Actual', setActualGlobalVersion, function (loading) {
+        setLoadingGlobalVersion(loading);
+        setShowGlobalVersion(false);
       });
     }
-  }, [open, getGlobalVersion]);
-  var _useState5 = useState(false),
-    loadingAdditionalModules = _useState5[0],
-    setLoadingAdditionalModules = _useState5[1];
-  var _useState6 = useState(null),
-    modules = _useState6[0],
-    setModules = _useState6[1];
+  }, [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 = {
@@ -77,27 +135,23 @@ var AboutDialog = function AboutDialog(_ref) {
         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]);
-      }
+      (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, getAdditionalModules, appName, appVersion, appGitTag, appLicense]);
+  }, [open, additionalModulesPromise, appName, appVersion, appGitTag, appLicense]);
   var handleClose = useCallback(function () {
     if (onClose) {
       onClose();
     }
-    setModules(null);
-    setActualGlobalVersion(null);
   }, [onClose]);
   return /*#__PURE__*/React.createElement(Dialog, {
     onClose: handleClose,
@@ -105,16 +159,20 @@ var AboutDialog = function AboutDialog(_ref) {
     fullWidth: true,
     maxWidth: "md",
     fullScreen: useMediaQuery(theme.breakpoints.down('md')),
+    sx: styles.general,
     "aria-labelledby": "alert-dialog-title",
-    "aria-describedby": "alert-dialog-description"
+    "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'
-  })), /*#__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, {
+  }), initialGlobalVersion !== undefined && initialGlobalVersion !== null && actualGlobalVersion !== null && initialGlobalVersion !== actualGlobalVersion && /*#__PURE__*/React.createElement(Collapse, {
     "in": open
   }, /*#__PURE__*/React.createElement(Alert, {
     severity: "warning",
@@ -135,68 +193,39 @@ var AboutDialog = function AboutDialog(_ref) {
       id: "refresh"
     })),
     sx: {
-      marginBottom: 1
+      marginBottom: 2
     }
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "about-dialog/alert-running-old-version-msg"
   }))), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
+    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, {
-    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, {
+    sx: styles.mainInfos
+  }, /*#__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'
-      }
+    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",
@@ -224,7 +253,6 @@ var AboutDialog = function AboutDialog(_ref) {
   }, appLicense)), /*#__PURE__*/React.createElement(AccordionDetails, null, "license app summary text")), /*#__PURE__*/React.createElement(Accordion, {
     disableGutters: true,
     variant: "outlined",
-    defaultExpanded: true,
     TransitionProps: {
       unmountOnExit: true
     }
@@ -254,7 +282,8 @@ var AboutDialog = function AboutDialog(_ref) {
       key: "module-" + idx,
       type: module.type,
       name: module.name,
-      version: module.gitTag || module.version,
+      version: module.version,
+      gitTag: module.gitTag,
       license: module.license
     });
   })) || /*#__PURE__*/React.createElement(Typography, {
@@ -276,27 +305,80 @@ AboutDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   appVersion: PropTypes.string,
   appGitTag: PropTypes.string,
   appLicense: PropTypes.string,
-  getGlobalVersion: PropTypes.func,
-  getAdditionalModules: PropTypes.func
+  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"
   })
 };
-var Module = function Module(_ref2) {
-  var type = _ref2.type,
-    name = _ref2.name,
-    version = _ref2.version,
-    license = _ref2.license;
+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,
@@ -307,13 +389,53 @@ var Module = function Module(_ref2) {
         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-block",
+    display: "inline",
     noWrap: true
   }, name || '<?>'), /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
@@ -321,13 +443,14 @@ var Module = function Module(_ref2) {
       return theme.palette.text.secondary;
     },
     display: "inline",
-    marginLeft: 1,
-    noWrap: true
-  }, version || null)));
+    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/TopBar.js

@@ -6,15 +6,14 @@ 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, useMemo } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-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 { 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 PropTypes from 'prop-types';
 import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';
-import ElementSearchDialog from '../ElementSearchDialog';
 import GridLogo from './GridLogo';
 import AboutDialog from './AboutDialog';
 var styles = {
@@ -23,9 +22,8 @@ var styles = {
     display: 'flex',
     overflow: 'hidden'
   },
-  menuIcon: {
-    width: 24,
-    height: 24
+  menuContainer: {
+    marginLeft: 1
   },
   link: {
     textDecoration: 'none',
@@ -134,23 +132,14 @@ var TopBar = function TopBar(_ref2) {
     children = _ref2.children,
     appsAndUrls = _ref2.appsAndUrls,
     onAboutClick = _ref2.onAboutClick,
-    getGlobalVersion = _ref2.getGlobalVersion,
-    getAdditionalModules = _ref2.getAdditionalModules,
+    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];
@@ -161,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);
   };
@@ -218,9 +201,9 @@ var TopBar = function TopBar(_ref2) {
       onLanguageClick(value);
     }
   };
-  var _useState3 = useState(false),
-    isAboutDialogOpen = _useState3[0],
-    setAboutDialogOpen = _useState3[1];
+  var _useState2 = useState(false),
+    isAboutDialogOpen = _useState2[0],
+    setAboutDialogOpen = _useState2[1];
   var onAboutClicked = function onAboutClicked() {
     setAnchorElSettingsMenu(false);
     if (onAboutClick) {
@@ -229,20 +212,6 @@ var TopBar = function TopBar(_ref2) {
       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,
@@ -263,26 +232,8 @@ var TopBar = function TopBar(_ref2) {
     }
   }), /*#__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,
@@ -315,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,
@@ -449,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, {
@@ -506,8 +458,8 @@ var TopBar = function TopBar(_ref2) {
     appName: appName,
     appVersion: appVersion,
     appLicense: appLicense,
-    getGlobalVersion: getGlobalVersion,
-    getAdditionalModules: getAdditionalModules
+    globalVersionPromise: globalVersionPromise,
+    additionalModulesPromise: additionalModulesPromise
   })));
 };
 TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -525,20 +477,11 @@ TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
   onThemeClick: PropTypes.func,
   theme: PropTypes.string,
   onAboutClick: PropTypes.func,
-  getGlobalVersion: PropTypes.func,
-  getAdditionalModules: 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,
-  renderElement: PropTypes.func.isRequired,
   onLanguageClick: PropTypes.func.isRequired,
-  language: PropTypes.string.isRequired,
-  searchTermDisabled: PropTypes.bool,
-  searchTermDisableReason: PropTypes.string
+  language: PropTypes.string.isRequired
 } : {};
 export default TopBar;

package/es/components/translations/table-en.js

@@ -6,6 +6,6 @@
  */
 
 var table_en = {
-  'MuiVirtualizedTable/exportCSV': 'Export to CSV File'
+  'MuiVirtualizedTable/exportCSV': 'Download CSV'
 };
 export default table_en;

package/es/components/translations/table-fr.js

@@ -6,6 +6,6 @@
  */
 
 var table_fr = {
-  'MuiVirtualizedTable/exportCSV': 'Exporter vers un fichier CSV'
+  'MuiVirtualizedTable/exportCSV': 'Télécharger un CSV'
 };
 export default table_fr;

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

@@ -18,10 +18,15 @@ var top_bar_en = {
   'top-bar/language': 'Language',
   'top-bar/customTheme': 'Custom theme',
   'about-dialog/title': 'About',
-  'about-dialog/version': 'Version',
+  '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/git-version': 'Tag'
+  '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

@@ -18,10 +18,15 @@ var top_bar_fr = {
   'top-bar/language': 'Langue',
   'top-bar/customTheme': 'Choix de theme',
   'about-dialog/title': 'À propos',
-  'about-dialog/version': 'Version',
+  '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/git-version': 'Tag'
+  '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/package.json

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