fix(insights): customers not seeing empty state screen on developer p…

…lan (#81808)
getsentry · Dec 6, 2024 · ee058ef · ee058ef
1 parent b815847
commit ee058ef
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 62 deletions.
diff --git a/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx b/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx
@@ -30,7 +30,7 @@ const requestMocks = {
 };
 
 describe('CacheLandingPage', function () {
-  const organization = OrganizationFixture();
+  const organization = OrganizationFixture({features: ['insights-addon-modules']});
 
   jest.mocked(usePageFilters).mockReturnValue({
     isReady: true,
@@ -313,7 +313,7 @@ describe('CacheLandingPage', function () {
       initiallyLoaded: false,
     });
 
-    render(<CacheLandingPage />);
+    render(<CacheLandingPage />, {organization});
 
     await waitFor(() => {
       expect(

diff --git a/static/app/views/insights/common/components/modulePageProviders.spec.tsx b/static/app/views/insights/common/components/modulePageProviders.spec.tsx
@@ -0,0 +1,52 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
+import {ModuleName} from 'sentry/views/insights/types';
+
+jest.mock('sentry/utils/usePageFilters');
+jest.mock('sentry/views/insights/common/queries/useHasFirstSpan');
+jest.mock('sentry/views/insights/common/utils/useHasDataTrackAnalytics');
+
+describe('ModulePageProviders', () => {
+  beforeEach(() => {
+    jest.mocked(usePageFilters).mockReturnValue({
+      isReady: true,
+      desyncedFilters: new Set(),
+      pinnedFilters: new Set(),
+      shouldPersist: true,
+      selection: {
+        datetime: {
+          period: '10d',
+          start: null,
+          end: null,
+          utc: false,
+        },
+        environments: [],
+        projects: [2],
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders without module feature', async () => {
+    jest.mocked(useHasFirstSpan).mockReturnValue(true);
+
+    render(
+      <ModulePageProviders moduleName={ModuleName.DB}>
+        <div>Module Content</div>
+      </ModulePageProviders>,
+      {
+        organization: OrganizationFixture(),
+      }
+    );
+
+    await screen.findByText('Module Content');
+  });
+});
diff --git a/static/app/views/insights/common/components/modulePageProviders.tsx b/static/app/views/insights/common/components/modulePageProviders.tsx
@@ -1,18 +1,12 @@
-import Feature from 'sentry/components/acl/feature';
 import * as Layout from 'sentry/components/layouts/thirds';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import type {InsightEventKey} from 'sentry/utils/analytics/insightAnalyticEvents';
 import useOrganization from 'sentry/utils/useOrganization';
-import {NoAccess} from 'sentry/views/insights/common/components/noAccess';
 import {useHasDataTrackAnalytics} from 'sentry/views/insights/common/utils/useHasDataTrackAnalytics';
 import {useModuleTitles} from 'sentry/views/insights/common/utils/useModuleTitle';
-import {
-  INSIGHTS_TITLE,
-  MODULE_FEATURE_MAP,
-  QUERY_DATE_RANGE_LIMIT,
-} from 'sentry/views/insights/settings';
+import {INSIGHTS_TITLE, QUERY_DATE_RANGE_LIMIT} from 'sentry/views/insights/settings';
 import type {ModuleName} from 'sentry/views/insights/types';
 
 type ModuleNameStrings = `${ModuleName}`;
@@ -38,8 +32,6 @@ export function ModulePageProviders({
     'insights-query-date-range-limit'
   );
 
-  const features = MODULE_FEATURE_MAP[moduleName];
-
   useHasDataTrackAnalytics(moduleName as ModuleName, analyticEventName);
 
   const moduleTitle = moduleTitles[moduleName];
@@ -54,13 +46,7 @@ export function ModulePageProviders({
     >
       <SentryDocumentTitle title={fullPageTitle} orgSlug={organization.slug}>
         <Layout.Page>
-          <Feature
-            features={features}
-            organization={organization}
-            renderDisabled={NoAccess}
-          >
-            <NoProjectMessage organization={organization}>{children}</NoProjectMessage>
-          </Feature>
+          <NoProjectMessage organization={organization}>{children}</NoProjectMessage>
         </Layout.Page>
       </SentryDocumentTitle>
     </PageFiltersContainer>

diff --git a/static/app/views/insights/common/components/moduleUpsellHookWrapper.spec.tsx b/static/app/views/insights/common/components/moduleUpsellHookWrapper.spec.tsx
@@ -0,0 +1,44 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import {ModuleName} from 'sentry/views/insights/types';
+
+jest.mock('sentry/utils/usePageFilters');
+
+describe('ModulePageProviders', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders no feature if module is not enabled', async () => {
+    render(
+      <ModuleBodyUpsellHook moduleName={ModuleName.DB}>
+        <div>Module Content</div>
+      </ModuleBodyUpsellHook>,
+      {
+        organization: OrganizationFixture({
+          features: ['insights-entry-points'],
+        }),
+      }
+    );
+
+    await screen.findByText(`You don't have access to this feature`);
+  });
+
+  it('renders module content if module is enabled', async () => {
+    render(
+      <ModuleBodyUpsellHook moduleName={ModuleName.DB}>
+        <div>Module Content</div>
+      </ModuleBodyUpsellHook>,
+      {
+        organization: OrganizationFixture({
+          features: ['insights-initial-modules'],
+        }),
+      }
+    );
+
+    await screen.findByText(`Module Content`);
+  });
+});
diff --git a/static/app/views/insights/common/components/moduleUpsellHookWrapper.tsx b/static/app/views/insights/common/components/moduleUpsellHookWrapper.tsx
@@ -1,17 +1,28 @@
+import Feature from 'sentry/components/acl/feature';
 import HookOrDefault from 'sentry/components/hookOrDefault';
+import {NoAccess} from 'sentry/components/noAccess';
+import useOrganization from 'sentry/utils/useOrganization';
 import type {TitleableModuleNames} from 'sentry/views/insights/common/components/modulePageProviders';
+import {MODULE_FEATURE_MAP} from 'sentry/views/insights/settings';
 
-// TODO - remove, This is only necessary for domain views, where we don't want to show the full upsell page.
 export function ModuleBodyUpsellHook({
   moduleName,
   children,
 }: {
   children: React.ReactNode;
   moduleName: TitleableModuleNames;
 }) {
+  const organization = useOrganization();
+
   return (
     <UpsellPageHook moduleName={moduleName} fullPage={false}>
-      {children}
+      <Feature
+        features={MODULE_FEATURE_MAP[moduleName]}
+        organization={organization}
+        renderDisabled={NoAccess}
+      >
+        {children}
+      </Feature>
     </UpsellPageHook>
   );
 }

diff --git a/static/app/views/insights/database/views/databaseLandingPage.spec.tsx b/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
@@ -15,7 +15,7 @@ jest.mock('sentry/utils/useProjects');
 jest.mock('sentry/views/insights/common/queries/useOnboardingProject');
 
 describe('DatabaseLandingPage', function () {
-  const organization = OrganizationFixture();
+  const organization = OrganizationFixture({features: ['insights-initial-modules']});
 
   let spanListRequestMock: jest.Mock;
   let spanChartsRequestMock: jest.Mock;

diff --git a/static/app/views/insights/database/views/databaseSpanSummaryPage.spec.tsx b/static/app/views/insights/database/views/databaseSpanSummaryPage.spec.tsx
@@ -13,7 +13,7 @@ jest.mock('sentry/utils/usePageFilters');
 
 describe('DatabaseSpanSummaryPage', function () {
   const organization = OrganizationFixture({
-    features: ['insights-related-issues-table'],
+    features: ['insights-related-issues-table', 'insights-initial-modules'],
   });
   const group = GroupFixture();
 

diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx
@@ -15,7 +15,7 @@ jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
 
 describe('HTTPSummaryPage', function () {
-  const organization = OrganizationFixture();
+  const organization = OrganizationFixture({features: ['insights-initial-modules']});
 
   let domainChartsRequestMock, domainTransactionsListRequestMock;
 

diff --git a/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx b/static/app/views/insights/mobile/screens/views/screensLandingPage.tsx
@@ -23,6 +23,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
+import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector';
 import {SETUP_CONTENT as TTFD_SETUP} from 'sentry/views/insights/mobile/screenload/data/setupContent';
@@ -299,47 +300,49 @@ export function ScreensLandingPage() {
             headerActions={isProjectCrossPlatform && <PlatformSelector />}
             module={moduleName}
           />
-          <Layout.Body>
-            <Layout.Main fullWidth>
-              <Container>
-                <PageFilterBar condensed>
-                  <ProjectPageFilter onChange={handleProjectChange} />
-                  <EnvironmentPageFilter />
-                  <DatePageFilter />
-                </PageFilterBar>
-              </Container>
-              <PageAlert />
-              <ErrorBoundary mini>
+          <ModuleBodyUpsellHook moduleName={moduleName}>
+            <Layout.Body>
+              <Layout.Main fullWidth>
                 <Container>
-                  <Flex data-test-id="mobile-screens-top-metrics">
-                    {vitalItems.map(item => {
-                      const metricValue = metricValueFor(item);
-                      const status =
-                        (metricValue && item.getStatus(metricValue)) ?? STATUS_UNKNOWN;
-
-                      return (
-                        <VitalCard
-                          onClick={() => {
-                            setState({
-                              vital: item,
-                              status: status,
-                            });
-                          }}
-                          key={item.field}
-                          title={item.title}
-                          description={item.description}
-                          statusLabel={status.description}
-                          status={status.score}
-                          formattedValue={status.formattedValue}
-                        />
-                      );
-                    })}
-                  </Flex>
-                  <ScreensOverview />
+                  <PageFilterBar condensed>
+                    <ProjectPageFilter onChange={handleProjectChange} />
+                    <EnvironmentPageFilter />
+                    <DatePageFilter />
+                  </PageFilterBar>
                 </Container>
-              </ErrorBoundary>
-            </Layout.Main>
-          </Layout.Body>
+                <PageAlert />
+                <ErrorBoundary mini>
+                  <Container>
+                    <Flex data-test-id="mobile-screens-top-metrics">
+                      {vitalItems.map(item => {
+                        const metricValue = metricValueFor(item);
+                        const status =
+                          (metricValue && item.getStatus(metricValue)) ?? STATUS_UNKNOWN;
+
+                        return (
+                          <VitalCard
+                            onClick={() => {
+                              setState({
+                                vital: item,
+                                status: status,
+                              });
+                            }}
+                            key={item.field}
+                            title={item.title}
+                            description={item.description}
+                            statusLabel={status.description}
+                            status={status.score}
+                            formattedValue={status.formattedValue}
+                          />
+                        );
+                      })}
+                    </Flex>
+                    <ScreensOverview />
+                  </Container>
+                </ErrorBoundary>
+              </Layout.Main>
+            </Layout.Body>
+          </ModuleBodyUpsellHook>
           <VitalDetailPanel
             vital={state.vital}
             status={state.status}