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

# Backport This will backport the following commits from `main` to `8.18`: - [[Security Solution][Onboarding] Adding telemetry to video selectors (#217280)](https://github.com/elastic/kibana/pull/217280)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2025-04-23 10:43:11 +02:00 · 2025-04-23 10:43:11 +02:00 · 91c373eb49
commit 91c373eb49
parent 8634cd048d
11 changed files with 139 additions and 20 deletions
--- a/x-pack/solutions/security/plugins/security_solution/public/common/lib/telemetry/events/onboarding/index.ts
+++ b/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,
 ];
--- a/x-pack/solutions/security/plugins/security_solution/public/common/lib/telemetry/events/onboarding/types.ts
+++ b/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 {
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/mocks/mocks.ts
+++ b/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);

--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx
+++ b/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 && (
            <>
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_selector_list.test.tsx
+++ b/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,6 +51,7 @@ describe('CardSelectorList', () => {
    Element.prototype.scrollIntoView = scrollIntoViewMock;
  });
  beforeEach(() => {
+    mockExperimentalFeatures.mockReturnValue({});
    jest.clearAllMocks();
  });
  afterAll(() => {
@ -47,46 +59,81 @@ describe('CardSelectorList', () => {
  });

  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}`);
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_selector_list.tsx
+++ b/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,7 +38,8 @@ 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(() => {
@ -43,6 +47,14 @@ export const CardSelectorList = React.memo<CardSelectorListProps>(
      // 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>
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx
+++ b/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 && (
            <>
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx
+++ b/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 && (
            <>
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_telemetry.test.ts
+++ b/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' }
+      );
+    });
+  });
 });
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_telemetry.ts
+++ b/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]
  );
--- a/x-pack/solutions/security/plugins/security_solution/tsconfig.json
+++ b/x-pack/solutions/security/plugins/security_solution/tsconfig.json
@ -239,6 +239,6 @@
    "@kbn/product-doc-base-plugin",
    "@kbn/shared-ux-error-boundary",
    "@kbn/security-ai-prompts",
-    "@kbn/inference-endpoint-ui-common"
+    "@kbn/inference-endpoint-ui-common",
  ]
 }