[8.x] [Security Solution] Adds enable on install UI workflow to prebuilt rules page (#191529)

x-pack/plugins/security_solution/public/detection_engine/rule_management/api/hooks/prebuilt_rules/use_perform_specific_rules_install_mutation.ts

@@ -16,20 +16,27 @@ import { useInvalidateFindRulesQuery } from '../use_find_rules_query';
 import { useInvalidateFetchRuleManagementFiltersQuery } from '../use_fetch_rule_management_filters_query';
 import { useInvalidateFetchRulesSnoozeSettingsQuery } from '../use_fetch_rules_snooze_settings_query';
 import { useInvalidateFetchPrebuiltRulesInstallReviewQuery } from './use_fetch_prebuilt_rules_install_review_query';
+import type { BulkAction } from '../../api';
 import { performInstallSpecificRules } from '../../api';
 import { useInvalidateFetchCoverageOverviewQuery } from '../use_fetch_coverage_overview_query';
+import { useBulkActionMutation } from '../use_bulk_action_mutation';
 
 export const PERFORM_SPECIFIC_RULES_INSTALLATION_KEY = [
   'POST',
   'SPECIFIC_RULES',
   PERFORM_RULE_INSTALLATION_URL,
 ];
 
+export interface UsePerformSpecificRulesInstallParams {
+  rules: InstallSpecificRulesRequest['rules'];
+  enable?: boolean;
+}
+
 export const usePerformSpecificRulesInstallMutation = (
   options?: UseMutationOptions<
     PerformRuleInstallationResponseBody,
     Error,
-    InstallSpecificRulesRequest['rules']
+    UsePerformSpecificRulesInstallParams
   >
 ) => {
   const invalidateFindRulesQuery = useInvalidateFindRulesQuery();
@@ -40,15 +47,15 @@ export const usePerformSpecificRulesInstallMutation = (
     useInvalidateFetchPrebuiltRulesInstallReviewQuery();
   const invalidateRuleStatus = useInvalidateFetchPrebuiltRulesStatusQuery();
   const invalidateFetchCoverageOverviewQuery = useInvalidateFetchCoverageOverviewQuery();
+  const { mutateAsync } = useBulkActionMutation();
 
   return useMutation<
     PerformRuleInstallationResponseBody,
     Error,
-    InstallSpecificRulesRequest['rules']
+    UsePerformSpecificRulesInstallParams
   >(
-    (rulesToInstall: InstallSpecificRulesRequest['rules']) => {
-      return performInstallSpecificRules(rulesToInstall);
-    },
+    (rulesToInstall: UsePerformSpecificRulesInstallParams) =>
+      performInstallSpecificRules(rulesToInstall.rules),
     {
       ...options,
       mutationKey: PERFORM_SPECIFIC_RULES_INSTALLATION_KEY,
@@ -62,6 +69,14 @@ export const usePerformSpecificRulesInstallMutation = (
         invalidateRuleStatus();
         invalidateFetchCoverageOverviewQuery();
 
+        const [response, , { enable }] = args;
+
+        if (response && enable) {
+          const ruleIdsToEnable = response.results.created.map((rule) => rule.id);
+          const bulkAction: BulkAction = { type: 'enable', ids: ruleIdsToEnable };
+          mutateAsync({ bulkAction });
+        }
+
         if (options?.onSettled) {
           options.onSettled(...args);
         }

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_header_buttons.tsx

@@ -5,8 +5,18 @@
  * 2.0.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import React from 'react';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPopover,
+} from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+import { useBoolean } from 'react-use';
 import { useUserData } from '../../../../../detections/components/user_info';
 import { useAddPrebuiltRulesTableContext } from './add_prebuilt_rules_table_context';
 import * as i18n from './translations';
@@ -31,19 +41,69 @@ export const AddPrebuiltRulesHeaderButtons = () => {
   const isRuleInstalling = loadingRules.length > 0;
   const isRequestInProgress = isRuleInstalling || isRefetching || isUpgradingSecurityPackages;
 
+  const [isOverflowPopoverOpen, setOverflowPopover] = useBoolean(false);
+
+  const onOverflowButtonClick = () => {
+    setOverflowPopover(!isOverflowPopoverOpen);
+  };
+
+  const closeOverflowPopover = useCallback(() => {
+    setOverflowPopover(false);
+  }, [setOverflowPopover]);
+
+  const enableOnClick = useCallback(() => {
+    installSelectedRules(true);
+    closeOverflowPopover();
+  }, [closeOverflowPopover, installSelectedRules]);
+
+  const installOnClick = useCallback(() => {
+    installSelectedRules();
+  }, [installSelectedRules]);
+
+  const overflowItems = useMemo(
+    () => [
+      <EuiContextMenuItem key="copy" icon={'play'} onClick={enableOnClick}>
+        {i18n.INSTALL_AND_ENABLE_BUTTON_LABEL}
+      </EuiContextMenuItem>,
+    ],
+    [enableOnClick]
+  );
+
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
       {shouldDisplayInstallSelectedRulesButton ? (
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            onClick={installSelectedRules}
-            disabled={!canUserEditRules || isRequestInProgress}
-            data-test-subj="installSelectedRulesButton"
-          >
-            {i18n.INSTALL_SELECTED_RULES(numberOfSelectedRules)}
-            {isRuleInstalling ? <EuiLoadingSpinner size="s" /> : undefined}
-          </EuiButton>
-        </EuiFlexItem>
+        <>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              onClick={installOnClick}
+              disabled={!canUserEditRules || isRequestInProgress}
+              data-test-subj="installSelectedRulesButton"
+            >
+              {i18n.INSTALL_SELECTED_RULES(numberOfSelectedRules)}
+              {isRuleInstalling && <EuiLoadingSpinner size="s" />}
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiPopover
+              button={
+                <EuiButtonIcon
+                  display="base"
+                  size="m"
+                  iconType="boxesVertical"
+                  aria-label={i18n.INSTALL_RULES_OVERFLOW_BUTTON_ARIA_LABEL}
+                  onClick={onOverflowButtonClick}
+                  disabled={!canUserEditRules || isRequestInProgress}
+                />
+              }
+              isOpen={isOverflowPopoverOpen}
+              closePopover={closeOverflowPopover}
+              panelPaddingSize="s"
+              anchorPosition="downRight"
+            >
+              <EuiContextMenuPanel size="s" items={overflowItems} />
+            </EuiPopover>
+          </EuiFlexItem>
+        </>
       ) : null}
       <EuiFlexItem grow={false}>
         <EuiButton
@@ -55,7 +115,7 @@ export const AddPrebuiltRulesHeaderButtons = () => {
           aria-label={i18n.INSTALL_ALL_ARIA_LABEL}
         >
           {i18n.INSTALL_ALL}
-          {isRuleInstalling ? <EuiLoadingSpinner size="s" /> : undefined}
+          {isRuleInstalling && <EuiLoadingSpinner size="s" />}
         </EuiButton>
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/add_prebuilt_rules_table/add_prebuilt_rules_install_button.tsx

@@ -0,0 +1,118 @@
+/*
+ * 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 {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPopover,
+} from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+import { useBoolean } from 'react-use';
+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 * as i18n from './translations';
+
+export interface PrebuiltRulesInstallButtonProps {
+  ruleId: RuleSignatureId;
+  record: Rule;
+  installOneRule: AddPrebuiltRulesTableActions['installOneRule'];
+  loadingRules: RuleSignatureId[];
+  isDisabled: boolean;
+}
+
+export const PrebuiltRulesInstallButton = ({
+  ruleId,
+  record,
+  installOneRule,
+  loadingRules,
+  isDisabled,
+}: PrebuiltRulesInstallButtonProps) => {
+  const isRuleInstalling = loadingRules.includes(ruleId);
+  const isInstallButtonDisabled = isRuleInstalling || isDisabled;
+  const [isPopoverOpen, setPopover] = useBoolean(false);
+
+  const onOverflowButtonClick = useCallback(() => {
+    setPopover(!isPopoverOpen);
+  }, [isPopoverOpen, setPopover]);
+
+  const closeOverflowPopover = useCallback(() => {
+    setPopover(false);
+  }, [setPopover]);
+
+  const enableOnClick = useCallback(() => {
+    installOneRule(ruleId, true);
+    closeOverflowPopover();
+  }, [closeOverflowPopover, installOneRule, ruleId]);
+
+  const installOnClick = useCallback(() => {
+    installOneRule(ruleId);
+  }, [installOneRule, ruleId]);
+
+  const overflowItems = useMemo(
+    () => [
+      <EuiContextMenuItem key="copy" icon={'play'} onClick={enableOnClick}>
+        {i18n.INSTALL_AND_ENABLE_BUTTON_LABEL}
+      </EuiContextMenuItem>,
+    ],
+    [enableOnClick]
+  );
+
+  const popoverButton = useMemo(
+    () => (
+      <EuiButtonIcon
+        display="empty"
+        size="s"
+        iconType="boxesVertical"
+        aria-label={i18n.INSTALL_RULES_OVERFLOW_BUTTON_ARIA_LABEL}
+        onClick={onOverflowButtonClick}
+        disabled={isInstallButtonDisabled}
+      />
+    ),
+    [isInstallButtonDisabled, onOverflowButtonClick]
+  );
+
+  if (isRuleInstalling) {
+    return (
+      <EuiLoadingSpinner
+        size="s"
+        data-test-subj={`installSinglePrebuiltRuleButton-loadingSpinner-${ruleId}`}
+      />
+    );
+  }
+  return (
+    <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          size="s"
+          disabled={isInstallButtonDisabled}
+          onClick={installOnClick}
+          data-test-subj={`installSinglePrebuiltRuleButton-${ruleId}`}
+          aria-label={i18n.INSTALL_RULE_BUTTON_ARIA_LABEL(record.name)}
+        >
+          {i18n.INSTALL_BUTTON_LABEL}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiPopover
+          button={popoverButton}
+          isOpen={isPopoverOpen}
+          closePopover={closeOverflowPopover}
+          panelPaddingSize="s"
+          anchorPosition="downRight"
+        >
+          <EuiContextMenuPanel size="s" items={overflowItems} />
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};