fix(compass-collection): Fix misfiring Mock Data Generator Screen Viewed analytics event – CLOUDP-355779 (#7523)

* WIP

* Replace with useTrackOnChange

Author: jcobis

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx

@@ -1447,6 +1447,16 @@ describe('MockDataGeneratorModal', () => {
           }
         );
       });
+
+      it('does not fire a track event when the modal is closed', async () => {
+        const result = await renderModal({ currentStep, isOpen: false });
+        expect(result.track).to.not.have.been.calledWith(
+          'Mock Data Generator Screen Viewed',
+          {
+            screen: currentStep,
+          }
+        );
+      });
     });
   });
 });

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 
 import {
@@ -33,7 +33,10 @@ import FakerSchemaEditorScreen from './faker-schema-editor-screen';
 import ScriptScreen from './script-screen';
 import DocumentCountScreen from './document-count-screen';
 import PreviewScreen from './preview-screen';
-import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import {
+  useTelemetry,
+  useTrackOnChange,
+} from '@mongodb-js/compass-telemetry/provider';
 import {
   useIsAIFeatureEnabled,
   usePreference,
@@ -125,11 +128,16 @@ const MockDataGeneratorModal = ({
     onNextStep,
   ]);
 
-  useEffect(() => {
-    track('Mock Data Generator Screen Viewed', {
-      screen: currentStep,
-    });
-  }, [currentStep, track]);
+  useTrackOnChange(
+    (track) => {
+      if (isOpen) {
+        track('Mock Data Generator Screen Viewed', {
+          screen: currentStep,
+        });
+      }
+    },
+    [currentStep, isOpen]
+  );
 
   const isDocumentCountInvalid = !validateDocumentCount(documentCount).isValid;