From 16a0d9e43cc4d1f537ef6d6ccee621c876aa9eb8 Mon Sep 17 00:00:00 2001 From: Sacha Sayan Date: Fri, 11 Apr 2025 01:49:16 -0400 Subject: [PATCH] Improv auto approve layout + refactor. Button grid layout. Consolidates shortNames and labels, includes translations. --- .../src/components/chat/AutoApproveMenu.tsx | 70 +++--- .../settings/AutoApproveSettings.tsx | 214 ++++++++++-------- .../settings/__tests__/SettingsView.test.tsx | 10 +- webview-ui/src/i18n/locales/ca/chat.json | 24 +- webview-ui/src/i18n/locales/ca/settings.json | 19 +- webview-ui/src/i18n/locales/de/chat.json | 24 +- webview-ui/src/i18n/locales/de/settings.json | 19 +- webview-ui/src/i18n/locales/en/chat.json | 24 +- webview-ui/src/i18n/locales/en/settings.json | 19 +- webview-ui/src/i18n/locales/es/chat.json | 24 +- webview-ui/src/i18n/locales/es/settings.json | 19 +- webview-ui/src/i18n/locales/fr/chat.json | 24 +- webview-ui/src/i18n/locales/fr/settings.json | 19 +- webview-ui/src/i18n/locales/hi/chat.json | 24 +- webview-ui/src/i18n/locales/hi/settings.json | 5 +- webview-ui/src/i18n/locales/it/chat.json | 24 +- webview-ui/src/i18n/locales/it/settings.json | 19 +- webview-ui/src/i18n/locales/ja/chat.json | 24 +- webview-ui/src/i18n/locales/ja/settings.json | 5 +- webview-ui/src/i18n/locales/ko/chat.json | 24 +- webview-ui/src/i18n/locales/ko/settings.json | 5 +- webview-ui/src/i18n/locales/pl/chat.json | 24 +- webview-ui/src/i18n/locales/pl/settings.json | 5 +- webview-ui/src/i18n/locales/pt-BR/chat.json | 24 +- .../src/i18n/locales/pt-BR/settings.json | 5 +- webview-ui/src/i18n/locales/tr/chat.json | 24 +- webview-ui/src/i18n/locales/tr/settings.json | 5 +- webview-ui/src/i18n/locales/vi/chat.json | 24 +- webview-ui/src/i18n/locales/vi/settings.json | 19 +- webview-ui/src/i18n/locales/zh-CN/chat.json | 22 +- .../src/i18n/locales/zh-CN/settings.json | 5 +- webview-ui/src/i18n/locales/zh-TW/chat.json | 24 +- .../src/i18n/locales/zh-TW/settings.json | 5 +- 33 files changed, 361 insertions(+), 464 deletions(-) diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx index 412ff26a1ba..d5b6dbe4a0a 100644 --- a/webview-ui/src/components/chat/AutoApproveMenu.tsx +++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx @@ -1,4 +1,4 @@ -import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" +import { VSCodeCheckbox, VSCodeButton } from "@vscode/webview-ui-toolkit/react" import { useCallback, useState } from "react" import { useExtensionState } from "../../context/ExtensionStateContext" import { useAppTranslation } from "../../i18n/TranslationContext" @@ -10,7 +10,6 @@ interface AutoApproveAction { id: string label: string enabled: boolean - shortName: string description: string } @@ -47,56 +46,48 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { { id: "readFiles", label: t("chat:autoApprove.actions.readFiles.label"), - shortName: t("chat:autoApprove.actions.readFiles.shortName"), enabled: alwaysAllowReadOnly ?? false, description: t("chat:autoApprove.actions.readFiles.description"), }, { id: "editFiles", label: t("chat:autoApprove.actions.editFiles.label"), - shortName: t("chat:autoApprove.actions.editFiles.shortName"), enabled: alwaysAllowWrite ?? false, description: t("chat:autoApprove.actions.editFiles.description"), }, { id: "executeCommands", label: t("chat:autoApprove.actions.executeCommands.label"), - shortName: t("chat:autoApprove.actions.executeCommands.shortName"), enabled: alwaysAllowExecute ?? false, description: t("chat:autoApprove.actions.executeCommands.description"), }, { id: "useBrowser", label: t("chat:autoApprove.actions.useBrowser.label"), - shortName: t("chat:autoApprove.actions.useBrowser.shortName"), enabled: alwaysAllowBrowser ?? false, description: t("chat:autoApprove.actions.useBrowser.description"), }, { id: "useMcp", label: t("chat:autoApprove.actions.useMcp.label"), - shortName: t("chat:autoApprove.actions.useMcp.shortName"), enabled: alwaysAllowMcp ?? false, description: t("chat:autoApprove.actions.useMcp.description"), }, { id: "switchModes", label: t("chat:autoApprove.actions.switchModes.label"), - shortName: t("chat:autoApprove.actions.switchModes.shortName"), enabled: alwaysAllowModeSwitch ?? false, description: t("chat:autoApprove.actions.switchModes.description"), }, { id: "subtasks", label: t("chat:autoApprove.actions.subtasks.label"), - shortName: t("chat:autoApprove.actions.subtasks.shortName"), enabled: alwaysAllowSubtasks ?? false, description: t("chat:autoApprove.actions.subtasks.description"), }, { id: "retryRequests", label: t("chat:autoApprove.actions.retryRequests.label"), - shortName: t("chat:autoApprove.actions.retryRequests.shortName"), enabled: alwaysApproveResubmit ?? false, description: t("chat:autoApprove.actions.retryRequests.description"), }, @@ -108,7 +99,7 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { const enabledActionsList = actions .filter((action) => action.enabled) - .map((action) => action.shortName) + .map((action) => action.label) .join(", ") // Individual checkbox handlers - each one only updates its own state @@ -260,23 +251,46 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { }} /> - {actions.map((action) => ( -
-
e.stopPropagation()}> - - {action.label} - -
-
- {action.description} -
-
- ))} +
+ {actions.map((action) => { + const iconMap: Record = { + readFiles: "eye", + editFiles: "edit", + executeCommands: "terminal", + useBrowser: "globe", + useMcp: "plug", + switchModes: "sync", + subtasks: "discard", + retryRequests: "refresh", + } + const codicon = iconMap[action.id] || "question" + return ( + { + e.stopPropagation() + actionHandlers[action.id]() + }} + title={action.description} + className="aspect-square min-h-[80px] min-w-[80px] max-h-[100px] max-w-[100px]" + style={{ flexBasis: "20%" }}> + + + {action.label} + + + ) + })} +
)} diff --git a/webview-ui/src/components/settings/AutoApproveSettings.tsx b/webview-ui/src/components/settings/AutoApproveSettings.tsx index 94e18ffe71a..38d9554aa8c 100644 --- a/webview-ui/src/components/settings/AutoApproveSettings.tsx +++ b/webview-ui/src/components/settings/AutoApproveSettings.tsx @@ -1,7 +1,6 @@ import { HTMLAttributes, useState } from "react" import { useAppTranslation } from "@/i18n/TranslationContext" -import { VSCodeButton, VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" -import { CheckCheck } from "lucide-react" +import { VSCodeButton, VSCodeTextField, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react" import { vscode } from "@/utils/vscode" import { Slider } from "@/components/ui" @@ -76,26 +75,117 @@ export const AutoApproveSettings = ({
- +
{t("settings:sections.autoApprove")}
-
- setCachedStateField("alwaysAllowReadOnly", e.target.checked)} - data-testid="always-allow-readonly-checkbox"> - {t("settings:autoApprove.readOnly.label")} - -
- {t("settings:autoApprove.readOnly.description")} -
+
+ {[ + { + key: "alwaysAllowReadOnly", + labelKey: "settings:autoApprove.readOnly.label", + descriptionKey: "settings:autoApprove.readOnly.description", + icon: "eye", + testId: "always-allow-readonly-toggle", + }, + { + key: "alwaysAllowWrite", + labelKey: "settings:autoApprove.write.label", + descriptionKey: "settings:autoApprove.write.description", + icon: "edit", + testId: "always-allow-write-toggle", + }, + { + key: "alwaysAllowBrowser", + labelKey: "settings:autoApprove.browser.label", + descriptionKey: "settings:autoApprove.browser.description", + icon: "globe", + testId: "always-allow-browser-toggle", + }, + { + key: "alwaysApproveResubmit", + labelKey: "settings:autoApprove.retry.label", + descriptionKey: "settings:autoApprove.retry.description", + icon: "refresh", + testId: "always-approve-resubmit-toggle", + }, + { + key: "alwaysAllowMcp", + labelKey: "settings:autoApprove.mcp.label", + descriptionKey: "settings:autoApprove.mcp.description", + icon: "plug", + testId: "always-allow-mcp-toggle", + }, + { + key: "alwaysAllowModeSwitch", + labelKey: "settings:autoApprove.modeSwitch.label", + descriptionKey: "settings:autoApprove.modeSwitch.description", + icon: "sync", + testId: "always-allow-mode-switch-toggle", + }, + { + key: "alwaysAllowSubtasks", + labelKey: "settings:autoApprove.subtasks.label", + descriptionKey: "settings:autoApprove.subtasks.description", + icon: "discard", + testId: "always-allow-subtasks-toggle", + }, + { + key: "alwaysAllowExecute", + labelKey: "settings:autoApprove.execute.label", + descriptionKey: "settings:autoApprove.execute.description", + icon: "terminal", + testId: "always-allow-execute-toggle", + }, + ].map((cfg) => { + const boolValues = { + alwaysAllowReadOnly, + alwaysAllowWrite, + alwaysAllowBrowser, + alwaysApproveResubmit, + alwaysAllowMcp, + alwaysAllowModeSwitch, + alwaysAllowSubtasks, + alwaysAllowExecute, + } + const value = boolValues[cfg.key as keyof typeof boolValues] ?? false + const title = t(cfg.descriptionKey || "") + return ( + setCachedStateField(cfg.key as any, !value)} + title={title} + data-testid={cfg.testId} + className="aspect-square min-h-[80px] min-w-[80px]" + style={{ flexBasis: "20%", transition: "background-color 0.2s" }}> + + + {t(cfg.labelKey)} + + + ) + })}
+ {/* ADDITIONAL SETTINGS */} + {alwaysAllowReadOnly && (
+
+ +
{t("settings:autoApprove.readOnly.label")}
+
)} -
- setCachedStateField("alwaysAllowWrite", e.target.checked)} - data-testid="always-allow-write-checkbox"> - {t("settings:autoApprove.write.label")} - -
- {t("settings:autoApprove.write.description")} -
-
- {alwaysAllowWrite && (
+
+ +
{t("settings:autoApprove.write.label")}
+
)} -
- setCachedStateField("alwaysAllowBrowser", e.target.checked)} - data-testid="always-allow-browser-checkbox"> - {t("settings:autoApprove.browser.label")} - -
-
{t("settings:autoApprove.browser.description")}
-
{t("settings:autoApprove.browser.note")}
-
-
- -
- setCachedStateField("alwaysApproveResubmit", e.target.checked)} - data-testid="always-approve-resubmit-checkbox"> - {t("settings:autoApprove.retry.label")} - -
- {t("settings:autoApprove.retry.description")} -
-
- {alwaysApproveResubmit && (
+
+ +
{t("settings:autoApprove.retry.label")}
+
)} -
- setCachedStateField("alwaysAllowMcp", e.target.checked)} - data-testid="always-allow-mcp-checkbox"> - {t("settings:autoApprove.mcp.label")} - -
- {t("settings:autoApprove.mcp.description")} -
-
- -
- setCachedStateField("alwaysAllowModeSwitch", e.target.checked)} - data-testid="always-allow-mode-switch-checkbox"> - {t("settings:autoApprove.modeSwitch.label")} - -
- {t("settings:autoApprove.modeSwitch.description")} -
-
- -
- setCachedStateField("alwaysAllowSubtasks", e.target.checked)} - data-testid="always-allow-subtasks-checkbox"> - {t("settings:autoApprove.subtasks.label")} - -
- {t("settings:autoApprove.subtasks.description")} -
-
- -
- setCachedStateField("alwaysAllowExecute", e.target.checked)} - data-testid="always-allow-execute-checkbox"> - {t("settings:autoApprove.execute.label")} - -
- {t("settings:autoApprove.execute.description")} -
-
- {alwaysAllowExecute && (
+
+ +
{t("settings:autoApprove.execute.label")}
+
+