fix(explorer): stop rendering search-highlight markup as tree labels#955
Conversation
After any project search, the explorer tree displayed the matching
element name as literal markup ("<span class=...") because the
decorated HTML string from extractSearchQuery was passed as the leaf
label, which ProjectTreeLeaf renders as plain text. The decorated
string was also used as the element identity, so rename, duplicate,
and delete targeted a name that does not exist while highlighted.
Pass the plain name as the label everywhere and add a highlightQuery
prop to ProjectTreeLeaf/ProjectTreeExpandableLeaf, which render the
match safely through the existing HighlightedText atom - the same
approach the search results panel already uses.
Fixes Autonomy-Logic#640
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughProject tree leaves now accept search queries and render labels through ChangesProject tree highlighting
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant ProjectExplorer
participant ProjectTreeLeaf
participant ProjectTreeExpandableLeaf
participant HighlightedText
ProjectExplorer->>ProjectTreeLeaf: pass raw label and searchQuery
ProjectExplorer->>ProjectTreeExpandableLeaf: pass raw label and searchQuery
ProjectTreeLeaf->>HighlightedText: render highlighted label
ProjectTreeExpandableLeaf->>HighlightedText: render highlighted label
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx (1)
11-50: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCover identity callbacks with the plain label.
These tests verify safe rendering, but not selection/rename/delete behavior. Add a mocked-store regression test asserting those callbacks receive
Taktgeber, not a decorated HTML string, whenhighlightQueryis set.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx` around lines 11 - 50, Add a mocked-store regression test around ProjectTreeLeaf that sets highlightQuery to a matching value and triggers the selection, rename, or delete identity callbacks. Assert each callback receives the plain label "Taktgeber", not highlighted HTML markup, using the existing store-mocking setup and callback symbols exposed by ProjectTreeLeaf.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsx`:
- Around line 11-50: Add a mocked-store regression test around ProjectTreeLeaf
that sets highlightQuery to a matching value and triggers the selection, rename,
or delete identity callbacks. Assert each callback receives the plain label
"Taktgeber", not highlighted HTML markup, using the existing store-mocking setup
and callback symbols exposed by ProjectTreeLeaf.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 28f8a9dd-4f4a-4a90-b334-9caf5c6c2f6a
📒 Files selected for processing (3)
src/frontend/components/_molecules/project-tree/__tests__/leaf-highlight.test.tsxsrc/frontend/components/_molecules/project-tree/index.tsxsrc/frontend/components/_organisms/explorer/project.tsx
…ighted Address review feedback: selection through a highlighted leaf must record the real POU name, never the decorated display string. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
|
Addressed the nitpick — added an identity regression test: clicking a highlighted leaf records the plain name ( |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vq6oTRN4oMe9MUMDEn4c6H
JoaoGSP
left a comment
JoaoGSP
left a comment
There was a problem hiding this comment.
Tested and it works, thank you
|
Mirror PR for the shared |
2 participants
Pull request info
References
This PR resolves #640.
Link to Jira task
External contribution — no Jira access; branch follows the
bugfix/gh-<n>-<slug>convention from CONTRIBUTING.md.Description of the changes proposed
Root cause (explains why the issue was unreproducible in the original thread): the corruption is not caused by editing a function block — it is triggered by the project search.
explorer/project.tsxpassedextractSearchQuery(pou.name, searchQuery)— a sanitized HTML string with<span class='bg-brand-light...'>around matches — as thelabelprop ofProjectTreeLeaf, which renders its label as plain text. SincesearchQuerypersists in the store after a search completes (it is only cleared when the search modal reopens or the project closes), the explorer permanently displayed the matching element's name as literal markup until restart. The reporter had searched for his function block at some point before editing it; editing was coincidental.Deterministic reproduction on current
development(verified in the running app): create a function block namedTaktgeber→ Search → typeTaktgeber→ Find → the tree leaf displays<span class=\"bg-brand-light dark:bg-brand-medium-dark border-0 rounded-sm\">Taktgeber</span>— byte-identical to the issue's screenshot.Secondary hazard fixed by the same change: the decorated string was also used as the element's identity —
ProjectTreeLeafseeds its rename input fromlabeland passeslabelto rename/duplicate/delete/selection. While a highlight matched, those actions targeted a POU name that does not exist.Fix:
labelnow always carries the plain element name (identity), and a new optionalhighlightQueryprop onProjectTreeLeaf/ProjectTreeExpandableLeafrenders the visual highlight safely through the existingHighlightedTextatom — the same approach the search results panel already uses. All 10 explorer call sites updated;extractSearchQueryremains in use by the search results panel where it is rendered correctly.After the fix (running app, same repro steps — name renders with a proper highlight, matching the search panel):
DOD checklist
board-info-resolverfailures on Windows fail identically on a clean checkout).🤖 Generated with Claude Code
https://claude.ai/code/session_01U5TQ1y3yBEDx73tYTHoUBj
Summary by CodeRabbit
New Features
Bug Fixes
Tests