[Security Solution] Implement refactoring remark from PR #201731 (#204022)

## Summary

In the PR #201731 for ticket #180660 @banderror advised to refactor code
in that PR to better separate the concerns (business logic from
components). This is the implementation of that review
[remark](https://github.com/elastic/kibana/pull/201731/files#r1860492191).

Recording:


https://github.com/user-attachments/assets/471a0986-bcdb-4611-ab1a-bdcbe5151f47

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

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 && <EuiLoadingSpinner size="s" />}
+              {isAnyRuleInstalling && <EuiLoadingSpinner size="s" />}
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -116,7 +114,7 @@ export const AddPrebuiltRulesHeaderButtons = () => {
           aria-label={i18n.INSTALL_ALL_ARIA_LABEL}
         >
           {i18n.INSTALL_ALL}
-          {isRuleInstalling && <EuiLoadingSpinner size="s" />}
+          {isAnyRuleInstalling && <EuiLoadingSpinner size="s" />}
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>

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);

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,

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: <RulesTableEmptyColumnName name={i18n.INSTALL_RULE_BUTTON} />,
@@ -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]
   );
 };