Add toggle to enable/disable agent selection - default is agent selection is off (#3174)

* Hide agent selection and always use CodeActAgent

* Revert changes

* Add toggle to enable agent selection

* Refactor, simplify, and update tests

* Update frontend/src/components/modals/settings/SettingsForm.test.tsx

---------

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>

frontend/src/components/modals/settings/SettingsForm.test.tsx

@@ -52,7 +52,7 @@ describe("SettingsForm", () => {
     expect(confirmationModeInput).toHaveAttribute("data-selected", "true");
   });
 
-  it("should display the existing values if it they are present", () => {
+  it("should display the existing values if they are present", () => {
     renderSettingsForm({
       LLM_MODEL: "model2",
       AGENT: "agent2",
@@ -119,17 +119,18 @@ describe("SettingsForm", () => {
     });
 
     it("should call the onAgentChange handler when the agent changes", async () => {
+      const user = userEvent.setup();
       renderSettingsForm();
 
+      // We need to enable the agent select
+      const agentSwitch = screen.getByTestId("enableagentselect");
+      await user.click(agentSwitch);
+
       const agentInput = screen.getByRole("combobox", { name: "agent" });
-      await act(async () => {
-        await userEvent.click(agentInput);
-      });
+      await user.click(agentInput);
 
       const agent3 = screen.getByText("agent3");
-      await act(async () => {
-        await userEvent.click(agent3);
-      });
+      await user.click(agent3);
 
       expect(onAgentChangeMock).toHaveBeenCalledWith("agent3");
     });

frontend/src/components/modals/settings/SettingsForm.tsx

@@ -33,17 +33,10 @@ function SettingsForm({
 }: SettingsFormProps) {
   const { t } = useTranslation();
   const { isOpen: isVisible, onOpenChange: onVisibleChange } = useDisclosure();
+  const [isAgentSelectEnabled, setIsAgentSelectEnabled] = React.useState(false);
 
   return (
     <>
-      <AutocompleteCombobox
-        ariaLabel="agent"
-        items={agents.map((agent) => ({ value: agent, label: agent }))}
-        defaultKey={settings.AGENT}
-        onChange={onAgentChange}
-        tooltip={t(I18nKey.SETTINGS$AGENT_TOOLTIP)}
-        disabled={disabled}
-      />
       <AutocompleteCombobox
         ariaLabel="model"
         items={models.map((model) => ({ value: model, label: model }))}
@@ -88,6 +81,23 @@ function SettingsForm({
         tooltip={t(I18nKey.SETTINGS$LANGUAGE_TOOLTIP)}
         disabled={disabled}
       />
+      <AutocompleteCombobox
+        ariaLabel="agent"
+        items={agents.map((agent) => ({ value: agent, label: agent }))}
+        defaultKey={settings.AGENT}
+        onChange={onAgentChange}
+        tooltip={t(I18nKey.SETTINGS$AGENT_TOOLTIP)}
+        disabled={disabled || !isAgentSelectEnabled}
+      />
+      <Switch
+        defaultSelected={false}
+        isSelected={isAgentSelectEnabled}
+        onValueChange={setIsAgentSelectEnabled}
+        aria-label="enableagentselect"
+        data-testid="enableagentselect"
+      >
+        {t(I18nKey.SETTINGS$AGENT_SELECT_ENABLED)}
+      </Switch>
       <Switch
         aria-label="confirmationmode"
         data-testid="confirmationmode"

frontend/src/components/modals/settings/SettingsModal.test.tsx

@@ -231,6 +231,10 @@ describe("SettingsModal", () => {
       ),
     );
 
+    // We need to enable the agent select first
+    const agentSwitch = screen.getByTestId("enableagentselect");
+    await user.click(agentSwitch);
+
     const resetButton = screen.getByRole("button", {
       name: /MODAL_RESET_BUTTON_LABEL/i,
     });

frontend/src/i18n/translation.json

@@ -721,6 +721,9 @@
     "de": "Wartet auf die Bestätigung des Benutzers, bevor der Code ausgeführt wird.",
     "zh-CN": "在执行代码之前等待用户确认。"
   },
+  "SETTINGS$AGENT_SELECT_ENABLED": {
+    "en": "Enable Agent Selection - Advanced Users"
+  },
   "BROWSER$EMPTY_MESSAGE": {
     "en": "No page loaded.",
     "zh-CN": "页面未加载",