[security solution] fix darkMode access

elastic · Dec 22, 2023 · 0e36767 · 0e36767
1 parent b40cd02
commit 0e36767
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 25 deletions.
diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts
@@ -31,7 +31,6 @@ export const ADD_THREAT_INTELLIGENCE_DATA_PATH = `/app/integrations/browse/threa
 export const DEFAULT_BYTES_FORMAT = 'format:bytes:defaultPattern' as const;
 export const DEFAULT_DATE_FORMAT = 'dateFormat' as const;
 export const DEFAULT_DATE_FORMAT_TZ = 'dateFormat:tz' as const;
-export const DEFAULT_DARK_MODE = 'theme:darkMode' as const;
 export const DEFAULT_INDEX_KEY = 'securitySolution:defaultIndex' as const;
 export const DEFAULT_NUMBER_FORMAT = 'format:number:defaultPattern' as const;
 export const DEFAULT_DATA_VIEW_ID = 'security-solution' as const;

diff --git a/x-pack/plugins/security_solution/public/app/app.tsx b/x-pack/plugins/security_solution/public/app/app.tsx
@@ -20,11 +20,11 @@ import { KibanaErrorBoundary, KibanaErrorBoundaryProvider } from '@kbn/shared-ux
 import { NavigationProvider } from '@kbn/security-solution-navigation';
 import { UpsellingProvider } from '../common/components/upselling_provider';
 import { ManageUserInfo } from '../detections/components/user_info';
-import { DEFAULT_DARK_MODE, APP_NAME } from '../../common/constants';
+import { APP_NAME } from '../../common/constants';
 import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
 import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
 import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
-import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
+import { KibanaContextProvider, useKibana, useDarkMode } from '../common/lib/kibana';
 import type { State } from '../common/store';
 import type { StartServices } from '../types';
 import { PageRouter } from './routes';
@@ -57,7 +57,7 @@ const StartAppComponent: FC<StartAppComponent> = ({
     upselling,
   } = services;
 
-  const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+  const darkMode = useDarkMode();
 
   return (
     <KibanaErrorBoundaryProvider analytics={analytics}>

diff --git a/x-pack/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/plugins/security_solution/public/common/components/charts/common.tsx
@@ -22,8 +22,7 @@ import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DEFAULT_DARK_MODE } from '../../../../common/constants';
-import { useUiSetting } from '../../lib/kibana';
+import { useDarkMode } from '../../lib/kibana';
 
 export const defaultChartHeight = '100%';
 export const defaultChartWidth = '100%';
@@ -113,7 +112,7 @@ const theme: PartialTheme = {
   },
 };
 export const useThemes = (): { baseTheme: Theme; theme: PartialTheme } => {
-  const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
+  const isDarkMode = useDarkMode();
   // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
   const baseTheme = isDarkMode ? LEGACY_DARK_THEME : LEGACY_LIGHT_THEME;
   return {

diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -18,7 +18,6 @@ import {
   DEFAULT_APP_REFRESH_INTERVAL,
   DEFAULT_APP_TIME_RANGE,
   DEFAULT_BYTES_FORMAT,
-  DEFAULT_DARK_MODE,
   DEFAULT_DATE_FORMAT,
   DEFAULT_DATE_FORMAT_TZ,
   DEFAULT_FROM,
@@ -69,7 +68,6 @@ const mockUiSettings: Record<string, unknown> = {
   [DEFAULT_BYTES_FORMAT]: '0,0.[0]b',
   [DEFAULT_DATE_FORMAT_TZ]: 'UTC',
   [DEFAULT_DATE_FORMAT]: 'MMM D, YYYY @ HH:mm:ss.SSS',
-  [DEFAULT_DARK_MODE]: false,
   [DEFAULT_RULES_TABLE_REFRESH_SETTING]: {
     on: DEFAULT_RULE_REFRESH_INTERVAL_ON,
     value: DEFAULT_RULE_REFRESH_INTERVAL_VALUE,

diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.ts
@@ -10,6 +10,7 @@ import {
   useKibana,
   useUiSetting,
   useUiSetting$,
+  useDarkMode,
   withKibana,
 } from '@kbn/kibana-react-plugin/public';
 import type { ApmBase } from '@elastic/apm-rum';
@@ -23,5 +24,6 @@ export {
   useTypedKibana as useKibana,
   useUiSetting,
   useUiSetting$,
+  useDarkMode,
   withKibana,
 };
diff --git a/x-pack/plugins/security_solution/public/common/lib/theme/use_eui_theme.tsx b/x-pack/plugins/security_solution/public/common/lib/theme/use_eui_theme.tsx
@@ -7,10 +7,9 @@
 
 import { euiLightVars as lightTheme, euiDarkVars as darkTheme } from '@kbn/ui-theme';
 
-import { DEFAULT_DARK_MODE } from '../../../../common/constants';
-import { useUiSetting$ } from '../kibana';
+import { useDarkMode } from '../kibana';
 
 export const useEuiTheme = () => {
-  const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+  const darkMode = useDarkMode();
   return darkMode ? darkTheme : lightTheme;
 };
diff --git a/x-pack/plugins/security_solution/public/common/mock/endpoint/app_root_provider.tsx b/x-pack/plugins/security_solution/public/common/mock/endpoint/app_root_provider.tsx
@@ -37,8 +37,9 @@ export const AppRootProvider = memo<{
   queryClient: QueryClient;
   children: ReactNode | ReactNode[];
 }>(({ store, history, coreStart, depsStart: { data }, queryClient, startServices, children }) => {
-  const { uiSettings } = coreStart;
-  const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
+  const { theme: themeStart } = coreStart;
+  const theme = useObservable(themeStart.theme$, themeStart.getTheme());
+  const isDarkMode = theme.darkMode;
 
   return (
     <Provider store={store}>

diff --git a/x-pack/plugins/security_solution/public/explore/network/components/details/index.tsx b/x-pack/plugins/security_solution/public/explore/network/components/details/index.tsx
@@ -8,9 +8,8 @@
 import { euiLightVars as lightTheme, euiDarkVars as darkTheme } from '@kbn/ui-theme';
 import React from 'react';
 
-import { DEFAULT_DARK_MODE } from '../../../../../common/constants';
 import type { DescriptionList } from '../../../../../common/utility_types';
-import { useUiSetting$ } from '../../../../common/lib/kibana';
+import { useDarkMode } from '../../../../common/lib/kibana';
 import type {
   FlowTargetSourceDest,
   NetworkDetailsStrategyResponse,
@@ -79,7 +78,7 @@ export const IpOverview = React.memo<IpOverviewProps>(
   }) => {
     const capabilities = useMlCapabilities();
     const userPermissions = hasMlUserPermissions(capabilities);
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+    const darkMode = useDarkMode();
     const typeData = data[flowTarget];
     const column: DescriptionList[] = [
       {

diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx b/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx
@@ -13,9 +13,8 @@ import styled from 'styled-components';
 import { useRiskScore } from '../../../entity_analytics/api/hooks/use_risk_score';
 import type { HostItem } from '../../../../common/search_strategy';
 import { buildHostNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy';
-import { DEFAULT_DARK_MODE } from '../../../../common/constants';
 import type { DescriptionList } from '../../../../common/utility_types';
-import { useUiSetting$ } from '../../../common/lib/kibana';
+import { useDarkMode } from '../../../common/lib/kibana';
 import { getEmptyTagValue } from '../../../common/components/empty_value';
 import {
   DefaultFieldRenderer,
@@ -84,7 +83,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
   }) => {
     const capabilities = useMlCapabilities();
     const userPermissions = hasMlUserPermissions(capabilities);
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+    const darkMode = useDarkMode();
     const filterQuery = useMemo(
       () => (hostName ? buildHostNamesFilter([hostName]) : undefined),
       [hostName]

diff --git a/x-pack/plugins/security_solution/public/overview/components/user_overview/index.tsx b/x-pack/plugins/security_solution/public/overview/components/user_overview/index.tsx
@@ -12,9 +12,8 @@ import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { useRiskScore } from '../../../entity_analytics/api/hooks/use_risk_score';
 import { buildUserNamesFilter, RiskScoreEntity } from '../../../../common/search_strategy';
-import { DEFAULT_DARK_MODE } from '../../../../common/constants';
 import type { DescriptionList } from '../../../../common/utility_types';
-import { useUiSetting$ } from '../../../common/lib/kibana';
+import { useDarkMode } from '../../../common/lib/kibana';
 import { getEmptyTagValue } from '../../../common/components/empty_value';
 import { DefaultFieldRenderer } from '../../../timelines/components/field_renderers/field_renderers';
 import {
@@ -82,7 +81,7 @@ export const UserOverview = React.memo<UserSummaryProps>(
   }) => {
     const capabilities = useMlCapabilities();
     const userPermissions = hasMlUserPermissions(capabilities);
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+    const darkMode = useDarkMode();
     const filterQuery = useMemo(
       () => (userName ? buildUserNamesFilter([userName]) : undefined),
       [userName]

diff --git a/x-pack/plugins/security_solution/public/resolver/view/symbol_definitions.tsx b/x-pack/plugins/security_solution/public/resolver/view/symbol_definitions.tsx
@@ -8,7 +8,7 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
-import { useUiSetting } from '@kbn/kibana-react-plugin/public';
+import { useDarkMode } from '@kbn/kibana-react-plugin/public';
 import { useSymbolIDs } from './use_symbol_ids';
 import { usePaintServerIDs } from './use_paint_server_ids';
 
@@ -435,7 +435,7 @@ const SymbolsAndShapes = memo(({ id, isDarkMode }: { id: string; isDarkMode: boo
  */
 // eslint-disable-next-line react/display-name
 export const SymbolDefinitions = memo(({ id }: { id: string }) => {
-  const isDarkMode = useUiSetting<boolean>('theme:darkMode');
+  const isDarkMode = useDarkMode();
   return (
     <HiddenSVG>
       <defs>