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")}
+
+