Merge pull request #1425 from spotify/rugvip/graphiql

graphiql: add GitHub endpoint and add to App

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",

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();
 };

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 />

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';

packages/dev-utils/src/devApp/apiFactories.ts

@@ -24,6 +24,10 @@ import {
   AlertApiForwarder,
   oauthRequestApiRef,
   OAuthRequestManager,
+  GoogleAuth,
+  googleAuthApiRef,
+  GithubAuth,
+  githubAuthApiRef,
 } from '@backstage/core';
 
 // TODO(rugvip): We should likely figure out how to reuse all of these between apps
@@ -49,3 +53,25 @@ export const oauthRequestApiFactory = createApiFactory({
   deps: {},
   factory: () => new OAuthRequestManager(),
 });
+
+export const googleAuthApiFactory = createApiFactory({
+  implements: googleAuthApiRef,
+  deps: { oauthRequestApi: oauthRequestApiRef },
+  factory: ({ oauthRequestApi }) =>
+    GoogleAuth.create({
+      apiOrigin: 'http://localhost:7000',
+      basePath: '/auth/',
+      oauthRequestApi,
+    }),
+});
+
+export const githubAuthApiFactory = createApiFactory({
+  implements: githubAuthApiRef,
+  deps: { oauthRequestApi: oauthRequestApiRef },
+  factory: ({ oauthRequestApi }) =>
+    GithubAuth.create({
+      apiOrigin: 'http://localhost:7000',
+      basePath: '/auth/',
+      oauthRequestApi,
+    }),
+});