From c52ae0a73b1b629b85ba47aa7d94c5396b9c8cf7 Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Thu, 13 Jan 2022 17:09:44 -0500
Subject: [PATCH] feat(shortcuts): make sidebar item icon configurable

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/smart-windows-watch.md   |  5 +++++
 plugins/shortcuts/api-report.md     |  9 ++++++++-
 plugins/shortcuts/src/Shortcuts.tsx | 15 ++++++++++++---
 plugins/shortcuts/src/index.ts      |  1 +
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/smart-windows-watch.md

diff --git a/.changeset/smart-windows-watch.md b/.changeset/smart-windows-watch.md
new file mode 100644
index 0000000000..f2e15c0569
--- /dev/null
+++ b/.changeset/smart-windows-watch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-shortcuts': patch
+---
+
+Allow shortcut side bar item icon to be configurable
diff --git a/plugins/shortcuts/api-report.md b/plugins/shortcuts/api-report.md
index d85d427c99..4b5a8e74df 100644
--- a/plugins/shortcuts/api-report.md
+++ b/plugins/shortcuts/api-report.md
@@ -7,6 +7,7 @@
 
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { IconComponent } from '@backstage/core-plugin-api';
 import { Observable } from '@backstage/types';
 import ObservableImpl from 'zen-observable';
 import { StorageApi } from '@backstage/core-plugin-api';
@@ -51,7 +52,7 @@ export interface ShortcutApi {
 // Warning: (ae-missing-release-tag) "Shortcuts" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Shortcuts: () => JSX.Element;
+export const Shortcuts: (props: ShortcutsProps) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "shortcutsApiRef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -62,4 +63,10 @@ export const shortcutsApiRef: ApiRef<ShortcutApi>;
 //
 // @public (undocumented)
 export const shortcutsPlugin: BackstagePlugin<{}, {}>;
+
+// @public
+export interface ShortcutsProps {
+  // (undocumented)
+  icon?: IconComponent;
+}
 ```
diff --git a/plugins/shortcuts/src/Shortcuts.tsx b/plugins/shortcuts/src/Shortcuts.tsx
index 8b7e1628d3..b8af1f2e29 100644
--- a/plugins/shortcuts/src/Shortcuts.tsx
+++ b/plugins/shortcuts/src/Shortcuts.tsx
@@ -26,9 +26,18 @@ import {
   SidebarItem,
   SidebarScrollWrapper,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { IconComponent, useApi } from '@backstage/core-plugin-api';
 
-export const Shortcuts = () => {
+/**
+ * ShortcutsProps
+ * Props for the {@link Shortcuts} component.
+ * @public
+ */
+export interface ShortcutsProps {
+  icon?: IconComponent;
+}
+
+export const Shortcuts = (props: ShortcutsProps) => {
   const shortcutApi = useApi(shortcutsApiRef);
   const shortcuts = useObservable(
     useMemo(() => shortcutApi.shortcut$(), [shortcutApi]),
@@ -47,7 +56,7 @@ export const Shortcuts = () => {
   return (
     <SidebarScrollWrapper>
       <SidebarItem
-        icon={PlayListAddIcon}
+        icon={props.icon ?? PlayListAddIcon}
         text="Add Shortcuts"
         onClick={handleClick}
       />
diff --git a/plugins/shortcuts/src/index.ts b/plugins/shortcuts/src/index.ts
index 40b902798b..b47c94b7b1 100644
--- a/plugins/shortcuts/src/index.ts
+++ b/plugins/shortcuts/src/index.ts
@@ -23,3 +23,4 @@
 export { shortcutsPlugin, Shortcuts } from './plugin';
 export * from './api';
 export type { Shortcut } from './types';
+export type { ShortcutsProps } from './Shortcuts';