feat(compass-collection): manage faker mapping request state in redux CLOUDP-333850

packages/compass-collection/package.json

@@ -55,9 +55,11 @@
     "@mongodb-js/compass-generative-ai": "^0.51.0",
     "@mongodb-js/compass-logging": "^1.7.12",
     "@mongodb-js/compass-telemetry": "^1.14.0",
+    "@mongodb-js/compass-utils": "^0.9.11",
     "@mongodb-js/compass-workspaces": "^0.52.0",
     "@mongodb-js/connection-info": "^0.17.2",
     "@mongodb-js/mongodb-constants": "^0.14.0",
+    "bson": "^6.10.1",
     "compass-preferences-model": "^2.51.0",
     "hadron-document": "^8.9.6",
     "mongodb": "^6.19.0",
@@ -67,8 +69,7 @@
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
-    "redux-thunk": "^2.4.2",
-    "bson": "^6.10.1"
+    "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
     "@mongodb-js/eslint-config-compass": "^1.4.7",

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+// TODO: More to come from CLOUDP-333853, CLOUDP-333854
+const FakerSchemaEditor = () => {
+  return (
+    <div data-testid="faker-schema-editor">
+      Schema Editor Content Placeholder
+    </div>
+  );
+};
+
+export default FakerSchemaEditor;

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

@@ -1,82 +1,239 @@
 import { expect } from 'chai';
 import React from 'react';
-import { render, screen } from '@mongodb-js/testing-library-compass';
-import Sinon from 'sinon';
-import { UnconnectedMockDataGeneratorModal as MockDataGeneratorModal } from './mock-data-generator-modal';
+import {
+  screen,
+  render,
+  waitFor,
+  userEvent,
+} from '@mongodb-js/testing-library-compass';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import MockDataGeneratorModal from './mock-data-generator-modal';
 import { MockDataGeneratorStep } from './types';
 import { StepButtonLabelMap } from './constants';
+import type { CollectionState } from '../../modules/collection-tab';
+import { default as collectionTabReducer } from '../../modules/collection-tab';
 
 describe('MockDataGeneratorModal', () => {
-  const sandbox = Sinon.createSandbox();
-  let onClose: Sinon.SinonSpy;
-
-  beforeEach(() => {
-    onClose = sandbox.spy();
-  });
-
-  afterEach(() => {
-    sandbox.restore();
-  });
-
-  const onNextStep = Sinon.stub();
-  const onPreviousStep = Sinon.stub();
-
   function renderModal({
     isOpen = true,
     currentStep = MockDataGeneratorStep.SCHEMA_CONFIRMATION,
+    mockServices = createMockServices(),
   } = {}) {
+    const initialState: CollectionState = {
+      workspaceTabId: 'test-workspace-tab-id',
+      namespace: 'test.collection',
+      metadata: null,
+      schemaAnalysis: {
+        status: 'complete',
+        processedSchema: {
+          name: {
+            type: 'String',
+            probability: 1.0,
+            sample_values: ['John', 'Jane'],
+          },
+        },
+        sampleDocument: { name: 'John' },
+        schemaMetadata: { maxNestingDepth: 1, validationRules: null },
+      },
+      fakerSchemaGeneration: {
+        status: 'idle',
+      },
+      mockDataGenerator: {
+        isModalOpen: isOpen,
+        currentStep: currentStep,
+      },
+    };
+
+    const store = createStore(
+      collectionTabReducer,
+      initialState,
+      applyMiddleware(thunk.withExtraArgument(mockServices))
+    );
+
     return render(
-      <MockDataGeneratorModal
-        isOpen={isOpen}
-        onClose={onClose}
-        currentStep={currentStep}
-        onNextStep={onNextStep}
-        onPreviousStep={onPreviousStep}
-      />
+      <Provider store={store}>
+        <MockDataGeneratorModal />
+      </Provider>
     );
   }
 
-  it('renders the modal when isOpen is true', () => {
-    renderModal();
+  function createMockServices() {
+    return {
+      dataService: {},
+      atlasAiService: {
+        getMockDataSchema: () => {
+          return Promise.resolve({
+            contents: {
+              fields: [],
+            },
+          });
+        },
+      },
+      workspaces: {},
+      localAppRegistry: {},
+      experimentationServices: {},
+      connectionInfoRef: { current: {} },
+      logger: {
+        log: {
+          warn: () => {},
+          error: () => {},
+        },
+        debug: () => {},
+        mongoLogId: () => 'mock-id',
+      },
+      preferences: { getPreferences: () => ({}) },
+      fakerSchemaGenerationAbortControllerRef: { current: undefined },
+    };
+  }
 
-    expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
-  });
+  describe('generally', () => {
+    it('renders the modal when isOpen is true', () => {
+      renderModal();
 
-  it('does not render the modal when isOpen is false', () => {
-    renderModal({ isOpen: false });
+      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+    });
 
-    expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
-  });
+    it('does not render the modal when isOpen is false', () => {
+      renderModal({ isOpen: false });
 
-  it('calls onClose when the modal is closed', () => {
-    renderModal();
+      expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
+    });
 
-    screen.getByLabelText('Close modal').click();
+    it('closes the modal when the close button is clicked', async () => {
+      renderModal();
 
-    expect(onClose.calledOnce).to.be.true;
-  });
+      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      userEvent.click(screen.getByLabelText('Close modal'));
+      await waitFor(
+        () =>
+          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+      );
+    });
 
-  it('calls onClose when the cancel button is clicked', () => {
-    renderModal();
+    it('closes the modal when the cancel button is clicked', async () => {
+      renderModal();
 
-    screen.getByText('Cancel').click();
+      expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+      userEvent.click(screen.getByText('Cancel'));
+      await waitFor(
+        () =>
+          expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist
+      );
+    });
+
+    function createMockServicesWithSlowAiRequest() {
+      let abortSignalReceived = false;
+      let rejectPromise: (reason?: any) => void;
+      const rejectedPromise = new Promise((_resolve, reject) => {
+        rejectPromise = reject;
+      });
+
+      const baseMockServices = createMockServices();
+
+      const mockAiService = {
+        ...baseMockServices.atlasAiService,
+        getMockDataSchema: (request: any) => {
+          if (request?.signal) {
+            request.signal.addEventListener('abort', () => {
+              abortSignalReceived = true;
+              rejectPromise(new Error('Request aborted'));
+            });
+          }
+          return rejectedPromise;
+        },
+        getAbortSignalReceived: () => abortSignalReceived,
+      };
+
+      return {
+        ...baseMockServices,
+        atlasAiService: mockAiService,
+      };
+    }
+
+    it('cancels in-flight faker mapping requests when the cancel button is clicked', async () => {
+      const mockServices = createMockServicesWithSlowAiRequest();
+      renderModal({ mockServices: mockServices as any });
+
+      expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
+      userEvent.click(screen.getByText('Confirm'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('faker-schema-editor')).to.exist;
+      });
 
-    expect(onClose.calledOnce).to.be.true;
+      userEvent.click(screen.getByText('Cancel'));
+
+      expect(mockServices.atlasAiService.getAbortSignalReceived()).to.be.true;
+    });
+
+    it('cancels in-flight faker mapping requests when the back button is clicked', async () => {
+      const mockServices = createMockServicesWithSlowAiRequest();
+      renderModal({ mockServices: mockServices as any });
+
+      expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
+      userEvent.click(screen.getByText('Confirm'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('faker-schema-editor')).to.exist;
+      });
+
+      userEvent.click(screen.getByText('Back'));
+
+      expect(mockServices.atlasAiService.getAbortSignalReceived()).to.be.true;
+    });
   });
 
-  it('disables the Back button on the first step', () => {
-    renderModal();
+  describe('on the schema confirmation step', () => {
+    it('disables the Back button', () => {
+      renderModal();
+
+      expect(
+        screen
+          .getByRole('button', { name: 'Back' })
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+    });
+
+    it('renders the faker schema editor when the confirm button is clicked', async () => {
+      renderModal();
+
+      expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
+      expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
+      userEvent.click(screen.getByText('Confirm'));
+      await waitFor(() => {
+        expect(screen.queryByTestId('raw-schema-confirmation')).to.not.exist;
+        expect(screen.getByTestId('faker-schema-editor')).to.exist;
+      });
+    });
+
+    it('stays on the current step when an error is encountered during faker schema generation', async () => {
+      const mockServices = createMockServices();
+      mockServices.atlasAiService.getMockDataSchema = () =>
+        Promise.reject('faker schema generation failed');
+      renderModal({ mockServices });
+
+      expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
+      expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
+      userEvent.click(screen.getByText('Confirm'));
+      await waitFor(() => {
+        expect(screen.getByTestId('raw-schema-confirmation')).to.exist;
+        expect(screen.queryByTestId('faker-schema-editor')).to.not.exist;
+      });
+
+      // todo: assert a user-friendly error is displayed (CLOUDP-333852)
+    });
 
-    expect(
-      screen.getByRole('button', { name: 'Back' }).getAttribute('aria-disabled')
-    ).to.equal('true');
+    // todo: assert that closing then re-opening the modal after an LLM err removes the err message
   });
 
   describe('when rendering the modal in a specific step', () => {
     const steps = Object.keys(
       StepButtonLabelMap
     ) as unknown as MockDataGeneratorStep[];
 
+    // note: these tests can be removed after every modal step is implemented
     steps.forEach((currentStep) => {
       it(`renders the button with the correct label when the user is in step "${currentStep}"`, () => {
         renderModal({ currentStep });