feat(toolbar): Iterate on Dev Toolbar settings page copy

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

@@ -1,3 +1,4 @@
+import Badge from 'sentry/components/badge/badge';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import type {Organization} from 'sentry/types/organization';
@@ -68,8 +69,9 @@ export default function getConfiguration({
         },
         {
           path: `${pathPrefix}/toolbar/`,
-          title: t('Developer Toolbar'),
+          title: t('Dev Toolbar'),
           show: () => !!organization?.features?.includes('dev-toolbar-ui'),
+          badge: () => <Badge type="beta">Beta</Badge>,
         },
       ],
     },

static/app/views/settings/project/projectToolbar.tsx

@@ -1,6 +1,7 @@
 import Access from 'sentry/components/acl/access';
 import Feature from 'sentry/components/acl/feature';
 import Alert from 'sentry/components/alert';
+import {LinkButton} from 'sentry/components/button';
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
@@ -14,6 +15,7 @@ import type {Project} from 'sentry/types/project';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
+import TextBlock from 'sentry/views/settings/components/text/textBlock';
 import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
 
 type RouteParams = {
@@ -41,8 +43,19 @@ function ProjectToolbarSettings({organization, project, params: {projectId}}: Pr
 
           // additional data/props that is related to rendering of form field rather than data
           label: t('Allowed Origins'),
-          help: t(
-            'Domain URLs where the dev toolbar can be installed and access your data. Wildcards (*) are supported. Please separate multiple entries with a newline.'
+          help: (
+            <div>
+              {t('Domains where the dev toolbar is allowed to access your data.')}
+              <br />
+              {t(
+                'Protocol and port are optional; wildcard subdomains (*) are are supported.'
+              )}
+              <br />
+              {tct(
+                'Example: [code:localhost] is equivalent to [code:http://localhost] or [code:localhost:80]',
+                {code: <code />}
+              )}
+            </div>
           ),
           getData: data => ({options: data}),
         },
@@ -52,12 +65,24 @@ function ProjectToolbarSettings({organization, project, params: {projectId}}: Pr
 
   return (
     <SentryDocumentTitle title={t('Toolbar Settings')} projectSlug={project.slug}>
-      <SettingsPageHeader title={t('Developer Toolbar')} />
+      <SettingsPageHeader
+        title={t('Dev Toolbar')}
+        action={
+          <LinkButton href="https://docs.sentry.io/product/dev-toolbar/" external>
+            {t('Read the Docs')}
+          </LinkButton>
+        }
+      />
       <Feature
         features="dev-toolbar-ui"
         organization={organization}
         renderDisabled={NoAccess}
       >
+        <TextBlock>
+          {t(
+            `Bring critical Sentry insights and tools directly into your web app for easier troubleshooting with the Dev Toolbar.`
+          )}
+        </TextBlock>
         <PermissionAlert project={project} />
         {domain && (
           <Alert type="info" showIcon>