[Security Solution] Adds getMockTheme function (#92840) (#94326)

Closes elastic/security-team#866.
# Conflicts:
#	x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx

Author: ecezalp

x-pack/plugins/security_solution/public/app/app.tsx

@@ -6,15 +6,12 @@
  */
 
 import { History } from 'history';
-import React, { memo, useMemo, FC } from 'react';
+import React, { memo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { Store, Action } from 'redux';
 import { Provider as ReduxStoreProvider } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { AppLeaveHandler } from '../../../../../src/core/public';
 
 import { ManageUserInfo } from '../detections/components/user_info';
@@ -30,6 +27,7 @@ import { ApolloClientContext } from '../common/utils/apollo_context';
 import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
 import { StartServices } from '../types';
 import { PageRouter } from './routes';
+import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 
 interface StartAppComponent extends AppFrontendLibs {
   children: React.ReactNode;
@@ -46,15 +44,7 @@ const StartAppComponent: FC<StartAppComponent> = ({
   store,
 }) => {
   const { i18n } = useKibana().services;
-
   const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
-  const theme = useMemo(
-    () => ({
-      eui: darkMode ? euiDarkVars : euiLightVars,
-      darkMode,
-    }),
-    [darkMode]
-  );
 
   return (
     <EuiErrorBoundary>
@@ -64,15 +54,15 @@ const StartAppComponent: FC<StartAppComponent> = ({
             <ReduxStoreProvider store={store}>
               <ApolloProvider client={apolloClient}>
                 <ApolloClientContext.Provider value={apolloClient}>
-                  <ThemeProvider theme={theme}>
+                  <EuiThemeProvider darkMode={darkMode}>
                     <MlCapabilitiesProvider>
                       <ManageUserInfo>
                         <PageRouter history={history} onAppLeave={onAppLeave}>
                           {children}
                         </PageRouter>
                       </ManageUserInfo>
                     </MlCapabilitiesProvider>
-                  </ThemeProvider>
+                  </EuiThemeProvider>
                   <ErrorToastDispatcher />
                   <GlobalToaster />
                 </ApolloClientContext.Provider>

x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx

@@ -10,8 +10,9 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 
 import { AndOrBadge } from './';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
-const mockTheme = { eui: { euiColorLightShade: '#ece' } };
+const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
 
 describe('AndOrBadge', () => {
   test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {

x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx

@@ -10,8 +10,9 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 
 import { RoundedBadgeAntenna } from './rounded_badge_antenna';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
-const mockTheme = { eui: { euiColorLightShade: '#ece' } };
+const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
 
 describe('RoundedBadgeAntenna', () => {
   test('it renders top and bottom antenna bars', () => {

x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx

@@ -18,9 +18,10 @@ import {
   getEmptyValue,
   getOrEmptyTag,
 } from '.';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
 describe('EmptyValue', () => {
-  const mockTheme = { eui: { euiColorMediumShade: '#ece' } };
+  const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
 
   test('it renders against snapshot', () => {
     const wrapper = shallow(<p>{getEmptyString()}</p>);

x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx

@@ -30,8 +30,9 @@ import {
 } from '../../../../../common/detection_engine/schemas/response/rules_schema.mocks';
 import { useRuleAsync } from '../../../../detections/containers/detection_engine/rules/use_rule_async';
 import { AlertData } from '../types';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
   eui: {
     euiBreakpoints: {
       l: '1200px',
@@ -40,7 +41,7 @@ const mockTheme = {
       m: '10px',
     },
   },
-};
+});
 
 jest.mock('../../../../detections/containers/detection_engine/alerts/use_signal_index');
 jest.mock('../../../../common/lib/kibana');

x-pack/plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx

@@ -10,8 +10,9 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 
 import { BuilderAndBadgeComponent } from './and_badge';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = { eui: { euiColorLightShade: '#ece' } };
+const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
 
 describe('BuilderAndBadgeComponent', () => {
   test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => {

x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx

@@ -16,12 +16,13 @@ import { getEntryMatchMock } from '../../../../../../lists/common/schemas/types/
 import { getEntryMatchAnyMock } from '../../../../../../lists/common/schemas/types/entry_match_any.mock';
 
 import { BuilderExceptionListItemComponent } from './exception_item';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
   eui: {
     euiColorLightShade: '#ece',
   },
-};
+});
 
 jest.mock('../../../../common/lib/kibana');
 

x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx

@@ -21,12 +21,13 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { getEmptyValue } from '../../empty_value';
 
 import { ExceptionBuilderComponent } from './';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
   eui: {
     euiColorLightShade: '#ece',
   },
-};
+});
 
 jest.mock('../../../../common/lib/kibana');
 

x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx

@@ -27,8 +27,9 @@ import {
   getRulesSchemaMock,
 } from '../../../../../common/detection_engine/schemas/response/rules_schema.mocks';
 import { useRuleAsync } from '../../../../detections/containers/detection_engine/rules/use_rule_async';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
   eui: {
     euiBreakpoints: {
       l: '1200px',
@@ -37,7 +38,7 @@ const mockTheme = {
       m: '10px',
     },
   },
-};
+});
 
 jest.mock('../../../../common/lib/kibana');
 jest.mock('../../../../detections/containers/detection_engine/rules');

x-pack/plugins/security_solution/public/common/components/exceptions/exceptionable_fields.json

@@ -129,4 +129,4 @@
   "user.hash",
   "user.id",
   "Ransomware.feature"
-]
+]