feat: re-organize onboarding options (#14575)

1. Errors
2. Logs
3. Replays
4. Tracing
5. Profiling

related getsentry/sentry#96544

Author: AbhiPrasad

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: (
+      <span>
+        Send text-based log information from your applications to Sentry for viewing
+        alongside relevant errors and searching by text-string or individual attributes.
+      </span>
+    ),
+  },
+  'session-replay': {
+    name: 'Session Replay',
+    description: (
+      <span>
+        Video-like reproductions of user sessions with debugging context to help you
+        confirm issue impact and troubleshoot faster.
+      </span>
+    ),
+  },
   performance: {
     name: 'Tracing',
     description: (
@@ -41,12 +76,12 @@ const optionDetails: Record<
     ),
     deps: ['performance'],
   },
-  'session-replay': {
-    name: 'Session Replay',
+  'source-maps': {
+    name: 'Source Maps',
     description: (
       <span>
-        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.
       </span>
     ),
   },
@@ -59,15 +94,6 @@ const optionDetails: Record<
       </span>
     ),
   },
-  logs: {
-    name: 'Logs (Beta)',
-    description: (
-      <span>
-        Send text-based log information from your applications to Sentry for viewing
-        alongside relevant errors and searching by text-string or individual attributes.
-      </span>
-    ),
-  },
   'source-context': {
     name: 'Source Context',
     description: (
@@ -86,36 +112,12 @@ const optionDetails: Record<
       </span>
     ),
   },
-  'source-maps': {
-    name: 'Source Maps',
-    description: (
-      <span>
-        Source maps for web applications that help translate minified code back to the
-        original source for better error reporting.
-      </span>
-    ),
-  },
   opentelemetry: {
     name: 'OpenTelemetry',
     description: <span>Combine Sentry with OpenTelemetry.</span>,
   },
 };
 
-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<OnboardingOptionType, 'id'>[]) => {
   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);