diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 35c61f2f16..4739b1a380 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,17 @@ const routes = (
} />
} />
+
+ }
+ />
);
diff --git a/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx b/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx
deleted file mode 100644
index 02ab3152f6..0000000000
--- a/plugins/apollo-explorer/src/components/ApolloExplorer/ApolloExplorer.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-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: {
- height: '100%',
- },
-}));
-
-type PluginProps = {
- title?: string;
- subtitle?: string | undefined;
-};
-
-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 (
-
-
-
-
-
-
- );
-};
diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx
new file mode 100644
index 0000000000..bce3ce00bb
--- /dev/null
+++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useState } from 'react';
+import { Divider, makeStyles, Tab, Tabs } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+import { JSONObject } from '@apollo/explorer/src/helpers/types';
+import { ApolloExplorer } from '@apollo/explorer/react';
+import { Content } from '@backstage/core-components';
+
+const useStyles = makeStyles(theme => ({
+ tabs: {
+ background: theme.palette.background.paper,
+ },
+ root: {
+ height: '100%',
+ },
+ content: {
+ height: '100%',
+ },
+ explorer: {
+ height: '95%',
+ },
+}));
+
+export type ApolloEndpointProps = {
+ title: string;
+ graphRef: string;
+ persistExplorerState?: boolean;
+ initialState?: {
+ document?: string;
+ variables?: JSONObject;
+ headers?: Record;
+ displayOptions: {
+ docsPanelState?: 'open' | 'closed';
+ showHeadersAndEnvVars?: boolean;
+ theme?: 'dark' | 'light';
+ };
+ };
+};
+
+type Props = {
+ endpoints: ApolloEndpointProps[];
+};
+
+export const ApolloExplorerBrowser = ({ endpoints }: Props) => {
+ const classes = useStyles();
+ const [tabIndex, setTabIndex] = useState(0);
+
+ return (
+
+
setTabIndex(value)}
+ indicatorColor="primary"
+ >
+ {endpoints.map(({ title }, index) => (
+
+ ))}
+
+
+
+
+
+