[7.9] [Security Solution][Exceptions] - Fix bug of alerts not updating after closure from exceptions modal (#76145)

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx

@@ -50,6 +50,10 @@ const utilityBar = (refetch: inputsModel.Refetch, totalCount: number) => (
   <div data-test-subj="mock-utility-bar" />
 );
 
+const exceptionsModal = (refetch: inputsModel.Refetch) => (
+  <div data-test-subj="mock-exceptions-modal" />
+);
+
 const eventsViewerDefaultProps = {
   browserFields: {},
   columns: [],
@@ -460,4 +464,42 @@ describe('EventsViewer', () => {
       });
     });
   });
+
+  describe('exceptions modal', () => {
+    test('it renders exception modal if "exceptionsModal" callback exists', async () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+            <EventsViewer
+              {...eventsViewerDefaultProps}
+              exceptionsModal={exceptionsModal}
+              graphEventId=""
+            />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+
+        expect(wrapper.find(`[data-test-subj="mock-exceptions-modal"]`).exists()).toBeTruthy();
+      });
+    });
+
+    test('it does not render exception modal if "exceptionModal" callback does not exist', async () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+            <EventsViewer {...eventsViewerDefaultProps} graphEventId="" />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+
+        expect(wrapper.find(`[data-test-subj="mock-exceptions-modal"]`).exists()).toBeFalsy();
+      });
+    });
+  });
 });

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -109,6 +109,7 @@ interface Props {
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
   // If truthy, the graph viewer (Resolver) is showing
   graphEventId: string | undefined;
+  exceptionsModal?: (refetch: inputsModel.Refetch) => React.ReactNode;
 }
 
 const EventsViewerComponent: React.FC<Props> = ({
@@ -134,6 +135,7 @@ const EventsViewerComponent: React.FC<Props> = ({
   toggleColumn,
   utilityBar,
   graphEventId,
+  exceptionsModal,
 }) => {
   const { globalFullScreen } = useFullScreen();
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
@@ -259,6 +261,7 @@ const EventsViewerComponent: React.FC<Props> = ({
                       </HeaderFilterGroupWrapper>
                     )}
                   </HeaderSection>
+                  {exceptionsModal && exceptionsModal(refetch)}
                   {utilityBar && !resolverIsShowing(graphEventId) && (
                     <UtilityBar>{utilityBar?.(refetch, totalCountMinusDeleted)}</UtilityBar>
                   )}
@@ -335,5 +338,6 @@ export const EventsViewer = React.memo(
     prevProps.start === nextProps.start &&
     prevProps.sort === nextProps.sort &&
     prevProps.utilityBar === nextProps.utilityBar &&
-    prevProps.graphEventId === nextProps.graphEventId
+    prevProps.graphEventId === nextProps.graphEventId &&
+    prevProps.exceptionsModal === nextProps.exceptionsModal
 );

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -43,6 +43,7 @@ export interface OwnProps {
   headerFilterGroup?: React.ReactNode;
   pageFilters?: Filter[];
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
+  exceptionsModal?: (refetch: inputsModel.Refetch) => React.ReactNode;
 }
 
 type Props = OwnProps & PropsFromRedux;
@@ -74,6 +75,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   utilityBar,
   // If truthy, the graph viewer (Resolver) is showing
   graphEventId,
+  exceptionsModal,
 }) => {
   const [
     { docValueFields, browserFields, indexPatterns, isLoading: isLoadingIndexPattern },
@@ -156,6 +158,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
           toggleColumn={toggleColumn}
           utilityBar={utilityBar}
           graphEventId={graphEventId}
+          exceptionsModal={exceptionsModal}
         />
       </InspectButtonContainer>
     </FullScreenContainer>
@@ -241,6 +244,7 @@ export const StatefulEventsViewer = connector(
       prevProps.showCheckboxes === nextProps.showCheckboxes &&
       prevProps.start === nextProps.start &&
       prevProps.utilityBar === nextProps.utilityBar &&
-      prevProps.graphEventId === nextProps.graphEventId
+      prevProps.graphEventId === nextProps.graphEventId &&
+      prevProps.exceptionsModal === nextProps.exceptionsModal
   )
 );

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -228,7 +228,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       exceptionListType,
       alertData,
     }: AddExceptionModalBaseProps) => {
-      if (alertData !== null && alertData !== undefined) {
+      if (alertData != null) {
         setShouldShowAddExceptionModal(true);
         setAddExceptionModalState({
           ruleName,
@@ -441,9 +441,43 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     closeAddExceptionModal();
   }, [closeAddExceptionModal]);
 
-  const onAddExceptionConfirm = useCallback(() => closeAddExceptionModal(), [
-    closeAddExceptionModal,
-  ]);
+  const onAddExceptionConfirm = useCallback(
+    (refetch: inputsModel.Refetch) => (): void => {
+      refetch();
+      closeAddExceptionModal();
+    },
+    [closeAddExceptionModal]
+  );
+
+  // Callback for creating the AddExceptionModal and allowing it
+  // access to the refetchQuery to update the page
+  const exceptionModalCallback = useCallback(
+    (refetchQuery: inputsModel.Refetch) => {
+      if (shouldShowAddExceptionModal) {
+        return (
+          <AddExceptionModal
+            ruleName={addExceptionModalState.ruleName}
+            ruleId={addExceptionModalState.ruleId}
+            ruleIndices={addExceptionModalState.ruleIndices}
+            exceptionListType={addExceptionModalState.exceptionListType}
+            alertData={addExceptionModalState.alertData}
+            onCancel={onAddExceptionCancel}
+            onConfirm={onAddExceptionConfirm(refetchQuery)}
+            alertStatus={filterGroup}
+          />
+        );
+      } else {
+        return <></>;
+      }
+    },
+    [
+      addExceptionModalState,
+      filterGroup,
+      onAddExceptionCancel,
+      onAddExceptionConfirm,
+      shouldShowAddExceptionModal,
+    ]
+  );
 
   if (loading || indexPatternsLoading || isEmpty(signalsIndex)) {
     return (
@@ -465,19 +499,8 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
         id={timelineId}
         start={from}
         utilityBar={utilityBarCallback}
+        exceptionsModal={exceptionModalCallback}
       />
-      {shouldShowAddExceptionModal === true && addExceptionModalState.alertData !== null && (
-        <AddExceptionModal
-          ruleName={addExceptionModalState.ruleName}
-          ruleId={addExceptionModalState.ruleId}
-          ruleIndices={addExceptionModalState.ruleIndices}
-          exceptionListType={addExceptionModalState.exceptionListType}
-          alertData={addExceptionModalState.alertData}
-          onCancel={onAddExceptionCancel}
-          onConfirm={onAddExceptionConfirm}
-          alertStatus={filterGroup}
-        />
-      )}
     </>
   );
 };