ref(insights): rename resource module to asset module

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

@@ -1,8 +1,12 @@
 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,
@@ -27,6 +31,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') &&
@@ -62,7 +71,7 @@ function SpanSummaryButton(props: Props) {
           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})`);
@@ -355,10 +360,10 @@ function Sidebar() {
   );
 
   const resources = hasOrganization && (
-    <Feature key="resource" features="spans-first-ui">
+    <Feature key="assets" 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/views/performance/browser/resources/index.tsx

@@ -20,7 +20,6 @@ import ResourceView, {
 import {
   MODULE_DESCRIPTION,
   MODULE_DOC_LINK,
-  MODULE_TITLE,
 } from 'sentry/views/performance/browser/resources/settings';
 import {
   BrowserStarfishFields,
@@ -29,6 +28,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,6 +38,7 @@ export const RESOURCE_THROUGHPUT_UNIT = RateUnit.PER_MINUTE;
 
 function ResourcesLandingPage() {
   const filters = useResourceModuleFilters();
+  const moduleTitle = useModuleTitle(ModuleName.RESOURCE);
 
   const crumbs = useModuleBreadcrumbs('resource');
 
@@ -48,7 +50,7 @@ function ResourcesLandingPage() {
             <Breadcrumbs crumbs={crumbs} />
 
             <Layout.Title>
-              {MODULE_TITLE}
+              {moduleTitle}
               <PageHeadingQuestionTooltip
                 docsUrl={MODULE_DOC_LINK}
                 title={MODULE_DESCRIPTION}

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

@@ -9,16 +9,21 @@ 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';
 import ResourceSummaryCharts from 'sentry/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts';
 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,7 +1,11 @@
 import {t} from 'sentry/locale';
 
-export const MODULE_TITLE = t('Resources');
+export const MODULE_TITLE = t('Assets');
 export const BASE_URL = 'browser/resources';
+export const DATA_TYPE = t('Asset'); // Name of the data shown (singular)
+
+export const PERFORMANCE_MODULE_TITLE = t('Resources');
+export const PERFORMANCE_DATA_TYPE = t('Resource');
 
 export const MODULE_DESCRIPTION = t(
   'Find large and slow-to-load resources used by your application and understand their impact on page performance.'

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/resources/'
     );
     expect(eventsMock).toHaveBeenCalledTimes(1);
     expect(eventsMock).toHaveBeenNthCalledWith(