graphiql: finalize composability port

plugins/graphiql/dev/index.tsx

@@ -14,12 +14,18 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { githubAuthApiRef, errorApiRef } from '@backstage/core';
-import { plugin, GraphQLEndpoints, graphQlBrowseApiRef } from '../src';
+import {
+  graphiqlPlugin,
+  GraphQLEndpoints,
+  graphQlBrowseApiRef,
+  GraphiQLPage,
+} from '../src';
 
 createDevApp()
-  .registerPlugin(plugin)
+  .registerPlugin(graphiqlPlugin)
   .registerApi({
     api: graphQlBrowseApiRef,
     deps: {
@@ -47,4 +53,8 @@ createDevApp()
       ]);
     },
   })
+  .addPage({
+    title: 'GraphiQL',
+    element: <GraphiQLPage />,
+  })
   .render();

plugins/graphiql/src/index.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-export { plugin, GraphiQLPage } from './plugin';
+export {
+  graphiqlPlugin,
+  graphiqlPlugin as plugin,
+  GraphiQLPage,
+} from './plugin';
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';

plugins/graphiql/src/plugin.test.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { graphiqlPlugin } from './plugin';
 
 describe('graphiql', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(graphiqlPlugin).toBeDefined();
   });
 });

plugins/graphiql/src/plugin.ts

@@ -22,7 +22,7 @@ import {
 import { graphQlBrowseApiRef, GraphQLEndpoints } from './lib/api';
 import { graphiQLRouteRef } from './route-refs';
 
-export const plugin = createPlugin({
+export const graphiqlPlugin = createPlugin({
   id: 'graphiql',
   apis: [
     // GitLab is used as an example endpoint, but most will want to plug in
@@ -40,7 +40,7 @@ export const plugin = createPlugin({
   ],
 });
 
-export const GraphiQLPage = plugin.provide(
+export const GraphiQLPage = graphiqlPlugin.provide(
   createRoutableExtension({
     component: () => import('./components').then(m => m.GraphiQLPage),
     mountPoint: graphiQLRouteRef,