feat: validation errors on import COMPAS-8867

Author: paula-stacho

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

@@ -3,6 +3,7 @@ import {
   Body,
   Button,
   css,
+  Link,
   openToast,
   ToastBody,
 } from '@mongodb-js/compass-components';
@@ -227,19 +228,21 @@ export function showFailedToast(
   err: Error | undefined,
   showErrorDetails?: () => void
 ) {
-  console.log({ err, showErrorDetails });
   openToast(importToastId, {
     title: 'Failed to import with the following error:',
-    description: err?.message,
-    variant: 'warning',
-    actionElement: showErrorDetails && (err as MongoServerError).errInfo && (
-      <Button
-        size="xsmall"
-        onClick={showErrorDetails}
-        data-testid="insert-document-error-details-button"
-      >
-        VIEW ERROR DETAILS
-      </Button>
+    description: (
+      <>
+        {err?.message}&nbsp;
+        {showErrorDetails && (
+          <Link
+            onClick={showErrorDetails}
+            data-testid="insert-document-error-details-button"
+          >
+            View error details
+          </Link>
+        )}
+      </>
     ),
+    variant: 'warning',
   });
 }

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

@@ -389,11 +389,14 @@ export const startImport = (): ImportThunkAction<Promise<void>> => {
       debug('Error while importing:', err.stack);
 
       progressCallback.flush();
-      showFailedToast(err, () =>
-        dispatch({ type: ERROR_DETAILS_OPENED, errorDetails: err.errInfo })
-      );
-
-      dispatch(onFailed(err));
+      const errInfo =
+        err?.writeErrors?.length && err?.writeErrors[0]?.err?.errInfo;
+      const showErrorDetails: () => void | undefined =
+        errInfo &&
+        (() => dispatch({ type: ERROR_DETAILS_OPENED, errorDetails: errInfo }));
+      showFailedToast(err as Error, showErrorDetails);
+
+      dispatch(onFailed(err as Error));
       return;
     } finally {
       errorLogWriteStream?.close();