[Security Solution][Alert details] - open related case in new browser…

… tab (#197494)

## Summary

This PR makes a very small change to the alerts details expandable
flyout Insights Correlations tab where we display all related cases in a
table. The first column of that table renders a link to the cases
details page.
When clicking on that link, instead of navigating to the cases details
page with the same browser tab, we know open a new tab, so we don't
loose the context of the alert. The UI displays the icon that we use in
other places to inform users that the action is opening a new tab.

Old behavior

https://github.com/user-attachments/assets/48c68608-9091-45f4-a16b-a19f0af12f87

New behavior

https://github.com/user-attachments/assets/78cf6b81-5044-4f26-9808-8fa8d829d723

elastic/security-team#7034

## Edit

This PR now also makes a change to the alert cases guided onboarding
tour, as opening a new tab breaks the tour. The changes are pretty small
and consist of removing the last step that was forcing the users to
click on the alert details flyout expanded Insights Correlations related
cases section. The tour now ends after creating a case, with a message
saying that cases can be accessed via the toast or via the related cases
in the flyout.

https://github.com/user-attachments/assets/0061fdce-5d43-45a3-8166-f812eaffa7b3
(cherry picked from commit 9fafb75)

x-pack/plugins/security_solution/common/guided_onboarding/translations.ts

@@ -87,6 +87,6 @@ export const CASES_MANUAL_TITLE = i18n.translate(
 export const CASES_MANUAL_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.guideConfig.alertsStep.manualCompletion.description',
   {
-    defaultMessage: `After you've explored the case, continue.`,
+    defaultMessage: `View the case's details by clicking View case in the confirmation message that appears. Alternatively, go to the Insights section of the alert details flyout, find the case you created, and select it. After you've explored the case, continue.`,
   }
 );

x-pack/plugins/security_solution/public/cases/pages/index.tsx

@@ -5,19 +5,14 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import type { CaseViewRefreshPropInterface } from '@kbn/cases-plugin/common';
 import { CaseMetricsFeature } from '@kbn/cases-plugin/common';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { CaseDetailsRefreshContext } from '../../common/components/endpoint';
 import { DocumentDetailsRightPanelKey } from '../../flyout/document_details/shared/constants/panel_keys';
 import { RulePanelKey } from '../../flyout/rule_details/right';
-import { useTourContext } from '../../common/components/guided_onboarding_tour';
-import {
-  AlertsCasesTourSteps,
-  SecurityStepId,
-} from '../../common/components/guided_onboarding_tour/tour_config';
 import { TimelineId } from '../../../common/types/timeline';
 import { useKibana, useNavigation } from '../../common/lib/kibana';
 import { APP_ID, CASES_PATH, SecurityPageName } from '../../../common/constants';
@@ -80,16 +75,6 @@ const CaseContainerComponent: React.FC = () => {
     });
 
   const refreshRef = useRef<CaseViewRefreshPropInterface>(null);
-  const { activeStep, endTourStep, isTourShown } = useTourContext();
-
-  const isTourActive = useMemo(
-    () => activeStep === AlertsCasesTourSteps.viewCase && isTourShown(SecurityStepId.alertsCases),
-    [activeStep, isTourShown]
-  );
-
-  useEffect(() => {
-    if (isTourActive) endTourStep(SecurityStepId.alertsCases);
-  }, [endTourStep, isTourActive]);
 
   useEffect(() => {
     dispatch(

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour.test.tsx

@@ -104,8 +104,8 @@ describe('useTourContext', () => {
           wrapper: TourContextProvider,
         });
         await waitForNextUpdate();
-        result.current.setStep(tourId, 7);
-        expect(result.current.activeStep).toBe(7);
+        result.current.setStep(tourId, 6);
+        expect(result.current.activeStep).toBe(6);
       });
     });
 

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts

@@ -22,7 +22,6 @@ export enum AlertsCasesTourSteps {
   addAlertToCase = 4,
   createCase = 5,
   submitCase = 6,
-  viewCase = 7,
 }
 
 export type StepConfig = Pick<
@@ -72,7 +71,6 @@ export const hiddenWhenCaseFlyoutExpanded: Record<string, AlertsCasesTourSteps[]
     AlertsCasesTourSteps.expandEvent,
     AlertsCasesTourSteps.reviewAlertDetailsFlyout,
     AlertsCasesTourSteps.addAlertToCase,
-    AlertsCasesTourSteps.viewCase,
   ],
 };
 
@@ -187,18 +185,6 @@ const alertsCasesConfig: StepConfig[] = [
     ownFocus: false,
     initialFocus: `[tour-step="create-case-flyout"] [tour-step="create-case-submit"]`,
   },
-  {
-    ...defaultConfig,
-    step: AlertsCasesTourSteps.viewCase,
-    title: i18n.translate('xpack.securitySolution.guided_onboarding.tour.viewCase.tourTitle', {
-      defaultMessage: 'View the case',
-    }),
-    content: i18n.translate('xpack.securitySolution.guided_onboarding.tour.viewCase.tourContent', {
-      defaultMessage: 'Cases are shown under Insights, in the alert details.',
-    }),
-    anchorPosition: 'rightUp',
-    dataTestSubj: getTourAnchor(AlertsCasesTourSteps.viewCase, SecurityStepId.alertsCases),
-  },
 ];
 
 export const sampleCase = {

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.test.tsx

@@ -194,7 +194,7 @@ describe('SecurityTourStep', () => {
     });
     const mockCall = { ...mockTourStep.mock.calls[0][0] };
     expect(mockCall.step).toEqual(1);
-    expect(mockCall.stepsTotal).toEqual(7);
+    expect(mockCall.stepsTotal).toEqual(6);
   });
 
   it('forces the render for createCase step of the SecurityStepId.alertsCases tour step', () => {