use authcallback method instead

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

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

@@ -19,6 +19,8 @@ import { Divider, makeStyles, Tab, Tabs } from '@material-ui/core';
 import { JSONObject } from '@apollo/explorer/src/helpers/types';
 import { ApolloExplorer } from '@apollo/explorer/react';
 import { Content } from '@backstage/core-components';
+import { ApiHolder } from '@backstage/core-plugin-api';
+import { HandleRequest } from '@apollo/explorer/src/helpers/postMessageRelayHelpers';
 
 const useStyles = makeStyles(theme => ({
   tabs: {
@@ -53,9 +55,42 @@ export type ApolloEndpointProps = {
 
 type Props = {
   endpoints: ApolloEndpointProps[];
+  authCallback?: () => Promise<string>;
+  apiHolder?: ApiHolder;
 };
 
-export const ApolloExplorerBrowser = ({ endpoints }: Props) => {
+export const handleAuthRequest = ({
+  legacyIncludeCookies,
+  authCallback,
+}: {
+  legacyIncludeCookies?: boolean;
+  authCallback: any;
+}): HandleRequest => {
+  let cookies = {};
+  if (legacyIncludeCookies) {
+    cookies = { credentials: 'include' };
+  } else if (legacyIncludeCookies !== undefined) {
+    cookies = { credentials: 'omit' };
+  } else {
+    cookies = {};
+  }
+
+  const handleRequestWithCookiePref: HandleRequest = async (
+    endpointUrl,
+    options,
+  ) =>
+    fetch(endpointUrl, {
+      ...options,
+      headers: {
+        ...options.headers,
+        Authorization: `Bearer ${await authCallback({})}`,
+      },
+      ...cookies,
+    });
+  return handleRequestWithCookiePref;
+};
+
+export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => {
   const classes = useStyles();
   const [tabIndex, setTabIndex] = useState(0);
 
@@ -76,6 +111,14 @@ export const ApolloExplorerBrowser = ({ endpoints }: Props) => {
         <ApolloExplorer
           className={classes.explorer}
           graphRef={endpoints[tabIndex].graphRef}
+          handleRequest={
+            authCallback
+              ? handleAuthRequest({
+                  legacyIncludeCookies: false,
+                  authCallback: authCallback,
+                })
+              : undefined
+          }
           persistExplorerState={endpoints[tabIndex].persistExplorerState}
           initialState={endpoints[tabIndex].initialState}
         />

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

@@ -19,9 +19,6 @@ 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 useAsync from 'react-use/lib/useAsync';
-import { CircularProgress } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
 
 /**
  * Export types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}.
@@ -44,34 +41,30 @@ export type EndpointProps = {
   };
 };
 
-type EndpointPropsCallback = (options: {
+export type authCallback = (options: {
   apiHolder: ApiHolder;
-}) => Promise<EndpointProps[]>;
+}) => Promise<string>;
 
 type Props = {
   title?: string | undefined;
   subtitle?: string | undefined;
-  endpoints: EndpointProps[] | EndpointPropsCallback;
+  endpoints: EndpointProps[];
+  authCallback: authCallback;
 };
 
 export const ApolloExplorerPage = (props: Props) => {
-  const { title, subtitle, endpoints } = props;
-  const apiHolder = useApiHolder();
+  const { title, subtitle, endpoints, authCallback } = props;
 
-  const { value, loading, error } = useAsync(async () => {
-    if (typeof endpoints === 'function') {
-      return await endpoints({ apiHolder });
-    }
-    return endpoints;
-  }, []);
+  const apiHolder = useApiHolder();
 
   return (
     <Page themeId="tool">
       <Header title={title ?? 'Apollo Explorer 👩‍🚀'} subtitle={subtitle ?? ''} />
       <Content noPadding>
-        {loading && <CircularProgress style={{ padding: 5 }} />}
-        {error && <Alert severity="error">{error?.message}</Alert>}
-        {value && <ApolloExplorerBrowser endpoints={value} />}
+        <ApolloExplorerBrowser
+          endpoints={endpoints}
+          authCallback={() => authCallback({ apiHolder })}
+        />
       </Content>
     </Page>
   );