fix: Resolve confusing auto-approve checkbox states #5602
Conversation
- Add derived state to check if any auto-approve options are enabled - Disable master checkbox when no sub-options selected - Show 'None' when no options enabled regardless of checkbox state - Add automatic master checkbox toggling - Add tooltip explaining disabled state - Create custom hook useAutoApprovalState for shared logic - Add accessibility aria-labels - Update translations for all 17 supported languages - Add comprehensive unit tests Closes #2579
dosubot
bot
added
size:XXL
|
✅ No security or compliance issues detected. Reviewed everything up to 907cec5. Security Overview
Detected Code ChangesThe diff is too large to display a summary of code changes. Reply to this PR with |
There was a problem hiding this comment.
Pull Request Overview
This PR prevents confusing states in the auto-approve UI by disabling the master checkbox when no sub-options are selected and adding clear tooltips, as well as updating translations and underlying logic.
- Added
useAutoApprovalStatehook to derivehasEnabledOptionsandeffectiveAutoApprovalEnabled - Updated both the Settings and Chat menus to disable and annotate the master checkbox appropriately, and ensure the display text matches selected sub-options
- Added new translation keys (
toggleAriaLabel,disabledAriaLabel,selectOptionsFirst) 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 |
|---|---|
src/i18n/locales/*/settings.json and chat.json |
Added translation keys for checkbox aria-labels and select-first message in all supported locales |
src/hooks/useAutoApprovalState.ts |
Introduced hook computing derived auto-approval state |
src/components/settings/AutoApproveSettings.tsx |
Disabled master checkbox when no sub-options, added tooltip in settings UI |
src/components/chat/AutoApproveMenu.tsx |
Mirror settings changes in chat menu: derived state, disable logic, tooltip, summary text |
src/components/chat/ChatView.tsx |
Updated isAutoApproved logic to require at least one sub-option |
Comments suppressed due to low confidence (2)
webview-ui/src/i18n/locales/hi/chat.json:224
- The word 'कॉन्फ़िgeration' mixes English and Hindi scripts; consider correcting it to 'कॉन्फ़िगरेशन'.
"description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िgerेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।",
webview-ui/src/components/chat/tests/AutoApproveMenu.spec.tsx:50
- Add tests to verify the tooltip content and the disabled aria-label on the master checkbox when no sub-options are selected (e.g., ensure the 'selectOptionsFirst' message is shown and the
aria-labelis correct).
describe("AutoApproveMenu", () => {
| @@ -122,7 +122,9 @@ | |||
| "resetToDefault": "Réinitialiser par défaut" | |||
| }, | |||
| "autoApprove": { | |||
| "description": "Permettre à Roo d'effectuer automatiquement des opérations sans requérir d'approbation. Activez ces paramètres uniquement si vous faites entièrement confiance à l'IA et que vous comprenez les risques de sécurité associés.", | |||
| "description": "Permettre à Roo d'effectuer automatically des opérations sans requérir d'approbation. Activez ces paramètres uniquement si vous faites entièrement confiance à l'IA et que vous comprenez les risques de sécurité associés.", | |||
There was a problem hiding this comment.
Replace the English word 'automatically' with the French 'automatiquement' in this description.
| "description": "Permettre à Roo d'effectuer automatically des opérations sans requérir d'approbation. Activez ces paramètres uniquement si vous faites entièrement confiance à l'IA et que vous comprenez les risques de sécurité associés.", | |
| "description": "Permettre à Roo d'effectuer automatiquement des opérations sans requérir d'approbation. Activez ces paramètres uniquement si vous faites entièrement confiance à l'IA et que vous comprenez les risques de sécurité associés.", |
Copilot uses AI. Check for mistakes.
|
|
||
| interface AutoApproveMenuProps { | ||
| style?: React.CSSProperties | ||
| } | ||
|
|
||
| const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { | ||
| const [isExpanded, setIsExpanded] = useState(false) | ||
| const [isMenuExpanded, setIsMenuExpanded] = useState(false) |
There was a problem hiding this comment.
[nitpick] The component uses both isExpanded and isMenuExpanded to track the same state. Consider consolidating to a single state variable to reduce redundancy and simplify the disable logic for the master checkbox.
| const [isMenuExpanded, setIsMenuExpanded] = useState(false) |
Copilot uses AI. Check for mistakes.
| @@ -89,6 +121,25 @@ export const AutoApproveSettings = ({ | |||
| <div {...props}> | |||
| <SectionHeader description={t("settings:autoApprove.description")}> | |||
| <div className="flex items-center gap-2"> | |||
| <StandardTooltip content={!hasEnabledOptions ? t("chat:autoApprove.selectOptionsFirst") : ""}> | |||
There was a problem hiding this comment.
[nitpick] Here you reference the chat namespace for the 'selectOptionsFirst' translation in the settings UI. For consistency and clarity, consider introducing a settings-specific key (e.g., settings:autoApprove.selectOptionsFirst) or moving this shared message into a common namespace.
| <StandardTooltip content={!hasEnabledOptions ? t("chat:autoApprove.selectOptionsFirst") : ""}> | |
| <StandardTooltip content={!hasEnabledOptions ? t("settings:autoApprove.selectOptionsFirst") : ""}> |
Copilot uses AI. Check for mistakes.
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| CODE_BLOCK_BG_COLOR: "rgb(30, 30, 30)", | ||
| })) | ||
|
|
||
| vi.mock("@src/components/common/CodeAccordian", () => ({ |
There was a problem hiding this comment.
Typo: The module name 'CodeAccordian' appears to be misspelled. It should likely be 'CodeAccordion' to match the standard spelling.
| @@ -221,7 +221,10 @@ | |||
| "autoApprove": { | |||
| "title": "स्वत:-स्वीकृति:", | |||
| "none": "कोई नहीं", | |||
| "description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िगरेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।" | |||
| "description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िgerेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।", | |||
There was a problem hiding this comment.
Typo: In the description string, "कॉन्फ़िgerेशन" contains a mix of scripts. It should likely be "कॉन्फ़िगरेशन".
| "description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िgerेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।", | |
| "description": "स्वत:-स्वीकृति Roo Code को अनुमति मांगे बिना क्रियाएँ करने की अनुमति देती है। केवल उन क्रियाओं के लिए सक्षम करें जिन पर आप पूरी तरह से विश्वास करते हैं। अधिक विस्तृत कॉन्फ़िगरेशन <settingsLink>सेटिंग्स</settingsLink> में उपलब्ध है।", |
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Draft / In Progress]
in Roo Code Roadmap
daniel-lxs
moved this from PR [Draft / In Progress]
to PR [Needs Prelim Review]
in Roo Code Roadmap
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:
hasEnabledOptionsto check if any auto-approve sub-options are enabledeffectiveAutoApprovalEnabledto ensure the master checkbox reflects the actual stateDesign Choices:
AutoApproveMenu) and settings page (AutoApproveSettings) for consistencyisAutoApprovedfunction inChatViewto respect the new logic, preventing auto-approval when only the master is checkedTranslation Updates:
autoApprove.selectOptionsFirstto all 17 supported languagesAreas for Review Focus:
Test Procedure
Unit Tests Added:
AutoApproveMenu.spec.tsxcovering:ChatView.auto-approve-new.spec.tsxto verify auto-approval doesn't trigger when only master is enabledManual Testing Steps:
Test Commands:
All tests are passing ✅
Pre-Submission Checklist
Screenshots / Videos
[Screenshots to be added showing the before/after states of the auto-approve checkbox]
Documentation Updates
Additional Notes
This implementation follows the proposed solution from the issue, preventing the confusing states where:
The solution maintains backward compatibility with existing saved settings.
Get in Touch
[Your Discord username]
Important
This PR resolves confusing auto-approve checkbox states by adding derived states, ensuring UI consistency, and updating translations.
hasEnabledOptionsandeffectiveAutoApprovalEnabledstates inAutoApproveMenu.tsxto manage checkbox states.AutoApproveMenu.tsxandAutoApproveSettings.tsxis disabled when no sub-options are selected.ChatView.tsxto respect new auto-approve logic.AutoApproveMenu.spec.tsxandChatView.auto-approve-new.spec.tsxfor new checkbox behavior and logic.autoApprove.selectOptionsFirstkey to 17 languages for tooltip support.This description was created by
for 907cec5. You can customize this summary. It will automatically update as commits are pushed.