fix(import): If listCSVFields() or analyzeCSVFields() fails it will display the error in the modal COMPASS-6737 (#4278)

* If listCSVFields() or analyzeCSVFields() fails it will display the error in the modal

* close the modal if open

* rather just close the modal when disconnecting

* better: set isOpen inside the reducer

* minus exclusive test

* lint

* log the full error message if it doesn't match

* move the tests out of the beforeEach hook

* sans exclusive test..

* workaround for race conditions where things sometimes break before it can abort

Author: lerouxb

packages/compass-e2e-tests/fixtures/latin1.csv.gz

@@ -66,6 +66,7 @@ export async function createDummyCollections(): Promise<void> {
   promises.push(createBlankCollection(db, 'extended-json-file'));
   promises.push(createBlankCollection(db, 'csv-file'));
   promises.push(createBlankCollection(db, 'bom-csv-file'));
+  promises.push(createBlankCollection(db, 'latin1'));
   promises.push(createBlankCollection(db, 'broken-delimiter'));
   promises.push(createBlankCollection(db, 'numbers'));
   promises.push(createBlankCollection(db, 'import-stop-first-error'));

packages/compass-e2e-tests/helpers/insert-data.ts

@@ -558,12 +558,16 @@ export const ImportFileInput = '#import-file_file_input';
 export const FileTypeJSON = '[data-testid="select-file-type-json"]';
 export const FileTypeCSV = '[data-testid="select-file-type-csv"]';
 export const ImportSkipAnalyze = '[data-testid="skip-csv-analyze-button"]';
+export const ImportAnalyzeError =
+  '[data-testid="import-modal"] [data-testid="analyze-error"]';
 export const ImportConfirm =
   '[data-testid="import-modal"] [data-testid="import-button"]';
 export const ImportToast = '[data-testid="toast-import-toast"]';
 export const ImportToastAbort =
   '[data-testid="toast-import-toast"] [data-testid="toast-action-stop"]';
 
+export const ImportModalCloseButton = `${ImportModal} [aria-label*="Close"]`;
+
 export const importPreviewFieldHeaderField = (fieldName: string): string => {
   return `[data-testid="import-preview-field-type-select-menu-${fieldName}"]`;
 };

packages/compass-e2e-tests/helpers/selectors.ts

@@ -97,6 +97,8 @@ describe('Collection import', function () {
     await createNumbersCollection();
     await createDummyCollections();
     await browser.connectWithConnectionString();
+
+    delete process.env.COMPASS_E2E_TEST_IMPORT_ABORT_TIMEOUT;
   });
 
   after(async function () {
@@ -920,7 +922,11 @@ describe('Collection import', function () {
   });
 
   describe('aborting an import', function () {
-    beforeEach(async function () {
+    afterEach(function () {
+      delete process.env.COMPASS_E2E_TEST_IMPORT_ABORT_TIMEOUT;
+    });
+
+    it('aborts an in progress import', async function () {
       process.env.COMPASS_E2E_TEST_IMPORT_ABORT_TIMEOUT = 'true';
 
       // 16116 documents.
@@ -947,13 +953,7 @@ describe('Collection import', function () {
 
       // Confirm import.
       await browser.clickVisible(Selectors.ImportConfirm);
-    });
 
-    afterEach(function () {
-      delete process.env.COMPASS_E2E_TEST_IMPORT_ABORT_TIMEOUT;
-    });
-
-    it('aborts an in progress import', async function () {
       // Wait for the in progress toast to appear and click stop.
       await browser.clickVisible(Selectors.ImportToastAbort);
 
@@ -966,7 +966,12 @@ describe('Collection import', function () {
 
       // Check it displays that the import was aborted.
       const toastText = await toastElement.getText();
-      expect(toastText).to.include('Import aborted.');
+      try {
+        expect(toastText).to.include('Import aborted');
+      } catch (err) {
+        console.log(toastText);
+        throw err;
+      }
 
       // Check at least one and fewer than 16116 documents were imported.
       const messageElement = await browser.$(
@@ -985,6 +990,32 @@ describe('Collection import', function () {
     });
 
     it('aborts when disconnected', async function () {
+      process.env.COMPASS_E2E_TEST_IMPORT_ABORT_TIMEOUT = 'true';
+
+      // 16116 documents.
+      const csvPath = path.resolve(__dirname, '..', 'fixtures', 'listings.csv');
+
+      await browser.navigateToCollectionTab(
+        'test',
+        'import-abort',
+        'Documents'
+      );
+
+      // Open the import modal.
+      await browser.clickVisible(Selectors.AddDataButton);
+      const insertDocumentOption = await browser.$(Selectors.ImportFileOption);
+      await insertDocumentOption.waitForDisplayed();
+      await browser.clickVisible(Selectors.ImportFileOption);
+
+      // Select the file.
+      await browser.selectFile(Selectors.ImportFileInput, csvPath);
+
+      // Wait for the modal to appear.
+      const importModal = await browser.$(Selectors.ImportModal);
+      await importModal.waitForDisplayed();
+
+      // Confirm import.
+      await browser.clickVisible(Selectors.ImportConfirm);
       // Wait for the in progress toast to appear.
       await browser.$(Selectors.ImportToastAbort).waitForDisplayed();
 
@@ -1001,7 +1032,12 @@ describe('Collection import', function () {
       const toastElement = await browser.$(Selectors.ImportToast);
       // Check it displays that the import was aborted.
       const toastText = await toastElement.getText();
-      expect(toastText).to.include('Import aborted.');
+      try {
+        expect(toastText).to.include('Import aborted');
+      } catch (err) {
+        console.log(toastText);
+        throw err;
+      }
 
       // Close toast.
       await browser.clickVisible(

packages/compass-e2e-tests/tests/collection-import.test.ts

@@ -58,6 +58,12 @@ const fieldsHeadingStylesLight = css({
   borderBottom: `2px solid ${palette.gray.light2}`,
 });
 
+const analyzeContainerStyles = css({
+  // Remove double spacing between the analyze container and the form action
+  // buttons caused by analyze always being the last item when visible.
+  marginBottom: 0,
+});
+
 type ImportModalProps = {
   isOpen: boolean;
   ns: string;
@@ -94,6 +100,7 @@ type ImportModalProps = {
   setFieldType: (path: string, bsonType: string) => void;
   previewLoaded: boolean;
   csvAnalyzed: boolean;
+  analyzeError?: Error;
 };
 
 function ImportModal({
@@ -122,6 +129,7 @@ function ImportModal({
   setFieldType,
   previewLoaded,
   csvAnalyzed,
+  analyzeError,
 }: ImportModalProps) {
   const darkMode = useDarkMode();
 
@@ -185,8 +193,8 @@ function ImportModal({
           ignoreBlanks={ignoreBlanks}
           setIgnoreBlanks={setIgnoreBlanks}
         />
-        {fileType === 'csv' && (
-          <FormFieldContainer>
+        {fileType === 'csv' && !analyzeError && (
+          <FormFieldContainer className={analyzeContainerStyles}>
             <Body
               as="h3"
               className={cx(
@@ -215,6 +223,12 @@ function ImportModal({
         {errors.length > 0 && (
           <ErrorSummary errors={errors.map((error) => error.message)} />
         )}
+        {analyzeError && (
+          <ErrorSummary
+            data-testid="analyze-error"
+            errors={[analyzeError.message]}
+          />
+        )}
       </ModalBody>
       <ModalFooter>
         <Button
@@ -258,6 +272,7 @@ const mapStateToProps = (state: RootImportState) => ({
   values: state.importData.values,
   previewLoaded: state.importData.previewLoaded,
   csvAnalyzed: state.importData.analyzeStatus === 'COMPLETED',
+  analyzeError: state.importData.analyzeError,
 });
 
 /**

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

@@ -598,6 +598,7 @@ const loadTypes = (
       );
       dispatch({
         type: ANALYZE_FAILED,
+        error: err,
       });
     }
   };
@@ -654,6 +655,12 @@ const loadCSVPreviewDocs = (): ThunkAction<
         'Failed to load preview docs',
         err
       );
+
+      // The most likely way to get here is if the file is not encoded as UTF8.
+      dispatch({
+        type: ANALYZE_FAILED,
+        error: err,
+      });
     }
   };
 };
@@ -1104,6 +1111,7 @@ const reducer = (state = INITIAL_STATE, action: AnyAction): State => {
       ...state,
       analyzeAbortController: undefined,
       abortController: undefined,
+      isOpen: false,
     };
   }