ref(forms): Migrate addCodeOwnerModal off legacy Form by priscilawebdev · Pull Request #115256 · getsentry/sentry

priscilawebdev · 2026-05-11T07:13:01Z

closes https://linear.app/getsentry/issue/DE-999/migrate-projectownershipaddcodeownermodaltsx-from-legacy-form-system

Replace the legacy Form + SelectField wrapper with useScrapsForm and field.Select. The form value drives the codeowners file query via useStore, keeping behavior identical while removing the deprecated form system. Refs LINEAR-DE-999

github-actions · 2026-05-11T07:16:35Z

📊 Type Coverage Diff

Metric	Before	After	Delta
Coverage	93.47%	93.47%	±0%
Typed	135,132	135,138	🟢 +6
Untyped	9,437	9,437	±0

🔍 2 new type safety issues introduced

any-typed symbols (2 new)

File	Line	Detail
`static/app/views/settings/project/projectOwnership/addCodeOwnerModal.tsx`	104	`Body` (param(binding))
`static/app/views/settings/project/projectOwnership/addCodeOwnerModal.tsx`	105	`Footer` (param(binding))

This is informational only and does not block the PR.

Use Stack with gap to space the select and result panel, and override the Panel's default margin-bottom so spacing is driven entirely by the Stack layout primitive.

The integrations query was fetched eagerly in the parent but only used in the LinkCodeOwners branch, which renders when no code mappings exist. Move the query into that component so it only runs when needed, and switch from the deprecated useApiQuery to apiOptions + useQuery.

Follow the form.Subscribe pattern: extract CodeownersFileStatus and AddFileButton sub-components, each subscribing to the codeMappingId field where it is consumed. The shared useCodeownersFile hook reuses react-query's cache so only one fetch runs. Also inlines the now-single-use baseUrl in ApplyCodeMappings.

- Drop redundant aria-label on Add File button (visible text already provides the accessible name) - Wrap the Setup Integration LinkButton text in t() - Remove duplicate text inside the tct strong tag; tct injects the template's inner text as children

- Panel + styled PanelBody grids -> Container + Grid - IntegrationsList styled div -> Stack with paddingTop - LinkButton with child icon + styled name -> icon prop - Bare div text -> Text as=p - Drops styled, Panel, PanelBody imports

Replace raw <p> tags with the scraps Text component per the design system guidelines.

SourceFile and NoSourceFile each wrapped their grid in an identical Container. Move the wrapper up into CodeownersFileStatus so the children just render the grid layout.

Replace findByRole on the always-present button with an explicit waitFor on the enabled state, since what we actually need to wait for is the codeownersFile mock to resolve.

space.md is 8px in scraps but the legacy panel used 12px. Use lg (12px) to match the original spacing.

- Check err instanceof RequestError and fall back to a generic toast for unexpected error shapes, matching the form-migration reference pattern. - Drop gcTime: 0 — redundant for a component-scoped useMutation with no mutationKey.

priscilawebdev · 2026-05-11T08:51:15Z

bugbot run

linear-code · 2026-05-11T08:57:24Z

DE-999

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit c605a76. Configure here.}

Narrow mutationError.responseJSON.raw via typeof at the call site and pass it as a string prop to ErrorMessage. Replaces the as {raw?: string} cast that didn't match RequestError.responseJSON's actual unknown shape.

DRF returns serializer.errors as Record<string, string[]>, so responseJSON.raw is string[], not string. The legacy cast and my recent typeof string guard were both incorrect; with the typeof guard the inline ErrorMessage would never render. Narrow via Array.isArray + typeof rawError[0] === 'string', pass the first error message to ErrorMessage, and drop the rawError[0]! indexing inside ErrorMessage so we split the actual message string rather than its first character.

TkDodo · 2026-05-11T14:26:55Z

-        </Button>
+        <form.Subscribe selector={state => state.values.codeMappingId}>
+          {codeMappingId => (
+            <AddFileButton


shouldn’t this just be a <form.SubmitButton> and the mutation happens inside the onSubmit handler of the form? It’s a bit weird to have a form that we never actually submit ...

oh yes. Good catch! I will update that

TkDodo · 2026-05-11T14:27:17Z

-const StyledSelectField = styled(SelectField)`
-  border-bottom: None;
-  padding-right: 16px;
-`;
-const FileResult = styled('div')`
-  width: inherit;
-`;
-const NoSourceFileBody = styled(PanelBody)`
-  display: grid;
-  padding: 12px;
-  grid-template-columns: 30px 1fr;
-  align-items: center;
-`;
-const SourceFileBody = styled(PanelBody)`
-  display: grid;
-  padding: 12px;
-  grid-template-columns: 30px 1fr auto;
-  align-items: center;
-`;
-
-const IntegrationsList = styled('div')`
-  display: grid;
-  gap: ${p => p.theme.space.md};
-  justify-items: center;
-  margin-top: ${p => p.theme.space.xl};
-`;
-
-const IntegrationName = styled('p')`
-  padding-left: 10px;
-`;


this is the best kind of removal 🔥

it's for sure a good feeling haha

…rModal.tsx Co-authored-by: Dominik Dorfmeister 🔮 <dominik.dorfmeister@sentry.io>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a3b289c. Configure here.}

…e-addcodeownermodal

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 11, 2026

vercel Bot deployed to Preview May 11, 2026 07:14 View deployment

ref(forms): Fix addCodeOwnerModal spacing

141dcad

Use Stack with gap to space the select and result panel, and override the Panel's default margin-bottom so spacing is driven entirely by the Stack layout primitive.

vercel Bot deployed to Preview May 11, 2026 07:35 View deployment

vercel Bot deployed to Preview May 11, 2026 07:44 View deployment

vercel Bot deployed to Preview May 11, 2026 08:02 View deployment

vercel Bot deployed to Preview May 11, 2026 08:06 View deployment

vercel Bot deployed to Preview May 11, 2026 08:17 View deployment

priscilawebdev added 3 commits May 11, 2026 10:20

ref(forms): Use Text as=p in ErrorMessage

0c6d99b

Replace raw <p> tags with the scraps Text component per the design system guidelines.

ref(forms): Lift shared Container out of file panels

2f8e45e

SourceFile and NoSourceFile each wrapped their grid in an identical Container. Move the wrapper up into CodeownersFileStatus so the children just render the grid layout.

test(forms): Wait for Add File button to be enabled before clicking

f73115b

Replace findByRole on the always-present button with an explicit waitFor on the enabled state, since what we actually need to wait for is the codeownersFile mock to resolve.

vercel Bot deployed to Preview May 11, 2026 08:25 View deployment

ref(forms): Use space.lg for file panel padding

e3fd119

space.md is 8px in scraps but the legacy panel used 12px. Use lg (12px) to match the original spacing.

vercel Bot deployed to Preview May 11, 2026 08:45 View deployment

ref(forms): Tighten mutation error handling

c605a76

- Check err instanceof RequestError and fall back to a generic toast for unexpected error shapes, matching the form-migration reference pattern. - Drop gcTime: 0 — redundant for a component-scoped useMutation with no mutationKey.

vercel Bot deployed to Preview May 11, 2026 08:49 View deployment

cursor Bot reviewed May 11, 2026

View reviewed changes

ref(forms): Drop unsafe cast on ErrorMessage prop

ff5b4db

Narrow mutationError.responseJSON.raw via typeof at the call site and pass it as a string prop to ErrorMessage. Replaces the as {raw?: string} cast that didn't match RequestError.responseJSON's actual unknown shape.

vercel Bot deployed to Preview May 11, 2026 09:02 View deployment

vercel Bot deployed to Preview May 11, 2026 09:05 View deployment

priscilawebdev marked this pull request as ready for review May 11, 2026 09:10

priscilawebdev requested a review from a team as a code owner May 11, 2026 09:10

Merge branch 'master' into priscila/ref/migrate-addcodeownermodal

10aab06

TkDodo reviewed May 11, 2026

View reviewed changes

priscilawebdev and others added 2 commits May 12, 2026 08:23

Update static/app/views/settings/project/projectOwnership/addCodeOwne…

fd28d88

…rModal.tsx Co-authored-by: Dominik Dorfmeister 🔮 <dominik.dorfmeister@sentry.io>

Merge branch 'master' into priscila/ref/migrate-addcodeownermodal

a3b289c

vercel Bot deployed to Preview May 12, 2026 06:26 View deployment

vercel Bot deployed to Preview May 12, 2026 06:28 View deployment

cursor Bot reviewed May 12, 2026

View reviewed changes

Comment thread static/app/views/settings/project/projectOwnership/addCodeOwnerModal.tsx

priscilawebdev mentioned this pull request May 12, 2026

meta(ai): Add form submit + mutation guidance to migration skill #115358

Open

ref: submit mutation via form.SubmitButton

b52357b

vercel Bot deployed to Preview May 12, 2026 06:53 View deployment

priscilawebdev added 2 commits May 12, 2026 09:33

Merge remote-tracking branch 'origin/master' into priscila/ref/migrat…

6b630d9

…e-addcodeownermodal

fix(forms): narrow mutation.error to RequestError

b6a5902

vercel Bot deployed to Preview May 12, 2026 07:36 View deployment

priscilawebdev requested a review from TkDodo May 12, 2026 07:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ref(forms): Migrate addCodeOwnerModal off legacy Form#115256

ref(forms): Migrate addCodeOwnerModal off legacy Form#115256
priscilawebdev wants to merge 19 commits into
masterfrom
priscila/ref/migrate-addcodeownermodal

priscilawebdev commented May 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 11, 2026 •

edited

Loading

Uh oh!

priscilawebdev commented May 11, 2026

Uh oh!

linear-code Bot commented May 11, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

TkDodo May 11, 2026

Uh oh!

priscilawebdev May 12, 2026

Uh oh!

TkDodo May 11, 2026

Uh oh!

priscilawebdev May 12, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

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

Uh oh!

Uh oh!

github-actions Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Type Coverage Diff

Uh oh!

priscilawebdev commented May 11, 2026

Uh oh!

linear-code Bot commented May 11, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

TkDodo May 11, 2026

Choose a reason for hiding this comment

Uh oh!

priscilawebdev May 12, 2026

Choose a reason for hiding this comment

Uh oh!

TkDodo May 11, 2026

Choose a reason for hiding this comment

Uh oh!

priscilawebdev May 12, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

priscilawebdev commented May 11, 2026 •

edited

Loading

github-actions Bot commented May 11, 2026 •

edited

Loading