From 09eb54e01430a973bb6ab04bc08e4459fd3e95d4 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 10 Mar 2021 15:51:47 +0100
Subject: [PATCH] graphiql,app: export icon and avoid routeRef usage in
 SidebarItem

Co-authored-by: Juan Lulkin <jmaiz@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/dirty-flowers-fail.md          | 5 +++++
 packages/app/src/components/Root/Root.tsx | 8 ++------
 plugins/graphiql/src/index.ts             | 4 ++++
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/dirty-flowers-fail.md

diff --git a/.changeset/dirty-flowers-fail.md b/.changeset/dirty-flowers-fail.md
new file mode 100644
index 0000000000..4a3baabcb4
--- /dev/null
+++ b/.changeset/dirty-flowers-fail.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphiql': patch
+---
+
+Export `GraphiQLIcon`.
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 80706fe459..7c33113e83 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -36,7 +36,7 @@ import {
   SidebarSpace,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
-import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
+import { GraphiQLIcon } from '@backstage/plugin-graphiql';
 import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 import { SidebarSearch } from '@backstage/plugin-search';
 
@@ -90,11 +90,7 @@ const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
       <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
       <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-      <SidebarItem
-        icon={graphiQLRouteRef.icon!}
-        to={graphiQLRouteRef.path}
-        text={graphiQLRouteRef.title}
-      />
+      <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarSettings />
diff --git a/plugins/graphiql/src/index.ts b/plugins/graphiql/src/index.ts
index ed64779eba..10149e37a2 100644
--- a/plugins/graphiql/src/index.ts
+++ b/plugins/graphiql/src/index.ts
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import { IconComponent } from '@backstage/core';
+import GraphiQLIconComponent from './assets/graphiql.icon.svg';
+
 export {
   graphiqlPlugin,
   graphiqlPlugin as plugin,
@@ -22,3 +25,4 @@ export {
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';
+export const GraphiQLIcon: IconComponent = GraphiQLIconComponent;