fix: Edit icon does not disappear when hovering out of saved filter name in data browser sidebar

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Issue

Edit icon does not disappear on hoover out of saved filter name in data browser sidebar

Tasks

• Add tests
• Add changes to documentation (guides, repository pages, in-code descriptions)

Summary by CodeRabbit

• New Features
  • Edit controls for categories and filters now display dynamically with enhanced hover interactions, improving accessibility when managing these items.

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request refactors hover behavior for edit controls in the CategoryList component, moving from CSS-based opacity management to React state-driven inline styling. CSS transition rules are removed, and JavaScript event handlers now manage visibility state.

Changes

Cohort / File(s)	Summary
CategoryList hover behavior src/components/CategoryList/CategoryList.react.js, src/components/CategoryList/CategoryList.scss	Replaces CSS opacity transitions with React state-based inline styling; adds hoveredFilter and hoveredClass state variables; implements onMouseEnter/onMouseLeave handlers on category and filter items; removes CSS rules that initially hide edit controls and set opacity on hover.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description includes the Issue section that identifies the problem, but is missing the required Approach section that should describe the changes made to fix the issue.	Add an Approach section that explains how the hover state management was implemented using onMouseEnter/onMouseLeave handlers and inline opacity styling.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main fix: controlling edit icon visibility on hover out of filter names, which aligns with the code changes adding hover state management and opacity styling.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/CategoryList/CategoryList.react.js (1)

177-178: Avoid recalculating highlight on hover-only state updates.

These hover handlers now trigger frequent setState, and componentDidUpdate currently runs _updateHighlight() on every update. That creates avoidable work while moving the cursor through the list.

♻️ Proposed fix to gate highlight updates

-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Auto-expand if the URL params changed (e.g., user navigated to a different filter)
     // OR if categories changed (e.g., filters finished loading asynchronously)
     if (prevProps.params !== this.props.params || prevProps.categories !== this.props.categories) {
       this._autoExpandForSelectedFilter();
     }
-    this._updateHighlight();
+    const shouldUpdateHighlight =
+      prevProps.categories !== this.props.categories ||
+      prevProps.current !== this.props.current ||
+      prevProps.params !== this.props.params ||
+      prevState.openClasses !== this.state.openClasses;
+    if (shouldUpdateHighlight) {
+      this._updateHighlight();
+    }
   }

Also applies to: 236-237

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/CategoryList/CategoryList.react.js` around lines 177 - 178,
The hover handlers (onMouseEnter/onMouseLeave) set hoveredClass frequently but
componentDidUpdate currently calls _updateHighlight() on every update; modify
componentDidUpdate in the CategoryList component to only call
this._updateHighlight() when the relevant state/props that affect highlighting
actually changed (e.g., compare prevState.hoveredClass !==
this.state.hoveredClass or other highlight-related props) so hover-only setState
does not trigger unnecessary recalculation; update the same gating logic for the
other hover handlers that set hoveredClass as well.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/CategoryList/CategoryList.react.js`:
- Line 203: The edit controls are being hidden by opacity only—leaving invisible
click targets active. Update the inline style where you currently have style={{
opacity: this.state.hoveredClass === id ? 1 : 0 }} (and the other similar
occurrence) to also toggle pointerEvents (e.g., pointerEvents:
this.state.hoveredClass === id ? 'auto' : 'none') so that when opacity is 0 the
controls are not interactive; keep the same condition using
this.state.hoveredClass and the id variable to locate the correct JSX elements
(in CategoryList.react.js).

---

Nitpick comments:
In `@src/components/CategoryList/CategoryList.react.js`:
- Around line 177-178: The hover handlers (onMouseEnter/onMouseLeave) set
hoveredClass frequently but componentDidUpdate currently calls
_updateHighlight() on every update; modify componentDidUpdate in the
CategoryList component to only call this._updateHighlight() when the relevant
state/props that affect highlighting actually changed (e.g., compare
prevState.hoveredClass !== this.state.hoveredClass or other highlight-related
props) so hover-only setState does not trigger unnecessary recalculation; update
the same gating logic for the other hover handlers that set hoveredClass as
well.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 75733ee and 9f919a9.

📒 Files selected for processing (2)

• src/components/CategoryList/CategoryList.react.js
• src/components/CategoryList/CategoryList.scss

💤 Files with no reviewable changes (1)

• src/components/CategoryList/CategoryList.scss

[parseplatformorg]

🎉 This change has been released in version 9.1.0-alpha.5