fix: complete field telemetry events COMPASS-10066 (#7563)

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -161,17 +161,30 @@ const DiagramContent: React.FunctionComponent<{
   model: StaticModel | null;
   isInRelationshipDrawingMode: boolean;
   newCollection?: string;
-  onAddFieldToObjectField: (ns: string, parentPath: string[]) => void;
-  onAddNewFieldToCollection: (ns: string) => void;
+  onAddFieldToObjectField: (
+    ns: string,
+    parentPath: string[],
+    source: 'side_panel' | 'diagram'
+  ) => void;
+  onAddNewFieldToCollection: (
+    ns: string,
+    source: 'side_panel' | 'diagram'
+  ) => void;
   onMoveCollection: (ns: string, newPosition: [number, number]) => void;
   onCollectionSelect: (namespace: string) => void;
   onRelationshipSelect: (rId: string) => void;
   onFieldSelect: (namespace: string, fieldPath: FieldPath) => void;
-  onRenameField: (
-    namespace: string,
-    fieldPath: FieldPath,
-    newName: string
-  ) => void;
+  onRenameField: ({
+    ns,
+    field,
+    newName,
+    source,
+  }: {
+    ns: string;
+    field: FieldPath;
+    newName: string;
+    source: 'diagram';
+  }) => void;
   onDiagramBackgroundClicked: () => void;
   onDeleteCollection: (ns: string) => void;
   onDeleteRelationship: (rId: string) => void;
@@ -389,14 +402,14 @@ const DiagramContent: React.FunctionComponent<{
   const onClickAddFieldToCollection = useCallback(
     (event: React.MouseEvent<Element>, ns: string) => {
       event.stopPropagation();
-      onAddNewFieldToCollection(ns);
+      onAddNewFieldToCollection(ns, 'diagram');
     },
     [onAddNewFieldToCollection]
   );
 
   const onClickAddFieldToObjectField = useCallback(
     (event: React.MouseEvent, nodeId: string, parentPath: string[]) => {
-      onAddFieldToObjectField(nodeId, parentPath);
+      onAddFieldToObjectField(nodeId, parentPath, 'diagram');
     },
     [onAddFieldToObjectField]
   );
@@ -448,7 +461,8 @@ const DiagramContent: React.FunctionComponent<{
         onPaneClick,
         onEdgeClick,
         onFieldClick,
-        onFieldNameChange: onRenameField,
+        onFieldNameChange: (ns, field, newName) =>
+          onRenameField({ ns, field, newName, source: 'diagram' }),
         onNodeDragStop,
         onConnect,
         onNodeExpandToggle: isCollapseFlagEnabled

packages/compass-data-modeling/src/components/drawer/field-drawer-content.tsx

@@ -49,21 +49,29 @@ type FieldDrawerContentProps = {
   }) => void;
   onEditRelationshipClick: (rId: string) => void;
   onDeleteRelationshipClick: (rId: string) => void;
-  onRenameField: (
-    namespace: string,
-    fromFieldPath: FieldPath,
-    newName: string
-  ) => void;
+  onRenameField: ({
+    ns,
+    field,
+    newName,
+    source,
+  }: {
+    ns: string;
+    field: FieldPath;
+    newName: string;
+    source: 'side_panel' | 'diagram';
+  }) => void;
   onChangeFieldType: ({
     ns,
     fieldPath,
     oldTypes,
     newTypes,
+    source,
   }: {
     ns: string;
     fieldPath: FieldPath;
     oldTypes: string[];
     newTypes: string[];
+    source: 'side_panel' | 'diagram';
   }) => void;
 };
 
@@ -138,7 +146,12 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
       if (!isFieldNameValid) {
         return;
       }
-      onRenameField(namespace, fieldPath, trimmedName);
+      onRenameField({
+        ns: namespace,
+        field: fieldPath,
+        newName: trimmedName,
+        source: 'side_panel',
+      });
     }
   );
 
@@ -160,6 +173,7 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
       fieldPath,
       oldTypes: fieldTypes,
       newTypes,
+      source: 'side_panel',
     });
   };
 

packages/compass-data-modeling/src/store/diagram.ts

@@ -507,9 +507,10 @@ export function redoEdit(): DataModelingThunkAction<void, RedoEditAction> {
 
 export function onAddNestedField(
   ns: string,
-  parentFieldPath: string[]
+  parentFieldPath: string[],
+  source: 'side_panel' | 'diagram'
 ): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
-  return (dispatch, getState) => {
+  return (dispatch, getState, { track }) => {
     const modelState = selectCurrentModelFromState(getState());
 
     const collection = modelState.collections.find((c) => c.ns === ns);
@@ -533,14 +534,19 @@ export function onAddNestedField(
       },
     };
 
+    track('Data Modeling Field Added', {
+      source,
+    });
+
     return dispatch(applyEdit(edit));
   };
 }
 
 export function addNewFieldToCollection(
-  ns: string
+  ns: string,
+  source: 'side_panel' | 'diagram'
 ): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
-  return (dispatch, getState) => {
+  return (dispatch, getState, { track }) => {
     const modelState = selectCurrentModelFromState(getState());
 
     const collection = modelState.collections.find((c) => c.ns === ns);
@@ -561,6 +567,10 @@ export function addNewFieldToCollection(
       },
     };
 
+    track('Data Modeling Field Added', {
+      source,
+    });
+
     return dispatch(applyEdit(edit));
   };
 }
@@ -791,14 +801,20 @@ export function removeField(
   };
 }
 
-export function renameField(
-  ns: string,
-  field: FieldPath,
-  newName: string
-): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
+export function renameField({
+  ns,
+  field,
+  newName,
+  source,
+}: {
+  ns: string;
+  field: FieldPath;
+  newName: string;
+  source: 'side_panel' | 'diagram';
+}): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
   return (dispatch, getState, { track }) => {
     track('Data Modeling Field Renamed', {
-      source: 'side_panel',
+      source,
     });
 
     dispatch(applyEdit({ type: 'RenameField', ns, field, newName }));
@@ -832,11 +848,13 @@ export function changeFieldType({
   fieldPath,
   oldTypes,
   newTypes,
+  source,
 }: {
   ns: string;
   fieldPath: FieldPath;
   oldTypes: string[];
   newTypes: string[];
+  source: 'side_panel' | 'diagram';
 }): DataModelingThunkAction<void, ApplyEditAction | RevertFailedEditAction> {
   return (dispatch, getState, { track }) => {
     const collectionSchema = selectCurrentModelFromState(
@@ -851,7 +869,7 @@ export function changeFieldType({
     const to = getSchemaWithNewTypes(field.jsonSchema, newTypes);
 
     track('Data Modeling Field Type Changed', {
-      source: 'side_panel',
+      source,
       from: getTypeNameForTelemetry(oldTypes),
       to: getTypeNameForTelemetry(newTypes),
     });

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

@@ -2970,6 +2970,18 @@ type DataModelingDiagramFieldRemoved = CommonEvent<{
   };
 }>;
 
+/**
+ * This event is fired when user adds a field in a data modeling diagram.
+ *
+ * @category Data Modeling
+ */
+type DataModelingDiagramFieldAdded = CommonEvent<{
+  name: 'Data Modeling Field Added';
+  payload: {
+    source: 'side_panel' | 'diagram';
+  };
+}>;
+
 /**
  * This event is fired when user renames a field in a data modeling diagram.
  *
@@ -2978,7 +2990,7 @@ type DataModelingDiagramFieldRemoved = CommonEvent<{
 type DataModelingDiagramFieldRenamed = CommonEvent<{
   name: 'Data Modeling Field Renamed';
   payload: {
-    source: 'side_panel';
+    source: 'side_panel' | 'diagram';
   };
 }>;
 
@@ -2990,7 +3002,7 @@ type DataModelingDiagramFieldRenamed = CommonEvent<{
 type DataModelingDiagramFieldTypeChanged = CommonEvent<{
   name: 'Data Modeling Field Type Changed';
   payload: {
-    source: 'side_panel';
+    source: 'side_panel' | 'diagram';
     from?: string;
     to?: string;
   };
@@ -3288,6 +3300,7 @@ export type TelemetryEvent =
   | DataModelingDiagramCollectionRenamed
   | DataModelingDiagramCreated
   | DataModelingDiagramExported
+  | DataModelingDiagramFieldAdded
   | DataModelingDiagramFieldRemoved
   | DataModelingDiagramFieldRenamed
   | DataModelingDiagramFieldTypeChanged