chore(performance-landing): Removing webvital tab. (#59615)

- This PR removes the **Perfomance > Web Vitals** tab and redirects
navigations to it, with the **Perfomance > Frontend** tab.
- Updated the tooltips for Best Page opportunities widget.

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/views/performance/browser/webVitals/components/performanceBadge.tsx

@@ -20,7 +20,7 @@ export function PerformanceBadge({score}: Props) {
   );
 }
 
-const Badge = styled('div')<{status: string}>`
+export const Badge = styled('div')<{status: string}>`
   white-space: nowrap;
   border-radius: 12px;
   color: ${p => p.theme[PERFORMANCE_SCORE_COLORS[p.status].normal]};

static/app/views/performance/landing/index.spec.tsx

@@ -154,26 +154,6 @@ describe('Performance > Landing > Index', function () {
     expect(screen.getByTestId('performance-landing-v3')).toBeInTheDocument();
   });
 
-  it('renders frontend pageload view', function () {
-    const data = initializeData({
-      query: {landingDisplay: LandingDisplayField.FRONTEND_PAGELOAD},
-    });
-
-    wrapper = render(<WrappedComponent data={data} />, data.routerContext);
-
-    expect(screen.getByTestId('frontend-pageload-view')).toBeInTheDocument();
-    expect(screen.getByTestId('performance-table')).toBeInTheDocument();
-
-    const titles = screen.getAllByTestId('performance-widget-title');
-    expect(titles).toHaveLength(5);
-
-    expect(titles[0]).toHaveTextContent('Worst LCP Web Vitals');
-    expect(titles[1]).toHaveTextContent('Worst FCP Web Vitals');
-    expect(titles[2]).toHaveTextContent('p75 LCP');
-    expect(titles[3]).toHaveTextContent('LCP Distribution');
-    expect(titles[4]).toHaveTextContent('FCP Distribution');
-  });
-
   it('renders frontend other view', function () {
     const data = initializeData({
       query: {landingDisplay: LandingDisplayField.FRONTEND_OTHER},
@@ -264,11 +244,11 @@ describe('Performance > Landing > Index', function () {
 
   it('Can switch between landing displays', async function () {
     const data = initializeData({
-      query: {landingDisplay: LandingDisplayField.FRONTEND_PAGELOAD, abc: '123'},
+      query: {landingDisplay: LandingDisplayField.FRONTEND_OTHER, abc: '123'},
     });
 
     wrapper = render(<WrappedComponent data={data} />, data.routerContext);
-    expect(screen.getByTestId('frontend-pageload-view')).toBeInTheDocument();
+    expect(screen.getByTestId('frontend-other-view')).toBeInTheDocument();
     await userEvent.click(screen.getByRole('tab', {name: 'All Transactions'}));
 
     expect(browserHistory.push).toHaveBeenNthCalledWith(
@@ -282,12 +262,12 @@ describe('Performance > Landing > Index', function () {
 
   it('Updating projects switches performance view', function () {
     const data = initializeData({
-      query: {landingDisplay: LandingDisplayField.FRONTEND_PAGELOAD},
+      query: {landingDisplay: LandingDisplayField.FRONTEND_OTHER},
     });
 
     wrapper = render(<WrappedComponent data={data} />, data.routerContext);
 
-    expect(screen.getByTestId('frontend-pageload-view')).toBeInTheDocument();
+    expect(screen.getByTestId('frontend-other-view')).toBeInTheDocument();
 
     const updatedData = initializeData({
       projects: [TestStubs.Project({id: 123, platform: 'unknown'})],
@@ -306,7 +286,7 @@ describe('Performance > Landing > Index', function () {
     });
 
     wrapper = render(<WrappedComponent data={data} />, data.routerContext);
-    expect(screen.getByTestId('frontend-pageload-view')).toBeInTheDocument();
+    expect(screen.getByTestId('frontend-other-view')).toBeInTheDocument();
   });
 
   describe('With transaction search feature', function () {

static/app/views/performance/landing/utils.spec.tsx

@@ -42,7 +42,7 @@ describe('Utils', function () {
       const projects = [TestStubs.Project()];
       const data = initializeData(projects, {landingDisplay: 'frontend_pageload'});
       expect(getCurrentLandingDisplay(data.router.location, projects).label).toEqual(
-        'Web Vitals'
+        'All Transactions'
       );
     });
     it('returns frontend display if project matches', function () {
@@ -50,7 +50,7 @@ describe('Utils', function () {
       const data = initializeData(projects, {project: 22});
       expect(
         getCurrentLandingDisplay(data.router.location, projects, data.eventView).label
-      ).toEqual('Web Vitals');
+      ).toEqual('Frontend');
     });
     it('returns backend display if project matches', function () {
       const projects = [TestStubs.Project({id: '22', platform: 'php'})];

static/app/views/performance/landing/utils.tsx

@@ -36,15 +36,13 @@ export enum LandingDisplayField {
   MOBILE = 'mobile',
 }
 
+// TODO Abdullah Khan: Remove code for Web Vitals tab in performance landing
+// page when new starfish web vitals module is mature.
 export const LANDING_DISPLAYS = [
   {
     label: t('All Transactions'),
     field: LandingDisplayField.ALL,
   },
-  {
-    label: t('Web Vitals'),
-    field: LandingDisplayField.FRONTEND_PAGELOAD,
-  },
   {
     label: t('Frontend'),
     field: LandingDisplayField.FRONTEND_OTHER,
@@ -169,7 +167,7 @@ export function getDefaultDisplayFieldForPlatform(
 
   const performanceTypeToDisplay = {
     [ProjectPerformanceType.ANY]: LandingDisplayField.ALL,
-    [ProjectPerformanceType.FRONTEND]: LandingDisplayField.FRONTEND_PAGELOAD,
+    [ProjectPerformanceType.FRONTEND]: LandingDisplayField.FRONTEND_OTHER,
     [ProjectPerformanceType.BACKEND]: LandingDisplayField.BACKEND,
     [ProjectPerformanceType.MOBILE]: LandingDisplayField.MOBILE,
   };

static/app/views/performance/landing/views/frontendOtherView.tsx

@@ -48,7 +48,7 @@ export function FrontendOtherView(props: BasePerformanceViewProps) {
     <PerformanceDisplayProvider
       value={{performanceType: ProjectPerformanceType.FRONTEND_OTHER}}
     >
-      <div>
+      <div data-test-id="frontend-other-view">
         <DoubleChartRow {...props} allowedCharts={doubleChartRowCharts} />
         <TripleChartRow
           {...props}

static/app/views/performance/landing/widgets/widgets/performanceScoreWidget.tsx

@@ -40,9 +40,7 @@ export function PerformanceScoreWidget(props: PerformanceWidgetProps) {
     <GenericPerformanceWidget
       {...props}
       location={location}
-      Subtitle={() => (
-        <Subtitle>{props.subTitle ?? t('P75 in Top Transactions')}</Subtitle>
-      )}
+      Subtitle={() => <Subtitle>{props.subTitle}</Subtitle>}
       HeaderActions={() => (
         <div>
           <LinkButton

static/app/views/performance/landing/widgets/widgets/stackedAreaChartListWidget.tsx

@@ -9,6 +9,7 @@ import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import StackedAreaChart from 'sentry/components/charts/stackedAreaChart';
 import {getInterval} from 'sentry/components/charts/utils';
 import Count from 'sentry/components/count';
+import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Tooltip} from 'sentry/components/tooltip';
 import Truncate from 'sentry/components/truncate';
@@ -29,7 +30,10 @@ import {usePageError} from 'sentry/utils/performance/contexts/pageError';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import withApi from 'sentry/utils/withApi';
-import {PerformanceBadge} from 'sentry/views/performance/browser/webVitals/components/performanceBadge';
+import {
+  Badge,
+  PerformanceBadge,
+} from 'sentry/views/performance/browser/webVitals/components/performanceBadge';
 import {formatTimeSeriesResultsToChartData} from 'sentry/views/performance/browser/webVitals/components/performanceScoreBreakdownChart';
 import {calculateOpportunity} from 'sentry/views/performance/browser/webVitals/utils/calculateOpportunity';
 import {calculatePerformanceScore} from 'sentry/views/performance/browser/webVitals/utils/calculatePerformanceScore';
@@ -432,14 +436,37 @@ export function StackedAreaChartListWidget(props: PerformanceWidgetProps) {
                   <Truncate value={transaction} maxLength={40} />
                 </GrowLink>
                 <StyledRightAlignedCell>
-                  <PerformanceBadge score={rowScore.totalScore} />
+                  <Tooltip
+                    title={
+                      <span>
+                        {t('The overall performance rating of this page.')}
+                        <br />
+                        <ExternalLink href="https://docs.sentry.io/product/performance/web-vitals/#performance-score">
+                          {t('How is this calculated?')}
+                        </ExternalLink>
+                      </span>
+                    }
+                    isHoverable
+                  >
+                    <PerformanceBadgeWrapper>
+                      <PerformanceBadge score={rowScore.totalScore} />
+                    </PerformanceBadgeWrapper>
+                  </Tooltip>
                   {isProjectWebVitalDataLoading ? (
                     <StyledLoadingIndicator size={20} />
                   ) : (
                     <Tooltip
-                      title={t(
-                        'The opportunity to improve your cumulative performance score.'
-                      )}
+                      title={
+                        <span>
+                          {t(
+                            "A number rating how impactful a performance improvement on this page would be to your application's overall Performance Score."
+                          )}
+                          <br />
+                          <ExternalLink href="https://docs.sentry.io/product/performance/web-vitals/#opportunity">
+                            {t('How is this calculated?')}
+                          </ExternalLink>
+                        </span>
+                      }
                       isHoverable
                       showUnderline
                       skipWrapper
@@ -547,4 +574,11 @@ const StyledLoadingIndicator = styled(LoadingIndicator)`
     margin: 0;
   }
 `;
+
+const PerformanceBadgeWrapper = styled('span')`
+  ${Badge} {
+    text-decoration: underline dotted;
+  }
+`;
+
 const EventsRequest = withApi(_EventsRequest);

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

@@ -90,7 +90,7 @@ function TransactionHeader({
           // frontend projects should always show the web vitals tab
           if (
             getCurrentLandingDisplay(location, projects, eventView).field ===
-            LandingDisplayField.FRONTEND_PAGELOAD
+            LandingDisplayField.FRONTEND_OTHER
           ) {
             return true;
           }