ref(replay/feedback): default frontend framework option is js (#74527)

make javascript the default & first frontend platform for replay &
feedback onboarding:

<img width="530" alt="SCR-20240718-mnqv"
src="https://github.com/user-attachments/assets/3908dcd8-ed75-4cb4-8774-d5564a0a5c6a">

static/app/components/feedback/feedbackOnboarding/sidebar.tsx

@@ -33,7 +33,8 @@ import {
 import platforms, {otherPlatform} from 'sentry/data/platforms';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {PlatformKey, Project, SelectValue} from 'sentry/types';
+import type {SelectValue} from 'sentry/types/core';
+import type {PlatformKey, Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -145,7 +146,7 @@ function FeedbackOnboardingSidebar(props: CommonSidebarProps) {
 
 function OnboardingContent({currentProject}: {currentProject: Project}) {
   const organization = useOrganization();
-  const jsFrameworkSelectOptions = replayJsFrameworkOptions.map(platform => {
+  const jsFrameworkSelectOptions = replayJsFrameworkOptions().map(platform => {
     return {
       value: platform.id,
       textValue: platform.name,
@@ -193,8 +194,8 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     !crashReportOnboarding;
 
   const jsFrameworkPlatform =
-    replayJsFrameworkOptions.find(p => p.id === jsFramework.value) ??
-    replayJsFrameworkOptions[0];
+    replayJsFrameworkOptions().find(p => p.id === jsFramework.value) ??
+    replayJsFrameworkOptions()[0];
 
   const {
     isLoading,

static/app/components/replaysOnboarding/sidebar.tsx

@@ -154,7 +154,7 @@ function ReplaysOnboardingSidebar(props: CommonSidebarProps) {
 }
 
 function OnboardingContent({currentProject}: {currentProject: Project}) {
-  const jsFrameworkSelectOptions = replayJsFrameworkOptions.map(platform => {
+  const jsFrameworkSelectOptions = replayJsFrameworkOptions().map(platform => {
     return {
       value: platform.id,
       textValue: platform.name,
@@ -215,8 +215,8 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   } = useLoadGettingStarted({
     platform:
       showJsFrameworkInstructions && setupMode() === 'npm'
-        ? replayJsFrameworkOptions.find(p => p.id === jsFramework.value) ??
-          replayJsFrameworkOptions[0]
+        ? replayJsFrameworkOptions().find(p => p.id === jsFramework.value) ??
+          replayJsFrameworkOptions()[0]
         : currentPlatform,
     projSlug: currentProject.slug,
     orgSlug: organization.slug,
@@ -226,8 +226,8 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
   // New onboarding docs for initial loading of JS Framework options
   const {docs: jsFrameworkDocs} = useLoadGettingStarted({
     platform:
-      replayJsFrameworkOptions.find(p => p.id === jsFramework.value) ??
-      replayJsFrameworkOptions[0],
+      replayJsFrameworkOptions().find(p => p.id === jsFramework.value) ??
+      replayJsFrameworkOptions()[0],
     projSlug: currentProject.slug,
     orgSlug: organization.slug,
     productType: 'replay',

static/app/components/replaysOnboarding/utils.tsx

@@ -2,6 +2,15 @@ import {replayFrontendPlatforms} from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
 import type {PlatformIntegration} from 'sentry/types/project';
 
-export const replayJsFrameworkOptions: PlatformIntegration[] = platforms.filter(p =>
-  replayFrontendPlatforms.includes(p.id)
-);
+export function replayJsFrameworkOptions(): PlatformIntegration[] {
+  // the platforms array is sorted alphabetically, but we want javascript to be
+  // at the front so that it shows up by default in the onboarding.
+  const frameworks = platforms.filter(p => replayFrontendPlatforms.includes(p.id));
+  const jsPlatformIdx = frameworks.findIndex(p => p.id === 'javascript');
+  const jsPlatform = frameworks[jsPlatformIdx];
+
+  // move javascript to the front
+  frameworks.splice(jsPlatformIdx, 1);
+  frameworks.unshift(jsPlatform);
+  return frameworks;
+}

static/app/data/platformCategories.tsx

@@ -346,13 +346,14 @@ export const replayBackendPlatforms: readonly PlatformKey[] = [
 
 // These are the frontend platforms that can set up replay.
 export const replayFrontendPlatforms: readonly PlatformKey[] = [
-  'capacitor',
-  'electron',
+  'javascript',
   'javascript-angular',
   'javascript-astro',
   'javascript-backbone',
   'javascript-capacitor',
+  'capacitor',
   'javascript-electron',
+  'electron',
   'javascript-ember',
   'javascript-gatsby',
   'javascript-nextjs',
@@ -361,7 +362,6 @@ export const replayFrontendPlatforms: readonly PlatformKey[] = [
   'javascript-svelte',
   'javascript-sveltekit',
   'javascript-vue',
-  'javascript',
 ];
 
 // These are all the platforms that can set up replay.