diff --git a/packages/app/package.json b/packages/app/package.json index bcdcae0a60..f70647643b 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -17,7 +17,7 @@ "@backstage/integration-react": "^1.1.2-next.3", "@backstage/plugin-airbrake": "^0.3.7-next.3", "@backstage/plugin-api-docs": "^0.8.7-next.3", - "@backstage/plugin-apollo-explorer": "^0.0.0", + "@backstage/plugin-apollo-explorer": "^0.1.0", "@backstage/plugin-azure-devops": "^0.1.23-next.3", "@backstage/plugin-apache-airflow": "^0.2.0-next.3", "@backstage/plugin-badges": "^0.2.31-next.3", diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 30da01841c..89ef67bc13 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -117,7 +117,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( to="cost-insights" text="Cost Insights" /> - + diff --git a/plugins/apollo-explorer/README.md b/plugins/apollo-explorer/README.md index 0ff279908e..4b3d2a2317 100644 --- a/plugins/apollo-explorer/README.md +++ b/plugins/apollo-explorer/README.md @@ -2,8 +2,65 @@ Welcome to the Apollo Explorer plugin! -This plugin allows users to directly embed an Apollo graph explorer directly into Backstage! +This plugin allows users to directly embed an [Apollo](https://www.apollographql.com) graph explorer directly into +Backstage! ## Getting started -TODO +### Getting an Apollo Graph Reference + +First things first, you will need an Apollo account, and a graph imported into your account. This is beyond the scope of +this plugin, so if you are totally new to Apollo, please reference their official +documentation [here](https://www.apollographql.com/docs). + +Once you have a graph set up in Apollo, we need to grab the graph reference. First, go to your Apollo graphs home page and choose the graph you wish to embed. + +![Apollo Graph List](./docs/img/apollo-graph-list.png) + +Once you are in your graph explorer, click the dropdown next to the share icon and select `Share as Embedded` + +![Share as Embedded](./docs/img/share-as-embedded.png) + +This modal contains a number of useful properties, all of which can be passed to the plugin via the component properties, but the only mandatory input we need from here is the `graphRef`. + +![Graph Ref](./docs/img/graph-ref.png) + +Hold on to this snippet for a second while we set up the plugin ✨ + +### Installing the Backstage Plugin + +First, add the plugin to your Backstage app + +```shell +yarn --cwd packages/app add @backstage/plugin-apollo-explorer +``` + +Then, in `packages/app/src/App.tsx` add the plugin as a `Route` + +```typescript + + } +/> +``` + +Then, in `packages/app/src/components/Root/Root.tsx` add a sidebar item so users can find your beautiful plugin! + +```typescript + +``` + +That's it! You should now see an `Apollo Explorer` item in your sidebar, and if you click it, you should see your graph(s) load and direct you to authenticate via Apollo! + +![Needs Auth](./docs/img/needs-auth.png) + +Once you authenticate, your graph is ready to use 🚀 + +![Logged In](./docs/img/logged-in.png) diff --git a/plugins/apollo-explorer/docs/img/apollo-graph-list.png b/plugins/apollo-explorer/docs/img/apollo-graph-list.png new file mode 100644 index 0000000000..53a1c517aa Binary files /dev/null and b/plugins/apollo-explorer/docs/img/apollo-graph-list.png differ diff --git a/plugins/apollo-explorer/docs/img/graph-ref.png b/plugins/apollo-explorer/docs/img/graph-ref.png new file mode 100644 index 0000000000..062ebe50b7 Binary files /dev/null and b/plugins/apollo-explorer/docs/img/graph-ref.png differ diff --git a/plugins/apollo-explorer/docs/img/logged-in.png b/plugins/apollo-explorer/docs/img/logged-in.png new file mode 100644 index 0000000000..5c5c81347d Binary files /dev/null and b/plugins/apollo-explorer/docs/img/logged-in.png differ diff --git a/plugins/apollo-explorer/docs/img/needs-auth.png b/plugins/apollo-explorer/docs/img/needs-auth.png new file mode 100644 index 0000000000..03c6a9c5fc Binary files /dev/null and b/plugins/apollo-explorer/docs/img/needs-auth.png differ diff --git a/plugins/apollo-explorer/docs/img/share-as-embedded.png b/plugins/apollo-explorer/docs/img/share-as-embedded.png new file mode 100644 index 0000000000..672ed5d8ef Binary files /dev/null and b/plugins/apollo-explorer/docs/img/share-as-embedded.png differ