ref: migrate externalIssues to scrapsForm by TkDodo · Pull Request #112094 · getsentry/sentry

TkDodo · 2026-04-02T11:59:13Z

This PR migrates externalIssues - both the ExternalIssueFor and the TicketRuleModal over to the new form system with the BackendJsonFormAdapter.

Note that the previous adapter version we had only supported auto-save fields because of settings, so this PR adds “normal” forms:

BackendJsonAutoSaveForm for auto-save
BackendJsonSubmitForm` for regular forms

Rendering is “duplicated” on purpose, the fields, schemas and some utils are shared though. On type level, it’s quite hard to create an abstraction that can be shared between auto-save and submit, as auto-save creates one form per field.

…-select handling

…tForm

…ndformadapter

linear-code · 2026-04-02T11:59:16Z

DE-1052 externalIssues to backendFormAdapter

github-actions · 2026-04-02T12:01:13Z

🚨 Warning: This pull request contains Frontend and Backend changes!

It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently.

Have questions? Please ask in the #discuss-dev-infra channel.

static/app/components/externalIssues/externalIssueForm.tsx

…ndformadapter

…able

priscilawebdev · 2026-04-07T11:40:48Z

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx

+    if (field.required) {
+      shape[field.name] = z
+        .any()
+        .refine(val => val !== null && val !== undefined && val !== '', {


should we use .trim() here? AFAIK Django does that by default

thank you!. shouldn't we check if the message 'this field is required' is displayed?

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx

…ndformadapter

static/app/components/externalIssues/ticketRuleModal.tsx

priscilawebdev · 2026-04-07T17:43:10Z

static/app/components/externalIssues/externalIssueForm.tsx


  const hasFormErrors = useMemo(() => {
-    return hasErrorInFields({fields: formFields});
+    return formFields.some(field => field.name === 'error' && field.type === 'blank');


does this need to be inside of a useMemo?

nope. claude is so eager with those: a39ea1f

priscilawebdev · 2026-04-07T17:49:43Z

static/app/components/externalIssues/ticketRuleModal.tsx

-      bodyText={
+    <Fragment>
+      <Header closeButton>
+        <h4>{title}</h4>


don't we want to have Heading here?

Suggested change

<h4>{title}</h4>

<Heading as="h4">{title}</Heading>

thanks, I missed one: dee0e81

priscilawebdev · 2026-04-08T07:37:15Z

static/app/components/externalIssues/ticketRuleModal.spec.tsx

+          link=""
+          ticketType=""
+          instance={{
+            integration: 1 as any,


Suggested change

integration: 1 as any,

integration: '1',

priscilawebdev · 2026-04-08T07:44:16Z

static/app/components/externalIssues/externalIssueForm.spec.tsx

+      // Both values should be visible as selected tags
+      expect(screen.getAllByText('bug').length).toBeGreaterThanOrEqual(1);
+      expect(screen.getAllByText('feature').length).toBeGreaterThanOrEqual(1);


I think this is a bit vague. It's possible that similar words could appear elsewhere on the page, which might lead to false positives. Wouldn't it be better to verify that these values are actually being passed on submit instead?

we didn’t really make a request, but now we do: 35ef6f1

priscilawebdev · 2026-04-08T07:45:33Z

static/app/components/externalIssues/externalIssueForm.spec.tsx

+      await userEvent.click(screen.getByRole('button', {name: 'Create Issue'}));
+
+      // Should NOT have made an API request
+      expect(submitRequest).not.toHaveBeenCalled();
+      expect(closeModal).not.toHaveBeenCalled();


shouldn't we check if a user gets a feedback? similar to the test below

the error toast in the test below is a feature of the mutation, which needs to happen in code we made here. the indicator being shown to the user is a feature of the form elements, which is something we check in the form field tests. but we can check if the fields are invalid: bcdc94b

priscilawebdev · 2026-04-08T07:51:07Z

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.spec.tsx

+      // Simulate backend returning HTML error page or non-array response
+      MockApiClient.addMockResponse({
+        url: '/search',
+        body: '<html>502 Bad Gateway</html>' as any,


shouldn't we use the status code here instead, so we can remove the any?

we need a successful non-json to be returned for this test. but we can remove the assertion: 8ff81cf

priscilawebdev · 2026-04-08T08:18:42Z

I just tested the changes with the GitHub integration, and everything worked exactly as expected 🙌

…ndformadapter

leeandher

looks good! wasn't super exhaustive but pulled it locally to review and it seemed totally fine. ran it locally and tested with jira for dynamic form fields, worked great! changes triggered new renders of the fields, previous values persisted, and the final submission matched the ui <3 thank you for working through this!

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx

static/app/components/backendJsonFormAdapter/types.ts

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx

static/app/components/externalIssues/externalIssueForm.tsx

…ndformadapter

TkDodo added 12 commits April 1, 2026 14:03

ref: first attempt to re-write externalIssuesForm

4c38b11

ref: use a key instead of a useEffect

5338d64

fix: field validation errors and schema

c977f73

ref: update default value retrieval for form fields and enhance multi…

ce5bd08

…-select handling

ref: success notifications

5d2a110

heading

80346a1

ref: inline field for better type inference

08264bd

ref: migrate ticketRuleModal to scraps form

ea6973e

merge master

c618103

ref: distinguish between backendJsonAutoSaveForm and backendJsonSubmi…

0384385

…tForm

backendJsonSubmitForm tests

92e4494

Merge branch 'master' into tkdodo/ref/de-1052-externalissues-to-backe…

af8073d

…ndformadapter

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

codeowners

b496885

github-actions bot added the Scope: Backend Automatically applied to PRs that change backend components label Apr 2, 2026

✂️ knip it

b548bcb

vercel bot deployed to Preview April 2, 2026 12:04 View deployment

fix: guard against invalid response format

43ec621

vercel bot deployed to Preview April 2, 2026 13:15 View deployment

TkDodo marked this pull request as ready for review April 2, 2026 17:03

TkDodo requested review from a team as code owners April 2, 2026 17:03

sentry bot reviewed Apr 2, 2026

View reviewed changes

static/app/components/externalIssues/externalIssueForm.tsx Show resolved Hide resolved

static/app/components/externalIssues/externalIssueForm.tsx Show resolved Hide resolved

cursor bot reviewed Apr 2, 2026

View reviewed changes

static/app/components/externalIssues/externalIssueForm.tsx Show resolved Hide resolved

TkDodo added 2 commits April 3, 2026 09:55

Merge branch 'master' into tkdodo/ref/de-1052-externalissues-to-backe…

9837e61

…ndformadapter

ref(externalIssueForm): replace submitSpan state with local span vari…

38031c4

…able

vercel bot deployed to Preview April 3, 2026 08:01 View deployment

priscilawebdev mentioned this pull request Apr 7, 2026

ref(plugins): migrate plugin config to BackendJsonSubmitForm #112340

Draft

priscilawebdev reviewed Apr 7, 2026

View reviewed changes

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx Show resolved Hide resolved

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx Outdated Show resolved Hide resolved

priscilawebdev reviewed Apr 7, 2026

View reviewed changes

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx Show resolved Hide resolved

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx Show resolved Hide resolved

TkDodo added 3 commits April 7, 2026 14:37

fix: trim

8fb17f6

fix: type for SubmitButton

b3f64fc

Merge branch 'master' into tkdodo/ref/de-1052-externalissues-to-backe…

cc48cab

…ndformadapter

vercel bot deployed to Preview April 7, 2026 12:49 View deployment

sentry bot reviewed Apr 7, 2026

View reviewed changes

static/app/components/externalIssues/ticketRuleModal.tsx Show resolved Hide resolved

priscilawebdev reviewed Apr 7, 2026

View reviewed changes

priscilawebdev reviewed Apr 8, 2026

View reviewed changes

TkDodo added 7 commits April 8, 2026 13:30

remove unnecessary useMemo

a39ea1f

h4 -> Heading

dee0e81

assert error

ad15416

no-as-any

7c906b2

assert request being made

35ef6f1

no as-any

8ff81cf

check for fields to be invalid

bcdc94b

vercel bot deployed to Preview April 8, 2026 12:04 View deployment

Merge branch 'master' into tkdodo/ref/de-1052-externalissues-to-backe…

696fbce

…ndformadapter

vercel bot deployed to Preview April 8, 2026 17:31 View deployment

leeandher approved these changes Apr 8, 2026

View reviewed changes

TkDodo added 3 commits April 9, 2026 09:31

ref: remove redundant check

a9775f1

add missing unreachable

406d547

Merge branch 'master' into tkdodo/ref/de-1052-externalissues-to-backe…

fe28f7d

…ndformadapter

vercel bot deployed to Preview April 9, 2026 07:36 View deployment

TkDodo merged commit fe82c02 into master Apr 9, 2026
57 checks passed

TkDodo deleted the tkdodo/ref/de-1052-externalissues-to-backendformadapter branch April 9, 2026 09:10

Uh oh!

Conversation

TkDodo commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear-code bot commented Apr 2, 2026

Uh oh!

github-actions bot commented Apr 2, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priscilawebdev commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leeandher left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TkDodo commented Apr 2, 2026 •

edited

Loading

priscilawebdev commented Apr 8, 2026 •

edited

Loading