add KibanaThemeProvider to ReactDOM.render for kibana-app-services

elastic · Jan 5, 2022 · 69cbfea · 69cbfea
1 parent 348bfb8
commit 69cbfea
Show file tree

Hide file tree

Showing 21 changed files with 162 additions and 100 deletions.
diff --git a/src/plugins/data_view_management/public/management_app/mount_management_section.tsx b/src/plugins/data_view_management/public/management_app/mount_management_section.tsx
@@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
 import { StartServicesAccessor } from 'src/core/public';
 
-import { KibanaContextProvider } from '../../../kibana_react/public';
+import { KibanaContextProvider, KibanaThemeProvider } from '../../../kibana_react/public';
 import { ManagementAppMountParams } from '../../../management/public';
 import {
   IndexPatternTableWithRouter,
@@ -67,25 +67,27 @@ export async function mountManagementSection(
 
   ReactDOM.render(
     <KibanaContextProvider services={deps}>
-      <I18nProvider>
-        <Router history={params.history}>
-          <Switch>
-            <Route path={['/create']}>
-              <IndexPatternTableWithRouter canSave={canSave} showCreateDialog={true} />
-            </Route>
-            <Route path={['/dataView/:id/field/:fieldName', '/dataView/:id/create-field/']}>
-              <CreateEditFieldContainer />
-            </Route>
-            <Route path={['/dataView/:id']}>
-              <EditIndexPatternContainer />
-            </Route>
-            <Redirect path={'/patterns*'} to={'dataView*'} />
-            <Route path={['/']}>
-              <IndexPatternTableWithRouter canSave={canSave} />
-            </Route>
-          </Switch>
-        </Router>
-      </I18nProvider>
+      <KibanaThemeProvider theme$={params.theme$}>
+        <I18nProvider>
+          <Router history={params.history}>
+            <Switch>
+              <Route path={['/create']}>
+                <IndexPatternTableWithRouter canSave={canSave} showCreateDialog={true} />
+              </Route>
+              <Route path={['/dataView/:id/field/:fieldName', '/dataView/:id/create-field/']}>
+                <CreateEditFieldContainer />
+              </Route>
+              <Route path={['/dataView/:id']}>
+                <EditIndexPatternContainer />
+              </Route>
+              <Redirect path={'/patterns*'} to={'dataView*'} />
+              <Route path={['/']}>
+                <IndexPatternTableWithRouter canSave={canSave} />
+              </Route>
+            </Switch>
+          </Router>
+        </I18nProvider>
+      </KibanaThemeProvider>
     </KibanaContextProvider>,
     params.element
   );

diff --git a/src/plugins/discover/public/application/main/discover_main_route.tsx b/src/plugins/discover/public/application/main/discover_main_route.tsx
@@ -122,6 +122,7 @@ export function DiscoverMainRoute({ services, history }: DiscoverMainProps) {
             onBeforeRedirect() {
               getUrlTracker().setTrackedUrl('/');
             },
+            theme: core.theme,
           })(e);
         }
       }
@@ -139,6 +140,7 @@ export function DiscoverMainRoute({ services, history }: DiscoverMainProps) {
     id,
     services,
     toastNotifications,
+    core.theme,
   ]);
 
   useEffect(() => {

diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts
@@ -10,6 +10,8 @@ import './index.scss';
 
 import { PluginInitializerContext } from 'src/core/public';
 import { EmbeddablePublicPlugin } from './plugin';
+import type { ThemeServiceStart } from '../../../core/public';
+import { createGetterSetter } from '../../../plugins/kibana_utils/public';
 
 export type {
   Adapters,
@@ -83,6 +85,8 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new EmbeddablePublicPlugin(initializerContext);
 }
 
+export const [getTheme, setTheme] = createGetterSetter<ThemeServiceStart>('Theme');
+
 export type {
   EmbeddableSetup,
   EmbeddableStart,

diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx
@@ -9,10 +9,11 @@
 import { EuiText, EuiIcon, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Markdown } from '../../../../kibana_react/public';
+import { KibanaThemeProvider, Markdown } from '../../../../kibana_react/public';
 import { Embeddable } from './embeddable';
 import { EmbeddableInput, EmbeddableOutput, IEmbeddable } from './i_embeddable';
 import { IContainer } from '../containers';
+import { getTheme } from '../..';
 
 export const ERROR_EMBEDDABLE_TYPE = 'error';
 
@@ -38,18 +39,21 @@ export class ErrorEmbeddable extends Embeddable<EmbeddableInput, EmbeddableOutpu
     const title = typeof this.error === 'string' ? this.error : this.error.message;
     this.dom = dom;
     ReactDOM.render(
-      // @ts-ignore
-      <div className="embPanel__error embPanel__content" data-test-subj="embeddableStackError">
-        <EuiText color="subdued" size="xs">
-          <EuiIcon type="alert" color="danger" />
-          <EuiSpacer size="s" />
-          <Markdown
-            markdown={title}
-            openLinksInNewTab={true}
-            data-test-subj="errorMessageMarkdown"
-          />
-        </EuiText>
-      </div>,
+      <KibanaThemeProvider theme$={getTheme().theme$}>
+        // @ts-ignore
+        <div className="embPanel__error embPanel__content" data-test-subj="embeddableStackError">
+          <EuiText color="subdued" size="xs">
+            <EuiIcon type="alert" color="danger" />
+            <EuiSpacer size="s" />
+            <Markdown
+              markdown={title}
+              openLinksInNewTab={true}
+              data-test-subj="errorMessageMarkdown"
+            />
+          </EuiText>
+        </div>
+        ,
+      </KibanaThemeProvider>,
       dom
     );
   }

diff --git a/src/plugins/embeddable/public/plugin.tsx b/src/plugins/embeddable/public/plugin.tsx
@@ -52,6 +52,7 @@ import {
   getTelemetryFunction,
 } from '../common/lib';
 import { getAllMigrations } from '../common/lib/get_all_migrations';
+import { setTheme } from '.';
 
 export interface EmbeddableSetupDependencies {
   uiActions: UiActionsSetup;
@@ -120,6 +121,7 @@ export class EmbeddablePublicPlugin implements Plugin<EmbeddableSetup, Embeddabl
 
   public setup(core: CoreSetup, { uiActions }: EmbeddableSetupDependencies) {
     bootstrap(uiActions);
+    setTheme(core.theme);
 
     return {
       registerEmbeddableFactory: this.registerEmbeddableFactory,

diff --git a/src/plugins/kibana_utils/kibana.json b/src/plugins/kibana_utils/kibana.json
@@ -7,5 +7,6 @@
     "name": "App Services",
     "githubTeam": "kibana-app-services"
   },
+  "requiredBundles": ["kibanaReact"],
   "extraPublicDirs": ["common", "demos/state_containers/todomvc", "common/state_containers"]
 }
diff --git a/src/plugins/kibana_utils/public/history/redirect_when_missing.tsx b/src/plugins/kibana_utils/public/history/redirect_when_missing.tsx
@@ -13,7 +13,9 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 import ReactDOM from 'react-dom';
 
 import { ApplicationStart, HttpStart, ToastsSetup } from 'kibana/public';
+import type { ThemeServiceStart } from '../../../../core/public';
 import { SavedObjectNotFound } from '..';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
 
 const ReactMarkdown = React.lazy(() => import('react-markdown'));
 const ErrorRenderer = (props: { children: string }) => (
@@ -45,6 +47,7 @@ export function redirectWhenMissing({
   mapping,
   toastNotifications,
   onBeforeRedirect,
+  theme,
 }: {
   history: History;
   navigateToApp: ApplicationStart['navigateToApp'];
@@ -62,6 +65,7 @@ export function redirectWhenMissing({
    * Optional callback invoked directly before a redirect is triggered
    */
   onBeforeRedirect?: (error: SavedObjectNotFound) => void;
+  theme: ThemeServiceStart;
 }) {
   let localMappingObject: Mapping;
 
@@ -92,7 +96,12 @@ export function redirectWhenMissing({
         defaultMessage: 'Saved object is missing',
       }),
       text: (element: HTMLElement) => {
-        ReactDOM.render(<ErrorRenderer>{error.message}</ErrorRenderer>, element);
+        ReactDOM.render(
+          <KibanaThemeProvider theme$={theme.theme$}>
+            <ErrorRenderer>{error.message}</ErrorRenderer>
+          </KibanaThemeProvider>,
+          element
+        );
         return () => ReactDOM.unmountComponentAtNode(element);
       },
     });

diff --git a/src/plugins/kibana_utils/tsconfig.json b/src/plugins/kibana_utils/tsconfig.json
@@ -15,6 +15,7 @@
     "../../../typings/**/*"
   ],
   "references": [
-    { "path": "../../core/tsconfig.json" }
+    { "path": "../../core/tsconfig.json" },
+    { "path": "../kibana_react/tsconfig.json" }
   ]
 }
diff --git a/src/plugins/share/kibana.json b/src/plugins/share/kibana.json
@@ -8,6 +8,6 @@
     "githubTeam": "kibana-app-services"
   },
   "description": "Adds URL Service and sharing capabilities to Kibana",
-  "requiredBundles": ["kibanaUtils"],
+  "requiredBundles": ["kibanaReact", "kibanaUtils"],
   "optionalPlugins": []
 }
diff --git a/src/plugins/share/public/services/share_menu_manager.tsx b/src/plugins/share/public/services/share_menu_manager.tsx
@@ -10,8 +10,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nProvider } from '@kbn/i18n-react';
 import { EuiWrappingPopover } from '@elastic/eui';
+import { Observable } from 'rxjs';
 
-import { CoreStart, HttpStart } from 'kibana/public';
+import { CoreStart, CoreTheme, HttpStart } from 'kibana/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
 import { ShareContextMenu } from '../components/share_context_menu';
 import { ShareMenuItem, ShowShareMenuOptions } from '../types';
 import { ShareMenuRegistryStart } from './share_menu_registry';
@@ -42,6 +44,7 @@ export class ShareMenuManager {
           post: core.http.post,
           basePath: core.http.basePath.get(),
           anonymousAccess,
+          theme$: core.theme.theme$,
         });
       },
     };
@@ -65,12 +68,14 @@ export class ShareMenuManager {
     basePath,
     embedUrlParamExtensions,
     anonymousAccess,
+    theme$,
     showPublicUrlSwitch,
   }: ShowShareMenuOptions & {
     menuItems: ShareMenuItem[];
     post: HttpStart['post'];
     basePath: string;
     anonymousAccess: AnonymousAccessServiceContract | undefined;
+    theme$: Observable<CoreTheme>;
   }) {
     if (this.isOpen) {
       this.onClose();
@@ -82,30 +87,32 @@ export class ShareMenuManager {
     document.body.appendChild(this.container);
     const element = (
       <I18nProvider>
-        <EuiWrappingPopover
-          id="sharePopover"
-          button={anchorElement}
-          isOpen={true}
-          closePopover={this.onClose}
-          panelPaddingSize="none"
-          anchorPosition="downLeft"
-        >
-          <ShareContextMenu
-            allowEmbed={allowEmbed}
-            allowShortUrl={allowShortUrl}
-            objectId={objectId}
-            objectType={objectType}
-            shareMenuItems={menuItems}
-            sharingData={sharingData}
-            shareableUrl={shareableUrl}
-            onClose={this.onClose}
-            post={post}
-            basePath={basePath}
-            embedUrlParamExtensions={embedUrlParamExtensions}
-            anonymousAccess={anonymousAccess}
-            showPublicUrlSwitch={showPublicUrlSwitch}
-          />
-        </EuiWrappingPopover>
+        <KibanaThemeProvider theme$={theme$}>
+          <EuiWrappingPopover
+            id="sharePopover"
+            button={anchorElement}
+            isOpen={true}
+            closePopover={this.onClose}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+            <ShareContextMenu
+              allowEmbed={allowEmbed}
+              allowShortUrl={allowShortUrl}
+              objectId={objectId}
+              objectType={objectType}
+              shareMenuItems={menuItems}
+              sharingData={sharingData}
+              shareableUrl={shareableUrl}
+              onClose={this.onClose}
+              post={post}
+              basePath={basePath}
+              embedUrlParamExtensions={embedUrlParamExtensions}
+              anonymousAccess={anonymousAccess}
+              showPublicUrlSwitch={showPublicUrlSwitch}
+            />
+          </EuiWrappingPopover>
+        </KibanaThemeProvider>
       </I18nProvider>
     );
     ReactDOM.render(element, this.container);

diff --git a/src/plugins/share/public/url_service/redirect/components/page.tsx b/src/plugins/share/public/url_service/redirect/components/page.tsx
@@ -8,39 +8,47 @@
 
 import * as React from 'react';
 import useObservable from 'react-use/lib/useObservable';
+import { Observable } from 'rxjs';
 import { EuiPageTemplate } from '@elastic/eui';
+import { CoreTheme } from 'kibana/public';
 import { Error } from './error';
 import { RedirectManager } from '../redirect_manager';
 import { Spinner } from './spinner';
+import { KibanaThemeProvider } from '../../../../../kibana_react/public';
 
 export interface PageProps {
   manager: Pick<RedirectManager, 'error$'>;
+  theme$: Observable<CoreTheme>;
 }
 
-export const Page: React.FC<PageProps> = ({ manager }) => {
+export const Page: React.FC<PageProps> = ({ manager, theme$ }) => {
   const error = useObservable(manager.error$);
 
   if (error) {
     return (
+      <KibanaThemeProvider theme$={theme$}>
+        <EuiPageTemplate
+          template="centeredContent"
+          pageContentProps={{
+            color: 'danger',
+          }}
+        >
+          <Error error={error} />
+        </EuiPageTemplate>
+      </KibanaThemeProvider>
+    );
+  }
+
+  return (
+    <KibanaThemeProvider theme$={theme$}>
       <EuiPageTemplate
         template="centeredContent"
         pageContentProps={{
-          color: 'danger',
+          color: 'primary',
         }}
       >
-        <Error error={error} />
+        <Spinner />
       </EuiPageTemplate>
-    );
-  }
-
-  return (
-    <EuiPageTemplate
-      template="centeredContent"
-      pageContentProps={{
-        color: 'primary',
-      }}
-    >
-      <Spinner />
-    </EuiPageTemplate>
+    </KibanaThemeProvider>
   );
 };
diff --git a/src/plugins/share/public/url_service/redirect/redirect_manager.ts b/src/plugins/share/public/url_service/redirect/redirect_manager.ts
@@ -29,7 +29,8 @@ export class RedirectManager {
       chromeless: true,
       mount: async (params) => {
         const { render } = await import('./render');
-        const unmount = render(params.element, { manager: this });
+        const theme$ = params.theme$;
+        const unmount = render(params.element, { manager: this, theme$ });
         this.onMount(params.history.location.search);
         return () => {
           unmount();

diff --git a/src/plugins/share/public/url_service/redirect/render.ts b/src/plugins/share/public/url_service/redirect/render.ts
@@ -11,7 +11,7 @@ import * as ReactDOM from 'react-dom';
 import { Page, PageProps } from './components/page';
 
 export const render = (container: HTMLElement, props: PageProps) => {
-  ReactDOM.render(React.createElement(Page, props), container);
+  ReactDOM.render(React.createElement(Page, { ...props }), container);
 
   return () => {
     ReactDOM.unmountComponentAtNode(container);

diff --git a/src/plugins/share/tsconfig.json b/src/plugins/share/tsconfig.json
@@ -9,6 +9,7 @@
   "include": ["common/**/*", "public/**/*", "server/**/*"],
   "references": [
     { "path": "../../core/tsconfig.json" },
-    { "path": "../kibana_utils/tsconfig.json" },
+    { "path": "../kibana_react/tsconfig.json" },
+    { "path": "../kibana_utils/tsconfig.json" }
   ]
 }