fix: track usage of uuid subtype 3 vs 4 COMPASS-9359

Author: paula-stacho

package-lock.json

@@ -1,6 +1,7 @@
 ignores: [
     '@mongodb-js/prettier-config-compass',
     '@mongodb-js/tsconfig-compass',
+    '@mongodb-js/compass-telemetry',
     '@types/chai-dom',
     '@emotion/css',
   ]

packages/compass-components/.depcheckrc

@@ -99,6 +99,7 @@
     "@mongodb-js/prettier-config-compass": "^1.2.8",
     "@mongodb-js/testing-library-compass": "^1.3.0",
     "@mongodb-js/tsconfig-compass": "^1.2.8",
+    "@mongodb-js/compass-telemetry": "^1.7.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",

packages/compass-components/package.json

@@ -8,12 +8,14 @@ import { Icon, Link } from './leafygreen';
 import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme, useDarkMode } from '../hooks/use-theme';
+import type { TrackFunction } from '@mongodb-js/compass-telemetry';
 
-type ValueProps =
+type ValueProps = (
   | {
       [type in keyof TypeCastMap]: { type: type; value: TypeCastMap[type] };
     }[keyof TypeCastMap]
-  | { type: 'DBRef'; value: DBRef };
+  | { type: 'DBRef'; value: DBRef }
+) & { track?: TrackFunction };
 
 function truncate(str: string, length = 70): string {
   const truncated = str.slice(0, length);
@@ -122,6 +124,7 @@ const ObjectIdValue: React.FunctionComponent<PropsByValueType<'ObjectId'>> = ({
 
 const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
   value,
+  track,
 }) => {
   const { stringifiedValue, title, additionalHints } = useMemo(() => {
     if (value.sub_type === Binary.SUBTYPE_ENCRYPTED) {
@@ -144,7 +147,7 @@ const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
     }
     if (value.sub_type === Binary.SUBTYPE_UUID) {
       let uuid: string;
-
+      track?.('UUID Encountered', { subtype: 4 });
       try {
         // Try to get the pretty hex version of the UUID
         uuid = value.toUUID().toString();
@@ -188,6 +191,9 @@ const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
         };
       }
     }
+    if (value.sub_type === Binary.SUBTYPE_UUID_OLD) {
+      track?.('UUID Encountered', { subtype: 3 });
+    }
     return {
       stringifiedValue: `Binary.createFromBase64('${truncate(
         value.toString('base64'),
@@ -374,7 +380,9 @@ const BSONValue: React.FunctionComponent<ValueProps> = (props) => {
     case 'Date':
       return <DateValue value={props.value}></DateValue>;
     case 'Binary':
-      return <BinaryValue value={props.value}></BinaryValue>;
+      return (
+        <BinaryValue value={props.value} track={props.track}></BinaryValue>
+      );
     case 'Int32':
     case 'Double':
       return <NumberValue type={props.type} value={props.value}></NumberValue>;

packages/compass-components/src/components/bson-value.tsx

@@ -15,6 +15,7 @@ import { calculateShowMoreToggleOffset, HadronElement } from './element';
 import { usePrevious } from './use-previous';
 import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
+import type { TrackFunction } from '@mongodb-js/compass-telemetry';
 
 function useHadronDocument(doc: HadronDocumentType) {
   const prevDoc = usePrevious(doc);
@@ -85,13 +86,15 @@ const HadronDocument: React.FunctionComponent<{
   editable?: boolean;
   editing?: boolean;
   onEditStart?: () => void;
+  track?: TrackFunction;
   extraGutterWidth?: number;
 }> = ({
   value: document,
   editable = false,
   editing = false,
   onEditStart,
   extraGutterWidth,
+  track,
 }) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
@@ -148,6 +151,7 @@ const HadronDocument: React.FunctionComponent<{
                       }
                     : undefined
                 }
+                track={track}
                 lineNumberSize={visibleElements.length}
                 onAddElement={(el) => {
                   setAutoFocus({

packages/compass-components/src/components/document-list/document.tsx

@@ -28,6 +28,7 @@ import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
 import VisibleFieldsToggle from './visible-field-toggle';
+import type { TrackFunction } from '@mongodb-js/compass-telemetry';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -414,6 +415,7 @@ export const HadronElement: React.FunctionComponent<{
   editable: boolean;
   editingEnabled: boolean;
   onEditStart?: (id: string, field: 'key' | 'value' | 'type') => void;
+  track?: TrackFunction;
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
   extraGutterWidth?: number;
@@ -422,6 +424,7 @@ export const HadronElement: React.FunctionComponent<{
   editable,
   editingEnabled,
   onEditStart,
+  track,
   lineNumberSize,
   onAddElement,
   extraGutterWidth = 0,
@@ -688,6 +691,7 @@ export const HadronElement: React.FunctionComponent<{
               <BSONValue
                 type={type.value as any}
                 value={value.originalValue}
+                track={track}
               ></BSONValue>
             </div>
           )}

packages/compass-components/src/components/document-list/element.tsx

@@ -8,6 +8,7 @@ import { withPreferences } from 'compass-preferences-model/provider';
 import { documentStyles, documentContentStyles } from './readonly-document';
 import { getInsightsForDocument } from '../utils';
 import type { CrudActions } from '../stores/crud-store';
+import { TelemetryContext } from '@mongodb-js/compass-telemetry/provider';
 
 const documentElementsContainerStyles = css({
   position: 'relative',
@@ -245,12 +246,17 @@ class EditableDocument extends React.Component<
    */
   renderElements() {
     return (
-      <DocumentList.Document
-        value={this.props.doc}
-        editable
-        editing={this.state.editing}
-        onEditStart={this.handleStartEditing.bind(this)}
-      />
+      <TelemetryContext.Consumer>
+        {(track) => (
+          <DocumentList.Document
+            value={this.props.doc}
+            editable
+            editing={this.state.editing}
+            onEditStart={this.handleStartEditing.bind(this)}
+            track={track}
+          />
+        )}
+      </TelemetryContext.Consumer>
     );
   }
 

packages/compass-crud/src/components/editable-document.tsx

@@ -6,6 +6,7 @@ import type { TypeCastMap } from 'hadron-type-checker';
 import { withPreferences } from 'compass-preferences-model/provider';
 import { getInsightsForDocument } from '../utils';
 import { DocumentEvents } from 'hadron-document';
+import { TelemetryContext } from '@mongodb-js/compass-telemetry/provider';
 type BSONObject = TypeCastMap['Object'];
 
 export const documentStyles = css({
@@ -132,11 +133,18 @@ class ReadonlyDocument extends React.Component<
    */
   renderElements() {
     return (
-      <DocumentList.Document
-        value={this.props.doc}
-        // Provide extra whitespace for the expand button
-        extraGutterWidth={spacing[900]}
-      />
+      <TelemetryContext.Consumer>
+        {(track) => (
+          <>
+            <DocumentList.Document
+              value={this.props.doc}
+              // Provide extra whitespace for the expand button
+              extraGutterWidth={spacing[900]}
+              track={track}
+            />
+          </>
+        )}
+      </TelemetryContext.Consumer>
     );
   }
 

packages/compass-crud/src/components/readonly-document.tsx

@@ -833,6 +833,7 @@ class CrudStoreImpl
    * @param {Number} page - The page that is being shown.
    */
   async getPage(page: number) {
+    console.log('getPage');
     const { ns, status, docsPerPage } = this.state;
 
     if (page < 0) {
@@ -1560,6 +1561,7 @@ class CrudStoreImpl
    * This function is called when the collection filter changes.
    */
   async refreshDocuments(onApply = false) {
+    console.log('refreshDocuments');
     if (this.dataService && !this.dataService.isConnected()) {
       this.logger.log.warn(
         mongoLogId(1_001_000_072),

packages/compass-crud/src/stores/crud-store.ts

@@ -2694,6 +2694,13 @@ type CreateIndexButtonClickedEvent = CommonEvent<{
   };
 }>;
 
+type UUIDEncounteredEvent = CommonEvent<{
+  name: 'UUID Encountered';
+  payload: {
+    subtype: 3 | 4;
+  };
+}>;
+
 export type TelemetryEvent =
   | AggregationCanceledEvent
   | AggregationCopiedEvent
@@ -2816,4 +2823,5 @@ export type TelemetryEvent =
   | CumulativeLayoutShiftEvent
   | TimeToFirstByteEvent
   | ExperimentViewedEvent
-  | CreateIndexButtonClickedEvent;
+  | CreateIndexButtonClickedEvent
+  | UUIDEncounteredEvent;