[Security Solution][Investigations] - Minor bug fixes (#130054)

x-pack/plugins/security_solution/public/common/components/event_details/overview/overview_card.tsx

@@ -6,7 +6,7 @@
  */
 
 import { EuiFlexGroup, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { ActionCell } from '../table/action_cell';
 import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
@@ -19,7 +19,9 @@ const ActionWrapper = euiStyled.div`
   margin-left: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 
-const OverviewPanel = euiStyled(EuiPanel)`
+const OverviewPanel = euiStyled(EuiPanel)<{
+  $isPopoverVisible: boolean;
+}>`
   &&& {
     background-color: ${({ theme }) => theme.eui.euiColorLightestShade};
     padding: ${({ theme }) => theme.eui.paddingSizes.s};
@@ -45,15 +47,35 @@ const OverviewPanel = euiStyled(EuiPanel)`
         transform: translate(0);
       }
     }
+
+    ${(props) =>
+      props.$isPopoverVisible &&
+      `
+      & ${ActionWrapper} {
+        width: auto;
+        transform: translate(0);
+      }
+    `}
   }
 `;
 
 interface OverviewCardProps {
+  isPopoverVisible?: boolean; // Prevent the hover actions from collapsing on each other when not directly hovered on
   title: string;
 }
 
-export const OverviewCard: React.FC<OverviewCardProps> = ({ title, children }) => (
-  <OverviewPanel borderRadius="none" hasShadow={false} hasBorder={false} paddingSize="s">
+export const OverviewCard: React.FC<OverviewCardProps> = ({
+  title,
+  children,
+  isPopoverVisible = false, // default to false as this behavior is only really necessary in the situation without an overflow
+}) => (
+  <OverviewPanel
+    borderRadius="none"
+    hasShadow={false}
+    hasBorder={false}
+    paddingSize="s"
+    $isPopoverVisible={isPopoverVisible}
+  >
     <EuiText size="s">{title}</EuiText>
     <EuiSpacer size="s" />
     {children}
@@ -85,13 +107,20 @@ export const OverviewCardWithActions: React.FC<OverviewCardWithActionsProps> = (
   dataTestSubj,
   enrichedFieldInfo,
 }) => {
+  const [isPopoverVisisble, setIsPopoverVisible] = useState(false);
+
   return (
-    <OverviewCard title={title}>
+    <OverviewCard title={title} isPopoverVisible={isPopoverVisisble}>
       <EuiFlexGroup alignItems="center" gutterSize="none">
         <ClampedContent data-test-subj={dataTestSubj}>{children}</ClampedContent>
 
         <ActionWrapper>
-          <ActionCell {...enrichedFieldInfo} contextId={contextId} applyWidthAndPadding={false} />
+          <ActionCell
+            {...enrichedFieldInfo}
+            contextId={contextId}
+            setIsPopoverVisible={setIsPopoverVisible}
+            applyWidthAndPadding={false}
+          />
         </ActionWrapper>
       </EuiFlexGroup>
     </OverviewCard>

x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx

@@ -18,6 +18,7 @@ interface Props extends EnrichedFieldInfo {
   disabled?: boolean;
   getLinkValue?: (field: string) => string | null;
   onFilterAdded?: () => void;
+  setIsPopoverVisible?: (isVisible: boolean) => void;
   toggleColumn?: (column: ColumnHeaderOptions) => void;
   hideAddToTimeline?: boolean;
 }
@@ -32,6 +33,7 @@ export const ActionCell: React.FC<Props> = React.memo(
     getLinkValue,
     linkValue,
     onFilterAdded,
+    setIsPopoverVisible,
     timelineId,
     toggleColumn,
     values,
@@ -55,9 +57,10 @@ export const ActionCell: React.FC<Props> = React.memo(
     const toggleTopN = useCallback(() => {
       setShowTopN((prevShowTopN) => {
         const newShowTopN = !prevShowTopN;
+        if (setIsPopoverVisible) setIsPopoverVisible(newShowTopN);
         return newShowTopN;
       });
-    }, []);
+    }, [setIsPopoverVisible]);
 
     const closeTopN = useCallback(() => {
       setShowTopN(false);

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx

@@ -64,6 +64,7 @@ export const StackByComboBox: React.FC<StackedBySelectProps> = ({ selected, onSe
         placeholder={i18n.STACK_BY_PLACEHOLDER}
         prepend={i18n.STACK_BY_LABEL}
         singleSelection={singleSelection}
+        isClearable={false}
         sortMatchesBy="startsWith"
         options={stackOptions}
         selectedOptions={selectedOptions}

x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx

@@ -370,7 +370,7 @@ const SchemaInformation = ({
       </EuiPopoverTitle>
       <div
         // Limit the width based on UX design
-        style={{ maxWidth: '256px' }}
+        style={{ maxWidth: '268px' }}
       >
         <StyledDescriptionList
           data-test-subj="resolver:graph-controls:schema-info"

x-pack/plugins/security_solution/public/timelines/components/open_timeline/translations.ts

@@ -379,7 +379,7 @@ export const IMPORT_FAILED = (totalTimelines: number) =>
     {
       values: { totalTimelines },
       defaultMessage:
-        'Failed to import {totalTimelines} {totalTimelines, plural, =1 {rule} other {rules}}',
+        'Failed to import {totalTimelines} {totalTimelines, plural, =1 {timeline} other {timelines}}',
     }
   );