add authCallback to EndpointProps

Signed-off-by: Karl Haworth <karl.haworth@aa.com>

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

@@ -19,10 +19,11 @@ import Divider from '@material-ui/core/Divider';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import { makeStyles } from '@material-ui/core/styles';
-import { JSONObject } from '@apollo/explorer/src/helpers/types';
 import { ApolloExplorer } from '@apollo/explorer/react';
 import { Content } from '@backstage/core-components';
 import { HandleRequest } from '@apollo/explorer/src/helpers/postMessageRelayHelpers';
+import { EndpointProps } from '../ApolloExplorerPage';
+import { useApiHolder } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles(theme => ({
   tabs: {
@@ -39,24 +40,8 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-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[];
+  endpoints: EndpointProps[];
   authCallback?: () => Promise<{ token: string }>;
 };
 
@@ -78,10 +63,18 @@ export const handleAuthRequest = ({
   return handleRequest;
 };
 
-export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => {
+export const ApolloExplorerBrowser = ({ endpoints }: Props) => {
   const classes = useStyles();
   const [tabIndex, setTabIndex] = useState(0);
 
+  const apiHolder = useApiHolder();
+
+  const getAuthCallback = (index: number) => {
+    const authCallback = endpoints[index].authCallback;
+    if (authCallback === undefined) return undefined;
+    return () => authCallback({ apiHolder });
+  };
+
   return (
     <div className={classes.root}>
       <Tabs
@@ -100,7 +93,7 @@ export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => {
           className={classes.explorer}
           graphRef={endpoints[tabIndex].graphRef}
           handleRequest={handleAuthRequest({
-            authCallback: authCallback,
+            authCallback: getAuthCallback(tabIndex),
           })}
           persistExplorerState={endpoints[tabIndex].persistExplorerState}
           initialState={endpoints[tabIndex].initialState}

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

@@ -18,7 +18,7 @@ import React from 'react';
 import { Content, Header, Page } from '@backstage/core-components';
 import { ApolloExplorerBrowser } from '../ApolloExplorerBrowser';
 import { JSONObject } from '@apollo/explorer/src/helpers/types';
-import { ApiHolder, useApiHolder } from '@backstage/core-plugin-api';
+import { ApiHolder } from '@backstage/core-plugin-api';
 
 /**
  * Export types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}.
@@ -28,6 +28,7 @@ import { ApiHolder, useApiHolder } from '@backstage/core-plugin-api';
 export type EndpointProps = {
   title: string;
   graphRef: string;
+  authCallback?: AuthCallback;
   persistExplorerState?: boolean;
   initialState?: {
     document?: string;
@@ -54,24 +55,16 @@ type Props = {
   title?: string | undefined;
   subtitle?: string | undefined;
   endpoints: EndpointProps[];
-  authCallback?: AuthCallback;
 };
 
 export const ApolloExplorerPage = (props: Props) => {
-  const { title, subtitle, endpoints, authCallback } = props;
-
-  const apiHolder = useApiHolder();
+  const { title, subtitle, endpoints } = props;
 
   return (
     <Page themeId="tool">
       <Header title={title ?? 'Apollo Explorer 👩‍🚀'} subtitle={subtitle ?? ''} />
       <Content noPadding>
-        <ApolloExplorerBrowser
-          endpoints={endpoints}
-          authCallback={
-            authCallback ? () => authCallback({ apiHolder }) : undefined
-          }
-        />
+        <ApolloExplorerBrowser endpoints={endpoints} />
       </Content>
     </Page>
   );