From c6c3afc59d7ac31cd4b1e8f12a817f3881bf3873 Mon Sep 17 00:00:00 2001
From: PhilippeOberti <philippe.oberti@elastic.co>
Date: Fri, 27 Dec 2024 12:42:00 -0600
Subject: [PATCH 1/2] [Security Solution][THI] - replace usages of EUI vis
 colors

---
 .../group_panel_renderers.tsx                 | 142 +++++++-----------
 .../components/modal/index.styles.tsx         |   4 -
 .../data_providers/provider_badge.tsx         |   6 +-
 .../timelines/components/timeline/index.tsx   |  17 +--
 4 files changed, 62 insertions(+), 107 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
index d5696d3077a69..e3d11f49052b1 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
@@ -6,7 +6,6 @@
  */
 
 import {
-  EuiAvatar,
   EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
@@ -15,9 +14,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiTitle,
-  useEuiTheme,
 } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { isArray } from 'lodash/fp';
 import React from 'react';
 import type { GroupPanelRenderer } from '@kbn/grouping/src';
@@ -44,11 +41,32 @@ export const renderGroupPanel: GroupPanelRenderer<AlertsGroupingAggregation> = (
         />
       ) : undefined;
     case 'host.name':
-      return <HostNameGroupContent hostName={bucket.key} nullGroupMessage={nullGroupMessage} />;
+      return (
+        <GroupContent
+          title={bucket.key}
+          icon="storage"
+          nullGroupMessage={nullGroupMessage}
+          dataTestSubj="host-name"
+        />
+      );
     case 'user.name':
-      return <UserNameGroupContent userName={bucket.key} nullGroupMessage={nullGroupMessage} />;
+      return (
+        <GroupContent
+          title={bucket.key}
+          icon="user"
+          nullGroupMessage={nullGroupMessage}
+          dataTestSubj="user-name"
+        />
+      );
     case 'source.ip':
-      return <SourceIpGroupContent sourceIp={bucket.key} nullGroupMessage={nullGroupMessage} />;
+      return (
+        <GroupContent
+          title={bucket.key}
+          icon="globe"
+          nullGroupMessage={nullGroupMessage}
+          dataTestSubj="source-ip"
+        />
+      );
   }
 };
 
@@ -64,7 +82,10 @@ const RuleNameGroupContent = React.memo<{
   );
   return (
     <div style={{ display: 'table', tableLayout: 'fixed', width: '100%' }}>
-      <EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="m" alignItems="center">
+      <EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="s" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="warning" size="m" />
+        </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ display: 'contents' }}>
           <EuiTitle size="xs">
             <h5 className="eui-textTruncate">{ruleName.trim()}</h5>
@@ -94,87 +115,30 @@ const RuleNameGroupContent = React.memo<{
 });
 RuleNameGroupContent.displayName = 'RuleNameGroup';
 
-const HostNameGroupContent = React.memo<{ hostName: string | string[]; nullGroupMessage?: string }>(
-  ({ hostName, nullGroupMessage }) => {
-    const { euiTheme } = useEuiTheme();
-    return (
-      <EuiFlexGroup data-test-subj="host-name-group-renderer" gutterSize="s" alignItems="center">
-        <EuiFlexItem
-          grow={false}
-          style={{
-            backgroundColor: euiTheme.colors.vis.euiColorVis1,
-            borderRadius: '50%',
-          }}
-        >
-          <EuiIcon type="database" size="l" style={{ padding: 4 }} />
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="xs">
-            <h5>{hostName}</h5>
-          </EuiTitle>
-        </EuiFlexItem>
-        {nullGroupMessage && (
-          <EuiFlexItem grow={false}>
-            <EuiIconTip content={nullGroupMessage} position="right" />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    );
-  }
-);
-HostNameGroupContent.displayName = 'HostNameGroupContent';
-
-const UserNameGroupContent = React.memo<{ userName: string | string[]; nullGroupMessage?: string }>(
-  ({ userName, nullGroupMessage }) => {
-    const userNameValue = firstNonNullValue(userName) ?? '-';
-    const { euiTheme } = useEuiTheme();
-
-    return (
-      <EuiFlexGroup data-test-subj="user-name-group-renderer" gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiAvatar name={userNameValue} color={euiTheme.colors.accentSecondary} />
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="xs">
-            <h5>{userName}</h5>
-          </EuiTitle>
-        </EuiFlexItem>
-        {nullGroupMessage && (
-          <EuiFlexItem grow={false}>
-            <EuiIconTip content={nullGroupMessage} position="right" />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    );
-  }
-);
-UserNameGroupContent.displayName = 'UserNameGroupContent';
-
-const SourceIpGroupContent = React.memo<{ sourceIp: string | string[]; nullGroupMessage?: string }>(
-  ({ sourceIp, nullGroupMessage }) => (
-    <EuiFlexGroup data-test-subj="source-ip-group-renderer" gutterSize="s" alignItems="center">
-      <EuiFlexItem
-        grow={false}
-        style={{
-          backgroundColor: euiThemeVars.euiColorVis3_behindText,
-          borderRadius: '50%',
-        }}
-      >
-        <EuiIcon style={{ padding: 4 }} type="ip" size="l" />
-      </EuiFlexItem>
+const GroupContent = React.memo<{
+  title: string | string[];
+  icon: string;
+  nullGroupMessage?: string;
+  dataTestSubj?: string;
+}>(({ title, icon, nullGroupMessage, dataTestSubj }) => (
+  <EuiFlexGroup
+    data-test-subj={`${dataTestSubj}-group-renderer`}
+    gutterSize="s"
+    alignItems="center"
+  >
+    <EuiFlexItem grow={false}>
+      <EuiIcon type={icon} size="m" />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiTitle size="xs">
+        <h5>{title}</h5>
+      </EuiTitle>
+    </EuiFlexItem>
+    {nullGroupMessage && (
       <EuiFlexItem grow={false}>
-        <EuiTitle size="xs">
-          <h5>{sourceIp}</h5>
-        </EuiTitle>
+        <EuiIconTip content={nullGroupMessage} position="right" />
       </EuiFlexItem>
-      {nullGroupMessage && (
-        <EuiFlexItem grow={false}>
-          <EuiIconTip content={nullGroupMessage} position="right" />
-        </EuiFlexItem>
-      )}
-    </EuiFlexGroup>
-  )
-);
-SourceIpGroupContent.displayName = 'SourceIpGroupContent';
+    )}
+  </EuiFlexGroup>
+));
+GroupContent.displayName = 'GroupContent';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx
index 7337eb2b1d1b4..d0580a182b7ca 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx
@@ -56,10 +56,6 @@ export const usePaneStyles = () => {
     &:not(.timeline-portal-overlay-mask--full-screen) .timeline-container {
       margin: ${euiTheme.size.m};
       border-radius: ${euiTheme.border.radius.medium};
-
-      .timeline-template-badge {
-        border-radius: ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0 0; // top corners only
-      }
     }
   `;
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
index 72b2cf5792bfa..8b7fc8c47b852 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
@@ -63,13 +63,13 @@ ProviderBadgeStyled.displayName = 'ProviderBadgeStyled';
 
 const ProviderFieldBadge = styled.div`
   display: block;
-  color: #fff;
-  padding: 6px 8px;
+  padding: ${({ theme }) => `${theme.eui.euiSizeXS} ${theme.eui.euiSizeS}`};
   font-size: 0.6em;
 `;
 
 const StyledTemplateFieldBadge = styled(ProviderFieldBadge)`
-  background: ${({ theme }) => theme.eui.euiColorVis3_behindText};
+  background: ${({ theme }) => theme.eui.euiPanelBackgroundColorModifiers.accent};
+  color: ${({ theme }) => theme.eui.euiColorAccentText};
   text-transform: uppercase;
 `;
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/index.tsx
index e54bfc82399f9..930c09fd48bb5 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import { pick } from 'lodash/fp';
-import { EuiProgress } from '@elastic/eui';
+import { EuiPanel, EuiProgress, EuiText } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useRef, createContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -31,13 +31,6 @@ import { useResolveConflict } from '../../../common/hooks/use_resolve_conflict';
 import { sourcererSelectors } from '../../../common/store';
 import { defaultUdtHeaders } from './body/column_headers/default_headers';
 
-const TimelineTemplateBadge = styled.div`
-  background: ${({ theme }) => theme.eui.euiColorVis3_behindText};
-  color: #fff;
-  padding: 10px 15px;
-  font-size: 0.8em;
-`;
-
 const TimelineBody = styled.div`
   height: 100%;
   display: flex;
@@ -206,9 +199,11 @@ const StatefulTimelineComponent: React.FC<Props> = ({
         <TimelineSavingProgress timelineId={timelineId} />
         <TimelineBody data-test-subj="timeline-body">
           {timelineType === TimelineTypeEnum.template && (
-            <TimelineTemplateBadge className="timeline-template-badge">
-              {i18n.TIMELINE_TEMPLATE}
-            </TimelineTemplateBadge>
+            <EuiPanel color="accent" grow={false} paddingSize="s">
+              <EuiText size="xs" color="accent">
+                {i18n.TIMELINE_TEMPLATE}
+              </EuiText>
+            </EuiPanel>
           )}
           {resolveConflictComponent}
           <HideShowContainer

From 6bfcf095d5d420570011d4b7471848dacc024b64 Mon Sep 17 00:00:00 2001
From: PhilippeOberti <philippe.oberti@elastic.co>
Date: Fri, 10 Jan 2025 11:15:30 -0600
Subject: [PATCH 2/2] remove icon for rule group

---
 .../alerts_table/grouping_settings/group_panel_renderers.tsx   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
index e3d11f49052b1..33160f94953d0 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
@@ -83,9 +83,6 @@ const RuleNameGroupContent = React.memo<{
   return (
     <div style={{ display: 'table', tableLayout: 'fixed', width: '100%' }}>
       <EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiIcon type="warning" size="m" />
-        </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ display: 'contents' }}>
           <EuiTitle size="xs">
             <h5 className="eui-textTruncate">{ruleName.trim()}</h5>