From f93e56ae3a55a1cc29e072fbc27de99f6725e711 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 17 Nov 2021 15:52:40 +0100
Subject: [PATCH] Add tooltips to shortcuts

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .changeset/sweet-suits-sit.md          |  5 ++++
 plugins/shortcuts/src/ShortcutItem.tsx | 34 ++++++++++++++------------
 2 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/sweet-suits-sit.md

diff --git a/.changeset/sweet-suits-sit.md b/.changeset/sweet-suits-sit.md
new file mode 100644
index 0000000000..b6f7fbadf5
--- /dev/null
+++ b/.changeset/sweet-suits-sit.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-shortcuts': patch
+---
+
+Add tooltip to display shortcut title on hover. This should improve the readability of shortcuts with long names, which are cutoff by ellipsis.
diff --git a/plugins/shortcuts/src/ShortcutItem.tsx b/plugins/shortcuts/src/ShortcutItem.tsx
index d2ac716737..8ba1a96358 100644
--- a/plugins/shortcuts/src/ShortcutItem.tsx
+++ b/plugins/shortcuts/src/ShortcutItem.tsx
@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { IconButton, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import EditIcon from '@material-ui/icons/Edit';
 import { ShortcutIcon } from './ShortcutIcon';
 import { EditShortcut } from './EditShortcut';
@@ -76,21 +78,23 @@ export const ShortcutItem = ({ shortcut, api }: Props) => {
 
   return (
     <>
-      <SidebarItem
-        className={classes.root}
-        to={shortcut.url}
-        text={shortcut.title}
-        icon={() => <ShortcutIcon text={text} color={color} />}
-      >
-        <IconButton
-          id="edit"
-          data-testid="edit"
-          onClick={handleClick}
-          className={classes.button}
+      <Tooltip title={shortcut.title} enterDelay={500}>
+        <SidebarItem
+          className={classes.root}
+          to={shortcut.url}
+          text={shortcut.title}
+          icon={() => <ShortcutIcon text={text} color={color} />}
         >
-          <EditIcon className={classes.icon} />
-        </IconButton>
-      </SidebarItem>
+          <IconButton
+            id="edit"
+            data-testid="edit"
+            onClick={handleClick}
+            className={classes.button}
+          >
+            <EditIcon className={classes.icon} />
+          </IconButton>
+        </SidebarItem>
+      </Tooltip>
       <EditShortcut
         onClose={handleClose}
         anchorEl={anchorEl}