Add guide anchors for Project Transaction Threshold (#26743)

Add Guide Text for Project Transaction Thresholds
and a beta tag in the settings. Additionally, also
get rid of the User Misery guide.

src/sentry/assistant/guides.py

@@ -26,7 +26,6 @@ GUIDES = {
     "alerts_write_owner": {"id": 11, "required_targets": ["alerts_write_owner"]},
     "assigned_or_suggested_guide": {"id": 12, "required_targets": ["assigned_or_suggested_query"]},
     "release_adoption": {"id": 13, "required_targets": ["release_adoption"]},
-    "user_misery": {"id": 14, "required_targets": ["user_misery"]},
     "stack_trace_preview": {"id": 15, "required_targets": ["issue_stream_title"]},
     "trace_view": {
         "id": 16,
@@ -41,6 +40,10 @@ GUIDES = {
         ],
     },
     "team_key_transactions": {"id": 18, "required_targets": ["team_key_transaction_header"]},
+    "project_transaction_threshold": {
+        "id": 19,
+        "required_targets": ["project_transaction_threshold"],
+    },
 }
 
 # demo mode has different guides

static/app/components/assistant/getGuidesContent.tsx

@@ -197,19 +197,6 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
-    {
-      guide: 'user_misery',
-      requiredTargets: ['user_misery'],
-      steps: [
-        {
-          title: t('User Misery'),
-          target: 'user_misery',
-          description: t(
-            `Make users less miserable. Our User Misery Index now combines unique miserable users both by number and percentage. Plus, you can sort User Misery to identify your site’s most frustrating transactions.`
-          ),
-        },
-      ],
-    },
     {
       guide: 'stack_trace_preview',
       requiredTargets: ['issue_stream_title'],
@@ -308,6 +295,19 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
         },
       ],
     },
+    {
+      guide: 'project_transaction_threshold',
+      requiredTargets: ['project_transaction_threshold'],
+      steps: [
+        {
+          title: t('Project Thresholds'),
+          target: 'project_transaction_threshold',
+          description: t(
+            'Gauge performance using different metrics for each project. Set response time thresholds, per project, for the Apdex and User Misery Scores in each project’s Performance settings.'
+          ),
+        },
+      ],
+    },
   ];
 }
 

static/app/views/performance/table.tsx

@@ -226,7 +226,7 @@ class Table extends React.Component<Props, State> {
     column: TableColumn<keyof TableDataRow>,
     title: React.ReactNode
   ): React.ReactNode {
-    const {eventView, location} = this.props;
+    const {eventView, location, organization} = this.props;
 
     const align = fieldAlignment(column.name, column.type, tableMeta);
     const field = {field: column.name, width: column.width};
@@ -262,7 +262,11 @@ class Table extends React.Component<Props, State> {
     );
     if (field.field.startsWith('user_misery')) {
       return (
-        <GuideAnchor target="user_misery" position="top">
+        <GuideAnchor
+          target="project_transaction_threshold"
+          position="top"
+          disabled={!organization.features.includes('project-transaction-threshold')}
+        >
           {sortLink}
         </GuideAnchor>
       );

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

@@ -24,16 +24,20 @@ const SettingsNavItem = ({badge, label, index, id, ...props}: Props) => {
     defaultComponent: ({children}) => <React.Fragment>{children}</React.Fragment>,
   });
 
-  const renderedBadge =
-    badge === 'new' ? (
-      <FeatureBadge type="new" />
-    ) : badge === 'warning' ? (
+  let renderedBadge;
+  if (badge === 'new') {
+    renderedBadge = <FeatureBadge type="new" />;
+  } else if (badge === 'beta') {
+    renderedBadge = <FeatureBadge type="beta" />;
+  } else if (badge === 'warning') {
+    renderedBadge = (
       <Tooltip title={t('This settings needs review')} position="right">
         <StyledBadge text={badge} type="warning" />
       </Tooltip>
-    ) : (
-      <StyledBadge text={badge} />
     );
+  } else {
+    renderedBadge = <StyledBadge text={badge} />;
+  }
 
   return (
     <StyledNavItem onlyActiveOnIndex={index} activeClassName="active" {...props}>

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

@@ -115,6 +115,7 @@ export default function getConfiguration({
         {
           path: `${pathPrefix}/performance/`,
           title: t('Performance'),
+          badge: () => 'beta',
           show: () => !!organization?.features?.includes('project-transaction-threshold'),
         },
       ],