diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx index 0feafae15d..4f67cad914 100644 --- a/webview-ui/src/components/chat/AutoApproveMenu.tsx +++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx @@ -129,18 +129,12 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { setIsExpanded((prev) => !prev) }, []) - const enabledActionsList = Object.entries(toggles) - .filter(([_key, value]) => !!value) - .map(([key]) => t(autoApproveSettingsConfig[key as AutoApproveSetting].labelKey)) - .join(", ") - - // Update displayed text logic - const displayText = useMemo(() => { - if (!effectiveAutoApprovalEnabled || !hasEnabledOptions) { - return t("chat:autoApprove.none") - } - return enabledActionsList || t("chat:autoApprove.none") - }, [effectiveAutoApprovalEnabled, hasEnabledOptions, enabledActionsList, t]) + // Get enabled icons for display + const enabledIcons = useMemo(() => { + return Object.entries(toggles) + .filter(([_key, value]) => !!value) + .map(([key]) => autoApproveSettingsConfig[key as AutoApproveSetting].icon) + }, [toggles]) const handleOpenSettings = useCallback( () => @@ -213,8 +207,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { whiteSpace: "nowrap", flex: 1, minWidth: 0, + display: "flex", + alignItems: "center", + gap: "6px", }}> - {displayText} + {!effectiveAutoApprovalEnabled || !hasEnabledOptions + ? t("chat:autoApprove.none") + : enabledIcons.map((icon, index) => ( + + ))} { render() - // Check that the text shows the enabled option - expect(screen.getByText("Read-only operations")).toBeInTheDocument() + // Check that the icon for read-only operations is shown + const container = screen.getByText("Auto-approve").parentElement?.parentElement + expect(container?.querySelector(".codicon-eye")).toBeInTheDocument() }) it("should not allow toggling master checkbox when no options are selected", () => { @@ -222,8 +223,11 @@ describe("AutoApproveMenu", () => { render() - // Should show all enabled options in the summary - expect(screen.getByText("Read-only operations, Write operations, Execute operations")).toBeInTheDocument() + // Should show icons for all enabled options + const container = screen.getByText("Auto-approve").parentElement?.parentElement + expect(container?.querySelector(".codicon-eye")).toBeInTheDocument() // Read + expect(container?.querySelector(".codicon-edit")).toBeInTheDocument() // Write + expect(container?.querySelector(".codicon-terminal")).toBeInTheDocument() // Execute }) it("should handle enabling first option when none selected", async () => {