address comments

Author: ncarbon

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 setIsOpen: Sinon.SinonSpy;
+  let onOpenChange: Sinon.SinonSpy;
 
   beforeEach(() => {
-    setIsOpen = sandbox.spy();
+    onOpenChange = sandbox.spy();
   });
 
   afterEach(() => {
@@ -23,15 +23,15 @@ describe('MockDataGeneratorModal', () => {
     currentStep = MockDataGeneratorStep.AI_DISCLAIMER,
   } = {}) {
     function MockDataGeneratorModalWrapper() {
-      const [currentStepStateMock, setCurrentStepStateMock] =
+      const [currentStepStateMock, onCurrentStepChangeStateMock] =
         React.useState<MockDataGeneratorStep>(currentStep);
       return (
         <MockDataGeneratorModal
           isOpen={isOpen}
-          setIsOpen={setIsOpen}
+          onOpenChange={onOpenChange}
           currentStep={currentStepStateMock}
-          setCurrentStep={(step) => {
-            setCurrentStepStateMock(step);
+          onCurrentStepChange={(step) => {
+            onCurrentStepChangeStateMock(step);
           }}
         />
       );
@@ -51,20 +51,20 @@ describe('MockDataGeneratorModal', () => {
     expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
   });
 
-  it('calls setIsOpen(false) when the modal is closed', () => {
+  it('calls onOpenChange(false) when the modal is closed', () => {
     renderModal();
 
     screen.getByLabelText('Close modal').click();
 
-    expect(setIsOpen.calledOnceWith(false)).to.be.true;
+    expect(onOpenChange.calledOnceWith(false)).to.be.true;
   });
 
-  it('calls setIsOpen(false) when the cancel button is clicked', () => {
+  it('calls onOpenChange(false) when the cancel button is clicked', () => {
     renderModal();
 
     screen.getByText('Cancel').click();
 
-    expect(setIsOpen.calledOnceWith(false)).to.be.true;
+    expect(onOpenChange.calledOnceWith(false)).to.be.true;
   });
 
   it('disables the Back button on the first step', () => {
@@ -76,9 +76,9 @@ describe('MockDataGeneratorModal', () => {
   });
 
   describe('when rendering the modal in a specific step', () => {
-    const steps = Object.values(MockDataGeneratorStep).filter(
-      (step) => typeof step === 'number'
-    ) as MockDataGeneratorStep[];
+    const steps = Object.keys(
+      StepButtonLabelMap
+    ) as unknown as MockDataGeneratorStep[];
 
     steps.forEach((currentStep) => {
       it(`renders the button with the correct label when the user is in step "${currentStep}"`, () => {

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

@@ -1,6 +1,11 @@
 import React from 'react';
 
-import { css, ModalBody, ModalHeader } from '@mongodb-js/compass-components';
+import {
+  css,
+  ModalBody,
+  ModalHeader,
+  spacing,
+} from '@mongodb-js/compass-components';
 
 import {
   Button,
@@ -18,51 +23,51 @@ const footerStyles = css`
 
 const rightButtonsStyles = css`
   display: flex;
-  gap: 8px;
+  gap: ${spacing[200]}px;
   flex-direction: row;
 `;
 
 interface Props {
   isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
+  onOpenChange: (isOpen: boolean) => void;
   currentStep: MockDataGeneratorStep;
-  setCurrentStep: (step: MockDataGeneratorStep) => void;
+  onCurrentStepChange: (step: MockDataGeneratorStep) => void;
 }
 
 const MockDataGeneratorModal = ({
   isOpen,
-  setIsOpen,
+  onOpenChange,
   currentStep,
-  setCurrentStep,
+  onCurrentStepChange,
 }: Props) => {
   const resetState = () => {
-    setCurrentStep(MockDataGeneratorStep.AI_DISCLAIMER);
+    onCurrentStepChange(MockDataGeneratorStep.AI_DISCLAIMER);
   };
 
   const onNext = () => {
     if (currentStep < MockDataGeneratorStep.GENERATE_DATA) {
-      setCurrentStep(currentStep + 1);
+      onCurrentStepChange(currentStep + 1);
     } else {
-      setIsOpen(false);
+      onOpenChange(false);
       resetState();
     }
   };
 
   const onBack = () => {
     if (currentStep > MockDataGeneratorStep.AI_DISCLAIMER) {
-      setCurrentStep(currentStep - 1);
+      onCurrentStepChange(currentStep - 1);
     }
   };
 
   const onCancel = () => {
-    setIsOpen(false);
+    onOpenChange(false);
     resetState();
   };
 
   return (
     <Modal
       open={isOpen}
-      setOpen={(open) => setIsOpen(open)}
+      setOpen={(open) => onOpenChange(open)}
       data-testid="generate-mock-data-modal"
     >
       <ModalHeader title="Generate Mock Data" />