feat(confirm-modal): Add async confirmation actions (#91559)

malwilley · web-flow · commit 3ceeacddb55b · 2025-05-13T11:23:39.000-07:00
diff --git a/static/app/components/confirm.spec.tsx b/static/app/components/confirm.spec.tsx
@@ -1,16 +1,21 @@
 import {
+  act,
   createEvent,
   fireEvent,
   render,
   renderGlobalModal,
   screen,
   userEvent,
+  waitFor,
 } from 'sentry-test/reactTestingLibrary';
 
 import Confirm from 'sentry/components/confirm';
 import ModalStore from 'sentry/stores/modalStore';
 
 describe('Confirm', function () {
+  beforeEach(() => {
+    jest.useRealTimers();
+  });
   afterEach(() => {
     ModalStore.reset();
   });
@@ -126,4 +131,81 @@ describe('Confirm', function () {
     fireEvent(button, clickEvent);
     expect(clickEvent.stopPropagation).toHaveBeenCalled();
   });
+
+  describe('async onConfirm', function () {
+    it('should not close the modal until the promise is resolved', async function () {
+      jest.useFakeTimers();
+      const onConfirmAsync = jest.fn().mockImplementation(
+        () =>
+          new Promise(resolve => {
+            setTimeout(resolve, 1000);
+          })
+      );
+
+      render(
+        <Confirm message="Are you sure?" onConfirm={onConfirmAsync}>
+          <button>Confirm?</button>
+        </Confirm>
+      );
+      renderGlobalModal();
+
+      await userEvent.click(screen.getByRole('button', {name: 'Confirm?'}), {
+        delay: null,
+      });
+
+      await screen.findByRole('dialog');
+
+      await userEvent.click(screen.getByRole('button', {name: 'Confirm'}), {
+        delay: null,
+      });
+
+      // Should keep modal in view until the promise is resolved
+      expect(onConfirmAsync).toHaveBeenCalled();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      act(() => jest.runAllTimers());
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+    });
+
+    it('displays an error message if the promise is rejected', async function () {
+      jest.useFakeTimers();
+      const onConfirmAsync = jest.fn().mockImplementation(
+        () =>
+          new Promise((_, reject) => {
+            setTimeout(reject, 1000);
+          })
+      );
+
+      render(
+        <Confirm message="Are you sure?" onConfirm={onConfirmAsync}>
+          <button>Confirm?</button>
+        </Confirm>
+      );
+      renderGlobalModal();
+
+      await userEvent.click(screen.getByRole('button', {name: 'Confirm?'}), {
+        delay: null,
+      });
+
+      await screen.findByRole('dialog');
+
+      await userEvent.click(screen.getByRole('button', {name: 'Confirm'}), {
+        delay: null,
+      });
+
+      // Should keep modal in view until the promise is resolved
+      expect(onConfirmAsync).toHaveBeenCalled();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      act(() => jest.runAllTimers());
+
+      // Should show error message and not close the modal
+      await screen.findByText(/something went wrong/i);
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Confirm'})).toBeEnabled();
+    });
+  });
 });
diff --git a/static/app/components/confirm.stories.tsx b/static/app/components/confirm.stories.tsx
@@ -105,6 +105,38 @@ export default storyBook('Confirm', story => {
     </Fragment>
   ));
 
+  story('Async Confirmations', () => {
+    return (
+      <Fragment>
+        <p>
+          If you pass a promise to <JSXProperty name="onConfirm" value={Function} />, the
+          modal will not close until the promise is resolved. This is useful if you have
+          actions that require a endpoint to respond before the modal can be closed, such
+          as when confirming the deletion of the page you are on.
+        </p>
+        <Confirm
+          onConfirm={() => new Promise(resolve => setTimeout(resolve, 1000))}
+          header="Are you sure?"
+          message="This confirmation takes 1 second to complete"
+        >
+          <Button>This confirmation takes 1 second to complete</Button>
+        </Confirm>
+        <p>
+          This also allows you to respond to display errors in the modal in the case of
+          network errors.
+        </p>
+        <Confirm
+          onConfirm={() => new Promise((_, reject) => setTimeout(reject, 1000))}
+          header="Are you sure?"
+          message="This confirmation will error"
+          errorMessage="Custom error message"
+        >
+          <Button>This confirmation will error</Button>
+        </Confirm>
+      </Fragment>
+    );
+  });
+
   story('Callbacks & bypass={true}', () => {
     const [callbacks, setCallbacks] = useState<string[]>([]);
     return (
diff --git a/static/app/components/confirm.tsx b/static/app/components/confirm.tsx
@@ -2,6 +2,7 @@ import {cloneElement, Fragment, isValidElement, useRef, useState} from 'react';
 
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {openModal} from 'sentry/actionCreators/modal';
+import {Alert} from 'sentry/components/core/alert';
 import type {ButtonProps} from 'sentry/components/core/button';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
@@ -71,6 +72,11 @@ export type OpenConfirmOptions = {
    * `disableConfirmButton` function that you may use to control the state of it.
    */
   disableConfirmButton?: boolean;
+  /**
+   * Message to display to user when an error occurs. Only used if `onConfirmAsync` is
+   * provided and the promise rejects.
+   */
+  errorMessage?: React.ReactNode;
   /**
    * Header of modal
    */
@@ -95,8 +101,11 @@ export type OpenConfirmOptions = {
   onClose?: () => void;
   /**
    * Callback when user confirms
+   *
+   * If you pass a promise, the modal will not close until it resolves.
+   * To customize the error message in case of rejection, pass the `errorMessage` prop.
    */
-  onConfirm?: () => void;
+  onConfirm?: () => void | Promise<void>;
   /**
    * Callback function when user is in the confirming state called when the
    * confirm modal is opened
@@ -224,6 +233,7 @@ type ModalProps = ModalRenderProps &
     | 'onCancel'
     | 'disableConfirmButton'
     | 'onRender'
+    | 'errorMessage'
   >;
 
 function ConfirmModal({
@@ -242,12 +252,14 @@ function ConfirmModal({
   onConfirm,
   renderMessage,
   message,
+  errorMessage = t('Something went wrong. Please try again.'),
   closeModal,
 }: ModalProps) {
   const confirmCallbackRef = useRef<() => void>(() => {});
   const isConfirmingRef = useRef(false);
   const [shouldDisableConfirmButton, setShouldDisableConfirmButton] =
     useState(disableConfirmButton);
+  const [isError, setIsError] = useState(false);
 
   const handleClose = () => {
     onCancel?.();
@@ -258,14 +270,27 @@ function ConfirmModal({
     closeModal();
   };
 
-  const handleConfirm = () => {
-    if (!isConfirmingRef.current) {
-      onConfirm?.();
-      confirmCallbackRef.current();
+  const handleConfirm = async () => {
+    if (isConfirmingRef.current) {
+      return;
     }
 
-    setShouldDisableConfirmButton(true);
     isConfirmingRef.current = true;
+    setShouldDisableConfirmButton(true);
+
+    if (onConfirm) {
+      try {
+        await onConfirm();
+      } catch (error) {
+        setIsError(true);
+        setShouldDisableConfirmButton(disableConfirmButton ?? false);
+        return;
+      } finally {
+        isConfirmingRef.current = false;
+      }
+    }
+
+    confirmCallbackRef.current();
     closeModal();
   };
 
@@ -290,7 +315,14 @@ function ConfirmModal({
   return (
     <Fragment>
       {header && <Header>{header}</Header>}
-      <Body>{makeConfirmMessage()}</Body>
+      <Body>
+        {isError && (
+          <Alert.Container>
+            <Alert type="error">{errorMessage}</Alert>
+          </Alert.Container>
+        )}
+        {makeConfirmMessage()}
+      </Body>
       <Footer>
         <ButtonBar gap={2}>
           {renderCancelButton ? (
diff --git a/static/app/views/alerts/rules/issue/index.tsx b/static/app/views/alerts/rules/issue/index.tsx
@@ -1204,7 +1204,9 @@ class IssueRuleEditor extends DeprecatedAsyncComponent<Props, State> {
                 disabled={disabled}
                 priority="danger"
                 confirmText={t('Delete Rule')}
-                onConfirm={this.handleDeleteRule}
+                onConfirm={() => {
+                  this.handleDeleteRule();
+                }}
                 header={<h5>{t('Delete Alert Rule?')}</h5>}
                 message={t(
                   'Are you sure you want to delete "%s"? You won\'t be able to view the history of this alert once it\'s deleted.',
diff --git a/static/app/views/alerts/rules/metric/ruleForm.tsx b/static/app/views/alerts/rules/metric/ruleForm.tsx
@@ -1352,7 +1352,9 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
                       header={<h5>{t('Delete Alert Rule?')}</h5>}
                       priority="danger"
                       confirmText={t('Delete Rule')}
-                      onConfirm={this.handleDeleteRule}
+                      onConfirm={() => {
+                        this.handleDeleteRule();
+                      }}
                     >
                       <Button priority="danger">{t('Delete Rule')}</Button>
                     </Confirm>
diff --git a/static/app/views/settings/account/accountClose.tsx b/static/app/views/settings/account/accountClose.tsx
@@ -109,8 +109,10 @@ function AccountClose() {
         data: {organizations: Array.from(orgsToRemove)},
       });
 
-      openModal(GoodbyeModalContent, {
-        onClose: leaveRedirect,
+      requestAnimationFrame(() => {
+        openModal(GoodbyeModalContent, {
+          onClose: leaveRedirect,
+        });
       });
 
       // Redirect after 10 seconds
diff --git a/static/app/views/settings/account/confirmAccountClose.tsx b/static/app/views/settings/account/confirmAccountClose.tsx
@@ -13,7 +13,9 @@ export function ConfirmAccountClose({
       message={t(
         'WARNING! This is permanent and cannot be undone, are you really sure you want to do this?'
       )}
-      onConfirm={handleRemoveAccount}
+      onConfirm={() => {
+        handleRemoveAccount();
+      }}
     >
       <Button priority="danger">{t('Close Account')}</Button>
     </Confirm>
diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx
@@ -318,13 +318,15 @@ export default function SentryApplicationDetails(props: Props) {
   };
 
   const rotateClientSecret = async () => {
-    try {
-      const rotateResponse = await api.requestPromise(
-        `/sentry-apps/${appSlug}/rotate-secret/`,
-        {
-          method: 'POST',
-        }
-      );
+    const rotateResponse = await api.requestPromise(
+      `/sentry-apps/${appSlug}/rotate-secret/`,
+      {
+        method: 'POST',
+      }
+    );
+
+    // Ensures that the modal is opened after the confirmation modal closes itself
+    requestAnimationFrame(() => {
       openModal(({Body, Header}) => (
         <Fragment>
           <Header>{t('Your new Client Secret')}</Header>
@@ -340,9 +342,7 @@ export default function SentryApplicationDetails(props: Props) {
           </Body>
         </Fragment>
       ));
-    } catch {
-      addErrorMessage(t('Error rotating secret'));
-    }
+    });
   };
 
   const onFieldChange = (name: string, value: FieldValue): void => {
@@ -546,6 +546,7 @@ export default function SentryApplicationDetails(props: Props) {
                             message={t(
                               'Are you sure you want to rotate the client secret? The current one will not be usable anymore, and this cannot be undone.'
                             )}
+                            errorMessage={t('Error rotating secret')}
                           >
                             <Button priority="danger">Rotate client secret</Button>
                           </Confirm>
diff --git a/static/app/views/settings/organizationIntegrations/installedPlugin.tsx b/static/app/views/settings/organizationIntegrations/installedPlugin.tsx
@@ -143,7 +143,9 @@ class InstalledPlugin extends Component<Props> {
               onConfirming={this.handleUninstallClick}
               disabled={!hasAccess}
               confirmText="Delete Installation"
-              onConfirm={() => this.handleReset()}
+              onConfirm={() => {
+                this.handleReset();
+              }}
               message={this.getConfirmMessage()}
             >
               <StyledButton
diff --git a/static/app/views/settings/organizationTeams/teamSettings/index.tsx b/static/app/views/settings/organizationTeams/teamSettings/index.tsx
@@ -126,7 +126,9 @@ function TeamSettings({team, params}: TeamSettingsProps) {
           <div>
             <Confirm
               disabled={isIdpProvisioned || !hasTeamAdmin}
-              onConfirm={handleRemoveTeam}
+              onConfirm={() => {
+                handleRemoveTeam();
+              }}
               priority="danger"
               message={tct('Are you sure you want to remove the team [team]?', {
                 team: `#${team.slug}`,
diff --git a/static/app/views/settings/project/projectKeys/details/keySettings.tsx b/static/app/views/settings/project/projectKeys/details/keySettings.tsx
@@ -172,7 +172,9 @@ export function KeySettings({
                     message={t(
                       'Are you sure you want to revoke this key? This will immediately remove and suspend the credentials.'
                     )}
-                    onConfirm={handleRemove}
+                    onConfirm={() => {
+                      handleRemove();
+                    }}
                     confirmText={t('Revoke Key')}
                     disabled={!hasAccess}
                   >
diff --git a/static/app/views/settings/projectGeneralSettings/index.tsx b/static/app/views/settings/projectGeneralSettings/index.tsx
@@ -214,7 +214,9 @@ function ProjectGeneralSettings({onChangeSlug}: Props) {
 
         {isOrgOwner && !isInternal && (
           <Confirm
-            onConfirm={handleTransferProject}
+            onConfirm={() => {
+              handleTransferProject();
+            }}
             priority="danger"
             confirmText={t('Transfer project')}
             renderMessage={({confirm}) => (
diff --git a/static/gsAdmin/views/userDetails.tsx b/static/gsAdmin/views/userDetails.tsx
diff --git a/static/gsApp/views/spendAllocations/index.tsx b/static/gsApp/views/spendAllocations/index.tsx
diff --git a/static/gsApp/views/spikeProtection/spikeProtectionProjects.tsx b/static/gsApp/views/spikeProtection/spikeProtectionProjects.tsx
