feat(source-map-config-issues): Implementing problem, diagnosis and troubleshooting section designs

static/app/components/events/interfaces/crashContent/exception/content.tsx

@@ -10,7 +10,8 @@ import {StacktraceBanners} from 'sentry/components/events/interfaces/crashConten
 import {useLineCoverageContext} from 'sentry/components/events/interfaces/crashContent/exception/lineCoverageContext';
 import {
   prepareSourceMapDebuggerFrameInformation,
-  useSourceMapDebuggerData,
+  useSourceMapDebugQuery,
+  type SourceMapDebugBlueThunderResponse,
 } from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData';
 import {renderLinksInText} from 'sentry/components/events/interfaces/crashContent/exception/utils';
 import {getStacktracePlatform} from 'sentry/components/events/interfaces/utils';
@@ -164,7 +165,7 @@ function InnerContent({
   hasChainedExceptions: boolean;
   hiddenExceptions: ExceptionRenderStateMap;
   isSampleError: boolean;
-  sourceMapDebuggerData: ReturnType<typeof useSourceMapDebuggerData>;
+  sourceMapDebuggerData: SourceMapDebugBlueThunderResponse | undefined;
   toggleRelatedExceptions: (exceptionId: number) => void;
   values: ExceptionValue[];
   project?: Project;
@@ -265,7 +266,11 @@ export function Content({
 }: Props) {
   const {projects} = useProjects({slugs: [projectSlug]});
 
-  const sourceMapDebuggerData = useSourceMapDebuggerData(event, projectSlug);
+  const {data: sourceMapDebuggerData} = useSourceMapDebugQuery(
+    projectSlug,
+    event.id,
+    event.sdk?.name ?? null
+  );
   const {hiddenExceptions, toggleRelatedExceptions, expandException} =
     useHiddenExceptions(values);
 

static/app/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData.tsx

@@ -2,7 +2,8 @@ import type {FrameSourceMapDebuggerData} from 'sentry/components/events/interfac
 import type {Event} from 'sentry/types/event';
 import type {PlatformKey} from 'sentry/types/project';
 import {getApiUrl} from 'sentry/utils/api/getApiUrl';
-import {useApiQuery} from 'sentry/utils/queryClient';
+import {useApiQuery, type UseApiQueryResult} from 'sentry/utils/queryClient';
+import type {RequestError} from 'sentry/utils/requestError/requestError';
 import {useOrganization} from 'sentry/utils/useOrganization';
 
 interface SourceMapDebugBlueThunderResponseFrame {
@@ -33,7 +34,7 @@ interface SourceMapDebugBlueThunderResponseFrame {
   };
 }
 
-interface SourceMapDebugBlueThunderResponse {
+export interface SourceMapDebugBlueThunderResponse {
   dist: string | null;
   exceptions: Array<{
     frames: SourceMapDebugBlueThunderResponseFrame[];
@@ -49,31 +50,43 @@ interface SourceMapDebugBlueThunderResponse {
   min_debug_id_sdk_version?: string | null;
 }
 
-export function useSourceMapDebuggerData(event: Event, projectSlug: string) {
-  const isSdkThatShouldShowSourceMapsDebugger =
-    !!event.sdk?.name?.startsWith('sentry.javascript.');
+export type SourceMapDebugQueryResult = UseApiQueryResult<
+  SourceMapDebugBlueThunderResponse,
+  RequestError
+>;
+
+export function useSourceMapDebugQuery(
+  projectSlug: string,
+  eventId: string,
+  sdkName: string | null = null
+): SourceMapDebugQueryResult {
   const organization = useOrganization({allowNull: true});
-  const {data: sourceMapDebuggerData} = useApiQuery<SourceMapDebugBlueThunderResponse>(
+  const isSdkThatShouldShowSourceMapsDebugger =
+    sdkName?.startsWith('sentry.javascript.') ?? false;
+  return useApiQuery<SourceMapDebugBlueThunderResponse>(
     [
       getApiUrl(
         '/projects/$organizationIdOrSlug/$projectIdOrSlug/events/$eventId/source-map-debug-blue-thunder-edition/',
         {
           path: {
             organizationIdOrSlug: organization!.slug,
             projectIdOrSlug: projectSlug,
-            eventId: event.id,
+            eventId,
           },
         }
       ),
     ],
     {
-      enabled: isSdkThatShouldShowSourceMapsDebugger && organization !== null,
+      enabled:
+        isSdkThatShouldShowSourceMapsDebugger &&
+        !!organization &&
+        !!projectSlug &&
+        !!eventId,
       staleTime: Infinity,
       retry: false,
       refetchOnWindowFocus: false,
     }
   );
-  return sourceMapDebuggerData;
 }
 
 function getDebugIdProgress(

static/app/components/stackTrace/issueStackTrace/issueSourceMapsDebuggerAction.tsx

@@ -6,7 +6,7 @@ import {Button} from '@sentry/scraps/button';
 import {openModal} from 'sentry/actionCreators/modal';
 import {
   prepareSourceMapDebuggerFrameInformation,
-  useSourceMapDebuggerData,
+  useSourceMapDebugQuery,
 } from 'sentry/components/events/interfaces/crashContent/exception/useSourceMapDebuggerData';
 import {SourceMapsDebuggerModal} from 'sentry/components/events/interfaces/sourceMapsDebuggerModal';
 import {VALID_SOURCE_MAP_DEBUGGER_FILE_EXTENSIONS} from 'sentry/components/stackTrace/frame/actions/utils';
@@ -24,7 +24,11 @@ export function IssueSourceMapsDebuggerAction() {
   const {exceptionIndex, hideSourceMapDebugger, project} = useStackTraceContext();
   const organization = useOrganization({allowNull: true});
 
-  const sourceMapDebuggerData = useSourceMapDebuggerData(event, project?.slug ?? '');
+  const {data: sourceMapDebuggerData} = useSourceMapDebugQuery(
+    project?.slug ?? '',
+    event.id,
+    event.sdk?.name ?? null
+  );
   const debuggerFrame =
     exceptionIndex === undefined
       ? undefined

static/app/utils/issueTypeConfig/configurationIssuesConfig.tsx

@@ -1,4 +1,5 @@
 import {t} from 'sentry/locale';
+import {IssueType} from 'sentry/types/group';
 import type {IssueCategoryConfigMapping} from 'sentry/utils/issueTypeConfig/types';
 import {Tab} from 'sentry/views/issueDetails/types';
 
@@ -34,6 +35,7 @@ export const configurationIssuesConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'discover-events'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },
@@ -51,4 +53,14 @@ export const configurationIssuesConfig: IssueCategoryConfigMapping = {
     discover: {enabled: false},
     groupingInfo: {enabled: false},
   },
+  [IssueType.SOURCEMAP_CONFIGURATION]: {
+    evidence: null,
+    header: {
+      filterBar: {enabled: false},
+      graph: {enabled: false},
+      eventNavigation: {enabled: false},
+      tagDistribution: {enabled: false},
+      occurrenceSummary: {enabled: false},
+    },
+  },
 };

static/app/utils/issueTypeConfig/cronConfig.tsx

@@ -26,6 +26,7 @@ export const cronConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true},
       graph: {enabled: true, type: 'cron-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true},
     },

static/app/utils/issueTypeConfig/index.tsx

@@ -52,6 +52,7 @@ const BASE_CONFIG: IssueTypeConfig = {
   header: {
     filterBar: {enabled: true, fixedEnvironment: false, searchBar: {enabled: true}},
     graph: {enabled: true, type: 'discover-events'},
+    eventNavigation: {enabled: true},
     tagDistribution: {enabled: true},
     occurrenceSummary: {enabled: false},
   },

static/app/utils/issueTypeConfig/instrumentationConfig.tsx

@@ -20,6 +20,7 @@ export const instrumentationConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'discover-events'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/metricConfig.tsx

@@ -107,6 +107,7 @@ export const metricConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true, searchBar: {enabled: false}},
       graph: {enabled: true, type: 'detector-history'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/metricIssueConfig.tsx

@@ -27,6 +27,7 @@ export const metricIssueConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'detector-history'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: false},
     },

static/app/utils/issueTypeConfig/outageConfig.tsx

@@ -35,6 +35,7 @@ export const outageConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true},
       graph: {enabled: true, type: 'cron-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true},
     },
@@ -69,6 +70,7 @@ export const outageConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'uptime-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true, downtime: true},
     },

static/app/utils/issueTypeConfig/types.tsx

@@ -74,10 +74,14 @@ export type IssueTypeConfig = {
    * Configuration for the issue-level information header
    */
   header: {
+    /**
+     * Controls the "X in this issue" event navigation row
+     */
+    eventNavigation: DisabledWithReasonConfig;
     filterBar: DisabledWithReasonConfig & {
-      // Display the environment filter in an inactive, locked state
+      /** Display the environment filter in an inactive, locked state */
       fixedEnvironment?: boolean;
-      // The search bar can be hidden if the issue type does not support event filtering
+      /** The search bar can be hidden if the issue type does not support event filtering */
       searchBar?: DisabledWithReasonConfig;
     };
     graph: DisabledWithReasonConfig & {

static/app/utils/issueTypeConfig/uptimeConfig.tsx

@@ -17,6 +17,7 @@ export const uptimeConfig: IssueCategoryConfigMapping = {
     header: {
       filterBar: {enabled: true, fixedEnvironment: true},
       graph: {enabled: true, type: 'uptime-checks'},
+      eventNavigation: {enabled: true},
       tagDistribution: {enabled: false},
       occurrenceSummary: {enabled: true, downtime: true},
     },