ref(plugins): migrate plugin config to BackendJsonSubmitForm

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

@@ -315,6 +315,37 @@ describe('BackendJsonSubmitForm', () => {
       );
     });
 
+    it('preserves explicit null initialValues over field defaults', async () => {
+      render(
+        <BackendJsonSubmitForm
+          fields={[
+            {
+              name: 'priority',
+              type: 'select',
+              label: 'Priority',
+              choices: [
+                ['high', 'High'],
+                ['medium', 'Medium'],
+                ['low', 'Low'],
+              ],
+              default: 'medium',
+            },
+          ]}
+          initialValues={{priority: null}}
+          onSubmit={onSubmit}
+          submitLabel="Create"
+          isClearable
+        />,
+        {organization: org}
+      );
+
+      await userEvent.click(screen.getByRole('button', {name: 'Create'}));
+
+      await waitFor(() => {
+        expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({priority: null}));
+      });
+    });
+
     it('renders footer with SubmitButton when footer prop provided', () => {
       render(
         <BackendJsonSubmitForm

static/app/components/backendJsonFormAdapter/backendJsonSubmitForm.tsx

@@ -55,6 +55,11 @@ interface BackendJsonSubmitFormProps {
    * across form remounts.
    */
   initialValues?: Record<string, unknown>;
+  /**
+   * Enables clearing for single-select fields.
+   * Defaults to false to preserve existing behavior.
+   */
+  isClearable?: boolean;
   /**
    * Whether the form is in a loading state (e.g., dynamic field refetch in progress).
    */
@@ -115,8 +120,11 @@ function computeDefaultValues(
   const defaults: Record<string, unknown> = {};
   for (const field of fields) {
     if (field.name && field.type !== 'blank') {
+      const initialValue = initialValues?.[field.name];
       defaults[field.name] =
-        initialValues?.[field.name] ?? field.default ?? getDefaultForField(field);
+        initialValue === undefined
+          ? (field.default ?? getDefaultForField(field))
+          : initialValue;
     }
   }
   return defaults;
@@ -156,6 +164,7 @@ export function BackendJsonSubmitForm({
   onAsyncOptionsFetched,
   onFieldChange,
   footer,
+  isClearable = false,
 }: BackendJsonSubmitFormProps) {
   // Ref to avoid including the callback in queryKey (would cause refetches)
   const onAsyncOptionsFetchedRef = useRef(onAsyncOptionsFetched);
@@ -270,7 +279,7 @@ export function BackendJsonSubmitForm({
                         </fieldApi.Layout.Stack>
                       );
                     case 'select':
-                    case 'choice':
+                    case 'choice': {
                       if (field.url) {
                         // Async select: fetch options from URL as user types.
                         // Show static choices as initial options before any search.
@@ -318,8 +327,12 @@ export function BackendJsonSubmitForm({
                             >
                               <fieldApi.SelectAsync
                                 multiple
-                                value={(fieldApi.state.value as string[]) ?? []}
-                                onChange={handleChange}
+                                value={
+                                  (fieldApi.state.value as Array<string | number>) ?? []
+                                }
+                                onChange={(value: Array<string | number>) =>
+                                  handleChange(value)
+                                }
                                 disabled={field.disabled}
                                 queryOptions={asyncQueryOptions}
                               />
@@ -332,12 +345,28 @@ export function BackendJsonSubmitForm({
                             hintText={field.help}
                             required={field.required}
                           >
-                            <fieldApi.SelectAsync
-                              value={fieldApi.state.value as string | null}
-                              onChange={handleChange}
-                              disabled={field.disabled}
-                              queryOptions={asyncQueryOptions}
-                            />
+                            {isClearable ? (
+                              <fieldApi.SelectAsync
+                                clearable
+                                value={
+                                  (fieldApi.state.value ?? null) as string | number | null
+                                }
+                                onChange={(value: string | number | null) =>
+                                  handleChange(value)
+                                }
+                                disabled={field.disabled}
+                                queryOptions={asyncQueryOptions}
+                              />
+                            ) : (
+                              <fieldApi.SelectAsync
+                                value={
+                                  (fieldApi.state.value ?? null) as string | number | null
+                                }
+                                onChange={(value: string | number) => handleChange(value)}
+                                disabled={field.disabled}
+                                queryOptions={asyncQueryOptions}
+                              />
+                            )}
                           </fieldApi.Layout.Stack>
                         );
                       }
@@ -351,7 +380,7 @@ export function BackendJsonSubmitForm({
                             <fieldApi.Select
                               multiple
                               value={(fieldApi.state.value as string[]) ?? []}
-                              onChange={handleChange}
+                              onChange={(value: string[]) => handleChange(value)}
                               options={transformChoices(field.choices)}
                               disabled={field.disabled}
                             />
@@ -364,14 +393,25 @@ export function BackendJsonSubmitForm({
                           hintText={field.help}
                           required={field.required}
                         >
-                          <fieldApi.Select
-                            value={fieldApi.state.value as string | null}
-                            onChange={handleChange}
-                            options={transformChoices(field.choices)}
-                            disabled={field.disabled}
-                          />
+                          {isClearable ? (
+                            <fieldApi.Select
+                              clearable
+                              value={(fieldApi.state.value ?? null) as string | null}
+                              onChange={(value: string | null) => handleChange(value)}
+                              options={transformChoices(field.choices)}
+                              disabled={field.disabled}
+                            />
+                          ) : (
+                            <fieldApi.Select
+                              value={(fieldApi.state.value ?? null) as string | null}
+                              onChange={(value: string) => handleChange(value)}
+                              options={transformChoices(field.choices)}
+                              disabled={field.disabled}
+                            />
+                          )}
                         </fieldApi.Layout.Stack>
                       );
+                    }
                     case 'secret':
                       return (
                         <fieldApi.Layout.Stack

static/app/components/pluginConfig.spec.tsx

@@ -1,9 +1,7 @@
 import {WebhookPluginConfigFixture} from 'sentry-fixture/integrationListDirectory';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
-
-import {plugins} from 'sentry/plugins';
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {PluginConfig} from './pluginConfig';
 
@@ -16,19 +14,31 @@ describe('PluginConfig', () => {
     MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/${project.slug}/plugins/${webhookPlugin.id}/`,
       method: 'GET',
-      body: webhookPlugin,
+      body: {
+        ...webhookPlugin,
+        config: [
+          {
+            name: 'urls',
+            label: 'Callback URLs',
+            type: 'textarea',
+            placeholder: 'https://sentry.io/callback/url',
+            required: false,
+            help: 'Enter callback URLs, separated by newlines.',
+            value: 'https://example.com/hook',
+            defaultValue: '',
+          },
+        ],
+      },
     });
     const testWebhookMock = MockApiClient.addMockResponse({
       url: `/projects/${organization.slug}/${project.slug}/plugins/${webhookPlugin.id}/`,
       method: 'POST',
       body: {detail: 'No errors returned'},
     });
 
-    expect(plugins.isLoaded(webhookPlugin)).toBe(false);
     render(<PluginConfig plugin={webhookPlugin} project={project} />);
-    expect(plugins.isLoaded(webhookPlugin)).toBe(true);
 
-    await userEvent.click(screen.getByRole('button', {name: 'Test Plugin'}));
+    await userEvent.click(await screen.findByRole('button', {name: 'Test Plugin'}));
 
     expect(await screen.findByText('"No errors returned"')).toBeInTheDocument();
     expect(testWebhookMock).toHaveBeenCalledWith(
@@ -39,4 +49,113 @@ describe('PluginConfig', () => {
       })
     );
   });
+
+  it('renders config fields from backend', async () => {
+    const webhookPlugin = WebhookPluginConfigFixture({enabled: true});
+
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/plugins/${webhookPlugin.id}/`,
+      method: 'GET',
+      body: {
+        ...webhookPlugin,
+        config: [
+          {
+            name: 'urls',
+            label: 'Callback URLs',
+            type: 'textarea',
+            placeholder: 'https://sentry.io/callback/url',
+            required: false,
+            help: 'Enter callback URLs, separated by newlines.',
+            value: '',
+            defaultValue: '',
+          },
+        ],
+      },
+    });
+
+    render(<PluginConfig plugin={webhookPlugin} project={project} />);
+
+    expect(await screen.findByLabelText('Callback URLs')).toBeInTheDocument();
+  });
+
+  it('renders auth error state', async () => {
+    const webhookPlugin = WebhookPluginConfigFixture({enabled: true});
+
+    MockApiClient.addMockResponse({
+      url: `/projects/${organization.slug}/${project.slug}/plugins/${webhookPlugin.id}/`,
+      method: 'GET',
+      body: {
+        ...webhookPlugin,
+        config_error: 'You need to associate an identity',
+        auth_url: '/auth/associate/webhooks/',
+      },
+    });
+
+    render(<PluginConfig plugin={webhookPlugin} project={project} />);
+
+    expect(
+      await screen.findByText('You need to associate an identity')
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Associate Identity'})).toBeInTheDocument();
+  });
+
+  it('submits typed defaults for unsaved boolean and select fields', async () => {
+    const webhookPlugin = WebhookPluginConfigFixture({enabled: true});
+    const url = `/projects/${organization.slug}/${project.slug}/plugins/${webhookPlugin.id}/`;
+
+    const configBody = {
+      ...webhookPlugin,
+      config: [
+        {
+          name: 'auto_create',
+          label: 'Automatically create tickets',
+          type: 'bool',
+          required: false,
+        },
+        {
+          name: 'repository',
+          label: 'Repository',
+          type: 'select',
+          choices: [
+            ['', 'select a repo'],
+            ['getsentry/sentry', 'getsentry/sentry'],
+          ],
+          required: false,
+        },
+      ],
+    };
+
+    MockApiClient.addMockResponse({
+      url,
+      method: 'GET',
+      body: configBody,
+    });
+    const saveRequest = MockApiClient.addMockResponse({
+      url,
+      method: 'PUT',
+      body: configBody,
+    });
+    MockApiClient.addMockResponse({
+      url,
+      method: 'GET',
+      body: configBody,
+    });
+
+    render(<PluginConfig plugin={webhookPlugin} project={project} />);
+
+    await userEvent.click(await screen.findByRole('button', {name: 'Save Changes'}));
+
+    await waitFor(() =>
+      expect(saveRequest).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          method: 'PUT',
+          data: {
+            auto_create: false,
+            repository: null,
+          },
+        })
+      )
+    );
+  });
 });