fix(performance): Display thresholds in all summary tabs (#27256)

Display the threshold and metric in all the transaction
summary tabs. Perviously it only showed up in the main
summary page.

Author: shruthilayaj

static/app/views/performance/transactionSummary/content.tsx

@@ -70,9 +70,6 @@ type Props = {
   onChangeFilter: (newFilter: SpanOperationBreakdownFilter) => void;
   onChangeThreshold?: (threshold: number, metric: TransactionThresholdMetric) => void;
   spanOperationBreakdownFilter: SpanOperationBreakdownFilter;
-  transactionThreshold?: number;
-  transactionThresholdMetric?: TransactionThresholdMetric;
-  loadingThreshold?: boolean;
 };
 
 type State = {
@@ -219,9 +216,6 @@ class SummaryContent extends React.Component<Props, State> {
       onChangeFilter,
       onChangeThreshold,
       spanOperationBreakdownFilter,
-      transactionThreshold,
-      transactionThresholdMetric,
-      loadingThreshold,
     } = this.props;
     const hasPerformanceEventsPage = organization.features.includes(
       'performance-events-page'
@@ -334,9 +328,6 @@ class SummaryContent extends React.Component<Props, State> {
           hasWebVitals={hasWebVitals}
           handleIncompatibleQuery={this.handleIncompatibleQuery}
           onChangeThreshold={onChangeThreshold}
-          transactionThreshold={transactionThreshold}
-          transactionThresholdMetric={transactionThresholdMetric}
-          loadingThreshold={loadingThreshold}
         />
         <Layout.Body>
           <StyledSdkUpdatesAlert />

static/app/views/performance/transactionSummary/header.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
-import {openModal} from 'app/actionCreators/modal';
 import Feature from 'app/components/acl/feature';
 import {GuideAnchor} from 'app/components/assistant/guideAnchor';
 import Button from 'app/components/button';
@@ -25,10 +24,8 @@ import {tagsRouteWithQuery} from './transactionTags/utils';
 import {vitalsRouteWithQuery} from './transactionVitals/utils';
 import KeyTransactionButton from './keyTransactionButton';
 import TeamKeyTransactionButton from './teamKeyTransactionButton';
-import TransactionThresholdModal, {
-  modalCss,
-  TransactionThresholdMetric,
-} from './transactionThresholdModal';
+import TransactionThresholdButton from './transactionThresholdButton';
+import {TransactionThresholdMetric} from './transactionThresholdModal';
 import {transactionSummaryRouteWithQuery} from './utils';
 
 export enum Tab {
@@ -50,9 +47,6 @@ type Props = {
   handleIncompatibleQuery: React.ComponentProps<
     typeof CreateAlertFromViewButton
   >['onIncompatibleQuery'];
-  transactionThreshold?: number;
-  transactionThresholdMetric?: TransactionThresholdMetric;
-  loadingThreshold?: boolean;
 };
 
 class TransactionHeader extends React.Component<Props> {
@@ -140,33 +134,8 @@ class TransactionHeader extends React.Component<Props> {
     );
   }
 
-  openModal() {
-    const {
-      organization,
-      transactionName,
-      eventView,
-      transactionThreshold,
-      transactionThresholdMetric,
-      onChangeThreshold,
-    } = this.props;
-    openModal(
-      modalProps => (
-        <TransactionThresholdModal
-          {...modalProps}
-          organization={organization}
-          transactionName={transactionName}
-          eventView={eventView}
-          transactionThreshold={transactionThreshold}
-          transactionThresholdMetric={transactionThresholdMetric}
-          onApply={onChangeThreshold}
-        />
-      ),
-      {modalCss, backdrop: 'static'}
-    );
-  }
-
   renderSettingsButton() {
-    const {organization, loadingThreshold} = this.props;
+    const {organization, transactionName, eventView, onChangeThreshold} = this.props;
 
     return (
       <Feature
@@ -179,12 +148,11 @@ class TransactionHeader extends React.Component<Props> {
               target="project_transaction_threshold_override"
               position="bottom"
             >
-              <Button
-                onClick={() => this.openModal()}
-                data-test-id="set-transaction-threshold"
-                icon={<IconSettings />}
-                disabled={loadingThreshold}
-                aria-label={t('Settings')}
+              <TransactionThresholdButton
+                organization={organization}
+                transactionName={transactionName}
+                eventView={eventView}
+                onChangeThreshold={onChangeThreshold}
               />
             </GuideAnchor>
           ) : (

static/app/views/performance/transactionSummary/index.tsx

@@ -5,7 +5,6 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 import isEqual from 'lodash/isEqual';
 
-import {addErrorMessage} from 'app/actionCreators/indicator';
 import {loadOrganizationTags} from 'app/actionCreators/tags';
 import {Client} from 'app/api';
 import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
@@ -14,7 +13,6 @@ import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
 import {t} from 'app/locale';
 import {PageContent} from 'app/styles/organization';
 import {GlobalSelection, Organization, Project} from 'app/types';
-import {defined} from 'app/utils';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import DiscoverQuery from 'app/utils/discover/discoverQuery';
 import EventView from 'app/utils/discover/eventView';
@@ -62,7 +60,6 @@ type State = {
   eventView: EventView | undefined;
   transactionThreshold: number | undefined;
   transactionThresholdMetric: TransactionThresholdMetric | undefined;
-  loadingThreshold: boolean;
 };
 
 // Used to cast the totals request to numbers
@@ -73,7 +70,6 @@ class TransactionSummary extends Component<Props, State> {
   state: State = {
     transactionThreshold: undefined,
     transactionThresholdMetric: undefined,
-    loadingThreshold: false,
     spanOperationBreakdownFilter: decodeFilterFromLocation(this.props.location),
     eventView: generateSummaryEventView(
       this.props.location,
@@ -95,9 +91,6 @@ class TransactionSummary extends Component<Props, State> {
   componentDidMount() {
     const {api, organization, selection} = this.props;
     loadOrganizationTags(api, organization.slug, selection);
-    if (organization.features.includes('project-transaction-threshold-override')) {
-      this.fetchTransactionThreshold();
-    }
     addRoutePerformanceContext(selection);
   }
 
@@ -137,72 +130,6 @@ class TransactionSummary extends Component<Props, State> {
     });
   };
 
-  getProject() {
-    const {projects} = this.props;
-    const {eventView} = this.state;
-    if (!defined(eventView)) {
-      return undefined;
-    }
-
-    const projectId = String(eventView.project[0]);
-    const project = projects.find(proj => proj.id === projectId);
-
-    return project;
-  }
-
-  fetchTransactionThreshold = () => {
-    const {api, organization, location} = this.props;
-    const transactionName = getTransactionName(location);
-
-    const project = this.getProject();
-    if (!defined(project)) {
-      return;
-    }
-    const transactionThresholdUrl = `/organizations/${organization.slug}/project-transaction-threshold-override/`;
-
-    this.setState({loadingThreshold: true});
-
-    api
-      .requestPromise(transactionThresholdUrl, {
-        method: 'GET',
-        includeAllArgs: true,
-        query: {
-          project: project.id,
-          transaction: transactionName,
-        },
-      })
-      .then(([data]) => {
-        this.setState({
-          loadingThreshold: false,
-          transactionThreshold: data.threshold,
-          transactionThresholdMetric: data.metric,
-        });
-      })
-      .catch(() => {
-        const projectThresholdUrl = `/projects/${organization.slug}/${project.slug}/transaction-threshold/configure/`;
-        this.props.api
-          .requestPromise(projectThresholdUrl, {
-            method: 'GET',
-            includeAllArgs: true,
-            query: {
-              project: project.id,
-            },
-          })
-          .then(([data]) => {
-            this.setState({
-              loadingThreshold: false,
-              transactionThreshold: data.threshold,
-              transactionThresholdMetric: data.metric,
-            });
-          })
-          .catch(err => {
-            this.setState({loadingThreshold: false});
-            const errorMessage = err.responseJSON?.threshold ?? null;
-            addErrorMessage(errorMessage);
-          });
-      });
-  };
-
   getDocumentTitle(): string {
     const name = getTransactionName(this.props.location);
 
@@ -296,12 +223,7 @@ class TransactionSummary extends Component<Props, State> {
 
   render() {
     const {organization, projects, location} = this.props;
-    const {
-      eventView,
-      transactionThreshold,
-      transactionThresholdMetric,
-      loadingThreshold,
-    } = this.state;
+    const {eventView, transactionThreshold, transactionThresholdMetric} = this.state;
     const transactionName = getTransactionName(location);
     if (!eventView || transactionName === undefined) {
       // If there is no transaction name, redirect to the Performance landing page
@@ -371,9 +293,6 @@ class TransactionSummary extends Component<Props, State> {
                           transactionThresholdMetric: metric,
                         })
                       }
-                      transactionThreshold={transactionThreshold}
-                      transactionThresholdMetric={transactionThresholdMetric}
-                      loadingThreshold={loadingThreshold}
                     />
                   );
                 }}