[7.x] [Security Solution][Detections] Pre-refactoring for the rule management table (#91302)

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

@@ -17,9 +17,8 @@ import styled from 'styled-components';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 
 import * as i18n from '../../../pages/detection_engine/rules/translations';
-import { enableRules } from '../../../containers/detection_engine/rules';
+import { enableRules, RulesTableAction } from '../../../containers/detection_engine/rules';
 import { enableRulesAction } from '../../../pages/detection_engine/rules/all/actions';
-import { Action } from '../../../pages/detection_engine/rules/all/reducer';
 import { useStateToaster, displayErrorToast } from '../../../../common/components/toasters';
 import { bucketRulesResponse } from '../../../pages/detection_engine/rules/all/helpers';
 
@@ -33,7 +32,7 @@ const StaticSwitch = styled(EuiSwitch)`
 StaticSwitch.displayName = 'StaticSwitch';
 
 export interface RuleSwitchProps {
-  dispatch?: React.Dispatch<Action>;
+  dispatch?: React.Dispatch<RulesTableAction>;
   id: string;
   enabled: boolean;
   isDisabled?: boolean;

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/index.ts

@@ -10,6 +10,6 @@ export * from './use_update_rule';
 export * from './use_create_rule';
 export * from './types';
 export * from './use_rule';
-export * from './use_rules';
+export * from './rules_table';
 export * from './use_pre_packaged_rules';
 export * from './use_rule_status';

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './rules_table_facade';
+export * from './rules_table_reducer';
+export * from './use_rules';
+export * from './use_rules_table';

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/rules_table_facade.ts

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { Dispatch } from 'react';
+import { Rule, FilterOptions, PaginationOptions } from '../types';
+import { RulesTableAction, LoadingRuleAction } from './rules_table_reducer';
+
+export interface RulesTableFacade {
+  setRules(newRules: Rule[], newPagination: Partial<PaginationOptions>): void;
+  updateRules(rules: Rule[]): void;
+  updateOptions(filter: Partial<FilterOptions>, pagination: Partial<PaginationOptions>): void;
+  actionStarted(actionType: LoadingRuleAction, ruleIds: string[]): void;
+  actionStopped(): void;
+  setShowIdleModal(show: boolean): void;
+  setLastRefreshDate(): void;
+  setAutoRefreshOn(on: boolean): void;
+}
+
+export const createRulesTableFacade = (dispatch: Dispatch<RulesTableAction>): RulesTableFacade => {
+  return {
+    setRules: (newRules: Rule[], newPagination: Partial<PaginationOptions>) => {
+      dispatch({
+        type: 'setRules',
+        rules: newRules,
+        pagination: newPagination,
+      });
+    },
+
+    updateRules: (rules: Rule[]) => {
+      dispatch({
+        type: 'updateRules',
+        rules,
+      });
+    },
+
+    updateOptions: (filter: Partial<FilterOptions>, pagination: Partial<PaginationOptions>) => {
+      dispatch({
+        type: 'updateFilterOptions',
+        filterOptions: filter,
+        pagination,
+      });
+    },
+
+    actionStarted: (actionType: LoadingRuleAction, ruleIds: string[]) => {
+      dispatch({
+        type: 'loadingRuleIds',
+        actionType,
+        ids: ruleIds,
+      });
+    },
+
+    actionStopped: () => {
+      dispatch({
+        type: 'loadingRuleIds',
+        actionType: null,
+        ids: [],
+      });
+    },
+
+    setShowIdleModal: (show: boolean) => {
+      dispatch({
+        type: 'setShowIdleModal',
+        show,
+      });
+    },
+
+    setLastRefreshDate: () => {
+      dispatch({
+        type: 'setLastRefreshDate',
+      });
+    },
+
+    setAutoRefreshOn: (on: boolean) => {
+      dispatch({
+        type: 'setAutoRefreshOn',
+        on,
+      });
+    },
+  };
+};

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/reducer.test.ts → x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/rules_table_reducer.test.ts

@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import { FilterOptions, PaginationOptions } from '../../../../containers/detection_engine/rules';
+import { mockRule } from '../../../../pages/detection_engine/rules/all/__mocks__/mock';
+import { FilterOptions, PaginationOptions } from '../types';
+import { RulesTableAction, RulesTableState, createRulesTableReducer } from './rules_table_reducer';
 
-import { Action, State, allRulesReducer } from './reducer';
-import { mockRule } from './__mocks__/mock';
-
-const initialState: State = {
-  exportRuleIds: [],
+const initialState: RulesTableState = {
+  rules: [],
+  pagination: {
+    page: 1,
+    perPage: 20,
+    total: 0,
+  },
   filterOptions: {
     filter: '',
     sortField: 'enabled',
@@ -20,29 +24,24 @@ const initialState: State = {
     showCustomRules: false,
     showElasticRules: false,
   },
-  loadingRuleIds: [],
   loadingRulesAction: null,
-  pagination: {
-    page: 1,
-    perPage: 20,
-    total: 0,
-  },
-  rules: [],
+  loadingRuleIds: [],
   selectedRuleIds: [],
+  exportRuleIds: [],
   lastUpdated: 0,
-  showIdleModal: false,
   isRefreshOn: false,
+  showIdleModal: false,
 };
 
 describe('allRulesReducer', () => {
-  let reducer: (state: State, action: Action) => State;
+  let reducer: (state: RulesTableState, action: RulesTableAction) => RulesTableState;
 
   beforeEach(() => {
     jest.useFakeTimers();
     jest
       .spyOn(global.Date, 'now')
       .mockImplementationOnce(() => new Date('2020-10-31T11:01:58.135Z').valueOf());
-    reducer = allRulesReducer({ current: undefined });
+    reducer = createRulesTableReducer({ current: undefined });
   });
 
   afterEach(() => {

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/rules_table_reducer.ts

@@ -0,0 +1,165 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type React from 'react';
+import { EuiBasicTable } from '@elastic/eui';
+import { FilterOptions, PaginationOptions, Rule } from '../types';
+
+export type LoadingRuleAction =
+  | 'load'
+  | 'duplicate'
+  | 'enable'
+  | 'disable'
+  | 'export'
+  | 'delete'
+  | null;
+
+export interface RulesTableState {
+  rules: Rule[];
+  pagination: PaginationOptions;
+  filterOptions: FilterOptions;
+  loadingRulesAction: LoadingRuleAction;
+  loadingRuleIds: string[];
+  selectedRuleIds: string[];
+  exportRuleIds: string[];
+  lastUpdated: number;
+  isRefreshOn: boolean;
+  showIdleModal: boolean;
+}
+
+export type RulesTableAction =
+  | { type: 'setRules'; rules: Rule[]; pagination: Partial<PaginationOptions> }
+  | { type: 'updateRules'; rules: Rule[] }
+  | {
+      type: 'updateFilterOptions';
+      filterOptions: Partial<FilterOptions>;
+      pagination: Partial<PaginationOptions>;
+    }
+  | { type: 'loadingRuleIds'; ids: string[]; actionType: LoadingRuleAction }
+  | { type: 'selectedRuleIds'; ids: string[] }
+  | { type: 'exportRuleIds'; ids: string[] }
+  | { type: 'setLastRefreshDate' }
+  | { type: 'setAutoRefreshOn'; on: boolean }
+  | { type: 'setShowIdleModal'; show: boolean }
+  | { type: 'failure' };
+
+export const createRulesTableReducer = (
+  tableRef: React.MutableRefObject<EuiBasicTable<unknown> | undefined>
+) => {
+  const rulesTableReducer = (state: RulesTableState, action: RulesTableAction): RulesTableState => {
+    switch (action.type) {
+      case 'setRules': {
+        if (
+          tableRef != null &&
+          tableRef.current != null &&
+          tableRef.current.changeSelection != null
+        ) {
+          // for future devs: eui basic table is not giving us a prop to set the value, so
+          // we are using the ref in setTimeout to reset on the next loop so that we
+          // do not get a warning telling us we are trying to update during a render
+          window.setTimeout(() => tableRef?.current?.changeSelection([]), 0);
+        }
+
+        return {
+          ...state,
+          rules: action.rules,
+          selectedRuleIds: [],
+          loadingRuleIds: [],
+          loadingRulesAction: null,
+          pagination: {
+            ...state.pagination,
+            ...action.pagination,
+          },
+        };
+      }
+      case 'updateRules': {
+        const ruleIds = state.rules.map((r) => r.id);
+        const updatedRules = action.rules.reduce((rules, updatedRule) => {
+          let newRules = rules;
+          if (ruleIds.includes(updatedRule.id)) {
+            newRules = newRules.map((r) => (updatedRule.id === r.id ? updatedRule : r));
+          } else {
+            newRules = [...newRules, updatedRule];
+          }
+          return newRules;
+        }, state.rules);
+        const updatedRuleIds = action.rules.map((r) => r.id);
+        const newLoadingRuleIds = state.loadingRuleIds.filter((id) => !updatedRuleIds.includes(id));
+        return {
+          ...state,
+          rules: updatedRules,
+          loadingRuleIds: newLoadingRuleIds,
+          loadingRulesAction: newLoadingRuleIds.length === 0 ? null : state.loadingRulesAction,
+        };
+      }
+      case 'updateFilterOptions': {
+        return {
+          ...state,
+          filterOptions: {
+            ...state.filterOptions,
+            ...action.filterOptions,
+          },
+          pagination: {
+            ...state.pagination,
+            ...action.pagination,
+          },
+        };
+      }
+      case 'loadingRuleIds': {
+        return {
+          ...state,
+          loadingRuleIds: action.actionType == null ? [] : [...state.loadingRuleIds, ...action.ids],
+          loadingRulesAction: action.actionType,
+        };
+      }
+      case 'selectedRuleIds': {
+        return {
+          ...state,
+          selectedRuleIds: action.ids,
+        };
+      }
+      case 'exportRuleIds': {
+        return {
+          ...state,
+          loadingRuleIds: action.ids,
+          loadingRulesAction: 'export',
+          exportRuleIds: action.ids,
+        };
+      }
+      case 'setLastRefreshDate': {
+        return {
+          ...state,
+          lastUpdated: Date.now(),
+        };
+      }
+      case 'setAutoRefreshOn': {
+        return {
+          ...state,
+          isRefreshOn: action.on,
+        };
+      }
+      case 'setShowIdleModal': {
+        return {
+          ...state,
+          showIdleModal: action.show,
+          isRefreshOn: !action.show,
+        };
+      }
+      case 'failure': {
+        return {
+          ...state,
+          rules: [],
+        };
+      }
+      default: {
+        return state;
+      }
+    }
+  };
+
+  return rulesTableReducer;
+};

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rules.test.tsx → x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/use_rules.test.tsx

@@ -7,9 +7,9 @@
 
 import { renderHook, act } from '@testing-library/react-hooks';
 import { useRules, UseRules, ReturnRules } from './use_rules';
-import * as api from './api';
+import * as api from '../api';
 
-jest.mock('./api');
+jest.mock('../api');
 
 describe('useRules', () => {
   beforeEach(() => {

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rules.tsx → x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/use_rules.tsx

@@ -7,10 +7,10 @@
 
 import { useEffect, useState, useRef } from 'react';
 
-import { FetchRulesResponse, FilterOptions, PaginationOptions, Rule } from './types';
-import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
-import { fetchRules } from './api';
-import * as i18n from './translations';
+import { FetchRulesResponse, FilterOptions, PaginationOptions, Rule } from '../types';
+import { errorToToaster, useStateToaster } from '../../../../../common/components/toasters';
+import { fetchRules } from '../api';
+import * as i18n from '../translations';
 
 export type ReturnRules = [boolean, FetchRulesResponse | null, () => Promise<void>];
 

x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/rules_table/use_rules_table.ts

@@ -0,0 +1,131 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Dispatch, useMemo, useReducer, useEffect, useRef } from 'react';
+import { EuiBasicTable } from '@elastic/eui';
+
+import { errorToToaster, useStateToaster } from '../../../../../common/components/toasters';
+import * as i18n from '../translations';
+
+import { fetchRules } from '../api';
+import { createRulesTableReducer, RulesTableState, RulesTableAction } from './rules_table_reducer';
+import { createRulesTableFacade, RulesTableFacade } from './rules_table_facade';
+
+const INITIAL_SORT_FIELD = 'enabled';
+
+const initialStateDefaults: RulesTableState = {
+  rules: [],
+  pagination: {
+    page: 1,
+    perPage: 20,
+    total: 0,
+  },
+  filterOptions: {
+    filter: '',
+    sortField: INITIAL_SORT_FIELD,
+    sortOrder: 'desc',
+    tags: [],
+    showCustomRules: false,
+    showElasticRules: false,
+  },
+  loadingRulesAction: null,
+  loadingRuleIds: [],
+  selectedRuleIds: [],
+  exportRuleIds: [],
+  lastUpdated: 0,
+  isRefreshOn: true,
+  showIdleModal: false,
+};
+
+export interface UseRulesTableParams {
+  tableRef: React.MutableRefObject<EuiBasicTable<unknown> | undefined>;
+  initialStateOverride?: Partial<RulesTableState>;
+}
+
+export interface UseRulesTableReturn extends RulesTableFacade {
+  state: RulesTableState;
+  dispatch: Dispatch<RulesTableAction>;
+  reFetchRules: () => Promise<void>;
+}
+
+export const useRulesTable = (params: UseRulesTableParams): UseRulesTableReturn => {
+  const { tableRef, initialStateOverride } = params;
+
+  const initialState: RulesTableState = {
+    ...initialStateDefaults,
+    lastUpdated: Date.now(),
+    ...initialStateOverride,
+  };
+
+  const reducer = useMemo(() => createRulesTableReducer(tableRef), [tableRef]);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const facade = useRef(createRulesTableFacade(dispatch));
+
+  const reFetchRules = useRef<() => Promise<void>>(() => Promise.resolve());
+  const [, dispatchToaster] = useStateToaster();
+
+  const { pagination, filterOptions } = state;
+  const filterTags = filterOptions.tags.sort().join();
+
+  useEffect(() => {
+    let isSubscribed = true;
+    const abortCtrl = new AbortController();
+
+    const fetchData = async () => {
+      try {
+        facade.current.actionStarted('load', []);
+
+        const fetchRulesResult = await fetchRules({
+          filterOptions,
+          pagination,
+          signal: abortCtrl.signal,
+        });
+
+        if (isSubscribed) {
+          facade.current.setRules(fetchRulesResult.data, {
+            page: fetchRulesResult.page,
+            perPage: fetchRulesResult.perPage,
+            total: fetchRulesResult.total,
+          });
+        }
+      } catch (error) {
+        if (isSubscribed) {
+          errorToToaster({ title: i18n.RULE_AND_TIMELINE_FETCH_FAILURE, error, dispatchToaster });
+          facade.current.setRules([], {});
+        }
+      }
+      if (isSubscribed) {
+        facade.current.actionStopped();
+      }
+    };
+
+    fetchData();
+    reFetchRules.current = () => fetchData();
+
+    return () => {
+      isSubscribed = false;
+      abortCtrl.abort();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    pagination.page,
+    pagination.perPage,
+    filterOptions.filter,
+    filterOptions.sortField,
+    filterOptions.sortOrder,
+    filterTags,
+    filterOptions.showCustomRules,
+    filterOptions.showElasticRules,
+  ]);
+
+  return {
+    state,
+    dispatch,
+    ...facade.current,
+    reFetchRules: reFetchRules.current,
+  };
+};

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/actions.tsx

@@ -13,6 +13,7 @@ import {
   duplicateRules,
   enableRules,
   Rule,
+  RulesTableAction,
 } from '../../../../containers/detection_engine/rules';
 
 import { getEditRuleUrl } from '../../../../../common/components/link_to/redirect_to_detection_engine';
@@ -27,7 +28,6 @@ import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../../../common/lib/t
 
 import * as i18n from '../translations';
 import { bucketRulesResponse } from './helpers';
-import { Action } from './reducer';
 
 export const editRuleAction = (rule: Rule, history: H.History) => {
   history.push(getEditRuleUrl(rule.id));
@@ -36,7 +36,7 @@ export const editRuleAction = (rule: Rule, history: H.History) => {
 export const duplicateRulesAction = async (
   rules: Rule[],
   ruleIds: string[],
-  dispatch: React.Dispatch<Action>,
+  dispatch: React.Dispatch<RulesTableAction>,
   dispatchToaster: Dispatch<ActionToaster>
 ) => {
   try {
@@ -59,13 +59,16 @@ export const duplicateRulesAction = async (
   }
 };
 
-export const exportRulesAction = (exportRuleId: string[], dispatch: React.Dispatch<Action>) => {
+export const exportRulesAction = (
+  exportRuleId: string[],
+  dispatch: React.Dispatch<RulesTableAction>
+) => {
   dispatch({ type: 'exportRuleIds', ids: exportRuleId });
 };
 
 export const deleteRulesAction = async (
   ruleIds: string[],
-  dispatch: React.Dispatch<Action>,
+  dispatch: React.Dispatch<RulesTableAction>,
   dispatchToaster: Dispatch<ActionToaster>,
   onRuleDeleted?: () => void
 ) => {
@@ -96,7 +99,7 @@ export const deleteRulesAction = async (
 export const enableRulesAction = async (
   ids: string[],
   enabled: boolean,
-  dispatch: React.Dispatch<Action>,
+  dispatch: React.Dispatch<RulesTableAction>,
   dispatchToaster: Dispatch<ActionToaster>
 ) => {
   const errorTitle = enabled

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/batch_actions.tsx

@@ -8,7 +8,7 @@
 import { EuiContextMenuItem, EuiToolTip } from '@elastic/eui';
 import React, { Dispatch } from 'react';
 import * as i18n from '../translations';
-import { Action } from './reducer';
+import { RulesTableAction } from '../../../../containers/detection_engine/rules/rules_table';
 import {
   deleteRulesAction,
   duplicateRulesAction,
@@ -23,7 +23,7 @@ import { canEditRuleWithActions } from '../../../../../common/utils/privileges';
 
 interface GetBatchItems {
   closePopover: () => void;
-  dispatch: Dispatch<Action>;
+  dispatch: Dispatch<RulesTableAction>;
   dispatchToaster: Dispatch<ActionToaster>;
   hasMlPermissions: boolean;
   hasActionsPrivileges: boolean;

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx

@@ -34,14 +34,14 @@ import {
   editRuleAction,
   exportRulesAction,
 } from './actions';
-import { Action } from './reducer';
+import { RulesTableAction } from '../../../../containers/detection_engine/rules/rules_table';
 import { LocalizedDateTooltip } from '../../../../../common/components/localized_date_tooltip';
 import { LinkAnchor } from '../../../../../common/components/links';
 import { getToolTipContent, canEditRuleWithActions } from '../../../../../common/utils/privileges';
 import { TagsDisplay } from './tag_display';
 
 export const getActions = (
-  dispatch: React.Dispatch<Action>,
+  dispatch: React.Dispatch<RulesTableAction>,
   dispatchToaster: Dispatch<ActionToaster>,
   history: H.History,
   reFetchRules: () => Promise<void>,
@@ -112,7 +112,7 @@ export type RulesColumns = EuiBasicTableColumn<Rule> | EuiTableActionsColumnType
 export type RulesStatusesColumns = EuiBasicTableColumn<RuleStatusRowItemType>;
 type FormatUrl = (path: string) => string;
 interface GetColumns {
-  dispatch: React.Dispatch<Action>;
+  dispatch: React.Dispatch<RulesTableAction>;
   dispatchToaster: Dispatch<ActionToaster>;
   formatUrl: FormatUrl;
   history: H.History;

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx

@@ -13,7 +13,7 @@ import '../../../../../common/mock/match_media';
 import '../../../../../common/mock/formatted_relative';
 import { AllRules } from './index';
 import { useKibana, useUiSetting$ } from '../../../../../common/lib/kibana';
-import { useRules, useRulesStatuses } from '../../../../containers/detection_engine/rules';
+import { useRulesTable, useRulesStatuses } from '../../../../containers/detection_engine/rules';
 import { TestProviders } from '../../../../../common/mock';
 import { createUseUiSetting$Mock } from '../../../../../common/lib/kibana/kibana_react.mock';
 import {
@@ -40,6 +40,7 @@ jest.mock('../../../../containers/detection_engine/rules');
 
 const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
+const mockUseRulesTable = useRulesTable as jest.Mock;
 
 describe('AllRules', () => {
   const mockRefetchRulesData = jest.fn();
@@ -62,13 +63,9 @@ describe('AllRules', () => {
         : useUiSetting$Mock(key, defaultValue);
     });
 
-    (useRules as jest.Mock).mockReturnValue([
-      false,
-      {
-        page: 1,
-        perPage: 20,
-        total: 1,
-        data: [
+    mockUseRulesTable.mockImplementation(({ initialStateOverride }) => {
+      const initialState = {
+        rules: [
           {
             actions: [],
             created_at: '2020-02-14T19:49:28.178Z',
@@ -101,9 +98,42 @@ describe('AllRules', () => {
             version: 1,
           },
         ],
-      },
-      mockRefetchRulesData,
-    ]);
+        pagination: {
+          page: 1,
+          perPage: 20,
+          total: 1,
+        },
+        filterOptions: {
+          filter: '',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          tags: [],
+          showCustomRules: false,
+          showElasticRules: false,
+        },
+        loadingRulesAction: null,
+        loadingRuleIds: [],
+        selectedRuleIds: [],
+        exportRuleIds: [],
+        lastUpdated: 0,
+        isRefreshOn: true,
+        showIdleModal: false,
+      };
+
+      return {
+        state: { ...initialState, ...initialStateOverride },
+        dispatch: jest.fn(),
+        reFetchRules: mockRefetchRulesData,
+        setRules: jest.fn(),
+        updateRules: jest.fn(),
+        updateOptions: jest.fn(),
+        actionStarted: jest.fn(),
+        actionStopped: jest.fn(),
+        setShowIdleModal: jest.fn(),
+        setLastRefreshDate: jest.fn(),
+        setAutoRefreshOn: jest.fn(),
+      };
+    });
 
     (useRulesStatuses as jest.Mock).mockReturnValue({
       loading: false,

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_tables.tsx

@@ -12,21 +12,21 @@ import {
   EuiConfirmModal,
   EuiWindowEvent,
 } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import uuid from 'uuid';
 import { debounce } from 'lodash/fp';
 import { History } from 'history';
 
 import {
-  useRules,
+  useRulesTable,
   useRulesStatuses,
   CreatePreBuiltRules,
   FilterOptions,
   Rule,
-  PaginationOptions,
   exportRules,
   RulesSortingFields,
 } from '../../../../containers/detection_engine/rules';
+
 import { FormatUrl } from '../../../../../common/components/link_to';
 import { HeaderSection } from '../../../../../common/components/header_section';
 import { useKibana, useUiSetting$ } from '../../../../../common/lib/kibana';
@@ -42,7 +42,6 @@ import { EuiBasicTableOnChange } from '../types';
 import { getBatchItems } from './batch_actions';
 import { getColumns, getMonitoringColumns } from './columns';
 import { showRulesTable } from './helpers';
-import { allRulesReducer, State } from './reducer';
 import { RulesTableFilters } from './rules_table_filters/rules_table_filters';
 import { useMlCapabilities } from '../../../../../common/components/ml/hooks/use_ml_capabilities';
 import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
@@ -54,29 +53,6 @@ import { DEFAULT_RULES_TABLE_REFRESH_SETTING } from '../../../../../../common/co
 import { AllRulesTabs } from '.';
 
 const INITIAL_SORT_FIELD = 'enabled';
-const initialState: State = {
-  exportRuleIds: [],
-  filterOptions: {
-    filter: '',
-    sortField: INITIAL_SORT_FIELD,
-    sortOrder: 'desc',
-    tags: [],
-    showCustomRules: false,
-    showElasticRules: false,
-  },
-  loadingRuleIds: [],
-  loadingRulesAction: null,
-  pagination: {
-    page: 1,
-    perPage: 20,
-    total: 0,
-  },
-  rules: [],
-  selectedRuleIds: [],
-  lastUpdated: 0,
-  showIdleModal: false,
-  isRefreshOn: true,
-};
 
 interface RulesTableProps {
   history: History;
@@ -119,79 +95,62 @@ export const RulesTables = React.memo<RulesTableProps>(
     selectedTab,
   }) => {
     const [initLoading, setInitLoading] = useState(true);
-    const tableRef = useRef<EuiBasicTable>();
+
     const {
       services: {
         application: {
           capabilities: { actions },
         },
       },
     } = useKibana();
+
+    const tableRef = useRef<EuiBasicTable>();
+
     const [defaultAutoRefreshSetting] = useUiSetting$<{
       on: boolean;
       value: number;
       idleTimeout: number;
     }>(DEFAULT_RULES_TABLE_REFRESH_SETTING);
-    const [
-      {
-        exportRuleIds,
-        filterOptions,
-        loadingRuleIds,
-        loadingRulesAction,
-        pagination,
-        rules,
-        selectedRuleIds,
-        lastUpdated,
-        showIdleModal,
-        isRefreshOn,
+
+    const rulesTable = useRulesTable({
+      tableRef,
+      initialStateOverride: {
+        isRefreshOn: defaultAutoRefreshSetting.on,
       },
-      dispatch,
-    ] = useReducer(allRulesReducer(tableRef), {
-      ...initialState,
-      lastUpdated: Date.now(),
-      isRefreshOn: defaultAutoRefreshSetting.on,
     });
+
+    const {
+      exportRuleIds,
+      filterOptions,
+      loadingRuleIds,
+      loadingRulesAction,
+      pagination,
+      rules,
+      selectedRuleIds,
+      lastUpdated,
+      showIdleModal,
+      isRefreshOn,
+    } = rulesTable.state;
+
+    const {
+      dispatch,
+      updateOptions,
+      actionStopped,
+      setShowIdleModal,
+      setLastRefreshDate,
+      setAutoRefreshOn,
+      reFetchRules,
+    } = rulesTable;
+
+    const isLoadingRules = loadingRulesAction === 'load';
+
     const { loading: isLoadingRulesStatuses, rulesStatuses } = useRulesStatuses(rules);
     const [, dispatchToaster] = useStateToaster();
     const mlCapabilities = useMlCapabilities();
 
     // TODO: Refactor license check + hasMlAdminPermissions to common check
     const hasMlPermissions = hasMlLicense(mlCapabilities) && hasMlAdminPermissions(mlCapabilities);
 
-    const setRules = useCallback((newRules: Rule[], newPagination: Partial<PaginationOptions>) => {
-      dispatch({
-        type: 'setRules',
-        rules: newRules,
-        pagination: newPagination,
-      });
-    }, []);
-
-    const setShowIdleModal = useCallback((show: boolean) => {
-      dispatch({
-        type: 'setShowIdleModal',
-        show,
-      });
-    }, []);
-
-    const setLastRefreshDate = useCallback(() => {
-      dispatch({
-        type: 'setLastRefreshDate',
-      });
-    }, []);
-
-    const setAutoRefreshOn = useCallback((on: boolean) => {
-      dispatch({
-        type: 'setAutoRefreshOn',
-        on,
-      });
-    }, []);
-
-    const [isLoadingRules, , reFetchRules] = useRules({
-      pagination,
-      filterOptions,
-      dispatchRulesInReducer: setRules,
-    });
-
     const sorting = useMemo(
       (): SortingType => ({
         sort: {
@@ -250,18 +209,24 @@ export const RulesTables = React.memo<RulesTableProps>(
       [pagination]
     );
 
+    const onFilterChangedCallback = useCallback(
+      (newFilter: Partial<FilterOptions>) => {
+        updateOptions(newFilter, { page: 1 });
+      },
+      [updateOptions]
+    );
+
     const tableOnChangeCallback = useCallback(
       ({ page, sort }: EuiBasicTableOnChange) => {
-        dispatch({
-          type: 'updateFilterOptions',
-          filterOptions: {
+        updateOptions(
+          {
             sortField: (sort?.field as RulesSortingFields) ?? INITIAL_SORT_FIELD, // Narrowing EuiBasicTable sorting types
             sortOrder: sort?.direction ?? 'desc',
           },
-          pagination: { page: page.index + 1, perPage: page.size },
-        });
+          { page: page.index + 1, perPage: page.size }
+        );
       },
-      [dispatch]
+      [updateOptions]
     );
 
     const rulesColumns = useMemo(() => {
@@ -324,19 +289,9 @@ export const RulesTables = React.memo<RulesTableProps>(
         onSelectionChange: (selected: Rule[]) =>
           dispatch({ type: 'selectedRuleIds', ids: selected.map((r) => r.id) }),
       }),
-      [loadingRuleIds]
+      [loadingRuleIds, dispatch]
     );
 
-    const onFilterChangedCallback = useCallback((newFilterOptions: Partial<FilterOptions>) => {
-      dispatch({
-        type: 'updateFilterOptions',
-        filterOptions: {
-          ...newFilterOptions,
-        },
-        pagination: { page: 1 },
-      });
-    }, []);
-
     const isLoadingAnActionOnRule = useMemo(() => {
       if (
         loadingRuleIds.length > 0 &&
@@ -412,7 +367,7 @@ export const RulesTables = React.memo<RulesTableProps>(
 
     const handleGenericDownloaderSuccess = useCallback(
       (exportCount) => {
-        dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+        actionStopped();
         dispatchToaster({
           type: 'addToaster',
           toast: {
@@ -423,7 +378,7 @@ export const RulesTables = React.memo<RulesTableProps>(
           },
         });
       },
-      [dispatchToaster]
+      [actionStopped, dispatchToaster]
     );
 
     return (