chore(compass-import-export): show message when import is in progress COMPASS-6538, COMPASS-6539 (#4132)

Author: Anemy

packages/compass-import-export/src/components/import-modal.tsx

@@ -10,6 +10,7 @@ import {
   spacing,
   FormFieldContainer,
 } from '@mongodb-js/compass-components';
+import { useTrackOnChange } from '@mongodb-js/compass-logging';
 
 import {
   FINISHED_STATUSES,
@@ -42,7 +43,6 @@ import {
 import { ImportErrorList } from './import-error-list';
 import type { RootImportState } from '../stores/import-store';
 import type { CSVDelimiter, FieldFromCSV } from '../modules/import';
-import { useTrackOnChange } from '@mongodb-js/compass-logging';
 import { ImportFileInput } from './import-file-input';
 
 /**

packages/compass-import-export/src/components/in-progress-modal.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  Button,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+} from '@mongodb-js/compass-components';
+
+import { closeInProgressMessage } from '../modules/import';
+import type { RootImportState } from '../stores/import-store';
+
+type InProgressModalProps = {
+  closeInProgressMessage?: () => void;
+  isInProgressMessageOpen: boolean;
+};
+
+function InProgressModal({
+  closeInProgressMessage,
+  isInProgressMessageOpen,
+}: InProgressModalProps) {
+  return (
+    <Modal
+      open={isInProgressMessageOpen}
+      setOpen={closeInProgressMessage}
+      data-testid="import-modal"
+    >
+      <ModalHeader
+        title="Sorry, currently only one import operation is possible at a time"
+        subtitle="Import is disabled as there is an import already in progress."
+      />
+      <ModalFooter>
+        <Button onClick={closeInProgressMessage}>Cancel</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+const mapStateToProps = (state: RootImportState) => ({
+  isInProgressMessageOpen: state.importData.isInProgressMessageOpen,
+});
+export default connect(mapStateToProps, {
+  closeInProgressMessage,
+})(InProgressModal);

packages/compass-import-export/src/import-plugin.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { Provider } from 'react-redux';
 
 import ImportModal from './components/import-modal';
+import InProgressModal from './components/in-progress-modal';
 import importStore from './stores/import-store';
 
 function ImportPlugin() {
   return (
     <Provider store={importStore}>
       <ImportModal />
+      <InProgressModal />
     </Provider>
   );
 }

packages/compass-import-export/src/modules/import.spec.ts

@@ -6,6 +6,8 @@ import thunk from 'redux-thunk';
 import path from 'path';
 
 import {
+  onStarted,
+  openImport,
   selectImportFileType,
   selectImportFileName,
   INITIAL_STATE,
@@ -41,6 +43,43 @@ describe('import [module]', function () {
     );
   });
 
+  describe('#openImport', function () {
+    it('sets isInProgressMessageOpen to true when import is in progress and does not open', function () {
+      const abortController = new AbortController();
+      mockStore.dispatch(onStarted(abortController));
+
+      expect(mockStore.getState().importData.status).to.equal('STARTED');
+      expect(mockStore.getState().importData.isInProgressMessageOpen).to.equal(
+        false
+      );
+
+      mockStore.dispatch(openImport('test.test'));
+
+      expect(mockStore.getState().importData.isInProgressMessageOpen).to.equal(
+        true
+      );
+      expect(mockStore.getState().importData.isOpen).to.equal(false);
+    });
+
+    it('opens and sets the namespace', function () {
+      const testNS = 'test.test';
+      expect(mockStore.getState().importData.status).to.equal('UNSPECIFIED');
+      expect(mockStore.getState().ns).to.not.equal(testNS);
+      expect(mockStore.getState().importData.isInProgressMessageOpen).to.equal(
+        false
+      );
+      expect(mockStore.getState().importData.isOpen).to.equal(false);
+
+      mockStore.dispatch(openImport('test.test'));
+
+      expect(mockStore.getState().ns).to.equal(testNS);
+      expect(mockStore.getState().importData.isInProgressMessageOpen).to.equal(
+        false
+      );
+      expect(mockStore.getState().importData.isOpen).to.equal(true);
+    });
+  });
+
   describe('#selectImportFileType', function () {
     it('should update fileType to csv', async function () {
       // changing file type uses fileName from the state, so set it first

packages/compass-import-export/src/modules/import.ts

@@ -66,6 +66,8 @@ export const FILE_TYPE_SELECTED = `${PREFIX}/FILE_TYPE_SELECTED`;
 export const FILE_SELECTED = `${PREFIX}/FILE_SELECTED`;
 export const OPEN = `${PREFIX}/OPEN`;
 export const CLOSE = `${PREFIX}/CLOSE`;
+export const OPEN_IN_PROGRESS_MESSAGE = `${PREFIX}/OPEN_IN_PROGRESS_MESSAGE`;
+export const CLOSE_IN_PROGRESS_MESSAGE = `${PREFIX}/CLOSE_IN_PROGRESS_MESSAGE`;
 export const SET_PREVIEW = `${PREFIX}/SET_PREVIEW`;
 export const SET_DELIMITER = `${PREFIX}/SET_DELIMITER`;
 export const SET_GUESSTIMATED_TOTAL = `${PREFIX}/SET_GUESSTIMATED_TOTAL`;
@@ -89,6 +91,7 @@ export type CSVDelimiter = ',' | '\t' | ';' | ' ';
 
 type State = {
   isOpen: boolean;
+  isInProgressMessageOpen: boolean;
   errors: Error[];
   fileType: AcceptedFileType | '';
   fileName: string;
@@ -117,6 +120,7 @@ type State = {
 
 export const INITIAL_STATE: State = {
   isOpen: false,
+  isInProgressMessageOpen: false,
   errors: [],
   fileName: '',
   fileIsMultilineJSON: false,
@@ -177,7 +181,7 @@ export const onProgress = ({
   errors,
 });
 
-const onStarted = (abortController: AbortController) => ({
+export const onStarted = (abortController: AbortController) => ({
   type: STARTED,
   abortController,
 });
@@ -642,13 +646,26 @@ export const setIgnoreBlanks = (ignoreBlanks: boolean) => ({
 /**
  * Open the import modal.
  */
-export const openImport =
-  (namespace: string) =>
-  (dispatch: ThunkDispatch<RootImportState, void, AnyAction>) => {
+export const openImport = (namespace: string) => {
+  return (
+    dispatch: ThunkDispatch<RootImportState, void, AnyAction>,
+    getState: () => RootImportState
+  ) => {
+    // TODO(COMPASS-6540): Once we have importing in the background
+    // we'll need to update how we check if an import is in progress here.
+    const { status } = getState().importData;
+    if (status === 'STARTED') {
+      dispatch({
+        type: OPEN_IN_PROGRESS_MESSAGE,
+      });
+      return;
+    }
+
     track('Import Opened');
     dispatch(nsChanged(namespace));
     dispatch({ type: OPEN });
   };
+};
 
 /**
  * Close the import modal.
@@ -658,6 +675,10 @@ export const closeImport = () => ({
   type: CLOSE,
 });
 
+export const closeInProgressMessage = () => ({
+  type: CLOSE_IN_PROGRESS_MESSAGE,
+});
+
 /**
  * The import module reducer.
  */
@@ -884,6 +905,21 @@ const reducer = (state = INITIAL_STATE, action: AnyAction): State => {
       isOpen: false,
     };
   }
+
+  if (action.type === OPEN_IN_PROGRESS_MESSAGE) {
+    return {
+      ...state,
+      isInProgressMessageOpen: true,
+    };
+  }
+
+  if (action.type === CLOSE_IN_PROGRESS_MESSAGE) {
+    return {
+      ...state,
+      isInProgressMessageOpen: false,
+    };
+  }
+
   return state;
 };
 export default reducer;