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

static/app/types/integrations.tsx

@@ -246,6 +246,8 @@ export type SentryApp = {
     id: number;
     slug: string;
   };
+  // Each entry is a "Header-Name: value" line. Saved values are masked by the API
+  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,38 @@ describe('Sentry Application Details', () => {
         })
       );
     });
+
+    it('saves webhook headers', async () => {
+      render(<SentryApplicationDetails />, {
+        initialRouterConfig,
+        organization: OrganizationFixture({
+          features: ['sentry-apps-custom-webhook-headers'],
+        }),
+      });
+
+      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 +262,25 @@ 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,
+      });
+
+      render(<SentryApplicationDetails />, {
+        initialRouterConfig,
+        organization: OrganizationFixture({
+          features: ['sentry-apps-custom-webhook-headers'],
+        }),
+      });
+
+      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>
 
+        {organization.features.includes('sentry-apps-custom-webhook-headers') && (
+          <form.AppField name="webhookHeaders">
+            {field => (
+              <field.Layout.Row
+                label={t('Webhook Headers')}
+                hintText={t(
+                  'Custom headers to include with every webhook request. Only certain headers are allowed, such as Authorization or X-* custom headers. Enter one header per line in the format: Header-Name: value. Saved header values are masked.'
+                )}
+              >
+                <field.TextArea
+                  autosize
+                  value={field.state.value}
+                  onChange={field.handleChange}
+                  placeholder={'Authorization: Bearer <token>\nX-Custom-Header: value'}
+                />
+              </field.Layout.Row>
+            )}
+          </form.AppField>
+        )}
+
         {!isInternal && (
           <form.AppField name="redirectUrl">
             {field => (