Repository: getsentry/sentry
Pull request: ref(settings-metrics): Update descriptions
### Goal

Update copies present on the metric's settings page.

**Before:**
![image](https://github.com/getsentry/sentry/assets/29228205/591bf25a-e10e-4522-bec6-416e34985937)
![image](https://github.com/getsentry/sentry/assets/29228205/63d264d8-5e15-40d0-b8fa-6ba6791ad9ea)




**After:**

![image](https://github.com/getsentry/sentry/assets/29228205/fb86bb53-62df-4219-b56e-5f61db33547d)
![image](https://github.com/getsentry/sentry/assets/29228205/5aa0ca14-6bd9-439f-80e0-b5e24552fde0)




closes https://github.com/getsentry/sentry/issues/73163



Problem statement:
Update copy on Metrics settings
- Metrics (Settings) Page Description: Metrics are numerical values extracted from span attributes that can help you track anything about your environment over time. To learn more, read the docs.
- Table Title: Span-based Metrics
- Button Label: "Add Extraction Rule" > "Add Metric"
- Old Table Title: Emitted Metrics (deprecated)
- In the configuration screen: 
   - Title: Configure Metric
   - Update description: Create a span-based custom metric from your tracing data.
   - Update subtext for Span Attribute:  Define the span attribute you want to track. Learn how to instrument custom attributes in our docs.

Hints from issue discussion:

Commit message: ref(settings-metrics): Update descriptions

Patch to review:
diff --git a/static/app/routes.tsx b/static/app/routes.tsx
index 46161b95054328..5f76ad686dc2cf 100644
--- a/static/app/routes.tsx
+++ b/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')
           )}
diff --git a/static/app/views/settings/projectMetrics/customMetricsTable.tsx b/static/app/views/settings/projectMetrics/customMetricsTable.tsx
index 0efc88d324117b..19fd3b4706c690 100644
--- a/static/app/views/settings/projectMetrics/customMetricsTable.tsx
+++ b/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;
+  }
+`;
diff --git a/static/app/views/settings/projectMetrics/extractMetric.tsx b/static/app/views/settings/projectMetrics/extractMetric.tsx
index ef0c5aea50e872..6dc1805ead38a2 100644
--- a/static/app/views/settings/projectMetrics/extractMetric.tsx
+++ b/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();
@@ -89,17 +88,9 @@ function ExtractMetric({project}: {project: Project}) {
       <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."
-        )}
+        {t('Create a span-based custom metric from your tracing data.')}
       </TextBlock>
       <Panel>
-        <PanelHeader>{t('Create Extraction Rule')}</PanelHeader>
         <PanelBody>
           <MetricsExtractionRuleForm
             project={project}
diff --git a/static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx b/static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx
index 1354159b2bb68e..72b44778376d3f 100644
--- a/static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx
+++ b/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 measure')}
             creatable
             formatCreateLabel={value => `Custom: "${value}"`}
             onCreateOption={value => {
@@ -133,20 +142,16 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
             name="type"
             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'
-            )}
+            label={t('Aggregate')}
+            help={t('Select the aggregations you want to store.')}
           />
           <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 +161,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 the queries to narrow down the metric extraction to a specific set of spans.'
             )}
             name="conditions"
             inline={false}
@@ -194,7 +199,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 +212,7 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
                       onClick={() => onChange([...conditions, ''], {})}
                       icon={<IconAdd />}
                     >
-                      {t('Add condition')}
+                      {t('Add Query')}
                     </Button>
                   </ConditionsButtonBar>
                 </Fragment>
diff --git a/static/app/views/settings/projectMetrics/metricsExtractionRulesTable.tsx b/static/app/views/settings/projectMetrics/metricsExtractionRulesTable.tsx
index fe4cdacd9813c2..627724e0dc1662 100644
--- a/static/app/views/settings/projectMetrics/metricsExtractionRulesTable.tsx
+++ b/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
diff --git a/static/app/views/settings/projectMetrics/projectMetrics.tsx b/static/app/views/settings/projectMetrics/projectMetrics.tsx
index babe46a502e8fe..fcae0756b704f4 100644
--- a/static/app/views/settings/projectMetrics/projectMetrics.tsx
+++ b/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} />,
           }


Code review comments:
diff_hunk: @@ -156,9 +161,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 the queries to narrow down the metric extraction to a specific set of spans.'
path: static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx
text: @user1:
```suggestion
              'Define queries to narrow down the metric extraction to a specific set of spans.'
```

diff_hunk: @@ -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 measure')}
path: static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx
text: @user1:
```suggestion
            placeholder={t('Select a span attribute')}
```

diff_hunk: @@ -89,17 +88,9 @@ function ExtractMetric({project}: {project: Project}) {
       <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."
-        )}
+        {t('Create a span-based custom metric from your tracing data.')}
path: static/app/views/settings/projectMetrics/extractMetric.tsx
text: @user1:
```suggestion
        {t('Configure tracking of span attributes as metrics.')}
```

diff_hunk: @@ -133,20 +142,16 @@ export function MetricsExtractionRuleForm({isEdit, project, onSubmit, ...props}:
             name="type"
             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'
-            )}
+            label={t('Aggregate')}
+            help={t('Select the aggregations you want to store.')}
path: static/app/views/settings/projectMetrics/metricsExtractionRuleForm.tsx
text: @user1:
That is what I meant in the stand-up. It does not make sense yet to name it aggregate as the user still chooses the type of the metric in this version.
No hard opinion here as it is still feature flagged and WIP 🤷 

@author:
@user2-cota ^

@user3:
@author just checked with Arthur and since his PR might take longer to merge (waiting for back-end), let's leave the copy here as is and he can update it there.