Address comments

Author: jcobis

packages/compass-collection/src/components/collection-header/collection-header.spec.tsx

@@ -2,41 +2,48 @@ import { expect } from 'chai';
 import type { ComponentProps } from 'react';
 import React from 'react';
 import {
-  render,
+  renderWithConnections,
   screen,
   cleanup,
   within,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
-import { UnconnectedCollectionHeader as CollectionHeader } from './collection-header';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import CollectionHeader from './collection-header';
 import {
   WorkspacesServiceProvider,
   type WorkspacesService,
 } from '@mongodb-js/compass-workspaces/provider';
 import { MockDataGeneratorStep } from '../mock-data-generator-modal/types';
+
 import Sinon from 'sinon';
 
 function renderCollectionHeader(
   props: Partial<ComponentProps<typeof CollectionHeader>> = {},
   workspaceService: Partial<WorkspacesService> = {}
 ) {
-  return render(
-    <WorkspacesServiceProvider value={workspaceService as WorkspacesService}>
-      <CollectionHeader
-        isAtlas={false}
-        isReadonly={false}
-        isTimeSeries={false}
-        isClustered={false}
-        isFLE={false}
-        namespace="test.test"
-        isMockDataModalOpen={false}
-        currentStep={MockDataGeneratorStep.AI_DISCLAIMER}
-        onOpenMockDataModal={() => {}}
-        onCloseMockDataModal={() => {}}
-        onSetMockDataGeneratorStep={() => {}}
-        {...props}
-      />
-    </WorkspacesServiceProvider>
+  const mockStore = createStore(() => ({
+    mockDataGenerator: {
+      isModalOpen: false,
+      currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+    },
+  }));
+
+  return renderWithConnections(
+    <Provider store={mockStore}>
+      <WorkspacesServiceProvider value={workspaceService as WorkspacesService}>
+        <CollectionHeader
+          isAtlas={false}
+          isReadonly={false}
+          isTimeSeries={false}
+          isClustered={false}
+          isFLE={false}
+          namespace="test.test"
+          {...props}
+        />
+      </WorkspacesServiceProvider>
+    </Provider>
   );
 }
 
@@ -287,34 +294,4 @@ describe('CollectionHeader [Component]', function () {
       });
     });
   });
-
-  context('Mock Data Generator Modal', function () {
-    it('should close modal when cancel button is clicked', function () {
-      const onCloseMockDataModal = Sinon.stub();
-
-      renderCollectionHeader({
-        isMockDataModalOpen: true,
-        onCloseMockDataModal,
-      });
-
-      const cancelButton = screen.getByText('Cancel');
-      userEvent.click(cancelButton);
-
-      expect(onCloseMockDataModal).to.have.been.calledOnce;
-    });
-
-    it('should close modal when X button is clicked', function () {
-      const onCloseMockDataModal = Sinon.stub();
-
-      renderCollectionHeader({
-        isMockDataModalOpen: true,
-        onCloseMockDataModal,
-      });
-
-      const closeButton = screen.getByLabelText('Close modal');
-      userEvent.click(closeButton);
-
-      expect(onCloseMockDataModal).to.have.been.calledOnce;
-    });
-  });
 });

packages/compass-collection/src/components/collection-header/collection-header.tsx

@@ -19,14 +19,8 @@ import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { getConnectionTitle } from '@mongodb-js/connection-info';
 import MockDataGeneratorModal from '../mock-data-generator-modal/mock-data-generator-modal';
-import type { MockDataGeneratorStep } from '../mock-data-generator-modal/types';
 import { connect } from 'react-redux';
-import type { CollectionState } from '../../modules/collection-tab';
-import {
-  mockDataGeneratorModalOpened,
-  mockDataGeneratorModalClosed,
-  mockDataGeneratorStepChanged,
-} from '../../modules/collection-tab';
+import { mockDataGeneratorModalOpened } from '../../modules/collection-tab';
 
 const collectionHeaderStyles = css({
   padding: spacing[400],
@@ -67,11 +61,7 @@ type CollectionHeaderProps = {
   sourceName?: string;
   editViewName?: string;
   sourcePipeline?: unknown[];
-  isMockDataModalOpen: boolean;
-  currentStep: MockDataGeneratorStep;
   onOpenMockDataModal: () => void;
-  onCloseMockDataModal: () => void;
-  onSetMockDataGeneratorStep: (step: MockDataGeneratorStep) => void;
 };
 
 const getInsightsForPipeline = (pipeline: any[], isAtlas: boolean) => {
@@ -106,11 +96,7 @@ const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
   sourceName,
   editViewName,
   sourcePipeline,
-  isMockDataModalOpen,
-  currentStep,
   onOpenMockDataModal,
-  onCloseMockDataModal,
-  onSetMockDataGeneratorStep,
 }) => {
   const darkMode = useDarkMode();
   const showInsights = usePreference('showInsights');
@@ -190,37 +176,13 @@ const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
           onOpenMockDataModal={onOpenMockDataModal}
         />
       </div>
-      <MockDataGeneratorModal
-        isOpen={isMockDataModalOpen}
-        onClose={onCloseMockDataModal}
-        currentStep={currentStep}
-        onCurrentStepChange={onSetMockDataGeneratorStep}
-      />
+      <MockDataGeneratorModal />
     </div>
   );
 };
 
-const mapStateToProps = (state: CollectionState) => ({
-  isMockDataModalOpen: state.mockDataGenerator.isModalOpen,
-  currentStep: state.mockDataGenerator.currentStep,
-});
-
-type ConnectedCollectionHeaderProps = Omit<
-  CollectionHeaderProps,
-  | 'isMockDataModalOpen'
-  | 'currentStep'
-  | 'onOpenMockDataModal'
-  | 'onCloseMockDataModal'
-  | 'onSetMockDataGeneratorStep'
->;
-
-const ConnectedCollectionHeader = connect(mapStateToProps, {
+const ConnectedCollectionHeader = connect(undefined, {
   onOpenMockDataModal: mockDataGeneratorModalOpened,
-  onCloseMockDataModal: mockDataGeneratorModalClosed,
-  onSetMockDataGeneratorStep: mockDataGeneratorStepChanged,
-})(CollectionHeader) as React.ComponentType<ConnectedCollectionHeaderProps>;
+})(CollectionHeader);
 
-export {
-  ConnectedCollectionHeader as CollectionHeader,
-  CollectionHeader as UnconnectedCollectionHeader, // For tests
-};
+export default ConnectedCollectionHeader;

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

@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import React from 'react';
 import { render, screen } from '@mongodb-js/testing-library-compass';
 import Sinon from 'sinon';
-import MockDataGeneratorModal from './mock-data-generator-modal';
+import { UnconnectedMockDataGeneratorModal as MockDataGeneratorModal } from './mock-data-generator-modal';
 import { MockDataGeneratorStep } from './types';
 import { StepButtonLabelMap } from './constants';
 
@@ -18,25 +18,22 @@ describe('MockDataGeneratorModal', () => {
     sandbox.restore();
   });
 
+  const onNextStep = Sinon.stub();
+  const onPreviousStep = Sinon.stub();
+
   function renderModal({
     isOpen = true,
     currentStep = MockDataGeneratorStep.AI_DISCLAIMER,
   } = {}) {
-    function MockDataGeneratorModalWrapper() {
-      const [currentStepStateMock, onCurrentStepChangeStateMock] =
-        React.useState<MockDataGeneratorStep>(currentStep);
-      return (
-        <MockDataGeneratorModal
-          isOpen={isOpen}
-          onClose={onClose}
-          currentStep={currentStepStateMock}
-          onCurrentStepChange={(step) => {
-            onCurrentStepChangeStateMock(step);
-          }}
-        />
-      );
-    }
-    return render(<MockDataGeneratorModalWrapper />);
+    return render(
+      <MockDataGeneratorModal
+        isOpen={isOpen}
+        onClose={onClose}
+        currentStep={currentStep}
+        onNextStep={onNextStep}
+        onPreviousStep={onPreviousStep}
+      />
+    );
   }
 
   it('renders the modal when isOpen is true', () => {

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
 import {
   css,
@@ -15,7 +16,12 @@ import {
 } from '@mongodb-js/compass-components';
 import { MockDataGeneratorStep } from './types';
 import { StepButtonLabelMap } from './constants';
-import { getNextStep, getPreviousStep } from './utils';
+import type { CollectionState } from '../../modules/collection-tab';
+import {
+  mockDataGeneratorModalClosed,
+  mockDataGeneratorNextButtonClicked,
+  mockDataGeneratorPreviousButtonClicked,
+} from '../../modules/collection-tab';
 
 const footerStyles = css`
   flex-direction: row;
@@ -32,25 +38,17 @@ interface Props {
   isOpen: boolean;
   onClose: () => void;
   currentStep: MockDataGeneratorStep;
-  onCurrentStepChange: (step: MockDataGeneratorStep) => void;
+  onNextStep: () => void;
+  onPreviousStep: () => void;
 }
 
 const MockDataGeneratorModal = ({
   isOpen,
   onClose,
   currentStep,
-  onCurrentStepChange,
+  onNextStep,
+  onPreviousStep,
 }: Props) => {
-  const onNext = () => {
-    const nextStep = getNextStep(currentStep);
-    onCurrentStepChange(nextStep);
-  };
-
-  const onBack = () => {
-    const previousStep = getPreviousStep(currentStep);
-    onCurrentStepChange(previousStep);
-  };
-
   return (
     <Modal
       open={isOpen}
@@ -68,7 +66,7 @@ const MockDataGeneratorModal = ({
       </ModalBody>
       <ModalFooter className={footerStyles}>
         <Button
-          onClick={onBack}
+          onClick={onPreviousStep}
           disabled={currentStep === MockDataGeneratorStep.AI_DISCLAIMER}
         >
           Back
@@ -77,7 +75,7 @@ const MockDataGeneratorModal = ({
           <Button onClick={onClose}>Cancel</Button>
           <Button
             variant={ButtonVariant.Primary}
-            onClick={onNext}
+            onClick={onNextStep}
             data-testid="next-step-button"
           >
             {StepButtonLabelMap[currentStep]}
@@ -88,4 +86,16 @@ const MockDataGeneratorModal = ({
   );
 };
 
-export default MockDataGeneratorModal;
+const mapStateToProps = (state: CollectionState) => ({
+  isOpen: state.mockDataGenerator.isModalOpen,
+  currentStep: state.mockDataGenerator.currentStep,
+});
+
+const ConnectedMockDataGeneratorModal = connect(mapStateToProps, {
+  onClose: mockDataGeneratorModalClosed,
+  onNextStep: mockDataGeneratorNextButtonClicked,
+  onPreviousStep: mockDataGeneratorPreviousButtonClicked,
+})(MockDataGeneratorModal);
+
+export default ConnectedMockDataGeneratorModal;
+export { MockDataGeneratorModal as UnconnectedMockDataGeneratorModal };