Runtime input is dropdown and undo translation

All-Hands-AI · Feb 13, 2025 · 07a5e62 · 07a5e62
1 parent 25ef555
commit 07a5e62
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 13 deletions.
diff --git a/frontend/__tests__/routes/settings.test.tsx b/frontend/__tests__/routes/settings.test.tsx
@@ -422,6 +422,58 @@ describe("Settings Screen", () => {
         screen.getByTestId("runtime-settings-input");
       });
 
+      it("should set the default runtime setting set", async () => {
+        getConfigSpy.mockResolvedValue({
+          APP_MODE: "saas",
+          GITHUB_CLIENT_ID: "123",
+          POSTHOG_CLIENT_KEY: "456",
+        });
+
+        getSettingsSpy.mockResolvedValue({
+          ...MOCK_DEFAULT_USER_SETTINGS,
+          remote_runtime_resource_factor: 1,
+        });
+
+        renderSettingsScreen();
+
+        await toggleAdvancedSettings(userEvent.setup());
+
+        const input = await screen.findByTestId("runtime-settings-input");
+        expect(input).toHaveValue("1x (2 core, 8G)");
+      });
+
+      it("should save the runtime settings when the 'Save Changes' button is clicked", async () => {
+        const user = userEvent.setup();
+        getConfigSpy.mockResolvedValue({
+          APP_MODE: "saas",
+          GITHUB_CLIENT_ID: "123",
+          POSTHOG_CLIENT_KEY: "456",
+        });
+
+        getSettingsSpy.mockResolvedValue({
+          ...MOCK_DEFAULT_USER_SETTINGS,
+        });
+
+        renderSettingsScreen();
+
+        await toggleAdvancedSettings(user);
+
+        const input = await screen.findByTestId("runtime-settings-input");
+        await user.click(input);
+
+        const option = await screen.findByText("2x (4 core, 16G)");
+        await user.click(option);
+
+        const saveButton = screen.getByText("Save Changes");
+        await user.click(saveButton);
+
+        expect(saveSettingsSpy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            remote_runtime_resource_factor: 2,
+          }),
+        );
+      });
+
       test("saving with no changes but having advanced enabled should hide the advanced items", async () => {
         const user = userEvent.setup();
         renderSettingsScreen();
@@ -539,7 +591,7 @@ describe("Settings Screen", () => {
       });
     });
 
-    it.only("should have confirmation mode enabled if the user previously had it enabled", async () => {
+    it("should have confirmation mode enabled if the user previously had it enabled", async () => {
       getSettingsSpy.mockResolvedValue({
         ...MOCK_DEFAULT_USER_SETTINGS,
         confirmation_mode: true,

diff --git a/frontend/src/components/features/settings/settings-dropdown-input.tsx b/frontend/src/components/features/settings/settings-dropdown-input.tsx
@@ -5,7 +5,7 @@ interface SettingsDropdownInputProps {
   testId: string;
   label: string;
   name: string;
-  items: { key: string; label: string }[];
+  items: { key: React.Key; label: string }[];
   showOptionalTag?: boolean;
   isDisabled?: boolean;
   defaultSelectedKey?: string;

diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
@@ -4258,7 +4258,7 @@
         "de": "Einstellungen"
     },
     "SETTINGS$DESCRIPTION": {
-        "en": "To continue, connect an Anthropic or OpenAI account.",
+        "en": "To continue, connect an OpenAI, Anthropic, or other LLM account",
         "ja": "続行するには、OpenAI、Anthropic、または他のLLMアカウントを接続してください",
         "zh-CN": "要继续，请连接 OpenAI、Anthropic 或其他 LLM 账户",
         "zh-TW": "要繼續，請連接 OpenAI、Anthropic 或其他 LLM 帳戶",

diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
@@ -24,6 +24,11 @@ import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message"
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
 import { isCustomModel } from "#/utils/is-custom-model";
 
+const REMOTE_RUNTIME_OPTIONS = [
+  { key: 1, label: "1x (2 core, 8G)" },
+  { key: 2, label: "2x (4 core, 16G)" },
+];
+
 const displayErrorToast = (error: string) => {
   toast.error(error, {
     position: "top-right",
@@ -108,10 +113,12 @@ function SettingsScreen() {
     const fullLlmModel = `${llmProvider}/${llmModel}`.toLowerCase();
     const customLlmModel = formData.get("llm-custom-model-input")?.toString();
 
-    const rawRemoteRuntimeResourceFactor =
-      formData.get("runtime-settings-input")?.toString() ||
-      DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR;
-    const remoteRuntimeResourceFactor = Number(rawRemoteRuntimeResourceFactor);
+    const rawRemoteRuntimeResourceFactor = formData
+      .get("runtime-settings-input")
+      ?.toString();
+    const remoteRuntimeResourceFactor = REMOTE_RUNTIME_OPTIONS.find(
+      ({ label }) => label === rawRemoteRuntimeResourceFactor,
+    )?.key;
 
     const userConsentsToAnalytics =
       formData.get("enable-analytics-switch")?.toString() === "on";
@@ -128,7 +135,9 @@ function SettingsScreen() {
         AGENT: formData.get("agent-input")?.toString(),
         SECURITY_ANALYZER:
           formData.get("security-analyzer-input")?.toString() || "",
-        REMOTE_RUNTIME_RESOURCE_FACTOR: remoteRuntimeResourceFactor,
+        REMOTE_RUNTIME_RESOURCE_FACTOR:
+          remoteRuntimeResourceFactor ||
+          DEFAULT_SETTINGS.REMOTE_RUNTIME_RESOURCE_FACTOR,
         ENABLE_DEFAULT_CONDENSER: DEFAULT_SETTINGS.ENABLE_DEFAULT_CONDENSER,
         CONFIRMATION_MODE: confirmationModeIsEnabled,
       },
@@ -339,12 +348,13 @@ function SettingsScreen() {
             )}
 
             {isSaas && llmConfigMode === "advanced" && (
-              <SettingsInput
+              <SettingsDropdownInput
                 testId="runtime-settings-input"
                 name="runtime-settings-input"
                 label="Runtime Settings"
-                type="text"
-                className="w-[680px]"
+                items={REMOTE_RUNTIME_OPTIONS}
+                defaultSelectedKey={settings.REMOTE_RUNTIME_RESOURCE_FACTOR?.toString()}
+                isClearable={false}
               />
             )}
 

diff --git a/frontend/src/types/settings.ts b/frontend/src/types/settings.ts
@@ -6,7 +6,7 @@ export type Settings = {
   LLM_API_KEY: string | null;
   CONFIRMATION_MODE: boolean;
   SECURITY_ANALYZER: string;
-  REMOTE_RUNTIME_RESOURCE_FACTOR: number;
+  REMOTE_RUNTIME_RESOURCE_FACTOR: number | null;
   GITHUB_TOKEN_IS_SET: boolean;
   ENABLE_DEFAULT_CONDENSER: boolean;
   USER_CONSENTS_TO_ANALYTICS: boolean | null;
@@ -20,7 +20,7 @@ export type ApiSettings = {
   llm_api_key: string | null;
   confirmation_mode: boolean;
   security_analyzer: string;
-  remote_runtime_resource_factor: number;
+  remote_runtime_resource_factor: number | null;
   github_token_is_set: boolean;
   enable_default_condenser: boolean;
   user_consents_to_analytics: boolean | null;