feat(ourlogs): Empty state for logs (#97455)

### Summary
Adds onboarding / empty state for logs so it's easier for users to get
setup.

Author: k-fish

static/app/components/onboarding/gettingStartedDoc/types.ts

@@ -223,6 +223,7 @@ export interface Docs<PlatformOptions extends BasePlatformOptions = BasePlatform
   feedbackOnboardingCrashApi?: OnboardingConfig<PlatformOptions>;
   feedbackOnboardingJsLoader?: OnboardingConfig<PlatformOptions>;
   feedbackOnboardingNpm?: OnboardingConfig<PlatformOptions>;
+  logsOnboarding?: OnboardingConfig<PlatformOptions>;
   mcpOnboarding?: OnboardingConfig<PlatformOptions>;
   performanceOnboarding?: OnboardingConfig<PlatformOptions>;
   platformOptions?: PlatformOptions;

static/app/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted.ts

@@ -6,6 +6,7 @@ import {
   featureFlagOnboardingPlatforms,
   feedbackOnboardingPlatforms,
   replayPlatforms,
+  withLoggingOnboarding,
   withPerformanceOnboarding,
 } from 'sentry/data/platformCategories';
 import type {Organization} from 'sentry/types/organization';
@@ -16,7 +17,7 @@ import {useProjectKeys} from 'sentry/utils/useProjectKeys';
 type Props = {
   orgSlug: Organization['slug'];
   platform: PlatformIntegration;
-  productType?: 'feedback' | 'replay' | 'performance' | 'featureFlags';
+  productType?: 'feedback' | 'replay' | 'performance' | 'featureFlags' | 'logs';
   projSlug?: Project['slug'];
 };
 
@@ -38,6 +39,7 @@ export function useLoadGettingStarted({
   );
 
   const projectKeys = useProjectKeys({orgSlug, projSlug});
+
   const platformPath = getPlatformPath(platform);
 
   useEffect(() => {
@@ -47,6 +49,7 @@ export function useLoadGettingStarted({
         !platformPath ||
         (productType === 'replay' && !replayPlatforms.includes(platform.id)) ||
         (productType === 'performance' && !withPerformanceOnboarding.has(platform.id)) ||
+        (productType === 'logs' && !withLoggingOnboarding.has(platform.id)) ||
         (productType === 'feedback' &&
           !feedbackOnboardingPlatforms.includes(platform.id)) ||
         (productType === 'featureFlags' &&

static/app/data/platformCategories.tsx

@@ -304,6 +304,21 @@ export const withoutPerformanceSupport: Set<PlatformKey> = new Set([
   'xbox',
 ]);
 
+// List of platforms that have logging onboarding checklist content
+export const withLoggingOnboarding: Set<PlatformKey> = new Set([]);
+
+// List of platforms that do not have logging support. We make use of this list in the product to not provide any Logging
+export const withoutLoggingSupport: Set<PlatformKey> = new Set([
+  'cocoa-objc',
+  'cocoa-swift',
+  'elixir',
+  'dotnet',
+  'php-symfony',
+  'unity',
+  'unreal',
+  'native',
+]);
+
 export const profiling: PlatformKey[] = [
   'android',
   'apple',

static/app/utils/analytics/logsAnalyticsEvent.tsx

@@ -1,4 +1,5 @@
 import type {Organization} from 'sentry/types/organization';
+import type {PlatformKey} from 'sentry/types/project';
 
 export enum LogsAnalyticsPageSource {
   EXPLORE_LOGS = 'explore',
@@ -48,6 +49,22 @@ export type LogsAnalyticsEventParameters = {
     log_id: string;
     page_source: LogsAnalyticsPageSource;
   };
+
+  'logs.tracing_onboarding': {
+    organization: Organization;
+    platform: PlatformKey | 'unknown';
+    supports_onboarding_checklist: boolean;
+  };
+
+  'logs.tracing_onboarding_performance_docs_viewed': {
+    organization: Organization;
+    platform: PlatformKey | 'unknown';
+  };
+
+  'logs.tracing_onboarding_platform_docs_viewed': {
+    organization: Organization;
+    platform: PlatformKey | 'unknown';
+  };
 };
 
 type LogsAnalyticsEventKey = keyof LogsAnalyticsEventParameters;
@@ -59,6 +76,11 @@ export const logsAnalyticsEventMap: Record<LogsAnalyticsEventKey, string | null>
   'logs.explorer.metadata': 'Log Explorer Pageload Metadata',
   'logs.issue_details.drawer_opened': 'Issues Page Logs Drawer Opened',
   'logs.table.row_expanded': 'Expanded Log Row Details',
+  'logs.tracing_onboarding': 'Logs Tracing Onboarding',
+  'logs.tracing_onboarding_performance_docs_viewed':
+    'Logs Tracing Onboarding Performance Docs Viewed',
+  'logs.tracing_onboarding_platform_docs_viewed':
+    'Logs Tracing Onboarding Platform Docs Viewed',
   'logs.save_as': 'Logs Save As',
   'logs.save_query_modal': 'Logs Save Query Modal',
 };

static/app/utils/eventWaiter.tsx

@@ -20,7 +20,7 @@ type FirstIssue = null | boolean | Group;
 export interface EventWaiterProps {
   api: Client;
   children: (props: {firstIssue: FirstIssue}) => React.ReactNode;
-  eventType: 'error' | 'transaction' | 'replay' | 'profile';
+  eventType: 'error' | 'transaction' | 'replay' | 'profile' | 'log';
   organization: Organization;
   project: Project;
   disabled?: boolean;
@@ -42,6 +42,8 @@ function getFirstEvent(eventType: EventWaiterProps['eventType'], resp: Project)
       return resp.hasReplays;
     case 'profile':
       return resp.hasProfiles;
+    case 'log':
+      return resp.hasLogs;
     default:
       return null;
   }
@@ -123,6 +125,8 @@ class EventWaiter extends Component<EventWaiterProps, EventWaiterState> {
       firstIssue = Boolean(firstEvent);
     } else if (eventType === 'profile') {
       firstIssue = Boolean(firstEvent);
+    } else if (eventType === 'log') {
+      firstIssue = Boolean(firstEvent);
     }
 
     if (onIssueReceived) {

static/app/views/explore/logs/content.spec.tsx

@@ -1,25 +1,44 @@
 import {createLogFixtures, initializeLogsTest} from 'sentry-fixture/log';
+import {ProjectKeysFixture} from 'sentry-fixture/projectKeys';
+import {TeamFixture} from 'sentry-fixture/team';
 
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import * as useRecentCreatedProjectHook from 'sentry/components/onboarding/useRecentCreatedProject';
+import ProjectsStore from 'sentry/stores/projectsStore';
+import TeamStore from 'sentry/stores/teamStore';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 import {LOGS_AUTO_REFRESH_KEY} from 'sentry/views/explore/contexts/logs/logsAutoRefreshContext';
+import type {OurLogsResponseItem} from 'sentry/views/explore/logs/types';
 
 import LogsPage from './content';
 
 describe('LogsPage', function () {
-  const {organization, project, setupPageFilters, setupEventsMock} = initializeLogsTest();
-
-  setupPageFilters();
+  let organization: Organization;
+  let project: Project;
+  let testDate: Date;
 
   let eventTableMock: jest.Mock;
   let eventStatsMock: jest.Mock;
 
-  // Standard log fixtures for consistent testing
-  const testDate = new Date('2024-01-15T10:00:00.000Z');
-  const {baseFixtures} = createLogFixtures(organization, project, testDate);
-
   beforeEach(function () {
     MockApiClient.clearMockResponses();
+    const {
+      organization: _organization,
+      project: _project,
+      setupPageFilters,
+      setupEventsMock,
+    } = initializeLogsTest();
+
+    organization = _organization;
+    project = _project;
+
+    setupPageFilters();
+
+    // Standard log fixtures for consistent testing
+    testDate = new Date('2024-01-15T10:00:00.000Z');
+    const {baseFixtures} = createLogFixtures(organization, project, testDate);
 
     eventTableMock = setupEventsMock(baseFixtures.slice(0, 2));
 
@@ -79,6 +98,56 @@ describe('LogsPage', function () {
     expect(table).toHaveTextContent(/User login successful/);
   });
 
+  it('should show onboarding when project is not onboarded', async function () {
+    ProjectsStore.reset();
+    const {
+      organization: onboardingOrganization,
+      project: onboardingProject,
+      setupPageFilters: onboardingSetupPageFilters,
+    } = initializeLogsTest({
+      project: {
+        hasLogs: false,
+        platform: 'javascript-react',
+      },
+    });
+    TeamStore.loadInitialData([TeamFixture()]);
+    const projectSlugMock = MockApiClient.addMockResponse({
+      url: `/projects/${onboardingOrganization.slug}/${onboardingProject.slug}/keys/`,
+      method: 'GET',
+      body: [ProjectKeysFixture()[0]],
+    });
+    const sdkMock = MockApiClient.addMockResponse({
+      url: `/organizations/${onboardingOrganization.slug}/sdks/`,
+      method: 'GET',
+      body: [],
+    });
+
+    jest
+      .spyOn(useRecentCreatedProjectHook, 'useRecentCreatedProject')
+      .mockImplementation(() => {
+        return {
+          project: onboardingProject,
+          isProjectActive: true,
+        };
+      });
+
+    onboardingSetupPageFilters();
+
+    render(<LogsPage />, {
+      organization,
+      initialRouterConfig: {
+        location: `/organizations/${organization.slug}/explore/logs/`,
+      },
+    });
+
+    expect(projectSlugMock).toHaveBeenCalled();
+    expect(sdkMock).toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(screen.getByText('Your Source for Log-ical Data')).toBeInTheDocument();
+    });
+  });
+
   it('should call aggregates APIs as expected', async function () {
     render(<LogsPage />, {
       organization,
@@ -137,34 +206,39 @@ describe('LogsPage', function () {
   });
 
   describe('autorefresh flag enabled', () => {
-    const {
-      organization: autorefreshOrganization,
-      setupEventsMock: _setupEventsMock,
-      setupTraceItemsMock: _setupTraceItemsMock,
-      generateRouterConfig,
-      routerConfig: initialRouterConfig,
-    } = initializeLogsTest({
-      refreshInterval: '10000', // 10 seconds, should not first events multiple times.
-      liveRefresh: true,
-    });
-
-    const {baseFixtures: autorefreshBaseFixtures} = createLogFixtures(
-      autorefreshOrganization,
-      project,
-      testDate,
-      {
-        intervalMs: 24 * 60 * 60 * 1000, // 24 hours
-      }
-    );
+    let initialRouterConfig: ReturnType<typeof initializeLogsTest>['routerConfig'];
+    let autorefreshBaseFixtures: OurLogsResponseItem[];
+    let setupTraceItemsMock: ReturnType<typeof initializeLogsTest>['setupTraceItemsMock'];
+    let setupEventsMock: ReturnType<typeof initializeLogsTest>['setupEventsMock'];
 
     beforeEach(() => {
       eventTableMock.mockClear();
-      eventTableMock = _setupEventsMock(autorefreshBaseFixtures.slice(0, 5));
+
+      const {
+        organization: autorefreshOrganization,
+        setupEventsMock: _setupEventsMock,
+        project: _project,
+        setupTraceItemsMock: _setupTraceItemsMock,
+        routerConfig,
+      } = initializeLogsTest({
+        refreshInterval: '10000', // 10 seconds, should not first events multiple times.
+        liveRefresh: true,
+      });
+      organization = autorefreshOrganization;
+      project = _project;
+      initialRouterConfig = routerConfig;
+      setupTraceItemsMock = _setupTraceItemsMock;
+      setupEventsMock = _setupEventsMock;
+      const {baseFixtures} = createLogFixtures(organization, project, testDate, {
+        intervalMs: 24 * 60 * 60 * 1000, // 24 hours
+      });
+      eventTableMock = _setupEventsMock(baseFixtures.slice(0, 5));
+      autorefreshBaseFixtures = baseFixtures;
     });
 
     it('enables autorefresh when Switch is clicked', async function () {
       render(<LogsPage />, {
-        organization: autorefreshOrganization,
+        organization,
         initialRouterConfig,
       });
 
@@ -185,10 +259,17 @@ describe('LogsPage', function () {
 
     it('pauses auto-refresh when enabled switch is clicked', async function () {
       const {router} = render(<LogsPage />, {
-        organization: autorefreshOrganization,
-        initialRouterConfig: generateRouterConfig({
-          [LOGS_AUTO_REFRESH_KEY]: 'enabled',
-        }),
+        organization,
+        initialRouterConfig: {
+          ...initialRouterConfig,
+          location: {
+            ...initialRouterConfig.location,
+            query: {
+              ...initialRouterConfig.location.query,
+              [LOGS_AUTO_REFRESH_KEY]: 'enabled',
+            },
+          },
+        },
       });
       expect(router.location.query[LOGS_AUTO_REFRESH_KEY]).toBe('enabled');
 
@@ -208,12 +289,19 @@ describe('LogsPage', function () {
     });
 
     it('pauses auto-refresh when row is clicked', async function () {
-      const rowDetailsMock = _setupTraceItemsMock(autorefreshBaseFixtures.slice(0, 1))[0];
+      const rowDetailsMock = setupTraceItemsMock(autorefreshBaseFixtures.slice(0, 1))[0];
       const {router} = render(<LogsPage />, {
-        organization: autorefreshOrganization,
-        initialRouterConfig: generateRouterConfig({
-          [LOGS_AUTO_REFRESH_KEY]: 'enabled',
-        }),
+        organization,
+        initialRouterConfig: {
+          ...initialRouterConfig,
+          location: {
+            ...initialRouterConfig.location,
+            query: {
+              ...initialRouterConfig.location.query,
+              [LOGS_AUTO_REFRESH_KEY]: 'enabled',
+            },
+          },
+        },
       });
 
       expect(router.location.query[LOGS_AUTO_REFRESH_KEY]).toBe('enabled');
@@ -243,7 +331,7 @@ describe('LogsPage', function () {
 
       expect(eventTableMock).toHaveBeenCalledTimes(1);
       eventTableMock.mockClear();
-      eventTableMock = _setupEventsMock(autorefreshBaseFixtures.slice(0, 5));
+      eventTableMock = setupEventsMock(autorefreshBaseFixtures.slice(0, 5));
 
       await userEvent.click(switchInput);