[Security Solution] UX fixes for Policy page and Case Host Isolation …

…comment (elastic#106027) * [Security Solution] UX fixes for Policy page and Case Host Isolation comment
kibanamachine · Jul 19, 2021 · b790444 · b790444
1 parent c80f0f7
commit b790444
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 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
@@ -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,
@@ -407,7 +432,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: (
     <UserActionContentToolbar
       getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}

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
@@ -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
@@ -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};