ref(sentry apps): Alert users to new webhooks (#32399)

* ref(sentry apps): Alert users to new webhooks

static/app/views/settings/organization/navigationConfiguration.tsx

@@ -95,6 +95,7 @@ const organizationNavigation: NavigationSection[] = [
         title: t('Developer Settings'),
         description: t('Manage developer applications'),
         id: 'developer-settings',
+        badge: () => 'new',
       },
     ],
   },

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

@@ -4,9 +4,10 @@ import {removeSentryApp} from 'sentry/actionCreators/sentryApps';
 import Access from 'sentry/components/acl/access';
 import AlertLink from 'sentry/components/alertLink';
 import Button from 'sentry/components/button';
-import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
+import ExternalLink from 'sentry/components/links/externalLink';
+import {Panel, PanelAlert, PanelBody, PanelHeader} from 'sentry/components/panels';
 import {IconAdd} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {Organization, SentryApp} from 'sentry/types';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import withOrganization from 'sentry/utils/withOrganization';
@@ -155,6 +156,16 @@ class OrganizationDeveloperSettings extends AsyncView<Props, State> {
     return (
       <div>
         <SettingsPageHeader title={t('Developer Settings')} />
+        <PanelAlert type="info">
+          {tct(
+            "We've added new webhooks for comments on issues! Read more in our [link:webhook documentation].",
+            {
+              link: (
+                <ExternalLink href="https://docs.sentry.io/product/integrations/integration-platform/webhooks/#comments" />
+              ),
+            }
+          )}
+        </PanelAlert>
         <AlertLink href="https://docs.sentry.io/product/integrations/integration-platform/">
           {t(
             'Have questions about the Integration Platform? Learn more about it in our docs.'

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

@@ -81,6 +81,7 @@ export default class Subscriptions extends Component<Props> {
                 checked={events.includes(choice) && !disabledFromPermissions}
                 resource={choice}
                 onChange={this.onChange}
+                isNew={choice === 'comment'}
               />
             </Fragment>
           );

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 import Checkbox from 'sentry/components/checkbox';
+import FeatureBadge from 'sentry/components/featureBadge';
 import Tooltip from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {Organization} from 'sentry/types';
@@ -20,6 +21,7 @@ type DefaultProps = {
 type Props = DefaultProps & {
   checked: boolean;
   disabledFromPermissions: boolean;
+  isNew: boolean;
   onChange: (resource: Resource, checked: boolean) => void;
   organization: Organization;
   resource: Resource;
@@ -37,7 +39,7 @@ export class SubscriptionBox extends React.Component<Props> {
   };
 
   render() {
-    const {resource, organization, webhookDisabled, checked} = this.props;
+    const {resource, organization, webhookDisabled, checked, isNew} = this.props;
     const features = new Set(organization.features);
 
     let disabled = this.props.disabledFromPermissions || webhookDisabled;
@@ -57,7 +59,10 @@ export class SubscriptionBox extends React.Component<Props> {
           <Tooltip disabled={!disabled} title={message}>
             <SubscriptionGridItem disabled={disabled}>
               <SubscriptionInfo>
-                <SubscriptionTitle>{t(`${resource}`)}</SubscriptionTitle>
+                <SubscriptionTitle>
+                  {t(`${resource}`)}
+                  {isNew && <FeatureBadge type="new" />}
+                </SubscriptionTitle>
                 <SubscriptionDescription>
                   {t(`${DESCRIPTIONS[resource]}`)}
                 </SubscriptionDescription>