[Discover] Fix dark theme issues by removing deprecated components (e…

…lastic#163387) - Closes elastic#163332 ## Summary This PR fixes dark mode issues which surfaced after elastic#161914 and elastic#163103 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
rshen91 · Aug 11, 2023 · 74911b6 · 74911b6
1 parent 987a850
commit 74911b6
Show file tree

Hide file tree

Showing 25 changed files with 192 additions and 203 deletions.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -28,7 +28,7 @@ pageLoadAssetSize:
   dashboard: 82025
   dashboardEnhanced: 65646
   data: 454087
-  dataViewEditor: 12000
+  dataViewEditor: 13000
   dataViewFieldEditor: 27000
   dataViewManagement: 5000
   dataViews: 47000

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/application/render.tsx b/src/plugins/data/public/search/session/sessions_mgmt/application/render.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { AppDependencies } from '..';
 import { SearchSessionsMgmtMain } from '../components/main';
@@ -20,18 +21,17 @@ export const renderApp = (
     return () => undefined;
   }
 
-  const { Context: I18nContext } = i18n;
   // uiSettings is required by the listing table to format dates in the timezone from Settings
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
   });
 
   render(
-    <I18nContext>
+    <KibanaRenderContextProvider theme={homeDeps.core.theme} i18n={i18n}>
       <KibanaReactContextProvider>
         <SearchSessionsMgmtMain {...homeDeps} timezone={uiSettings.get('dateFormat:tz')} />
       </KibanaReactContextProvider>
-    </I18nContext>,
+    </KibanaRenderContextProvider>,
     elem
   );
 

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/components/main.tsx b/src/plugins/data/public/search/session/sessions_mgmt/components/main.tsx
@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { CoreStart, HttpStart } from '@kbn/core/public';
-import React from 'react';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import type { SearchSessionsMgmtAPI } from '../lib/api';
 import type { AsyncSearchIntroDocumentation } from '../lib/documentation';
 import { SearchSessionsMgmtTable } from './table';
@@ -30,7 +29,7 @@ interface Props {
 
 export function SearchSessionsMgmtMain({ documentation, ...tableProps }: Props) {
   return (
-    <KibanaThemeProvider theme$={tableProps.core.theme.theme$}>
+    <>
       <EuiPageHeader
         pageTitle={
           <FormattedMessage
@@ -61,6 +60,6 @@ export function SearchSessionsMgmtMain({ documentation, ...tableProps }: Props)
 
       <EuiSpacer size="l" />
       <SearchSessionsMgmtTable data-test-subj="search-sessions-mgmt-table" {...tableProps} />
-    </KibanaThemeProvider>
+    </>
   );
 }
diff --git a/src/plugins/data/tsconfig.json b/src/plugins/data/tsconfig.json
@@ -48,7 +48,8 @@
     "@kbn/core-application-browser",
     "@kbn/core-saved-objects-server",
     "@kbn/core-saved-objects-utils-server",
-    "@kbn/data-service"
+    "@kbn/data-service",
+    "@kbn/react-kibana-context-render"
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/data_view_editor/public/open_editor.tsx b/src/plugins/data_view_editor/public/open_editor.tsx
@@ -8,11 +8,11 @@
 
 import React from 'react';
 import { CoreStart, OverlayRef } from '@kbn/core/public';
-import { I18nProvider } from '@kbn/i18n-react';
 import type { DataViewsServicePublic } from '@kbn/data-views-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 
-import { createKibanaReactContext, toMountPoint, DataPublicPluginStart } from './shared_imports';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { createKibanaReactContext, DataPublicPluginStart } from './shared_imports';
 
 import { CloseEditor, DataViewEditorContext, DataViewEditorProps } from './types';
 import { DataViewEditorLazy } from './components/data_view_editor_lazy';
@@ -67,22 +67,20 @@ export const getEditorOpener =
       overlayRef = overlays.openFlyout(
         toMountPoint(
           <KibanaReactContextProvider>
-            <I18nProvider>
-              <DataViewEditorLazy
-                onSave={onSaveIndexPattern}
-                onCancel={() => {
-                  closeEditor();
-                  onCancel();
-                }}
-                editData={editData}
-                defaultTypeIsRollup={defaultTypeIsRollup}
-                requireTimestampField={requireTimestampField}
-                allowAdHocDataView={allowAdHocDataView}
-                showManagementLink={Boolean(editData && editData.isPersisted())}
-              />
-            </I18nProvider>
+            <DataViewEditorLazy
+              onSave={onSaveIndexPattern}
+              onCancel={() => {
+                closeEditor();
+                onCancel();
+              }}
+              editData={editData}
+              defaultTypeIsRollup={defaultTypeIsRollup}
+              requireTimestampField={requireTimestampField}
+              allowAdHocDataView={allowAdHocDataView}
+              showManagementLink={Boolean(editData && editData.isPersisted())}
+            />
           </KibanaReactContextProvider>,
-          { theme$: core.theme.theme$ }
+          { theme: core.theme, i18n: core.i18n }
         ),
         {
           hideCloseButton: true,

diff --git a/src/plugins/data_view_editor/public/plugin.test.tsx b/src/plugins/data_view_editor/public/plugin.test.tsx
@@ -64,16 +64,15 @@ describe('DataViewEditorPlugin', () => {
 
     expect(openFlyout).toHaveBeenCalled();
 
-    const [[arg]] = openFlyout.mock.calls;
-    const i18nProvider = arg.props.children;
-    expect(i18nProvider.props.children.type).toBe(DataViewEditorLazy);
+    const [[{ __reactMount__ }]] = openFlyout.mock.calls;
+    expect(__reactMount__.props.children.type).toBe(DataViewEditorLazy);
 
     // We force call the "onSave" prop from the <RuntimeFieldEditorFlyoutContent /> component
     // and make sure that the the spy is being called.
     // Note: we are testing implementation details, if we change or rename the "onSave" prop on
     // the component, we will need to update this test accordingly.
-    expect(i18nProvider.props.children.props.onSave).toBeDefined();
-    i18nProvider.props.children.props.onSave();
+    expect(__reactMount__.props.children.props.onSave).toBeDefined();
+    __reactMount__.props.children.props.onSave();
     expect(onSaveSpy).toHaveBeenCalled();
   });
 

diff --git a/src/plugins/data_view_editor/tsconfig.json b/src/plugins/data_view_editor/tsconfig.json
@@ -18,6 +18,7 @@
     "@kbn/test-jest-helpers",
     "@kbn/ui-theme",
     "@kbn/kibana-utils-plugin",
+    "@kbn/react-kibana-mount",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/data_view_field_editor/public/open_editor.tsx b/src/plugins/data_view_field_editor/public/open_editor.tsx
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import { CoreStart, OverlayRef } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { FieldEditorLoader } from './components/field_editor_loader';
 import { euiFlyoutClassname } from './constants';
 import type { ApiService } from './lib/api';
@@ -21,7 +22,7 @@ import type {
   FieldFormatsStart,
   DataViewField,
 } from './shared_imports';
-import { createKibanaReactContext, toMountPoint } from './shared_imports';
+import { createKibanaReactContext } from './shared_imports';
 import type { CloseEditor, Field, InternalFieldType, PluginStart } from './types';
 
 /**
@@ -196,7 +197,7 @@ export const getFieldEditorOpener =
               uiSettings={uiSettings}
             />
           </KibanaReactContextProvider>,
-          { theme$: core.theme.theme$ }
+          { theme: core.theme, i18n: core.i18n }
         ),
         {
           className: euiFlyoutClassname,

diff --git a/src/plugins/data_view_field_editor/public/plugin.test.tsx b/src/plugins/data_view_field_editor/public/plugin.test.tsx
@@ -67,15 +67,15 @@ describe('DataViewFieldEditorPlugin', () => {
 
     expect(openFlyout).toHaveBeenCalled();
 
-    const [[arg]] = openFlyout.mock.calls;
-    expect(arg.props.children.type).toBe(FieldEditorLoader);
+    const [[{ __reactMount__ }]] = openFlyout.mock.calls;
+    expect(__reactMount__.props.children.type).toBe(FieldEditorLoader);
 
     // We force call the "onSave" prop from the <RuntimeFieldEditorFlyoutContent /> component
     // and make sure that the the spy is being called.
     // Note: we are testing implementation details, if we change or rename the "onSave" prop on
     // the component, we will need to update this test accordingly.
-    expect(arg.props.children.props.onSave).toBeDefined();
-    arg.props.children.props.onSave();
+    expect(__reactMount__.props.children.props.onSave).toBeDefined();
+    __reactMount__.props.children.props.onSave();
     expect(onSaveSpy).toHaveBeenCalled();
   });
 

diff --git a/src/plugins/data_view_field_editor/tsconfig.json b/src/plugins/data_view_field_editor/tsconfig.json
@@ -26,6 +26,7 @@
     "@kbn/field-types",
     "@kbn/utility-types",
     "@kbn/config-schema",
+    "@kbn/react-kibana-mount",
   ],
   "exclude": [
     "target/**/*",

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
@@ -12,10 +12,9 @@ import { Redirect } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 
 import { i18n } from '@kbn/i18n';
-import { I18nProvider } from '@kbn/i18n-react';
 import { StartServicesAccessor } from '@kbn/core/public';
-
-import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { ManagementAppMountParams } from '@kbn/management-plugin/public';
 import {
   IndexPatternTableWithRouter,
@@ -40,7 +39,18 @@ export async function mountManagementSection(
   params: ManagementAppMountParams
 ) {
   const [
-    { application, chrome, uiSettings, settings, notifications, overlays, http, docLinks, theme },
+    {
+      application,
+      chrome,
+      uiSettings,
+      settings,
+      notifications,
+      overlays,
+      http,
+      docLinks,
+      theme,
+      i18n: coreI18n,
+    },
     {
       data,
       dataViewFieldEditor,
@@ -83,29 +93,27 @@ export async function mountManagementSection(
   };
 
   ReactDOM.render(
-    <KibanaContextProvider services={deps}>
-      <KibanaThemeProvider theme$={theme.theme$}>
-        <I18nProvider>
-          <Router history={params.history}>
-            <Routes>
-              <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>
-            </Routes>
-          </Router>
-        </I18nProvider>
-      </KibanaThemeProvider>
-    </KibanaContextProvider>,
+    <KibanaRenderContextProvider theme={theme} i18n={coreI18n}>
+      <KibanaContextProvider services={deps}>
+        <Router history={params.history}>
+          <Routes>
+            <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>
+          </Routes>
+        </Router>
+      </KibanaContextProvider>
+    </KibanaRenderContextProvider>,
     params.element
   );
 

diff --git a/src/plugins/data_view_management/tsconfig.json b/src/plugins/data_view_management/tsconfig.json
@@ -34,6 +34,7 @@
     "@kbn/config-schema",
     "@kbn/shared-ux-router",
     "@kbn/core-ui-settings-browser",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/discover/public/application/context/hooks/use_context_app_fetch.tsx b/src/plugins/discover/public/application/context/hooks/use_context_app_fetch.tsx
@@ -7,7 +7,8 @@
  */
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { MarkdownSimple, toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { SortDirection } from '@kbn/data-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -42,8 +43,7 @@ export function useContextAppFetch({
   useNewFieldsApi,
 }: ContextAppFetchProps) {
   const services = useDiscoverServices();
-  const { uiSettings: config, data, toastNotifications, filterManager, core } = services;
-  const { theme$ } = core.theme;
+  const { uiSettings: config, data, toastNotifications, filterManager } = services;
 
   const searchSource = useMemo(() => {
     return data.search.searchSource.createEmpty();
@@ -70,16 +70,9 @@ export function useContextAppFetch({
       setState(createError('anchorStatus', FailureReason.INVALID_TIEBREAKER));
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(
-          wrapWithTheme(
-            <MarkdownSimple>
-              {i18n.translate('discover.context.invalidTieBreakerFiledSetting', {
-                defaultMessage: 'Invalid tie breaker field setting',
-              })}
-            </MarkdownSimple>,
-            theme$
-          )
-        ),
+        text: i18n.translate('discover.context.invalidTieBreakerFiledSetting', {
+          defaultMessage: 'Invalid tie breaker field setting',
+        }),
       });
       return;
     }
@@ -108,7 +101,10 @@ export function useContextAppFetch({
       setState(createError('anchorStatus', FailureReason.UNKNOWN, error));
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(wrapWithTheme(<MarkdownSimple>{error.message}</MarkdownSimple>, theme$)),
+        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+          theme: services.core.theme,
+          i18n: services.core.i18n,
+        }),
       });
     }
   }, [
@@ -120,7 +116,6 @@ export function useContextAppFetch({
     anchorId,
     searchSource,
     useNewFieldsApi,
-    theme$,
   ]);
 
   const fetchSurroundingRows = useCallback(
@@ -161,9 +156,10 @@ export function useContextAppFetch({
         setState(createError(statusKey, FailureReason.UNKNOWN, error));
         toastNotifications.addDanger({
           title: errorTitle,
-          text: toMountPoint(
-            wrapWithTheme(<MarkdownSimple>{error.message}</MarkdownSimple>, theme$)
-          ),
+          text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+            theme: services.core.theme,
+            i18n: services.core.i18n,
+          }),
         });
       }
     },
@@ -177,7 +173,6 @@ export function useContextAppFetch({
       dataView,
       toastNotifications,
       useNewFieldsApi,
-      theme$,
       data,
     ]
   );