use callback

Author: paula-stacho

package-lock.json

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

packages/compass-components/.depcheckrc

@@ -99,7 +99,6 @@
     "@mongodb-js/prettier-config-compass": "^1.2.8",
     "@mongodb-js/testing-library-compass": "^1.3.1",
     "@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,14 +8,13 @@ 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 in keyof TypeCastMap]: { type: type; value: TypeCastMap[type] };
     }[keyof TypeCastMap]
   | { type: 'DBRef'; value: DBRef }
-) & { track?: TrackFunction };
+) & { onUUIDEncountered?: (subtype: 3 | 4) => void };
 
 function truncate(str: string, length = 70): string {
   const truncated = str.slice(0, length);
@@ -124,7 +123,7 @@ const ObjectIdValue: React.FunctionComponent<PropsByValueType<'ObjectId'>> = ({
 
 const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
   value,
-  track,
+  onUUIDEncountered,
 }) => {
   const { stringifiedValue, title, additionalHints } = useMemo(() => {
     if (value.sub_type === Binary.SUBTYPE_ENCRYPTED) {
@@ -147,7 +146,7 @@ const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
     }
     if (value.sub_type === Binary.SUBTYPE_UUID) {
       let uuid: string;
-      track?.('UUID Encountered', { subtype: 4 });
+      onUUIDEncountered?.(4);
       try {
         // Try to get the pretty hex version of the UUID
         uuid = value.toUUID().toString();
@@ -192,7 +191,7 @@ const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
       }
     }
     if (value.sub_type === Binary.SUBTYPE_UUID_OLD) {
-      track?.('UUID Encountered', { subtype: 3 });
+      onUUIDEncountered?.(3);
     }
     return {
       stringifiedValue: `Binary.createFromBase64('${truncate(
@@ -381,7 +380,10 @@ const BSONValue: React.FunctionComponent<ValueProps> = (props) => {
       return <DateValue value={props.value}></DateValue>;
     case 'Binary':
       return (
-        <BinaryValue value={props.value} track={props.track}></BinaryValue>
+        <BinaryValue
+          value={props.value}
+          onUUIDEncountered={props.onUUIDEncountered}
+        ></BinaryValue>
       );
     case 'Int32':
     case 'Double':

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

@@ -15,7 +15,6 @@ 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);
@@ -86,15 +85,15 @@ const HadronDocument: React.FunctionComponent<{
   editable?: boolean;
   editing?: boolean;
   onEditStart?: () => void;
-  track?: TrackFunction;
+  onUUIDEncountered?: (subtype: 3 | 4) => void;
   extraGutterWidth?: number;
 }> = ({
   value: document,
   editable = false,
   editing = false,
   onEditStart,
   extraGutterWidth,
-  track,
+  onUUIDEncountered,
 }) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
@@ -151,7 +150,7 @@ const HadronDocument: React.FunctionComponent<{
                       }
                     : undefined
                 }
-                track={track}
+                onUUIDEncountered={onUUIDEncountered}
                 lineNumberSize={visibleElements.length}
                 onAddElement={(el) => {
                   setAutoFocus({

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

@@ -28,7 +28,6 @@ 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) {
@@ -415,7 +414,7 @@ export const HadronElement: React.FunctionComponent<{
   editable: boolean;
   editingEnabled: boolean;
   onEditStart?: (id: string, field: 'key' | 'value' | 'type') => void;
-  track?: TrackFunction;
+  onUUIDEncountered?: (subtype: 3 | 4) => void;
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
   extraGutterWidth?: number;
@@ -424,7 +423,7 @@ export const HadronElement: React.FunctionComponent<{
   editable,
   editingEnabled,
   onEditStart,
-  track,
+  onUUIDEncountered,
   lineNumberSize,
   onAddElement,
   extraGutterWidth = 0,
@@ -691,7 +690,7 @@ export const HadronElement: React.FunctionComponent<{
               <BSONValue
                 type={type.value as any}
                 value={value.originalValue}
-                track={track}
+                onUUIDEncountered={onUUIDEncountered}
               ></BSONValue>
             </div>
           )}

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

@@ -253,7 +253,11 @@ class EditableDocument extends React.Component<
             editable
             editing={this.state.editing}
             onEditStart={this.handleStartEditing.bind(this)}
-            track={track}
+            onUUIDEncountered={(subtype: 3 | 4) => {
+              track('UUID Encountered', {
+                subtype,
+              });
+            }}
           />
         )}
       </TelemetryContext.Consumer>

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

@@ -140,7 +140,11 @@ class ReadonlyDocument extends React.Component<
               value={this.props.doc}
               // Provide extra whitespace for the expand button
               extraGutterWidth={spacing[900]}
-              track={track}
+              onUUIDEncountered={(subtype: 3 | 4) => {
+                track('UUID Encountered', {
+                  subtype,
+                });
+              }}
             />
           </>
         )}