[Security Solution] Fix auto task completion (177782) (elastic#182632)

## Summary

Addresses elastic#177782

Autostep for prebuilt rules on getstarted page is not showing up
correctly. It's either hidden on load or gets toggled and eventually
hidden after continuous expand and collapse of the autostep panel.

Precondition for testing:
Enable at least one prebuilt rule to to observe the behavior.

before:

https://github.com/elastic/kibana/assets/1625373/e9f825d6-1d06-403e-a8ac-7002bdd11471

after:

https://github.com/elastic/kibana/assets/1625373/97d432be-8dcd-4448-8ac3-267b1a6c48d8

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.test.ts

@@ -18,7 +18,7 @@ describe('autoCheckPrebuildRuleStepCompleted', () => {
   it('should return true if there are enabled rules', async () => {
     (fetchRuleManagementFilters as jest.Mock).mockResolvedValue({ total: 1 });
     const result = await autoCheckPrebuildRuleStepCompleted({
-      abortSignal: { current: mockAbortController },
+      abortSignal: mockAbortController,
       kibanaServicesHttp: mockHttp,
     });
     expect(result).toBe(true);
@@ -30,7 +30,7 @@ describe('autoCheckPrebuildRuleStepCompleted', () => {
     const mockOnError = jest.fn();
 
     const result = await autoCheckPrebuildRuleStepCompleted({
-      abortSignal: { current: mockAbortController },
+      abortSignal: mockAbortController,
       kibanaServicesHttp: mockHttp,
       onError: mockOnError,
     });
@@ -46,7 +46,7 @@ describe('autoCheckPrebuildRuleStepCompleted', () => {
     mockAbortController.abort();
 
     const result = await autoCheckPrebuildRuleStepCompleted({
-      abortSignal: { current: mockAbortController },
+      abortSignal: mockAbortController,
       kibanaServicesHttp: mockHttp,
       onError: mockOnError,
     });

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import type { MutableRefObject } from 'react';
 import type { HttpSetup } from '@kbn/core/public';
 import { fetchRuleManagementFilters } from '../apis';
 import { ENABLED_FIELD } from '../../../../../../common/detection_engine/rule_management/rule_fields';
@@ -15,15 +14,15 @@ export const autoCheckPrebuildRuleStepCompleted = async ({
   kibanaServicesHttp,
   onError,
 }: {
-  abortSignal: MutableRefObject<AbortController>;
+  abortSignal: AbortController;
   kibanaServicesHttp: HttpSetup;
   onError?: (e: Error) => void;
 }) => {
   // Check if there are any rules installed and enabled
   try {
     const data = await fetchRuleManagementFilters({
       http: kibanaServicesHttp,
-      signal: abortSignal.current.signal,
+      signal: abortSignal.signal,
       query: {
         page: 1,
         per_page: 20,
@@ -34,7 +33,7 @@ export const autoCheckPrebuildRuleStepCompleted = async ({
     });
     return data?.total > 0;
   } catch (e) {
-    if (!abortSignal.current.signal.aborted) {
+    if (!abortSignal.signal.aborted) {
       onError?.(e);
     }
 

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.test.tsx

@@ -17,6 +17,9 @@ import {
 jest.mock('../../../../lib/kibana');
 
 describe('useCheckStepCompleted', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('does nothing when autoCheckIfStepCompleted is not provided', () => {
     const { result } = renderHook(() =>
       useCheckStepCompleted({
@@ -56,4 +59,28 @@ describe('useCheckStepCompleted', () => {
       });
     });
   });
+
+  it('does not toggleTaskCompleteStatus if authCheckIfStepCompleted was aborted', async () => {
+    const mockAutoCheck = jest.fn(({ abortSignal }) => {
+      abortSignal.abort();
+      return Promise.resolve(false);
+    });
+    const mockToggleTask = jest.fn();
+
+    const { waitFor } = renderHook(() =>
+      useCheckStepCompleted({
+        autoCheckIfStepCompleted: mockAutoCheck,
+        cardId: GetStartedWithAlertsCardsId.enablePrebuiltRules,
+        indicesExist: true,
+        sectionId: SectionId.getStartedWithAlerts,
+        stepId: EnablePrebuiltRulesSteps.enablePrebuiltRules,
+        toggleTaskCompleteStatus: mockToggleTask,
+      })
+    );
+
+    await waitFor(() => {
+      expect(mockAutoCheck).toHaveBeenCalled();
+      expect(mockToggleTask).not.toHaveBeenCalled();
+    });
+  });
 });

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.tsx

@@ -38,14 +38,14 @@ export const useCheckStepCompleted = ({
     http: kibanaServicesHttp,
     notifications: { toasts },
   } = useKibana().services;
-  const abortSignal = useRef(new AbortController());
   const addError = useRef(toasts.addError.bind(toasts)).current;
 
   useEffect(() => {
     if (!autoCheckIfStepCompleted) {
       return;
     }
 
+    const abortSignal = new AbortController();
     const autoCheckStepCompleted = async () => {
       const isDone = await autoCheckIfStepCompleted({
         indicesExist,
@@ -56,12 +56,19 @@ export const useCheckStepCompleted = ({
         },
       });
 
-      toggleTaskCompleteStatus({ stepId, cardId, sectionId, undo: !isDone, trigger: 'auto_check' });
+      if (!abortSignal.signal.aborted) {
+        toggleTaskCompleteStatus({
+          stepId,
+          cardId,
+          sectionId,
+          undo: !isDone,
+          trigger: 'auto_check',
+        });
+      }
     };
     autoCheckStepCompleted();
-    const currentAbortController = abortSignal.current;
     return () => {
-      currentAbortController.abort();
+      abortSignal.abort();
     };
   }, [
     autoCheckIfStepCompleted,

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/types.ts

@@ -7,7 +7,6 @@
 
 import type { EuiIconProps } from '@elastic/eui';
 import type React from 'react';
-import type { MutableRefObject } from 'react';
 import type { HttpSetup } from '@kbn/core/public';
 import type { ProductLine } from './configs';
 import type { StepLinkId } from './step_links/types';
@@ -46,7 +45,7 @@ type AutoCheckEnablePrebuiltRulesSteps = ({
   kibanaServicesHttp,
   onError,
 }: {
-  abortSignal: MutableRefObject<AbortController>;
+  abortSignal: AbortController;
   kibanaServicesHttp: HttpSetup;
   onError?: (error: Error) => void;
 }) => Promise<boolean>;