[8.x] [Search][Onboarding] Add telemetry for Start Page code view (#1…

…93099) (#193641) # Backport This will backport the following commits from `main` to `8.x`: - [[Search][Onboarding] Add telemetry for Start Page code view (#193099)](#193099)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Sep 23, 2024 · 156a76c · 156a76c
1 parent dae8f17
commit 156a76c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 18 deletions.
diff --git a/x-pack/plugins/search_indices/public/analytics/constants.ts b/x-pack/plugins/search_indices/public/analytics/constants.ts
@@ -10,4 +10,7 @@ export enum AnalyticsEvents {
   startPageShowCodeClick = 'start_page_show_code',
   startPageShowCreateIndexUIClick = 'start_page_show_create_index_ui',
   startCreateIndexClick = 'start_create_index',
+  startCreateIndexLanguageSelect = 'start_code_lang_select',
+  startCreateIndexCodeCopyInstall = 'start_code_copy_install',
+  startCreateIndexCodeCopy = 'start_code_copy',
 }
diff --git a/x-pack/plugins/search_indices/public/components/start/code_sample.tsx b/x-pack/plugins/search_indices/public/components/start/code_sample.tsx
@@ -4,6 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+// Disabled so we can track the on copy event by adding an onClick to a div
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 
 import React from 'react';
 import {
@@ -19,9 +21,22 @@ export interface CodeSampleProps {
   title: string;
   language: string;
   code: string;
+  onCodeCopyClick?: React.MouseEventHandler<HTMLElement>;
 }
 
-export const CodeSample = ({ title, language, code }: CodeSampleProps) => {
+export const CodeSample = ({ title, language, code, onCodeCopyClick }: CodeSampleProps) => {
+  const onCodeClick = React.useCallback(
+    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      if (onCodeCopyClick === undefined) return;
+      if (e.target instanceof HTMLElement) {
+        if (e.target.dataset?.testSubj === 'euiCodeBlockCopy') {
+          onCodeCopyClick(e);
+        }
+      }
+    },
+    [onCodeCopyClick]
+  );
+
   return (
     <EuiFlexItem>
       <EuiText size="s">
@@ -30,15 +45,17 @@ export const CodeSample = ({ title, language, code }: CodeSampleProps) => {
       <EuiSpacer size="s" />
       <EuiThemeProvider colorMode="dark">
         <EuiPanel color="subdued" paddingSize="none" hasShadow={false}>
-          <EuiCodeBlock
-            language={language}
-            fontSize="m"
-            paddingSize="m"
-            isCopyable
-            transparentBackground
-          >
-            {code}
-          </EuiCodeBlock>
+          <div onClick={onCodeClick}>
+            <EuiCodeBlock
+              language={language}
+              fontSize="m"
+              paddingSize="m"
+              isCopyable
+              transparentBackground
+            >
+              {code}
+            </EuiCodeBlock>
+          </div>
         </EuiPanel>
       </EuiThemeProvider>
     </EuiFlexItem>

diff --git a/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx b/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx
@@ -4,20 +4,22 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TryInConsoleButton } from '@kbn/try-in-console';
 
-import { useKibana } from '../../hooks/use_kibana';
-import { CodeSample } from './code_sample';
-import { CreateIndexFormState } from './types';
-
+import { AnalyticsEvents } from '../../analytics/constants';
 import { Languages, AvailableLanguages, LanguageOptions } from '../../code_examples';
 import { DenseVectorSeverlessCodeExamples } from '../../code_examples/create_index';
+import { useUsageTracker } from '../../hooks/use_usage_tracker';
+import { useKibana } from '../../hooks/use_kibana';
+import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
 
 import { LanguageSelector } from '../shared/language_selector';
-import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url';
+
+import { CodeSample } from './code_sample';
+import { CreateIndexFormState } from './types';
 
 export interface CreateIndexCodeViewProps {
   createIndexForm: CreateIndexFormState;
@@ -28,10 +30,21 @@ const SelectedCodeExamples = DenseVectorSeverlessCodeExamples;
 
 export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProps) => {
   const { application, share, console: consolePlugin } = useKibana().services;
+  const usageTracker = useUsageTracker();
+
   // TODO: initing this should be dynamic and possibly saved in the form state
   const [selectedLanguage, setSelectedLanguage] = useState<AvailableLanguages>('python');
+  const onSelectLanguage = useCallback(
+    (value: AvailableLanguages) => {
+      setSelectedLanguage(value);
+      usageTracker.count([
+        AnalyticsEvents.startCreateIndexLanguageSelect,
+        `${AnalyticsEvents.startCreateIndexLanguageSelect}_${value}`,
+      ]);
+    },
+    [usageTracker]
+  );
   const elasticsearchUrl = useElasticsearchUrl();
-
   const codeParams = useMemo(() => {
     return {
       indexName: createIndexForm.indexName || undefined,
@@ -49,7 +62,7 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
           <LanguageSelector
             options={LanguageOptions}
             selectedLanguage={selectedLanguage}
-            onSelectLanguage={(value) => setSelectedLanguage(value)}
+            onSelectLanguage={onSelectLanguage}
           />
         </EuiFlexItem>
         {selectedLanguage === 'curl' && (
@@ -70,6 +83,12 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
           })}
           language="shell"
           code={selectedCodeExample.installCommand}
+          onCodeCopyClick={() => {
+            usageTracker.click([
+              AnalyticsEvents.startCreateIndexCodeCopyInstall,
+              `${AnalyticsEvents.startCreateIndexCodeCopyInstall}_${selectedLanguage}`,
+            ]);
+          }}
         />
       )}
       <CodeSample
@@ -78,6 +97,14 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp
         })}
         language={Languages[selectedLanguage].codeBlockLanguage}
         code={selectedCodeExample.createIndex(codeParams)}
+        onCodeCopyClick={() => {
+          usageTracker.click([
+            AnalyticsEvents.startCreateIndexCodeCopy,
+            `${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}`,
+            // TODO: vector should be a parameter when have multiple options
+            `${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}_vector`,
+          ]);
+        }}
       />
     </EuiFlexGroup>
   );