fix(insights): minor bugs/improvements to empty states

static/app/views/insights/browser/resources/views/resourcesLandingPage.spec.tsx

@@ -1,10 +1,12 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
+import {ProjectFixture} from 'sentry-fixture/project';
 
 import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestingLibrary';
 
 import type {Organization} from 'sentry/types/organization';
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjects from 'sentry/utils/useProjects';
 import ResourcesLandingPage from 'sentry/views/insights/browser/resources/views/resourcesLandingPage';
 import {SpanFunction, SpanMetricsField} from 'sentry/views/insights/types';
 
@@ -22,6 +24,7 @@ const {SPM, TIME_SPENT_PERCENTAGE} = SpanFunction;
 
 jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
+jest.mock('sentry/utils/useProjects');
 
 const requestMocks: Record<string, jest.Mock> = {};
 
@@ -154,6 +157,16 @@ const setupMocks = () => {
     action: 'PUSH',
     key: '',
   });
+
+  jest.mocked(useProjects).mockReturnValue({
+    fetchError: null,
+    fetching: false,
+    hasMore: false,
+    initiallyLoaded: true,
+    projects: [ProjectFixture({hasInsightsAssets: true})],
+    onSearch: jest.fn(),
+    placeholders: [],
+  });
 };
 
 const setupMockRequests = (organization: Organization) => {

static/app/views/insights/browser/resources/views/resourcesLandingPage.tsx

@@ -28,6 +28,7 @@ import {
 } from 'sentry/views/insights/browser/resources/utils/useResourceFilters';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
 import {DomainSelector} from 'sentry/views/insights/common/views/spans/selectors/domainSelector';
 import {ModuleName} from 'sentry/views/insights/types';
@@ -36,7 +37,7 @@ const {SPAN_OP, SPAN_DOMAIN} = BrowserStarfishFields;
 
 function ResourcesLandingPage() {
   const filters = useResourceModuleFilters();
-
+  const hasModuleData = useHasFirstSpan(ModuleName.RESOURCE);
   const crumbs = useModuleBreadcrumbs('resource');
 
   return (
@@ -69,14 +70,16 @@ function ResourcesLandingPage() {
                 <EnvironmentPageFilter />
                 <DatePageFilter />
               </PageFilterBar>
-              <DomainSelector
-                emptyOptionLocation="top"
-                value={filters[SPAN_DOMAIN] || ''}
-                additionalQuery={[
-                  ...DEFAULT_RESOURCE_FILTERS,
-                  `${SPAN_OP}:[${DEFAULT_RESOURCE_TYPES.join(',')}]`,
-                ]}
-              />
+              {hasModuleData && (
+                <DomainSelector
+                  emptyOptionLocation="top"
+                  value={filters[SPAN_DOMAIN] || ''}
+                  additionalQuery={[
+                    ...DEFAULT_RESOURCE_FILTERS,
+                    `${SPAN_OP}:[${DEFAULT_RESOURCE_TYPES.join(',')}]`,
+                  ]}
+                />
+              )}
             </FilterOptionsContainer>
             <ModulesOnboarding moduleName={ModuleName.RESOURCE}>
               <ResourceView />

static/app/views/insights/browser/webVitals/views/webVitalsLandingPage.tsx

@@ -37,6 +37,7 @@ import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
 import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useHasDataTrackAnalytics} from 'sentry/views/insights/common/utils/useHasDataTrackAnalytics';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
@@ -47,6 +48,7 @@ export function WebVitalsLandingPage() {
   const organization = useOrganization();
   const location = useLocation();
   const onboardingProject = useOnboardingProject();
+  const hasModuleData = useHasFirstSpan(ModuleName.VITAL);
 
   const router = useRouter();
 
@@ -98,7 +100,7 @@ export function WebVitalsLandingPage() {
               <EnvironmentPageFilter />
               <DatePageFilter />
             </PageFilterBar>
-            <BrowserTypeSelector />
+            {hasModuleData && <BrowserTypeSelector />}
           </TopMenuContainer>
           <MainContentContainer>
             <ModulesOnboarding moduleName={ModuleName.VITAL}>

static/app/views/insights/common/components/modulesOnboarding.tsx

@@ -15,7 +15,6 @@ import webVitalsPreviewImg from 'sentry-images/insights/module-upsells/insights-
 import emptyStateImg from 'sentry-images/spot/performance-waiting-for-span.svg';
 
 import {LinkButton} from 'sentry/components/button';
-import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import {t, tct} from 'sentry/locale';
@@ -101,12 +100,7 @@ function ModulesOnboardingPanel({moduleName}: {moduleName: ModuleName}) {
         <ContentContainer>
           <Fragment>
             <Header>{emptyStateContent.heading}</Header>
-            <p>
-              {emptyStateContent.description}{' '}
-              <ExternalLink href={MODULE_PRODUCT_DOC_LINKS[moduleName]}>
-                {t('Read Docs')}
-              </ExternalLink>
-            </p>
+            <p>{emptyStateContent.description}</p>
           </Fragment>
           <SplitContainer>
             <ModulePreview moduleName={moduleName} />
@@ -142,7 +136,7 @@ function ModulePreview({moduleName}: ModulePreviewProps) {
       <ModulePreviewImage src={emptyStateContent.imageSrc} />
       {emptyStateContent.supportedSdks && (
         <SupportedSdkContainer>
-          <div>{t('Supporting Today: ')}</div>
+          <div>{t('Supported Today: ')}</div>
           <SupportedSdkList>
             {emptyStateContent.supportedSdks.map(sdk => (
               <SupportedSdkIconContainer key={sdk}>
@@ -424,7 +418,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: queuesPreviewImg,
   },
   screen_load: {
-    heading: t('Perhaps 255 items was too large of a pagination size'),
+    heading: t(`Don’t lose your customer’s attention before your app loads`),
     description: tct(
       'View the most active [dataTypePlural] in your mobile application and monitor your releases for screen load performance.',
       {
@@ -433,7 +427,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
       }
     ),
     valuePropDescription: tct('[dataType] insights include:', {
-      dataType: MODULE_DATA_TYPES[ModuleName.RESOURCE],
+      dataType: MODULE_DATA_TYPES[ModuleName.SCREEN_LOAD],
     }),
     valuePropPoints: [
       t('Compare metrics across releases, root causing performance degradations.'),

static/app/views/insights/database/views/databaseLandingPage.tsx

@@ -26,6 +26,7 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useHasDataTrackAnalytics} from 'sentry/views/insights/common/utils/useHasDataTrackAnalytics';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
@@ -54,6 +55,7 @@ export function DatabaseLandingPage() {
   const moduleName = ModuleName.DB;
   const location = useLocation();
   const onboardingProject = useOnboardingProject();
+  const hasModuleData = useHasFirstSpan(moduleName);
 
   const selectedAggregate = DEFAULT_DURATION_AGGREGATE;
   const spanDescription = decodeScalar(location.query?.['span.description'], '');
@@ -177,7 +179,7 @@ export function DatabaseLandingPage() {
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>
-            {!onboardingProject && !isCriticalDataLoading && (
+            {hasModuleData && !onboardingProject && !isCriticalDataLoading && (
               <NoDataMessage
                 Wrapper={AlertBanner}
                 isDataAvailable={isAnyCriticalDataAvailable}

static/app/views/insights/mobile/common/components/screensTemplate.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useCallback} from 'react';
+import {Fragment, type ReactNode, useCallback} from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
@@ -19,6 +19,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ReleaseComparisonSelector} from 'sentry/views/insights/common/components/releaseSelector';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
@@ -47,6 +48,7 @@ export default function ScreensTemplate({
   const onboardingProject = useOnboardingProject();
   const location = useLocation();
   const {isProjectCrossPlatform} = useCrossPlatformProject();
+  const hasModuleData = useHasFirstSpan(moduleName);
 
   const handleProjectChange = useCallback(() => {
     browserHistory.replace({
@@ -89,8 +91,12 @@ export default function ScreensTemplate({
                 <EnvironmentPageFilter />
                 <DatePageFilter />
               </PageFilterBar>
-              <ReleaseComparisonSelector />
-              {additionalSelectors}
+              {hasModuleData && (
+                <Fragment>
+                  <ReleaseComparisonSelector />
+                  {additionalSelectors}
+                </Fragment>
+              )}
             </Container>
             <PageAlert />
             <ErrorBoundary mini>

static/app/views/insights/mobile/screenload/views/screenloadLandingPage.tsx

@@ -16,6 +16,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ReleaseComparisonSelector} from 'sentry/views/insights/common/components/releaseSelector';
+import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useModuleBreadcrumbs} from 'sentry/views/insights/common/utils/useModuleBreadcrumbs';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
@@ -33,6 +34,7 @@ import Onboarding from 'sentry/views/performance/onboarding';
 export function PageloadModule() {
   const organization = useOrganization();
   const onboardingProject = useOnboardingProject();
+  const hasModuleData = useHasFirstSpan(ModuleName.SCREEN_LOAD);
   const {isProjectCrossPlatform} = useCrossPlatformProject();
 
   const crumbs = useModuleBreadcrumbs('screen_load');
@@ -69,7 +71,7 @@ export function PageloadModule() {
                 <EnvironmentPageFilter />
                 <DatePageFilter />
               </PageFilterBar>
-              <ReleaseComparisonSelector />
+              {hasModuleData && <ReleaseComparisonSelector />}
             </Container>
             <PageAlert />
             <ErrorBoundary mini>

static/app/views/insights/settings.ts

@@ -2,11 +2,13 @@ import {t} from 'sentry/locale';
 import {
   DATA_TYPE as RESOURCE_DATA_TYPE,
   DATA_TYPE_PLURAL as RESOURCE_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as RESOURCES_MODULE_DOC_LINK,
   MODULE_TITLE as RESOURCES_MODULE_TITLE,
 } from 'sentry/views/insights/browser/resources/settings';
 import {
   DATA_TYPE as WEB_VITALS_DATA_TYPE,
   DATA_TYPE_PLURAL as WEB_VITALS_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as VITALS_MODULE_DOC_LINK,
   MODULE_TITLE as VITALS_MODULE_TITLE,
 } from 'sentry/views/insights/browser/webVitals/settings';
 import {
@@ -18,29 +20,37 @@ import {
 import {
   DATA_TYPE as DB_DATA_TYPE,
   DATA_TYPE_PLURAL as DB_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as DB_MODULE_DOC_LINK,
   MODULE_TITLE as DB_MODULE_TITLE,
 } from 'sentry/views/insights/database/settings';
 import {
   DATA_TYPE as HTTP_DATA_TYPE,
   DATA_TYPE_PLURAL as HTTP_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as HTTP_MODULE_DOC_LINK,
   MODULE_TITLE as HTTP_MODULE_TITLE,
 } from 'sentry/views/insights/http/settings';
 import {
   DATA_TYPE as AI_DATA_TYPE,
   DATA_TYPE_PLURAL as AI_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as AI_MODULE_DOC_LINK,
   MODULE_TITLE as AI_MODULE_TITLE,
 } from 'sentry/views/insights/llmMonitoring/settings';
 import {
   DATA_TYPE as APP_STARTS_DATA_TYPE,
   DATA_TYPE_PLURAL as APP_STARTS_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as APP_STARTS_MODULE_DOC_LINK,
   MODULE_TITLE as APP_STARTS_MODULE_TITLE,
 } from 'sentry/views/insights/mobile/appStarts/settings';
 import {
   DATA_TYPE as SCREEN_LOAD_DATA_TYPE,
   DATA_TYPE_PLURAL as SCREEN_LOAD_DATA_TYPE_PLURAL,
+  MODULE_DOC_LINK as SCREEN_LOADS_MODULE_DOC_LINK,
   MODULE_TITLE as SCREEN_LOADS_MODULE_TITLE,
 } from 'sentry/views/insights/mobile/screenload/settings';
-import {MODULE_TITLE as MOBILE_UI_MODULE_TITLE} from 'sentry/views/insights/mobile/ui/settings';
+import {
+  MODULE_DOC_LINK as MODULE_MODULE_DOC_LINK,
+  MODULE_TITLE as MOBILE_UI_MODULE_TITLE,
+} from 'sentry/views/insights/mobile/ui/settings';
 import {
   DATA_TYPE as QUEUE_DATA_TYPE,
   DATA_TYPE_PLURAL as QUEUE_DATA_TYPE_PLURAL,
@@ -100,18 +110,16 @@ export const MODULE_DATA_TYPES_PLURAL: Record<ModuleName, string> = {
 };
 
 export const MODULE_PRODUCT_DOC_LINKS: Record<ModuleName, string> = {
-  [ModuleName.DB]: 'https://docs.sentry.io/product/insights/database/',
-  [ModuleName.HTTP]: 'https://docs.sentry.io/product/insights/http/',
+  [ModuleName.DB]: DB_MODULE_DOC_LINK,
+  [ModuleName.HTTP]: HTTP_MODULE_DOC_LINK,
   [ModuleName.CACHE]: CACHE_MODULE_DOC_LINK,
   [ModuleName.QUEUE]: QUEUE_MODULE_DOC_LINK,
-  [ModuleName.SCREEN_LOAD]:
-    'https://docs.sentry.io/product/insights/mobile-vitals/screen-loads/',
-  [ModuleName.APP_START]:
-    'https://docs.sentry.io/product/insights/mobile-vitals/app-starts/',
-  [ModuleName.VITAL]: 'https://docs.sentry.io/product/insights/web-vitals/',
-  [ModuleName.RESOURCE]: 'https://docs.sentry.io/product/insights/assets/',
-  [ModuleName.AI]: 'https://docs.sentry.io/product/insights/llm-monitoring/',
-  [ModuleName.MOBILE_UI]: 'https://docs.sentry.io/product/insights/mobile-vitals/ui/',
+  [ModuleName.SCREEN_LOAD]: SCREEN_LOADS_MODULE_DOC_LINK,
+  [ModuleName.APP_START]: APP_STARTS_MODULE_DOC_LINK,
+  [ModuleName.VITAL]: VITALS_MODULE_DOC_LINK,
+  [ModuleName.RESOURCE]: RESOURCES_MODULE_DOC_LINK,
+  [ModuleName.AI]: AI_MODULE_DOC_LINK,
+  [ModuleName.MOBILE_UI]: MODULE_MODULE_DOC_LINK,
   [ModuleName.OTHER]: '',
   [ModuleName.ALL]: '',
 };