update vulnerabilities flyout UI of fixed by section

alexreal1314 · alexreal1314 · commit 8c8be35fe884 · 2025-03-31T15:29:36.000+03:00
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.test.tsx
@@ -160,9 +160,8 @@ describe('<VulnerabilityFindingFlyout/>', () => {
       getAllByText(mockVulnerabilityHit.vulnerability?.cvss?.redhat?.V3Score?.toString() as string);
       getAllByText(mockVulnerabilityHit.vulnerability?.cvss?.ghsa?.V3Vector?.toString() as string);
       getAllByText(mockVulnerabilityHit.vulnerability?.cvss?.ghsa?.V3Score?.toString() as string);
-      getByText(
-        `${mockVulnerabilityHit.package.name} ${mockVulnerabilityHit.package.fixed_version}`
-      );
+      getByText(mockVulnerabilityHit.package.name as string);
+      getByText(mockVulnerabilityHit.package.fixed_version as string);
     });
 
     it('Overview Tab with Wiz vulnerability missing fields', () => {
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx
@@ -35,6 +35,7 @@ import {
   findReferenceLink,
 } from '@kbn/cloud-security-posture';
 import { getVendorName } from '@kbn/cloud-security-posture/src/utils/get_vendor_name';
+import { get } from 'lodash/fp';
 import { CspFlyoutMarkdown } from '../../configurations/findings_flyout/findings_flyout';
 import { NvdLogo } from '../../../assets/icons/nvd_logo_svg';
 import { CVSScoreProps, Vendor } from '../types';
@@ -247,6 +248,24 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
       </EuiFlexGroup>
     );
 
+    const renderPackageField = (field: string) => {
+      const value = get(field, vulnerabilityRecord);
+      if (!value) {
+        return <EuiText size="xs">{EMPTY_VALUE}</EuiText>;
+      }
+
+      return Array.isArray(value) ? (
+        <MultiValueCellPopover<CspVulnerabilityFinding>
+          items={value}
+          field={`package.${field}`}
+          object={vulnerabilityRecord}
+          renderItem={renderItem}
+        />
+      ) : (
+        value
+      );
+    };
+
     if (!vulnerabilityRecord?.package?.fixed_version) {
       return <EuiText>{emptyFixesMessageState}</EuiText>;
     }
@@ -261,28 +280,55 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
         `}
       >
         <EuiFlexItem>
-          {Array.isArray(vulnerabilityRecord.package?.name) ? (
-            <MultiValueCellPopover<CspVulnerabilityFinding>
-              items={vulnerabilityRecord.package?.name}
-              field={'package.name'}
-              object={vulnerabilityRecord}
-              renderItem={renderItem}
-            />
-          ) : (
-            vulnerabilityRecord.package?.name
-          )}
+          <EuiFlexGroup
+            responsive={false}
+            gutterSize="xs"
+            justifyContent="flexStart"
+            alignItems="center"
+          >
+            <EuiFlexItem grow={false}>
+              <EuiText
+                size="xs"
+                css={css`
+                  font-weight: ${euiTheme.font.weight.medium};
+                `}
+              >
+                <FormattedMessage
+                  id="xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.packageTitle"
+                  defaultMessage="Package"
+                />
+                :
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{renderPackageField('package.name')}</EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem>
-          {Array.isArray(vulnerabilityRecord.package?.version) ? (
-            <MultiValueCellPopover<CspVulnerabilityFinding>
-              items={vulnerabilityRecord.package?.version}
-              field={'package.version'}
-              object={vulnerabilityRecord}
-              renderItem={renderItem}
-            />
-          ) : (
-            vulnerabilityRecord.package?.version
-          )}
+          <EuiFlexGroup
+            responsive={false}
+            gutterSize="xs"
+            justifyContent="flexStart"
+            alignItems="center"
+          >
+            <EuiFlexItem grow={false}>
+              <EuiText
+                size="xs"
+                css={css`
+                  font-weight: ${euiTheme.font.weight.medium};
+                `}
+              >
+                <FormattedMessage
+                  css={css`
+                    font-weight: ${euiTheme.font.weight.medium};
+                  `}
+                  id="xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.fixedVersionTitle"
+                  defaultMessage="Fixed version"
+                />
+                :
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{renderPackageField('package.fixed_version')}</EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
