feat(insights): link transaction summary web vitals to new web vitals (#78488)

Author: DominikB2014

static/app/views/insights/common/utils/useModuleURL.tsx

@@ -39,17 +39,20 @@ export type RoutableModuleNames = Exclude<ModuleNameStrings, '' | 'other'>;
 
 export const useModuleURL = (
   moduleName: RoutableModuleNames,
-  bare: boolean = false
+  bare: boolean = false,
+  view?: DomainView
 ): string => {
-  const builder = useModuleURLBuilder(bare);
-  return builder(moduleName);
+  const forceDomainView = Boolean(view);
+  const builder = useModuleURLBuilder(bare, true, forceDomainView);
+  return builder(moduleName, view);
 };
 
 type URLBuilder = (moduleName: RoutableModuleNames, domainView?: DomainView) => string;
 
 export function useModuleURLBuilder(
   bare: boolean = false,
-  autoDetectDomainView: boolean = true
+  autoDetectDomainView: boolean = true,
+  forceDomainView?: boolean // TODO - eventually this param will be removed once we don't have modules in two spots
 ): URLBuilder {
   const organization = useOrganization({allowNull: true}); // Some parts of the app, like the main sidebar, render even if the organization isn't available (during loading, or at all).
   const {isInDomainView, view: currentView} = useDomainViewFilters();
@@ -61,7 +64,7 @@ export function useModuleURLBuilder(
 
   const {slug} = organization;
 
-  if (autoDetectDomainView && isInDomainView) {
+  if ((autoDetectDomainView && isInDomainView) || forceDomainView) {
     return function (moduleName: RoutableModuleNames, domainView?: DomainView) {
       const view = domainView ?? currentView;
       return bare

static/app/views/insights/pages/domainViewHeader.tsx

@@ -7,9 +7,22 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 import EventView from 'sentry/utils/discover/eventView';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
+import {useLocation} from 'sentry/utils/useLocation';
 import {SpanOperationBreakdownFilter} from 'sentry/views/performance/transactionSummary/filter';
 import SummaryContent from 'sentry/views/performance/transactionSummary/transactionOverview/content';
 
+jest.mock('sentry/utils/useLocation');
+
+jest.mocked(useLocation).mockReturnValue({
+  action: 'POP',
+  hash: '',
+  key: 'abc123',
+  pathname: '/organizations/org-slug/performance/',
+  query: {},
+  search: '',
+  state: undefined,
+});
+
 function initialize(query, additionalFeatures: string[] = []) {
   const features = ['transaction-event', 'performance-view', ...additionalFeatures];
   const organization = OrganizationFixture({

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

@@ -1,6 +1,6 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
-import type {Location} from 'history';
+import type {Location, LocationDescriptor} from 'history';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {SectionHeading} from 'sentry/components/charts/styles';
@@ -17,6 +17,8 @@ import {WebVital} from 'sentry/utils/fields';
 import {useMetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {useMEPSettingContext} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {decodeScalar} from 'sentry/utils/queryString';
+import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
+import {ModuleName} from 'sentry/views/insights/types';
 import {getTermHelp, PerformanceTerm} from 'sentry/views/performance/data';
 import {getTransactionMEPParamsIfApplicable} from 'sentry/views/performance/transactionSummary/transactionOverview/utils';
 import {vitalsRouteWithQuery} from 'sentry/views/performance/transactionSummary/transactionVitals/utils';
@@ -47,6 +49,10 @@ function UserStats({
   const hasTransactionSummaryCleanupFlag = organization.features.includes(
     'performance-transaction-summary-cleanup'
   );
+  const webVitalsUrl = useModuleURL(ModuleName.VITAL, false, 'frontend');
+
+  const hasWebVitalsFlag = organization.features.includes('insights-initial-modules');
+  const hasDomainViewFlag = organization.features.includes('insights-domain-view');
 
   let userMisery = error !== null ? <div>{'\u2014'}</div> : <Placeholder height="34px" />;
 
@@ -71,13 +77,24 @@ function UserStats({
 
   const orgSlug = organization.slug;
 
-  const webVitalsTarget = vitalsRouteWithQuery({
+  let webVitalsTarget: LocationDescriptor = vitalsRouteWithQuery({
     orgSlug,
     transaction: transactionName,
     projectID: decodeScalar(location.query.project),
     query: location.query,
   });
 
+  if (hasWebVitalsFlag && hasDomainViewFlag) {
+    webVitalsTarget = {
+      pathname: `${webVitalsUrl}/overview/`,
+      query: {
+        transaction: transactionName,
+      },
+    };
+  }
+
+  const showLink = !hasDomainViewFlag || (hasDomainViewFlag && hasWebVitalsFlag);
+
   const mepSetting = useMEPSettingContext();
   const mepCardinalityContext = useMetricsCardinalityContext();
   const queryExtras = getTransactionMEPParamsIfApplicable(
@@ -101,9 +118,11 @@ function UserStats({
                 size="sm"
               />
             </SectionHeading>
-            <Link to={webVitalsTarget}>
-              <IconOpen />
-            </Link>
+            {showLink && (
+              <Link to={webVitalsTarget}>
+                <IconOpen />
+              </Link>
+            )}
           </VitalsHeading>
           <VitalInfo
             location={location}