feat: Auto-expand filter list when clicking on class in data browser

[mtrezza]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Summary by CodeRabbit

• New Features
  • Category sections with available filters now auto-expand when clicked, making it faster to access filter options.
  • Auto-expansion preserves already-open sections (it appends new open sections instead of replacing them), preventing accidental collapse of other open categories.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[coderabbitai]

📝 Walkthrough

Walkthrough

Safe-calls to classClicked were added; clicking a category now conditionally appends the class id to openClasses (preserving existing opens) and _autoExpandForSelectedFilter_ appends matching class ids instead of replacing the array. classClicked was added to CategoryList.propTypes.

Changes

Cohort / File(s)	Summary
Category list behavior src/components/CategoryList/CategoryList.react.js	- onClick now checks typeof classClicked === 'function' before calling it. - If a category has filters and its id is not in openClasses, the id is appended (preserves existing entries). - _autoExpandForSelectedFilter_ appends matching class ids to openClasses instead of replacing the array. - CategoryList.propTypes gains classClicked: PropTypes.func.describe(...).

Sequence Diagram(s)

(omitted — change is a localized UI/state update without multi-component sequential flow requiring a diagram)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: Pagination does not reset to page 1 when clicking on class or filter #2798: Modifies the same CategoryList.react.js onClick behavior to invoke classClicked.
• feat: Add storing data browser filters on server #3090: Alters auto-expand logic in CategoryList.react.js for selected filters.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete, missing critical sections from the template including Issue Description, Approach, and TODOs before merging.	Add Issue Description (with 'Closes:' reference), Approach section explaining the implementation strategy, and complete any relevant TODOs checklist items.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: auto-expanding filter list when clicking on a class in the data browser, which aligns with the code modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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.}

[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]

Actionable comments posted: 1

🤖 Fix all issues with AI Agents

In @src/components/CategoryList/CategoryList.react.js:
- Around line 178-184: The bug is that the onClick handler for the class link
appends an id to this.state.openClasses while _autoExpandForSelectedFilter
replaces the array (setState({ openClasses: [id] })), causing manual expansions
to be lost; fix _autoExpandForSelectedFilter so it mirrors the onClick behavior
by appending the id if it isn’t already present (e.g., compute newOpen =
this.state.openClasses.includes(id) ? this.state.openClasses :
[...this.state.openClasses, id] and call setState({ openClasses: newOpen })),
ensuring duplicates are avoided and existing open classes are preserved.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between acf51f1 and ea7f722.

📒 Files selected for processing (1)

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Node 18
• GitHub Check: Docker linux/amd64

🔇 Additional comments (1)

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

178-184: Auto-expand logic implementation looks correct.

The implementation properly:

• Checks for filter existence using safe null coalescing: (c.filters || []).length > 0
• Guards against duplicate expansion: !this.state.openClasses.includes(id)
• Preserves existing expanded classes when appending to the array

The guard condition at line 181 prevents redundant state updates when componentDidUpdate later calls _autoExpandForSelectedFilter, since it also checks !this.state.openClasses.includes(id) (line 90).

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI Agents

In @src/components/CategoryList/CategoryList.react.js:
- Around line 178-184: The click handler calls this.props.classClicked()
unconditionally and uses a non-functional setState; guard the call by checking
if typeof this.props.classClicked === 'function' before invoking it, replace the
array-spread setState with the functional form this.setState(prev => ({
openClasses: prev.openClasses.includes(id) ? prev.openClasses :
[...prev.openClasses, id] })) to avoid stale state, and add classClicked:
PropTypes.func to the component PropTypes with a short description to document
the callback.

🧹 Nitpick comments (1)

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

90-91: Use functional setState when new state depends on previous state.

Reading this.state.openClasses directly inside setState can lead to stale state issues if React batches updates. Use the functional form instead.

🔎 Suggested fix

          if (matchIndex !== -1 && !this.state.openClasses.includes(id)) {
-           this.setState({ openClasses: [...this.state.openClasses, id] });
+           this.setState(prevState => ({ openClasses: [...prevState.openClasses, id] }));
          }

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea7f722 and 69a9ff8.

📒 Files selected for processing (1)

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker linux/amd64

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

178-190: Previous concerns properly addressed!

The implementation correctly:

• Guards the classClicked callback with a typeof check to prevent runtime errors
• Uses functional setState to avoid stale state issues
• Auto-expands only when the class has filters and isn't already expanded

The logic is sound and handles edge cases well.

Optional: Extract handler for readability

Consider extracting the onClick logic into a named method to improve maintainability:

handleClassClick(c, id, link) {
  if (typeof this.props.classClicked === 'function') {
    this.props.classClicked();
  }
  // Auto-expand filter list when clicking on a class that has filters
  if ((c.filters || []).length > 0) {
    this.setState(prevState => ({
      openClasses: prevState.openClasses.includes(id)
        ? prevState.openClasses
        : [...prevState.openClasses, id]
    }));
  }
}

Then use: onClick={() => this.handleClassClick(c, id, link)}

This is purely a readability enhancement and not required.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 69a9ff8 and 4fb2b82.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: mtrezza
Repo: parse-community/parse-dashboard PR: 2979
File: src/dashboard/Data/Views/Views.react.js:905-912
Timestamp: 2025-09-11T00:15:33.497Z
Learning: In the parse-dashboard codebase, class names are used directly in path segments without URL encoding (e.g., `browser/${className}`) for consistency across methods like handlePointerClick, handlePointerCmdClick, and handleOpenAllPointers.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker linux/amd64

🔇 Additional comments (2)

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

91-91: LGTM! Functional setState correctly handles state updates.

The use of functional setState with prevState properly avoids stale state issues when auto-expanding the filter list, and the guard condition on line 90 prevents duplicate entries.

---

264-264: PropTypes declaration correctly added.

The classClicked prop is now properly documented with an appropriate type and clear description, addressing the previous review feedback.

[parseplatformorg]

🎉 This change has been released in version 8.2.0-alpha.17