From 7101c42bec39eb4ebf905806979673431cc663ed Mon Sep 17 00:00:00 2001
From: Kevin Logan <56395104+kevinlog@users.noreply.github.com>
Date: Mon, 19 Jul 2021 12:46:21 -0400
Subject: [PATCH] [Security Solution] UX fixes for Policy page and Case Host
 Isolation comment (#106027)

* [Security Solution] UX fixes for Policy page and Case Host Isolation comment
---
 .../components/user_action_tree/helpers.tsx   | 31 +++++++++++++++++--
 .../user_action_tree/index.test.tsx           |  4 +--
 .../pages/policy/view/policy_details.tsx      |  1 -
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
index 422fb8ee581b..609183aa5c4e 100644
--- a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
+++ b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
@@ -5,9 +5,17 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiCommentProps } from '@elastic/eui';
-import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiCommentProps,
+  EuiToken,
+} from '@elastic/eui';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
+import { ThemeContext } from 'styled-components';
 import {
   CaseFullExternalService,
   ActionConnector,
@@ -37,6 +45,7 @@ interface LabelTitle {
   action: CaseUserActions;
   field: string;
 }
+
 export type RuleDetailsNavigation = CasesNavigation<string | null | undefined, 'configurable'>;
 
 export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
@@ -365,6 +374,22 @@ export const getGeneratedAlertsAttachment = ({
   ),
 });
 
+const ActionIcon = React.memo<{
+  actionType: string;
+}>(({ actionType }) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <EuiToken
+      style={{ marginTop: '8px' }}
+      iconType={actionType === 'isolate' ? 'lock' : 'lockOpen'}
+      size="m"
+      shape="circle"
+      color={theme.eui.euiColorLightestShade}
+      data-test-subj="endpoint-action-icon"
+    />
+  );
+});
+
 export const getActionAttachment = ({
   comment,
   userCanCrud,
@@ -397,7 +422,7 @@ export const getActionAttachment = ({
   ),
   'data-test-subj': 'endpoint-action',
   timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
-  timelineIcon: comment.actions.type === 'isolate' ? 'lock' : 'lockOpen',
+  timelineIcon: <ActionIcon actionType={comment.actions.type} />,
   actions: (
     <UserActionCopyLink
       id={comment.id}
diff --git a/x-pack/plugins/cases/public/components/user_action_tree/index.test.tsx b/x-pack/plugins/cases/public/components/user_action_tree/index.test.tsx
index be1516843184..b78595dc91c0 100644
--- a/x-pack/plugins/cases/public/components/user_action_tree/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/user_action_tree/index.test.tsx
@@ -429,7 +429,7 @@ describe(`UserActionTree`, () => {
       );
       await waitFor(() => {
         expect(
-          wrapper.find(`[data-test-subj="endpoint-action"]`).first().prop('timelineIcon')
+          wrapper.find(`[data-test-subj="endpoint-action-icon"]`).first().prop('iconType')
         ).toBe('lock');
       });
     });
@@ -448,7 +448,7 @@ describe(`UserActionTree`, () => {
       );
       await waitFor(() => {
         expect(
-          wrapper.find(`[data-test-subj="endpoint-action"]`).first().prop('timelineIcon')
+          wrapper.find(`[data-test-subj="endpoint-action-icon"]`).first().prop('iconType')
         ).toBe('lockOpen');
       });
     });
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
index b31ec47fdfc4..8c587858a1f2 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx
@@ -48,7 +48,6 @@ import { PolicyDetailsForm } from './policy_details_form';
 const maxFormWidth = '770px';
 const PolicyDetailsHeader = styled.div`
   padding: ${(props) => props.theme.eui.paddingSizes.xl} 0;
-  background-color: #fafbfd;
   border-bottom: 1px solid #d3dae6;
   .securitySolutionHeaderPage {
     max-width: ${maxFormWidth};