fix: Resolve confusing auto-approve checkbox states

[hannesrudolph]

BEFORE

AFTER

BEFORE

AFTER

BEFORE

AFTER

Related GitHub Issue

Closes: #2579

Roo Code Task Context (Optional)

N/A

Description

This PR fixes the confusing auto-approve checkbox states by implementing the following changes:

Key Implementation Details:

• Added derived state hasEnabledOptions to check if any auto-approve sub-options are enabled
• Introduced effectiveAutoApprovalEnabled to ensure the master checkbox reflects the actual state
• Master checkbox is now disabled when no sub-options are selected, preventing the confusing "checked with None" state
• Display text now correctly shows "None" when no options are enabled, regardless of checkbox state
• Added automatic master checkbox toggling: when the last sub-option is disabled, the master automatically unchecks
• Added tooltip explaining why the checkbox is disabled: "Select at least one option to enable auto-approval"

Design Choices:

• Used derived state pattern to ensure UI consistency without complex state management
• Applied changes to both the chat UI (AutoApproveMenu) and settings page (AutoApproveSettings) for consistency
• Updated the isAutoApproved function in ChatView to respect the new logic, preventing auto-approval when only the master is checked

Translation Updates:

• Added new translation key autoApprove.selectOptionsFirst to all 17 supported languages
• All translations were validated using the translation validation script

Areas for Review Focus:

• The automatic toggling behavior when enabling/disabling sub-options
• Consistency between chat UI and settings page behavior
• The disabled state tooltip implementation

Test Procedure

Unit Tests Added:

• Created comprehensive tests in AutoApproveMenu.spec.tsx covering:
  • Checkbox disabled state when no options selected
  • Display text showing "None" appropriately
  • Automatic master checkbox toggling behavior
  • User interaction scenarios
• Added tests in ChatView.auto-approve-new.spec.tsx to verify auto-approval doesn't trigger when only master is enabled

Manual Testing Steps:

1. Open Roo Code and navigate to the chat interface
2. Click on the Auto-approve section to expand it
3. Verify the master checkbox is disabled when no sub-options are selected
4. Select one or more sub-options and verify:
   • Master checkbox becomes enabled and checked
   • Display text shows the selected options
5. Uncheck all sub-options and verify:
   • Master checkbox automatically unchecks and becomes disabled
   • Display text shows "None"
6. Test the same behavior in Settings > Auto-approve section
7. Verify auto-approval only works when both master is checked AND at least one sub-option is enabled

Test Commands:

# Run the new unit tests
cd webview-ui && npx vitest src/components/chat/__tests__/AutoApproveMenu.spec.tsx
cd webview-ui && npx vitest src/components/chat/__tests__/ChatView.auto-approve-new.spec.tsx

All tests are passing ✅

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

[Screenshots to be added showing the before/after states of the auto-approve checkbox]

Documentation Updates

• No documentation updates are required.
• Yes, documentation updates are required. (Please describe what needs to be updated or link to a PR in the docs repository).

Additional Notes

This implementation follows the proposed solution from the issue, preventing the confusing states where:

• Checkbox is checked while displaying "None"
• Checkbox is unchecked while displaying selected options

The solution maintains backward compatibility with existing saved settings.

Get in Touch

[Your Discord username]

---

Important

Improves auto-approve checkbox logic by introducing derived states and updating UI to prevent misleading states, with consistent behavior across components and updated translations.

• Behavior:
  • Introduces hasEnabledOptions and effectiveAutoApprovalEnabled states in AutoApproveMenu.tsx and ChatView.tsx to manage checkbox states.
  • Master checkbox is disabled when no sub-options are selected, preventing misleading states.
  • Automatic toggling of master checkbox when sub-options are changed.
  • Tooltip added to explain disabled state.
• Components:
  • Updates AutoApproveMenu.tsx and ChatView.tsx to use new state logic.
  • Consistent behavior across chat UI and settings page.
• Testing:
  • Adds unit tests in AutoApproveMenu.spec.tsx and ChatView.auto-approve-new.spec.tsx to cover new behavior.
• Translations:
  • Adds autoApprove.selectOptionsFirst key to 17 languages for tooltip consistency.

^{This description was created by for fe07cc6. You can customize this summary. It will automatically update as commits are pushed.}

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to fe07cc6.

Security Overview

• 🔎 Scanned files: 44 changed file(s)

Detected Code Changes

The diff is too large to display a summary of code changes.

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.

[Copilot]

Pull Request Overview

This PR resolves confusing auto-approve checkbox states by introducing derived state for sub-options, disabling the master toggle when no options are selected, and updating related UI and logic. It also adds new translation keys with tooltips and updates tests.

• Added useAutoApprovalState hook to compute hasEnabledOptions and effectiveAutoApprovalEnabled.
• Updated AutoApproveMenu and AutoApproveSettings to disable/check the master checkbox based on sub-options, with explanatory tooltips.
• Refactored ChatView.isAutoApproved to prevent auto-approval when only the master toggle is enabled.
• Added toggleAriaLabel, disabledAriaLabel, and selectOptionsFirst translation keys across all locales.

Reviewed Changes

Copilot reviewed 42 out of 42 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
webview-ui/src/hooks/useAutoApprovalState.ts	Introduced hook for derived auto-approve state
webview-ui/src/components/settings/AutoApproveSettings.tsx	Integrated derived hook, disabled master checkbox, added tooltip
webview-ui/src/components/chat/AutoApproveMenu.tsx	Applied hook, updated master checkbox behavior, display text, tooltip
webview-ui/src/components/chat/ChatView.tsx	Updated isAutoApproved to respect sub-option enablement
webview-ui/src/i18n/locales/**/settings.json & chat.json	Added new tooltip and aria-label translation keys across locales

[daniel-lxs]

LGTM