refactor: hook

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 { useErrorDetailsModal } from '../../hooks/use-error-details';
 
 type Status =
   | 'Initial'
@@ -284,7 +285,6 @@ const EditActionsFooter: React.FunctionComponent<{
   onUpdate(force: boolean): void;
   onDelete(): void;
   onCancel?: () => void;
-  onOpenErrorDetails?: (details: Record<string, unknown>) => void;
 }> = ({
   doc,
   editing,
@@ -295,7 +295,6 @@ const EditActionsFooter: React.FunctionComponent<{
   onUpdate,
   onDelete,
   onCancel,
-  onOpenErrorDetails,
 }) => {
   const {
     status: _status,
@@ -305,6 +304,8 @@ const EditActionsFooter: React.FunctionComponent<{
 
   const darkMode = useDarkMode();
 
+  const { showErrorDetails } = useErrorDetailsModal();
+
   // Allow props to override event based status of the document (helpful for
   // JSON editor where changing the document text doesn't really generate any
   // changes of the HadronDocument)
@@ -336,7 +337,12 @@ const EditActionsFooter: React.FunctionComponent<{
             <Button
               className={button}
               size="xsmall"
-              onClick={() => onOpenErrorDetails?.(error.details!)}
+              onClick={() =>
+                showErrorDetails({
+                  details: error.details,
+                  closeAction: 'close',
+                })
+              }
               data-testid="edit-actions-footer-error-details-button"
             >
               VIEW ERROR DETAILS

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

@@ -12,7 +12,7 @@ const leftDirectionFooter = css({
 });
 
 type ModalProps = React.ComponentProps<typeof Modal>;
-type ErrorDetailsModalProps = Omit<ModalProps, 'children'> & {
+export type ErrorDetailsModalProps = Omit<ModalProps, 'children'> & {
   title?: string;
   subtitle?: string;
   details?: Record<string, unknown>;

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

@@ -0,0 +1,134 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  ErrorDetailsModal,
+  type ErrorDetailsModalProps,
+} from '../components/modals/error-details-modal';
+
+type ErrorDetailsOptions = Omit<ErrorDetailsModalProps, 'onClose'>;
+
+interface ErrorDetailsModalContextData {
+  showErrorDetails: (props: ErrorDetailsOptions) => void;
+  isMounted: boolean;
+}
+
+let errorDetailsId = 0;
+
+interface ErrorDetailsEventMap {
+  'show-error-details': CustomEvent<ErrorDetailsOptions>;
+}
+
+interface GlobalErrorDetails extends EventTarget {
+  addEventListener<K extends keyof ErrorDetailsEventMap>(
+    type: K,
+    listener: (this: GlobalErrorDetails, ev: ErrorDetailsEventMap[K]) => void
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject
+  ): void;
+  removeEventListener<K extends keyof ErrorDetailsEventMap>(
+    type: K,
+    listener: (this: GlobalErrorDetails, ev: ErrorDetailsEventMap[K]) => void
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject
+  ): void;
+}
+
+type ShowErrorDetailsEventDetail = ErrorDetailsOptions & {
+  errorDetailsId: number;
+};
+
+class GlobalErrorDetails extends EventTarget {
+  showErrorDetails(props: ErrorDetailsOptions) {
+    this.dispatchEvent(
+      new CustomEvent<ShowErrorDetailsEventDetail>('show-error-details', {
+        detail: {
+          ...props,
+          errorDetailsId: ++errorDetailsId,
+        },
+      })
+    );
+  }
+}
+const globalErrorDetails = new GlobalErrorDetails();
+
+export const showErrorDetails =
+  globalErrorDetails.showErrorDetails.bind(globalErrorDetails);
+
+const ErrorDetailsModalContext =
+  React.createContext<ErrorDetailsModalContextData>({
+    isMounted: false,
+    showErrorDetails,
+  });
+
+type ErrorDetailsModalAreaProps = Partial<ShowErrorDetailsEventDetail> & {
+  open: boolean;
+};
+
+export const ErrorDetailsModalArea: React.FC = ({ children }) => {
+  const hasParentContext = useContext(ErrorDetailsModalContext).isMounted;
+
+  const [errorDetailsProps, setErrorDetailsProps] =
+    useState<ErrorDetailsModalAreaProps>({
+      open: false,
+      errorDetailsId: -1,
+    });
+
+  const contextValue = React.useMemo(
+    () => ({ showErrorDetails, isMounted: true }),
+    []
+  );
+
+  // Event listener to use confirmation modal outside of react
+  useEffect(() => {
+    const listener = ({ detail }: CustomEvent<ErrorDetailsOptions>) => {
+      setErrorDetailsProps({ open: true, ...detail });
+    };
+    globalErrorDetails.addEventListener('show-error-details', listener);
+    return () => {
+      globalErrorDetails.removeEventListener('show-error-details', listener);
+    };
+  }, []);
+
+  const handleClose = () => {
+    setErrorDetailsProps((state: ErrorDetailsModalAreaProps) => ({
+      ...state,
+      open: false,
+    }));
+  };
+
+  if (hasParentContext) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ErrorDetailsModalContext.Provider value={contextValue}>
+      {children}
+      <ErrorDetailsModal
+        // To make sure that confirmation modal internal state is reset for
+        // every confirmation request triggered with showConfirmation method we
+        // pass `errorDetailsId` as a component key to force React to remount it
+        // when request starts
+        key={errorDetailsId}
+        data-testid="import-error-details-modal"
+        open={errorDetailsProps.open}
+        title={errorDetailsProps.title}
+        closeAction={errorDetailsProps.closeAction || 'close'}
+        onClose={handleClose}
+        details={errorDetailsProps.details}
+      />
+    </ErrorDetailsModalContext.Provider>
+  );
+};
+
+export const useErrorDetailsModal = () => {
+  const { isMounted, showErrorDetails } = useContext(ErrorDetailsModalContext);
+  if (!isMounted) {
+    throw new Error(
+      'useErrorDetailsModal must be used within a ErrorDetailsModalArea'
+    );
+  }
+  return { showErrorDetails };
+};

packages/compass-components/src/index.ts

@@ -183,6 +183,11 @@ export {
   ConfirmationModalArea,
   showConfirmation,
 } from './hooks/use-confirmation';
+export {
+  useErrorDetailsModal,
+  ErrorDetailsModalArea,
+  showErrorDetails,
+} from './hooks/use-error-details';
 export {
   useHotkeys,
   formatHotkey,

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

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

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

@@ -33,7 +33,6 @@ export type DocumentJsonViewProps = {
   | 'removeDocument'
   | 'replaceDocument'
   | 'updateDocument'
-  | 'openErrorDetailsDialog'
   | 'openInsertDocumentDialog'
 >;
 
@@ -68,7 +67,6 @@ 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-list-view.spec.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.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,
   };