diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx index 58a8f7b779a15..bbffd25b4f8f8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx @@ -25,10 +25,9 @@ export const AddPrebuiltRulesHeaderButtons = () => { const { state: { selectedRules, - loadingRules, isRefetching, isUpgradingSecurityPackages, - isInstallingAllRules, + isAnyRuleInstalling, hasRulesToInstall, }, actions: { installAllRules, installSelectedRules }, @@ -39,8 +38,7 @@ export const AddPrebuiltRulesHeaderButtons = () => { const numberOfSelectedRules = selectedRules.length ?? 0; const shouldDisplayInstallSelectedRulesButton = numberOfSelectedRules > 0; - const isRuleInstalling = loadingRules.length > 0 || isInstallingAllRules; - const isRequestInProgress = isRuleInstalling || isRefetching || isUpgradingSecurityPackages; + const isRequestInProgress = isAnyRuleInstalling || isRefetching || isUpgradingSecurityPackages; const [isOverflowPopoverOpen, setOverflowPopover] = useBoolean(false); @@ -81,7 +79,7 @@ export const AddPrebuiltRulesHeaderButtons = () => { data-test-subj="installSelectedRulesButton" > {i18n.INSTALL_SELECTED_RULES(numberOfSelectedRules)} - {isRuleInstalling && } + {isAnyRuleInstalling && } @@ -116,7 +114,7 @@ export const AddPrebuiltRulesHeaderButtons = () => { aria-label={i18n.INSTALL_ALL_ARIA_LABEL} > {i18n.INSTALL_ALL} - {isRuleInstalling && } + {isAnyRuleInstalling && } diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_install_button.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_install_button.tsx index 4d239458e6a57..bbed7dcd2961f 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_install_button.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_install_button.tsx @@ -19,7 +19,10 @@ import React, { useCallback, useMemo } from 'react'; import useBoolean from 'react-use/lib/useBoolean'; import type { Rule } from '../../../../rule_management/logic'; import type { RuleSignatureId } from '../../../../../../common/api/detection_engine'; -import { type AddPrebuiltRulesTableActions } from './add_prebuilt_rules_table_context'; +import { + useAddPrebuiltRulesTableContext, + type AddPrebuiltRulesTableActions, +} from './add_prebuilt_rules_table_context'; import * as i18n from './translations'; export interface PrebuiltRulesInstallButtonProps { @@ -28,7 +31,6 @@ export interface PrebuiltRulesInstallButtonProps { installOneRule: AddPrebuiltRulesTableActions['installOneRule']; loadingRules: RuleSignatureId[]; isDisabled: boolean; - isInstallingAllRules: boolean; } export const PrebuiltRulesInstallButton = ({ @@ -37,8 +39,10 @@ export const PrebuiltRulesInstallButton = ({ installOneRule, loadingRules, isDisabled, - isInstallingAllRules, }: PrebuiltRulesInstallButtonProps) => { + const { + state: { isInstallingAllRules }, + } = useAddPrebuiltRulesTableContext(); const isRuleInstalling = loadingRules.includes(ruleId) || isInstallingAllRules; const isInstallButtonDisabled = isRuleInstalling || isDisabled; const [isPopoverOpen, setPopover] = useBoolean(false); diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx index dca4809001971..cf5ba8aa5967b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_table_context.tsx @@ -61,11 +61,14 @@ export interface AddPrebuiltRulesTableState { * package in background */ isUpgradingSecurityPackages: boolean; - /** * Is true when performing Install All Rules mutation */ isInstallingAllRules: boolean; + /** + * Is true when any rule is currently being installed + */ + isAnyRuleInstalling: boolean; /** * List of rule IDs that are currently being upgraded */ @@ -145,6 +148,8 @@ export const AddPrebuiltRulesTableContextProvider = ({ }), }); + const isAnyRuleInstalling = loadingRules.length > 0 || isInstallingAllRules; + const { mutateAsync: installAllRulesRequest } = usePerformInstallAllRules(); const { mutateAsync: installSpecificRulesRequest } = usePerformInstallSpecificRules(); @@ -281,6 +286,7 @@ export const AddPrebuiltRulesTableContextProvider = ({ isRefetching, isUpgradingSecurityPackages, isInstallingAllRules, + isAnyRuleInstalling, selectedRules, lastUpdated: dataUpdatedAt, }, @@ -297,6 +303,7 @@ export const AddPrebuiltRulesTableContextProvider = ({ isRefetching, isUpgradingSecurityPackages, isInstallingAllRules, + isAnyRuleInstalling, selectedRules, dataUpdatedAt, actions, diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/use_add_prebuilt_rules_table_columns.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/use_add_prebuilt_rules_table_columns.tsx index 4e15de4011fab..8501f595839c7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/use_add_prebuilt_rules_table_columns.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/use_add_prebuilt_rules_table_columns.tsx @@ -110,8 +110,7 @@ const INTEGRATIONS_COLUMN: TableColumn = { const createInstallButtonColumn = ( installOneRule: AddPrebuiltRulesTableActions['installOneRule'], loadingRules: RuleSignatureId[], - isDisabled: boolean, - isInstallingAllRules: boolean + isDisabled: boolean ): TableColumn => ({ field: 'rule_id', name: , @@ -122,7 +121,6 @@ const createInstallButtonColumn = ( installOneRule={installOneRule} loadingRules={loadingRules} isDisabled={isDisabled} - isInstallingAllRules={isInstallingAllRules} /> ), width: '10%', @@ -166,23 +164,9 @@ export const useAddPrebuiltRulesTableColumns = (): TableColumn[] => { width: '12%', }, ...(hasCRUDPermissions - ? [ - createInstallButtonColumn( - installOneRule, - loadingRules, - isDisabled, - isInstallingAllRules - ), - ] + ? [createInstallButtonColumn(installOneRule, loadingRules, isDisabled)] : []), ], - [ - hasCRUDPermissions, - installOneRule, - loadingRules, - isDisabled, - showRelatedIntegrations, - isInstallingAllRules, - ] + [hasCRUDPermissions, installOneRule, loadingRules, isDisabled, showRelatedIntegrations] ); };