scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-09-11 22:51:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(webview-ui): show all auto-approve icons in collapsed view and highlight active ones; update tests

Browse source
This commit is contained in:
Merge Resolver 2025-08-19 17:39:22 -06:00
parent cfa2081ffa
commit 782174edc5
2 changed files with 51 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
webview-ui/src/components/chat/AutoApproveMenu.tsx
View file

@ -129,12 +129,8 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
setIsExpanded((prev) => !prev)
}, [])
// Get enabled icons for display
const enabledIcons = useMemo(() => {
return Object.entries(toggles)
.filter(([_key, value]) => !!value)
.map(([key]) => autoApproveSettingsConfig[key as AutoApproveSetting].icon)
}, [toggles])
// Get all icons for display and highlight based on toggle state
const allConfigs = useMemo(() => Object.values(autoApproveSettingsConfig), [])
const handleOpenSettings = useCallback(
() =>
@ -211,27 +207,25 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
alignItems: "center",
gap: "6px",
}}>
{!effectiveAutoApprovalEnabled || !hasEnabledOptions
? t("chat:autoApprove.none")
: enabledIcons.map((icon, index) => {
// Find the config for this icon to get the label
const config = Object.values(autoApproveSettingsConfig).find(
(cfg) => cfg.icon === icon,
)
const tooltipContent = config ? t(config.labelKey) : ""
return (
<StandardTooltip key={index} content={tooltipContent}>
<span
className={`codicon codicon-${icon}`}
style={{
fontSize: "14px",
flexShrink: 0,
}}
/>
</StandardTooltip>
)
})}
{allConfigs.map(({ key, icon, labelKey }) => {
const isEnabled = !!toggles[key]
return (
<StandardTooltip key={key} content={t(labelKey)}>
<span
className={`codicon codicon-${icon}`}
data-active={isEnabled ? "true" : "false"}
style={{
fontSize: "14px",
flexShrink: 0,
opacity: isEnabled ? 1 : 0.5,
color: isEnabled
? "var(--vscode-foreground)"
: "var(--vscode-descriptionForeground)",
}}
/>
</StandardTooltip>
)
})}
</span>
<span
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}

43
webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx
View file

@ -85,7 +85,7 @@ describe("AutoApproveMenu", () => {
})
describe("Master checkbox behavior", () => {
it("should show 'None selected' when no sub-options are selected", () => {
it("should show all icons with none highlighted when no sub-options are selected", () => {
;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
...defaultExtensionState,
autoApprovalEnabled: false,
@ -98,11 +98,23 @@ describe("AutoApproveMenu", () => {
render(<AutoApproveMenu />)
// Check that the text shows "None selected"
expect(screen.getByText("None selected")).toBeInTheDocument()
const container = screen.getByText("Auto-approve").parentElement?.parentElement
// All primary icons are rendered
expect(container?.querySelector(".codicon-eye")).toBeInTheDocument()
expect(container?.querySelector(".codicon-edit")).toBeInTheDocument()
expect(container?.querySelector(".codicon-terminal")).toBeInTheDocument()
// None are active
expect(container?.querySelector(".codicon-eye")?.getAttribute("data-active")).toBe("false")
expect(container?.querySelector(".codicon-edit")?.getAttribute("data-active")).toBe("false")
expect(container?.querySelector(".codicon-terminal")?.getAttribute("data-active")).toBe("false")
// "None selected" helper text is not shown anymore
expect(screen.queryByText("None selected")).not.toBeInTheDocument()
})
it("should show enabled options when sub-options are selected", () => {
it("should highlight the enabled icons when sub-options are selected", () => {
;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
...defaultExtensionState,
autoApprovalEnabled: true,
@ -112,9 +124,15 @@ describe("AutoApproveMenu", () => {
render(<AutoApproveMenu />)
// Check that the icon for read-only operations is shown
const container = screen.getByText("Auto-approve").parentElement?.parentElement
expect(container?.querySelector(".codicon-eye")).toBeInTheDocument()
const container = screen.getByText("Auto-approve").parentElement?.parentElement as HTMLElement
const eyeIcon = container.querySelector(".codicon-eye") as HTMLElement
const editIcon = container.querySelector(".codicon-edit") as HTMLElement
expect(eyeIcon).toBeInTheDocument()
expect(editIcon).toBeInTheDocument()
expect(eyeIcon.getAttribute("data-active")).toBe("true")
expect(editIcon.getAttribute("data-active")).toBe("false")
})
it("should not allow toggling master checkbox when no options are selected", () => {
@ -213,7 +231,7 @@ describe("AutoApproveMenu", () => {
})
describe("Complex scenarios", () => {
it("should display multiple enabled options in summary text", () => {
it("should highlight multiple enabled icons in collapsed view", () => {
;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
...defaultExtensionState,
autoApprovalEnabled: true,
@ -224,11 +242,10 @@ describe("AutoApproveMenu", () => {
render(<AutoApproveMenu />)
// 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
const container = screen.getByText("Auto-approve").parentElement?.parentElement as HTMLElement
expect(container.querySelector(".codicon-eye")?.getAttribute("data-active")).toBe("true") // Read
expect(container.querySelector(".codicon-edit")?.getAttribute("data-active")).toBe("true") // Write
expect(container.querySelector(".codicon-terminal")?.getAttribute("data-active")).toBe("true") // Execute
})
it("should display tooltips on icons in collapsed view", async () => {