feat(billing): Disable submission form button when adding/removing credits #100807

dashed · 2025-10-02T17:49:20Z

Closes https://linear.app/getsentry/issue/BIL-232/credit-to-a-subscription-can-sometimes-get-duplicated-via-admin

Disable submission form button when adding/removing credits. This should prevent accidental double-clicks to add multiple credits.

linear · 2025-10-02T17:49:24Z

BIL-232 Credit to a subscription can sometimes get duplicated via _admin

codecov · 2025-10-02T17:54:29Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff            @@
##           master   #100807   +/-   ##
========================================
  Coverage   80.90%    80.90%           
========================================
  Files        8821      8821           
  Lines      389819    389819           
  Branches    24795     24795           
========================================
  Hits       315365    315365           
  Misses      74092     74092           
  Partials      362       362

ajay-sentry · 2025-10-08T23:21:09Z

static/gsAdmin/components/changeBalanceAction.spec.tsx

+  });
+
+  it('disables form fields during submission', async () => {
+    // Mock with delay to keep isSubmitting true during test


might not need many of these comments imo

ajay-sentry · 2025-10-08T23:23:55Z

static/gsAdmin/components/changeBalanceAction.tsx

        </p>
        <Form
          onSubmit={onSubmit}
          onCancel={closeModal}


There is also a submitDisabled prop too if we want to add that prop here as well

sentry/static/app/components/deprecatedforms/form.tsx

Line 51 in c90dbd3

submitDisabled: false,

ajay-sentry

nothing blocking, just a couple thoughts

Add submitDisabled prop to Form component to properly disable the submit button during form submission, utilizing the built-in Form API. Also update tests to verify submit button disabled state.

The PR I merged recently #100807 introduced a flaky frontend test: ``` Summary of all failing tests FAIL static/gsAdmin/components/changeBalanceAction.spec.tsx ● BalanceChangeAction › re-enables form after error Unable to perform pointer interaction as the element inherits `pointer-events: none`: DIV <-- This element declared `pointer-events: none` DIV DIV SECTION FORM DIV BUTTON(label=Submit) <-- Asserted pointer events here 184 | await waitFor(() => expect(creditInput).toHaveValue(10)); 185 | > 186 | await userEvent.click(submitButton); | ^ 187 | 188 | // Wait for form to be re-enabled after error 189 | // Don't rely on error message text as the Form component shows different messages at Object.assertPointerEvents (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/utils/pointer/cssPointerEvents.js:47:15) at Object.enter (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/system/pointer/pointer.js:52:34) at PointerHost.move (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:53:85) at pointerAction (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:59:39) at Object.pointer (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:27:15) at Object.asyncWrapper (node_modules/.pnpm/@testing-library+react@16.2.0_@testing-library+dom@10.4.0_@types+react-dom@19.2.0_@type_011f94990cdc27509fa142ae9e3c3bf5/node_modules/@testing-library/react/dist/pure.js:88:22) at Object.<anonymous> (static/gsAdmin/components/changeBalanceAction.spec.tsx:186:5) Test Suites: 1 failed, 407 passed, 408 total Tests: 1 failed, 1 skipped, 3040 passed, 3042 total Snapshots: 2 passed, 2 total Time: 266.043 s Ran all test suites. Force exiting Jest: Have you considered using `--detectOpenHandles` to detect async operations that kept running after all tests finished? ELIFECYCLE Command failed with exit code 1. Error: Process completed with exit code 1. ``` This PR should hopefully address this flakiness by: 1. waiting for button to be enabled 2. and by disabling the pointer-events check (similarly done in #95798)

…edits (#100807) Closes https://linear.app/getsentry/issue/BIL-232/credit-to-a-subscription-can-sometimes-get-duplicated-via-admin Disable submission form button when adding/removing credits. This should prevent accidental double-clicks to add multiple credits.

The PR I merged recently #100807 introduced a flaky frontend test: ``` Summary of all failing tests FAIL static/gsAdmin/components/changeBalanceAction.spec.tsx ● BalanceChangeAction › re-enables form after error Unable to perform pointer interaction as the element inherits `pointer-events: none`: DIV <-- This element declared `pointer-events: none` DIV DIV SECTION FORM DIV BUTTON(label=Submit) <-- Asserted pointer events here 184 | await waitFor(() => expect(creditInput).toHaveValue(10)); 185 | > 186 | await userEvent.click(submitButton); | ^ 187 | 188 | // Wait for form to be re-enabled after error 189 | // Don't rely on error message text as the Form component shows different messages at Object.assertPointerEvents (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/utils/pointer/cssPointerEvents.js:47:15) at Object.enter (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/system/pointer/pointer.js:52:34) at PointerHost.move (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/system/pointer/index.js:53:85) at pointerAction (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:59:39) at Object.pointer (node_modules/.pnpm/@testing-library+user-event@14.6.1_@testing-library+dom@10.4.0/node_modules/@testing-library/user-event/dist/cjs/pointer/index.js:27:15) at Object.asyncWrapper (node_modules/.pnpm/@testing-library+react@16.2.0_@testing-library+dom@10.4.0_@types+react-dom@19.2.0_@type_011f94990cdc27509fa142ae9e3c3bf5/node_modules/@testing-library/react/dist/pure.js:88:22) at Object.<anonymous> (static/gsAdmin/components/changeBalanceAction.spec.tsx:186:5) Test Suites: 1 failed, 407 passed, 408 total Tests: 1 failed, 1 skipped, 3040 passed, 3042 total Snapshots: 2 passed, 2 total Time: 266.043 s Ran all test suites. Force exiting Jest: Have you considered using `--detectOpenHandles` to detect async operations that kept running after all tests finished? ELIFECYCLE Command failed with exit code 1. Error: Process completed with exit code 1. ``` This PR should hopefully address this flakiness by: 1. waiting for button to be enabled 2. and by disabling the pointer-events check (similarly done in #95798)

dashed requested a review from a team October 2, 2025 17:49

dashed self-assigned this Oct 2, 2025

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Oct 2, 2025

vercel bot deployed to Preview October 2, 2025 17:50 View deployment

dashed force-pushed the billing/BIL-232 branch from 4b1b42a to f5f5346 Compare October 2, 2025 18:19

vercel bot deployed to Preview October 2, 2025 18:21 View deployment

dashed force-pushed the billing/BIL-232 branch from f5f5346 to a9c4e27 Compare October 2, 2025 18:29

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview October 2, 2025 18:31 View deployment

dashed force-pushed the billing/BIL-232 branch from a9c4e27 to 4c9afa9 Compare October 6, 2025 19:42

vercel bot deployed to Preview October 6, 2025 19:44 View deployment

vercel bot deployed to Preview October 6, 2025 20:30 View deployment

dashed force-pushed the billing/BIL-232 branch from 019d205 to a97aaf6 Compare October 7, 2025 17:46

vercel bot deployed to Preview October 7, 2025 17:48 View deployment

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview October 7, 2025 18:18 View deployment

vercel bot deployed to Preview October 7, 2025 18:31 View deployment

dashed force-pushed the billing/BIL-232 branch from 2b0c610 to 944440a Compare October 7, 2025 18:44

vercel bot deployed to Preview October 7, 2025 18:46 View deployment

dashed force-pushed the billing/BIL-232 branch from 944440a to 121d7ef Compare October 7, 2025 19:04

vercel bot deployed to Preview October 7, 2025 19:06 View deployment

ajay-sentry reviewed Oct 8, 2025

View reviewed changes

ajay-sentry approved these changes Oct 8, 2025

View reviewed changes

vbro approved these changes Oct 16, 2025

View reviewed changes

dashed added 3 commits October 30, 2025 13:09

feat(billing): Disable submission form when adding/removing credits

1f16761

fix test

6f9a50a

ref(billing): Use submitDisabled prop to disable submit button

7c8833b

Add submitDisabled prop to Form component to properly disable the submit button during form submission, utilizing the built-in Form API. Also update tests to verify submit button disabled state.

dashed force-pushed the billing/BIL-232 branch from 121d7ef to 7c8833b Compare October 30, 2025 18:45

vercel bot deployed to Preview October 30, 2025 18:48 View deployment

dashed merged commit cb68fa8 into master Oct 30, 2025
48 checks passed

dashed deleted the billing/BIL-232 branch October 30, 2025 19:43

dashed mentioned this pull request Oct 31, 2025

test(gsAdmin): fix flaky changeBalanceAction test in CI #102475

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(billing): Disable submission form button when adding/removing credits #100807

feat(billing): Disable submission form button when adding/removing credits #100807

Uh oh!

dashed commented Oct 2, 2025

Uh oh!

linear bot commented Oct 2, 2025

Uh oh!

codecov bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

ajay-sentry Oct 8, 2025

Uh oh!

ajay-sentry Oct 8, 2025

Uh oh!

ajay-sentry left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

feat(billing): Disable submission form button when adding/removing credits #100807

feat(billing): Disable submission form button when adding/removing credits #100807

Uh oh!

Conversation

dashed commented Oct 2, 2025

Uh oh!

linear bot commented Oct 2, 2025

Uh oh!

codecov bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

ajay-sentry Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

ajay-sentry Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

ajay-sentry left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov bot commented Oct 2, 2025 •

edited

Loading