[App Search] Add EuiThemeProvider to fix crashing bug (elastic#124993)

(cherry picked from commit 449f8e6)
kibanamachine · Feb 9, 2022 · 28adc38 · 28adc38
1 parent 9cf84f1
commit 28adc38
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 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,18 +9,17 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { LogStream } from '../../../../../infra/public';
-
 import { EntSearchLogStream } from './';
 
 describe('EntSearchLogStream', () => {
   const mockDateNow = jest.spyOn(global.Date, 'now').mockReturnValue(160000000);
 
   describe('renders with default props', () => {
-    const wrapper = shallow(<EntSearchLogStream />);
+    /** As a result of the theme provider being added, we have to extract the child component to correctly assert */
+    const wrapper = shallow(shallow(<EntSearchLogStream />).prop('children'));
 
-    it('renders a LogStream component', () => {
-      expect(wrapper.type()).toEqual(LogStream);
+    it('renders a LogStream (wrapped in React.Suspense) component', () => {
+      expect(wrapper.type()).toEqual(React.Suspense);
     });
 
     it('renders with the enterprise search log source ID', () => {
@@ -36,7 +35,9 @@ describe('EntSearchLogStream', () => {
   describe('renders custom props', () => {
     it('overrides the default props', () => {
       const wrapper = shallow(
-        <EntSearchLogStream sourceId="test" startTimestamp={1} endTimestamp={2} />
+        shallow(<EntSearchLogStream sourceId="test" startTimestamp={1} endTimestamp={2} />).prop(
+          'children'
+        )
       );
 
       expect(wrapper.prop('sourceId')).toEqual('test');
@@ -45,23 +46,25 @@ describe('EntSearchLogStream', () => {
     });
 
     it('allows passing a custom hoursAgo that modifies the default start timestamp', () => {
-      const wrapper = shallow(<EntSearchLogStream hoursAgo={1} />);
+      const wrapper = shallow(shallow(<EntSearchLogStream hoursAgo={1} />).prop('children'));
 
       expect(wrapper.prop('startTimestamp')).toEqual(156400000);
       expect(wrapper.prop('endTimestamp')).toEqual(160000000);
     });
 
     it('allows passing any prop that the LogStream component takes', () => {
       const wrapper = shallow(
-        <EntSearchLogStream
-          height={500}
-          highlight="some-log-id"
-          columns={[
-            { type: 'timestamp', header: 'Timestamp' },
-            { type: 'field', field: 'log.level', header: 'Log level', width: 300 },
-          ]}
-          filters={[]}
-        />
+        shallow(
+          <EntSearchLogStream
+            height={500}
+            highlight="some-log-id"
+            columns={[
+              { type: 'timestamp', header: 'Timestamp' },
+              { type: 'field', field: 'log.level', header: 'Log level', width: 300 },
+            ]}
+            filters={[]}
+          />
+        ).prop('children')
       );
 
       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,6 +7,7 @@
 
 import React from 'react';
 
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 import { LogStream, LogStreamProps } from '../../../../../infra/public';
 
 import { LOGS_SOURCE_ID } from '../../../../common/constants';
@@ -37,11 +38,13 @@ export const EntSearchLogStream: React.FC<Props> = ({
   if (!startTimestamp) startTimestamp = endTimestamp - hoursAgo * 60 * 60 * 1000;
 
   return (
-    <LogStream
-      sourceId={LOGS_SOURCE_ID}
-      startTimestamp={startTimestamp}
-      endTimestamp={endTimestamp}
-      {...props}
-    />
+    <EuiThemeProvider>
+      <LogStream
+        sourceId={LOGS_SOURCE_ID}
+        startTimestamp={startTimestamp}
+        endTimestamp={endTimestamp}
+        {...props}
+      />
+    </EuiThemeProvider>
   );
 };