[Security Solution] Adds getMockTheme function (#92840)

Closes elastic/security-team#866.

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"
-]
+]

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

@@ -13,12 +13,13 @@ import moment from 'moment-timezone';
 import { ExceptionDetails } from './exception_details';
 import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
 import { getCommentsArrayMock } from '../../../../../../../lists/common/schemas/types/comment.mock';
+import { getMockTheme } from '../../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorLightestShade: '#ece',
  },
-};
+});
 
 describe('ExceptionDetails', () => {
  beforeEach(() => {

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

@@ -12,8 +12,11 @@ import { mount } from 'enzyme';
 import { ExceptionEntries } from './exception_entries';
 import { getFormattedEntryMock } from '../../exceptions.mock';
 import { getEmptyValue } from '../../../empty_value';
+import { getMockTheme } from '../../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = { eui: { euiSize: '10px', euiColorPrimary: '#ece', euiColorDanger: '#ece' } };
+const mockTheme = getMockTheme({
+ eui: { euiSize: '10px', euiColorPrimary: '#ece', euiColorDanger: '#ece' },
+});
 
 describe('ExceptionEntries', () => {
  test('it does NOT render the and badge if only one exception item entry exists', () => {

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

@@ -12,17 +12,18 @@ import { mount } from 'enzyme';
 import { ExceptionItem } from './';
 import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
 import { getCommentsArrayMock } from '../../../../../../../lists/common/schemas/types/comment.mock';
+import { getMockTheme } from '../../../../lib/kibana/kibana_react.mock';
 
 jest.mock('../../../../lib/kibana');
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorDanger: '#ece',
  euiColorLightestShade: '#ece',
  euiColorPrimary: '#ece',
- euiFontWeightSemiBold: 'bold',
+ euiFontWeightSemiBold: 1,
  },
-};
+});
 
 describe('ExceptionItem', () => {
  it('it renders ExceptionDetails and ExceptionEntries', () => {

x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx

@@ -10,8 +10,9 @@ import { ThemeProvider } from 'styled-components';
 import { mountWithIntl } from '@kbn/test/jest';
 
 import { ExceptionsViewerUtility } from './exceptions_utility';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiBreakpoints: {
  l: '1200px',
@@ -21,7 +22,7 @@ const mockTheme = {
  },
  euiBorderThin: '1px solid #ece',
  },
-};
+});
 
 describe('ExceptionsViewerUtility', () => {
  it('it renders correct pluralized text when more than one exception exists', () => {

x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.test.tsx

@@ -12,14 +12,15 @@ import { mount } from 'enzyme';
 import * as i18n from '../translations';
 import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
 import { ExceptionsViewerItems } from './exceptions_viewer_items';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiSize: '10px',
  euiColorPrimary: '#ece',
  euiColorDanger: '#ece',
  },
-};
+});
 
 describe('ExceptionsViewerItems', () => {
  it('it renders empty prompt if "showEmpty" is "true"', () => {

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

@@ -18,8 +18,9 @@ import {
 } from '../../../../../public/lists_plugin_deps';
 import { getExceptionListSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_schema.mock';
 import { getFoundExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/found_exception_list_item_schema.mock';
+import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorEmptyShade: '#ece',
  euiBreakpoints: {
@@ -29,7 +30,7 @@ const mockTheme = {
  m: '10px',
  },
  },
-};
+});
 
 jest.mock('../../../../common/lib/kibana');
 jest.mock('../../../../../public/lists_plugin_deps');

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

@@ -11,14 +11,15 @@ import { ThemeProvider } from 'styled-components';
 
 import { NO_ALERT_INDEX } from '../../../../common/constants';
 import { ModalInspectQuery, formatIndexPatternRequested } from './modal';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiBreakpoints: {
  l: '1200px',
  },
  },
-};
+});
 
 const request =
  '{"index": ["auditbeat-*","filebeat-*","packetbeat-*","winlogbeat-*"],"allowNoIndices": true, "ignoreUnavailable": true, "body": { "aggregations": {"hosts": {"cardinality": {"field": "host.name" } }, "hosts_histogram": {"auto_date_histogram": {"field": "@timestamp","buckets": "6"},"aggs": { "count": {"cardinality": {"field": "host.name" }}}}}, "query": {"bool": {"filter": [{"range": { "@timestamp": {"gte": 1562290224506,"lte": 1562376624506 }}}]}}, "size": 0, "track_total_hits": false}}';

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

@@ -14,14 +14,15 @@ import { Direction } from '../../../graphql/types';
 import { BasicTableProps, PaginatedTable } from './index';
 import { getHostsColumns, mockData, rowItems, sortedHosts } from './index.mock';
 import { ThemeProvider } from 'styled-components';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
 jest.mock('react', () => {
  const r = jest.requireActual('react');
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return { ...r, memo: (x: any) => x };
 });
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorEmptyShade: '#ece',
  euiSizeL: '10px',
@@ -32,7 +33,7 @@ const mockTheme = {
  m: '10px',
  },
  },
-};
+});
 
 describe('Paginated Table Component', () => {
  let loadPage: jest.Mock<number>;

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

@@ -31,18 +31,19 @@ import {
  mockNarrowDateRange,
 } from '../../../network/components/kpi_network/mock';
 import {
- mockGlobalState,
  apolloClientObservable,
- SUB_PLUGINS_REDUCER,
- kibanaObservable,
  createSecuritySolutionStorageMock,
+ kibanaObservable,
+ mockGlobalState,
+ SUB_PLUGINS_REDUCER,
 } from '../../mock';
 import { State, createStore } from '../../store';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import {
  HostsKpiStrategyResponse,
  NetworkKpiStrategyResponse,
 } from '../../../../common/search_strategy';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
 const from = '2019-06-15T06:00:00.000Z';
 const to = '2019-06-18T06:00:00.000Z';
@@ -56,7 +57,7 @@ jest.mock('../charts/barchart', () => {
 });
 
 describe('Stat Items Component', () => {
- const mockTheme = { eui: { euiColorMediumShade: '#ece' } };
+ const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
  const state: State = mockGlobalState;
  const { storage } = createSecuritySolutionStorageMock();
  const store = createStore(

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

@@ -10,12 +10,13 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 
 import { AndBadgeComponent } from './and_badge';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorLightShade: '#ece',
  },
-};
+});
 
 describe('AndBadgeComponent', () => {
  test('it renders entryItemIndexItemEntryFirstRowAndBadge for very first item', () => {

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

@@ -17,12 +17,13 @@ import { useKibana } from '../../../common/lib/kibana';
 import { ThreatMatchComponent } from './';
 import { ThreatMapEntries } from './types';
 import { IndexPattern } from 'src/plugins/data/public';
+import { getMockTheme } from '../../lib/kibana/kibana_react.mock';
 
-const mockTheme = {
+const mockTheme = getMockTheme({
  eui: {
  euiColorLightShade: '#ece',
  },
-};
+});
 
 jest.mock('../../../common/lib/kibana');