diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/overview/overview_card.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/overview/overview_card.tsx index d3cf8c3840497..0d0803f41c34b 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/overview/overview_card.tsx +++ b/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 = ({ title, children }) => ( - +export const OverviewCard: React.FC = ({ + title, + children, + isPopoverVisible = false, // default to false as this behavior is only really necessary in the situation without an overflow +}) => ( + {title} {children} @@ -85,13 +107,20 @@ export const OverviewCardWithActions: React.FC = ( dataTestSubj, enrichedFieldInfo, }) => { + const [isPopoverVisisble, setIsPopoverVisible] = useState(false); + return ( - + {children} - + diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx index 523b56e9ecf76..a223b49b5558c 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx +++ b/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 = React.memo( getLinkValue, linkValue, onFilterAdded, + setIsPopoverVisible, timelineId, toggleColumn, values, @@ -55,9 +57,10 @@ export const ActionCell: React.FC = React.memo( const toggleTopN = useCallback(() => { setShowTopN((prevShowTopN) => { const newShowTopN = !prevShowTopN; + if (setIsPopoverVisible) setIsPopoverVisible(newShowTopN); return newShowTopN; }); - }, []); + }, [setIsPopoverVisible]); const closeTopN = useCallback(() => { setShowTopN(false); diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx index 27f33409ae1a5..a72746f729ad5 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/components.tsx @@ -64,6 +64,7 @@ export const StackByComboBox: React.FC = ({ selected, onSe placeholder={i18n.STACK_BY_PLACEHOLDER} prepend={i18n.STACK_BY_LABEL} singleSelection={singleSelection} + isClearable={false} sortMatchesBy="startsWith" options={stackOptions} selectedOptions={selectedOptions} diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx index 570f444814d7f..68222ce8cd9e7 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx @@ -370,7 +370,7 @@ const SchemaInformation = ({
{ values: { totalTimelines }, defaultMessage: - 'Failed to import {totalTimelines} {totalTimelines, plural, =1 {rule} other {rules}}', + 'Failed to import {totalTimelines} {totalTimelines, plural, =1 {timeline} other {timelines}}', } );