feat: show error details on insert COMPASS-8864

packages/compass-components/src/components/modals/error-details-modal.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+
+import { css, cx } from '@leafygreen-ui/emotion';
+
+import { Modal } from './modal';
+import { Button, Code, ModalFooter } from '../leafygreen';
+import { ModalBody } from './modal-body';
+import { ModalHeader } from './modal-header';
+
+const leftDirectionFooter = css({
+  justifyContent: 'left',
+});
+
+type ModalProps = React.ComponentProps<typeof Modal>;
+type ErrorDetailsModalProps = Omit<ModalProps, 'children'> & {
+  title?: string;
+  subtitle?: string;
+  details?: Record<string, unknown>;
+  closeAction: 'close' | 'back';
+  onClose: () => void;
+};
+
+function ErrorDetailsModal({
+  title = 'Error details',
+  subtitle,
+  details,
+  closeAction,
+  onClose,
+  open,
+  ...modalProps
+}: ErrorDetailsModalProps) {
+  const prettyDetails = useMemo(
+    () => JSON.stringify(details, undefined, 2),
+    [details]
+  );
+
+  return (
+    <Modal
+      setOpen={onClose}
+      initialFocus="#error-details-json"
+      open={open}
+      {...modalProps}
+    >
+      <ModalHeader title={title} subtitle={subtitle} />
+      <ModalBody>
+        <Code
+          language="json"
+          data-testid="error-details-json"
+          id="error-details-json"
+        >
+          {prettyDetails}
+        </Code>
+      </ModalBody>
+      <ModalFooter
+        className={cx(closeAction === 'back' && leftDirectionFooter)}
+      >
+        <Button
+          data-testid={`error-details-${closeAction}-button`}
+          onClick={onClose}
+          variant="default"
+        >
+          {closeAction === 'back' ? 'Back' : 'Close'}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export { ErrorDetailsModal };

packages/compass-components/src/index.ts

@@ -92,6 +92,7 @@ export { ModalBody } from './components/modals/modal-body';
 export { ModalHeader } from './components/modals/modal-header';
 export { FormModal } from './components/modals/form-modal';
 export { InfoModal } from './components/modals/info-modal';
+export { ErrorDetailsModal } from './components/modals/error-details-modal';
 
 export type {
   FileInputBackend,

packages/compass-crud/package.json

@@ -94,6 +94,7 @@
     "hadron-type-checker": "^7.4.2",
     "jsondiffpatch": "^0.5.0",
     "lodash": "^4.17.21",
+    "mongodb": "^6.12.0",
     "mongodb-data-service": "^22.25.2",
     "mongodb-ns": "^2.4.2",
     "mongodb-query-parser": "^4.3.0",

packages/compass-crud/src/actions/index.ts

@@ -19,6 +19,8 @@ const configureActions = () => {
     'toggleInsertDocumentView',
     'toggleInsertDocument',
     'openInsertDocumentDialog',
+    'openErrorDetailsDialog',
+    'closeErrorDetailsDialog',
     'openBulkUpdateModal',
     'updateBulkUpdatePreview',
     'runBulkUpdate',

packages/compass-crud/src/components/document-json-view.tsx

@@ -33,6 +33,7 @@ export type DocumentJsonViewProps = {
   | 'removeDocument'
   | 'replaceDocument'
   | 'updateDocument'
+  | 'openErrorDetailsDialog'
   | 'openInsertDocumentDialog'
 >;
 

packages/compass-crud/src/components/document-list-view.spec.tsx

@@ -21,6 +21,7 @@ describe('<DocumentListView />', function () {
           replaceDocument={sinon.spy()}
           updateDocument={sinon.spy()}
           openInsertDocumentDialog={sinon.spy()}
+          openErrorDetailsDialog={sinon.spy()}
         />
       );
 

packages/compass-crud/src/components/document-list-view.tsx

@@ -97,6 +97,7 @@ class DocumentListView extends React.Component<DocumentListViewProps> {
     replaceDocument: PropTypes.func,
     updateDocument: PropTypes.func,
     openInsertDocumentDialog: PropTypes.func,
+    openErrorDetailsDialog: PropTypes.func,
     copyToClipboard: PropTypes.func,
     className: PropTypes.string,
   };

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

@@ -9,6 +9,7 @@ import {
   WorkspaceContainer,
   spacing,
   withDarkMode,
+  ErrorDetailsModal,
 } from '@mongodb-js/compass-components';
 import type { InsertDocumentDialogProps } from './insert-document-dialog';
 import InsertDocumentDialog from './insert-document-dialog';
@@ -29,10 +30,12 @@ import {
   DOCUMENTS_STATUS_FETCHING,
   DOCUMENTS_STATUS_FETCHED_INITIAL,
 } from '../constants/documents-statuses';
-import {
-  type CrudStore,
-  type BSONObject,
-  type DocumentView,
+import type {
+  CrudStore,
+  BSONObject,
+  DocumentView,
+  ErrorDetailsDialogOptions,
+  ErrorDetailsDialogState,
 } from '../stores/crud-store';
 import { getToolbarSignal } from '../utils/toolbar-signal';
 import BulkDeleteModal from './bulk-delete-modal';
@@ -70,21 +73,24 @@ const loaderContainerStyles = css({
 export type DocumentListProps = {
   store: CrudStore;
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
+  openErrorDetailsDialog: (options: ErrorDetailsDialogOptions) => void;
+  closeErrorDetailsDialog: () => void;
   openBulkUpdateModal: () => void;
   updateBulkUpdatePreview: (updateText: string) => void;
   runBulkUpdate: () => void;
   saveUpdateQuery: (name: string) => void;
   openImportFileDialog?: (origin: 'empty-state' | 'crud-toolbar') => void;
   docs: Document[];
   view: DocumentView;
+  errorDetails: ErrorDetailsDialogState;
   insert: Partial<InsertDocumentDialogProps> &
     Required<
       Pick<
         InsertDocumentDialogProps,
         | 'doc'
         | 'csfleState'
         | 'isOpen'
-        | 'message'
+        | 'error'
         | 'mode'
         | 'jsonDoc'
         | 'isCommentNeeded'
@@ -295,7 +301,10 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     resultId,
     isCollectionScan,
     isSearchIndexesSupported,
+    errorDetails,
     openInsertDocumentDialog,
+    openErrorDetailsDialog,
+    closeErrorDetailsDialog,
     openImportFileDialog,
     openBulkUpdateModal,
     docs,
@@ -581,8 +590,20 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
             version={version}
             ns={ns}
             updateComment={updateComment}
+            showErrorDetails={() =>
+              openErrorDetailsDialog({
+                details: insert.error.info || {},
+                closeAction: 'back',
+              })
+            }
             {...insert}
           />
+          <ErrorDetailsModal
+            open={errorDetails.isOpen}
+            onClose={closeErrorDetailsDialog}
+            details={errorDetails.details}
+            closeAction={errorDetails.closeAction || 'close'}
+          />
           <BulkUpdateModal
             ns={ns}
             filter={query.filter ?? {}}