ref(settings-metrics): Update descriptions (#73262)

static/app/routes.tsx

@@ -532,12 +532,13 @@ function buildRoutes() {
         component={make(() => import('sentry/views/settings/projectPerformance'))}
       />
       <Route path="metrics/" name={t('Metrics')}>
+        <Redirect from="extract-metric/" to="configure-metric/" />
         <IndexRoute
           component={make(() => import('sentry/views/settings/projectMetrics'))}
         />
         <Route
-          name={t('Extract Metric')}
-          path="extract-metric/"
+          name={t('Configure Metric')}
+          path="configure-metric/"
           component={make(
             () => import('sentry/views/settings/projectMetrics/extractMetric')
           )}

static/app/views/settings/projectMetrics/customMetricsTable.tsx

@@ -83,7 +83,10 @@ export function CustomMetricsTable({project}: Props) {
   return (
     <Fragment>
       <SearchWrapper>
-        <h6>{t('Emitted Metrics')}</h6>
+        <Title>
+          <h6>{t('Emitted Metrics')}</h6>
+          <Tag type="warning">{t('deprecated')}</Tag>
+        </Title>
         <SearchBar
           placeholder={t('Search Metrics')}
           onChange={setQuery}
@@ -221,6 +224,7 @@ const SearchWrapper = styled('div')`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  gap: ${space(1)};
   margin-top: ${space(4)};
   margin-bottom: ${space(0)};
 
@@ -248,3 +252,14 @@ const StyledIconWarning = styled(IconWarning)`
     cursor: pointer;
   }
 `;
+
+const Title = styled('div')`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${space(0.5)};
+  margin-bottom: ${space(3)};
+  & > h6 {
+    margin: 0;
+  }
+`;

static/app/views/settings/projectMetrics/extractMetric.tsx

@@ -4,7 +4,6 @@ import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicato
 import Alert from 'sentry/components/alert';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
-import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import type {Project} from 'sentry/types/project';
@@ -30,7 +29,7 @@ const INITIAL_DATA: FormData = {
   conditions: [''],
 };
 
-const PAGE_TITLE = t('Extract Metric');
+const PAGE_TITLE = t('Configure Metric');
 
 function ExtractMetric({project}: {project: Project}) {
   const navigate = useNavigate();
@@ -88,18 +87,8 @@ function ExtractMetric({project}: {project: Project}) {
     <Fragment>
       <SentryDocumentTitle title={routeTitleGen(PAGE_TITLE, project.slug, false)} />
       <SettingsPageHeader title={PAGE_TITLE} />
-      <TextBlock>
-        {t(
-          'Metric Extraction Rules enable you to derive meaningful metrics from the attributes present on spans within your application.'
-        )}
-      </TextBlock>
-      <TextBlock>
-        {t(
-          "By defining these rules, you can specify how and which attributes should be processed to generate useful metrics that provide detailed insights into your application's performance and behavior."
-        )}
-      </TextBlock>
+      <TextBlock>{t('Configure tracking of span attributes as metrics.')}</TextBlock>
       <Panel>
-        <PanelHeader>{t('Create Extraction Rule')}</PanelHeader>
         <PanelBody>
           <MetricsExtractionRuleForm
             project={project}

static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx

@@ -7,8 +7,9 @@ import SelectField from 'sentry/components/forms/fields/selectField';
 import Form, {type FormProps} from 'sentry/components/forms/form';
 import FormField from 'sentry/components/forms/formField';
 import type FormModel from 'sentry/components/forms/model';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {IconAdd, IconClose} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {MetricType} from 'sentry/types/metrics';
 import type {Project} from 'sentry/types/project';
@@ -118,9 +119,17 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
             name="spanAttribute"
             options={attributeOptions}
             disabled={isEdit}
-            label={t('Span Attribute')}
-            help={t('The span attribute to extract the metric from.')}
-            placeholder={t('Select an attribute')}
+            label={t('Measure')}
+            help={tct(
+              'Define the span attribute you want to track. Learn how to instrument custom attributes in [link:our docs].',
+              {
+                // TODO(telemetry-experience): add the correct link here once we have it!!!
+                link: (
+                  <ExternalLink href="https://docs.sentry.io/product/explore/metrics/" />
+                ),
+              }
+            )}
+            placeholder={t('Select a span attribute')}
             creatable
             formatCreateLabel={value => `Custom: "${value}"`}
             onCreateOption={value => {
@@ -134,19 +143,23 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
             disabled={isEdit}
             options={TYPE_OPTIONS}
             label={t('Type')}
-            help={t(
-              'The type of the metric determines which aggregation functions are available and what types of values it can store. For more information, read our docs'
+            help={tct(
+              'The type of the metric determines which aggregation functions are available and what types of values it can store. For more information, read [link:our docs]',
+              {
+                // TODO(telemetry-experience): add the correct link here once we have it!!!
+                link: (
+                  <ExternalLink href="https://docs.sentry.io/product/explore/metrics/" />
+                ),
+              }
             )}
           />
           <SelectField
             name="tags"
             options={attributeOptions}
-            label={t('Tags')}
+            label={t('Group and filter by')}
             multiple
             placeholder={t('Select tags')}
-            help={t(
-              'Those tags will be stored with the metric. They can be used to filter and group the metric in the UI.'
-            )}
+            help={t('Select the tags that can be used to group and filter the metric.')}
             creatable
             formatCreateLabel={value => `Custom: "${value}"`}
             onCreateOption={value => {
@@ -156,9 +169,9 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
             }}
           />
           <FormField
-            label={t('Filters')}
+            label={t('Queries')}
             help={t(
-              'Define filters for spans. The metric will be extracted only from spans that match these conditions.'
+              'Define queries to narrow down the metric extraction to a specific set of spans.'
             )}
             name="conditions"
             inline={false}
@@ -194,7 +207,7 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
                         </SearchWrapper>
                         {value.length > 1 && (
                           <Button
-                            aria-label={t('Remove Condition')}
+                            aria-label={t('Remove Query')}
                             onClick={() => onChange(conditions.toSpliced(index, 1), {})}
                             icon={<IconClose />}
                           />
@@ -207,7 +220,7 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
                       onClick={() => onChange([...conditions, ''], {})}
                       icon={<IconAdd />}
                     >
-                      {t('Add condition')}
+                      {t('Add Query')}
                     </Button>
                   </ConditionsButtonBar>
                 </Fragment>

static/app/views/settings/projectMetrics/metricsExtractionRulesTable.tsx

@@ -89,7 +89,7 @@ export function MetricsExtractionRulesTable({project}: Props) {
   return (
     <Fragment>
       <SearchWrapper>
-        <h6>{t('Metric Extraction Rules')}</h6>
+        <h6>{t('Span-based Metrics')}</h6>
         <FlexSpacer />
         <SearchBar
           placeholder={t('Search Extraction Rules')}
@@ -102,7 +102,7 @@ export function MetricsExtractionRulesTable({project}: Props) {
           priority="primary"
           size="sm"
         >
-          {t('Add Extraction Rule')}
+          {t('Add Metric')}
         </LinkButton>
       </SearchWrapper>
       <RulesTable

static/app/views/settings/projectMetrics/projectMetrics.tsx

@@ -56,7 +56,7 @@ function ProjectMetrics({project}: Props) {
 
       <TextBlock>
         {tct(
-          `Metrics are numerical values that can track anything about your environment over time, from latency to error rates to user signups. To learn more about metrics, [link:read the docs].`,
+          `Metrics are numerical values extracted from span attributes that can help you track anything about your environment over time. To learn more about metrics, [link:read the docs].`,
           {
             link: <ExternalLink href={METRICS_DOCS_URL} />,
           }