feat: Add analytics for code copied, index strategy docs clicked, and updated code equivalent toggle event CLOUDP-323670 (#7000)

* add analytics for input index copied + updated code equivalent toggle

* add code copied for index suggestions and event for strategy doc clicked

* make onCopy a required field

* cleaned up oncopy call

Author: rubydong

packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx

@@ -272,6 +272,7 @@ const IndexFlowSection = ({
               setIsCodeEquivalentToggleChecked(value);
               track('Code Equivalent Toggled', {
                 context: 'Create Index Modal',
+                toggled: value === true ? 'On' : 'Off',
               });
             }}
             checked={isCodeEquivalentToggleChecked}
@@ -290,6 +291,11 @@ const IndexFlowSection = ({
             dbName={dbName}
             collectionName={collectionName}
             indexNameTypeMap={indexNameTypeMap}
+            onCopy={() => {
+              track('Input Index Copied', {
+                context: 'Create Index Modal',
+              });
+            }}
           />
         ) : (
           createIndexFieldsComponent

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.spec.tsx

@@ -25,6 +25,7 @@ describe('MDBCodeViewer', () => {
         dbName={dbName}
         collectionName={collectionName}
         indexNameTypeMap={indexNameTypeMap}
+        onCopy={() => {}}
       />
     );
   };

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx

@@ -56,11 +56,13 @@ const MDBCodeViewer = ({
   dbName,
   collectionName,
   indexNameTypeMap,
+  onCopy,
   dataTestId,
 }: {
   dbName: string;
   collectionName: string;
   indexNameTypeMap: Record<string, string | number>;
+  onCopy: () => void;
   dataTestId?: string;
 }) => {
   const track = useTelemetry();
@@ -72,7 +74,11 @@ const MDBCodeViewer = ({
 
   return (
     <div className={containerStyles}>
-      <Code data-testid={dataTestId || 'mdb-code-viewer'} language="javascript">
+      <Code
+        data-testid={dataTestId || 'mdb-code-viewer'}
+        language="javascript"
+        onCopy={onCopy}
+      >
         {GeneratedCode}
       </Code>
       <span className={programmingLanguageLinkStyles}>

packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx

@@ -257,6 +257,11 @@ const QueryFlowSection = ({
                 dbName={dbName}
                 collectionName={collectionName}
                 indexNameTypeMap={indexSuggestions}
+                onCopy={() => {
+                  track('Index Suggestions Copied', {
+                    context: 'Create Index Modal',
+                  });
+                }}
               />
             </div>
           </>

packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx

@@ -7,6 +7,7 @@ import {
   Link,
   useDarkMode,
 } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import React from 'react';
 
 const headerStyle = css({
@@ -24,6 +25,7 @@ const subtitleDarkStyle = css({
 
 const CreateIndexModalHeader = () => {
   const darkMode = useDarkMode();
+  const track = useTelemetry();
   return (
     <div className={headerStyle}>
       <H3 data-testid="create-index-modal-header-title">Create Index</H3>
@@ -39,6 +41,11 @@ const CreateIndexModalHeader = () => {
           href="https://docs.mongodb.com/manual/applications/indexes/"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() => {
+            track('Index Strategies Documentation Clicked', {
+              context: 'Create Index Modal',
+            });
+          }}
         >
           Index Strategies Documentation
         </Link>

packages/compass-telemetry/src/telemetry-events.ts

@@ -2817,6 +2817,7 @@ type CreateIndexCodeEquivalentToggled = CommonEvent<{
   name: 'Code Equivalent Toggled';
   payload: {
     context: CreateIndexModalContext;
+    toggled: 'On' | 'Off';
   };
 }>;
 
@@ -2848,6 +2849,27 @@ type CreateIndexCoveredQueriesLearnMoreClicked = CommonEvent<{
   };
 }>;
 
+type CreateIndexInputIndexCopied = CommonEvent<{
+  name: 'Input Index Copied';
+  payload: {
+    context: CreateIndexModalContext;
+  };
+}>;
+
+type CreateIndexIndexSuggestionsCopied = CommonEvent<{
+  name: 'Index Suggestions Copied';
+  payload: {
+    context: CreateIndexModalContext;
+  };
+}>;
+
+type CreateIndexStrategiesDocumentationClicked = CommonEvent<{
+  name: 'Index Strategies Documentation Clicked';
+  payload: {
+    context: CreateIndexModalContext;
+  };
+}>;
+
 export type TelemetryEvent =
   | AggregationCanceledEvent
   | AggregationCopiedEvent
@@ -2989,4 +3011,7 @@ export type TelemetryEvent =
   | CreateIndexProgrammingLanguageLinkClicked
   | CreateIndexQueryTabClicked
   | CreateIndexSuggestedIndexButtonClicked
+  | CreateIndexInputIndexCopied
+  | CreateIndexIndexSuggestionsCopied
+  | CreateIndexStrategiesDocumentationClicked
   | UUIDEncounteredEvent;