feat(insights): Granular frontend feature flags (#71821)

The `spans-first-ui` flag is going away, in favour of three flags:

- `insights-entry-points` which enables entry points to Insight UIs if
those entry points have upsells (e.g., sidebar links)
- `insights-initial-modules` enables access to UIs that connect to the
first set of Insights modules (Queries, Requests, Resources, etc.)
- `insights-addon-modules` enables access to UI that show the newer set
of Insights modules (Caches, LLMs, etc.)

This PR gets rid of `spans-first-ui` checks on the frontend, replacing
them with the right `insights-` flag.

Author: gggritso

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

@@ -229,7 +229,9 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
     }
 
     const transactionName = event.title;
-    const hasNewSpansUIFlag = organization.features.includes('performance-spans-new-ui');
+    const hasNewSpansUIFlag =
+      organization.features.includes('performance-spans-new-ui') &&
+      organization.features.includes('insights-initial-modules');
 
     // The new spans UI relies on the group hash assigned by Relay, which is different from the hash available on the span itself
     const groupHash = hasNewSpansUIFlag

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

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

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

@@ -40,7 +40,7 @@ function SpanSummaryButton(props: Props) {
     : PERFORMANCE_RESOURCE_DATA_TYPE;
 
   if (
-    organization.features.includes('spans-first-ui') &&
+    organization.features.includes('insights-initial-modules') &&
     resolvedModule === ModuleName.DB
   ) {
     return (
@@ -59,7 +59,7 @@ function SpanSummaryButton(props: Props) {
   }
 
   if (
-    organization.features.includes('spans-first-ui') &&
+    organization.features.includes('insights-initial-modules') &&
     resolvedModule === ModuleName.RESOURCE &&
     resourceSummaryAvailable(sentryTags.op)
   ) {

static/app/components/sidebar/index.tsx

@@ -250,7 +250,7 @@ function Sidebar() {
   const moduleURLBuilder = useModuleURLBuilder(true);
 
   const queries = hasOrganization && (
-    <Feature key="db" features="spans-first-ui" organization={organization}>
+    <Feature key="db" features="insights-entry-points" organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
         label={
@@ -264,7 +264,7 @@ function Sidebar() {
   );
 
   const requests = hasOrganization && (
-    <Feature key="http" features="spans-first-ui" organization={organization}>
+    <Feature key="http" features="insights-entry-points" organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
         label={<GuideAnchor target="performance-http">{MODULE_TITLES.http}</GuideAnchor>}
@@ -276,7 +276,11 @@ function Sidebar() {
   );
 
   const caches = hasOrganization && (
-    <Feature key="cache" features="performance-cache-view" organization={organization}>
+    <Feature
+      key="cache"
+      features={['insights-entry-points', 'performance-cache-view']}
+      organization={organization}
+    >
       <SidebarItem
         {...sidebarItemProps}
         label={
@@ -291,7 +295,7 @@ function Sidebar() {
   );
 
   const webVitals = hasOrganization && (
-    <Feature key="vital" features="spans-first-ui" organization={organization}>
+    <Feature key="vital" features="insights-entry-points" organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
         label={
@@ -305,7 +309,11 @@ function Sidebar() {
   );
 
   const queues = hasOrganization && (
-    <Feature key="queue" features="performance-queues-view" organization={organization}>
+    <Feature
+      key="queue"
+      features={['insights-entry-points', 'performance-queues-view']}
+      organization={organization}
+    >
       <SidebarItem
         {...sidebarItemProps}
         label={
@@ -320,7 +328,11 @@ function Sidebar() {
   );
 
   const screenLoads = hasOrganization && (
-    <Feature key="screen_load" features="spans-first-ui" organization={organization}>
+    <Feature
+      key="screen_load"
+      features="insights-entry-points"
+      organization={organization}
+    >
       <SidebarItem
         {...sidebarItemProps}
         label={MODULE_TITLES.screen_load}
@@ -332,7 +344,7 @@ function Sidebar() {
   );
 
   const appStarts = hasOrganization && (
-    <Feature key="app_start" features="spans-first-ui" organization={organization}>
+    <Feature key="app_start" features="insights-entry-points" organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
         label={MODULE_TITLES.app_start}
@@ -346,7 +358,7 @@ function Sidebar() {
   const mobileUI = hasOrganization && (
     <Feature
       key="mobile-ui"
-      features={['spans-first-ui', 'starfish-mobile-ui-module']}
+      features={['insights-entry-points', 'starfish-mobile-ui-module']}
       organization={organization}
     >
       <SidebarItem
@@ -361,7 +373,7 @@ function Sidebar() {
   );
 
   const resources = hasOrganization && (
-    <Feature key="resource" features="spans-first-ui">
+    <Feature key="resource" features="insights-entry-points">
       <SidebarItem
         {...sidebarItemProps}
         label={<GuideAnchor target="starfish">{resourceModuleTitle}</GuideAnchor>}
@@ -386,7 +398,10 @@ function Sidebar() {
   );
 
   const llmMonitoring = hasOrganization && (
-    <Feature features="ai-analytics" organization={organization}>
+    <Feature
+      features={['insights-entry-points', 'ai-analytics']}
+      organization={organization}
+    >
       <SidebarItem
         {...sidebarItemProps}
         icon={hasNewSidebarHierarchy ? <SubitemDot collapsed /> : <IconRobot />}
@@ -408,7 +423,7 @@ function Sidebar() {
         // If the client has the old sidebar hierarchy _and_ something to show inside the Performance dropdown, render an accordion.
         if (
           !hasNewSidebarHierarchy &&
-          (organization.features.includes('spans-first-ui') ||
+          (organization.features.includes('insights-entry-points') ||
             organization.features.includes('performance-cache-view') ||
             organization.features.includes('performance-queues-view') ||
             organization.features.includes('performance-trace-explorer'))
@@ -594,26 +609,28 @@ function Sidebar() {
     />
   );
 
-  const insights = (
-    <SidebarAccordion
-      {...sidebarItemProps}
-      icon={<IconGraph />}
-      label={<GuideAnchor target="insights">{t('Insights')}</GuideAnchor>}
-      id="insights"
-      isNew
-      exact={!shouldAccordionFloat}
-    >
-      {requests}
-      {queries}
-      {resources}
-      {appStarts}
-      {screenLoads}
-      {webVitals}
-      {caches}
-      {queues}
-      {mobileUI}
-      {llmMonitoring}
-    </SidebarAccordion>
+  const insights = hasOrganization && (
+    <Feature key="insights" features="insights-entry-points" organization={organization}>
+      <SidebarAccordion
+        {...sidebarItemProps}
+        icon={<IconGraph />}
+        label={<GuideAnchor target="insights">{t('Insights')}</GuideAnchor>}
+        id="insights"
+        isNew
+        exact={!shouldAccordionFloat}
+      >
+        {requests}
+        {queries}
+        {resources}
+        {appStarts}
+        {screenLoads}
+        {webVitals}
+        {caches}
+        {queues}
+        {mobileUI}
+        {llmMonitoring}
+      </SidebarAccordion>
+    </Feature>
   );
 
   const explore = (

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

@@ -27,7 +27,7 @@ const requestMocks: Record<string, jest.Mock> = {};
 
 describe('ResourcesLandingPage', function () {
   const organization = OrganizationFixture({
-    features: ['spans-first-ui', 'starfish-view'],
+    features: ['insights-initial-modules'],
   });
 
   beforeEach(() => {

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

@@ -97,7 +97,7 @@ function ResourcesLandingPage() {
 
 function PageWithProviders() {
   return (
-    <ModulePageProviders moduleName="resource" features="spans-first-ui">
+    <ModulePageProviders moduleName="resource" features="insights-initial-modules">
       <ResourcesLandingPage />
     </ModulePageProviders>
   );

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

@@ -165,7 +165,7 @@ function PageWithProviders() {
     <ModulePageProviders
       moduleName="resource"
       pageTitle={`${resourceDataType} ${t('Summary')}`}
-      features="spans-first-ui"
+      features="insights-initial-modules"
     >
       <ResourceSummary />
     </ModulePageProviders>

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

@@ -18,7 +18,7 @@ jest.mock('sentry/utils/usePageFilters');
 
 describe('SampleImages', function () {
   const organization = OrganizationFixture({
-    features: ['starfish-view', 'spans-first-ui'],
+    features: ['insights-initial-modules'],
   });
 
   beforeEach(() => {

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

@@ -85,7 +85,7 @@ function ResourceView() {
 function ResourceTypeSelector({value}: {value?: string}) {
   const location = useLocation();
   const {features} = useOrganization();
-  const hasImageView = features.includes('spans-first-ui');
+  const hasImageView = features.includes('insights-initial-modules');
 
   const options: Option[] = [
     {value: '', label: 'All'},

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

@@ -11,7 +11,7 @@ jest.mock('sentry/utils/usePageFilters');
 
 describe('PageOverview', function () {
   const organization = OrganizationFixture({
-    features: ['spans-first-ui'],
+    features: ['insights-initial-modules'],
   });
 
   let eventsMock;
@@ -81,7 +81,7 @@ describe('PageOverview', function () {
 
   it('renders interaction samples', async () => {
     const organizationWithInp = OrganizationFixture({
-      features: ['spans-first-ui'],
+      features: ['insights-initial-modules'],
     });
     jest.mocked(useLocation).mockReturnValue({
       pathname: '',
@@ -125,7 +125,7 @@ describe('PageOverview', function () {
 
   it('escapes transaction name before querying discover', async () => {
     const organizationWithInp = OrganizationFixture({
-      features: ['spans-first-ui'],
+      features: ['insights-initial-modules'],
     });
     jest.mocked(useLocation).mockReturnValue({
       pathname: '',