fix MultiCellPopover styles and add vertical divider to flyout description items

alexreal1314 · alexreal1314 · commit c2c75287ceef · 2025-04-01T16:17:04.000+03:00
diff --git a/src/platform/packages/shared/kbn-grouping/src/containers/query/helpers.ts b/src/platform/packages/shared/kbn-grouping/src/containers/query/helpers.ts
@@ -24,7 +24,6 @@ export const createGroupFilter = (
   multiValueFields?: string[]
 ): StrictFilter[] => {
   const shouldIgnoreFieldSize = checkIsFlattenResults(selectedGroup, multiValueFields);
-
   return values != null && values.length > 0
     ? values.reduce(
         (acc: StrictFilter[], query) => [
diff --git a/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/multi_value_cell_popover.tsx b/x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/multi_value_cell_popover.tsx
@@ -45,7 +45,7 @@ const MultiValueCellPopoverComponent = <T, K = string>({
   const closePopover = () => setIsPopoverOpen(false);
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
+    <EuiFlexGroup responsive={true} gutterSize="xs" alignItems="center">
       <EuiFlexItem grow={false}>
         {firstItemRenderer ? (
           firstItemRenderer(items[0])
@@ -72,6 +72,7 @@ const MultiValueCellPopoverComponent = <T, K = string>({
             closePopover={closePopover}
             panelPaddingSize="s"
             repositionOnScroll
+            panelStyle={{ minWidth: 'min-content' }}
           >
             <EuiFlexGroup
               direction="column"
@@ -85,6 +86,7 @@ const MultiValueCellPopoverComponent = <T, K = string>({
                 overflow-y: auto;
                 max-width: min-content;
                 width: min-content;
+                min-width: unset;
                 padding-right: ${euiTheme.size.s};
               `}
             >
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/csp_inline_description_list.tsx
@@ -9,22 +9,31 @@ import React from 'react';
 import { EuiDescriptionList, useEuiTheme } from '@elastic/eui';
 import type { EuiDescriptionListProps } from '@elastic/eui';
 import { CopyButton } from './copy_button';
+import { useFlyoutStyles } from './use_flyout_styles';
 
-const getModifiedTitlesListItems = (listItems?: EuiDescriptionListProps['listItems']) =>
-  listItems
-    ?.filter((item) => !!item?.title && !!item?.description)
-    .map((item) => ({
-      ...item,
-      title: `${item.title}:`,
-      description:
-        typeof item.description === 'string' ? (
+const getModifiedTitlesListItems = (
+  listItems?: EuiDescriptionListProps['listItems'],
+  dividerStyles?: string
+) => {
+  const filteredItems = listItems?.filter((item) => !!item?.title && !!item?.description) || [];
+
+  return filteredItems.map((item, index) => ({
+    ...item,
+    title: `${item.title}:`,
+    description: (
+      <>
+        {typeof item.description === 'string' ? (
           <span>
             {item.description} <CopyButton copyText={item.description} />
           </span>
         ) : (
           item.description
-        ),
-    }));
+        )}
+        {index < filteredItems.length - 1 && <span className={dividerStyles} />}
+      </>
+    ),
+  }));
+};
 
 // eui size m is 12px which is too small, and next after it is base which is 16px which is too big
 const fontSize = '1rem';
@@ -37,7 +46,8 @@ export const CspInlineDescriptionList = ({
   listItems: EuiDescriptionListProps['listItems'];
 }) => {
   const { euiTheme } = useEuiTheme();
-  const modifiedTitlesListItems = getModifiedTitlesListItems(listItems);
+  const { inlineDescriptionListStyle } = useFlyoutStyles();
+  const modifiedTitlesListItems = getModifiedTitlesListItems(listItems, inlineDescriptionListStyle);
   return (
     <EuiDescriptionList
       data-test-subj={testId}
@@ -49,6 +59,8 @@ export const CspInlineDescriptionList = ({
           fontSize,
           paddingRight: 0,
           paddingInline: 0,
+          marginInline: 'unset',
+          marginInlineEnd: euiTheme.size.xs,
         },
       }}
       descriptionProps={{
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/components/use_flyout_styles.ts b/x-pack/solutions/security/plugins/cloud_security_posture/public/components/use_flyout_styles.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/css';
+
+export const useFlyoutStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  const inlineDescriptionListStyle = css`
+    border-left: ${euiTheme.border.width.thick} solid ${euiTheme.colors.textSubdued};
+    margin-left: 4px;
+    margin-right: 4px;
+    display: inline-block;
+    vertical-align: middle;
+    height: calc(${euiTheme.size.m} + ${euiTheme.size.s});
+  `;
+
+  return {
+    inlineDescriptionListStyle,
+  };
+};
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
@@ -270,15 +270,7 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
       return <EuiText>{emptyFixesMessageState}</EuiText>;
     }
     return (
-      <EuiFlexGroup
-        responsive={false}
-        gutterSize="xs"
-        alignItems="flexStart"
-        direction="column"
-        css={css`
-          gap: ${euiTheme.size.s};
-        `}
-      >
+      <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="flexStart" direction="column">
         <EuiFlexItem>
           <EuiFlexGroup
             responsive={false}
@@ -321,8 +313,8 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
                   css={css`
                     font-weight: ${euiTheme.font.weight.medium};
                   `}
-                  id="xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.fixedVersionTitle"
-                  defaultMessage="Fixed version"
+                  id="xpack.csp.vulnerabilities.vulnerabilitiesFindingFlyout.flyoutDescriptionList.versionTitle"
+                  defaultMessage="Version"
                 />
                 :
               </EuiText>
