From 0cb37b05787776f1ae2003b79b9a4efbcd9bb4fd Mon Sep 17 00:00:00 2001
From: Candace Park <candace.park@elastic.co>
Date: Thu, 11 Feb 2021 15:13:05 -0500
Subject: [PATCH] modify tests, policy response spacing alts

---
 .../view/details/endpoint_details.tsx         |  5 ++-
 .../endpoint_hosts/view/details/index.tsx     | 18 ++++++++--
 .../view/details/policy_response.tsx          |  2 +-
 .../pages/endpoint_hosts/view/index.test.tsx  | 36 +++++--------------
 4 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
index 3f862285110d15..d0d745df8a5535 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
@@ -167,7 +167,7 @@ export const EndpointDetails = memo(
           }),
           description: (
             <EuiFlexGroup alignItems="center">
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EndpointPolicyLink
                   policyId={details.Endpoint.policy.applied.id}
                   data-test-subj="policyDetailsValue"
@@ -212,7 +212,7 @@ export const EndpointDetails = memo(
             // @ts-ignore
             <EuiBadge
               color={POLICY_STATUS_TO_BADGE_COLOR[policyStatus] || 'default'}
-              data-test-subj="policyStatusHealth"
+              data-test-subj="policyStatusValue"
               href={policyResponseUri}
               onClick={policyStatusClickHandler}
             >
@@ -278,7 +278,6 @@ export const EndpointDetails = memo(
             onClick={handleReassignEndpointsClick}
             data-test-subj="endpointDetailsLinkToIngest"
           >
-            <EuiIcon type="savedObjectsApp" className="linkToAppIcon" />
             <FormattedMessage
               id="xpack.securitySolution.endpoint.details.linkToIngestTitle"
               defaultMessage="Reassign Policy"
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
index 7d0b20c6d1ef83..693b185c0feabb 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -20,6 +20,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import styled from 'styled-components';
 import { useToasts } from '../../../../../common/lib/kibana';
 import { useEndpointSelector } from '../hooks';
 import { urlFromQueryParams } from '../url_from_query_params';
@@ -131,6 +132,14 @@ export const EndpointDetailsFlyout = memo(() => {
 
 EndpointDetailsFlyout.displayName = 'EndpointDetailsFlyout';
 
+const PolicyResponseFlyout = styled.div`
+  .endpointDetailsPolicyResponseFlyoutBody {
+    .euiFlyoutBody__overflowContent {
+      padding-top: 0;
+    }
+  }
+`;
+
 const PolicyResponseFlyoutPanel = memo<{
   hostMeta: HostMetadata;
 }>(({ hostMeta }) => {
@@ -171,12 +180,15 @@ const PolicyResponseFlyoutPanel = memo<{
   }, [backToDetailsClickHandler, detailsUri]);
 
   return (
-    <>
+    <PolicyResponseFlyout>
       <FlyoutSubHeader
         backButton={backButtonProp}
         data-test-subj="endpointDetailsPolicyResponseFlyoutHeader"
       />
-      <EuiFlyoutBody data-test-subj="endpointDetailsPolicyResponseFlyoutBody">
+      <EuiFlyoutBody
+        data-test-subj="endpointDetailsPolicyResponseFlyoutBody"
+        className="endpointDetailsPolicyResponseFlyoutBody"
+      >
         <EuiText data-test-subj="endpointDetailsPolicyResponseFlyoutTitle">
           <h4>
             <FormattedMessage
@@ -209,7 +221,7 @@ const PolicyResponseFlyoutPanel = memo<{
           />
         )}
       </EuiFlyoutBody>
-    </>
+    </PolicyResponseFlyout>
   );
 });
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
index 5c883e9affe1dc..b6c6be673da601 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/policy_response.tsx
@@ -29,7 +29,7 @@ import {
  */
 const PolicyResponseConfigAccordion = styled(EuiAccordion)`
   .euiAccordion__triggerWrapper {
-    padding: ${(props) => props.theme.eui.paddingSizes.s};
+    padding: ${(props) => props.theme.eui.paddingSizes.xs};
   }
 
   &.euiAccordion-isOpen {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 99c313220e0680..8599e1d61d358f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -645,49 +645,29 @@ describe('when on the list page', () => {
 
     it('should display Success overall policy status', async () => {
       const renderResult = await renderAndWaitForData();
-      const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
-      expect(policyStatusLink.textContent).toEqual('Success');
-
-      const policyStatusHealth = await renderResult.findByTestId('policyStatusHealth');
-      expect(
-        policyStatusHealth.querySelector('[data-euiicon-type][color="success"]')
-      ).not.toBeNull();
+      const policyStatusBadge = await renderResult.findByTestId('policyStatusValue');
+      expect(policyStatusBadge.textContent).toEqual('Success');
     });
 
     it('should display Warning overall policy status', async () => {
       mockEndpointListApi(createPolicyResponse(HostPolicyResponseActionStatus.warning));
       const renderResult = await renderAndWaitForData();
-      const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
-      expect(policyStatusLink.textContent).toEqual('Warning');
-
-      const policyStatusHealth = await renderResult.findByTestId('policyStatusHealth');
-      expect(
-        policyStatusHealth.querySelector('[data-euiicon-type][color="warning"]')
-      ).not.toBeNull();
+      const policyStatusBadge = await renderResult.findByTestId('policyStatusValue');
+      expect(policyStatusBadge.textContent).toEqual('Warning');
     });
 
     it('should display Failed overall policy status', async () => {
       mockEndpointListApi(createPolicyResponse(HostPolicyResponseActionStatus.failure));
       const renderResult = await renderAndWaitForData();
-      const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
-      expect(policyStatusLink.textContent).toEqual('Failed');
-
-      const policyStatusHealth = await renderResult.findByTestId('policyStatusHealth');
-      expect(
-        policyStatusHealth.querySelector('[data-euiicon-type][color="danger"]')
-      ).not.toBeNull();
+      const policyStatusBadge = await renderResult.findByTestId('policyStatusValue');
+      expect(policyStatusBadge.textContent).toEqual('Failed');
     });
 
     it('should display Unknown overall policy status', async () => {
       mockEndpointListApi(createPolicyResponse('' as HostPolicyResponseActionStatus));
       const renderResult = await renderAndWaitForData();
-      const policyStatusLink = await renderResult.findByTestId('policyStatusValue');
-      expect(policyStatusLink.textContent).toEqual('Unknown');
-
-      const policyStatusHealth = await renderResult.findByTestId('policyStatusHealth');
-      expect(
-        policyStatusHealth.querySelector('[data-euiicon-type][color="subdued"]')
-      ).not.toBeNull();
+      const policyStatusBadge = await renderResult.findByTestId('policyStatusValue');
+      expect(policyStatusBadge.textContent).toEqual('Unknown');
     });
 
     it('should include the link to reassignment in Ingest', async () => {