plugins/graphiql: use dev-utils to set up dev serve

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/',
+          }),
+        ]);
+      },
+    }),
+  ],
+});

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",