Add fuzzy matching to the tasks filter #1960
Conversation
|
WalkthroughThis set of changes replaces the previous custom task filtering logic with a new, generalized fuzzy filtering hook. The old Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant useFuzzyFilter
participant matchSorter
Component->>useFuzzyFilter: Pass items and keys
useFuzzyFilter->>useFuzzyFilter: Maintain filterText state
Component->>useFuzzyFilter: setFilterText(newText)
useFuzzyFilter->>matchSorter: Filter items using filterText and keys
matchSorter-->>useFuzzyFilter: Return filteredItems
useFuzzyFilter-->>Component: Provide filteredItems, filterText, setFilterText
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/webapp/app/hooks/useFuzzyFilter.ts (2)
26-26: Avoid usingObjectas a typeThe static analysis tool correctly flags the use of
Objectas a type. This is a broad type that means "any non-nullable value", which could lead to unexpected behavior.-export function useFuzzyFilter<T extends Object>({ +export function useFuzzyFilter<T extends Record<string, any>>({🧰 Tools
🪛 Biome (1.9.4)
[error] 26-26: Don't use 'Object' as a type.
Prefer explicitly define the object shape. This type means "any non-nullable value", which is slightly better than 'unknown', but it's still a broad type.
(lint/complexity/noBannedTypes)
46-54: Consider adding a comment explaining the reduceRight operationWhile the existing comment mentions sorting by score of the first term, it might be helpful to explain why
reduceRightis used (applying filters from right to left) and how this affects the final sorted results.- // sort by the score of the first term + // Apply filters from right to left (last term first) to progressively narrow down results + // This ensures the first term has the strongest influence on the final sorting
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/webapp/app/hooks/useFilterTasks.ts(0 hunks)apps/webapp/app/hooks/useFuzzyFilter.ts(1 hunks)apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx(2 hunks)apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test/route.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/webapp/app/hooks/useFilterTasks.ts
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test/route.tsx (2)
apps/webapp/app/hooks/useFuzzyFilter.ts (1)
useFuzzyFilter(26-61)apps/webapp/app/presenters/v3/TaskListPresenter.server.ts (1)
TaskListItem(14-19)
🪛 Biome (1.9.4)
apps/webapp/app/hooks/useFuzzyFilter.ts
[error] 26-26: Don't use 'Object' as a type.
Prefer explicitly define the object shape. This type means "any non-nullable value", which is slightly better than 'unknown', but it's still a broad type.
(lint/complexity/noBannedTypes)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
- GitHub Check: typecheck / typecheck
🔇 Additional comments (3)
apps/webapp/app/hooks/useFuzzyFilter.ts (1)
1-61: Well-implemented fuzzy filtering hook with excellent documentationThe new
useFuzzyFilterhook is well-designed, with thorough JSDoc documentation, good example usage, and a clean implementation using thematchSorterlibrary. The approach of splitting filter text into terms and applying them progressively is particularly elegant.🧰 Tools
🪛 Biome (1.9.4)
[error] 26-26: Don't use 'Object' as a type.
Prefer explicitly define the object shape. This type means "any non-nullable value", which is slightly better than 'unknown', but it's still a broad type.
(lint/complexity/noBannedTypes)
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test/route.tsx (1)
29-29: Updated filtering logic with appropriate search keysThe switch to using
useFuzzyFilterwith specific task properties is a good improvement. The selected keys for filtering (taskIdentifier,friendlyId,id,filePath, andtriggerSource) provide comprehensive search capabilities across the most relevant task properties.Also applies to: 123-126
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx (1)
70-70: Well-configured fuzzy filter for task list viewThe implementation correctly uses the new
useFuzzyFilterhook with appropriate keys for the tasks list. The choice of filtering byslug,filePath, andtriggerSourcealigns with the visible columns in the table, providing intuitive search behavior.Also applies to: 172-175
...app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
Show resolved
Hide resolved
Changes in this PR:
match-sorterto perform the filtering across multiple object properties and consistently order the results by score.TasksandTestpage to enable fuzzy filtering.✅ Checklist
Screenshots
Summary by CodeRabbit
New Features
Refactor