ref(plugins): migrate plugin config to BackendJsonSubmitForm

Replace the legacy PluginSettings class component and GenericField
rendering with BackendJsonSubmitForm for plugin configuration forms.

The plugin config now fetches field definitions via useApiQuery and
maps backend field types to the new form adapter, eliminating the
dependency on the client-side plugin module system for settings.

Refs DE-1054
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: priscilawebdev

static/app/components/pluginConfig.spec.tsx

@@ -3,8 +3,6 @@ import {WebhookPluginConfigFixture} from 'sentry-fixture/integrationListDirector
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import {plugins} from 'sentry/plugins';
-
 import {PluginConfig} from './pluginConfig';
 
 describe('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,53 @@ 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.findByText('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();
+  });
 });