feat(apollo-explorer): allow callbacks using apiholder

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

plugins/apollo-explorer/package.json

@@ -36,7 +36,9 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@material-ui/core": "^4.12.2",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-use": "^17.5.0",
     "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {

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

@@ -18,6 +18,10 @@ 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 { useAsync } from 'react-use';
+import { CircularProgress } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 
 type EndpointProps = {
   title: string;
@@ -35,19 +39,34 @@ type EndpointProps = {
   };
 };
 
+type EndpointPropsCallback = (options: {
+  apiHolder: ApiHolder;
+}) => Promise<EndpointProps[]>;
+
 type Props = {
   title?: string | undefined;
   subtitle?: string | undefined;
-  endpoints: EndpointProps[];
+  endpoints: EndpointProps[] | EndpointPropsCallback;
 };
 
 export const ApolloExplorerPage = (props: Props) => {
   const { title, subtitle, endpoints } = props;
+  const apiHolder = useApiHolder();
+
+  const { value, loading, error } = useAsync(async () => {
+    if (typeof endpoints === 'function') {
+      return await endpoints({ apiHolder });
+    }
+    return endpoints;
+  }, []);
+
   return (
     <Page themeId="tool">
       <Header title={title ?? 'Apollo Explorer 👩‍🚀'} subtitle={subtitle ?? ''} />
       <Content noPadding>
-        <ApolloExplorerBrowser endpoints={endpoints} />
+        {loading && <CircularProgress style={{ padding: 5 }} />}
+        {error && <Alert severity="error">{error?.message}</Alert>}
+        {value && <ApolloExplorerBrowser endpoints={value} />}
       </Content>
     </Page>
   );

yarn.lock

@@ -4676,10 +4676,12 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@material-ui/core": ^4.12.2
+    "@material-ui/lab": ^4.0.0-alpha.61
     "@testing-library/dom": ^9.0.0
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
+    react-use: ^17.5.0
     use-deep-compare-effect: ^1.8.1
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -40267,7 +40269,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-use@npm:^17.2.4, react-use@npm:^17.3.1, react-use@npm:^17.3.2, react-use@npm:^17.4.0":
+"react-use@npm:^17.2.4, react-use@npm:^17.3.1, react-use@npm:^17.3.2, react-use@npm:^17.4.0, react-use@npm:^17.5.0":
   version: 17.5.0
   resolution: "react-use@npm:17.5.0"
   dependencies: