simplify context implementation

elastic · Sep 2, 2024 · 3425c13 · 3425c13
1 parent cce016e
commit 3425c13
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 223 deletions.
diff --git a/...on/public/detection_engine/rule_management/components/rule_details/three_way_diff_tab.tsx b/...on/public/detection_engine/rule_management/components/rule_details/three_way_diff_tab.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import type { DiffableRule } from '../../../../../common/api/detection_engine';
-import type { SetFieldResolvedValueFn } from '../../../rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/use_rules_upgrade_state';
+import type { SetFieldResolvedValueFn } from '../../../rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/use_prebuilt_rules_upgrade_state';
 
 interface ThreeWayDiffTabProps {
   finalDiffableRule: DiffableRule;

diff --git a/..._ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx b/..._ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx
@@ -13,13 +13,18 @@ import * as i18n from './translations';
 
 export const AddPrebuiltRulesHeaderButtons = () => {
   const {
-    state: { rules, selectedRules, loadingRules, isRefetching, isUpgradingSecurityPackages },
+    state: {
+      selectedRules,
+      loadingRules,
+      isRefetching,
+      isUpgradingSecurityPackages,
+      hasRulesToInstall,
+    },
     actions: { installAllRules, installSelectedRules },
   } = useAddPrebuiltRulesTableContext();
   const [{ loading: isUserDataLoading, canUserCRUD }] = useUserData();
   const canUserEditRules = canUserCRUD && !isUserDataLoading;
 
-  const isRulesAvailableForInstall = rules.length > 0;
   const numberOfSelectedRules = selectedRules.length ?? 0;
   const shouldDisplayInstallSelectedRulesButton = numberOfSelectedRules > 0;
 
@@ -46,7 +51,7 @@ export const AddPrebuiltRulesHeaderButtons = () => {
           iconType="plusInCircle"
           data-test-subj="installAllRulesButton"
           onClick={installAllRules}
-          disabled={!canUserEditRules || !isRulesAvailableForInstall || isRequestInProgress}
+          disabled={!canUserEditRules || !hasRulesToInstall || isRequestInProgress}
           aria-label={i18n.INSTALL_ALL_ARIA_LABEL}
         >
           {i18n.INSTALL_ALL}

diff --git a/...anagement_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table.tsx b/...anagement_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table.tsx
@@ -32,8 +32,7 @@ export const AddPrebuiltRulesTable = React.memo(() => {
   const {
     state: {
       rules,
-      filteredRules,
-      isFetched,
+      hasRulesToInstall,
       isLoading,
       isRefetching,
       selectedRules,
@@ -43,8 +42,6 @@ export const AddPrebuiltRulesTable = React.memo(() => {
   } = addRulesTableContext;
   const rulesColumns = useAddPrebuiltRulesTableColumns();
 
-  const isTableEmpty = isFetched && rules.length === 0;
-
   const shouldShowProgress = isUpgradingSecurityPackages || isRefetching;
 
   return (
@@ -66,7 +63,7 @@ export const AddPrebuiltRulesTable = React.memo(() => {
           </>
         }
         loadedContent={
-          isTableEmpty ? (
+          !hasRulesToInstall ? (
             <AddPrebuiltRulesTableNoItemsMessage />
           ) : (
             <>
@@ -80,7 +77,7 @@ export const AddPrebuiltRulesTable = React.memo(() => {
               </EuiFlexGroup>
 
               <EuiInMemoryTable
-                items={filteredRules}
+                items={rules}
                 sorting
                 pagination={{
                   initialPageSize: RULES_TABLE_INITIAL_PAGE_SIZE,

diff --git a/...t_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx b/...t_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx
@@ -27,13 +27,9 @@ import { isUpgradeReviewRequestEnabled } from './add_prebuilt_rules_utils';
 
 export interface AddPrebuiltRulesTableState {
   /**
-   * Rules available to be installed
+   * Rules available to be installed after applying `filterOptions`
    */
   rules: RuleResponse[];
-  /**
-   * Rules to display in table after applying filters
-   */
-  filteredRules: RuleResponse[];
   /**
    * Currently selected table filter
    */
@@ -42,6 +38,10 @@ export interface AddPrebuiltRulesTableState {
    * All unique tags for all rules
    */
   tags: string[];
+  /**
+   * Indicates whether there are rules (without filters applied) available to install.
+   */
+  hasRulesToInstall: boolean;
   /**
    * Is true then there is no cached data and the query is currently fetching.
    */
@@ -229,10 +229,10 @@ export const AddPrebuiltRulesTableContextProvider = ({
   const providerValue = useMemo<AddPrebuiltRulesContextType>(() => {
     return {
       state: {
-        rules,
-        filteredRules,
+        rules: filteredRules,
         filterOptions,
         tags,
+        hasRulesToInstall: isFetched && rules.length > 0,
         isFetched,
         isLoading,
         loadingRules,

diff --git a/...t_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table.tsx b/...t_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table.tsx
@@ -15,14 +15,15 @@ import {
   EuiSkeletonText,
   EuiSkeletonTitle,
 } from '@elastic/eui';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import * as i18n from '../../../../../detections/pages/detection_engine/rules/translations';
 import { RULES_TABLE_INITIAL_PAGE_SIZE, RULES_TABLE_PAGE_SIZE_OPTIONS } from '../constants';
 import { RulesChangelogLink } from '../rules_changelog_link';
 import { UpgradePrebuiltRulesTableButtons } from './upgrade_prebuilt_rules_table_buttons';
 import { useUpgradePrebuiltRulesTableContext } from './upgrade_prebuilt_rules_table_context';
 import { UpgradePrebuiltRulesTableFilters } from './upgrade_prebuilt_rules_table_filters';
 import { useUpgradePrebuiltRulesTableColumns } from './use_upgrade_prebuilt_rules_table_columns';
+import type { RuleUpgradeState } from './use_prebuilt_rules_upgrade_state';
 
 const NO_ITEMS_MESSAGE = (
   <EuiEmptyPrompt
@@ -38,23 +39,22 @@ const NO_ITEMS_MESSAGE = (
  */
 export const UpgradePrebuiltRulesTable = React.memo(() => {
   const upgradeRulesTableContext = useUpgradePrebuiltRulesTableContext();
+  const [selected, setSelected] = useState<RuleUpgradeState[]>([]);
 
   const {
     state: {
-      rules,
-      filteredRules,
-      isFetched,
+      rulesUpgradeState,
+      hasRulesToUpgrade,
       isLoading,
-      selectedRules,
       isRefetching,
       isUpgradingSecurityPackages,
     },
-    actions: { selectRules },
   } = upgradeRulesTableContext;
+  const ruleUpgradeStatesArray = useMemo(
+    () => Object.values(rulesUpgradeState),
+    [rulesUpgradeState]
+  );
   const rulesColumns = useUpgradePrebuiltRulesTableColumns();
-
-  const isTableEmpty = isFetched && rules.length === 0;
-
   const shouldShowProgress = isUpgradingSecurityPackages || isRefetching;
 
   return (
@@ -76,7 +76,7 @@ export const UpgradePrebuiltRulesTable = React.memo(() => {
           </>
         }
         loadedContent={
-          isTableEmpty ? (
+          !hasRulesToUpgrade ? (
             NO_ITEMS_MESSAGE
           ) : (
             <>
@@ -95,23 +95,23 @@ export const UpgradePrebuiltRulesTable = React.memo(() => {
                       <UpgradePrebuiltRulesTableFilters />
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <UpgradePrebuiltRulesTableButtons />
+                      <UpgradePrebuiltRulesTableButtons selectedRules={selected} />
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>
               </EuiFlexGroup>
 
               <EuiInMemoryTable
-                items={filteredRules}
+                items={ruleUpgradeStatesArray}
                 sorting
                 pagination={{
                   initialPageSize: RULES_TABLE_INITIAL_PAGE_SIZE,
                   pageSizeOptions: RULES_TABLE_PAGE_SIZE_OPTIONS,
                 }}
                 selection={{
                   selectable: () => true,
-                  onSelectionChange: selectRules,
-                  initialSelected: selectedRules,
+                  onSelectionChange: setSelected,
+                  initialSelected: selected,
                 }}
                 itemId="rule_id"
                 data-test-subj="rules-upgrades-table"

diff --git a/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_buttons.tsx b/...ponents/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_buttons.tsx
@@ -6,25 +6,35 @@
  */
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useUserData } from '../../../../../detections/components/user_info';
 import * as i18n from './translations';
 import { useUpgradePrebuiltRulesTableContext } from './upgrade_prebuilt_rules_table_context';
+import type { RuleUpgradeState } from './use_prebuilt_rules_upgrade_state';
 
-export const UpgradePrebuiltRulesTableButtons = () => {
+interface UpgradePrebuiltRulesTableButtonsProps {
+  selectedRules: RuleUpgradeState[];
+}
+
+export const UpgradePrebuiltRulesTableButtons = ({
+  selectedRules,
+}: UpgradePrebuiltRulesTableButtonsProps) => {
   const {
-    state: { rules, selectedRules, loadingRules, isRefetching, isUpgradingSecurityPackages },
-    actions: { upgradeAllRules, upgradeSelectedRules },
+    state: { hasRulesToUpgrade, loadingRules, isRefetching, isUpgradingSecurityPackages },
+    actions: { upgradeAllRules, upgradeRules },
   } = useUpgradePrebuiltRulesTableContext();
   const [{ loading: isUserDataLoading, canUserCRUD }] = useUserData();
   const canUserEditRules = canUserCRUD && !isUserDataLoading;
 
-  const isRulesAvailableForUpgrade = rules.length > 0;
   const numberOfSelectedRules = selectedRules.length ?? 0;
   const shouldDisplayUpgradeSelectedRulesButton = numberOfSelectedRules > 0;
 
   const isRuleUpgrading = loadingRules.length > 0;
   const isRequestInProgress = isRuleUpgrading || isRefetching || isUpgradingSecurityPackages;
+  const upgradeSelectedRules = useCallback(
+    () => upgradeRules(selectedRules.map((rule) => rule.rule_id)),
+    [selectedRules, upgradeRules]
+  );
 
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
@@ -47,7 +57,7 @@ export const UpgradePrebuiltRulesTableButtons = () => {
           fill
           iconType="plusInCircle"
           onClick={upgradeAllRules}
-          disabled={!canUserEditRules || !isRulesAvailableForUpgrade || isRequestInProgress}
+          disabled={!canUserEditRules || !hasRulesToUpgrade || isRequestInProgress}
           data-test-subj="upgradeAllRulesButton"
         >
           {i18n.UPDATE_ALL}