feat: add prompt protect rules preview, close #1215#1229
feat: add prompt protect rules preview, close #1215#1229looplj merged 1 commit intorelease/v0.9.xfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a 'Test Preview' feature to the prompt protection rules dialog, allowing users to validate regex patterns and replacements against sample text in real-time. The changes include a new test input area, a preview result display, and the necessary localization updates for English and Chinese. Feedback suggests resetting the test input state when the dialog is closed or when switching rules to ensure a clean state for each session. Additionally, it is recommended to implement debouncing for the regex calculations to prevent potential UI performance issues or hangs when processing complex patterns.
| const action = form.watch('action'); | ||
| const pattern = form.watch('pattern'); | ||
| const replacement = form.watch('replacement'); | ||
| const [testText, setTestText] = useState(''); |
There was a problem hiding this comment.
The testText state is not reset when the dialog is closed or when switching between different rules. This results in the test input persisting across different rule editing sessions, which can be confusing for the user. It is recommended to clear this state when the dialog's open state changes or when a new rule is selected for editing.
| const previewResult = useMemo(() => { | ||
| if (!testText || !pattern) { | ||
| return null; | ||
| } | ||
|
|
||
| try { | ||
| const regex = new RegExp(pattern, 'g'); | ||
| if (action === 'mask') { | ||
| const result = testText.replace(regex, replacement || '[MASKED]'); | ||
| const hasMatch = regex.test(testText); | ||
| return { result, hasMatch, error: null }; | ||
| } else { | ||
| const hasMatch = regex.test(testText); | ||
| return { result: hasMatch ? t('promptProtectionRules.actions.reject') : testText, hasMatch, error: null }; | ||
| } | ||
| } catch (err) { | ||
| return { result: '', hasMatch: false, error: t('promptProtectionRules.test.invalidPattern') }; | ||
| } | ||
| }, [testText, pattern, replacement, action, t]); |
There was a problem hiding this comment.
The regex preview calculation is performed on every keystroke. For complex or poorly constructed regular expressions (e.g., those prone to catastrophic backtracking), this could cause the UI thread to hang and degrade the user experience. Consider debouncing the updates to testText or pattern before executing the regex operations.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
🟡 testText state not reset when dialog closes or reopens, causing stale preview data
The testText state (line 88) is managed via useState outside of the react-hook-form instance. When the dialog is closed — either via the cancel button (handleOpenChange at line 116) or after successful submission (onSubmit at line 147) — form.reset(defaultValues) is called to reset form fields, but setTestText('') is never called. Since RulesActionDialog remains permanently mounted via rules-dialogs.tsx:10, the useState persists across dialog sessions. This means if a user enters test text for one rule, closes the dialog, then opens it again (for creating a new rule or editing a different one), the stale test text from the previous session is still displayed and may produce a misleading preview result against the new rule's pattern.
(Refers to line 116)
Prompt for agents
In frontend/src/features/prompt-protection-rules/components/rules-action-dialog.tsx, add setTestText('') in two places:
1. Inside handleOpenChange (around line 116), after form.reset(defaultValues), add: setTestText('');
2. Inside onSubmit (around line 147), after form.reset(defaultValues), add: setTestText('');
This ensures the test text is cleared whenever the dialog closes, matching the behavior of the form fields which are already properly reset.
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
Uh oh!
There was an error while loading. Please reload this page.