[8.x] [SecuritySolution] Onboarding page centralize duplicated styles (…

…#202229) (#202384)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[SecuritySolution] Onboarding page centralize duplicated styles
(#202229)](#202229)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sergi
Massaneda","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-29T17:47:16Z","message":"[SecuritySolution]
Onboarding page centralize duplicated styles (#202229)\n\n##
Summary\r\n\r\nThere is no visual change, just a refactor to remove
duplicate code from\r\ncards to centralized
places.","sha":"89d40117640e19ce93128b3b35190ff3f7138302","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat
Hunting:Explore","backport:version","v8.18.0"],"number":202229,"url":"https://github.com/elastic/kibana/pull/202229","mergeCommit":{"message":"[SecuritySolution]
Onboarding page centralize duplicated styles (#202229)\n\n##
Summary\r\n\r\nThere is no visual change, just a refactor to remove
duplicate code from\r\ncards to centralized
places.","sha":"89d40117640e19ce93128b3b35190ff3f7138302"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202229","number":202229,"mergeCommit":{"message":"[SecuritySolution]
Onboarding page centralize duplicated styles (#202229)\n\n##
Summary\r\n\r\nThere is no visual change, just a refactor to remove
duplicate code from\r\ncards to centralized
places.","sha":"89d40117640e19ce93128b3b35190ff3f7138302"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx

@@ -6,22 +6,14 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 import alertsImageSrc from './images/alerts.png';
 import * as i18n from './translations';
 
@@ -30,9 +22,6 @@ export const AlertsCard: OnboardingCardComponent = ({
   setExpandedCardId,
   setComplete,
 }) => {
-  const { colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
-
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -51,13 +40,9 @@ export const AlertsCard: OnboardingCardComponent = ({
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="alertsCardDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="alertsCardDescription" size="s">
             {i18n.ALERTS_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_card.tsx

@@ -6,22 +6,15 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import * as i18n from './translations';
 import { OnboardingCardContentPanel } from '../common/card_content_panel';
 import { ConnectorCards } from '../common/connectors/connector_cards';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 import type { AssistantCardMetadata } from './types';
 import { MissingPrivilegesCallOut } from '../common/connectors/missing_privileges';
 
@@ -31,8 +24,6 @@ export const AssistantCard: OnboardingCardComponent<AssistantCardMetadata> = ({
   checkCompleteMetadata,
   checkComplete,
 }) => {
-  const { euiTheme, colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -47,18 +38,11 @@ export const AssistantCard: OnboardingCardComponent<AssistantCardMetadata> = ({
   const canCreateConnectors = checkCompleteMetadata?.canCreateConnectors;
 
   return (
-    <OnboardingCardContentPanel
-      style={{
-        paddingTop: 0,
-        ...(isDarkMode && { backgroundColor: euiTheme.colors.lightestShade }),
-      }}
-    >
+    <OnboardingCardContentPanel>
       {canExecuteConnectors ? (
         <EuiFlexGroup direction="column">
           <EuiFlexItem grow={false}>
-            <EuiText size="s" color={isDarkMode ? 'text' : 'subdued'}>
-              {i18n.ASSISTANT_CARD_DESCRIPTION}
-            </EuiText>
+            <CardSubduedText size="s">{i18n.ASSISTANT_CARD_DESCRIPTION}</CardSubduedText>
           </EuiFlexItem>
           <EuiFlexItem>
             {isIntegrationsCardComplete ? (

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_image_panel.styles.ts

@@ -6,15 +6,12 @@
  */
 
 import { css } from '@emotion/css';
-import { useEuiTheme, useEuiShadow, COLOR_MODES_STANDARD } from '@elastic/eui';
+import { useEuiTheme, useEuiShadow } from '@elastic/eui';
 
 export const useCardContentImagePanelStyles = () => {
-  const { euiTheme, colorMode } = useEuiTheme();
+  const { euiTheme } = useEuiTheme();
   const shadowStyles = useEuiShadow('m');
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
   return css`
-    padding-top: 8px;
-    ${isDarkMode ? `background-color: ${euiTheme.colors.lightestShade}` : ''};
     .cardSpacer {
       width: 8%;
     }

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_panel.styles.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/css';
+import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
+import { useDarkPanelStyles } from '../../onboarding_card_panel.styles';
+
+export const NESTED_PANEL_CLASS_NAME = 'onboardingCardContentPanelNested';
+
+export const useCardContentPanelStyles = () => {
+  const { euiTheme, colorMode } = useEuiTheme();
+  const darkPanelStyles = useDarkPanelStyles(colorMode === COLOR_MODES_STANDARD.dark);
+
+  return css`
+    padding-top: 0;
+    ${darkPanelStyles}
+
+    .${NESTED_PANEL_CLASS_NAME} {
+      padding-top: ${euiTheme.size.s};
+      ${darkPanelStyles}
+    }
+  `;
+};

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_panel.tsx

@@ -5,24 +5,19 @@
  * 2.0.
  */
 import React, { type PropsWithChildren } from 'react';
-import { COLOR_MODES_STANDARD, EuiPanel, useEuiTheme, type EuiPanelProps } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiPanel, type EuiPanelProps } from '@elastic/eui';
+import classnames from 'classnames';
+import { useCardContentPanelStyles, NESTED_PANEL_CLASS_NAME } from './card_content_panel.styles';
 
 export const OnboardingCardContentPanel = React.memo<PropsWithChildren<EuiPanelProps>>(
-  ({ children, ...panelProps }) => {
-    const { euiTheme, colorMode } = useEuiTheme();
-    const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  ({ children, className, ...panelProps }) => {
+    const styles = useCardContentPanelStyles();
+    const panelClassName = classnames(styles);
+    const nestedClassName = classnames(NESTED_PANEL_CLASS_NAME, className);
+
     return (
-      <EuiPanel
-        paddingSize="m"
-        hasShadow={false}
-        hasBorder={false}
-        css={css`
-          background-color: ${isDarkMode ? euiTheme.colors.lightestShade : ''};
-          padding-top: 0;
-        `}
-      >
-        <EuiPanel {...panelProps} hasShadow={false} paddingSize="l">
+      <EuiPanel paddingSize="m" hasShadow={false} hasBorder={false} className={panelClassName}>
+        <EuiPanel {...panelProps} hasShadow={false} paddingSize="l" className={nestedClassName}>
           {children}
         </EuiPanel>
       </EuiPanel>

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_subdued_text.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { type PropsWithChildren } from 'react';
+import { EuiText, useEuiTheme, COLOR_MODES_STANDARD, type EuiTextProps } from '@elastic/eui';
+
+export type CardSubduedTextProps = PropsWithChildren<EuiTextProps>;
+export const CardSubduedText = React.memo<CardSubduedTextProps>(({ children, ...props }) => {
+  const { colorMode } = useEuiTheme();
+  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  return (
+    <EuiText {...props} color={isDarkMode ? 'text' : 'subdued'}>
+      {children}
+    </EuiText>
+  );
+});
+CardSubduedText.displayName = 'CardSubduedText';

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx

@@ -6,22 +6,14 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
 import { CardLinkButton } from '../common/card_link_button';
+import { CardSubduedText } from '../common/card_subdued_text';
 import dashboardsImageSrc from './images/dashboards.png';
 import * as i18n from './translations';
 
@@ -30,9 +22,6 @@ export const DashboardsCard: OnboardingCardComponent = ({
   setComplete,
   setExpandedCardId,
 }) => {
-  const { colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
-
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -54,13 +43,9 @@ export const DashboardsCard: OnboardingCardComponent = ({
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="dashboardsDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="dashboardsDescription" size="s">
             {i18n.DASHBOARDS_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx

@@ -6,29 +6,18 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  useEuiTheme,
-  COLOR_MODES_STANDARD,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiSpacer } from '@elastic/eui';
 import { SecurityPageName } from '@kbn/security-solution-navigation';
 import { SecuritySolutionLinkButton } from '../../../../../common/components/links';
 import { OnboardingCardId } from '../../../../constants';
 import type { OnboardingCardComponent } from '../../../../types';
 import { OnboardingCardContentImagePanel } from '../common/card_content_image_panel';
 import { CardCallOut } from '../common/card_callout';
+import { CardSubduedText } from '../common/card_subdued_text';
 import rulesImageSrc from './images/rules.png';
 import * as i18n from './translations';
 
 export const RulesCard: OnboardingCardComponent = ({ isCardComplete, setExpandedCardId }) => {
-  const { colorMode } = useEuiTheme();
-  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
-
   const isIntegrationsCardComplete = useMemo(
     () => isCardComplete(OnboardingCardId.integrations),
     [isCardComplete]
@@ -47,13 +36,9 @@ export const RulesCard: OnboardingCardComponent = ({ isCardComplete, setExpanded
         alignItems="flexStart"
       >
         <EuiFlexItem grow={false}>
-          <EuiText
-            data-test-subj="rulesCardDescription"
-            size="s"
-            color={isDarkMode ? 'text' : 'subdued'}
-          >
+          <CardSubduedText data-test-subj="rulesCardDescription" size="s">
             {i18n.RULES_CARD_DESCRIPTION}
-          </EuiText>
+          </CardSubduedText>
           {!isIntegrationsCardComplete && (
             <>
               <EuiSpacer size="m" />

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts

@@ -14,6 +14,7 @@ export const useCardPanelStyles = () => {
   const { euiTheme, colorMode } = useEuiTheme();
   const successBackgroundColor = useEuiBackgroundColor('success');
   const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+  const darkModeStyles = useDarkPanelStyles(isDarkMode);
 
   return css`
     .onboardingCardHeader {
@@ -57,11 +58,15 @@ export const useCardPanelStyles = () => {
         background-color: ${successBackgroundColor};
       }
     }
-    ${isDarkMode
-      ? `
-          background-color: ${euiTheme.colors.lightestShade};
-          border: 1px solid ${euiTheme.colors.mediumShade};
-        `
-      : ''}
+    ${darkModeStyles}
   `;
 };
+
+export const useDarkPanelStyles = (isDarkMode: boolean) => {
+  const { euiTheme } = useEuiTheme();
+  const darkPanelStyles = css`
+    background-color: ${euiTheme.colors.lightestShade};
+    border-color: ${euiTheme.colors.mediumShade};
+  `;
+  return isDarkMode ? darkPanelStyles : '';
+};