Merge pull request #1081 from spotify/rugvip/dev-root

packages/dev-utils: added OAuthRequestApi + addRootChild

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

@@ -22,6 +22,8 @@ import {
   createApiFactory,
   ErrorAlerter,
   AlertApiForwarder,
+  oauthRequestApiRef,
+  OAuthRequestManager,
 } from '@backstage/core';
 
 // TODO(rugvip): We should likely figure out how to reuse all of these between apps
@@ -41,3 +43,9 @@ export const errorApiFactory = createApiFactory({
   factory: ({ alertApi }) =>
     new ErrorAlerter(alertApi, new ErrorApiForwarder()),
 });
+
+export const oauthRequestApiFactory = createApiFactory({
+  implements: oauthRequestApiRef,
+  deps: {},
+  factory: () => new OAuthRequestManager(),
+});

packages/dev-utils/src/devApp/render.tsx

@@ -15,7 +15,7 @@
  */
 
 import { hot } from 'react-hot-loader/root';
-import React, { FC, ComponentType } from 'react';
+import React, { FC, ComponentType, ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import BookmarkIcon from '@material-ui/icons/Bookmark';
@@ -30,6 +30,7 @@ import {
   ApiTestRegistry,
   ApiHolder,
   AlertDisplay,
+  OAuthRequestDialog,
 } from '@backstage/core';
 import * as defaultApiFactories from './apiFactories';
 
@@ -43,6 +44,7 @@ type BackstagePlugin = ReturnType<typeof createPlugin>;
 class DevAppBuilder {
   private readonly plugins = new Array<BackstagePlugin>();
   private readonly factories = new Array<ApiFactory<any, any, any>>();
+  private readonly rootChildren = new Array<ReactNode>();
 
   /**
    * Register one or more plugins to render in the dev app
@@ -62,6 +64,16 @@ class DevAppBuilder {
     return this;
   }
 
+  /**
+   * Adds a React node to place just inside the App Provider.
+   *
+   * Useful for adding more global components like the AlertDisplay.
+   */
+  addRootChild(node: ReactNode): DevAppBuilder {
+    this.rootChildren.push(node);
+    return this;
+  }
+
   /**
    * Build a DevApp component using the resources registered so far
    */
@@ -79,6 +91,8 @@ class DevAppBuilder {
       return (
         <AppProvider>
           <AlertDisplay />
+          <OAuthRequestDialog />
+          {this.rootChildren}
           <BrowserRouter>
             <SidebarPage>
               {sidebar}