diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index 10274c1a0501c9..fa6538b8bc552d 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -9,6 +9,23 @@ import styles from './styles.module.scss'; import {CodeContext} from '../codeContext'; +const OPTION_IDS = [ + 'error-monitoring', + 'logs', + 'session-replay', + 'performance', + 'profiling', + 'source-maps', + 'user-feedback', + 'source-context', + 'dsym', + 'opentelemetry', +] as const; + +const OPTION_IDS_SET = new Set(OPTION_IDS); + +type OptionId = (typeof OPTION_IDS)[number]; + const optionDetails: Record< OptionId, { @@ -21,6 +38,24 @@ const optionDetails: Record< name: 'Error Monitoring', description: "Let's admit it, we all have errors.", }, + logs: { + name: 'Logs', + description: ( + + Send text-based log information from your applications to Sentry for viewing + alongside relevant errors and searching by text-string or individual attributes. + + ), + }, + 'session-replay': { + name: 'Session Replay', + description: ( + + Video-like reproductions of user sessions with debugging context to help you + confirm issue impact and troubleshoot faster. + + ), + }, performance: { name: 'Tracing', description: ( @@ -41,12 +76,12 @@ const optionDetails: Record< ), deps: ['performance'], }, - 'session-replay': { - name: 'Session Replay', + 'source-maps': { + name: 'Source Maps', description: ( - Video-like reproductions of user sessions with debugging context to help you - confirm issue impact and troubleshoot faster. + Source maps for web applications that help translate minified code back to the + original source for better error reporting. ), }, @@ -59,15 +94,6 @@ const optionDetails: Record< ), }, - logs: { - name: 'Logs (Beta)', - description: ( - - Send text-based log information from your applications to Sentry for viewing - alongside relevant errors and searching by text-string or individual attributes. - - ), - }, 'source-context': { name: 'Source Context', description: ( @@ -86,36 +112,12 @@ const optionDetails: Record< ), }, - 'source-maps': { - name: 'Source Maps', - description: ( - - Source maps for web applications that help translate minified code back to the - original source for better error reporting. - - ), - }, opentelemetry: { name: 'OpenTelemetry', description: Combine Sentry with OpenTelemetry., }, }; -const OPTION_IDS = [ - 'error-monitoring', - 'performance', - 'profiling', - 'session-replay', - 'user-feedback', - 'logs', - 'source-context', - 'dsym', - 'source-maps', - 'opentelemetry', -] as const; - -type OptionId = (typeof OPTION_IDS)[number]; - export type OnboardingOptionType = { /** * Unique identifier for the option, will control the visibility @@ -132,7 +134,7 @@ export type OnboardingOptionType = { const validateOptionIds = (options: Pick[]) => { options.forEach(option => { - if (!OPTION_IDS.includes(option.id)) { + if (!OPTION_IDS_SET.has(option.id)) { throw new Error( `Invalid option id: ${option.id}.\nValid options are: ${OPTION_IDS.map(opt => `"${opt}"`).join(', ')}` ); @@ -237,17 +239,26 @@ export function OnboardingOptionButtons({ }) { const codeContext = useContext(CodeContext); - const normalizedOptions = initialOptions.map(option => { - if (typeof option === 'string') { - return { - id: option, - // error monitoring is always needs to be checked and disabled - disabled: option === 'error-monitoring', - checked: option === 'error-monitoring', - }; - } - return option; - }); + const normalizedOptions = initialOptions + .map(option => { + if (typeof option === 'string') { + return { + id: option, + // error monitoring is always needs to be checked and disabled + disabled: option === 'error-monitoring', + checked: option === 'error-monitoring', + }; + } + return option; + }) + // sort options by their index in OPTION_IDS + // so that the order of the options is consistent + // regardless of how the user passes them in + .sort((a, b) => { + const indexA = OPTION_IDS.indexOf(a.id); + const indexB = OPTION_IDS.indexOf(b.id); + return indexA - indexB; + }); validateOptionIds(normalizedOptions);