wip

Author: paula-stacho

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ErrorDetailsModal } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import { RootImportState } from '../stores/import-store';
+import { onErrorDetailsClose } from '../modules/import';
+
+const ImportErrorDetailsModal: React.FunctionComponent<{
+  isOpen: boolean;
+  errorDetails?: Record<string, unknown>;
+  onClose: () => void;
+}> = ({ isOpen, errorDetails, onClose }) => {
+  return (
+    <ErrorDetailsModal
+      closeAction="close"
+      open={isOpen}
+      details={errorDetails}
+      onClose={onClose}
+    />
+  );
+};
+
+const ConnectedImportErrorDetailsModal = connect(
+  (state: RootImportState) => ({
+    isOpen: state.import.errorDetails.isOpen,
+    errorDetails: state.import.errorDetails.details,
+  }),
+  {
+    onClose: onErrorDetailsClose,
+  }
+)(ImportErrorDetailsModal);
+
+export default ConnectedImportErrorDetailsModal;

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import {
   Body,
+  Button,
   css,
   openToast,
   ToastBody,
 } from '@mongodb-js/compass-components';
 import path from 'path';
+import type { MongoServerError } from 'mongodb';
 
 const importToastId = 'import-toast';
 const bloatedDocumentSignalToastId = 'import-toast-bloated-document';
@@ -221,10 +223,23 @@ export function showCancelledToast({
   });
 }
 
-export function showFailedToast(err: Error | undefined) {
+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>
+    ),
   });
 }

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import ImportModal from './components/import-modal';
 import ImportInProgressModal from './components/import-in-progress-modal';
+import ImportErrorDetailsModal from './components/error-details-modal';
 
 function ImportPlugin() {
   return (
     <>
       <ImportModal />
       <ImportInProgressModal />
+      <ImportErrorDetailsModal />
     </>
   );
 }

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

@@ -28,7 +28,7 @@ export type ErrorJSON = {
   index?: number;
   code?: string | number;
   op?: any;
-  errorInfo?: Document;
+  errInfo?: Document;
   numErrors?: number;
 };
 

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

@@ -40,7 +40,7 @@ export function errorToJSON(error: any): ErrorJSON {
     message: error.message,
   };
 
-  for (const key of ['index', 'code', 'op', 'errorInfo'] as const) {
+  for (const key of ['index', 'code', 'op', 'errInfo'] as const) {
     if (error[key] !== undefined) {
       obj[key] = error[key];
     }

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

@@ -47,6 +47,8 @@ export const STARTED = `${PREFIX}/STARTED`;
 export const CANCELED = `${PREFIX}/CANCELED`;
 export const FINISHED = `${PREFIX}/FINISHED`;
 export const FAILED = `${PREFIX}/FAILED`;
+export const ERROR_DETAILS_OPENED = `${PREFIX}/ERROR_DETAILS_OPENED`;
+export const ERROR_DETAILS_CLOSED = `${PREFIX}/ERROR_DETAILS_CLOSED`;
 export const FILE_TYPE_SELECTED = `${PREFIX}/FILE_TYPE_SELECTED`;
 export const FILE_SELECTED = `${PREFIX}/FILE_SELECTED`;
 export const FILE_SELECT_ERROR = `${PREFIX}/FILE_SELECT_ERROR`;
@@ -80,13 +82,24 @@ type FieldFromJSON = {
 };
 type FieldType = FieldFromJSON | FieldFromCSV;
 
+export type ErrorDetailsDialogState =
+  | {
+      isOpen: false;
+      details?: Record<string, unknown>;
+    }
+  | {
+      isOpen: true;
+      details: Record<string, unknown>;
+    };
+
 type ImportState = {
   isOpen: boolean;
   isInProgressMessageOpen: boolean;
   firstErrors: Error[];
   fileType: AcceptedFileType | '';
   fileName: string;
   errorLogFilePath: string;
+  errorDetails: ErrorDetailsDialogState;
   fileIsMultilineJSON: boolean;
   useHeaderLines: boolean;
   status: ProcessStatus;
@@ -122,6 +135,7 @@ export const INITIAL_STATE: ImportState = {
   firstErrors: [],
   fileName: '',
   errorLogFilePath: '',
+  errorDetails: { isOpen: false },
   fileIsMultilineJSON: false,
   useHeaderLines: true,
   status: PROCESS_STATUS.UNSPECIFIED,
@@ -169,6 +183,8 @@ const onFinished = ({
 
 const onFailed = (error: Error) => ({ type: FAILED, error });
 
+export const onErrorDetailsClose = () => ({ type: ERROR_DETAILS_CLOSED });
+
 const onFileSelectError = (error: Error) => ({
   type: FILE_SELECT_ERROR,
   error,
@@ -373,7 +389,9 @@ export const startImport = (): ImportThunkAction<Promise<void>> => {
       debug('Error while importing:', err.stack);
 
       progressCallback.flush();
-      showFailedToast(err);
+      showFailedToast(err, () =>
+        dispatch({ type: ERROR_DETAILS_OPENED, errorDetails: err.errInfo })
+      );
 
       dispatch(onFailed(err));
       return;
@@ -1069,6 +1087,26 @@ export const importReducer: Reducer<ImportState> = (
     };
   }
 
+  if (action.type === ERROR_DETAILS_OPENED) {
+    return {
+      ...state,
+      errorDetails: {
+        isOpen: true,
+        details: action.errorDetails,
+      },
+    };
+  }
+
+  if (action.type === ERROR_DETAILS_CLOSED) {
+    return {
+      ...state,
+      errorDetails: {
+        ...state.errorDetails,
+        isOpen: false,
+      },
+    };
+  }
+
   if (action.type === STARTED) {
     return {
       ...state,