ref(module-onboarding): Remove todo content and fix types (#103154)

The types enforce that onboarding content objects are added, even if it
never used in the product.
This PR fixed the typing and allows excluding modules from the
onboarding component.

Author: ArthurKnaus

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

@@ -25,7 +25,6 @@ import type {PlatformKey} from 'sentry/types/project';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
-import type {TitleableModuleNames} from 'sentry/views/insights/common/components/modulePageProviders';
 import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
@@ -38,9 +37,21 @@ import {
 import {ModuleName} from 'sentry/views/insights/types';
 import {LegacyOnboarding} from 'sentry/views/performance/onboarding';
 
+type ModulesWithOnboarding = Exclude<
+  ModuleName,
+  | ModuleName.AGENT_MODELS
+  | ModuleName.AGENT_TOOLS
+  | ModuleName.MCP_TOOLS
+  | ModuleName.MCP_RESOURCES
+  | ModuleName.MCP_PROMPTS
+  | ModuleName.AI_GENERATIONS
+  | ModuleName.MOBILE_UI
+  | ModuleName.OTHER
+>;
+
 type ModuleOnboardingProps = {
   children: React.ReactNode;
-  moduleName: ModuleName;
+  moduleName: ModulesWithOnboarding;
 };
 
 export function ModulesOnboarding({children, moduleName}: ModuleOnboardingProps) {
@@ -78,15 +89,18 @@ export function ModulesOnboarding({children, moduleName}: ModuleOnboardingProps)
   return children;
 }
 
-export function ModulesOnboardingPanel({moduleName}: {moduleName: ModuleName}) {
+export function ModulesOnboardingPanel({
+  moduleName,
+}: {
+  moduleName: ModulesWithOnboarding;
+}) {
   const {view} = useDomainViewFilters();
   const docLink =
     typeof MODULE_PRODUCT_DOC_LINKS[moduleName] === 'string'
       ? MODULE_PRODUCT_DOC_LINKS[moduleName]
       : view && MODULE_PRODUCT_DOC_LINKS[moduleName][view]
         ? MODULE_PRODUCT_DOC_LINKS[moduleName][view]
         : '';
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
   const emptyStateContent = EMPTY_STATE_CONTENT[moduleName];
   return (
     <Panel>
@@ -121,15 +135,14 @@ export function ModulesOnboardingPanel({moduleName}: {moduleName: ModuleName}) {
   );
 }
 
-type ModulePreviewProps = {moduleName: ModuleName};
+type ModulePreviewProps = {moduleName: ModulesWithOnboarding};
 
 function getSDKName(sdk: PlatformKey) {
   const currentPlatform = platforms.find(p => p.id === sdk);
   return currentPlatform?.name;
 }
 
 function ModulePreview({moduleName}: ModulePreviewProps) {
-  // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
   const emptyStateContent = EMPTY_STATE_CONTENT[moduleName];
   const [hoveredIcon, setHoveredIcon] = useState<PlatformKey | null>(null);
 
@@ -259,8 +272,8 @@ type EmptyStateContent = {
   supportedSdks?: PlatformKey[];
 };
 
-const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
-  app_start: {
+const EMPTY_STATE_CONTENT: Record<ModulesWithOnboarding, EmptyStateContent> = {
+  [ModuleName.APP_START]: {
     heading: t(`Don't lose your user's attention before your app loads`),
     description: tct(
       'Monitor cold and warm [dataTypePlural] and track down the operations and releases contributing to regressions.',
@@ -280,58 +293,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: appStartPreviewImg,
     supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'],
   },
-  'agent-models': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('TODO'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'agent-tools': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('TODO'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'mcp-tools': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('TODO'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'mcp-resources': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('TODO'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'mcp-prompts': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('TODO'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'ai-generations': {
-    heading: t('AI Generations'),
-    description: t(
-      'Monitor your AI generations to ensure your AI applications are performing as expected.'
-    ),
-    valuePropDescription: t('AI generations insights include:'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'mobile-ui': {
-    heading: t('TODO'),
-    description: t('TODO'),
-    valuePropDescription: t('Mobile UI load insights include:'),
-    valuePropPoints: [],
-    imageSrc: screenLoadsPreviewImg,
-  },
-  'mobile-vitals': {
+  [ModuleName.MOBILE_VITALS]: {
     heading: t('Mobile Vitals'),
     description: t(
       'Key metrics for for mobile development that help you ensure a great mobile user experience.'
@@ -345,7 +307,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: screenLoadsPreviewImg,
     supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'],
   },
-  cache: {
+  [ModuleName.CACHE]: {
     heading: t('Bringing you one less hard problem in computer science'),
     description: t(
       'We’ll tell you if the parts of your application that interact with caches are hitting cache as often as intended, and whether caching is providing the performance improvements expected.'
@@ -363,7 +325,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: cachesPreviewImg,
     supportedSdks: ['python', 'javascript', 'php', 'java', 'ruby', 'dotnet'],
   },
-  db: {
+  [ModuleName.DB]: {
     heading: tct(
       'Fix the slow [dataTypePlural] you honestly intended to get back to later',
       {dataTypePlural: MODULE_DATA_TYPES_PLURAL[ModuleName.DB].toLocaleLowerCase()}
@@ -386,7 +348,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     ],
     imageSrc: queriesPreviewImg,
   },
-  http: {
+  [ModuleName.HTTP]: {
     heading: t(
       'Are your API dependencies working as well as their landing page promised? '
     ),
@@ -403,7 +365,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     ],
     imageSrc: requestPreviewImg,
   },
-  resource: {
+  [ModuleName.RESOURCE]: {
     heading: t('Is your favorite animated gif worth the time it takes to load?'),
     description: tct(
       'Find large and slow-to-load [dataTypePlurl] used by your application and understand their impact on page performance.',
@@ -440,7 +402,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
       'javascript-vue',
     ],
   },
-  vital: {
+  [ModuleName.VITAL]: {
     heading: t('Finally answer, is this page slow for everyone or just me?'),
     description: t(
       'Get industry standard metrics telling you the quality of user experience on a web page and see what needs improving.'
@@ -455,7 +417,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     ],
     imageSrc: webVitalsPreviewImg,
   },
-  queue: {
+  [ModuleName.QUEUE]: {
     heading: t('Ensure your background jobs aren’t being sent to /dev/null'),
     description: tct(
       'Understand the health and performance impact that [dataTypePlural] have on your application and diagnose errors tied to jobs.',
@@ -474,7 +436,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: queuesPreviewImg,
     supportedSdks: ['python', 'javascript', 'php', 'java', 'ruby', 'dotnet'],
   },
-  screen_load: {
+  [ModuleName.SCREEN_LOAD]: {
     heading: t(`Don’t lose your user's attention once your app loads`),
     description: tct(
       'View the most active [dataTypePlural] in your mobile application and monitor your releases for screen load performance.',
@@ -494,7 +456,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     imageSrc: screenLoadsPreviewImg,
     supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'],
   },
-  'screen-rendering': {
+  [ModuleName.SCREEN_RENDERING]: {
     description: t(
       'Screen Rendering identifies slow and frozen interactions, helping you find and fix problems that might cause users to complain, or uninstall.'
     ),
@@ -514,7 +476,7 @@ const EMPTY_STATE_CONTENT: Record<TitleableModuleNames, EmptyStateContent> = {
     ],
     supportedSdks: ['android', 'flutter', 'apple-ios', 'react-native'],
   },
-  sessions: {
+  [ModuleName.SESSIONS]: {
     heading: t(`Get insights about your application's session health`),
     description: tct(
       'Understand the frequency of handled errors and crashes compared to healthy sessions.',