ref(insights): rename resource module to asset module (#70951)

Renaming the `resources` module to `assets` resonates better with FE
devs. This does all the renaming in sentry itself, and there's another
PR up for docs https://github.com/getsentry/sentry-docs/pull/10047

---------

Co-authored-by: George Gritsouk <989898+gggritso@users.noreply.github.com>

static/app/components/events/interfaces/spans/spanSummaryButton.tsx

@@ -1,12 +1,17 @@
 import {LinkButton} from 'sentry/components/button';
 import type {SpanType} from 'sentry/components/events/interfaces/spans/types';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {EventTransaction, Organization} from 'sentry/types';
 import {useLocation} from 'sentry/utils/useLocation';
+import {
+  DATA_TYPE as RESOURCE_DATA_TYPE,
+  PERFORMANCE_DATA_TYPE as PERFORMANCE_RESOURCE_DATA_TYPE,
+} from 'sentry/views/performance/browser/resources/settings';
 import {
   querySummaryRouteWithQuery,
   resourceSummaryRouteWithQuery,
 } from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails/utils';
+import {useModuleURL} from 'sentry/views/performance/utils/useModuleURL';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {resolveSpanModule} from 'sentry/views/starfish/utils/resolveSpanModule';
 
@@ -18,6 +23,7 @@ interface Props {
 
 function SpanSummaryButton(props: Props) {
   const location = useLocation();
+  const resourceBaseUrl = useModuleURL(ModuleName.RESOURCE);
 
   const {event, organization, span} = props;
 
@@ -27,6 +33,11 @@ function SpanSummaryButton(props: Props) {
   }
 
   const resolvedModule = resolveSpanModule(sentryTags.op, sentryTags.category);
+  const isInsightsEnabled = organization.features.includes('performance-insights');
+
+  const resourceDataType = isInsightsEnabled
+    ? RESOURCE_DATA_TYPE
+    : PERFORMANCE_RESOURCE_DATA_TYPE;
 
   if (
     organization.features.includes('spans-first-ui') &&
@@ -56,13 +67,13 @@ function SpanSummaryButton(props: Props) {
       <LinkButton
         size="xs"
         to={resourceSummaryRouteWithQuery({
-          orgSlug: organization.slug,
+          baseUrl: resourceBaseUrl,
           query: location.query,
           group: sentryTags.group,
           projectID: event.projectID,
         })}
       >
-        {t('View Resource Summary')}
+        {tct('View [dataType] Summary', {dataType: resourceDataType})}
       </LinkButton>
     );
   }

static/app/components/sidebar/index.tsx

@@ -58,8 +58,12 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import MetricsOnboardingSidebar from 'sentry/views/metrics/ddmOnboarding/sidebar';
 import {releaseLevelAsBadgeProps as CacheModuleBadgeProps} from 'sentry/views/performance/cache/settings';
 import {releaseLevelAsBadgeProps as QueuesModuleBadgeProps} from 'sentry/views/performance/queues/settings';
-import {MODULE_TITLES} from 'sentry/views/performance/utils/useModuleTitle';
+import {
+  MODULE_TITLES,
+  useModuleTitle,
+} from 'sentry/views/performance/utils/useModuleTitle';
 import {useModuleURLBuilder} from 'sentry/views/performance/utils/useModuleURL';
+import {ModuleName} from 'sentry/views/starfish/types';
 
 import {ProfilingOnboardingSidebar} from '../profiling/ProfilingOnboarding/profilingOnboardingSidebar';
 
@@ -124,6 +128,7 @@ function Sidebar() {
   const activePanel = useLegacyStore(SidebarPanelStore);
   const organization = useOrganization({allowNull: true});
   const {shouldAccordionFloat} = useContext(ExpandedContext);
+  const resourceModuleTitle = useModuleTitle(ModuleName.RESOURCE);
 
   const collapsed = !!preferences.collapsed;
   const horizontal = useMedia(`(max-width: ${theme.breakpoints.medium})`);
@@ -358,7 +363,7 @@ function Sidebar() {
     <Feature key="resource" features="spans-first-ui">
       <SidebarItem
         {...sidebarItemProps}
-        label={<GuideAnchor target="starfish">{MODULE_TITLES.resource}</GuideAnchor>}
+        label={<GuideAnchor target="starfish">{resourceModuleTitle}</GuideAnchor>}
         to={`/organizations/${organization.slug}/${moduleURLBuilder('resource')}/`}
         id="performance-browser-resources"
         icon={<SubitemDot collapsed />}

static/app/routes.tsx

@@ -19,6 +19,7 @@ import IssueListOverview from 'sentry/views/issueList/overview';
 import OrganizationContainer from 'sentry/views/organizationContainer';
 import OrganizationLayout from 'sentry/views/organizationLayout';
 import OrganizationRoot from 'sentry/views/organizationRoot';
+import {PERFORMANCE_BASE_URL as PERFORMANCE_RESOURCE_BASE_URL} from 'sentry/views/performance/browser/resources/settings';
 import {MODULE_BASE_URLS} from 'sentry/views/performance/utils/useModuleURL';
 import ProjectEventRedirect from 'sentry/views/projectEventRedirect';
 import redirectDeprecatedProjectRoute from 'sentry/views/projects/redirectDeprecatedProjectRoute';
@@ -1505,6 +1506,22 @@ function buildRoutes() {
           )}
         />
       </Route>
+      <Route path={`${PERFORMANCE_RESOURCE_BASE_URL}/`}>
+        <IndexRoute
+          component={make(
+            () => import('sentry/views/performance/browser/resources/index')
+          )}
+        />
+        <Route
+          path="spans/span/:groupId/"
+          component={make(
+            () =>
+              import(
+                'sentry/views/performance/browser/resources/resourceSummaryPage/index'
+              )
+          )}
+        />
+      </Route>
       <Route path={`${MODULE_BASE_URLS[ModuleName.QUEUE]}/`}>
         <IndexRoute
           component={make(

static/app/views/performance/browser/resources/index.tsx

@@ -13,6 +13,7 @@ import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionT
 import {space} from 'sentry/styles/space';
 import {RateUnit} from 'sentry/utils/discover/fields';
 import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
+import useOrganization from 'sentry/utils/useOrganization';
 import ResourceView, {
   DEFAULT_RESOURCE_TYPES,
   FilterOptionsContainer,
@@ -20,7 +21,7 @@ import ResourceView, {
 import {
   MODULE_DESCRIPTION,
   MODULE_DOC_LINK,
-  MODULE_TITLE,
+  PERFORMANCE_MODULE_DESCRIPTION,
 } from 'sentry/views/performance/browser/resources/settings';
 import {
   BrowserStarfishFields,
@@ -29,6 +30,8 @@ import {
 import {DEFAULT_RESOURCE_FILTERS} from 'sentry/views/performance/browser/resources/utils/useResourcesQuery';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {useModuleBreadcrumbs} from 'sentry/views/performance/utils/useModuleBreadcrumbs';
+import {useModuleTitle} from 'sentry/views/performance/utils/useModuleTitle';
+import {ModuleName} from 'sentry/views/starfish/types';
 import {DomainSelector} from 'sentry/views/starfish/views/spans/selectors/domainSelector';
 
 const {SPAN_OP, SPAN_DOMAIN} = BrowserStarfishFields;
@@ -37,8 +40,11 @@ export const RESOURCE_THROUGHPUT_UNIT = RateUnit.PER_MINUTE;
 
 function ResourcesLandingPage() {
   const filters = useResourceModuleFilters();
+  const organization = useOrganization();
+  const moduleTitle = useModuleTitle(ModuleName.RESOURCE);
 
   const crumbs = useModuleBreadcrumbs('resource');
+  const isInsightsEnabled = organization.features.includes('performance-insights');
 
   return (
     <React.Fragment>
@@ -48,10 +54,12 @@ function ResourcesLandingPage() {
             <Breadcrumbs crumbs={crumbs} />
 
             <Layout.Title>
-              {MODULE_TITLE}
+              {moduleTitle}
               <PageHeadingQuestionTooltip
                 docsUrl={MODULE_DOC_LINK}
-                title={MODULE_DESCRIPTION}
+                title={
+                  isInsightsEnabled ? MODULE_DESCRIPTION : PERFORMANCE_MODULE_DESCRIPTION
+                }
               />
             </Layout.Title>
           </Layout.HeaderContent>

static/app/views/performance/browser/resources/resourceSummaryPage/index.tsx

@@ -9,9 +9,10 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
 import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {Referrer} from 'sentry/views/performance/browser/resources/referrer';
 import ResourceInfo from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceInfo';
@@ -19,6 +20,10 @@ import ResourceSummaryCharts from 'sentry/views/performance/browser/resources/re
 import ResourceSummaryTable from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable';
 import SampleImages from 'sentry/views/performance/browser/resources/resourceSummaryPage/sampleImages';
 import {FilterOptionsContainer} from 'sentry/views/performance/browser/resources/resourceView';
+import {
+  DATA_TYPE,
+  PERFORMANCE_DATA_TYPE,
+} from 'sentry/views/performance/browser/resources/settings';
 import {IMAGE_FILE_EXTENSIONS} from 'sentry/views/performance/browser/resources/shared/constants';
 import RenderBlockingSelector from 'sentry/views/performance/browser/resources/shared/renderBlockingSelector';
 import {ResourceSpanOps} from 'sentry/views/performance/browser/resources/shared/types';
@@ -42,6 +47,7 @@ const {
 
 function ResourceSummary() {
   const webVitalsModuleURL = useModuleURL('vital');
+  const organization = useOrganization();
   const {groupId} = useParams();
   const filters = useResourceModuleFilters();
   const selectedSpanOp = filters[SPAN_OP];
@@ -83,6 +89,9 @@ function ResourceSummary() {
 
   const crumbs = useModuleBreadcrumbs('resource');
 
+  const isInsightsEnabled = organization.features.includes('performance-insights');
+  const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE;
+
   return (
     <React.Fragment>
       <Layout.Header>
@@ -91,7 +100,7 @@ function ResourceSummary() {
             crumbs={[
               ...crumbs,
               {
-                label: 'Resource Summary',
+                label: tct('[dataType] Summary', {dataType: resourceDataType}),
               },
             ]}
           />
@@ -148,10 +157,14 @@ function ResourceSummary() {
 }
 
 function PageWithProviders() {
+  const organization = useOrganization();
+
+  const isInsightsEnabled = organization.features.includes('performance-insights');
+  const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE;
   return (
     <ModulePageProviders
       moduleName="resource"
-      pageTitle={t('Resource Summary')}
+      pageTitle={`${resourceDataType} ${t('Summary')}`}
       features="spans-first-ui"
     >
       <ResourceSummary />

static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx

@@ -1,10 +1,15 @@
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {formatBytesBase2} from 'sentry/utils';
 import {formatRate} from 'sentry/utils/formatters';
 import getDynamicText from 'sentry/utils/getDynamicText';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useOrganization from 'sentry/utils/useOrganization';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
 import {Referrer} from 'sentry/views/performance/browser/resources/referrer';
+import {
+  DATA_TYPE,
+  PERFORMANCE_DATA_TYPE,
+} from 'sentry/views/performance/browser/resources/settings';
 import {useResourceModuleFilters} from 'sentry/views/performance/browser/resources/utils/useResourceFilters';
 import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colors';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
@@ -28,6 +33,10 @@ const {
 
 function ResourceSummaryCharts(props: {groupId: string}) {
   const filters = useResourceModuleFilters();
+  const organization = useOrganization();
+
+  const isInsightsEnabled = organization.features.includes('performance-insights');
+  const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE;
 
   const {data: spanMetricsSeriesData, isLoading: areSpanMetricsSeriesLoading} =
     useSpanMetricsSeries(
@@ -96,7 +105,7 @@ function ResourceSummaryCharts(props: {groupId: string}) {
         </ChartPanel>
       </Block>
       <Block>
-        <ChartPanel title={t('Average Resource Size')}>
+        <ChartPanel title={tct('Average [dataType] Size', {dataType: resourceDataType})}>
           <Chart
             height={160}
             aggregateOutputFormat="size"

static/app/views/performance/browser/resources/resourceView/resourceTable.tsx

@@ -13,7 +13,12 @@ import {browserHistory} from 'sentry/utils/browserHistory';
 import {DismissId, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
+import {
+  DATA_TYPE,
+  PERFORMANCE_DATA_TYPE,
+} from 'sentry/views/performance/browser/resources/settings';
 import {
   FONT_FILE_EXTENSIONS,
   IMAGE_FILE_EXTENSIONS,
@@ -69,9 +74,13 @@ type Props = {
 
 function ResourceTable({sort, defaultResourceTypes}: Props) {
   const location = useLocation();
+  const organization = useOrganization();
   const cursor = decodeScalar(location.query?.[QueryParameterNames.SPANS_CURSOR]);
   const {setPageInfo, pageAlert} = usePageAlert();
 
+  const isInsightsEnabled = organization.features.includes('performance-insights');
+  const resourceDataType = isInsightsEnabled ? DATA_TYPE : PERFORMANCE_DATA_TYPE;
+
   const {data, isLoading, pageLinks} = useResourcesQuery({
     sort,
     defaultResourceTypes,
@@ -80,7 +89,11 @@ function ResourceTable({sort, defaultResourceTypes}: Props) {
   });
 
   const columnOrder: GridColumnOrder<keyof Row>[] = [
-    {key: SPAN_DESCRIPTION, width: COL_WIDTH_UNDEFINED, name: t('Resource Description')},
+    {
+      key: SPAN_DESCRIPTION,
+      width: COL_WIDTH_UNDEFINED,
+      name: `${resourceDataType} ${t('Description')}`,
+    },
     {
       key: `${SPM}()`,
       width: COL_WIDTH_UNDEFINED,

static/app/views/performance/browser/resources/settings.ts

@@ -1,9 +1,17 @@
 import {t} from 'sentry/locale';
 
-export const MODULE_TITLE = t('Resources');
-export const BASE_URL = 'browser/resources';
-
+export const MODULE_TITLE = t('Assets');
+export const DATA_TYPE = t('Asset');
+export const BASE_URL = 'browser/assets'; // Name of the data shown (singular)
 export const MODULE_DESCRIPTION = t(
   'Find large and slow-to-load resources used by your application and understand their impact on page performance.'
 );
+
+export const PERFORMANCE_MODULE_TITLE = t('Resources');
+export const PERFORMANCE_BASE_URL = 'browser/resources';
+export const PERFORMANCE_DATA_TYPE = t('Resource');
+export const PERFORMANCE_MODULE_DESCRIPTION = t(
+  'Find large and slow-to-load resources used by your application and understand their impact on page performance.'
+);
+
 export const MODULE_DOC_LINK = 'https://docs.sentry.io/product/performance/resources/';

static/app/views/performance/landing/widgets/components/widgetContainer.spec.tsx

@@ -943,7 +943,7 @@ describe('Performance > Widgets > WidgetContainer', function () {
   });
 
   it('Most time consuming resources widget', async function () {
-    const data = initializeData();
+    const data = initializeData(undefined, {features: ['performance-insights']});
 
     wrapper = render(
       <MEPSettingProvider forceTransactions>
@@ -955,11 +955,11 @@ describe('Performance > Widgets > WidgetContainer', function () {
     );
 
     expect(await screen.findByTestId('performance-widget-title')).toHaveTextContent(
-      'Most Time Consuming Resources'
+      'Most Time-Consuming Assets'
     );
     expect(await screen.findByRole('button', {name: 'View All'})).toHaveAttribute(
       'href',
-      '/performance/browser/resources/'
+      '/insights/browser/assets/'
     );
     expect(eventsMock).toHaveBeenCalledTimes(1);
     expect(eventsMock).toHaveBeenNthCalledWith(

static/app/views/performance/landing/widgets/components/widgetHeader.tsx

@@ -24,16 +24,11 @@ export function WidgetHeader<T extends WidgetDataConstraint>(
     PerformanceWidgetSetting.OVERALL_PERFORMANCE_SCORE,
   ].includes(chartSetting);
 
-  const isResourcesWidget =
-    chartSetting === PerformanceWidgetSetting.MOST_TIME_CONSUMING_RESOURCES;
-
   const isCacheWidget =
     chartSetting === PerformanceWidgetSetting.HIGHEST_CACHE_MISS_RATE_TRANSACTIONS;
 
   const featureBadge =
-    isWebVitalsWidget || isResourcesWidget || isCacheWidget ? (
-      <FeatureBadge type="new" />
-    ) : null;
+    isWebVitalsWidget || isCacheWidget ? <FeatureBadge type="new" /> : null;
 
   return (
     <WidgetHeaderContainer>