wip

Author: paula-stacho

packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { MongoServerError } from 'mongodb';
 import type HadronDocument from 'hadron-document';
 import { Element } from 'hadron-document';
 import { Button } from '../leafygreen';
@@ -81,13 +82,26 @@ function useHadronDocumentStatus(
       ? 'Deleting'
       : 'Initial';
   });
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [error, setError] = useState<{
+    message: string;
+    details?: Record<string, unknown>;
+  } | null>(null);
   const invalidElementsRef = useRef(new Set());
 
-  const updateStatus = useCallback((newStatus: Status, errorMessage = null) => {
-    setStatus(newStatus);
-    setErrorMessage(errorMessage);
-  }, []);
+  const updateStatus = useCallback(
+    (newStatus: Status, error: Error | MongoServerError | null = null) => {
+      setStatus(newStatus);
+      setError(
+        error
+          ? {
+              message: error?.message,
+              details: (error as MongoServerError).errInfo,
+            }
+          : null
+      );
+    },
+    []
+  );
 
   useEffect(() => {
     if (status !== 'Initial') {
@@ -128,7 +142,7 @@ function useHadronDocumentStatus(
     const onUpdateSuccess = () => {
       updateStatus('UpdateSuccess');
     };
-    const onUpdateError = (err: string) => {
+    const onUpdateError = (err: Error | MongoServerError) => {
       updateStatus('UpdateError', err);
     };
     const onRemoveStart = () => {
@@ -137,7 +151,7 @@ function useHadronDocumentStatus(
     const onRemoveSuccess = () => {
       updateStatus('DeleteSuccess');
     };
-    const onRemoveError = (err: string) => {
+    const onRemoveError = (err: Error | MongoServerError) => {
       updateStatus('DeleteError', err);
     };
 
@@ -183,7 +197,7 @@ function useHadronDocumentStatus(
     }
   }, [status, updateStatus]);
 
-  return { status, updateStatus, errorMessage };
+  return { status, updateStatus, error };
 }
 
 const container = css({
@@ -261,6 +275,7 @@ const EditActionsFooter: React.FunctionComponent<{
   onUpdate(force: boolean): void;
   onDelete(): void;
   onCancel?: () => void;
+  onOpenErrorDetails?: (details: Record<string, unknown>) => void;
 }> = ({
   doc,
   editing,
@@ -271,11 +286,12 @@ const EditActionsFooter: React.FunctionComponent<{
   onUpdate,
   onDelete,
   onCancel,
+  onOpenErrorDetails,
 }) => {
   const {
     status: _status,
     updateStatus,
-    errorMessage,
+    error,
   } = useHadronDocumentStatus(doc, editing, deleting);
 
   const darkMode = useDarkMode();
@@ -303,7 +319,16 @@ const EditActionsFooter: React.FunctionComponent<{
       data-status={status}
     >
       <div className={message} data-testid="document-footer-message">
-        {errorMessage ?? statusMessage}
+        {error?.message ?? statusMessage}
+        {error?.details && (
+          <Button
+            size="xsmall"
+            onClick={() => onOpenErrorDetails?.(error?.details)}
+            data-testid="insert-document-error-details-button"
+          >
+            VIEW ERROR DETAILS
+          </Button>
+        )}
       </div>
       {!isSuccess(status) && (
         <div className={buttonGroup}>

packages/compass-crud/src/components/editable-document.tsx

@@ -278,6 +278,12 @@ class EditableDocument extends React.Component<
         onCancel={() => {
           this.handleCancel();
         }}
+        onOpenErrorDetails={(details: Record<string, unknown>) => {
+          this.props.openErrorDetailsDialog?.({
+            details,
+            closeAction: 'close',
+          });
+        }}
       />
     );
   }
@@ -313,6 +319,7 @@ class EditableDocument extends React.Component<
     replaceDocument: PropTypes.func.isRequired,
     updateDocument: PropTypes.func.isRequired,
     openInsertDocumentDialog: PropTypes.func.isRequired,
+    openErrorDetailsDialog: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,
     showInsights: PropTypes.bool,
   };

packages/compass-crud/src/stores/crud-store.ts

@@ -705,6 +705,11 @@ class CrudStoreImpl
           const nbsp = '\u00a0';
           error.message += ` (Updating fields whose names contain dots or start with $ require MongoDB${nbsp}5.0 or above.)`;
         }
+        console.log(
+          'updateDocument error',
+          error,
+          (error as MongoServerError).errInfo
+        );
         doc.onUpdateError(error as Error);
       } else if (d) {
         doc.onUpdateSuccess(d);
@@ -803,6 +808,7 @@ class CrudStoreImpl
         'replace'
       );
       if (error) {
+        console.log('replaceDocument error', error);
         doc.onUpdateError(error as Error);
       } else {
         doc.onUpdateSuccess(d);

packages/hadron-document/src/document.ts

@@ -478,7 +478,7 @@ export class Document extends EventEmitter {
   }
 
   onUpdateError(error: Error) {
-    this.emit('update-error', error.message);
+    this.emit('update-error', error);
   }
 
   markForDeletion() {
@@ -505,7 +505,7 @@ export class Document extends EventEmitter {
   }
 
   onRemoveError(error: Error) {
-    this.emit('remove-error', error.message);
+    this.emit('remove-error', error);
   }
 
   setModifiedEJSONString(ejson: string | null) {