allow for multiple graphs

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,17 @@ const routes = (
     </Route>
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
+    <Route
+      path="/apollo-explorer"
+      element={
+        <ApolloExplorerPage
+          endpoints={[
+            { title: 'Github', graphRef: 'Github-API-ikji88@current' },
+            { title: 'Linear', graphRef: 'Linear-API-jho99t@current' },
+          ]}
+        />
+      }
+    />
   </FlatRoutes>
 );
 

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

@@ -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<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={title} subtitle={subtitle ?? ''} />
-      <Content>
-        <ApolloExplorerReact
-          className={classes.explorer}
-          graphRef={graphRef}
-          persistExplorerState={persistExplorerState}
-          initialState={initialState}
-        />
-      </Content>
-    </Page>
-  );
-};

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<BackstageTheme>(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<string, string>;
+    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 (
+    <div className={classes.root}>
+      <Tabs
+        classes={{ root: classes.tabs }}
+        value={tabIndex}
+        onChange={(_, value) => setTabIndex(value)}
+        indicatorColor="primary"
+      >
+        {endpoints.map(({ title }, index) => (
+          <Tab key={index} label={title} value={index} />
+        ))}
+      </Tabs>
+      <Divider />
+      <Content className={classes.content}>
+        <ApolloExplorer
+          className={classes.explorer}
+          graphRef={endpoints[tabIndex].graphRef}
+          persistExplorerState={endpoints[tabIndex].persistExplorerState}
+          initialState={endpoints[tabIndex].initialState}
+        />
+      </Content>
+    </div>
+  );
+};

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

@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  ApolloEndpointProps,
+  ApolloExplorerBrowser,
+} from '../ApolloExplorerBrowser/ApolloExplorerBrowser';
+
+type Props = {
+  title?: string | undefined;
+  subtitle?: string | undefined;
+  endpoints: ApolloEndpointProps[];
+};
+
+export const ApolloExplorerPage = ({ title, subtitle, endpoints }: Props) => {
+  return (
+    <Page themeId="tool">
+      <Header title={title ?? 'Apollo Explorer 👩‍🚀'} subtitle={subtitle ?? ''} />
+      <Content noPadding>
+        <ApolloExplorerBrowser endpoints={endpoints} />
+      </Content>
+    </Page>
+  );
+};

plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ApolloExplorer } from './ApolloExplorer';
+export { ApolloExplorerPage } from './ApolloExplorerPage';

plugins/apollo-explorer/src/plugin.ts

@@ -31,7 +31,7 @@ export const ApolloExplorerPage = apolloExplorerPlugin.provide(
   createRoutableExtension({
     name: 'ApolloExplorerPage',
     component: () =>
-      import('./components/ApolloExplorer').then(m => m.ApolloExplorer),
+      import('./components/ApolloExplorerPage').then(m => m.ApolloExplorerPage),
     mountPoint: rootRouteRef,
   }),
 );