Merge branch 'master' into rugvip/test-port

plugins/shortcuts/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/plugin-shortcuts
 
+## 0.1.14
+
+### Patch Changes
+
+- f93e56ae3a: Add tooltip to display shortcut title on hover. This should improve the readability of shortcuts with long names, which are cutoff by ellipsis.
+- Updated dependencies
+  - @backstage/core-components@0.7.4
+  - @backstage/core-plugin-api@0.2.0
+
 ## 0.1.13
 
 ### Patch Changes

plugins/shortcuts/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-shortcuts",
   "description": "A Backstage plugin that provides a shortcuts feature to the sidebar",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
@@ -21,8 +21,8 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.7.3",
-    "@backstage/core-plugin-api": "^0.1.13",
+    "@backstage/core-components": "^0.7.4",
+    "@backstage/core-plugin-api": "^0.2.0",
     "@backstage/theme": "^0.2.13",
     "@backstage/types": "^0.1.1",
     "@material-ui/core": "^4.12.2",
@@ -38,10 +38,10 @@
     "zen-observable": "^0.8.15"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.8.2",
-    "@backstage/core-app-api": "^0.1.20",
-    "@backstage/dev-utils": "^0.2.12",
-    "@backstage/test-utils": "^0.1.21",
+    "@backstage/cli": "^0.9.0",
+    "@backstage/core-app-api": "^0.1.22",
+    "@backstage/dev-utils": "^0.2.13",
+    "@backstage/test-utils": "^0.1.22",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",

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}