[SIEM] Migrating frontend services to NP

x-pack/legacy/plugins/siem/public/apps/plugin.tsx

@@ -12,9 +12,16 @@ import { Chrome } from 'ui/chrome';
 
 import { SiemApp } from './start_app';
 import template from './template.html';
+import { DEFAULT_KBN_VERSION, DEFAULT_TIMEZONE_BROWSER } from '../../common/constants';
 
 export const ROOT_ELEMENT_ID = 'react-siem-root';
 
+export type StartCore = LegacyCoreStart;
+export type StartPlugins = Required<
+  Pick<PluginsStart, 'data' | 'embeddable' | 'inspector' | 'uiActions'>
+>;
+export type StartServices = StartCore & StartPlugins;
+
 export class Plugin {
   constructor(
     // @ts-ignore this is added to satisfy the New Platform typing constraint,
@@ -25,7 +32,11 @@ export class Plugin {
     this.chrome = chrome;
   }
 
-  public start(core: LegacyCoreStart, plugins: PluginsStart) {
+  public start(core: StartCore, plugins: StartPlugins) {
+    // TODO(rylnd): once we're on NP, we can populate version from env.packageInfo
+    core.uiSettings.set(DEFAULT_KBN_VERSION, '8.0.0');
+    core.uiSettings.set(DEFAULT_TIMEZONE_BROWSER, 'UTC');
+
     // @ts-ignore improper type description
     this.chrome.setRootTemplate(template);
     const checkForRoot = () => {

x-pack/legacy/plugins/siem/public/apps/start_app.tsx

@@ -9,8 +9,6 @@ import React, { memo, FC } from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
-import { LegacyCoreStart } from 'kibana/public';
-import { PluginsStart } from 'ui/new_platform/new_platform';
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
@@ -19,16 +17,14 @@ import { BehaviorSubject } from 'rxjs';
 import { pluck } from 'rxjs/operators';
 import { I18nContext } from 'ui/i18n';
 
-import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { KibanaContextProvider, useUiSetting$ } from '../lib/kibana';
 import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
 
 import { DEFAULT_DARK_MODE } from '../../common/constants';
 import { ErrorToastDispatcher } from '../components/error_toast_dispatcher';
 import { compose } from '../lib/compose/kibana_compose';
 import { AppFrontendLibs } from '../lib/lib';
-import { KibanaCoreContextProvider } from '../lib/compose/kibana_core';
-import { KibanaPluginsContextProvider } from '../lib/compose/kibana_plugins';
-import { useKibanaUiSetting } from '../lib/settings/use_kibana_ui_setting';
+import { StartCore, StartPlugins } from './plugin';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
 import { GlobalToaster, ManageGlobalToaster } from '../components/toasters';
@@ -44,7 +40,7 @@ const StartApp: FC<AppFrontendLibs> = memo(libs => {
   const store = createStore(undefined, libs$.pipe(pluck('apolloClient')));
 
   const AppPluginRoot = memo(() => {
-    const [darkMode] = useKibanaUiSetting(DEFAULT_DARK_MODE);
+    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
     return (
       <EuiErrorBoundary>
         <I18nContext>
@@ -77,21 +73,15 @@ const StartApp: FC<AppFrontendLibs> = memo(libs => {
 
 export const ROOT_ELEMENT_ID = 'react-siem-root';
 
-export const SiemApp = memo<{ core: LegacyCoreStart; plugins: PluginsStart }>(
-  ({ core, plugins }) => (
-    <KibanaContextProvider
-      services={{
-        appName: 'siem',
-        data: plugins.data,
-        storage: new Storage(localStorage),
-        ...core,
-      }}
-    >
-      <KibanaCoreContextProvider core={core}>
-        <KibanaPluginsContextProvider plugins={plugins}>
-          <StartApp {...compose()} />
-        </KibanaPluginsContextProvider>
-      </KibanaCoreContextProvider>
-    </KibanaContextProvider>
-  )
-);
+export const SiemApp = memo<{ core: StartCore; plugins: StartPlugins }>(({ core, plugins }) => (
+  <KibanaContextProvider
+    services={{
+      appName: 'siem',
+      data: plugins.data,
+      storage: new Storage(localStorage),
+      ...core,
+    }}
+  >
+    <StartApp {...compose()} />
+  </KibanaContextProvider>
+));

x-pack/legacy/plugins/siem/public/components/bytes/index.test.tsx

@@ -12,8 +12,6 @@ import { useMountAppended } from '../../utils/use_mount_appended';
 
 import { Bytes } from '.';
 
-jest.mock('../../lib/settings/use_kibana_ui_setting');
-
 describe('Bytes', () => {
   const mount = useMountAppended();
 

x-pack/legacy/plugins/siem/public/components/charts/areachart.test.tsx

@@ -11,6 +11,8 @@ import { AreaChartBaseComponent, AreaChartComponent } from './areachart';
 import { ChartSeriesData } from './common';
 import { ScaleType, AreaSeries, Axis } from '@elastic/charts';
 
+jest.mock('../../lib/kibana');
+
 const customHeight = '100px';
 const customWidth = '120px';
 const chartDataSets = [

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -21,14 +21,15 @@ import { getOr, get, isNull, isNumber } from 'lodash/fp';
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
 import {
-  browserTimezone,
   chartDefaultSettings,
   ChartSeriesConfigs,
   ChartSeriesData,
   getChartHeight,
   getChartWidth,
   getSeriesStyle,
   WrappedByAutoSizer,
+  useTheme,
+  useBrowserTimeZone,
 } from './common';
 
 // custom series styles: https://ela.st/areachart-styling
@@ -72,12 +73,15 @@ export const AreaChartBaseComponent = ({
   height: string | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
 }) => {
+  const theme = useTheme();
+  const timeZone = useBrowserTimeZone();
   const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
   const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
   const xAxisId = getAxisId(`group-${data[0].key}-x`);
   const yAxisId = getAxisId(`group-${data[0].key}-y`);
   const settings = {
     ...chartDefaultSettings,
+    theme,
     ...get('configs.settings', chartConfigs),
   };
   return chartConfigs.width && chartConfigs.height ? (
@@ -95,7 +99,7 @@ export const AreaChartBaseComponent = ({
               data={series.value || undefined}
               xScaleType={getOr(ScaleType.Linear, 'configs.series.xScaleType', chartConfigs)}
               yScaleType={getOr(ScaleType.Linear, 'configs.series.yScaleType', chartConfigs)}
-              timeZone={browserTimezone}
+              timeZone={timeZone}
               xAccessor="x"
               yAccessors={['y']}
               areaSeriesStyle={getSeriesLineStyle()}

x-pack/legacy/plugins/siem/public/components/charts/barchart.test.tsx

@@ -11,6 +11,8 @@ import { BarChartBaseComponent, BarChartComponent } from './barchart';
 import { ChartSeriesData } from './common';
 import { BarSeries, ScaleType, Axis } from '@elastic/charts';
 
+jest.mock('../../lib/kibana');
+
 const customHeight = '100px';
 const customWidth = '120px';
 const chartDataSets = [

x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx

@@ -19,16 +19,17 @@ import { getOr, get, isNumber } from 'lodash/fp';
 import { AutoSizer } from '../auto_sizer';
 import { ChartPlaceHolder } from './chart_place_holder';
 import {
-  browserTimezone,
   chartDefaultSettings,
   ChartSeriesConfigs,
   ChartSeriesData,
   checkIfAllValuesAreZero,
-  getSeriesStyle,
   getChartHeight,
   getChartWidth,
+  getSeriesStyle,
   SeriesType,
   WrappedByAutoSizer,
+  useBrowserTimeZone,
+  useTheme,
 } from './common';
 
 const checkIfAllTheDataInTheSeriesAreValid = (series: ChartSeriesData): series is ChartSeriesData =>
@@ -53,13 +54,16 @@ export const BarChartBaseComponent = ({
   height: string | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
 }) => {
+  const theme = useTheme();
+  const timeZone = useBrowserTimeZone();
   const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
   const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
   const tickSize = getOr(0, 'configs.axis.tickSize', chartConfigs);
   const xAxisId = getAxisId(`stat-items-barchart-${data[0].key}-x`);
   const yAxisId = getAxisId(`stat-items-barchart-${data[0].key}-y`);
   const settings = {
     ...chartDefaultSettings,
+    theme,
     ...get('configs.settings', chartConfigs),
   };
 
@@ -79,7 +83,7 @@ export const BarChartBaseComponent = ({
             yScaleType={getOr(ScaleType.Linear, 'configs.series.yScaleType', chartConfigs)}
             xAccessor="x"
             yAccessors={['y']}
-            timeZone={browserTimezone}
+            timeZone={timeZone}
             splitSeriesAccessors={['g']}
             data={series.value!}
             stackAccessors={get('configs.series.stackAccessors', chartConfigs)}

x-pack/legacy/plugins/siem/public/components/charts/common.test.tsx

@@ -5,23 +5,27 @@
  */
 import { shallow } from 'enzyme';
 import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useUiSetting } from '../../lib/kibana';
 import {
   checkIfAllValuesAreZero,
   defaultChartHeight,
   getChartHeight,
   getChartWidth,
   getSeriesStyle,
-  getTheme,
   SeriesType,
   WrappedByAutoSizer,
   ChartSeriesData,
+  useTheme,
 } from './common';
-import { mergeWithDefaultTheme, LIGHT_THEME } from '@elastic/charts';
+
+jest.mock('../../lib/kibana');
 
 jest.mock('@elastic/charts', () => {
   return {
+    ...jest.requireActual('@elastic/charts'),
     getSpecId: jest.fn(() => {}),
-    mergeWithDefaultTheme: jest.fn(),
   };
 });
 
@@ -57,21 +61,6 @@ describe('getSeriesStyle', () => {
   });
 });
 
-describe('getTheme', () => {
-  it('should merge custom theme with default theme', () => {
-    const defaultTheme = {
-      chartMargins: { bottom: 0, left: 0, right: 0, top: 4 },
-      chartPaddings: { bottom: 0, left: 0, right: 0, top: 0 },
-      scales: {
-        barsPadding: 0.05,
-      },
-    };
-    getTheme();
-    expect((mergeWithDefaultTheme as jest.Mock).mock.calls[0][0]).toMatchObject(defaultTheme);
-    expect((mergeWithDefaultTheme as jest.Mock).mock.calls[0][1]).toEqual(LIGHT_THEME);
-  });
-});
-
 describe('getChartHeight', () => {
   it('should render customHeight', () => {
     const height = getChartHeight(10, 100);
@@ -197,4 +186,23 @@ describe('checkIfAllValuesAreZero', () => {
       expect(result).toBeTruthy();
     });
   });
+
+  describe('useTheme', () => {
+    it('merges our spacing with the default theme', () => {
+      const { result } = renderHook(() => useTheme());
+
+      expect(result.current).toEqual(
+        expect.objectContaining({ chartMargins: expect.objectContaining({ top: 4, bottom: 0 }) })
+      );
+    });
+
+    it('returns a different theme depending on user settings', () => {
+      const { result: defaultResult } = renderHook(() => useTheme());
+      (useUiSetting as jest.Mock).mockImplementation(() => true);
+
+      const { result: darkResult } = renderHook(() => useTheme());
+
+      expect(defaultResult.current).not.toMatchObject(darkResult.current);
+    });
+  });
 });

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import chrome from 'ui/chrome';
 import {
   CustomSeriesColorsMap,
   DARK_THEME,
@@ -21,6 +20,7 @@ import {
 } from '@elastic/charts';
 import moment from 'moment-timezone';
 import styled from 'styled-components';
+import { useUiSetting } from '../../lib/kibana';
 import { DEFAULT_DATE_FORMAT_TZ, DEFAULT_DARK_MODE } from '../../../common/constants';
 
 export const defaultChartHeight = '100%';
@@ -95,27 +95,28 @@ export const getSeriesStyle = (
 };
 
 // Apply margins and paddings: https://ela.st/charts-spacing
-export const getTheme = () => {
-  const theme: PartialTheme = {
-    chartMargins: {
-      left: 0,
-      right: 0,
-      // Apply some paddings to the top to avoid chopping the y tick https://ela.st/chopping-edge
-      top: 4,
-      bottom: 0,
-    },
-    chartPaddings: {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-    },
-    scales: {
-      barsPadding: 0.05,
-    },
-  };
-  const isDarkMode: boolean = chrome.getUiSettingsClient().get(DEFAULT_DARK_MODE);
+const theme: PartialTheme = {
+  chartMargins: {
+    left: 0,
+    right: 0,
+    // Apply some paddings to the top to avoid chopping the y tick https://ela.st/chopping-edge
+    top: 4,
+    bottom: 0,
+  },
+  chartPaddings: {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+  scales: {
+    barsPadding: 0.05,
+  },
+};
+export const useTheme = () => {
+  const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
   const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
+
   return mergeWithDefaultTheme(theme, defaultTheme);
 };
 
@@ -126,11 +127,12 @@ export const chartDefaultSettings = {
   showLegend: false,
   showLegendDisplayValue: false,
   debug: false,
-  theme: getTheme(),
 };
 
-const kibanaTimezone: string = chrome.getUiSettingsClient().get(DEFAULT_DATE_FORMAT_TZ);
-export const browserTimezone = kibanaTimezone === 'Browser' ? moment.tz.guess() : kibanaTimezone;
+export const useBrowserTimeZone = () => {
+  const kibanaTimezone = useUiSetting<string>(DEFAULT_DATE_FORMAT_TZ);
+  return kibanaTimezone === 'Browser' ? moment.tz.guess() : kibanaTimezone;
+};
 
 export const getChartHeight = (customHeight?: number, autoSizerHeight?: number): string => {
   const height = customHeight || autoSizerHeight;

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx

@@ -9,7 +9,6 @@ import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 
-import '../../../mock/ui_settings';
 import { TestProviders } from '../../../mock';
 import {
   UtilityBar,
@@ -19,8 +18,6 @@ import {
   UtilityBarText,
 } from './index';
 
-jest.mock('../../../lib/settings/use_kibana_ui_setting');
-
 describe('UtilityBar', () => {
   test('it renders', () => {
     const wrapper = shallow(