ref(sampling): Update copies and align beta badge - (#40437)

static/app/components/featureBadge.tsx

@@ -75,6 +75,7 @@ const StyledBadge = styled(Badge)`
   height: ${space(2)};
   font-weight: normal;
   font-size: ${p => p.theme.fontSizeExtraSmall};
+  vertical-align: middle;
 `;
 
 const FeatureBadge = styled(BaseFeatureBadge)<{space?: ValidSize}>`

static/app/types/project.tsx

@@ -5,7 +5,7 @@ import type {SDKUpdatesSuggestion} from './event';
 import type {Plugin} from './integrations';
 import type {Organization, Team} from './organization';
 import type {Deploy, Release} from './release';
-import type {DynamicSamplingBiase, SamplingRule} from './sampling';
+import type {DynamicSamplingBias, SamplingRule} from './sampling';
 
 // Minimal project representation for use with avatars.
 export type AvatarProject = {
@@ -23,7 +23,7 @@ export type Project = {
     next_id: number;
     rules: SamplingRule[];
   } | null;
-  dynamicSamplingBiases: DynamicSamplingBiase[];
+  dynamicSamplingBiases: DynamicSamplingBias[];
   environments: string[];
   eventProcessing: {
     symbolicationDegraded: boolean;

static/app/types/sampling.tsx

@@ -144,13 +144,13 @@ export type UniformModalsSubmit = (props: {
   rule?: SamplingRule;
 }) => void;
 
-export enum DynamicSamplingBiaseType {
+export enum DynamicSamplingBiasType {
   BOOST_ENVIRONMENTS = 'boostEnvironments',
   BOOST_LATEST_RELEASES = 'boostLatestRelease',
   IGNORE_HEALTH_CHECKS = 'ignoreHealthChecks',
 }
 
-export type DynamicSamplingBiase = {
+export type DynamicSamplingBias = {
   active: boolean;
-  id: DynamicSamplingBiaseType;
+  id: DynamicSamplingBiasType;
 };

static/app/views/settings/components/settingsNavItem.tsx

@@ -103,6 +103,7 @@ const StyledBadge = styled(Badge)`
   line-height: 1;
   font-size: ${p => p.theme.fontSizeExtraSmall};
   padding: 3px ${space(0.75)};
+  vertical-align: middle;
 `;
 
 export default SettingsNavItem;

static/app/views/settings/project/dynamicSampling/dynamicSampling.spec.tsx

@@ -2,7 +2,7 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {Organization, Project} from 'sentry/types';
-import {DynamicSamplingBiaseType} from 'sentry/types/sampling';
+import {DynamicSamplingBiasType} from 'sentry/types/sampling';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 
 import DynamicSampling from '.';
@@ -14,9 +14,9 @@ const ORG_FEATURES = [
 ];
 
 const dynamicSamplingBiases = [
-  {id: DynamicSamplingBiaseType.BOOST_LATEST_RELEASES, active: true},
-  {id: DynamicSamplingBiaseType.BOOST_ENVIRONMENTS, active: true},
-  {id: DynamicSamplingBiaseType.IGNORE_HEALTH_CHECKS, active: true},
+  {id: DynamicSamplingBiasType.BOOST_LATEST_RELEASES, active: true},
+  {id: DynamicSamplingBiasType.BOOST_ENVIRONMENTS, active: true},
+  {id: DynamicSamplingBiasType.IGNORE_HEALTH_CHECKS, active: true},
 ];
 
 function renderMockRequests(
@@ -165,9 +165,9 @@ describe('Dynamic Sampling', function () {
       expect.objectContaining({
         data: {
           dynamicSamplingBiases: [
-            {id: DynamicSamplingBiaseType.BOOST_LATEST_RELEASES, active: false},
-            {id: DynamicSamplingBiaseType.BOOST_ENVIRONMENTS, active: true},
-            {id: DynamicSamplingBiaseType.IGNORE_HEALTH_CHECKS, active: true},
+            {id: DynamicSamplingBiasType.BOOST_LATEST_RELEASES, active: false},
+            {id: DynamicSamplingBiasType.BOOST_ENVIRONMENTS, active: true},
+            {id: DynamicSamplingBiasType.IGNORE_HEALTH_CHECKS, active: true},
           ],
         },
       })

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

@@ -15,7 +15,7 @@ import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import space from 'sentry/styles/space';
 import {Project} from 'sentry/types';
-import {DynamicSamplingBiaseType} from 'sentry/types/sampling';
+import {DynamicSamplingBiasType} from 'sentry/types/sampling';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import handleXhrErrorResponse from 'sentry/utils/handleXhrErrorResponse';
 import useApi from 'sentry/utils/useApi';
@@ -33,18 +33,18 @@ type Props = {
   project: Project;
 };
 
-const biasDescriptions = {
-  [DynamicSamplingBiaseType.BOOST_ENVIRONMENTS]: {
+const knowBiases = {
+  [DynamicSamplingBiasType.BOOST_LATEST_RELEASES]: {
+    label: t('Prioritize new releases'),
+    help: t('Captures more transactions for your new releases as they are being adopted'),
+  },
+  [DynamicSamplingBiasType.BOOST_ENVIRONMENTS]: {
     label: t('Prioritize dev environments'),
     help: t('Captures more traces from environments that contain “dev” and “test”'),
   },
-  [DynamicSamplingBiaseType.BOOST_LATEST_RELEASES]: {
-    label: t('Prioritize new releases'),
-    help: t('Captures more traces for a new release roll-out'),
-  },
-  [DynamicSamplingBiaseType.IGNORE_HEALTH_CHECKS]: {
+  [DynamicSamplingBiasType.IGNORE_HEALTH_CHECKS]: {
     label: t('Ignore health checks'),
-    help: t('Discards transactions that contain “health” in the name'),
+    help: t('Discards your health checks transactions'),
   },
 };
 
@@ -62,7 +62,7 @@ export function DynamicSampling({project}: Props) {
     });
   }, [project.id, organization]);
 
-  async function handleToggle(type: DynamicSamplingBiaseType) {
+  async function handleToggle(type: DynamicSamplingBiasType) {
     addLoadingMessage();
 
     const newDynamicSamplingBiases = biases.map(bias => {
@@ -112,7 +112,7 @@ export function DynamicSampling({project}: Props) {
         />
         <TextBlock>
           {t(
-            'Sentry aims to capture the most valuable traces in full detail, so you have all the necessary data to resolve any performance issues.'
+            'Sentry aims to capture the most valuable transactions in full detail, so you have the necessary data to resolve any performance issues.'
           )}
         </TextBlock>
         <PermissionAlert
@@ -123,17 +123,20 @@ export function DynamicSampling({project}: Props) {
           )}
         />
         <Panel>
-          <PanelHeader>{t('Dynamic Sampling')}</PanelHeader>
+          <PanelHeader>{t('Sampling Priorities')}</PanelHeader>
           <PanelBody>
-            {biases.map(bias => {
-              if (!biasDescriptions[bias.id]) {
+            {Object.entries(knowBiases).map(([key, value]) => {
+              const bias = biases.find(b => b.id === key);
+
+              if (!bias) {
                 return null;
               }
+
               return (
                 <BooleanField
-                  {...biasDescriptions[bias.id]}
-                  key={bias.id}
-                  name={bias.id}
+                  {...value}
+                  key={key}
+                  name={key}
                   value={bias.active}
                   onChange={() => handleToggle(bias.id)}
                   disabled={!hasAccess}