feat(developer-settings): Add webhook headers field to custom integrations

Add a Webhook Headers textarea to the Integration Details form for internal
and public custom integrations, directly below Webhook URL. Each line is a
'Header-Name: value' pair sent with every outgoing webhook request.

Mirrors the allowedOrigins field exactly (convert/extract multiline helpers).
Masked values returned by the API round-trip safely because the backend
preserves the stored value for any entry resubmitted with the mask sentinel, so
the form needs no special masking logic.

Supersedes #116732, which split out this UI ahead of the backend.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: billyvg

static/app/types/integrations.tsx

@@ -246,6 +246,9 @@ export type SentryApp = {
     id: number;
     slug: string;
   };
+  // Each entry is a "Header-Name: value" line. Values are masked by the API for
+  // viewers without elevated access.
+  webhookHeaders?: string[];
 };
 
 // Minimal Sentry App representation for use with avatars

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.spec.tsx

@@ -124,6 +124,7 @@ describe('Sentry Application Details', () => {
         verifyInstall: true,
         isAlertable: true,
         allowedOrigins: [],
+        webhookHeaders: [],
         schema: {},
         overview: '',
       };
@@ -136,6 +137,33 @@ describe('Sentry Application Details', () => {
         })
       );
     });
+
+    it('saves webhook headers', async () => {
+      renderComponent();
+
+      await userEvent.type(screen.getByRole('textbox', {name: 'Name'}), 'Test App');
+      await userEvent.type(screen.getByRole('textbox', {name: 'Author'}), 'Sentry');
+      await userEvent.type(
+        screen.getByRole('textbox', {name: 'Webhook URL'}),
+        'https://webhook.com'
+      );
+      await userEvent.type(
+        screen.getByRole('textbox', {name: 'Webhook Headers'}),
+        'X-Example: value'
+      );
+
+      await userEvent.click(screen.getByRole('button', {name: 'Save Changes'}));
+
+      expect(createAppRequest).toHaveBeenCalledWith(
+        '/sentry-apps/',
+        expect.objectContaining({
+          data: expect.objectContaining({
+            webhookHeaders: ['X-Example: value'],
+          }),
+          method: 'POST',
+        })
+      );
+    });
   });
 
   describe('Creating a new internal Sentry App', () => {
@@ -229,6 +257,20 @@ describe('Sentry Application Details', () => {
       expect(screen.getByRole('textbox', {name: 'Client ID'})).toBeInTheDocument();
       expect(screen.getByRole('textbox', {name: 'Client Secret'})).toBeInTheDocument();
     });
+
+    it('prefills webhook headers from the app', async () => {
+      sentryApp.webhookHeaders = ['X-Example: value', 'Another-Header: thing'];
+      MockApiClient.addMockResponse({
+        url: `/sentry-apps/${sentryApp.slug}/`,
+        body: sentryApp,
+      });
+
+      renderComponent();
+
+      expect(await screen.findByRole('textbox', {name: 'Webhook Headers'})).toHaveValue(
+        'X-Example: value\nAnother-Header: thing'
+      );
+    });
   });
 
   describe('Renders for internal apps', () => {

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDetails.tsx

@@ -86,6 +86,7 @@ const sentryAppFormSchema = z
     name: z.string(),
     author: z.string(),
     webhookUrl: z.string(),
+    webhookHeaders: z.string(),
     redirectUrl: z.string(),
     verifyInstall: z.boolean(),
     isAlertable: z.boolean(),
@@ -197,6 +198,7 @@ type SaveSentryAppPayload = {
   author?: string | null;
   overview?: string;
   redirectUrl?: string;
+  webhookHeaders?: string[];
   webhookUrl?: string;
 };
 
@@ -514,6 +516,9 @@ function SentryApplicationForm({
     schema: getSchemaFieldValue(app?.schema),
     overview: app?.overview ?? '',
     allowedOrigins: convertMultilineFieldValue(app?.allowedOrigins ?? []),
+    // Masked values (Header-Name: ***) round-trip safely: the backend preserves
+    // the stored value for any entry resubmitted with the mask sentinel.
+    webhookHeaders: convertMultilineFieldValue(app?.webhookHeaders ?? []),
     organization: organization.slug,
     isInternal,
     scopes: app ? [...app.scopes] : [],
@@ -553,6 +558,7 @@ function SentryApplicationForm({
         scopes: value.scopes,
         events: value.events,
         allowedOrigins: extractMultilineFields(value.allowedOrigins),
+        webhookHeaders: extractMultilineFields(value.webhookHeaders),
         schema: value.schema.trim() === '' ? {} : JSON.parse(value.schema),
         // The author parser doesn't allow_blank, so send null for empty
         // (covers internal apps with no author).
@@ -689,6 +695,26 @@ function SentryApplicationForm({
           )}
         </form.AppField>
 
+        <form.AppField name="webhookHeaders">
+          {field => (
+            <field.Layout.Row
+              label={t('Webhook Headers')}
+              hintText={t(
+                'Custom headers to include with every webhook request. Enter one header per line in the format: Header-Name: value'
+              )}
+            >
+              <field.TextArea
+                autosize
+                value={field.state.value}
+                onChange={field.handleChange}
+                placeholder={
+                  'anthropic-version: 2023-06-01\nauthorization: Bearer token123'
+                }
+              />
+            </field.Layout.Row>
+          )}
+        </form.AppField>
+
         {!isInternal && (
           <form.AppField name="redirectUrl">
             {field => (