From 5a477ce8344c98cf6fe4c51a4d35be6a0e5a3168 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 14:05:49 -0500 Subject: [PATCH 01/29] feat(apollo-explorer): allow callbacks using apiholder Signed-off-by: Karl Haworth --- plugins/apollo-explorer/package.json | 2 ++ .../ApolloExplorerPage/ApolloExplorerPage.tsx | 23 +++++++++++++++++-- yarn.lock | 4 +++- 3 files changed, 26 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/package.json b/plugins/apollo-explorer/package.json index cd7b3e6b51..563b16f951 100644 --- a/plugins/apollo-explorer/package.json +++ b/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": { diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index f90af9bc17..f6bda693b5 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/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; + 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 (
- + {loading && } + {error && {error?.message}} + {value && } ); diff --git a/yarn.lock b/yarn.lock index eb05400306..edfc9eadb9 100644 --- a/yarn.lock +++ b/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: From c664b15b37f937d7e93105b72d7b29484d2b61a2 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 14:11:42 -0500 Subject: [PATCH 02/29] add changeset Signed-off-by: Karl Haworth --- .changeset/warm-pugs-pretend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/warm-pugs-pretend.md diff --git a/.changeset/warm-pugs-pretend.md b/.changeset/warm-pugs-pretend.md new file mode 100644 index 0000000000..f7adea6cc0 --- /dev/null +++ b/.changeset/warm-pugs-pretend.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-apollo-explorer': minor +--- + +feat(apollo-explorer): allow callbacks using apiholder From 626cf35c1806a504a2f0b1d26977e7bab56a9926 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 14:19:38 -0500 Subject: [PATCH 03/29] update readme for functionality improvements Signed-off-by: Karl Haworth --- plugins/apollo-explorer/README.md | 38 +++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index 23ea71e934..71cb76c592 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -69,3 +69,41 @@ That's it! You should now see an `Apollo Explorer` item in your sidebar, and if Once you authenticate, your graph is ready to use 🚀 ![Logged In](./docs/img/logged-in.png) + +### Authentication Tokens for Apollo Studio + +If you need to utilize an ApiRef to supply a token to Apollo, you may do so using an ApiHolder. + +In `packages/app/src/App.tsx` perform the following modifications from above. The import `ssoAuthApiRef` is used as an example + +```typescript +import { ApolloExplorerPage, EndpointProps } from '@backstage/plugin-apollo-explorer'; +import { ssoAuthApiRef } from '@backstage/devkit'; +import { ApiHolder } from '@backstage/core-plugin-api'; + + +async function apolloPluginEndpointsCallback(options: { apiHolder: ApiHolder }): Promise { + const sso = options.apiHolder.get(ssoAuthApiRef) + return [{ + title: 'Github', + graphRef: 'my-github-graph-ref@current', + initialState: { + headers: { + authorization: `Bearer ${await sso.getToken()}`, + }, + }, + }] +} + +const routes = ( + + {/* other routes... */} + + } + /> +``` From b90857e2ffc59fe823592d489fffad21c65db65e Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 14:19:55 -0500 Subject: [PATCH 04/29] add exports to reduce duplication Signed-off-by: Karl Haworth --- .../apollo-explorer/src/components/ApolloExplorerPage/index.ts | 1 + plugins/apollo-explorer/src/index.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts index 8f62872fe6..0ecfb16ee5 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { ApolloExplorerPage } from './ApolloExplorerPage'; +export type { EndpointProps } from './components/ApolloExplorerPage'; diff --git a/plugins/apollo-explorer/src/index.ts b/plugins/apollo-explorer/src/index.ts index 565557e79f..6d0be1311f 100644 --- a/plugins/apollo-explorer/src/index.ts +++ b/plugins/apollo-explorer/src/index.ts @@ -20,3 +20,4 @@ * @packageDocumentation */ export { apolloExplorerPlugin, ApolloExplorerPage } from './plugin'; +export type { EndpointProps } from './ApolloExplorerPage'; From 7a408f720b5e4e29131b04eaa41f0d1dfe3a7a06 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 14:24:09 -0500 Subject: [PATCH 05/29] update exports Signed-off-by: Karl Haworth --- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 2 +- .../apollo-explorer/src/components/ApolloExplorerPage/index.ts | 2 +- plugins/apollo-explorer/src/index.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index f6bda693b5..bb94c69063 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -23,7 +23,7 @@ import { useAsync } from 'react-use'; import { CircularProgress } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -type EndpointProps = { +export type EndpointProps = { title: string; graphRef: string; persistExplorerState?: boolean; diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts index 0ecfb16ee5..1eef091978 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { ApolloExplorerPage } from './ApolloExplorerPage'; -export type { EndpointProps } from './components/ApolloExplorerPage'; +export type { EndpointProps } from './ApolloExplorerPage'; diff --git a/plugins/apollo-explorer/src/index.ts b/plugins/apollo-explorer/src/index.ts index 6d0be1311f..5911e246f0 100644 --- a/plugins/apollo-explorer/src/index.ts +++ b/plugins/apollo-explorer/src/index.ts @@ -20,4 +20,4 @@ * @packageDocumentation */ export { apolloExplorerPlugin, ApolloExplorerPage } from './plugin'; -export type { EndpointProps } from './ApolloExplorerPage'; +export type { EndpointProps } from './components/ApolloExplorerPage'; From 5fb1aa7fb1f5a439092673135389738336dfad4a Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 15:19:50 -0500 Subject: [PATCH 06/29] update import for `useAsync` Signed-off-by: Karl Haworth --- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index bb94c69063..a3ca428803 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -19,7 +19,7 @@ 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 useAsync from 'react-use/lib/useAsync'; import { CircularProgress } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; From 347b45a63c5c15999422a51f5cf88032496731aa Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 15:31:15 -0500 Subject: [PATCH 07/29] update api report Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 40 +++++++++++++++------------ 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index 7d06876e89..978d90d062 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -5,6 +5,7 @@ ```ts /// +import { ApiHolder } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { JSONObject } from '@apollo/explorer/src/helpers/types'; import { JSX as JSX_2 } from 'react'; @@ -14,23 +15,9 @@ import { RouteRef } from '@backstage/core-plugin-api'; export const ApolloExplorerPage: (props: { title?: string | undefined; subtitle?: string | undefined; - endpoints: { - title: string; - graphRef: string; - persistExplorerState?: boolean | undefined; - initialState?: - | { - document?: string | undefined; - variables?: JSONObject | undefined; - headers?: Record | undefined; - displayOptions: { - docsPanelState?: 'closed' | 'open' | undefined; - showHeadersAndEnvVars?: boolean | undefined; - theme?: 'dark' | 'light' | undefined; - }; - } - | undefined; - }[]; + endpoints: + | EndpointProps[] + | ((options: { apiHolder: ApiHolder }) => Promise); }) => JSX_2.Element; // @public @@ -40,4 +27,23 @@ export const apolloExplorerPlugin: BackstagePlugin< }, {} >; + +// Warning: (ae-missing-release-tag) "EndpointProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type EndpointProps = { + title: string; + graphRef: string; + persistExplorerState?: boolean; + initialState?: { + document?: string; + variables?: JSONObject; + headers?: Record; + displayOptions: { + docsPanelState?: 'open' | 'closed'; + showHeadersAndEnvVars?: boolean; + theme?: 'dark' | 'light'; + }; + }; +}; ``` From 3d0d57228966a99c9806361d0b6b5126c74963cd Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 15:45:28 -0500 Subject: [PATCH 08/29] add required release tag for exporting of type Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 4 +--- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 5 +++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index 978d90d062..b5bed224bc 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -28,9 +28,7 @@ export const apolloExplorerPlugin: BackstagePlugin< {} >; -// Warning: (ae-missing-release-tag) "EndpointProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public export type EndpointProps = { title: string; graphRef: string; diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index a3ca428803..c0e4180909 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -23,6 +23,11 @@ import useAsync from 'react-use/lib/useAsync'; import { CircularProgress } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; +/** + * Exports types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}. + * + * @public + */ export type EndpointProps = { title: string; graphRef: string; From 5410d196c82d5f3e34761b9e37a41535c30475fc Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Tue, 5 Mar 2024 15:46:08 -0500 Subject: [PATCH 09/29] fix typo Signed-off-by: Karl Haworth --- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index c0e4180909..0a0ea0ccdc 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -24,7 +24,7 @@ import { CircularProgress } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; /** - * Exports types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}. + * Export types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}. * * @public */ From 1f622289218f917dde15dce7a23848102d3e2d59 Mon Sep 17 00:00:00 2001 From: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> Date: Wed, 13 Mar 2024 06:35:38 -0400 Subject: [PATCH 10/29] Update plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx Co-authored-by: Vincenzo Scamporlino Signed-off-by: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> --- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index 0a0ea0ccdc..a3eb44362a 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -63,7 +63,7 @@ export const ApolloExplorerPage = (props: Props) => { return await endpoints({ apiHolder }); } return endpoints; - }, []); + }, [endpoints]); return ( From ddf05c64932119575b434d523e0ac0364baa8dd6 Mon Sep 17 00:00:00 2001 From: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> Date: Mon, 1 Apr 2024 07:20:27 -0400 Subject: [PATCH 11/29] add type Co-authored-by: Patrik Oldsberg Signed-off-by: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> --- plugins/apollo-explorer/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index 71cb76c592..78c8920814 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -83,7 +83,7 @@ import { ApiHolder } from '@backstage/core-plugin-api'; async function apolloPluginEndpointsCallback(options: { apiHolder: ApiHolder }): Promise { - const sso = options.apiHolder.get(ssoAuthApiRef) + const sso = options.apiHolder.get(ssoAuthApiRef) return [{ title: 'Github', graphRef: 'my-github-graph-ref@current', From 84c4560c4fa9862a9560bbc7c9431875086b8d84 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Thu, 4 Apr 2024 10:23:32 -0400 Subject: [PATCH 12/29] use authcallback method instead Signed-off-by: Karl Haworth --- .../ApolloExplorerBrowser.tsx | 45 ++++++++++++++++++- .../ApolloExplorerPage/ApolloExplorerPage.tsx | 27 +++++------ 2 files changed, 54 insertions(+), 18 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index 57f9eb7f8a..9f09ba9967 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/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; + 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) => { diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index 0a0ea0ccdc..250b304fac 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/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; +}) => Promise; 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 (
- {loading && } - {error && {error?.message}} - {value && } + authCallback({ apiHolder })} + /> ); From a03eb38ae8ea2413a57c31d0affa164eaa94be28 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Thu, 4 Apr 2024 11:31:04 -0400 Subject: [PATCH 13/29] update readme for authCallback Signed-off-by: Karl Haworth --- plugins/apollo-explorer/README.md | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index 78c8920814..258675f82d 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -74,25 +74,16 @@ Once you authenticate, your graph is ready to use 🚀 If you need to utilize an ApiRef to supply a token to Apollo, you may do so using an ApiHolder. -In `packages/app/src/App.tsx` perform the following modifications from above. The import `ssoAuthApiRef` is used as an example +In `packages/app/src/App.tsx` perform the following modifications from above. The import `ssoAuthApiRef` is used as an example and does not exist. ```typescript import { ApolloExplorerPage, EndpointProps } from '@backstage/plugin-apollo-explorer'; import { ssoAuthApiRef } from '@backstage/devkit'; import { ApiHolder } from '@backstage/core-plugin-api'; - -async function apolloPluginEndpointsCallback(options: { apiHolder: ApiHolder }): Promise { - const sso = options.apiHolder.get(ssoAuthApiRef) - return [{ - title: 'Github', - graphRef: 'my-github-graph-ref@current', - initialState: { - headers: { - authorization: `Bearer ${await sso.getToken()}`, - }, - }, - }] +async function authCallback(options: { apiHolder: ApiHolder }): Promise { + const sso = options.apiHolder.get(ssoAuthApiRef) + return await sso.getToken() } const routes = ( @@ -102,8 +93,12 @@ const routes = ( path="/apollo-explorer" element={ } + authCallback={authCallback} /> ``` From 7a4074d3adc0b76567b36803b611ee57f676c877 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Thu, 4 Apr 2024 11:39:18 -0400 Subject: [PATCH 14/29] add exports Signed-off-by: Karl Haworth --- .../ApolloExplorerPage/ApolloExplorerPage.tsx | 13 ++++++++++--- .../src/components/ApolloExplorerPage/index.ts | 2 +- plugins/apollo-explorer/src/index.ts | 5 ++++- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index 250b304fac..fbbced24d1 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -41,7 +41,12 @@ export type EndpointProps = { }; }; -export type authCallback = (options: { +/** + * Export types to be used with {@link @backstage/apollo-explorer#ApolloExplorerPage}. + * + * @public + */ +export type AuthCallback = (options: { apiHolder: ApiHolder; }) => Promise; @@ -49,7 +54,7 @@ type Props = { title?: string | undefined; subtitle?: string | undefined; endpoints: EndpointProps[]; - authCallback: authCallback; + authCallback?: AuthCallback; }; export const ApolloExplorerPage = (props: Props) => { @@ -63,7 +68,9 @@ export const ApolloExplorerPage = (props: Props) => { authCallback({ apiHolder })} + authCallback={ + authCallback ? () => authCallback({ apiHolder }) : undefined + } /> diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts index 1eef091978..3ca6d12fd0 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ export { ApolloExplorerPage } from './ApolloExplorerPage'; -export type { EndpointProps } from './ApolloExplorerPage'; +export type { EndpointProps, AuthCallback } from './ApolloExplorerPage'; diff --git a/plugins/apollo-explorer/src/index.ts b/plugins/apollo-explorer/src/index.ts index 5911e246f0..471ec9e710 100644 --- a/plugins/apollo-explorer/src/index.ts +++ b/plugins/apollo-explorer/src/index.ts @@ -20,4 +20,7 @@ * @packageDocumentation */ export { apolloExplorerPlugin, ApolloExplorerPage } from './plugin'; -export type { EndpointProps } from './components/ApolloExplorerPage'; +export type { + EndpointProps, + AuthCallback, +} from './components/ApolloExplorerPage'; From 5cafdc8206ff43c6a2bad53b596b7588ad6eadb2 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Thu, 4 Apr 2024 11:39:31 -0400 Subject: [PATCH 15/29] update api report Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index b5bed224bc..df84f0e7d3 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -15,9 +15,8 @@ import { RouteRef } from '@backstage/core-plugin-api'; export const ApolloExplorerPage: (props: { title?: string | undefined; subtitle?: string | undefined; - endpoints: - | EndpointProps[] - | ((options: { apiHolder: ApiHolder }) => Promise); + endpoints: EndpointProps[]; + authCallback?: AuthCallback | undefined; }) => JSX_2.Element; // @public @@ -25,9 +24,15 @@ export const apolloExplorerPlugin: BackstagePlugin< { root: RouteRef; }, + {}, {} >; +// @public +export type AuthCallback = (options: { + apiHolder: ApiHolder; +}) => Promise; + // @public export type EndpointProps = { title: string; From 7da377383f7fe30ca5b89f782d348c1b9199d203 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Thu, 4 Apr 2024 12:10:48 -0400 Subject: [PATCH 16/29] update api-report Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index df84f0e7d3..bbd220ab49 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -24,7 +24,6 @@ export const apolloExplorerPlugin: BackstagePlugin< { root: RouteRef; }, - {}, {} >; From d6b80d823763cea345071d8830f56f9c19fa672f Mon Sep 17 00:00:00 2001 From: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> Date: Fri, 5 Apr 2024 10:06:39 -0400 Subject: [PATCH 17/29] Update plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx Co-authored-by: Patrik Oldsberg Signed-off-by: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> --- .../components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index c72c64df15..4947e3639f 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -67,7 +67,7 @@ export const handleAuthRequest = ({ authCallback, }: { legacyIncludeCookies?: boolean; - authCallback: any; + authCallback: Props['authCallback']; }): HandleRequest => { let cookies = {}; if (legacyIncludeCookies) { From 147b15bd6dafd6f9d28b8acc34557536d32f5900 Mon Sep 17 00:00:00 2001 From: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> Date: Fri, 5 Apr 2024 10:07:27 -0400 Subject: [PATCH 18/29] Update plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx Co-authored-by: Patrik Oldsberg Signed-off-by: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> --- .../components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index 4947e3639f..f5b0014974 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -59,7 +59,6 @@ export type ApolloEndpointProps = { type Props = { endpoints: ApolloEndpointProps[]; authCallback?: () => Promise; - apiHolder?: ApiHolder; }; export const handleAuthRequest = ({ From bd13a562fa4fefddc3fe17a0445f1feefefc2c74 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 10:08:12 -0400 Subject: [PATCH 19/29] remove unused Signed-off-by: Karl Haworth --- .../components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index f5b0014974..6238885a29 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -22,7 +22,6 @@ 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 { ApiHolder } from '@backstage/core-plugin-api'; import { HandleRequest } from '@apollo/explorer/src/helpers/postMessageRelayHelpers'; const useStyles = makeStyles(theme => ({ From 04164bdfeffafcdf41f59ef97233e1b9a4c0cc92 Mon Sep 17 00:00:00 2001 From: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> Date: Fri, 5 Apr 2024 10:10:25 -0400 Subject: [PATCH 20/29] Update plugins/apollo-explorer/api-report.md Co-authored-by: Patrik Oldsberg Signed-off-by: Karl Haworth <58607256+karlhaworth@users.noreply.github.com> --- plugins/apollo-explorer/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index bbd220ab49..5f010946c4 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -30,7 +30,7 @@ export const apolloExplorerPlugin: BackstagePlugin< // @public export type AuthCallback = (options: { apiHolder: ApiHolder; -}) => Promise; +}) => Promise<{ token: string }>; // @public export type EndpointProps = { From 6ecacd3ffec0a25663803337363ad59d0d189906 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 10:14:13 -0400 Subject: [PATCH 21/29] =?UTF-8?q?This'll=20need=20an=20update=20for=20the?= =?UTF-8?q?=20return=20type=20tweak,=20but=20you=20can=20also=20skip=20pas?= =?UTF-8?q?sing=20{}=20here,=20mainly=20just=20confusing=20to=20the=20read?= =?UTF-8?q?er=20=F0=9F=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Karl Haworth --- .../components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index 6238885a29..7cb6957aae 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -84,7 +84,7 @@ export const handleAuthRequest = ({ ...options, headers: { ...options.headers, - Authorization: `Bearer ${await authCallback({})}`, + Authorization: `Bearer ${await authCallback()}`, }, ...cookies, }); From a1e39ffd2a711b6eb3129c497b2e2b11f059e429 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 10:38:42 -0400 Subject: [PATCH 22/29] update for the return type tweak Signed-off-by: Karl Haworth --- .../ApolloExplorerBrowser.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index 7cb6957aae..680e3964ca 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -84,7 +84,9 @@ export const handleAuthRequest = ({ ...options, headers: { ...options.headers, - Authorization: `Bearer ${await authCallback()}`, + ...(authCallback && { + Authorization: `Bearer ${await authCallback()}`, + }), }, ...cookies, }); @@ -112,14 +114,10 @@ export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => { From c3bcd080801f9947d889b79c91698a7840c52b65 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 10:39:46 -0400 Subject: [PATCH 23/29] remove cookies Signed-off-by: Karl Haworth --- .../ApolloExplorerBrowser.tsx | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index 680e3964ca..e50b4847a2 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -61,25 +61,11 @@ type Props = { }; export const handleAuthRequest = ({ - legacyIncludeCookies, authCallback, }: { - legacyIncludeCookies?: boolean; authCallback: Props['authCallback']; }): HandleRequest => { - let cookies = {}; - if (legacyIncludeCookies) { - cookies = { credentials: 'include' }; - } else if (legacyIncludeCookies !== undefined) { - cookies = { credentials: 'omit' }; - } else { - cookies = {}; - } - - const handleRequestWithCookiePref: HandleRequest = async ( - endpointUrl, - options, - ) => + const handleRequest: HandleRequest = async (endpointUrl, options) => fetch(endpointUrl, { ...options, headers: { @@ -88,9 +74,8 @@ export const handleAuthRequest = ({ Authorization: `Bearer ${await authCallback()}`, }), }, - ...cookies, }); - return handleRequestWithCookiePref; + return handleRequest; }; export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => { @@ -115,7 +100,6 @@ export const ApolloExplorerBrowser = ({ endpoints, authCallback }: Props) => { className={classes.explorer} graphRef={endpoints[tabIndex].graphRef} handleRequest={handleAuthRequest({ - legacyIncludeCookies: false, authCallback: authCallback, })} persistExplorerState={endpoints[tabIndex].persistExplorerState} From 63adc945239824c3b9a54c14cb3943162755ad26 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 12:02:07 -0400 Subject: [PATCH 24/29] update api-report Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index 5f010946c4..a009c99aca 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -28,9 +28,9 @@ export const apolloExplorerPlugin: BackstagePlugin< >; // @public -export type AuthCallback = (options: { - apiHolder: ApiHolder; -}) => Promise<{ token: string }>; +export type AuthCallback = (options: { apiHolder: ApiHolder }) => Promise<{ + token: string; +}>; // @public export type EndpointProps = { From 970fb4955caab4fd7fd9fd88e0f218e768a8ed17 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 12:02:33 -0400 Subject: [PATCH 25/29] update types and use of authcallback Signed-off-by: Karl Haworth --- .../ApolloExplorerBrowser/ApolloExplorerBrowser.tsx | 4 ++-- .../src/components/ApolloExplorerPage/ApolloExplorerPage.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index e50b4847a2..d0c90708a1 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx @@ -57,7 +57,7 @@ export type ApolloEndpointProps = { type Props = { endpoints: ApolloEndpointProps[]; - authCallback?: () => Promise; + authCallback?: () => Promise<{ token: string }>; }; export const handleAuthRequest = ({ @@ -71,7 +71,7 @@ export const handleAuthRequest = ({ headers: { ...options.headers, ...(authCallback && { - Authorization: `Bearer ${await authCallback()}`, + Authorization: `Bearer ${(await authCallback()).token}`, }), }, }); diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index fbbced24d1..b9d25a1a06 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx @@ -48,7 +48,7 @@ export type EndpointProps = { */ export type AuthCallback = (options: { apiHolder: ApiHolder; -}) => Promise; +}) => Promise<{ token: string }>; type Props = { title?: string | undefined; From 3f422fbd66bc0262d9df60c7f8c5a6ca5fa182c0 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 14:33:44 -0400 Subject: [PATCH 26/29] add `authCallback` to `EndpointProps` Signed-off-by: Karl Haworth --- .../ApolloExplorerBrowser.tsx | 33 ++++++++----------- .../ApolloExplorerPage/ApolloExplorerPage.tsx | 15 +++------ 2 files changed, 17 insertions(+), 31 deletions(-) diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx index d0c90708a1..d276774003 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx +++ b/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; - 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 (
{ className={classes.explorer} graphRef={endpoints[tabIndex].graphRef} handleRequest={handleAuthRequest({ - authCallback: authCallback, + authCallback: getAuthCallback(tabIndex), })} persistExplorerState={endpoints[tabIndex].persistExplorerState} initialState={endpoints[tabIndex].initialState} diff --git a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx b/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx index b9d25a1a06..53b6a54194 100644 --- a/plugins/apollo-explorer/src/components/ApolloExplorerPage/ApolloExplorerPage.tsx +++ b/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 (
- authCallback({ apiHolder }) : undefined - } - /> + ); From dde72a55077a5522d200594587f0e957c9ff2d55 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 14:34:01 -0400 Subject: [PATCH 27/29] update api report Signed-off-by: Karl Haworth --- plugins/apollo-explorer/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/apollo-explorer/api-report.md b/plugins/apollo-explorer/api-report.md index a009c99aca..5371bc7219 100644 --- a/plugins/apollo-explorer/api-report.md +++ b/plugins/apollo-explorer/api-report.md @@ -16,7 +16,6 @@ export const ApolloExplorerPage: (props: { title?: string | undefined; subtitle?: string | undefined; endpoints: EndpointProps[]; - authCallback?: AuthCallback | undefined; }) => JSX_2.Element; // @public @@ -36,6 +35,7 @@ export type AuthCallback = (options: { apiHolder: ApiHolder }) => Promise<{ export type EndpointProps = { title: string; graphRef: string; + authCallback?: AuthCallback; persistExplorerState?: boolean; initialState?: { document?: string; From 8ea42d759e040ff3f22f9fefdf20d01171994780 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 14:34:10 -0400 Subject: [PATCH 28/29] update readme Signed-off-by: Karl Haworth --- plugins/apollo-explorer/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index 258675f82d..b26f157635 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -74,11 +74,11 @@ Once you authenticate, your graph is ready to use 🚀 If you need to utilize an ApiRef to supply a token to Apollo, you may do so using an ApiHolder. -In `packages/app/src/App.tsx` perform the following modifications from above. The import `ssoAuthApiRef` is used as an example and does not exist. +In `packages/app/src/App.tsx` perform the following modifications from above. The import `ssoAuthApiRef` is used as an example and **does not exist**. ```typescript import { ApolloExplorerPage, EndpointProps } from '@backstage/plugin-apollo-explorer'; -import { ssoAuthApiRef } from '@backstage/devkit'; +import { ssoAuthApiRef } from '@companyxyz/devkit'; import { ApiHolder } from '@backstage/core-plugin-api'; async function authCallback(options: { apiHolder: ApiHolder }): Promise { From 342a6a9827fc6401173d2ed9399a53d1d0c044e6 Mon Sep 17 00:00:00 2001 From: Karl Haworth Date: Fri, 5 Apr 2024 15:22:54 -0400 Subject: [PATCH 29/29] update readme with proper example Signed-off-by: Karl Haworth --- plugins/apollo-explorer/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index b26f157635..bc06612cab 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -81,7 +81,7 @@ import { ApolloExplorerPage, EndpointProps } from '@backstage/plugin-apollo-expl import { ssoAuthApiRef } from '@companyxyz/devkit'; import { ApiHolder } from '@backstage/core-plugin-api'; -async function authCallback(options: { apiHolder: ApiHolder }): Promise { +async function authCallback(options: { apiHolder: ApiHolder }): Promise<{token: string}> { const sso = options.apiHolder.get(ssoAuthApiRef) return await sso.getToken() } @@ -96,9 +96,9 @@ const routes = ( endpoints={[{ title: 'Github', graphRef: 'my-github-graph-ref@current', + authCallback: authCallback }]} /> } - authCallback={authCallback} /> ```