feat: error details on update COMPASS-8865 (#6778)

Author: paula-stacho

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

@@ -6,6 +6,7 @@ import { css } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
 import { useDarkMode } from '../../hooks/use-theme';
+import { showErrorDetails } from '../../hooks/use-error-details';
 
 type Status =
   | 'Initial'
@@ -81,13 +82,30 @@ 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 | null = null,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      setStatus(newStatus);
+      setError(
+        error
+          ? {
+              message: error?.message,
+              details: errorDetails,
+            }
+          : null
+      );
+    },
+    []
+  );
 
   useEffect(() => {
     if (status !== 'Initial') {
@@ -128,17 +146,23 @@ function useHadronDocumentStatus(
     const onUpdateSuccess = () => {
       updateStatus('UpdateSuccess');
     };
-    const onUpdateError = (err: string) => {
-      updateStatus('UpdateError', err);
+    const onUpdateError = (
+      err: Error,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      updateStatus('UpdateError', err, errorDetails);
     };
     const onRemoveStart = () => {
       updateStatus('DeleteStart');
     };
     const onRemoveSuccess = () => {
       updateStatus('DeleteSuccess');
     };
-    const onRemoveError = (err: string) => {
-      updateStatus('DeleteError', err);
+    const onRemoveError = (
+      err: Error,
+      errorDetails?: Record<string, unknown>
+    ) => {
+      updateStatus('DeleteError', err, errorDetails);
     };
 
     doc.on(Element.Events.Added, onUpdate);
@@ -183,30 +207,30 @@ function useHadronDocumentStatus(
     }
   }, [status, updateStatus]);
 
-  return { status, updateStatus, errorMessage };
+  return { status, updateStatus, error };
 }
 
 const container = css({
   display: 'flex',
-  paddingTop: spacing[2],
-  paddingRight: spacing[2],
-  paddingBottom: spacing[2],
-  paddingLeft: spacing[3],
+  paddingTop: spacing[200],
+  paddingRight: spacing[200],
+  paddingBottom: spacing[200],
+  paddingLeft: spacing[400],
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
   borderBottomLeftRadius: 'inherit',
   borderBottomRightRadius: 'inherit',
 });
 
 const message = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
+  overflow: 'scroll',
 });
 
 const buttonGroup = css({
   display: 'flex',
   marginLeft: 'auto',
-  gap: spacing[2],
+  gap: spacing[200],
+  flexShrink: 0,
 });
 
 const button = css({
@@ -275,7 +299,7 @@ const EditActionsFooter: React.FunctionComponent<{
   const {
     status: _status,
     updateStatus,
-    errorMessage,
+    error,
   } = useHadronDocumentStatus(doc, editing, deleting);
 
   const darkMode = useDarkMode();
@@ -303,10 +327,25 @@ const EditActionsFooter: React.FunctionComponent<{
       data-status={status}
     >
       <div className={message} data-testid="document-footer-message">
-        {errorMessage ?? statusMessage}
+        {error?.message ?? statusMessage}
       </div>
       {!isSuccess(status) && (
         <div className={buttonGroup}>
+          {error?.details && (
+            <Button
+              className={button}
+              size="xsmall"
+              onClick={() =>
+                showErrorDetails({
+                  details: error.details!,
+                  closeAction: 'close',
+                })
+              }
+              data-testid="edit-actions-footer-error-details-button"
+            >
+              VIEW ERROR DETAILS
+            </Button>
+          )}
           <Button
             type="button"
             size="xsmall"

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

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation-modal';
 import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
+import type { ButtonProps } from '@leafygreen-ui/button';
 
 export { ConfirmationModalVariant };
 
@@ -11,6 +12,7 @@ type ConfirmationProperties = Partial<
   Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
 > & {
   buttonText?: React.ReactNode;
+  confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
   hideConfirmButton?: boolean;
   hideCancelButton?: boolean;
   description?: React.ReactNode;
@@ -100,8 +102,28 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
     });
   const callbackRef = useRef<ConfirmationCallback>();
 
+  const listenerRef =
+    useRef<(event: CustomEvent<ShowConfirmationEventDetail>) => void>();
+
   const contextValue = React.useMemo(
-    () => ({ showConfirmation, isMounted: true }),
+    () => ({
+      showConfirmation: (props: ConfirmationProperties) => {
+        return new Promise<boolean>((resolve, reject) => {
+          const event = new CustomEvent<ShowConfirmationEventDetail>(
+            'show-confirmation',
+            {
+              detail: {
+                props: { ...props, confirmationId: ++confirmationId },
+                resolve,
+                reject,
+              },
+            }
+          );
+          listenerRef.current?.(event);
+        });
+      },
+      isMounted: true,
+    }),
     []
   );
 
@@ -127,6 +149,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
       };
       props.signal?.addEventListener('abort', onAbort);
     };
+    listenerRef.current = listener;
     globalConfirmation.addEventListener('show-confirmation', listener);
     return () => {
       globalConfirmation.removeEventListener('show-confirmation', listener);
@@ -170,6 +193,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
             : undefined,
           children: confirmationProps.buttonText ?? 'Confirm',
           onClick: handleConfirm,
+          ...confirmationProps.confirmButtonProps,
         }}
         cancelButtonProps={{
           className: confirmationProps.hideCancelButton

packages/compass-components/src/hooks/use-confirmation.tsx

@@ -0,0 +1,38 @@
+import {
+  type showConfirmation as originalShowConfirmation,
+  showConfirmation,
+} from './use-confirmation';
+import { Code } from '../components/leafygreen';
+import React from 'react';
+import { ButtonVariant } from '..';
+
+const getShowErrorDetails = (
+  showConfirmation: typeof originalShowConfirmation
+) => {
+  return ({
+    details,
+    closeAction,
+  }: {
+    details: Record<string, unknown>;
+    closeAction: 'back' | 'close';
+  }) =>
+    void showConfirmation({
+      title: 'Error details',
+      description: (
+        <Code
+          language="json"
+          data-testid="error-details-json"
+          id="error-details-json"
+        >
+          {JSON.stringify(details, undefined, 2)}
+        </Code>
+      ),
+      hideCancelButton: true,
+      buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
+      confirmButtonProps: {
+        variant: ButtonVariant.Default,
+      },
+    });
+};
+
+export const showErrorDetails = getShowErrorDetails(showConfirmation);

packages/compass-components/src/hooks/use-error-details.tsx

@@ -92,7 +92,6 @@ 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,
@@ -183,6 +182,7 @@ export {
   ConfirmationModalArea,
   showConfirmation,
 } from './hooks/use-confirmation';
+export { showErrorDetails } from './hooks/use-error-details';
 export {
   useHotkeys,
   formatHotkey,

packages/compass-components/src/index.ts

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

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

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

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

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

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

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