From 53c0d19e8de3ec46932d2f5ceb84215b7bf88e52 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sun, 26 Apr 2020 13:38:26 +0200
Subject: [PATCH] plugins/graphiql: use dev-utils to set up dev serve

---
 plugins/graphiql/dev/index.tsx | 76 +++++++++++-----------------------
 plugins/graphiql/package.json  |  1 +
 2 files changed, 26 insertions(+), 51 deletions(-)

diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx
index ed987c1c6a..0dc48f1924 100644
--- a/plugins/graphiql/dev/index.tsx
+++ b/plugins/graphiql/dev/index.tsx
@@ -14,56 +14,30 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
-import HomeIcon from '@material-ui/icons/Home';
-import { ThemeProvider, CssBaseline } from '@material-ui/core';
-import {
-  createApp,
-  SidebarPage,
-  Sidebar,
-  SidebarItem,
-  SidebarSpacer,
-  ApiRegistry,
-} from '@backstage/core';
-import { lightTheme } from '@backstage/theme';
+import { renderPluginsInApp } from '@backstage/dev-utils';
 import { plugin, GraphQLEndpoints, graphQlBrowseApiRef } from '../src';
+import { createApiFactory } from '@backstage/core';
 
-const graphQlBrowseApi = GraphQLEndpoints.from([
-  GraphQLEndpoints.create({
-    id: 'gitlab',
-    title: 'GitLab',
-    url: 'https://gitlab.com/api/graphql',
-  }),
-  GraphQLEndpoints.create({
-    id: 'countries',
-    title: 'Countries',
-    url: 'https://countries.trevorblades.com/',
-  }),
-]);
-
-const app = createApp();
-app.registerApis(ApiRegistry.from([[graphQlBrowseApiRef, graphQlBrowseApi]]));
-app.registerPlugin(plugin);
-const AppComponent = app.build();
-
-const App: FC<{}> = () => {
-  return (
-    <ThemeProvider theme={lightTheme}>
-      <CssBaseline>
-        <BrowserRouter>
-          <SidebarPage>
-            <Sidebar>
-              <SidebarSpacer />
-              <SidebarItem icon={HomeIcon} to="/graphiql" text="Home" />
-            </Sidebar>
-            <AppComponent />
-          </SidebarPage>
-        </BrowserRouter>
-      </CssBaseline>
-    </ThemeProvider>
-  );
-};
-
-ReactDOM.render(<App />, document.getElementById('root'));
+renderPluginsInApp({
+  plugins: [plugin],
+  apis: [
+    createApiFactory({
+      implements: graphQlBrowseApiRef,
+      deps: {},
+      factory() {
+        return GraphQLEndpoints.from([
+          GraphQLEndpoints.create({
+            id: 'gitlab',
+            title: 'GitLab',
+            url: 'https://gitlab.com/api/graphql',
+          }),
+          GraphQLEndpoints.create({
+            id: 'countries',
+            title: 'Countries',
+            url: 'https://countries.trevorblades.com/',
+          }),
+        ]);
+      },
+    }),
+  ],
+});
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index f2cf8b7930..d52957cf84 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@backstage/core": "^0.1.1-alpha.4",
+    "@backstage/dev-utils": "^0.1.1-alpha.4",
     "@backstage/test-utils": "^0.1.1-alpha.4",
     "@backstage/theme": "^0.1.1-alpha.4",
     "@material-ui/core": "^4.9.1",