chore: Added telemetry to watch tab

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WatchTab/WatchTabContent.tsx

@@ -40,6 +40,7 @@ import {
   webChatTrafficState,
 } from '../../../../../recoilModel';
 import { WatchVariablePicker } from '../../WatchVariablePicker/WatchVariablePicker';
+import TelemetryClient from '../../../../../telemetry/TelemetryClient';
 
 import { WatchTabObjectValue } from './WatchTabObjectValue';
 
@@ -278,6 +279,10 @@ export const WatchTabContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive }
     if (selectedVariables?.length) {
       selectedVariables.map((item: IObjectWithKey) => {
         delete updatedUncommitted[item.key as string];
+        if (updatedCommitted[item.key as string]) {
+          // track only when we remove a property that is actually being watched
+          TelemetryClient.track('StateWatchPropertyRemoved', { property: updatedCommitted[item.key as string] });
+        }
         delete updatedCommitted[item.key as string];
       });
     }

Composer/packages/client/src/pages/design/DebugPanel/WatchVariablePicker/WatchVariablePicker.tsx

@@ -23,6 +23,7 @@ import {
   userSettingsState,
   watchedVariablesState,
 } from '../../../../recoilModel';
+import TelemetryClient from '../../../../telemetry/TelemetryClient';
 
 import { PropertyItem } from './utils/components/PropertyTreeItem';
 import { computePropertyItemTree, getAllNodes, WatchDataPayload } from './utils/helpers';
@@ -135,6 +136,7 @@ export const WatchVariablePicker = React.memo((props: WatchVariablePickerProps)
           setQuery(path);
           event?.preventDefault();
           setErrorMessage('');
+          TelemetryClient.track('StateWatchPropertyAdded', { property: path });
           setWatchedVariables(currentProjectId, { ...watchedVariables, [variableId]: path });
           onHideContextualMenu();
         }
@@ -165,6 +167,7 @@ export const WatchVariablePicker = React.memo((props: WatchVariablePickerProps)
         event?.preventDefault();
         const path = paths[node.id];
         setErrorMessage('');
+        TelemetryClient.track('StateWatchPropertyAdded', { property: path });
         setWatchedVariables(currentProjectId, { ...watchedVariables, [variableId]: path });
         onHideContextualMenu();
       },
@@ -222,6 +225,7 @@ export const WatchVariablePicker = React.memo((props: WatchVariablePickerProps)
         } else {
           // watch the variable
           setErrorMessage('');
+          TelemetryClient.track('StateWatchPropertyAdded', { property: query });
           setWatchedVariables(currentProjectId, { ...watchedVariables, [variableId]: query });
           onHideContextualMenu();
           inputBoxElementRef.current?.blur();

Composer/packages/types/src/telemetry.ts

@@ -197,6 +197,11 @@ type WebChatEvents = {
   SaveTranscriptClicked: undefined;
 };
 
+type DebuggingEvents = {
+  StateWatchPropertyAdded: { property: string };
+  StateWatchPropertyRemoved: { property: string };
+};
+
 type ABSChannelsEvents = {
   ConnectionsAddNewProfile: undefined;
   ConnectionsChannelStatusDisplayed: { teams: boolean; speech: boolean; webchat: boolean };
@@ -260,7 +265,8 @@ export type TelemetryEvents = ApplicationEvents &
   OrchestratorEvents &
   PropertyEditorEvents &
   CreationEvents &
-  SurveyEvents;
+  SurveyEvents &
+  DebuggingEvents;
 
 export type TelemetryEventName = keyof TelemetryEvents;