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 ( -
- - -
+