minor settings fixes (#3809)

* minor settings fixes

* useMemo

* fix code
This commit is contained in:
Robert Brennan 2024-09-12 15:08:18 -04:00 committed by GitHub
parent 797f02ff6f
commit 9bbb35ec18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 93 additions and 31 deletions

View File

@ -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: "",
}}

View File

@ -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);

View File

@ -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

View File

@ -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 && (