Skip to content

Feat/capabilities filter search#216

Open
omaraelhawary wants to merge 11 commits into
developfrom
feat/capabilities-filter-search
Open

Feat/capabilities filter search#216
omaraelhawary wants to merge 11 commits into
developfrom
feat/capabilities-filter-search

Conversation

@omaraelhawary
Copy link
Copy Markdown
Collaborator

implement for #213

- Introduced a search input for filtering capabilities in the roles management tab.
- Implemented functionality to display the count of matching capabilities and handle empty states.
- Enhanced JavaScript to cache capability text for efficient filtering and improve user experience.
- Updated CSS for styling the new filter input and its associated elements.
@omaraelhawary omaraelhawary self-assigned this May 8, 2026
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adds a capability filter (search) to the roles management interface, allowing users to quickly find specific capabilities. The implementation includes the necessary UI elements, CSS, and JavaScript to handle filtering, row striping, and internationalization. The reviewer suggested improving maintainability by extracting the search haystack logic into a helper function and optimizing the row striping function using jQuery selectors.

Comment thread js/edit-role.js
Comment thread js/edit-role.js
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a capability filtering feature to the role editing interface, allowing users to search for specific capabilities. The changes include the addition of a search input, updated CSS for manual row striping, and JavaScript logic for real-time filtering. Feedback suggests including the unminified source for the new import-export script to ensure maintainability and security. Additionally, recommendations were made to optimize the filtering logic by combining visibility and striping loops and to implement a debounce on the search input to prevent UI lag on sites with many capabilities.

Comment thread js/import-export.min.js
Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a capability filter feature to the role editing interface, allowing users to search for specific capabilities by slug or label. The implementation includes a new search input, dynamic row striping to maintain visual consistency when filtering, and integration with wp-i18n for localized match counts and messages. Additionally, the logic ensures that adding new custom capabilities resets the filter to maintain visibility. As there are no review comments provided, I have no feedback to offer.

@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a real-time capability filter to the 'Edit Role' screen, allowing users to search for specific capabilities by slug or label. The implementation includes a new search input, updated row striping logic to handle filtered views, and script registration updates to support translations. Feedback focuses on ensuring backward compatibility for WordPress versions older than 5.0 by making the wp-i18n dependency conditional and addressing potential issues with translation string extraction caused by the use of helper functions instead of direct calls to wp.i18n methods.

Comment thread admin/functions-admin.php
Comment thread js/edit-role.js Outdated
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a real-time capability filter to the role editing interface, allowing users to search for specific capabilities by slug or label. The implementation includes a new search input, localized strings for match counts, and updated JavaScript logic to handle filtering and alternating row striping. Feedback suggests debouncing the search input handler to improve performance and prevent potential UI lag when filtering a large number of capabilities.

Comment thread js/edit-role.js Outdated
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a real-time search filter for capabilities on the role editing screen, involving UI updates, new localized strings, and CSS adjustments for consistent row striping. The JavaScript implementation handles filtering logic, search string caching, and manual row striping to replace CSS-based nth-child rules. Feedback recommends refactoring the filtering loop in js/edit-role.js to reuse the members_stripe_rows function, which would centralize the striping logic and improve code maintainability.

Comment thread js/edit-role.js
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a real-time capability filter (search) to the role editing interface, allowing users to quickly find specific capabilities by slug or label. The changes include adding the search input UI, implementing the filtering logic in JavaScript with manual row striping to handle hidden elements, and updating localized strings for match counts. Review feedback suggests optimizing the search string retrieval by reducing DOM queries, debouncing the input event handler for better performance, and replacing the deprecated keyCode property with key for event handling.

Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a capability filter (search) feature to the role editing interface. Key changes include adding a search input in the UI, implementing client-side filtering logic in JavaScript with debounced input handling, and updating row striping to work correctly with filtered results. Additionally, it updates keyboard event handling to modern standards and improves script localization. Feedback focuses on refining the search haystack generation to avoid including non-label text, ensuring consistent row striping across hidden tabs, and using more robust methods for reading data attributes.

Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a real-time capability filter to the role editing interface, allowing users to search for specific capabilities by slug or label. Key changes include the addition of a search input in the admin UI, new localized strings for filter results, and comprehensive JavaScript logic to handle filtering, row striping, and performance-optimized search caching. Additionally, the PR updates keyboard event handling to use modern properties and includes UI refinements for the import/export and settings pages. I have no feedback to provide as no review comments were submitted.

Comment thread js/edit-role.js Outdated
Copy link
Copy Markdown
Contributor

@ThemeGravity ThemeGravity left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@omaraelhawary The code looks good so I've approved it. I left one comment with small issue.

Nice work 🎉

One issue I want to address before merge, though. When user enters "edit_post" in General tab they see "No capabilities match your filter." but edit_posts is on the Posts tab. The match count reflects only the active tab so it works well, but might be misleading.
Maybe we can append "Try other tabs?" to "No capabilities match your filter." or even better compute a global match count once and show "0 in this tab — N elsewhere".

@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

@ThemeGravity What do you think about the below?

image

@ThemeGravity
Copy link
Copy Markdown
Contributor

@ThemeGravity What do you think about the below?

@omaraelhawary Looks good. Thanks.

@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a capability search filter to the role editing interface, allowing users to quickly find and manage specific permissions. The implementation includes new UI elements in the admin templates, updated CSS for styling and row striping, and JavaScript logic for real-time filtering and performance-focused search text caching. Feedback from the review suggests refining the search text retrieval to be more precise by targeting specific button elements and cautions against potential reliability issues when using the :visible selector for identifying active tabs during transitions.

Comment thread js/edit-role.js Outdated
Comment thread js/edit-role.js Outdated
@omaraelhawary
Copy link
Copy Markdown
Collaborator Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a capability search filter to the role editing interface, enabling users to filter capabilities across various tabs in real-time. The implementation includes new UI elements in the admin templates, updated CSS for search results and empty states, and comprehensive JavaScript logic for filtering, cross-tab match counting, and dynamic row striping. Reviewer feedback highlights opportunities to improve selector scoping to prevent global conflicts in multi-instance scenarios and suggests optimizing the match count calculation to avoid performance issues associated with the expensive :visible selector.

Comment thread js/edit-role.js
Comment thread js/edit-role.js
Comment thread js/edit-role.js
Comment thread js/edit-role.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants