From 00dccd86b4418381b87e338eb94066fb76f21dc9 Mon Sep 17 00:00:00 2001
From: BOUTIER Charly <charly.boutier@rte-france.com>
Date: Fri, 8 Dec 2023 18:29:41 +0100
Subject: [PATCH 1/2] Fixes ellipsis in the about dialog that could hide the
 module's version.

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
---
 src/components/TopBar/AboutDialog.js | 57 ++++++++++++++++++----------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
index f0199c27..76550ff1 100644
--- a/src/components/TopBar/AboutDialog.js
+++ b/src/components/TopBar/AboutDialog.js
@@ -22,6 +22,7 @@ import {
     Fade,
     Grid,
     Stack,
+    Tooltip,
     Typography,
     useMediaQuery,
     useTheme,
@@ -377,26 +378,44 @@ const Module = ({ type, name, version, license }) => {
                 },
             }}
         >
-            <Stack
-                direction="row"
-                justifyContent="flex-start"
-                alignItems="baseline"
-                spacing={1}
-            >
-                {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
-                <Typography display="inline-block" noWrap>
-                    {name || '<?>'}
-                </Typography>
-                <Typography
-                    variant="caption"
-                    color={(theme) => theme.palette.text.secondary}
-                    display="inline"
-                    marginLeft={1}
-                    noWrap
+            <Tooltip title={(name || '<?>') + ' ' + (version || '')}>
+                <Stack
+                    direction="row"
+                    justifyContent="flex-start"
+                    alignItems="baseline"
+                    spacing={1}
                 >
-                    {version || null}
-                </Typography>
-            </Stack>
+                    <Box
+                        sx={{
+                            flexGrow: 0,
+                            position: 'relative',
+                            top: '4px',
+                            flexShrink: 0,
+                        }}
+                    >
+                        {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
+                    </Box>
+                    <Typography display="inline" noWrap>
+                        {name || '<?>'}
+                    </Typography>
+                    <Box
+                        sx={{
+                            flexGrow: 0,
+                            alignSelf: 'flex-end',
+                            flexShrink: 0,
+                        }}
+                    >
+                        <Typography
+                            variant="caption"
+                            color={(theme) => theme.palette.text.secondary}
+                            display="inline"
+                            noWrap
+                        >
+                            {version || null}
+                        </Typography>
+                    </Box>
+                </Stack>
+            </Tooltip>
         </Grid>
     );
 };

From 596ad7fdfacf0812187262e7489a0c3313732424 Mon Sep 17 00:00:00 2001
From: BOUTIER Charly <charly.boutier@rte-france.com>
Date: Mon, 11 Dec 2023 15:18:00 +0100
Subject: [PATCH 2/2] PR Review

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
---
 src/components/TopBar/AboutDialog.js | 54 ++++++++++++++--------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
index 76550ff1..d24dc1e0 100644
--- a/src/components/TopBar/AboutDialog.js
+++ b/src/components/TopBar/AboutDialog.js
@@ -359,10 +359,24 @@ AboutDialog.propTypes = {
     getAdditionalModules: PropTypes.func,
 };
 
+const style = {
+    icons: {
+        flexGrow: 0,
+        position: 'relative',
+        top: '4px',
+        flexShrink: 0,
+    },
+    version: {
+        flexGrow: 0,
+        alignSelf: 'flex-end',
+        flexShrink: 0,
+    },
+};
+
 const ModuleTypesIcons = {
-    app: <WidgetsOutlined fontSize="small" color="primary" />,
-    server: <DnsOutlined fontSize="small" color="secondary" />,
-    other: <QuestionMark fontSize="small" />,
+    app: <WidgetsOutlined sx={style.icons} fontSize="small" color="primary" />,
+    server: <DnsOutlined sx={style.icons} fontSize="small" color="secondary" />,
+    other: <QuestionMark sx={style.icons} fontSize="small" />,
 };
 
 const Module = ({ type, name, version, license }) => {
@@ -385,35 +399,19 @@ const Module = ({ type, name, version, license }) => {
                     alignItems="baseline"
                     spacing={1}
                 >
-                    <Box
-                        sx={{
-                            flexGrow: 0,
-                            position: 'relative',
-                            top: '4px',
-                            flexShrink: 0,
-                        }}
-                    >
-                        {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
-                    </Box>
+                    {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
                     <Typography display="inline" noWrap>
                         {name || '<?>'}
                     </Typography>
-                    <Box
-                        sx={{
-                            flexGrow: 0,
-                            alignSelf: 'flex-end',
-                            flexShrink: 0,
-                        }}
+                    <Typography
+                        variant="caption"
+                        color={(theme) => theme.palette.text.secondary}
+                        display="inline"
+                        noWrap
+                        sx={style.version}
                     >
-                        <Typography
-                            variant="caption"
-                            color={(theme) => theme.palette.text.secondary}
-                            display="inline"
-                            noWrap
-                        >
-                            {version || null}
-                        </Typography>
-                    </Box>
+                        {version || null}
+                    </Typography>
                 </Stack>
             </Tooltip>
         </Grid>