feat(aggregations): conditional confirmation modal COMPASS-6355 (#4079)

Author: mabaasit

configs/mocha-config-compass/register/jsdom-global-register.js

@@ -51,3 +51,7 @@ if (!globalThis.IntersectionObserver) {
       disconnect() {}
     };
 }
+
+// jsdom doesn't override classes that already exist in global scope
+// https://github.com/jsdom/jsdom/issues/3331
+globalThis.EventTarget = window.EventTarget;

packages/compass-aggregations/src/components/pipeline-confirm-modal/pipeline-confirm-modal.spec.tsx

@@ -7,7 +7,7 @@ import PipelineName from './pipeline-name';
 import PipelineExtraSettings from './pipeline-extra-settings';
 import type { RootState } from '../../../modules';
 import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-builder/builder-helpers';
-import { toggleNewPipelineModal } from '../../../modules/is-new-pipeline-confirm';
+import { confirmNewPipeline } from '../../../modules/is-new-pipeline-confirm';
 
 const containerStyles = css({
   display: 'grid',
@@ -95,6 +95,6 @@ export default connect(
   },
   {
     onExportToLanguage: exportToLanguage,
-    onCreateNewPipeline: () => toggleNewPipelineModal(true),
+    onCreateNewPipeline: confirmNewPipeline,
   }
 )(PipelineSettings);

packages/compass-aggregations/src/components/pipeline-confirm-modal/pipeline-confirm-modal.tsx

@@ -4,7 +4,6 @@ import { Banner, WorkspaceContainer } from '@mongodb-js/compass-components';
 
 import Settings from '../settings';
 import SavingPipelineModal from '../saving-pipeline-modal';
-import PipelineConfirmModal from '../pipeline-confirm-modal/pipeline-confirm-modal';
 import styles from './pipeline.module.less';
 
 import PipelineToolbar from '../pipeline-toolbar';
@@ -141,7 +140,6 @@ class Pipeline extends PureComponent {
           )}
           <PipelineExplain />
           <FocusMode />
-          <PipelineConfirmModal />
           {savingPipelineModal}
         </WorkspaceContainer>
       </div>

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx

@@ -6,14 +6,24 @@ import Sinon from 'sinon';
 
 import { SavedPipelines } from './saved-pipelines';
 
+const savedPipelines = [
+  {
+    name: 'test name 0',
+    id: 'test id 0',
+  },
+  {
+    name: 'test name 1',
+    id: 'test id 1',
+  },
+];
+
 const renderSavedPipelines = (
   props: Partial<ComponentProps<typeof SavedPipelines>> = {}
 ) => {
   render(
     <SavedPipelines
       savedPipelines={[]}
       namespace="test.test123"
-      editor_view_type="stage"
       onDeletePipeline={() => {}}
       onOpenPipeline={() => {}}
       {...props}
@@ -39,16 +49,6 @@ describe('SavedPipelines', function () {
   });
 
   describe('renders saved pipeline cards', function () {
-    const savedPipelines = [
-      {
-        name: 'test name 0',
-        id: 'test id 0',
-      },
-      {
-        name: 'test name 1',
-        id: 'test id 1',
-      },
-    ];
     let savedPipelineCards: HTMLElement[];
 
     beforeEach(function () {
@@ -95,95 +95,34 @@ describe('SavedPipelines', function () {
     });
   });
 
-  describe('when pipeline is opened', function () {
-    const openPipelineModalTestId = 'restore-pipeline-modal';
-    let onOpenPipelineSpy: Sinon.SinonSpy;
-
-    beforeEach(function () {
-      onOpenPipelineSpy = Sinon.spy();
+  describe('calls card actions', function () {
+    it('calls onOpenPipeline when open button is clicked', function () {
+      const onOpenPipelineSpy = Sinon.spy();
       renderSavedPipelines({
-        savedPipelines: [
-          {
-            name: 'test name 1',
-            id: 'test id 1',
-          },
-        ],
+        savedPipelines,
         onOpenPipeline: onOpenPipelineSpy,
       });
-      // Open the pipeline open modal
-      userEvent.click(screen.getByTestId('saved-pipeline-card-open-action'));
-      expect(screen.getByTestId(openPipelineModalTestId)).to.exist;
-    });
-
-    it('closes when cancel is clicked', function () {
+      const savedPipelineCard = screen.getAllByTestId('saved-pipeline-card')[0];
       userEvent.click(
-        screen.getByRole('button', {
-          name: /cancel/i,
-        })
-      );
-      expect(onOpenPipelineSpy.calledOnce).to.be.false;
-      expect(() => {
-        screen.getByTestId(openPipelineModalTestId);
-      }).to.throw;
-    });
-
-    it('closes when open pipeline is clicked and calls onOpenPipeline', function () {
-      expect(onOpenPipelineSpy.calledOnce).to.be.false;
-      userEvent.click(
-        screen.getByRole('button', {
-          name: /open pipeline/i,
-        })
+        within(savedPipelineCard).getByTestId('saved-pipeline-card-open-action')
       );
       expect(onOpenPipelineSpy.calledOnce).to.be.true;
-      expect(() => {
-        screen.getByTestId(openPipelineModalTestId);
-      }).to.throw;
+      expect(onOpenPipelineSpy.calledWith(savedPipelines[0].id)).to.be.true;
     });
-  });
-
-  describe('when pipeline is deleted', function () {
-    const deletePipelineModalTestId = 'delete-pipeline-modal';
-    let onDeletePipelineSpy: Sinon.SinonSpy;
-
-    beforeEach(function () {
-      onDeletePipelineSpy = Sinon.spy();
+    it('calls onDeletePipeline when delete button is clicked', function () {
+      const onDeletePipelineSpy = Sinon.spy();
       renderSavedPipelines({
-        savedPipelines: [
-          {
-            name: 'test name 1',
-            id: 'test id 1',
-          },
-        ],
+        savedPipelines,
         onDeletePipeline: onDeletePipelineSpy,
       });
-      // Open the pipeline delete modal
-      userEvent.click(screen.getByTestId('saved-pipeline-card-delete-action'));
-      expect(screen.getByTestId(deletePipelineModalTestId)).to.exist;
-    });
-
-    it('closes when cancel is clicked', function () {
-      userEvent.click(
-        screen.getByRole('button', {
-          name: /cancel/i,
-        })
-      );
-      expect(onDeletePipelineSpy.calledOnce).to.be.false;
-      expect(() => {
-        screen.getByTestId(deletePipelineModalTestId);
-      }).to.throw;
-    });
-
-    it('closes when delete pipeline is clicked and calls onDeletePipeline', function () {
-      expect(onDeletePipelineSpy.calledOnce).to.be.false;
+      const savedPipelineCard = screen.getAllByTestId('saved-pipeline-card')[1];
       userEvent.click(
-        screen.getByRole('button', {
-          name: /delete pipeline/i,
-        })
+        within(savedPipelineCard).getByTestId(
+          'saved-pipeline-card-delete-action'
+        )
       );
       expect(onDeletePipelineSpy.calledOnce).to.be.true;
-      expect(() => {
-        screen.getByTestId(deletePipelineModalTestId);
-      }).to.throw;
+      expect(onDeletePipelineSpy.calledWith(savedPipelines[1].id)).to.be.true;
     });
   });
 });