Move state to redux

Author: jcobis

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

@@ -8,26 +8,32 @@ import {
   within,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
-import { CollectionHeader } from './collection-header';
+import { UnconnectedCollectionHeader } 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>> = {},
+  props: Partial<ComponentProps<typeof UnconnectedCollectionHeader>> = {},
   workspaceService: Partial<WorkspacesService> = {}
 ) {
   return render(
     <WorkspacesServiceProvider value={workspaceService as WorkspacesService}>
-      <CollectionHeader
+      <UnconnectedCollectionHeader
         isAtlas={false}
         isReadonly={false}
         isTimeSeries={false}
         isClustered={false}
         isFLE={false}
         namespace="test.test"
+        isMockDataModalOpen={false}
+        currentStep={MockDataGeneratorStep.AI_DISCLAIMER}
+        onOpenMockDataModal={() => {}}
+        onCloseMockDataModal={() => {}}
+        onSetMockDataGeneratorStep={() => {}}
         {...props}
       />
     </WorkspacesServiceProvider>

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

@@ -10,7 +10,7 @@ import {
 } from '@mongodb-js/compass-components';
 import type { BreadcrumbItem } from '@mongodb-js/compass-components';
 import type { Signal } from '@mongodb-js/compass-components';
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import toNS from 'mongodb-ns';
 import { usePreference } from 'compass-preferences-model/provider';
 import CollectionHeaderActions from '../collection-header-actions';
@@ -19,7 +19,14 @@ 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 { MockDataGeneratorStep } from '../mock-data-generator-modal/types';
+import type { MockDataGeneratorStep } from '../mock-data-generator-modal/types';
+import { connect } from 'react-redux';
+import type { CollectionState } from '../../modules/collection-tab';
+import {
+  openMockDataGeneratorModal,
+  closeMockDataGeneratorModal,
+  setMockDataGeneratorStep,
+} from '../../modules/collection-tab';
 
 const collectionHeaderStyles = css({
   padding: spacing[400],
@@ -60,6 +67,11 @@ 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) => {
@@ -84,9 +96,7 @@ const getInsightsForPipeline = (pipeline: any[], isAtlas: boolean) => {
   return Array.from(insights);
 };
 
-export const CollectionHeader: React.FunctionComponent<
-  CollectionHeaderProps
-> = ({
+const CollectionHeader: React.FunctionComponent<CollectionHeaderProps> = ({
   namespace,
   isReadonly,
   isTimeSeries,
@@ -96,6 +106,11 @@ export const CollectionHeader: React.FunctionComponent<
   sourceName,
   editViewName,
   sourcePipeline,
+  isMockDataModalOpen,
+  currentStep,
+  onOpenMockDataModal,
+  onCloseMockDataModal,
+  onSetMockDataGeneratorStep,
 }) => {
   const darkMode = useDarkMode();
   const showInsights = usePreference('showInsights');
@@ -108,16 +123,6 @@ export const CollectionHeader: React.FunctionComponent<
   const connectionId = connectionInfo.id;
   const connectionName = getConnectionTitle(connectionInfo);
 
-  // Mock Data Generator modal state
-  const [isMockDataModalOpen, setIsMockDataModalOpen] = useState(false);
-  const [currentStep, setCurrentStep] = useState(
-    MockDataGeneratorStep.AI_DISCLAIMER
-  );
-
-  const handleOpenMockDataModal = useCallback(() => {
-    setIsMockDataModalOpen(true);
-  }, []);
-
   const breadcrumbItems = useMemo(() => {
     return [
       {
@@ -182,17 +187,40 @@ export const CollectionHeader: React.FunctionComponent<
           namespace={namespace}
           sourceName={sourceName}
           sourcePipeline={sourcePipeline}
-          onOpenMockDataModal={handleOpenMockDataModal}
+          onOpenMockDataModal={onOpenMockDataModal}
         />
       </div>
       <MockDataGeneratorModal
         isOpen={isMockDataModalOpen}
-        onOpenChange={setIsMockDataModalOpen}
+        onClose={onCloseMockDataModal}
         currentStep={currentStep}
-        onCurrentStepChange={(step) => {
-          setCurrentStep(step);
-        }}
+        onCurrentStepChange={onSetMockDataGeneratorStep}
       />
     </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, {
+  onOpenMockDataModal: openMockDataGeneratorModal,
+  onCloseMockDataModal: closeMockDataGeneratorModal,
+  onSetMockDataGeneratorStep: setMockDataGeneratorStep,
+})(CollectionHeader) as React.ComponentType<ConnectedCollectionHeaderProps>;
+
+export {
+  ConnectedCollectionHeader as CollectionHeader,
+  CollectionHeader as UnconnectedCollectionHeader, // For tests
+};

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

@@ -8,10 +8,10 @@ import { StepButtonLabelMap } from './constants';
 
 describe('MockDataGeneratorModal', () => {
   const sandbox = Sinon.createSandbox();
-  let onOpenChange: Sinon.SinonSpy;
+  let onClose: Sinon.SinonSpy;
 
   beforeEach(() => {
-    onOpenChange = sandbox.spy();
+    onClose = sandbox.spy();
   });
 
   afterEach(() => {
@@ -28,7 +28,7 @@ describe('MockDataGeneratorModal', () => {
       return (
         <MockDataGeneratorModal
           isOpen={isOpen}
-          onOpenChange={onOpenChange}
+          onClose={onClose}
           currentStep={currentStepStateMock}
           onCurrentStepChange={(step) => {
             onCurrentStepChangeStateMock(step);
@@ -51,20 +51,20 @@ describe('MockDataGeneratorModal', () => {
     expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
   });
 
-  it('calls onOpenChange(false) when the modal is closed', () => {
+  it('calls onClose when the modal is closed', () => {
     renderModal();
 
     screen.getByLabelText('Close modal').click();
 
-    expect(onOpenChange.calledOnceWith(false)).to.be.true;
+    expect(onClose.calledOnce).to.be.true;
   });
 
-  it('calls onOpenChange(false) when the cancel button is clicked', () => {
+  it('calls onClose when the cancel button is clicked', () => {
     renderModal();
 
     screen.getByText('Cancel').click();
 
-    expect(onOpenChange.calledOnceWith(false)).to.be.true;
+    expect(onClose.calledOnce).to.be.true;
   });
 
   it('disables the Back button on the first step', () => {

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

@@ -30,14 +30,14 @@ const rightButtonsStyles = css`
 
 interface Props {
   isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
+  onClose: () => void;
   currentStep: MockDataGeneratorStep;
   onCurrentStepChange: (step: MockDataGeneratorStep) => void;
 }
 
 const MockDataGeneratorModal = ({
   isOpen,
-  onOpenChange,
+  onClose,
   currentStep,
   onCurrentStepChange,
 }: Props) => {
@@ -51,14 +51,14 @@ const MockDataGeneratorModal = ({
     onCurrentStepChange(previousStep);
   };
 
-  const onCancel = () => {
-    onOpenChange(false);
-  };
-
   return (
     <Modal
       open={isOpen}
-      setOpen={(open) => onOpenChange(open)}
+      setOpen={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
       data-testid="generate-mock-data-modal"
     >
       <ModalHeader title="Generate Mock Data" />
@@ -74,7 +74,7 @@ const MockDataGeneratorModal = ({
           Back
         </Button>
         <div className={rightButtonsStyles}>
-          <Button onClick={onCancel}>Cancel</Button>
+          <Button onClick={onClose}>Cancel</Button>
           <Button
             variant={ButtonVariant.Primary}
             onClick={onNext}

packages/compass-collection/src/modules/collection-tab.ts

@@ -6,6 +6,7 @@ import type { workspacesServiceLocator } from '@mongodb-js/compass-workspaces/pr
 import type { CollectionSubtab } from '@mongodb-js/compass-workspaces';
 import type { DataService } from '@mongodb-js/compass-connections/provider';
 import type { experimentationServiceLocator } from '@mongodb-js/compass-telemetry/provider';
+import { MockDataGeneratorStep } from '../components/mock-data-generator-modal/types';
 
 function isAction<A extends AnyAction>(
   action: AnyAction,
@@ -31,23 +32,47 @@ export type CollectionState = {
   namespace: string;
   metadata: CollectionMetadata | null;
   editViewName?: string;
+  mockDataGenerator: {
+    isModalOpen: boolean;
+    currentStep: MockDataGeneratorStep;
+  };
 };
 
 enum CollectionActions {
   CollectionMetadataFetched = 'compass-collection/CollectionMetadataFetched',
+  OpenMockDataGeneratorModal = 'compass-collection/OpenMockDataGeneratorModal',
+  CloseMockDataGeneratorModal = 'compass-collection/CloseMockDataGeneratorModal',
+  SetMockDataGeneratorStep = 'compass-collection/SetMockDataGeneratorStep',
 }
 
 interface CollectionMetadataFetchedAction {
   type: CollectionActions.CollectionMetadataFetched;
   metadata: CollectionMetadata;
 }
 
+interface OpenMockDataGeneratorModalAction {
+  type: CollectionActions.OpenMockDataGeneratorModal;
+}
+
+interface CloseMockDataGeneratorModalAction {
+  type: CollectionActions.CloseMockDataGeneratorModal;
+}
+
+interface SetMockDataGeneratorStepAction {
+  type: CollectionActions.SetMockDataGeneratorStep;
+  step: MockDataGeneratorStep;
+}
+
 const reducer: Reducer<CollectionState, Action> = (
   state = {
     // TODO(COMPASS-7782): use hook to get the workspace tab id instead
     workspaceTabId: '',
     namespace: '',
     metadata: null,
+    mockDataGenerator: {
+      isModalOpen: false,
+      currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+    },
   },
   action
 ) => {
@@ -62,6 +87,54 @@ const reducer: Reducer<CollectionState, Action> = (
       metadata: action.metadata,
     };
   }
+
+  if (
+    isAction<OpenMockDataGeneratorModalAction>(
+      action,
+      CollectionActions.OpenMockDataGeneratorModal
+    )
+  ) {
+    return {
+      ...state,
+      mockDataGenerator: {
+        ...state.mockDataGenerator,
+        isModalOpen: true,
+        currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+      },
+    };
+  }
+
+  if (
+    isAction<CloseMockDataGeneratorModalAction>(
+      action,
+      CollectionActions.CloseMockDataGeneratorModal
+    )
+  ) {
+    return {
+      ...state,
+      mockDataGenerator: {
+        ...state.mockDataGenerator,
+        isModalOpen: false,
+        currentStep: MockDataGeneratorStep.AI_DISCLAIMER,
+      },
+    };
+  }
+
+  if (
+    isAction<SetMockDataGeneratorStepAction>(
+      action,
+      CollectionActions.SetMockDataGeneratorStep
+    )
+  ) {
+    return {
+      ...state,
+      mockDataGenerator: {
+        ...state.mockDataGenerator,
+        currentStep: action.step,
+      },
+    };
+  }
+
   return state;
 };
 
@@ -71,6 +144,22 @@ export const collectionMetadataFetched = (
   return { type: CollectionActions.CollectionMetadataFetched, metadata };
 };
 
+export const openMockDataGeneratorModal =
+  (): OpenMockDataGeneratorModalAction => {
+    return { type: CollectionActions.OpenMockDataGeneratorModal };
+  };
+
+export const closeMockDataGeneratorModal =
+  (): CloseMockDataGeneratorModalAction => {
+    return { type: CollectionActions.CloseMockDataGeneratorModal };
+  };
+
+export const setMockDataGeneratorStep = (
+  step: MockDataGeneratorStep
+): SetMockDataGeneratorStepAction => {
+  return { type: CollectionActions.SetMockDataGeneratorStep, step };
+};
+
 export const selectTab = (
   tabName: CollectionSubtab
 ): CollectionThunkAction<void> => {