From 2b3713f7b64226127606e3b07c9661828080e11a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 23 Jun 2020 21:48:20 +0200
Subject: [PATCH] app: add graphiql plugin with gitlab and github endpoints

---
 packages/app/package.json                 |  1 +
 packages/app/src/apis.ts                  | 23 ++++++++++++++++++++++-
 packages/app/src/components/Root/Root.tsx |  6 ++++++
 packages/app/src/plugins.ts               |  1 +
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index 06858b015b..6ccf48584f 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -9,6 +9,7 @@
     "@backstage/plugin-circleci": "^0.1.1-alpha.12",
     "@backstage/plugin-explore": "^0.1.1-alpha.12",
     "@backstage/plugin-gitops-profiles": "^0.1.1-alpha.12",
+    "@backstage/plugin-graphiql": "^0.1.1-alpha.12",
     "@backstage/plugin-lighthouse": "^0.1.1-alpha.12",
     "@backstage/plugin-register-component": "^0.1.1-alpha.12",
     "@backstage/plugin-scaffolder": "^0.1.1-alpha.12",
diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts
index 9bfc618216..5011b16eaf 100644
--- a/packages/app/src/apis.ts
+++ b/packages/app/src/apis.ts
@@ -45,6 +45,10 @@ import { CircleCIApi, circleCIApiRef } from '@backstage/plugin-circleci';
 import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
 
 import { gitOpsApiRef, GitOpsRestApi } from '@backstage/plugin-gitops-profiles';
+import {
+  graphQlBrowseApiRef,
+  GraphQLEndpoints,
+} from '@backstage/plugin-graphiql';
 
 export const apis = (config: ConfigApi) => {
   // eslint-disable-next-line no-console
@@ -78,7 +82,7 @@ export const apis = (config: ConfigApi) => {
     }),
   );
 
-  builder.add(
+  const githubAuthApi = builder.add(
     githubAuthApiRef,
     GithubAuth.create({
       apiOrigin: 'http://localhost:7000',
@@ -105,5 +109,22 @@ export const apis = (config: ConfigApi) => {
 
   builder.add(gitOpsApiRef, new GitOpsRestApi('http://localhost:3008'));
 
+  builder.add(
+    graphQlBrowseApiRef,
+    GraphQLEndpoints.from([
+      GraphQLEndpoints.create({
+        id: 'gitlab',
+        title: 'GitLab',
+        url: 'https://gitlab.com/api/graphql',
+      }),
+      GraphQLEndpoints.github({
+        id: 'github',
+        title: 'GitHub',
+        errorApi,
+        githubAuthApi,
+      }),
+    ]),
+  );
+
   return builder.build();
 };
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 453c98bc72..4b92f8281e 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -39,6 +39,7 @@ import {
   SidebarPinButton,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
+import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -94,6 +95,11 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
       <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
       <SidebarItem icon={BuildIcon} to="circleci" text="CircleCI" />
+      <SidebarItem
+        icon={graphiQLRouteRef.icon!}
+        to={graphiQLRouteRef.path}
+        text={graphiQLRouteRef.title}
+      />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />
diff --git a/packages/app/src/plugins.ts b/packages/app/src/plugins.ts
index 05373d7d96..09cd117fc0 100644
--- a/packages/app/src/plugins.ts
+++ b/packages/app/src/plugins.ts
@@ -24,3 +24,4 @@ export { plugin as RegisterComponent } from '@backstage/plugin-register-componen
 export { plugin as Sentry } from '@backstage/plugin-sentry';
 export { plugin as GitopsProfiles } from '@backstage/plugin-gitops-profiles';
 export { plugin as TechDocs } from '@backstage/plugin-techdocs';
+export { plugin as GraphiQL } from '@backstage/plugin-graphiql';