feat: Add workspace sorting and enhanced search functionality#5759
feat: Add workspace sorting and enhanced search functionality#5759KUNDAN1334 wants to merge 1 commit intoFlowiseAI:mainfrom
Conversation
…eAI#5449) - Add 'Sort By' dropdown with three sorting options: * Name (A-Z) - default, alphanumeric sorting * Creation Date - sorted by creation date * Last Updated - most recent first - Enhance search functionality to search by both: * Workspace name * Workspace description - Update search placeholder to indicate both search options - Apply sorting to filtered workspaces list Changes: - Added FormControl, Select, MenuItem, InputLabel to Material-UI imports - Added 'sortBy' state with default value 'name' - Enhanced filterWorkspaces() to search name and description - Added sortWorkspaces() function with three sorting strategies - Added sort dropdown UI in ViewHeader filters section - Applied sorting to workspace display list
Summary of ChangesHello @KUNDAN1334, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the workspace management page by introducing robust sorting capabilities and an expanded search function. Users can now organize their workspaces by name, creation date, or last updated date, and search not only by name but also by description, providing a more flexible and efficient user experience for navigating and managing workspaces. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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 workspace sorting and enhances the search functionality to include workspace descriptions. The implementation is functionally sound and addresses the feature request. I've provided two main pieces of feedback. First, a high-severity recommendation to use stable keys instead of array indices when rendering the list of workspaces to prevent potential rendering bugs. Second, a medium-severity suggestion to use the useMemo hook for filtering and sorting the workspaces, which will improve performance by avoiding unnecessary re-computations on every render.
| function filterWorkspaces(data) { | ||
| return data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 | ||
| const searchLower = search.toLowerCase() | ||
| return ( | ||
| data.name.toLowerCase().indexOf(searchLower) > -1 || | ||
| (data.description && data.description.toLowerCase().indexOf(searchLower) > -1) | ||
| ) | ||
| } | ||
|
|
||
| function sortWorkspaces(workspacesToSort) { | ||
| const sorted = [...workspacesToSort] | ||
| switch (sortBy) { | ||
| case 'name': | ||
| return sorted.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })) | ||
| case 'createdDate': | ||
| return sorted.sort((a, b) => { | ||
| const dateA = new Date(a.createdDate || 0) | ||
| const dateB = new Date(b.createdDate || 0) | ||
| return dateA - dateB | ||
| }) | ||
| case 'updatedDate': | ||
| return sorted.sort((a, b) => { | ||
| const dateA = new Date(a.updatedDate || 0) | ||
| const dateB = new Date(b.updatedDate || 0) | ||
| return dateB - dateA // descending order for updated (most recent first) | ||
| }) | ||
| default: | ||
| return sorted | ||
| } | ||
| } |
There was a problem hiding this comment.
To optimize performance and improve readability, you can use the useMemo hook to compute the filtered and sorted workspaces. This avoids re-running the filter and sort logic on every render and only re-computes when workspaces, search, or sortBy change. This also allows you to consolidate the filtering and sorting logic.
After replacing the filterWorkspaces and sortWorkspaces functions with this useMemo, you'll need to update the map call to use the new displayedWorkspaces variable, for example: {displayedWorkspaces.map(...).
const displayedWorkspaces = useMemo(() => {
const searchLower = search.toLowerCase();
const filtered = workspaces.filter(
(data) =>
data.name.toLowerCase().includes(searchLower) ||
(data.description && data.description.toLowerCase().includes(searchLower))
);
const sorted = [...filtered];
switch (sortBy) {
case 'name':
return sorted.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }));
case 'createdDate':
return sorted.sort((a, b) => new Date(a.createdDate || 0) - new Date(b.createdDate || 0));
case 'updatedDate':
return sorted.sort((a, b) => new Date(b.updatedDate || 0) - new Date(a.updatedDate || 0));
default:
return sorted;
}
}, [workspaces, search, sortBy]);1 participant
Description
Implements comprehensive workspace management improvements as requested in #5449.
Changes
This PR adds the following features to the Workspaces management page:
1. Workspace Sorting (3 sort options)
2. Enhanced Search
3. UX Improvements
Technical Details
Modified Files:
Changes Made:
Related Issue
Closes #5449
How to Test
Checklist