From 9d55e60d626d9cc08fa5c6ba2b69161fee43e6bc Mon Sep 17 00:00:00 2001
From: Rickyanto Ang <rickyangwyn@gmail.com>
Date: Wed, 16 Oct 2024 15:45:56 +0700
Subject: [PATCH] [Cloud Security] Fix for Contextual Flyout UI bugs from Bug
 Hunt (#196393)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

This PR is to address the small UI enhancements for Contextual Flyouts
<img width="649" alt="Screenshot 2024-10-15 at 10 10 20 AM"
src="https://github.com/user-attachments/assets/f4a1dbf1-8800-4060-8674-2318c21a9b58">
<img width="801" alt="Screenshot 2024-10-15 at 10 10 52 AM"
src="https://github.com/user-attachments/assets/e2fdfaed-1b2a-4d66-af6e-420cbf1a26c7">

List of UI updates:
-  Fixed Color for Misconfiguration and Vulneabilities Preview Title
- Fixed Size and Font for Posture Score text in Misconfiguration Preview
component and Vulnerabilities in Vulnerabilities Preview component
- Fixed Size for number in Misconfiguration Preview and Vulnerabilities
Preview component
- Fixed Paddings for Misconfiguration and Vulnerabilities Preview
component
-  Fixed Padding between 2 preview components
-  Fixed Width size for severity column

(cherry picked from commit f049dc048d910293ddb880f98b155fb35ce3120f)
---
 .../vulnerabilities_findings_details_table.tsx           | 6 +++---
 .../cloud_security_posture/components/entity_insight.tsx | 4 ++--
 .../misconfiguration/misconfiguration_preview.tsx        | 9 ++++-----
 .../vulnerabilities/vulnerabilities_preview.tsx          | 9 ++++-----
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx
index d004ffe45d5dd..f3422564186ed 100644
--- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx
@@ -154,7 +154,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'CVSS' }
       ),
-      width: '12.5%',
+      width: '15%',
     },
     {
       field: 'vulnerability',
@@ -171,7 +171,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'Severity' }
       ),
-      width: '12.5%',
+      width: '20%',
     },
     {
       field: 'vulnerability',
@@ -182,7 +182,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ queryName }: { queryN
         'xpack.securitySolution.flyout.left.insights.vulnerability.table.ruleColumnName',
         { defaultMessage: 'Package' }
       ),
-      width: '50%',
+      width: '40%',
     },
   ];
 
diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx
index 7d9027c25a9e0..eee9af194ca37 100644
--- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/entity_insight.tsx
@@ -64,14 +64,14 @@ export const EntityInsight = <T,>({
     insightContent.push(
       <>
         <MisconfigurationsPreview name={name} fieldName={fieldName} isPreviewMode={isPreviewMode} />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
       </>
     );
   if (isVulnerabilitiesFindingForHost && hasVulnerabilitiesFindings)
     insightContent.push(
       <>
         <VulnerabilitiesPreview name={name} isPreviewMode={isPreviewMode} />
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
       </>
     );
   return (
diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
index 686ee93c260f7..0aae29395602e 100644
--- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
@@ -84,12 +84,12 @@ const MisconfigurationPreviewScore = ({
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h1>{`${Math.round((passedFindings / (passedFindings + failedFindings)) * 100)}%`}</h1>
+            <h3>{`${Math.round((passedFindings / (passedFindings + failedFindings)) * 100)}%`}</h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText
-            size="m"
+            size="xs"
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -225,8 +225,7 @@ export const MisconfigurationsPreview = ({
       header={{
         iconType: !isPreviewMode && hasMisconfigurationFindings ? 'arrowStart' : '',
         title: (
-          <EuiText
-            size="xs"
+          <EuiTitle
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -235,7 +234,7 @@ export const MisconfigurationsPreview = ({
               id="xpack.securitySolution.flyout.right.insights.misconfigurations.misconfigurationsTitle"
               defaultMessage="Misconfigurations"
             />
-          </EuiText>
+          </EuiTitle>
         ),
         link: hasMisconfigurationFindings ? link : undefined,
       }}
diff --git a/x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx b/x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx
index 216ca41fc0fed..2c162ba9db894 100644
--- a/x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx
+++ b/x-pack/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx
@@ -48,12 +48,12 @@ const VulnerabilitiesCount = ({
       <EuiFlexGroup direction="column" gutterSize="none">
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h1>{vulnerabilitiesTotal}</h1>
+            <h3>{vulnerabilitiesTotal}</h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText
-            size="m"
+            size="xs"
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -162,8 +162,7 @@ export const VulnerabilitiesPreview = ({
       header={{
         iconType: !isPreviewMode && hasVulnerabilitiesFindings ? 'arrowStart' : '',
         title: (
-          <EuiText
-            size="xs"
+          <EuiTitle
             css={css`
               font-weight: ${euiTheme.font.weight.semiBold};
             `}
@@ -172,7 +171,7 @@ export const VulnerabilitiesPreview = ({
               id="xpack.securitySolution.flyout.right.insights.vulnerabilities.vulnerabilitiesTitle"
               defaultMessage="Vulnerabilities"
             />
-          </EuiText>
+          </EuiTitle>
         ),
         link,
       }}