ref: migrate externalIssues to scrapsForm (#112094)

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.

Author: TkDodo

.github/CODEOWNERS

@@ -832,6 +832,7 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py          @get
 /static/app/components/core/                          @getsentry/design-engineering
 /static/app/components/dnd/                           @getsentry/design-engineering
 /static/app/components/pageFilters/                   @getsentry/design-engineering
+/static/app/components/backendJsonFormAdapter/        @getsentry/design-engineering
 /static/app/icons/                                    @getsentry/design-engineering
 /static/app/stories/                                  @getsentry/design-engineering
 /static/app/components/commandPalette/                @getsentry/design-engineering

…ts/backendJsonFormAdapter/index.spec.tsx …Adapter/backendJsonAutoSaveForm.spec.tsxstatic/app/components/backendJsonFormAdapter/index.spec.tsx renamed to static/app/components/backendJsonFormAdapter/backendJsonAutoSaveForm.spec.tsx static/app/components/backendJsonFormAdapter/index.spec.tsx renamed to static/app/components/backendJsonFormAdapter/backendJsonAutoSaveForm.spec.tsx

@@ -2,17 +2,17 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {BackendJsonFormAdapter} from './';
+import {BackendJsonAutoSaveForm} from './backendJsonAutoSaveForm';
 
 const org = OrganizationFixture();
 const mutationOptions = {
   mutationFn: jest.fn().mockResolvedValue({}),
 };
 
-describe('BackendJsonFormAdapter', () => {
+describe('BackendJsonAutoSaveForm', () => {
   it('renders boolean field as Switch', () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'sync_enabled',
           type: 'boolean',
@@ -31,7 +31,7 @@ describe('BackendJsonFormAdapter', () => {
 
   it('renders text field as Input', () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'webhook_url',
           type: 'string',
@@ -51,7 +51,7 @@ describe('BackendJsonFormAdapter', () => {
 
   it('renders select field with options', () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'priority',
           type: 'select',
@@ -75,7 +75,7 @@ describe('BackendJsonFormAdapter', () => {
 
   it('renders table field with add button', () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'table_field',
           type: 'table',
@@ -93,7 +93,7 @@ describe('BackendJsonFormAdapter', () => {
 
   it('boolean toggle triggers POST', async () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'sync_enabled',
           type: 'boolean',
@@ -118,7 +118,7 @@ describe('BackendJsonFormAdapter', () => {
 
   it('handles disabled fields', () => {
     render(
-      <BackendJsonFormAdapter
+      <BackendJsonAutoSaveForm
         field={{
           name: 'sync_enabled',
           type: 'boolean',

…ponents/backendJsonFormAdapter/index.tsx …nFormAdapter/backendJsonAutoSaveForm.tsxstatic/app/components/backendJsonFormAdapter/index.tsx renamed to static/app/components/backendJsonFormAdapter/backendJsonAutoSaveForm.tsx static/app/components/backendJsonFormAdapter/index.tsx renamed to static/app/components/backendJsonFormAdapter/backendJsonAutoSaveForm.tsx

@@ -11,71 +11,7 @@ import {ChoiceMapperDropdown, ChoiceMapperTable} from './choiceMapperAdapter';
 import {ProjectMapperAddRow, ProjectMapperTable} from './projectMapperAdapter';
 import {TableBody, TableHeaderRow} from './tableAdapter';
 import type {FieldValue, JsonFormAdapterFieldConfig} from './types';
-
-function getZodType(fieldType: JsonFormAdapterFieldConfig['type']) {
-  switch (fieldType) {
-    case 'boolean':
-      return z.boolean();
-    case 'string':
-    case 'text':
-    case 'secret':
-    case 'textarea':
-      return z.string();
-    case 'number':
-      return z.number();
-    case 'email':
-      return z.email();
-    case 'url':
-      return z.url();
-    case 'choice_mapper':
-      return z.object({});
-    case 'project_mapper':
-    case 'table':
-      return z.array(z.any());
-    case 'select':
-    case 'choice':
-      return z.any();
-    default:
-      unreachable(fieldType);
-      return z.any();
-  }
-}
-
-function transformChoices(
-  choices?: Array<[value: string, label: string]>
-): Array<{label: string; value: string}> {
-  if (!choices) {
-    return [];
-  }
-  return choices.map(([value, label]) => ({value, label}));
-}
-
-function getDefaultForType(fieldType: JsonFormAdapterFieldConfig['type']): unknown {
-  switch (fieldType) {
-    case 'boolean':
-      return false;
-    case 'string':
-    case 'text':
-    case 'url':
-    case 'email':
-    case 'secret':
-    case 'textarea':
-      return '';
-    case 'number':
-      return 0;
-    case 'choice_mapper':
-      return {};
-    case 'project_mapper':
-    case 'table':
-      return [];
-    case 'select':
-    case 'choice':
-      return null;
-    default:
-      unreachable(fieldType);
-      return '';
-  }
-}
+import {getDefaultForField, getZodType, transformChoices} from './utils';
 
 interface BackendJsonFormAdapterProps<
   TField extends JsonFormAdapterFieldConfig,
@@ -87,7 +23,7 @@ interface BackendJsonFormAdapterProps<
   initialValue?: FieldValue<TField>;
 }
 
-export function BackendJsonFormAdapter<
+export function BackendJsonAutoSaveForm<
   TField extends JsonFormAdapterFieldConfig,
   TData,
   TContext,
@@ -104,7 +40,7 @@ export function BackendJsonFormAdapter<
     [fieldName, field.type]
   );
 
-  const value = initialValue ?? field.default ?? getDefaultForType(field.type);
+  const value = initialValue ?? field.default ?? getDefaultForField(field);
 
   if (field.type === 'table') {
     return (
@@ -304,6 +240,8 @@ export function BackendJsonFormAdapter<
                 />
               </fieldApi.Layout.Row>
             );
+          case 'blank':
+            return null;
           default:
             unreachable(field);
             return null;