diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 35c61f2f16..96c4950128 100644
--- a/packages/app/src/App.tsx
+++ b/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 = (
} />
} />
+ }
+ />
);
diff --git a/plugins/apollo-explorer/package.json b/plugins/apollo-explorer/package.json
index 9d8f2037ba..a3c200ac4e 100644
--- a/plugins/apollo-explorer/package.json
+++ b/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",
diff --git a/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx b/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx
index e36a421ab6..02ab3152f6 100644
--- a/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx
+++ b/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;
+ 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 (
-
+