[Security Solution] Exceptions Flyout follow-up (#125159)

elastic · Feb 23, 2022 · 2aafd3b · 2aafd3b
1 parent 9e8d88e
commit 2aafd3b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 deletions.
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
@@ -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<EntryItemProps> = ({
           isDisabled={isDisabled || indexPattern == null}
           onChange={handleFieldChange}
           data-test-subj="exceptionBuilderEntryField"
-          fieldInputWidth={275}
         />
       );
 
       if (isFirst) {
         return (
-          <EuiFormRow label={i18n.FIELD} data-test-subj="exceptionBuilderEntryFieldFormRow">
+          <EuiFormRow
+            fullWidth
+            label={i18n.FIELD}
+            data-test-subj="exceptionBuilderEntryFieldFormRow"
+          >
             {comboBox}
           </EuiFormRow>
         );
       } else {
         return (
-          <EuiFormRow label={''} data-test-subj="exceptionBuilderEntryFieldFormRow">
+          <EuiFormRow fullWidth label={''} data-test-subj="exceptionBuilderEntryFieldFormRow">
             {comboBox}
           </EuiFormRow>
         );
@@ -319,14 +322,14 @@ export const BuilderEntryItem: React.FC<EntryItemProps> = ({
       className="exceptionItemEntryContainer"
       data-test-subj="exceptionItemEntryContainer"
     >
-      <EuiFlexItem grow={false}>{renderFieldInput(showLabel)}</EuiFlexItem>
+      <FieldFlexItem grow={4}>{renderFieldInput(showLabel)}</FieldFlexItem>
       <EuiFlexItem grow={false}>{renderOperatorInput(showLabel)}</EuiFlexItem>
-      <MyValuesInput grow={6}>
+      <FieldFlexItem grow={5}>
         {renderFieldValueInput(
           showLabel,
           entry.nested === 'parent' ? OperatorTypeEnum.EXISTS : entry.operator.type
         )}
-      </MyValuesInput>
+      </FieldFlexItem>
     </EuiFlexGroup>
   );
 };

diff --git a/...gins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx b/...gins/security_solution/public/common/components/exceptions/add_exception_flyout/index.tsx
@@ -422,7 +422,13 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
   }, [hasOsSelection, selectedOs]);
 
   return (
-    <EuiFlyout size="l" onClose={onCancel} data-test-subj="add-exception-flyout">
+    <EuiFlyout
+      ownFocus
+      maskProps={{ style: 'z-index: 5000' }} // For an edge case to display above the timeline flyout
+      size="l"
+      onClose={onCancel}
+      data-test-subj="add-exception-flyout"
+    >
       <FlyoutHeader>
         <EuiTitle>
           <h2 data-test-subj="exception-flyout-title">{addExceptionMessage}</h2>

diff --git a/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/...olution/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<AlertContextMenuProps & PropsFromRedux
     ecsRowData['kibana.alert.rule.parameters']?.index ?? ecsRowData?.signal?.rule?.index;
 
   const {
-    exceptionModalType,
+    exceptionFlyoutType,
     onAddExceptionCancel,
     onAddExceptionConfirm,
     onAddExceptionTypeClick,
     ruleIndices,
-  } = useExceptionModal({
+  } = useExceptionFlyout({
     ruleIndex,
     refetch: refetchAll,
     timelineId,
@@ -204,15 +204,15 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux
           </EventsTdContent>
         </div>
       )}
-      {exceptionModalType != null &&
+      {exceptionFlyoutType != null &&
         ruleId != null &&
         ruleName != null &&
         ecsRowData?._id != null && (
           <AddExceptionFlyoutWrapper
             ruleName={ruleName}
             ruleId={ruleId}
             ruleIndices={ruleIndices}
-            exceptionListType={exceptionModalType}
+            exceptionListType={exceptionFlyoutType}
             eventId={ecsRowData?._id}
             onCancel={onAddExceptionCancel}
             onConfirm={onAddExceptionConfirm}

diff --git a/...eline_actions/use_add_exception_modal.tsx → ...line_actions/use_add_exception_flyout.tsx b/...eline_actions/use_add_exception_modal.tsx → ...line_actions/use_add_exception_flyout.tsx
@@ -12,25 +12,25 @@ import { DEFAULT_INDEX_PATTERN } from '../../../../../common/constants';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { inputsModel } from '../../../../common/store';
 
-interface UseExceptionModalProps {
+interface UseExceptionFlyoutProps {
   ruleIndex: string[] | null | undefined;
   refetch?: inputsModel.Refetch;
   timelineId: string;
 }
-interface UseExceptionModal {
-  exceptionModalType: ExceptionListType | null;
+interface UseExceptionFlyout {
+  exceptionFlyoutType: ExceptionListType | null;
   onAddExceptionTypeClick: (type: ExceptionListType) => 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<ExceptionListType | null>(null);
+}: UseExceptionFlyoutProps): UseExceptionFlyout => {
+  const [exceptionFlyoutType, setOpenAddExceptionFlyout] = useState<ExceptionListType | null>(null);
 
   const ruleIndices = useMemo((): string[] => {
     if (ruleIndex != null) {
@@ -41,25 +41,25 @@ export const useExceptionModal = ({
   }, [ruleIndex]);
 
   const onAddExceptionTypeClick = useCallback((exceptionListType: ExceptionListType): void => {
-    setOpenAddExceptionModal(exceptionListType);
+    setOpenAddExceptionFlyout(exceptionListType);
   }, []);
 
   const onAddExceptionCancel = useCallback(() => {
-    setOpenAddExceptionModal(null);
+    setOpenAddExceptionFlyout(null);
   }, []);
 
   const onAddExceptionConfirm = useCallback(
     (didCloseAlert: boolean, didBulkCloseAlert) => {
       if (refetch && (timelineId !== TimelineId.active || didBulkCloseAlert)) {
         refetch();
       }
-      setOpenAddExceptionModal(null);
+      setOpenAddExceptionFlyout(null);
     },
     [refetch, timelineId]
   );
 
   return {
-    exceptionModalType,
+    exceptionFlyoutType,
     onAddExceptionTypeClick,
     onAddExceptionCancel,
     onAddExceptionConfirm,

diff --git a/...plugins/security_solution/public/timelines/components/side_panel/event_details/footer.tsx b/...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 && (
             <AddExceptionFlyoutWrapper
               {...addExceptionModalWrapperData}
               ruleIndices={ruleIndices}
-              exceptionListType={exceptionModalType}
+              exceptionListType={exceptionFlyoutType}
               onCancel={onAddExceptionCancel}
               onConfirm={onAddExceptionConfirm}
             />