cleanup hook

Author: paula-stacho

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

@@ -6,7 +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';
+import { showErrorDetails } from '../../hooks/use-error-details';
 
 type Status =
   | 'Initial'
@@ -304,8 +304,6 @@ 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)

packages/compass-components/src/hooks/use-confirmation.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;
@@ -191,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-error-details.tsx

@@ -1,10 +1,10 @@
 import {
   type showConfirmation as originalShowConfirmation,
   showConfirmation,
-  useConfirmationModal,
 } from './use-confirmation';
 import { Code } from '../components/leafygreen';
 import React from 'react';
+import { ButtonVariant } from '..';
 
 const getShowErrorDetails = (
   showConfirmation: typeof originalShowConfirmation
@@ -29,15 +29,10 @@ const getShowErrorDetails = (
       ),
       hideCancelButton: true,
       buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
-      // modalProps
-      // buttonProps
+      confirmButtonProps: {
+        variant: ButtonVariant.Default,
+      },
     });
 };
 
-export function useErrorDetailsModal() {
-  const { showConfirmation } = useConfirmationModal();
-
-  return { showErrorDetails: getShowErrorDetails(showConfirmation) };
-}
-
 export const showErrorDetails = getShowErrorDetails(showConfirmation);

packages/compass-components/src/index.ts

@@ -182,10 +182,7 @@ export {
   ConfirmationModalArea,
   showConfirmation,
 } from './hooks/use-confirmation';
-export {
-  useErrorDetailsModal,
-  showErrorDetails,
-} from './hooks/use-error-details';
+export { showErrorDetails } from './hooks/use-error-details';
 export {
   useHotkeys,
   formatHotkey,

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

@@ -11,7 +11,7 @@ import {
   SegmentedControl,
   SegmentedControlOption,
   spacing,
-  useErrorDetailsModal,
+  showErrorDetails,
 } from '@mongodb-js/compass-components';
 
 import type { InsertCSFLEWarningBannerProps } from './insert-csfle-warning-banner';
@@ -141,8 +141,6 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
   );
   const [insertInProgress, setInsertInProgress] = useState(false);
 
-  const { showErrorDetails } = useErrorDetailsModal();
-
   const hasManyDocuments = useCallback(() => {
     let parsed: unknown;
     try {

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

@@ -129,32 +129,30 @@ class FullWidthCellRenderer extends React.Component<
       // this is needed cause ag-grid renders this component outside
       // of the context chain
       <LeafyGreenProvider darkMode={this.props.darkMode}>
-        <ConfirmationModalArea>
-          <DocumentList.DocumentEditActionsFooter
-            doc={this.doc}
-            editing={this.state.mode === 'editing'}
-            deleting={this.state.mode === 'deleting'}
-            onUpdate={(force) => {
-              this.props.api.stopEditing();
-              if (force) {
-                this.props.replaceDocument(this.doc);
-              } else {
-                this.props.updateDocument(this.doc);
-              }
-            }}
-            onDelete={() => {
-              this.props.api.stopEditing();
-              this.props.removeDocument(this.doc);
-            }}
-            onCancel={() => {
-              if (this.state.mode === 'editing') {
-                this.handleCancelUpdate();
-              } else {
-                this.handleCancelRemove();
-              }
-            }}
-          />
-        </ConfirmationModalArea>
+        <DocumentList.DocumentEditActionsFooter
+          doc={this.doc}
+          editing={this.state.mode === 'editing'}
+          deleting={this.state.mode === 'deleting'}
+          onUpdate={(force) => {
+            this.props.api.stopEditing();
+            if (force) {
+              this.props.replaceDocument(this.doc);
+            } else {
+              this.props.updateDocument(this.doc);
+            }
+          }}
+          onDelete={() => {
+            this.props.api.stopEditing();
+            this.props.removeDocument(this.doc);
+          }}
+          onCancel={() => {
+            if (this.state.mode === 'editing') {
+              this.handleCancelUpdate();
+            } else {
+              this.handleCancelRemove();
+            }
+          }}
+        />
       </LeafyGreenProvider>
     );
   }