feat(spans): Consolidate all spans related product features under one flag (#69014)

Consolidate all spans related GA'ed product features under one flag, so
we can easily enable them in ST
This is currently
[options](https://github.com/getsentry/sentry-options-automator/pull/1128)
backed, but won't be needed once can enable for ST (which we already
might, I'll check)

static/app/components/events/interfaces/spans/spanDetail.spec.tsx

@@ -150,7 +150,7 @@ describe('SpanDetail', function () {
           }),
           organization: OrganizationFixture({
             ...organization,
-            features: ['performance-database-view'],
+            features: ['spans-first-ui'],
           }),
         })
       );

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

@@ -29,7 +29,7 @@ function SpanSummaryButton(props: Props) {
   const resolvedModule = resolveSpanModule(sentryTags.op, sentryTags.category);
 
   if (
-    organization.features.includes('performance-database-view') &&
+    organization.features.includes('spans-first-ui') &&
     resolvedModule === ModuleName.DB
   ) {
     return (
@@ -48,7 +48,7 @@ function SpanSummaryButton(props: Props) {
   }
 
   if (
-    organization.features.includes('starfish-browser-resource-module-ui') &&
+    organization.features.includes('spans-first-ui') &&
     resolvedModule === ModuleName.RESOURCE &&
     resourceSummaryAvailable(sentryTags.op)
   ) {

static/app/components/sidebar/index.tsx

@@ -245,12 +245,9 @@ function Sidebar() {
       {(() => {
         // If Database View or Web Vitals View is enabled, show a Performance accordion with a Database and/or Web Vitals sub-item
         if (
-          organization.features.includes('performance-database-view') ||
-          organization.features.includes('starfish-browser-webvitals') ||
-          organization.features.includes('performance-screens-view') ||
+          organization.features.includes('spans-first-ui') ||
           organization.features.includes('performance-http-view') ||
-          organization.features.includes('performance-cache-view') ||
-          organization.features.includes('starfish-browser-resource-module-ui')
+          organization.features.includes('performance-cache-view')
         ) {
           return (
             <SidebarAccordion
@@ -260,7 +257,7 @@ function Sidebar() {
               to={`/organizations/${organization.slug}/performance/`}
               id="performance"
             >
-              <Feature features="performance-database-view" organization={organization}>
+              <Feature features="spans-first-ui" organization={organization}>
                 <SidebarItem
                   {...sidebarItemProps}
                   label={
@@ -303,7 +300,7 @@ function Sidebar() {
                   {...CacheModuleBadgeProps}
                 />
               </Feature>
-              <Feature features="starfish-browser-webvitals" organization={organization}>
+              <Feature features="spans-first-ui" organization={organization}>
                 <SidebarItem
                   {...sidebarItemProps}
                   label={
@@ -316,7 +313,7 @@ function Sidebar() {
                   icon={<SubitemDot collapsed />}
                 />
               </Feature>
-              <Feature features="performance-screens-view" organization={organization}>
+              <Feature features="spans-first-ui" organization={organization}>
                 <SidebarItem
                   {...sidebarItemProps}
                   label={t('Screen Loads')}
@@ -325,7 +322,7 @@ function Sidebar() {
                   icon={<SubitemDot collapsed />}
                 />
               </Feature>
-              <Feature features="starfish-mobile-appstart" organization={organization}>
+              <Feature features="spans-first-ui" organization={organization}>
                 <SidebarItem
                   {...sidebarItemProps}
                   label={t('App Starts')}
@@ -334,7 +331,7 @@ function Sidebar() {
                   icon={<SubitemDot collapsed />}
                 />
               </Feature>
-              <Feature features="starfish-browser-resource-module-ui">
+              <Feature features="spans-first-ui">
                 <SidebarItem
                   {...sidebarItemProps}
                   label={<GuideAnchor target="starfish">{t('Resources')}</GuideAnchor>}

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

@@ -29,11 +29,7 @@ const requestMocks: Record<string, jest.Mock> = {};
 
 describe('ResourcesLandingPage', function () {
   const organization = OrganizationFixture({
-    features: [
-      'starfish-browser-resource-module-ui',
-      'starfish-view',
-      'performance-database-view',
-    ],
+    features: ['spans-first-ui', 'starfish-view'],
   });
 
   beforeEach(() => {

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

@@ -37,7 +37,7 @@ function ResourcesLandingPage() {
     <ModulePageProviders
       title={[t('Performance'), t('Resources')].join(' — ')}
       baseURL="/performance/browser/resources"
-      features="starfish-browser-resource-module-ui"
+      features="spans-first-ui"
     >
       <PageAlertProvider>
         <Layout.Header>

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

@@ -78,7 +78,7 @@ function ResourceSummary() {
     <ModulePageProviders
       title={[t('Performance'), t('Resources'), t('Resource Summary')].join(' — ')}
       baseURL="/performance/browser/resources"
-      features="starfish-browser-resource-module-ui"
+      features="spans-first-ui"
     >
       <Layout.Header>
         <Layout.HeaderContent>

static/app/views/performance/browser/resources/resourceSummaryPage/sampleImages.spec.tsx

@@ -20,11 +20,7 @@ jest.mock('sentry/utils/useOrganization');
 
 describe('SampleImages', function () {
   const organization = OrganizationFixture({
-    features: [
-      'starfish-browser-resource-module-ui',
-      'starfish-view',
-      'performance-database-view',
-    ],
+    features: ['starfish-view', 'spans-first-ui'],
   });
 
   beforeEach(() => {

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

@@ -86,7 +86,7 @@ function ResourceView() {
 function ResourceTypeSelector({value}: {value?: string}) {
   const location = useLocation();
   const {features} = useOrganization();
-  const hasImageView = features.includes('starfish-browser-resource-module-image-view');
+  const hasImageView = features.includes('spans-first-ui');
 
   const options: Option[] = [
     {value: '', label: 'All'},

static/app/views/performance/browser/webVitals/pageOverview.spec.tsx

@@ -13,7 +13,7 @@ jest.mock('sentry/utils/useOrganization');
 
 describe('PageOverview', function () {
   const organization = OrganizationFixture({
-    features: ['starfish-browser-webvitals', 'performance-database-view'],
+    features: ['spans-first-ui'],
   });
 
   let eventsMock;
@@ -85,7 +85,7 @@ describe('PageOverview', function () {
 
   it('renders interaction samples', async () => {
     const organizationWithInp = OrganizationFixture({
-      features: ['starfish-browser-webvitals', 'performance-database-view'],
+      features: ['spans-first-ui'],
     });
     jest.mocked(useOrganization).mockReturnValue(organizationWithInp);
     jest.mocked(useLocation).mockReturnValue({
@@ -130,7 +130,7 @@ describe('PageOverview', function () {
 
   it('escapes transaction name before querying discover', async () => {
     const organizationWithInp = OrganizationFixture({
-      features: ['starfish-browser-webvitals', 'performance-database-view'],
+      features: ['spans-first-ui'],
     });
     jest.mocked(useOrganization).mockReturnValue(organizationWithInp);
     jest.mocked(useLocation).mockReturnValue({

static/app/views/performance/browser/webVitals/pageOverview.tsx

@@ -140,7 +140,7 @@ export default function PageOverview() {
     <ModulePageProviders
       title={[t('Performance'), t('Web Vitals')].join(' — ')}
       baseURL="/performance/browser/pageloads"
-      features="starfish-browser-webvitals"
+      features="spans-first-ui"
     >
       <Tabs
         value={tab}