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

1. Don't show extra filters on modules if there is no module data to
begin with. For example on the assets module, we won't show the domain
filter. This makes sense because these filters will not change anything
in this context anyways.
2. Use correct docs links from each modules `settings.ts`
3. Remove duplicated `read docs`

Author: DominikB2014

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]: '',
 };