[Enterprise Search UI] Remove usage of deprecated React rendering uti…

…lities (#181097) ## Summary Partially addresses elastic/kibana-team#805 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This focuses on code within **Enterprise Search**. <img width="1196" alt="image" src="https://github.com/elastic/kibana/assets/908371/7f8d3707-94f0-4746-8dd5-dd858ce027f9"> Note: this also makes inclusion of `i18n` and `analytics` dependencies consistent. Analytics is an optional dependency for the SharedUX modules, which wrap `KibanaErrorBoundaryProvider` and is designed to capture telemetry about errors that are caught in the error boundary. ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
elastic · Apr 25, 2024 · 4ca36e8 · 4ca36e8
1 parent f1ecb18
commit 4ca36e8
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 61 deletions.
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.test.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
+import { LogStream } from '@kbn/logs-shared-plugin/public';
+
 import { EntSearchLogStream } from '.';
 
 const fakeSourceId = 'fake-source-id';
@@ -17,15 +19,12 @@ describe('EntSearchLogStream', () => {
   const mockDateNow = jest.spyOn(global.Date, 'now').mockReturnValue(160000000);
 
   describe('renders with default props', () => {
-    /** As a result of the theme provider being added, we have to extract the child component to correctly assert */
     const wrapper = shallow(
-      shallow(
-        <EntSearchLogStream logView={{ type: 'log-view-reference', logViewId: 'default' }} />
-      ).prop('children')
+      <EntSearchLogStream logView={{ type: 'log-view-reference', logViewId: 'default' }} />
     );
 
     it('renders a LogStream (wrapped in React.Suspense) component', () => {
-      expect(wrapper.type()).toEqual(React.Suspense);
+      expect(wrapper.type()).toEqual(LogStream);
     });
 
     it('renders with the empty sourceId', () => {
@@ -41,13 +40,11 @@ describe('EntSearchLogStream', () => {
   describe('renders custom props', () => {
     it('overrides the default props', () => {
       const wrapper = shallow(
-        shallow(
-          <EntSearchLogStream
-            logView={{ type: 'log-view-reference', logViewId: 'test' }}
-            startTimestamp={1}
-            endTimestamp={2}
-          />
-        ).prop('children')
+        <EntSearchLogStream
+          logView={{ type: 'log-view-reference', logViewId: 'test' }}
+          startTimestamp={1}
+          endTimestamp={2}
+        />
       );
 
       expect(wrapper.prop('logView')).toEqual({ type: 'log-view-reference', logViewId: 'test' });
@@ -57,12 +54,10 @@ describe('EntSearchLogStream', () => {
 
     it('allows passing a custom hoursAgo that modifies the default start timestamp', () => {
       const wrapper = shallow(
-        shallow(
-          <EntSearchLogStream
-            logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
-            hoursAgo={1}
-          />
-        ).prop('children')
+        <EntSearchLogStream
+          logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
+          hoursAgo={1}
+        />
       );
 
       expect(wrapper.prop('startTimestamp')).toEqual(156400000);
@@ -71,18 +66,16 @@ describe('EntSearchLogStream', () => {
 
     it('allows passing any prop that the LogStream component takes', () => {
       const wrapper = shallow(
-        shallow(
-          <EntSearchLogStream
-            logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
-            height={500}
-            highlight="some-log-id"
-            columns={[
-              { type: 'timestamp', header: 'Timestamp' },
-              { type: 'field', field: 'log.level', header: 'Log level', width: 300 },
-            ]}
-            filters={[]}
-          />
-        ).prop('children')
+        <EntSearchLogStream
+          logView={{ type: 'log-view-reference', logViewId: fakeSourceId }}
+          height={500}
+          highlight="some-log-id"
+          columns={[
+            { type: 'timestamp', header: 'Timestamp' },
+            { type: 'field', field: 'log.level', header: 'Log level', width: 300 },
+          ]}
+          filters={[]}
+        />
       );
 
       expect(wrapper.prop('height')).toEqual(500);

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/log_stream/log_stream.tsx
@@ -7,7 +7,6 @@
 
 import React from 'react';
 
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { LogStream, LogStreamProps } from '@kbn/logs-shared-plugin/public';
 
 /*
@@ -35,9 +34,5 @@ export const EntSearchLogStream: React.FC<Props> = ({
   if (!endTimestamp) endTimestamp = Date.now();
   if (!startTimestamp) startTimestamp = endTimestamp - hoursAgo * 60 * 60 * 1000;
 
-  return (
-    <EuiThemeProvider>
-      <LogStream startTimestamp={startTimestamp} endTimestamp={endTimestamp} {...props} />
-    </EuiThemeProvider>
-  );
+  return <LogStream startTimestamp={startTimestamp} endTimestamp={endTimestamp} {...props} />;
 };
diff --git a/x-pack/plugins/enterprise_search/tsconfig.json b/x-pack/plugins/enterprise_search/tsconfig.json
@@ -64,7 +64,6 @@
     "@kbn/core-http-browser-mocks",
     "@kbn/core-application-browser",
     "@kbn/core-capabilities-common",
-    "@kbn/react-kibana-context-theme",
     "@kbn/code-editor",
     "@kbn/console-plugin",
     "@kbn/core-notifications-browser",
@@ -73,6 +72,7 @@
     "@kbn/search-playground",
     "@kbn/utility-types",
     "@kbn/index-management",
-    "@kbn/deeplinks-search"
+    "@kbn/deeplinks-search",
+    "@kbn/react-kibana-context-theme"
   ]
 }
diff --git a/x-pack/plugins/search_playground/public/application.tsx b/x-pack/plugins/search_playground/public/application.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart, AppMountParameters } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { BrowserRouter as Router } from '@kbn/shared-ux-router';
@@ -27,7 +27,7 @@ export const renderApp = (
   const navigation = services.navigation;
 
   ReactDOM.render(
-    <KibanaThemeProvider theme={core.theme}>
+    <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <I18nProvider>
           <Router basename={appBasePath}>
@@ -57,7 +57,7 @@ export const renderApp = (
           </Router>
         </I18nProvider>
       </KibanaContextProvider>
-    </KibanaThemeProvider>,
+    </KibanaRenderContextProvider>,
     element
   );
 

diff --git a/x-pack/plugins/search_playground/tsconfig.json b/x-pack/plugins/search_playground/tsconfig.json
@@ -20,7 +20,6 @@
     "@kbn/ml-response-stream",
     "@kbn/security-plugin",
     "@kbn/user-profile-components",
-    "@kbn/react-kibana-context-theme",
     "@kbn/shared-ux-router",
     "@kbn/shared-ux-page-kibana-template",
     "@kbn/navigation-plugin",
@@ -34,7 +33,8 @@
     "@kbn/cases-plugin",
     "@kbn/triggers-actions-ui-plugin",
     "@kbn/elastic-assistant-common",
-    "@kbn/logging"
+    "@kbn/logging",
+    "@kbn/react-kibana-context-render"
   ],
   "exclude": [
     "target/**/*",

diff --git a/x-pack/plugins/serverless_search/public/application/connectors.tsx b/x-pack/plugins/serverless_search/public/application/connectors.tsx
@@ -9,7 +9,7 @@ import { CoreStart } from '@kbn/core-lifecycle-browser';
 
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
@@ -28,7 +28,7 @@ export async function renderApp(
   const { ConnectorsRouter } = await import('./components/connectors_router');
 
   ReactDOM.render(
-    <KibanaThemeProvider theme={core.theme}>
+    <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools initialIsOpen={false} />
@@ -39,7 +39,7 @@ export async function renderApp(
           </I18nProvider>
         </QueryClientProvider>
       </KibanaContextProvider>
-    </KibanaThemeProvider>,
+    </KibanaRenderContextProvider>,
     element
   );
   return () => ReactDOM.unmountComponentAtNode(element);

diff --git a/x-pack/plugins/serverless_search/public/application/elasticsearch.tsx b/x-pack/plugins/serverless_search/public/application/elasticsearch.tsx
@@ -9,10 +9,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { Route, Router, Routes } from '@kbn/shared-ux-router';
 import { ServerlessSearchContext } from './hooks/use_kibana';
 
@@ -24,22 +23,20 @@ export async function renderApp(
 ) {
   const { ElasticsearchOverview } = await import('./components/overview');
   ReactDOM.render(
-    <KibanaThemeProvider theme={core.theme}>
+    <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools initialIsOpen={false} />
-          <I18nProvider>
-            <Router history={services.history}>
-              <Routes>
-                <Route>
-                  <ElasticsearchOverview />
-                </Route>
-              </Routes>
-            </Router>
-          </I18nProvider>
+          <Router history={services.history}>
+            <Routes>
+              <Route>
+                <ElasticsearchOverview />
+              </Route>
+            </Routes>
+          </Router>
         </QueryClientProvider>
       </KibanaContextProvider>
-    </KibanaThemeProvider>,
+    </KibanaRenderContextProvider>,
     element
   );
   return () => ReactDOM.unmountComponentAtNode(element);

diff --git a/x-pack/plugins/serverless_search/public/test/test_utils.tsx b/x-pack/plugins/serverless_search/public/test/test_utils.tsx
@@ -8,7 +8,8 @@
 import React, { ReactElement } from 'react';
 import { render, RenderOptions } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { I18nProvider } from '@kbn/i18n-react';
 
 import { coreMock } from '@kbn/core/public/mocks';
@@ -33,7 +34,7 @@ const queryClient = new QueryClient({
 
 const AllTheProviders: React.FC = ({ children }) => {
   return (
-    <KibanaThemeProvider theme$={core.theme.theme$}>
+    <KibanaThemeProvider theme={core.theme}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <QueryClientProvider client={queryClient}>
           <I18nProvider>{children}</I18nProvider>

diff --git a/x-pack/plugins/serverless_search/tsconfig.json b/x-pack/plugins/serverless_search/tsconfig.json
@@ -47,5 +47,6 @@
     "@kbn/discover-plugin",
     "@kbn/search-connectors-plugin",
     "@kbn/index-management",
+    "@kbn/react-kibana-context-render",
   ]
 }