[enh] Use MUI tooltips for Portal toolbar elements

Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
eclipse-sirius · Feb 12, 2024 · c4a2e23 · c4a2e23
1 parent e989868
commit c4a2e23
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 31 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -103,6 +103,7 @@ In read-only mode, the palette can not be displayed, some of the panel action ar
 - https://github.com/eclipse-sirius/sirius-web/issues/3021[#3021] [sirius-web] Leverage the new Spring Boot APIs to create the sirius-web-starter autoconfiguration
 - https://github.com/eclipse-sirius/sirius-web/issues/3020[#3020] [sirius-web] Simplify the contribution of views in the workbench
 - https://github.com/eclipse-sirius/sirius-web/issues/3066[#3066] [core] The core object-related services now can also find/resolve representations.
+- [portal] Use MUI tooltips for Portal toolbar elements
 
 == v2024.1.0
 

diff --git a/packages/portals/frontend/sirius-components-portals/src/representations/PortalToolbar.tsx b/packages/portals/frontend/sirius-components-portals/src/representations/PortalToolbar.tsx
@@ -13,6 +13,7 @@
 import { ShareRepresentationModal } from '@eclipse-sirius/sirius-components-core';
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
+import Tooltip from '@material-ui/core/Tooltip';
 import EditIcon from '@material-ui/icons/Edit';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
@@ -50,43 +51,43 @@ export const PortalToolbar = ({
     <>
       <Paper data-testid="portal-toolbar">
         {fullscreen ? (
+          <Tooltip title="Exit full screen mode">
+            <IconButton size="small" aria-label="exit full screen mode" onClick={() => setFullscreen(false)}>
+              <FullscreenExitIcon />
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <Tooltip title="Toggle full screen mode">
+            <IconButton size="small" aria-label="toggle full screen mode" onClick={() => setFullscreen(true)}>
+              <FullscreenIcon />
+            </IconButton>
+          </Tooltip>
+        )}
+        <Tooltip title="Share portal">
+          <IconButton size="small" aria-label="share portal" onClick={onShare} data-testid="share">
+            <ShareIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Edit portal configuration">
           <IconButton
             size="small"
-            aria-label="exit full screen mode"
-            title="Exit full screen mode"
-            onClick={() => setFullscreen(false)}>
-            <FullscreenExitIcon />
+            aria-label="edit portal configuration"
+            disabled={portalMode === 'edit' || portalMode === 'read-only'}
+            onClick={() => setPortalMode('edit')}
+            data-testid="portal-edit-portal-mode">
+            <EditIcon />
           </IconButton>
-        ) : (
+        </Tooltip>
+        <Tooltip title="Edit representations">
           <IconButton
             size="small"
-            aria-label="toggle full screen mode"
-            title="Toggle full screen mode"
-            onClick={() => setFullscreen(true)}>
-            <FullscreenIcon />
+            aria-label="edit representations"
+            disabled={portalMode === 'direct' || portalMode === 'read-only'}
+            onClick={() => setPortalMode('direct')}
+            data-testid="portal-edit-representations-mode">
+            <PanToolIcon />
           </IconButton>
-        )}
-        <IconButton size="small" aria-label="share portal" title="Share portal" onClick={onShare} data-testid="share">
-          <ShareIcon />
-        </IconButton>
-        <IconButton
-          size="small"
-          aria-label="edit portal configuration"
-          title="Edit portal configuration"
-          disabled={portalMode === 'edit' || portalMode === 'read-only'}
-          onClick={() => setPortalMode('edit')}
-          data-testid="portal-edit-portal-mode">
-          <EditIcon />
-        </IconButton>
-        <IconButton
-          size="small"
-          aria-label="edit representations"
-          title="Edit representations"
-          disabled={portalMode === 'direct' || portalMode === 'read-only'}
-          onClick={() => setPortalMode('direct')}
-          data-testid="portal-edit-representations-mode">
-          <PanToolIcon />
-        </IconButton>
+        </Tooltip>
       </Paper>
       {modalElement}
     </>