[Security Solution][THI] - replace usages of EUI vis colors (#205218)

## Summary This PR is part of a list of PRs to perform the changes necessary to get the new Borealis theme working correctly. It focuses on replace the vis colors for non-visualization usages by correct EUI color tokens. 2 places have been impacted: - the alerts data table in grouping mode (for host, user and network). The background colors are removed as they don't really mean anything, and are not used anywhere else in Kibana. Also the icons have been updated to match the ones used in other places (like in the flyout) #### Host | before | after | | ------------- | ------------- | | ![data-table-host-main](https://github.com/user-attachments/assets/eb15300e-6694-4fd0-a77d-09fbb7b8a5dd) | ![data-table-host-new](https://github.com/user-attachments/assets/405eb0a5-cd17-4a50-b008-d31a0654887e) | #### User | before | after | | ------------- | ------------- | |![data-table-user-main](https://github.com/user-attachments/assets/70d05724-610f-4c87-b2ae-cdd0be98d4b0) | ![data-table-user-new](https://github.com/user-attachments/assets/315467f2-ea84-4c8c-a25f-f5d7d1f060b5) | #### Network | before | after | | ------------- | ------------- | | ![data-table-network-main](https://github.com/user-attachments/assets/a26f4aad-ae24-4d67-99ec-3cd677ebf4d6) | ![data-table-network-new](https://github.com/user-attachments/assets/eba9df1a-fe8a-484c-bfa4-c445659ab8f6) | - the dataprovider badge in timeline #### Dark mode | before | after | | ------------- | ------------- | | ![timeline-main-dark](https://github.com/user-attachments/assets/29f1b5a7-c9f7-46e9-b4a6-76b262102f83) | ![timeline-new-dark](https://github.com/user-attachments/assets/1628e046-eeae-42d8-81c6-dc530114490d) | #### Light mode | before | after | | ------------- | ------------- | | ![timeline-main-light](https://github.com/user-attachments/assets/b89f24e2-67cc-44ce-be0e-41b6a5b89bfb) | ![timeline-new-light](https://github.com/user-attachments/assets/156a80c1-c31d-4cd6-a72c-544402beb9ab) | The changes have been reviewed and approved by @codearos 😄 #201883
elastic · Jan 10, 2025 · cebd201 · cebd201
1 parent 80baa2c
commit cebd201
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 107 deletions.
diff --git a/...ion/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/...ion/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,7 @@ 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} style={{ display: 'contents' }}>
           <EuiTitle size="xs">
             <h5 className="eui-textTruncate">{ruleName.trim()}</h5>
@@ -94,87 +112,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/...ons/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx b/...ons/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/.../security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx b/.../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/...lutions/security/plugins/security_solution/public/timelines/components/timeline/index.tsx b/...lutions/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