[Security Solution][Onboarding] Adding telemetry to video selectors (elastic#217280)

## Summary

New event created for the video selectors inside rules, dashboards and
alerts cards.

```
export interface OnboardingHubSelectorCardClickedParams {
  originStepId: string;
  selectorId: string;
}
```

To verify:

Add these lines to kibana.dev.yml

```
logging.browser.root.level: debug
telemetry.optIn: true
```

1. In the onboarding hub, expand the rules card
2. It should log `Report event "Onboarding Hub Step Selector Clicked"`.


https://github.com/user-attachments/assets/c1b1084e-4917-4412-93ed-984a74b6b6b4


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] [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

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: kibanamachine <[email protected]>

Author: 3 people

x-pack/solutions/security/plugins/security_solution/public/common/lib/telemetry/events/onboarding/index.ts

@@ -75,8 +75,29 @@ export const onboardingHubStepFinishedEvent: OnboardingHubTelemetryEvent = {
   },
 };
 
+export const onboardingHubStepSelectorClickedEvent: OnboardingHubTelemetryEvent = {
+  eventType: OnboardingHubEventTypes.OnboardingHubStepSelectorClicked,
+  schema: {
+    originStepId: {
+      type: 'keyword',
+      _meta: {
+        description: 'Active step ID',
+        optional: false,
+      },
+    },
+    selectorId: {
+      type: 'keyword',
+      _meta: {
+        description: 'Clicked Selector ID',
+        optional: false,
+      },
+    },
+  },
+};
+
 export const onboardingHubTelemetryEvents = [
   onboardingHubStepOpenEvent,
   onboardingHubStepLinkClickedEvent,
   onboardingHubStepFinishedEvent,
+  onboardingHubStepSelectorClickedEvent,
 ];

x-pack/solutions/security/plugins/security_solution/public/common/lib/telemetry/events/onboarding/types.ts

@@ -10,6 +10,7 @@ export enum OnboardingHubEventTypes {
   OnboardingHubStepOpen = 'Onboarding Hub Step Open',
   OnboardingHubStepFinished = 'Onboarding Hub Step Finished',
   OnboardingHubStepLinkClicked = 'Onboarding Hub Step Link Clicked',
+  OnboardingHubStepSelectorClicked = 'Onboarding Hub Step Selector Clicked',
 }
 
 type OnboardingHubStepOpenTrigger = 'navigation' | 'click';
@@ -24,6 +25,11 @@ export interface OnboardingHubStepLinkClickedParams {
   stepLinkId: string;
 }
 
+export interface OnboardingHubSelectorCardClickedParams {
+  originStepId: string;
+  selectorId: string;
+}
+
 export type OnboardingHubStepFinishedTrigger = 'auto_check' | 'click';
 
 export interface OnboardingHubStepFinishedParams {
@@ -36,6 +42,7 @@ export interface OnboardingHubTelemetryEventsMap {
   [OnboardingHubEventTypes.OnboardingHubStepOpen]: OnboardingHubStepOpenParams;
   [OnboardingHubEventTypes.OnboardingHubStepFinished]: OnboardingHubStepFinishedParams;
   [OnboardingHubEventTypes.OnboardingHubStepLinkClicked]: OnboardingHubStepLinkClickedParams;
+  [OnboardingHubEventTypes.OnboardingHubStepSelectorClicked]: OnboardingHubSelectorCardClickedParams;
 }
 
 export interface OnboardingHubTelemetryEvent {

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/__mocks__/mocks.ts

@@ -14,11 +14,13 @@
 export const mockReportCardOpen = jest.fn();
 export const mockReportCardComplete = jest.fn();
 export const mockReportCardLinkClicked = jest.fn();
+export const mockReportCardSelectorClicked = jest.fn();
 
 export const telemetry = {
   reportCardOpen: mockReportCardOpen,
   reportCardComplete: mockReportCardComplete,
   reportCardLinkClicked: mockReportCardLinkClicked,
+  reportCardSelectorClicked: mockReportCardSelectorClicked,
 };
 export const mockTelemetry = jest.fn(() => telemetry);
 

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx

@@ -84,6 +84,7 @@ export const AlertsCard: OnboardingCardComponent = ({
             items={ALERTS_CARD_ITEMS}
             onSelect={onSelectCard}
             selectedItem={selectedCardItem}
+            cardId={OnboardingCardId.alerts}
           />
           {isIntegrationsCardAvailable && !isIntegrationsCardComplete && (
             <>

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_selector_list.test.tsx

@@ -6,13 +6,23 @@
  */
 
 import React from 'react';
+
 import { render, fireEvent } from '@testing-library/react';
 import { CardSelectorList } from './card_selector_list';
 import type { CardSelectorListItem } from './card_selector_list';
 import { RulesCardItemId } from '../rules/types';
+import { OnboardingCardId } from '../../../../constants';
+import { OnboardingContextProvider } from '../../../onboarding_context';
+import { ExperimentalFeaturesService } from '../../../../../common/experimental_features_service';
+import { TestProviders } from '../../../../../common/mock';
 
 const mockOnSelect = jest.fn();
 
+jest.mock('../../../../../common/experimental_features_service', () => ({
+  ExperimentalFeaturesService: { get: jest.fn() },
+}));
+const mockExperimentalFeatures = ExperimentalFeaturesService.get as jest.Mock;
+
 const items: CardSelectorListItem[] = [
   {
     id: RulesCardItemId.install,
@@ -31,6 +41,7 @@ const defaultProps = {
   onSelect: mockOnSelect,
   selectedItem: items[0],
   title: 'Select a Rule',
+  cardId: OnboardingCardId.rules,
 };
 
 describe('CardSelectorList', () => {
@@ -40,53 +51,89 @@ describe('CardSelectorList', () => {
     Element.prototype.scrollIntoView = scrollIntoViewMock;
   });
   beforeEach(() => {
+    mockExperimentalFeatures.mockReturnValue({});
     jest.clearAllMocks();
   });
   afterAll(() => {
     jest.useRealTimers();
   });
 
   it('renders the component with the correct title', () => {
-    const { getByText } = render(<CardSelectorList {...defaultProps} />);
+    const { getByText } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
     expect(getByText('Select a Rule')).toBeInTheDocument();
   });
 
   it('renders all card items', () => {
-    const { getByTestId } = render(<CardSelectorList {...defaultProps} />);
+    const { getByTestId } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
     items.forEach((item) => {
       expect(getByTestId(`cardSelectorItem-${item.id}`)).toBeInTheDocument();
     });
   });
 
   it('applies the "selected" class to the selected item', () => {
-    const { getByTestId } = render(<CardSelectorList {...defaultProps} />);
+    const { getByTestId } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
     const selectedItem = getByTestId(`cardSelectorItem-${RulesCardItemId.install}`);
     expect(selectedItem).toHaveClass('selectedCardPanelItem');
   });
 
   it('does not apply the "selected" class to unselected items', () => {
-    const { getByTestId } = render(<CardSelectorList {...defaultProps} />);
+    const { getByTestId } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
     const unselectedItem = getByTestId(`cardSelectorItem-${RulesCardItemId.create}`);
     expect(unselectedItem).not.toHaveClass('selectedCardPanelItem');
   });
 
   it('calls onSelect with the correct item when an item is clicked', () => {
-    const { getByTestId } = render(<CardSelectorList {...defaultProps} />);
+    const { getByTestId } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
     const unselectedItem = getByTestId(`cardSelectorItem-${RulesCardItemId.create}`);
     fireEvent.click(unselectedItem);
     expect(mockOnSelect).toHaveBeenCalledWith(items[1]);
   });
 
-  it('scrolls to the selected item on initial render', () => {
-    jest.useFakeTimers();
-    render(<CardSelectorList {...defaultProps} />);
-    jest.runAllTimers();
-    expect(scrollIntoViewMock).toHaveBeenCalled();
-  });
-
   it('updates the selected item visually when onSelect is called', () => {
-    const { rerender, getByTestId } = render(<CardSelectorList {...defaultProps} />);
-    rerender(<CardSelectorList {...defaultProps} selectedItem={items[1]} />);
+    const { rerender, getByTestId } = render(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
+    rerender(
+      <TestProviders>
+        <OnboardingContextProvider spaceId="default">
+          <CardSelectorList {...defaultProps} selectedItem={items[1]} />
+        </OnboardingContextProvider>
+      </TestProviders>
+    );
 
     const newlySelectedItem = getByTestId(`cardSelectorItem-${RulesCardItemId.create}`);
     const previouslySelectedItem = getByTestId(`cardSelectorItem-${RulesCardItemId.install}`);

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_selector_list.tsx

@@ -4,13 +4,15 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import type { OnboardingCardId } from '../../../../constants';
 import type { RulesCardItemId } from '../rules/types';
 import type { AlertsCardItemId } from '../alerts/types';
 import type { DashboardsCardItemId } from '../dashboards/types';
 import { useCardSelectorListStyles } from './card_selector_list.styles';
 import { HEIGHT_ANIMATION_DURATION } from '../../onboarding_card_panel.styles';
+import { useOnboardingContext } from '../../../onboarding_context';
 
 export interface CardSelectorListItem {
   id: RulesCardItemId | AlertsCardItemId | DashboardsCardItemId;
@@ -23,6 +25,7 @@ export interface CardSelectorListProps {
   onSelect: (item: CardSelectorListItem) => void;
   selectedItem: CardSelectorListItem;
   title?: string;
+  cardId: OnboardingCardId;
 }
 
 const scrollToSelectedItem = (cardId: string) => {
@@ -35,14 +38,23 @@ const scrollToSelectedItem = (cardId: string) => {
 };
 
 export const CardSelectorList = React.memo<CardSelectorListProps>(
-  ({ items, onSelect, selectedItem, title }) => {
+  ({ items, onSelect, selectedItem, title, cardId }) => {
+    const { telemetry } = useOnboardingContext();
     const styles = useCardSelectorListStyles();
 
     useEffect(() => {
       scrollToSelectedItem(selectedItem.id);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const handleSelect = useCallback(
+      (item: CardSelectorListItem) => {
+        onSelect(item);
+        telemetry.reportCardSelectorClicked(cardId, item.id);
+      },
+      [cardId, onSelect, telemetry]
+    );
+
     return (
       <EuiFlexGroup
         data-test-subj="cardSelectorList"
@@ -72,9 +84,7 @@ export const CardSelectorList = React.memo<CardSelectorListProps>(
                   className={selectedItem.id === item.id ? 'selectedCardPanelItem' : ''}
                   color={selectedItem.id === item.id ? 'subdued' : 'plain'}
                   element="button"
-                  onClick={() => {
-                    onSelect(item);
-                  }}
+                  onClick={() => handleSelect(item)}
                 >
                   <EuiTitle size="xxs">
                     <h5>{item.title}</h5>

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx

@@ -80,6 +80,7 @@ export const DashboardsCard: OnboardingCardComponent = ({
             items={DASHBOARDS_CARD_ITEMS}
             onSelect={onSelectCard}
             selectedItem={selectedCardItem}
+            cardId={OnboardingCardId.dashboards}
           />
           {isIntegrationsCardAvailable && !isIntegrationsCardComplete && (
             <>

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx

@@ -80,6 +80,7 @@ export const RulesCard: OnboardingCardComponent = ({
             items={RULES_CARD_ITEMS}
             onSelect={onSelectCard}
             selectedItem={selectedCardItem}
+            cardId={OnboardingCardId.rules}
           />
           {isIntegrationsCardAvailable && !isIntegrationsCardComplete && (
             <>

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_telemetry.test.ts

@@ -112,4 +112,26 @@ describe('useOnboardingTelemetry', () => {
       );
     });
   });
+
+  describe('when clicking a card selector', () => {
+    it('should report card selector clicked event on the default topic', () => {
+      const { result } = renderHook(useOnboardingTelemetry);
+      result.current.reportCardSelectorClicked('testCard' as OnboardingCardId, 'selector1');
+
+      expect(telemetryMock.reportEvent).toHaveBeenCalledWith(
+        OnboardingHubEventTypes.OnboardingHubStepSelectorClicked,
+        { originStepId: 'testCard', selectorId: 'selector1' }
+      );
+    });
+
+    it('should report card selector clicked event on another topic', () => {
+      const { result } = renderHook(useOnboardingTelemetry);
+      result.current.reportCardSelectorClicked('testCard2' as OnboardingCardId, 'selector2');
+
+      expect(telemetryMock.reportEvent).toHaveBeenCalledWith(
+        OnboardingHubEventTypes.OnboardingHubStepSelectorClicked,
+        { originStepId: 'testTopic#testCard2', selectorId: 'selector2' }
+      );
+    });
+  });
 });

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_telemetry.ts

@@ -16,6 +16,7 @@ export interface OnboardingTelemetry {
   reportCardOpen: (cardId: OnboardingCardId, options?: { auto?: boolean }) => void;
   reportCardComplete: (cardId: OnboardingCardId, options?: { auto?: boolean }) => void;
   reportCardLinkClicked: (cardId: OnboardingCardId, linkId: string) => void;
+  reportCardSelectorClicked: (cardId: OnboardingCardId, selectorId: string) => void;
 }
 
 export const useOnboardingTelemetry = (): OnboardingTelemetry => {
@@ -40,6 +41,12 @@ export const useOnboardingTelemetry = (): OnboardingTelemetry => {
           stepLinkId: linkId,
         });
       },
+      reportCardSelectorClicked: (cardId, selectorId: string) => {
+        telemetry.reportEvent(OnboardingHubEventTypes.OnboardingHubStepSelectorClicked, {
+          originStepId: getStepId(cardId),
+          selectorId,
+        });
+      },
     }),
     [telemetry]
   );