feat: error details on update COMPASS-8865

Author: paula-stacho

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

@@ -320,18 +320,19 @@ const EditActionsFooter: React.FunctionComponent<{
     >
       <div className={message} data-testid="document-footer-message">
         {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}>
+          {error?.details && (
+            <Button
+              className={button}
+              size="xsmall"
+              onClick={() => onOpenErrorDetails?.(error.details!)}
+              data-testid="insert-document-error-details-button"
+            >
+              VIEW ERROR DETAILS
+            </Button>
+          )}
           <Button
             type="button"
             size="xsmall"

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

@@ -68,6 +68,7 @@ class DocumentJsonView extends React.Component<DocumentJsonViewProps> {
               replaceDocument={this.props.replaceDocument}
               updateDocument={this.props.updateDocument}
               openInsertDocumentDialog={this.props.openInsertDocumentDialog}
+              openErrorDetailsDialog={this.props.openErrorDetailsDialog}
             />
           </KeylineCard>
         </li>

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

@@ -43,6 +43,7 @@ const Document = (props: DocumentProps) => {
   }
 
   if (editable) {
+    console.log('PROP IS HERE', props.openErrorDetailsDialog);
     return <EditableDocument {...props} doc={doc} />;
   }
 

packages/compass-crud/src/components/json-editor.tsx

@@ -70,6 +70,7 @@ const JSONEditor: React.FunctionComponent<JSONEditorProps> = ({
   replaceDocument,
   copyToClipboard,
   openInsertDocumentDialog,
+  openErrorDetailsDialog,
 }) => {
   const darkMode = useDarkMode();
   const editorRef = useRef<EditorRef>(null);
@@ -318,6 +319,12 @@ const JSONEditor: React.FunctionComponent<JSONEditorProps> = ({
         onUpdate={onUpdate}
         onDelete={onDelete}
         onCancel={onCancel}
+        onOpenErrorDetails={(details: Record<string, unknown>) =>
+          openErrorDetailsDialog?.({
+            details,
+            closeAction: 'close',
+          })
+        }
       />
     </div>
   );

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

@@ -56,6 +56,7 @@ export type DocumentTableViewProps = {
   ns: string;
   version: string;
   openInsertDocumentDialog?: CrudActions['openInsertDocumentDialog'];
+  openErrorDetailsDialog?: CrudActions['openErrorDetailsDialog'];
   pathChanged: (path: (string | number)[], types: TableHeaderType[]) => void;
   removeColumn: GridActions['removeColumn'];
   copyToClipboard: (doc: Document) => void;
@@ -143,6 +144,7 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
         removeDocument: this.props.removeDocument,
         replaceDocument: this.props.replaceDocument,
         updateDocument: this.props.updateDocument,
+        openErrorDetailsDialog: this.props.openErrorDetailsDialog,
         darkMode: this.props.darkMode,
       },
       getRowNodeId: function (data) {
@@ -1031,6 +1033,7 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
     ns: PropTypes.string.isRequired,
     version: PropTypes.string.isRequired,
     openInsertDocumentDialog: PropTypes.func,
+    openErrorDetailsDialog: PropTypes.func,
     pathChanged: PropTypes.func.isRequired,
     removeColumn: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,

packages/compass-crud/src/components/table-view/full-width-cell-renderer.tsx

@@ -20,6 +20,7 @@ export type FullWidthCellRendererProps = Pick<
   replaceDocument: CrudActions['replaceDocument'];
   removeDocument: CrudActions['removeDocument'];
   updateDocument: CrudActions['updateDocument'];
+  openErrorDetailsDialog: CrudActions['openErrorDetailsDialog'];
   darkMode?: boolean;
 };
 
@@ -150,6 +151,12 @@ class FullWidthCellRenderer extends React.Component<
               this.handleCancelRemove();
             }
           }}
+          onOpenErrorDetails={(details: Record<string, unknown>) => {
+            this.props.openErrorDetailsDialog?.({
+              details,
+              closeAction: 'close',
+            });
+          }}
         />
       </LeafyGreenProvider>
     );
@@ -163,6 +170,7 @@ class FullWidthCellRenderer extends React.Component<
     updateDocument: PropTypes.func.isRequired,
     removeDocument: PropTypes.func.isRequired,
     replaceDocument: PropTypes.func.isRequired,
+    openErrorDetailsDialog: PropTypes.func.isRequired,
     replaceDoc: PropTypes.func.isRequired,
     cleanCols: PropTypes.func.isRequired,
     darkMode: PropTypes.bool,

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

@@ -53,6 +53,7 @@ export type VirtualizedDocumentJsonViewProps = {
   | 'replaceDocument'
   | 'updateDocument'
   | 'openInsertDocumentDialog'
+  | 'openErrorDetailsDialog'
 >;
 
 const VirtualizedDocumentJsonView: React.FC<
@@ -70,6 +71,7 @@ const VirtualizedDocumentJsonView: React.FC<
   replaceDocument,
   updateDocument,
   openInsertDocumentDialog,
+  openErrorDetailsDialog,
   __TEST_OVERSCAN_COUNT,
   __TEST_LIST_HEIGHT,
   listRef,
@@ -90,6 +92,7 @@ const VirtualizedDocumentJsonView: React.FC<
             replaceDocument={replaceDocument}
             updateDocument={updateDocument}
             openInsertDocumentDialog={openInsertDocumentDialog}
+            openErrorDetailsDialog={openErrorDetailsDialog}
           />
         </KeylineCard>
       );
@@ -101,6 +104,7 @@ const VirtualizedDocumentJsonView: React.FC<
       scrollTriggerRef,
       copyToClipboard,
       openInsertDocumentDialog,
+      openErrorDetailsDialog,
       removeDocument,
       replaceDocument,
       updateDocument,

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

@@ -58,6 +58,7 @@ type VirtualizedDocumentListViewProps = {
   | 'replaceDocument'
   | 'updateDocument'
   | 'openInsertDocumentDialog'
+  | 'openErrorDetailsDialog'
 >;
 
 const VirtualizedDocumentListView: React.FC<
@@ -74,6 +75,7 @@ const VirtualizedDocumentListView: React.FC<
   replaceDocument,
   updateDocument,
   openInsertDocumentDialog,
+  openErrorDetailsDialog,
   listRef,
   __TEST_OVERSCAN_COUNT,
   __TEST_LIST_HEIGHT,
@@ -104,6 +106,7 @@ const VirtualizedDocumentListView: React.FC<
             replaceDocument={replaceDocument}
             updateDocument={updateDocument}
             openInsertDocumentDialog={openInsertDocumentDialog}
+            openErrorDetailsDialog={openErrorDetailsDialog}
           />
         </KeylineCard>
       );
@@ -114,6 +117,7 @@ const VirtualizedDocumentListView: React.FC<
       scrollTriggerRef,
       copyToClipboard,
       openInsertDocumentDialog,
+      openErrorDetailsDialog,
       removeDocument,
       replaceDocument,
       updateDocument,