diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx index 9079390cb301a..206b1a5dd6f85 100644 --- a/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.tsx @@ -43,7 +43,7 @@ import { getEmptyValue } from '../../../common/empty_value'; import * as i18n from './translations'; -const MyValuesInput = styled(EuiFlexItem)` +const FieldFlexItem = styled(EuiFlexItem)` overflow: hidden; `; @@ -166,19 +166,22 @@ export const BuilderEntryItem: React.FC = ({ isDisabled={isDisabled || indexPattern == null} onChange={handleFieldChange} data-test-subj="exceptionBuilderEntryField" - fieldInputWidth={275} /> ); if (isFirst) { return ( - + {comboBox} ); } else { return ( - + {comboBox} ); @@ -319,14 +322,14 @@ export const BuilderEntryItem: React.FC = ({ className="exceptionItemEntryContainer" data-test-subj="exceptionItemEntryContainer" > - {renderFieldInput(showLabel)} + {renderFieldInput(showLabel)} {renderOperatorInput(showLabel)} - + {renderFieldValueInput( showLabel, entry.nested === 'parent' ? OperatorTypeEnum.EXISTS : entry.operator.type )} - + ); }; diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx index cd293aed95d60..464e966f36349 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx @@ -422,7 +422,13 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({ }, [hasOsSelection, selectedOs]); return ( - +

{addExceptionMessage}

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx index 14820c4b34315..b5e630de50f79 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx @@ -29,7 +29,7 @@ import { useQueryAlerts } from '../../../containers/detection_engine/alerts/use_ import { useSignalIndex } from '../../../containers/detection_engine/alerts/use_signal_index'; import { EventFiltersFlyout } from '../../../../management/pages/event_filters/view/components/flyout'; import { useAlertsActions } from './use_alerts_actions'; -import { useExceptionModal } from './use_add_exception_modal'; +import { useExceptionFlyout } from './use_add_exception_flyout'; import { useExceptionActions } from './use_add_exception_actions'; import { useEventFilterModal } from './use_event_filter_modal'; import { Status } from '../../../../../common/detection_engine/schemas/common/schemas'; @@ -125,12 +125,12 @@ const AlertContextMenuComponent: React.FC )} - {exceptionModalType != null && + {exceptionFlyoutType != null && ruleId != null && ruleName != null && ecsRowData?._id != null && ( @@ -212,7 +212,7 @@ const AlertContextMenuComponent: React.FC void; onAddExceptionCancel: () => void; onAddExceptionConfirm: (didCloseAlert: boolean, didBulkCloseAlert: boolean) => void; ruleIndices: string[]; } -export const useExceptionModal = ({ +export const useExceptionFlyout = ({ ruleIndex, refetch, timelineId, -}: UseExceptionModalProps): UseExceptionModal => { - const [exceptionModalType, setOpenAddExceptionModal] = useState(null); +}: UseExceptionFlyoutProps): UseExceptionFlyout => { + const [exceptionFlyoutType, setOpenAddExceptionFlyout] = useState(null); // TODO: Steph/ueba remove when past experimental const uebaEnabled = useIsExperimentalFeatureEnabled('uebaEnabled'); @@ -50,11 +50,11 @@ export const useExceptionModal = ({ }, [ruleIndex, uebaEnabled]); const onAddExceptionTypeClick = useCallback((exceptionListType: ExceptionListType): void => { - setOpenAddExceptionModal(exceptionListType); + setOpenAddExceptionFlyout(exceptionListType); }, []); const onAddExceptionCancel = useCallback(() => { - setOpenAddExceptionModal(null); + setOpenAddExceptionFlyout(null); }, []); const onAddExceptionConfirm = useCallback( @@ -62,13 +62,13 @@ export const useExceptionModal = ({ if (refetch && (timelineId !== TimelineId.active || didBulkCloseAlert)) { refetch(); } - setOpenAddExceptionModal(null); + setOpenAddExceptionFlyout(null); }, [refetch, timelineId] ); return { - exceptionModalType, + exceptionFlyoutType, onAddExceptionTypeClick, onAddExceptionCancel, onAddExceptionConfirm, diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/footer.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/footer.tsx index 86b23594c947a..bbb3206bf823a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/footer.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/footer.tsx @@ -12,7 +12,7 @@ import { connect, ConnectedProps } from 'react-redux'; import { TakeActionDropdown } from '../../../../detections/components/take_action_dropdown'; import type { TimelineEventsDetailsItem } from '../../../../../common/search_strategy'; import { TimelineId } from '../../../../../common/types'; -import { useExceptionModal } from '../../../../detections/components/alerts_table/timeline_actions/use_add_exception_modal'; +import { useExceptionFlyout } from '../../../../detections/components/alerts_table/timeline_actions/use_add_exception_flyout'; import { AddExceptionFlyoutWrapper } from '../../../../detections/components/alerts_table/timeline_actions/alert_context_menu'; import { EventFiltersFlyout } from '../../../../management/pages/event_filters/view/components/flyout'; import { useEventFilterModal } from '../../../../detections/components/alerts_table/timeline_actions/use_event_filter_modal'; @@ -94,12 +94,12 @@ export const EventDetailsFooterComponent = React.memo( }, [timelineId, globalQuery, timelineQuery]); const { - exceptionModalType, + exceptionFlyoutType, onAddExceptionTypeClick, onAddExceptionCancel, onAddExceptionConfirm, ruleIndices, - } = useExceptionModal({ + } = useExceptionFlyout({ ruleIndex, refetch: refetchAll, timelineId, @@ -133,13 +133,13 @@ export const EventDetailsFooterComponent = React.memo( {/* This is still wrong to do render flyout/modal inside of the flyout We need to completely refactor the EventDetails component to be correct */} - {exceptionModalType != null && + {exceptionFlyoutType != null && addExceptionModalWrapperData.ruleId != null && addExceptionModalWrapperData.eventId != null && (