feat(js-loader): Make latest unselectable (#65690)

static/app/views/settings/project/projectKeys/details/loaderSettings.spec.tsx

@@ -145,14 +145,14 @@ describe('Loader Script Settings', function () {
     });
 
     // Update SDK version
-    await selectEvent.select(screen.getByText('latest'), '7.x');
+    await selectEvent.select(screen.getByText('7.x'), '6.x');
 
     await waitFor(() => {
       expect(mockRequests.projectKeys).toHaveBeenCalledWith(
         `/projects/${organization.slug}/${params.projectSlug}/keys/${params.keyId}/`,
         expect.objectContaining({
           data: expect.objectContaining({
-            browserSdkVersion: '7.x',
+            browserSdkVersion: '6.x',
           }),
         })
       );
@@ -188,7 +188,7 @@ describe('Loader Script Settings', function () {
     );
 
     // Update SDK version - should reset performance & replay
-    await selectEvent.select(screen.getByText('latest'), '6.x');
+    await selectEvent.select(screen.getByText('7.x'), '6.x');
 
     await waitFor(() => {
       expect(mockRequests.projectKeys).toHaveBeenCalledWith(

static/app/views/settings/project/projectKeys/details/loaderSettings.tsx

@@ -40,12 +40,21 @@ export function LoaderSettings({keyId, orgSlug, project, data, updateData}: Prop
   const values = requestPending
     ? optimisticState
     : {
-        browserSdkVersion: data.browserSdkVersion,
+        browserSdkVersion:
+          // "latest" was an option that we don't let users select anymore. It will be phased out when version v8 of
+          // the SDK is released, meaning we want to map the backend's response to v7 when it responds with "latest".
+          // "7.x" was the "latest" version when "latest" was phased out.
+          data.browserSdkVersion === 'latest' ? '7.x' : data.browserSdkVersion,
         hasDebug: data.dynamicSdkLoaderOptions.hasDebug,
         hasPerformance: data.dynamicSdkLoaderOptions.hasPerformance,
         hasReplay: data.dynamicSdkLoaderOptions.hasReplay,
       };
 
+  const sdkVersionChoices = data.browserSdk
+    ? // "latest" was an option that we do not want to allow users to select anymore. It was phased out with v7, before v8 was released.
+      data.browserSdk.choices.filter(([value]) => value !== 'latest')
+    : [];
+
   const apiEndpoint = `/projects/${orgSlug}/${project.slug}/keys/${keyId}/`;
   const loaderLink = getDynamicText({
     value: data.dsn.cdn,
@@ -148,21 +157,24 @@ export function LoaderSettings({keyId, orgSlug, project, data, updateData}: Prop
           <SelectField
             name={`${keyId}-browserSdkVersion`}
             label={t('SDK Version')}
-            options={
-              data.browserSdk
-                ? data.browserSdk.choices.map(([value, label]) => ({
-                    value,
-                    label,
-                  }))
-                : []
-            }
+            options={sdkVersionChoices.map(([value, label]) => ({
+              value,
+              label,
+            }))}
             value={values.browserSdkVersion}
             onChange={value => {
               updateLoaderOption({browserSdkVersion: value});
             }}
+            disabledReason={
+              sdkVersionChoices.length === 1
+                ? t(
+                    'At the moment, only the shown SDK version is available. New versions of the SDK will appear here as soon as they are released, and you will be able to upgrade by selecting them.'
+                  )
+                : undefined
+            }
             placeholder="7.x"
             allowClear={false}
-            disabled={!hasAccess || requestPending}
+            disabled={!hasAccess || requestPending || sdkVersionChoices.length === 1}
           />
 
           <BooleanField