added extra proprs

Signed-off-by: Ryan Brink <5607577+unredundant@users.noreply.github.com>

packages/app/src/App.tsx

@@ -98,6 +98,7 @@ import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
+import { ApolloExplorerPage } from '@backstage/plugin-apollo-explorer';
 
 const app = createApp({
   apis,
@@ -239,6 +240,10 @@ const routes = (
     </Route>
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
+    <Route
+      path="/apollo-explorer"
+      element={<ApolloExplorerPage graphRef="Github-API-ikji88@current" />}
+    />
   </FlatRoutes>
 );
 

plugins/apollo-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-apollo-explorer",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx

@@ -15,9 +15,10 @@
  */
 
 import React from 'react';
-import { Content, Header, HeaderLabel, Page } from '@backstage/core-components';
+import { Content, Header, Page } from '@backstage/core-components';
 import { ApolloExplorer as ApolloExplorerReact } from '@apollo/explorer/react';
 import { makeStyles } from '@material-ui/core';
+import { JSONObject } from '@apollo/explorer/src/helpers/types';
 
 const useStyles = makeStyles(() => ({
   explorer: {
@@ -25,23 +26,45 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-type Props = {
-  graphRef: string;
+type PluginProps = {
+  title?: string;
+  subtitle?: string | undefined;
 };
 
-export const ApolloExplorer = ({ graphRef }: Props) => {
+type GraphProps = {
+  graphRef: string;
+  persistExplorerState?: boolean;
+  initialState?: {
+    document?: string;
+    variables?: JSONObject;
+    headers?: Record<string, string>;
+    displayOptions: {
+      docsPanelState?: 'open' | 'closed';
+      showHeadersAndEnvVars?: boolean;
+      theme?: 'dark' | 'light';
+    };
+  };
+};
+
+type Props = PluginProps & GraphProps;
+
+export const ApolloExplorer = ({
+  graphRef,
+  persistExplorerState = true,
+  initialState,
+  title = 'Welcome to the Apollo Explorer 👩‍🚀',
+  subtitle,
+}: Props) => {
   const classes = useStyles();
   return (
     <Page themeId="tool">
-      <Header title="Welcome to apollo-explorer!" subtitle="Optional subtitle">
-        <HeaderLabel label="Owner" value="Team X" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
+      <Header title={title} subtitle={subtitle ?? ''} />
       <Content>
         <ApolloExplorerReact
           className={classes.explorer}
           graphRef={graphRef}
-          persistExplorerState
+          persistExplorerState={persistExplorerState}
+          initialState={initialState}
         />
       </Content>
     </Page>