feat: track AI related events COMPASS-7109, COMPASS-7110 (#4739)

* feat: track the number of edits a user makes to a generated query COMPASS-7109

* feat: track prompt submitted COMPASS-7110

* refactor: address pr comments

* refactor: track all find options

Author: alenakhineika

packages/compass-query-bar/src/components/option-editor.tsx

@@ -85,6 +85,7 @@ type OptionEditorProps = {
   hasAutofix?: boolean;
   onChange: (value: string) => void;
   onApply?(): void;
+  onBlur?(): void;
   placeholder?: string | HTMLElement;
   schemaFields?: CompletionWithServerInfo[];
   serverVersion?: string;
@@ -99,6 +100,7 @@ const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   hasAutofix,
   onChange,
   onApply,
+  onBlur,
   placeholder,
   schemaFields = [],
   serverVersion = '3.6.0',
@@ -188,6 +190,7 @@ const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
         data-testid={dataTestId}
         onFocus={onFocus}
         onPaste={onPaste}
+        onBlur={onBlur}
       />
       {showInsights && insights && (
         <div className={queryBarEditorOptionInsightsStyles}>

packages/compass-query-bar/src/components/query-ai.spec.tsx

@@ -130,7 +130,7 @@ describe('QueryAI Component', function () {
           expect(screen.queryByTestId(feedbackPopoverTextAreaId)).to.not.exist;
           expect(trackingLogs).to.deep.equal([
             {
-              event: 'AIQuery Feedback',
+              event: 'AI Query Feedback',
               properties: {
                 feedback: 'positive',
                 text: 'this is the query I was looking for',

packages/compass-query-bar/src/components/query-ai.tsx

@@ -18,7 +18,7 @@ const onSubmitFeedback = (feedback: 'positive' | 'negative', text: string) => {
     text,
   });
 
-  track('AIQuery Feedback', () => ({
+  track('AI Query Feedback', () => ({
     feedback,
     text,
   }));

packages/compass-query-bar/src/components/query-option.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import type { Signal } from '@mongodb-js/compass-components';
 import {
   Label,
@@ -16,6 +16,8 @@ import type { QueryOption as QueryOptionType } from '../constants/query-option-d
 import { changeField } from '../stores/query-bar-reducer';
 import type { QueryProperty } from '../constants/query-properties';
 import type { RootState } from '../stores/query-bar-store';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
+const { track } = createLoggerAndTelemetry('COMPASS-QUERY-BAR-UI');
 
 const queryOptionStyles = css({
   display: 'flex',
@@ -117,6 +119,9 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
   insights,
 }) => {
   const darkMode = useDarkMode();
+  const editorInitialValueRef = useRef<string | undefined>(value);
+  const editorCurrentValueRef = useRef<string | undefined>(value);
+  editorCurrentValueRef.current = value;
 
   const optionDefinition = OPTION_DEFINITION[name];
   const isDocumentEditor = optionDefinition.type === 'document';
@@ -131,6 +136,17 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
     [name, onChange]
   );
 
+  const onBlurEditor = useCallback(() => {
+    if (
+      !!editorCurrentValueRef.current &&
+      editorCurrentValueRef.current !== editorInitialValueRef.current &&
+      (editorInitialValueRef.current || editorCurrentValueRef.current !== '{}')
+    ) {
+      track('Query Edited', { option_name: name });
+      editorInitialValueRef.current = editorCurrentValueRef.current;
+    }
+  }, [name, editorInitialValueRef]);
+
   return (
     <div
       className={cx(
@@ -167,6 +183,7 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
             hasError={hasError}
             id={id}
             onChange={onValueChange}
+            onBlur={onBlurEditor}
             placeholder={placeholder}
             value={value}
             data-testid={`query-bar-option-${name}-input`}
@@ -194,6 +211,7 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
                 onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
                   onValueChange(evt.currentTarget.value)
                 }
+                onBlur={onBlurEditor}
                 placeholder={placeholder as string}
                 {...props}
               />

packages/compass-query-bar/src/modules/change-filter.spec.ts

@@ -102,4 +102,51 @@ describe('changeFilter', function () {
         });
     });
   });
+
+  describe('clearValue', function () {
+    it('should clear a value in the filter state', function () {
+      const filter = { name: 'pineapple' };
+      expect(
+        changeFilter('clearValue', filter, {
+          field: 'name',
+        })
+      ).to.not.have.property('name');
+    });
+  });
+
+  describe('setValue', function () {
+    it('should set a value in the filter state when the field does not exist', function () {
+      expect(
+        changeFilter(
+          'setValue',
+          {},
+          {
+            field: 'name',
+            value: 'strawberry',
+          }
+        )
+      ).to.have.property('name', 'strawberry');
+    });
+
+    it('should unset a new value in the filter state when unsetIfSet arg is sent', function () {
+      const filter = { name: 'strawberry' };
+      expect(
+        changeFilter('setValue', filter, {
+          field: 'name',
+          value: 'strawberry',
+          unsetIfSet: true,
+        })
+      ).to.not.have.property('name');
+    });
+
+    it('should set a new value in the filter state when the field already exists', function () {
+      const filter = { name: 'pineapple' };
+      expect(
+        changeFilter('setValue', filter, {
+          field: 'name',
+          value: 'maracuja',
+        })
+      ).to.have.property('name', 'maracuja');
+    });
+  });
 });

packages/compass-query-bar/src/stores/ai-query-reducer.ts

@@ -12,7 +12,7 @@ import type { QueryFormFields } from '../constants/query-properties';
 import { DEFAULT_FIELD_VALUES } from '../constants/query-bar-store';
 import { openToast } from '@mongodb-js/compass-components';
 
-const { log, mongoLogId } = createLoggerAndTelemetry('AI-QUERY-UI');
+const { log, mongoLogId, track } = createLoggerAndTelemetry('AI-QUERY-UI');
 
 type AIQueryStatus = 'ready' | 'fetching' | 'success';
 
@@ -112,6 +112,11 @@ export const runAIQuery = (
   Promise<void>,
   AIQueryStartedAction | AIQueryFailedAction | AIQuerySucceededAction
 > => {
+  track('AI Prompt Submitted', () => ({
+    editor_view_type: 'find',
+    user_input_length: userInput.length,
+  }));
+
   return async (dispatch, getState, { dataService, atlasService }) => {
     const {
       aiQuery: { aiQueryFetchId: existingFetchId },