diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx index 72c9581a84..5a28a43e8b 100644 --- a/packages/dev-utils/src/devApp/render.tsx +++ b/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'; @@ -43,6 +43,7 @@ type BackstagePlugin = ReturnType; class DevAppBuilder { private readonly plugins = new Array(); private readonly factories = new Array>(); + private readonly rootChildren = new Array(); /** * Register one or more plugins to render in the dev app @@ -62,6 +63,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 +90,7 @@ class DevAppBuilder { return ( + {this.rootChildren} {sidebar}