minor settings fixes (#3809)

* minor settings fixes

* useMemo

* fix code

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

@@ -20,10 +20,10 @@ const renderSettingsForm = (settings?: Settings) => {
       settings={
         settings || {
           LLM_MODEL: "gpt-4o",
-          LLM_BASE_URL: "base_url",
           AGENT: "agent1",
           LANGUAGE: "en",
           LLM_API_KEY: "sk-...",
+          LLM_BASE_URL: "",
           CONFIRMATION_MODE: false,
           SECURITY_ANALYZER: "",
         }
@@ -62,10 +62,10 @@ describe("SettingsForm", () => {
   it("should display the existing values if they are present", () => {
     renderSettingsForm({
       LLM_MODEL: "gpt-3.5-turbo",
-      LLM_BASE_URL: "base_url",
       AGENT: "agent2",
       LANGUAGE: "es",
       LLM_API_KEY: "sk-...",
+      LLM_BASE_URL: "",
       CONFIRMATION_MODE: false,
       SECURITY_ANALYZER: "",
     });
@@ -81,15 +81,66 @@ describe("SettingsForm", () => {
     expect(languageInput).toHaveValue("Español");
   });
 
+  it("should show advanced settings by default if advanced settings are in use", () => {
+    renderSettingsForm({
+      LLM_MODEL: "gpt-3.5-turbo",
+      AGENT: "agent2",
+      LANGUAGE: "es",
+      LLM_API_KEY: "sk-...",
+      LLM_BASE_URL: "",
+      CONFIRMATION_MODE: true,
+      SECURITY_ANALYZER: "",
+    });
+
+    const customModelInput = screen.getByTestId("custom-model-input");
+    expect(customModelInput).toBeInTheDocument();
+  });
+
+  it("should show advanced settings if using a custom model", () => {
+    renderSettingsForm({
+      LLM_MODEL: "bagel",
+      AGENT: "agent2",
+      LANGUAGE: "es",
+      LLM_API_KEY: "sk-...",
+      LLM_BASE_URL: "",
+      CONFIRMATION_MODE: false,
+      SECURITY_ANALYZER: "",
+    });
+
+    const customModelInput = screen.getByTestId("custom-model-input");
+    expect(customModelInput).toBeInTheDocument();
+  });
+
+  it("should show advanced settings if button is clicked", async () => {
+    renderSettingsForm({
+      LLM_MODEL: "gpt-3.5-turbo",
+      AGENT: "agent2",
+      LANGUAGE: "es",
+      LLM_API_KEY: "sk-...",
+      LLM_BASE_URL: "",
+      CONFIRMATION_MODE: false,
+      SECURITY_ANALYZER: "",
+    });
+
+    let customModelInput = screen.queryByTestId("custom-model-input");
+    expect(customModelInput).not.toBeInTheDocument();
+
+    const advancedToggle = screen.getByTestId("advanced-options-toggle");
+    await userEvent.click(advancedToggle);
+
+    customModelInput = screen.getByTestId("custom-model-input");
+    expect(customModelInput).toBeInTheDocument();
+  });
+
   it("should disable settings when disabled is true", () => {
     renderWithProviders(
       <SettingsForm
         settings={{
           LLM_MODEL: "gpt-4o",
-          LLM_BASE_URL: "base_url",
           AGENT: "agent1",
           LANGUAGE: "en",
           LLM_API_KEY: "sk-...",
+          LLM_BASE_URL: "",
           CONFIRMATION_MODE: false,
           SECURITY_ANALYZER: "",
         }}

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

@@ -41,9 +41,14 @@ function SettingsForm({
 }: SettingsFormProps) {
   const { t } = useTranslation();
   const { isOpen: isVisible, onOpenChange: onVisibleChange } = useDisclosure();
-  const advancedAlreadyInUse =
-    !!settings.SECURITY_ANALYZER || !!settings.CONFIRMATION_MODE;
-  // TODO: || model is not in the list
+  const advancedAlreadyInUse = React.useMemo(
+    () =>
+      !!settings.SECURITY_ANALYZER ||
+      !!settings.CONFIRMATION_MODE ||
+      !!settings.LLM_BASE_URL ||
+      (!!settings.LLM_MODEL && !models.includes(settings.LLM_MODEL)),
+    [],
+  );
   const [enableAdvanced, setEnableAdvanced] =
     React.useState(advancedAlreadyInUse);
 

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

@@ -79,7 +79,9 @@ describe("SettingsModal", () => {
   it("should close the modal when the close button is clicked", async () => {
     const user = userEvent.setup();
     const onOpenChange = vi.fn();
-    renderWithProviders(<SettingsModal isOpen onOpenChange={onOpenChange} />);
+    await act(async () =>
+      renderWithProviders(<SettingsModal isOpen onOpenChange={onOpenChange} />),
+    );
 
     const cancelButton = screen.getByRole("button", {
       name: /MODAL_CLOSE_BUTTON_LABEL/i, // i18n key

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

@@ -152,30 +152,34 @@ function SettingsModal({ isOpen, onOpenChange }: SettingsProps) {
       title={t(I18nKey.CONFIGURATION$MODAL_TITLE)}
       isDismissable={settingsAreUpToDate()}
       subtitle={subtitle}
-      actions={[
-        {
-          label: t(I18nKey.CONFIGURATION$MODAL_SAVE_BUTTON_LABEL),
-          action: handleSaveSettings,
-          isDisabled: saveIsDisabled,
-          closeAfterAction: true,
-          className: "bg-primary rounded-lg",
-        },
-        {
-          label: t(I18nKey.CONFIGURATION$MODAL_RESET_BUTTON_LABEL),
-          action: handleResetSettings,
-          closeAfterAction: false,
-          className: "bg-neutral-500 rounded-lg",
-        },
-        {
-          label: t(I18nKey.CONFIGURATION$MODAL_CLOSE_BUTTON_LABEL),
-          action: () => {
-            setSettings(getSettings()); // reset settings from any changes
-          },
-          isDisabled: !settingsAreUpToDate(),
-          closeAfterAction: true,
-          className: "bg-rose-600 rounded-lg",
-        },
-      ]}
+      actions={
+        loading
+          ? []
+          : [
+              {
+                label: t(I18nKey.CONFIGURATION$MODAL_SAVE_BUTTON_LABEL),
+                action: handleSaveSettings,
+                isDisabled: saveIsDisabled,
+                closeAfterAction: true,
+                className: "bg-primary rounded-lg",
+              },
+              {
+                label: t(I18nKey.CONFIGURATION$MODAL_RESET_BUTTON_LABEL),
+                action: handleResetSettings,
+                closeAfterAction: false,
+                className: "bg-neutral-500 rounded-lg",
+              },
+              {
+                label: t(I18nKey.CONFIGURATION$MODAL_CLOSE_BUTTON_LABEL),
+                action: () => {
+                  setSettings(getSettings()); // reset settings from any changes
+                },
+                isDisabled: !settingsAreUpToDate(),
+                closeAfterAction: true,
+                className: "bg-rose-600 rounded-lg",
+              },
+            ]
+      }
     >
       {loading && <Spinner />}
       {!loading && (