also pass theme to mountpoint

elastic · Nov 22, 2021 · 7fee754 · 7fee754
1 parent eee3285
commit 7fee754
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 22 deletions.
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
@@ -19,6 +19,7 @@ import {
   DocLinksStart,
   ToastsStart,
   ScopedHistory,
+  ThemeServiceStart,
 } from '../../../../core/public';
 import { url } from '../../../kibana_utils/public';
 
@@ -41,6 +42,7 @@ interface AdvancedSettingsProps {
   uiSettings: IUiSettingsClient;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
+  theme: ThemeServiceStart['theme$'];
   componentRegistry: ComponentRegistry['start'];
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
 }
@@ -270,6 +272,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps, AdvancedS
           toasts={this.props.toasts}
           trackUiMetric={this.props.trackUiMetric}
           queryText={query.text}
+          theme={this.props.theme}
         />
         <PageFooter
           toasts={this.props.toasts}

diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
@@ -26,8 +26,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { isEmpty } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
-import { toMountPoint } from '../../../../../kibana_react/public';
-import { DocLinksStart, ToastsStart } from '../../../../../../core/public';
+import { KibanaThemeProvider, toMountPoint } from '../../../../../kibana_react/public';
+import { DocLinksStart, ThemeServiceStart, ToastsStart } from '../../../../../../core/public';
 
 import { getCategoryName } from '../../lib';
 import { Field, getEditableValue } from '../field';
@@ -46,6 +46,7 @@ interface FormProps {
   enableSaving: boolean;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
+  theme: ThemeServiceStart['theme$'];
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
   queryText?: string;
 }
@@ -191,7 +192,7 @@ export class Form extends PureComponent<FormProps> {
         defaultMessage: 'One or more settings require you to reload the page to take effect.',
       }),
       text: toMountPoint(
-        <>
+        <KibanaThemeProvider theme$={this.props.theme}>
           <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
             <EuiFlexItem grow={false}>
               <EuiButton size="s" onClick={() => window.location.reload()}>
@@ -201,7 +202,7 @@ export class Form extends PureComponent<FormProps> {
               </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </>
+        </KibanaThemeProvider>
       ),
       color: 'success',
     });

diff --git a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx b/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx
@@ -84,6 +84,7 @@ export async function mountManagementSection(
                 toasts={notifications.toasts}
                 dockLinks={docLinks.links}
                 uiSettings={uiSettings}
+                theme={params.theme$}
                 componentRegistry={componentRegistry}
                 trackUiMetric={trackUiMetric}
               />

diff --git a/src/plugins/visualize/public/application/components/visualize_no_match.tsx b/src/plugins/visualize/public/application/components/visualize_no_match.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiLink } from '@elastic/eui';
 
-import { useKibana, toMountPoint } from '../../../../kibana_react/public';
+import { useKibana, toMountPoint, KibanaThemeProvider } from '../../../../kibana_react/public';
 import { VisualizeServices } from '../types';
 import { VisualizeConstants } from '../visualize_constants';
 
@@ -35,21 +35,23 @@ export const VisualizeNoMatch = () => {
       bannerId = services.overlays.banners.replace(
         bannerId,
         toMountPoint(
-          <EuiCallOut color="warning" iconType="iInCircle" title={bannerMessage}>
-            <p>
-              <FormattedMessage
-                id="visualize.noMatchRoute.bannerText"
-                defaultMessage="Visualize application doesn't recognize this route: {route}."
-                values={{
-                  route: (
-                    <EuiLink href={window.location.href}>
-                      {services.history.location.pathname}
-                    </EuiLink>
-                  ),
-                }}
-              />
-            </p>
-          </EuiCallOut>
+          <KibanaThemeProvider theme$={services.theme.theme$}>
+            <EuiCallOut color="warning" iconType="iInCircle" title={bannerMessage}>
+              <p>
+                <FormattedMessage
+                  id="visualize.noMatchRoute.bannerText"
+                  defaultMessage="Visualize application doesn't recognize this route: {route}."
+                  values={{
+                    route: (
+                      <EuiLink href={window.location.href}>
+                        {services.history.location.pathname}
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            </EuiCallOut>
+          </KibanaThemeProvider>
         )
       );
 

diff --git a/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx b/src/plugins/visualize/public/application/utils/use/use_visualize_app_state.tsx
@@ -12,7 +12,11 @@ import { map } from 'rxjs/operators';
 import { EventEmitter } from 'events';
 import { i18n } from '@kbn/i18n';
 
-import { MarkdownSimple, toMountPoint } from '../../../../../kibana_react/public';
+import {
+  KibanaThemeProvider,
+  MarkdownSimple,
+  toMountPoint,
+} from '../../../../../kibana_react/public';
 import { migrateLegacyQuery } from '../migrate_legacy_query';
 import { esFilters, connectToQueryState } from '../../../../../data/public';
 import {
@@ -121,7 +125,11 @@ export const useVisualizeAppState = (
               title: i18n.translate('visualize.visualizationLoadingFailedErrorMessage', {
                 defaultMessage: 'Failed to load the visualization',
               }),
-              text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>),
+              text: toMountPoint(
+                <KibanaThemeProvider theme$={services.theme.theme$}>
+                  <MarkdownSimple>{error.message}</MarkdownSimple>
+                </KibanaThemeProvider>
+              ),
             });
 
             services.history.replace(