cleanup and fix the non-react path

Author: paula-stacho

package-lock.json

@@ -339,7 +339,7 @@ const EditActionsFooter: React.FunctionComponent<{
               size="xsmall"
               onClick={() =>
                 showErrorDetails({
-                  details: error.details,
+                  details: error.details!,
                   closeAction: 'close',
                 })
               }

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

@@ -106,7 +106,7 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
   const contextValue = React.useMemo(
     () => ({
       showConfirmation: (props: ConfirmationProperties) => {
-        return new Promise((resolve, reject) => {
+        return new Promise<boolean>((resolve, reject) => {
           const event = new CustomEvent<ShowConfirmationEventDetail>(
             'show-confirmation',
             {

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

@@ -1,18 +1,22 @@
-import { useConfirmationModal } from './use-confirmation';
+import {
+  type showConfirmation as originalShowConfirmation,
+  showConfirmation,
+  useConfirmationModal,
+} from './use-confirmation';
 import { Code } from '../components/leafygreen';
 import React from 'react';
 
-export function useErrorDetailsModal() {
-  const { showConfirmation } = useConfirmationModal();
-
-  const showErrorDetails = ({
+const getShowErrorDetails = (
+  showConfirmation: typeof originalShowConfirmation
+) => {
+  return ({
     details,
     closeAction,
   }: {
     details: Record<string, unknown>;
     closeAction: 'back' | 'close';
   }) =>
-    showConfirmation({
+    void showConfirmation({
       title: 'Error details',
       description: (
         <Code
@@ -28,6 +32,12 @@ export function useErrorDetailsModal() {
       // modalProps
       // buttonProps
     });
+};
 
-  return { showErrorDetails };
+export function useErrorDetailsModal() {
+  const { showConfirmation } = useConfirmationModal();
+
+  return { showErrorDetails: getShowErrorDetails(showConfirmation) };
 }
+
+export const showErrorDetails = getShowErrorDetails(showConfirmation);

packages/compass-components/src/hooks/use-confirmation.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,
@@ -185,7 +184,6 @@ export {
 } from './hooks/use-confirmation';
 export {
   useErrorDetailsModal,
-  ErrorDetailsModalArea,
   showErrorDetails,
 } from './hooks/use-error-details';
 export {

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

@@ -349,7 +349,7 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
               className={errorDetailsBtnStyles}
               onClick={() =>
                 showErrorDetails({
-                  details: error.info,
+                  details: error.info!,
                   closeAction: 'back',
                 })
               }

packages/compass-components/src/index.ts

@@ -378,11 +378,14 @@ export const startImport = (): ImportThunkAction<Promise<void>> => {
       progressCallback.flush();
       const errInfo =
         err?.writeErrors?.length && err?.writeErrors[0]?.err?.errInfo;
-      showFailedToast(err as Error, () =>
-        showErrorDetails({
-          details: errInfo,
-          closeAction: 'close',
-        })
+      showFailedToast(
+        err as Error,
+        errInfo &&
+          (() =>
+            showErrorDetails({
+              details: errInfo,
+              closeAction: 'close',
+            }))
       );
 
       dispatch(onFailed(err as Error));