From 97b59b5821839dfc4d111e8f323c20fff711b139 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Wed, 10 Mar 2021 11:08:17 +0100
Subject: [PATCH] graphiql: migrate to use plugin-api

Co-authored-by: Juan Lulkin <jmaiz@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/graphiql/dev/index.tsx                         |  4 +++-
 plugins/graphiql/package.json                          |  1 +
 .../src/components/GraphiQLPage/GraphiQLPage.tsx       | 10 ++--------
 plugins/graphiql/src/lib/api/GraphQLEndpoints.ts       |  2 +-
 plugins/graphiql/src/lib/api/types.ts                  |  3 +--
 plugins/graphiql/src/plugin.ts                         |  2 +-
 plugins/graphiql/src/route-refs.tsx                    |  7 ++-----
 7 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx
index 918695e0e0..7a50ed1afc 100644
--- a/plugins/graphiql/dev/index.tsx
+++ b/plugins/graphiql/dev/index.tsx
@@ -16,7 +16,8 @@
 
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { githubAuthApiRef, errorApiRef } from '@backstage/core';
+import { githubAuthApiRef, errorApiRef } from '@backstage/plugin-api';
+import GraphiQLIcon from '../src/assets/graphiql.icon.svg';
 import {
   graphiqlPlugin,
   GraphQLEndpoints,
@@ -55,6 +56,7 @@ createDevApp()
   })
   .addPage({
     title: 'GraphiQL',
+    icon: GraphiQLIcon,
     element: <GraphiQLPage />,
   })
   .render();
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index 54f7b076c8..8e3ec7f4dd 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@backstage/core": "^0.7.11",
+    "@backstage/plugin-api": "^0.1.0",
     "@backstage/theme": "^0.2.7",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
index 224def1d78..37522ebe41 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
@@ -14,14 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import {
-  Content,
-  Header,
-  HeaderLabel,
-  Page,
-  Progress,
-  useApi,
-} from '@backstage/core';
+import { Content, Header, HeaderLabel, Page, Progress } from '@backstage/core';
+import { useApi } from '@backstage/plugin-api';
 import { useAsync } from 'react-use';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';
diff --git a/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts b/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts
index 23a9e9e697..2f0e86ca7e 100644
--- a/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts
+++ b/plugins/graphiql/src/lib/api/GraphQLEndpoints.ts
@@ -15,7 +15,7 @@
  */
 
 import { GraphQLBrowseApi, GraphQLEndpoint } from './types';
-import { ErrorApi, OAuthApi } from '@backstage/core';
+import { ErrorApi, OAuthApi } from '@backstage/plugin-api';
 
 // Helper for generic http endpoints
 export type EndpointConfig = {
diff --git a/plugins/graphiql/src/lib/api/types.ts b/plugins/graphiql/src/lib/api/types.ts
index dad06b8359..b968989d96 100644
--- a/plugins/graphiql/src/lib/api/types.ts
+++ b/plugins/graphiql/src/lib/api/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { createApiRef } from '@backstage/core';
+import { createApiRef } from '@backstage/plugin-api';
 
 export type GraphQLEndpoint = {
   // Will be used as unique key for storing history and query data
@@ -35,5 +35,4 @@ export type GraphQLBrowseApi = {
 
 export const graphQlBrowseApiRef = createApiRef<GraphQLBrowseApi>({
   id: 'plugin.graphiql.browse',
-  description: 'Used to supply GraphQL endpoints for browsing',
 });
diff --git a/plugins/graphiql/src/plugin.ts b/plugins/graphiql/src/plugin.ts
index 42969999d9..7cf9e443c6 100644
--- a/plugins/graphiql/src/plugin.ts
+++ b/plugins/graphiql/src/plugin.ts
@@ -18,7 +18,7 @@ import {
   createPlugin,
   createApiFactory,
   createRoutableExtension,
-} from '@backstage/core';
+} from '@backstage/plugin-api';
 import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
 import { graphiQLRouteRef } from './route-refs';
 
diff --git a/plugins/graphiql/src/route-refs.tsx b/plugins/graphiql/src/route-refs.tsx
index 3e8d1d3a9c..8806bed826 100644
--- a/plugins/graphiql/src/route-refs.tsx
+++ b/plugins/graphiql/src/route-refs.tsx
@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import { createRouteRef } from '@backstage/core';
-import GraphiQLIcon from './assets/graphiql.icon.svg';
+import { createRouteRef } from '@backstage/plugin-api';
 
 export const graphiQLRouteRef = createRouteRef({
-  icon: GraphiQLIcon,
-  path: '/graphiql',
-  title: 'GraphiQL',
+  id: 'graphiql-root',
 });