[Security Solution] Add guided tour to document details flyout (#180318)

## Summary

This PR adds a guided tour for the new expandable flyout in alerts
table.

Where it will show up:
✅ Alerts page
✅ Alerts tab in Cases

Tour will not show up in:
❌ rule creation
❌ flyout in timeline
❌ event table.


https://github.com/elastic/kibana/assets/18648970/e9d0ce92-0eb4-4898-ad05-91d701aec01d



**How to test**
- Generate some alerts and go to Alerts page
- Expand a row in alerts table
- Guided tour should appear
- Note that rule preview is only available to alerts. Guided tour for an
event or alert preview does not have that step.

To test guided tour in event and timeline, enable
`expandableEventFlyoutEnabled`, `expandableTimelineFlyoutEnabled`
respectively.

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

test/functional/page_objects/common_page.ts

@@ -43,6 +43,7 @@ export class CommonPageObject extends FtrService {
     const NEW_FEATURES_TOUR_STORAGE_KEYS = {
       RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.9',
       TIMELINE: 'securitySolution.timeline.newFeaturesTour.v8.12',
+      FLYOUT: 'securitySolution.documentDetails.newFeaturesTour.v8.14',
     };
 
     const tourStorageKeys = Object.values(NEW_FEATURES_TOUR_STORAGE_KEYS);

x-pack/plugins/fleet/cypress/tasks/common.ts

@@ -51,6 +51,7 @@ const NEW_FEATURES_TOUR_STORAGE_KEYS = {
   RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.9',
   TIMELINES: 'securitySolution.security.timelineFlyoutHeader.saveTimelineTour',
   TIMELINE: 'securitySolution.timeline.newFeaturesTour.v8.12',
+  FLYOUT: 'securitySolution.documentDetails.newFeaturesTour.v8.14',
 };
 
 const disableNewFeaturesTours = (window: Window) => {

x-pack/plugins/security_solution/common/constants.ts

@@ -426,6 +426,7 @@ export const NEW_FEATURES_TOUR_STORAGE_KEYS = {
   RULE_MANAGEMENT_PAGE: 'securitySolution.rulesManagementPage.newFeaturesTour.v8.13',
   TIMELINES: 'securitySolution.security.timelineFlyoutHeader.saveTimelineTour',
   TIMELINE: 'securitySolution.timeline.newFeaturesTour.v8.12',
+  FLYOUT: 'securitySolution.documentDetails.newFeaturesTour.v8.14',
 };
 
 export const RULE_DETAILS_EXECUTION_LOG_TABLE_SHOW_METRIC_COLUMNS_STORAGE_KEY =

x-pack/plugins/security_solution/public/flyout/document_details/left/components/tour.test.tsx

@@ -0,0 +1,121 @@
+/*
+ * 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 React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { LeftPanelTour } from './tour';
+import { LeftPanelContext } from '../context';
+import { mockContextValue } from '../mocks/mock_context';
+import {
+  createMockStore,
+  createSecuritySolutionStorageMock,
+  TestProviders,
+} from '../../../../common/mock';
+import { useKibana as mockUseKibana } from '../../../../common/lib/kibana/__mocks__';
+import { useKibana } from '../../../../common/lib/kibana';
+import { FLYOUT_TOUR_CONFIG_ANCHORS } from '../../shared/utils/tour_step_config';
+import { useIsTimelineFlyoutOpen } from '../../shared/hooks/use_is_timeline_flyout_open';
+import { FLYOUT_TOUR_TEST_ID } from '../../shared/components/test_ids';
+
+jest.mock('../../../../common/lib/kibana');
+jest.mock('../../shared/hooks/use_is_timeline_flyout_open');
+
+const mockedUseKibana = mockUseKibana();
+
+const { storage: storageMock } = createSecuritySolutionStorageMock();
+const mockStore = createMockStore(undefined, undefined, undefined, {
+  ...storageMock,
+});
+
+const renderLeftPanelTour = (context: LeftPanelContext = mockContextValue) =>
+  render(
+    <TestProviders store={mockStore}>
+      <LeftPanelContext.Provider value={context}>
+        <LeftPanelTour />
+        {Object.values(FLYOUT_TOUR_CONFIG_ANCHORS).map((i, idx) => (
+          <div key={idx} data-test-subj={i} />
+        ))}
+      </LeftPanelContext.Provider>
+    </TestProviders>
+  );
+
+describe('<LeftPanelTour />', () => {
+  beforeEach(() => {
+    (useKibana as jest.Mock).mockReturnValue({
+      ...mockedUseKibana,
+      services: {
+        ...mockedUseKibana.services,
+        storage: storageMock,
+      },
+    });
+    (useIsTimelineFlyoutOpen as jest.Mock).mockReturnValue(false);
+
+    storageMock.clear();
+  });
+
+  it('should render left panel tour for alerts starting as step 4', async () => {
+    storageMock.set('securitySolution.documentDetails.newFeaturesTour.v8.14', {
+      currentTourStep: 4,
+      isTourActive: true,
+    });
+
+    const { getByText, getByTestId } = renderLeftPanelTour();
+    await waitFor(() => {
+      expect(getByTestId(`${FLYOUT_TOUR_TEST_ID}-4`)).toBeVisible();
+    });
+    fireEvent.click(getByText('Next'));
+    await waitFor(() => {
+      expect(getByTestId(`${FLYOUT_TOUR_TEST_ID}-5`)).toBeVisible();
+    });
+    await waitFor(() => {
+      expect(getByText('Finish')).toBeVisible();
+    });
+  });
+
+  it('should not render left panel tour for preview', () => {
+    storageMock.set('securitySolution.documentDetails.newFeaturesTour.v8.14', {
+      currentTourStep: 3,
+      isTourActive: true,
+    });
+
+    const { queryByTestId, queryByText } = renderLeftPanelTour({
+      ...mockContextValue,
+      isPreview: true,
+    });
+    expect(queryByTestId(`${FLYOUT_TOUR_TEST_ID}-4`)).not.toBeInTheDocument();
+    expect(queryByText('Next')).not.toBeInTheDocument();
+  });
+
+  it('should not render left panel tour for non-alerts', async () => {
+    storageMock.set('securitySolution.documentDetails.newFeaturesTour.v8.14', {
+      currentTourStep: 3,
+      isTourActive: true,
+    });
+
+    const { queryByTestId, queryByText } = renderLeftPanelTour({
+      ...mockContextValue,
+      getFieldsData: () => '',
+    });
+    expect(queryByTestId(`${FLYOUT_TOUR_TEST_ID}-4`)).not.toBeInTheDocument();
+    expect(queryByText('Next')).not.toBeInTheDocument();
+  });
+
+  it('should not render left panel tour for flyout in timeline', () => {
+    (useIsTimelineFlyoutOpen as jest.Mock).mockReturnValue(true);
+    storageMock.set('securitySolution.documentDetails.newFeaturesTour.v8.14', {
+      currentTourStep: 3,
+      isTourActive: true,
+    });
+
+    const { queryByTestId, queryByText } = renderLeftPanelTour({
+      ...mockContextValue,
+      isPreview: true,
+    });
+    expect(queryByTestId(`${FLYOUT_TOUR_TEST_ID}-4`)).not.toBeInTheDocument();
+    expect(queryByText('Next')).not.toBeInTheDocument();
+  });
+});

x-pack/plugins/security_solution/public/flyout/document_details/left/components/tour.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 type { FC } from 'react';
+import React, { memo, useMemo } from 'react';
+import { getField } from '../../shared/utils';
+import { EventKind } from '../../shared/constants/event_kinds';
+import { useLeftPanelContext } from '../context';
+import { FlyoutTour } from '../../shared/components/flyout_tour';
+import { getLeftSectionTourSteps } from '../../shared/utils/tour_step_config';
+import { useIsTimelineFlyoutOpen } from '../../shared/hooks/use_is_timeline_flyout_open';
+
+/**
+ * Guided tour for the left panel in details flyout
+ */
+export const LeftPanelTour: FC = memo(() => {
+  const { getFieldsData, isPreview } = useLeftPanelContext();
+  const eventKind = getField(getFieldsData('event.kind'));
+  const isAlert = eventKind === EventKind.signal;
+  const isTimelineFlyoutOpen = useIsTimelineFlyoutOpen();
+  const showTour = isAlert && !isPreview && !isTimelineFlyoutOpen;
+
+  const tourStepContent = useMemo(() => getLeftSectionTourSteps(), []);
+
+  return showTour ? <FlyoutTour tourStepContent={tourStepContent} totalSteps={5} /> : null;
+});
+
+LeftPanelTour.displayName = 'LeftPanelTour';

x-pack/plugins/security_solution/public/flyout/document_details/left/index.tsx

@@ -17,6 +17,7 @@ import * as tabs from './tabs';
 import { getField } from '../shared/utils';
 import { EventKind } from '../shared/constants/event_kinds';
 import { useLeftPanelContext } from './context';
+import { LeftPanelTour } from './components/tour';
 
 export type LeftPanelPaths = 'visualize' | 'insights' | 'investigation' | 'response';
 export const DocumentDetailsLeftPanelKey: LeftPanelProps['key'] = 'document-details-left';
@@ -76,6 +77,7 @@ export const LeftPanel: FC<Partial<LeftPanelProps>> = memo(({ path }) => {
 
   return (
     <>
+      <LeftPanelTour />
       <PanelHeader
         selectedTabId={selectedTabId}
         setSelectedTabId={setSelectedTabId}

x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/insights_tab.tsx

@@ -14,8 +14,10 @@ import { useExpandableFlyoutApi, useExpandableFlyoutState } from '@kbn/expandabl
 import { useKibana } from '../../../../common/lib/kibana';
 import {
   INSIGHTS_TAB_BUTTON_GROUP_TEST_ID,
+  INSIGHTS_TAB_ENTITIES_BUTTON_LABEL_TEST_ID,
   INSIGHTS_TAB_ENTITIES_BUTTON_TEST_ID,
   INSIGHTS_TAB_THREAT_INTELLIGENCE_BUTTON_TEST_ID,
+  INSIGHTS_TAB_PREVALENCE_BUTTON_LABEL_TEST_ID,
   INSIGHTS_TAB_PREVALENCE_BUTTON_TEST_ID,
   INSIGHTS_TAB_CORRELATIONS_BUTTON_TEST_ID,
 } from './test_ids';
@@ -35,10 +37,12 @@ const insightsButtons: EuiButtonGroupOptionProps[] = [
   {
     id: ENTITIES_TAB_ID,
     label: (
-      <FormattedMessage
-        id="xpack.securitySolution.flyout.left.insights.entitiesButtonLabel"
-        defaultMessage="Entities"
-      />
+      <div data-test-subj={INSIGHTS_TAB_ENTITIES_BUTTON_LABEL_TEST_ID}>
+        <FormattedMessage
+          id="xpack.securitySolution.flyout.left.insights.entitiesButtonLabel"
+          defaultMessage="Entities"
+        />
+      </div>
     ),
     'data-test-subj': INSIGHTS_TAB_ENTITIES_BUTTON_TEST_ID,
   },
@@ -55,10 +59,12 @@ const insightsButtons: EuiButtonGroupOptionProps[] = [
   {
     id: PREVALENCE_TAB_ID,
     label: (
-      <FormattedMessage
-        id="xpack.securitySolution.flyout.left.insights.prevalenceButtonLabel"
-        defaultMessage="Prevalence"
-      />
+      <div data-test-subj={INSIGHTS_TAB_PREVALENCE_BUTTON_LABEL_TEST_ID}>
+        <FormattedMessage
+          id="xpack.securitySolution.flyout.left.insights.prevalenceButtonLabel"
+          defaultMessage="Prevalence"
+        />
+      </div>
     ),
     'data-test-subj': INSIGHTS_TAB_PREVALENCE_BUTTON_TEST_ID,
   },

x-pack/plugins/security_solution/public/flyout/document_details/left/tabs/test_ids.ts

@@ -17,8 +17,12 @@ const INSIGHTS_TAB_TEST_ID = `${PREFIX}InsightsTab` as const;
 export const INSIGHTS_TAB_BUTTON_GROUP_TEST_ID = `${INSIGHTS_TAB_TEST_ID}ButtonGroup` as const;
 export const INSIGHTS_TAB_ENTITIES_BUTTON_TEST_ID =
   `${INSIGHTS_TAB_TEST_ID}EntitiesButton` as const;
+export const INSIGHTS_TAB_ENTITIES_BUTTON_LABEL_TEST_ID =
+  `${INSIGHTS_TAB_TEST_ID}Entities` as const;
 export const INSIGHTS_TAB_THREAT_INTELLIGENCE_BUTTON_TEST_ID =
   `${INSIGHTS_TAB_TEST_ID}ThreatIntelligenceButton` as const;
+export const INSIGHTS_TAB_PREVALENCE_BUTTON_LABEL_TEST_ID =
+  `${INSIGHTS_TAB_TEST_ID}Prevalence` as const;
 export const INSIGHTS_TAB_PREVALENCE_BUTTON_TEST_ID =
   `${INSIGHTS_TAB_TEST_ID}PrevalenceButton` as const;
 export const INSIGHTS_TAB_CORRELATIONS_BUTTON_TEST_ID =

x-pack/plugins/security_solution/public/flyout/document_details/right/components/alert_description.test.tsx

@@ -22,6 +22,18 @@ import { TestProviders } from '../../../../common/mock';
 import { i18n } from '@kbn/i18n';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import type { ExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { createTelemetryServiceMock } from '../../../../common/lib/telemetry/telemetry_service.mock';
+
+const mockedTelemetry = createTelemetryServiceMock();
+jest.mock('../../../../common/lib/kibana', () => {
+  return {
+    useKibana: () => ({
+      services: {
+        telemetry: mockedTelemetry,
+      },
+    }),
+  };
+});
 
 jest.mock('@kbn/expandable-flyout', () => ({ useExpandableFlyoutApi: jest.fn() }));
 

x-pack/plugins/security_solution/public/flyout/document_details/right/components/header_actions.test.tsx

@@ -43,6 +43,14 @@ const renderHeaderActions = (contextValue: RightPanelContext) =>
   );
 
 describe('<HeaderAction />', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '?',
+      },
+    });
+  });
+
   beforeEach(() => {
     window.location.search = '?';
     jest.mocked(useGetAlertDetailsFlyoutLink).mockReturnValue(alertUrl);

x-pack/plugins/security_solution/public/flyout/document_details/right/components/reason.test.tsx

@@ -17,11 +17,23 @@ import { DocumentDetailsPreviewPanelKey } from '../../preview';
 import { TestProviders } from '../../../../common/mock';
 import { i18n } from '@kbn/i18n';
 import { type ExpandableFlyoutApi, useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { createTelemetryServiceMock } from '../../../../common/lib/telemetry/telemetry_service.mock';
 
 const flyoutContextValue = {
   openPreviewPanel: jest.fn(),
 } as unknown as ExpandableFlyoutApi;
 
+const mockedTelemetry = createTelemetryServiceMock();
+jest.mock('../../../../common/lib/kibana', () => {
+  return {
+    useKibana: () => ({
+      services: {
+        telemetry: mockedTelemetry,
+      },
+    }),
+  };
+});
+
 jest.mock('@kbn/expandable-flyout', () => ({
   useExpandableFlyoutApi: jest.fn(),
   ExpandableFlyoutProvider: ({ children }: React.PropsWithChildren<{}>) => <>{children}</>,