review

gridsuite · Nov 30, 2023 · b3fd448 · b3fd448
1 parent ce479aa
commit b3fd448
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 27 deletions.
diff --git a/src/components/TopBar/AboutDialog.d.ts b/src/components/TopBar/AboutDialog.d.ts
@@ -23,7 +23,7 @@ export const AboutDialog: FunctionComponent<{
     appVersion?: string;
     appLicense?: string;
     getGlobalVersion?: (setVersion: React.SetStateAction<string>) => void;
-    getLogoThemed?: (themeMode: PaletteMode) => React.ReactElement;
+    logo?: React.ReactElement;
     getAdditionalComponents?: (setComponents: React.SetStateAction<AboutAdditionalComponent[]>) => void;
 }>;
 

diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
     Alert,
     AlertTitle,
@@ -71,7 +71,7 @@ const AboutDialog = ({
     open,
     onClose,
     getGlobalVersion,
-    getLogoThemed,
+    logo,
     appName,
     appVersion,
     appLicense,
@@ -80,14 +80,6 @@ const AboutDialog = ({
     const theme = useTheme();
 
     //TODO is useCallback in component or in caller?
-    const logo = useMemo(() => {
-        if (getLogoThemed) {
-            return getLogoThemed(theme.palette.mode);
-        } else {
-            return <BrokenImage />;
-        }
-    }, [getLogoThemed, theme.palette.mode]);
-
     const handlerGetGlobalVersion = useCallback(getGlobalVersion, [
         getGlobalVersion,
     ]);
@@ -123,7 +115,6 @@ const AboutDialog = ({
     const [additionalComponents, setAdditionalComponents] = useState(null);
     useEffect(() => {
         if (open) {
-            //
             const currentApp = {
                 name: `Grid${appName}`,
                 type: 'app',
@@ -181,15 +172,15 @@ const AboutDialog = ({
                         justifyContent: 'center',
                     }}
                 >
-                    {logo}
+                    {logo || <BrokenImage />}
                 </Box>
                 <Box component="p">
                     <FormattedMessage
                         id="about-dialog/deploy"
                         values={{
                             version: loadingGlobalVersion
                                 ? '…'
-                                : actualGlobalVersion || '?unknown?',
+                                : actualGlobalVersion || <i>unknown</i>,
                         }}
                     />
                     <Fade
@@ -327,7 +318,6 @@ const AboutDialog = ({
                                                                 variant="filled"
                                                                 size="small"
                                                                 label={
-                                                                    'License: ' +
                                                                     cmpnt.license
                                                                 }
                                                             />
@@ -361,6 +351,6 @@ AboutDialog.propTypes = {
     appVersion: PropTypes.string,
     appLicense: PropTypes.string,
     getGlobalVersion: PropTypes.func,
-    getLogoThemed: PropTypes.func,
+    logo: PropTypes.element,
     getAdditionalComponents: PropTypes.func,
 };
diff --git a/src/components/TopBar/TopBar.js b/src/components/TopBar/TopBar.js
@@ -5,7 +5,7 @@
  * 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 {
@@ -284,13 +284,26 @@ const TopBar = ({
         }
     }, [user, withElementsSearch, searchDisabled]);
 
-    const logo = (
-        <LogoWithText
-            onClick={onLogoClick}
-            appLogo={appLogo}
-            appName={appName}
-            appColor={appColor}
-        />
+    const logo = useMemo(
+        () => (
+            <LogoWithText
+                appLogo={appLogo}
+                appName={appName}
+                appColor={appColor}
+            />
+        ),
+        [appLogo, appName, appColor]
+    );
+    const logo_clickable = useMemo(
+        () => (
+            <LogoWithText
+                onClick={onLogoClick}
+                appLogo={appLogo}
+                appName={appName}
+                appColor={appColor}
+            />
+        ),
+        [onLogoClick, appLogo, appName, appColor]
     );
 
     return (
@@ -303,7 +316,7 @@ const TopBar = ({
                 }
             />
             <Toolbar>
-                {logo}
+                {logo_clickable}
                 <Box sx={styles.grow}>{children}</Box>
                 {user && withElementsSearch && (
                     <React.Fragment>
@@ -751,7 +764,7 @@ const TopBar = ({
                     appVersion={appVersion}
                     appLicense={appLicense}
                     getGlobalVersion={getGlobalVersion}
-                    getLogoThemed={(mode) => logo}
+                    logo={logo}
                     getAdditionalComponents={getAdditionalComponents}
                 />
             </Toolbar>

diff --git a/src/components/translations/top-bar-fr.js b/src/components/translations/top-bar-fr.js
@@ -23,7 +23,7 @@ const top_bar_fr = {
     'about-dialog/alert-running-old-version-title':
         "Ancienne version de l'application",
     'about-dialog/alert-running-old-version-content':
-        "Une nouvelle version de l'environnement à été détecté.\nVeuillez rafraîchir l'application pour charger la dernière version",
+        "Une nouvelle version de l'environnement a été détectée.\nVeuillez rafraîchir l'application pour charger la dernière version",
     'about-dialog/license': 'Licence',
     'about-dialog/components-version': 'Composants:',
     'about-dialog/git-version': 'Tag',