fix(invite): fixed invite modal, fix search modal keyboard nav#879
fix(invite): fixed invite modal, fix search modal keyboard nav#879waleedlatif1 merged 2 commits intostagingfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR fixes two critical UI components that broke after recent UI framework updates. The changes address both functional and usability issues in the workspace invitation system and search modal navigation.
Invite Modal Fixes:
The invite modal component underwent significant restructuring to restore functionality. The main fix involves changing the form submission mechanism from a direct submit button to using a form reference with requestSubmit(). This pattern suggests the underlying form handling library or component was updated and required a different submission approach. The PR also removes the sentEmails state tracking which was likely causing state management conflicts, simplifies the invitation success logic, and adds automatic modal closing after successful invites. Additionally, the UI received improvements including inline status badges in the permissions table, enhanced tooltips for accessibility, and wider email tag truncation (200px vs 120px) for better readability.
Search Modal Navigation Enhancement:
A new custom hook use-search-navigation.ts was created to handle keyboard navigation within the search modal. This hook supports both grid and list layout modes, manages navigation state across different sections (like blocks, tools, etc.), and implements intelligent position memory when users switch between sections. The navigation system handles directional movement (up/down/left/right arrows), automatically scrolls selected items into view, and provides a more intuitive user experience when browsing through search results.
Both fixes integrate with the existing codebase architecture - the invite modal maintains its workspace integration patterns while the search navigation hook follows established React patterns for reusable UI logic. These changes restore broken functionality while enhancing the overall user experience in core workflow areas.
Confidence score: 3/5
- This PR addresses legitimate bugs but contains some code quality issues that could lead to runtime problems
- Score reflects the functional fixes being solid but implementation having type safety concerns and potential edge cases
- Pay close attention to the new search navigation hook for type assertions and validation
Context used:
Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)
2 files reviewed, 3 comments
| id: string | ||
| name: string | ||
| type: 'grid' | 'list' | ||
| items: any[] |
There was a problem hiding this comment.
style: Using any type reduces type safety. Consider defining a proper interface for navigation items.
Context Used: Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)
| const maxIndexInCurrentRow = Math.min( | ||
| newItemIndex + gridCols, | ||
| currentSection.items.length - 1 | ||
| ) |
There was a problem hiding this comment.
style: This variable is declared but never used, consider removing it.
| const maxIndexInCurrentRow = Math.min( | |
| newItemIndex + gridCols, | |
| currentSection.items.length - 1 | |
| ) | |
| if (newItemIndex + gridCols < currentSection.items.length) { | |
| newItemIndex += gridCols | |
| } else if (newSectionIndex < sections.length - 1) { |
| type='button' | ||
| onClick={() => formRef.current?.requestSubmit()} | ||
| disabled={ | ||
| !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites |
There was a problem hiding this comment.
logic: The !hasNewInvites condition prevents submission when there are no new invites, but users might want to save permission changes for existing users. Consider separating these conditions.
* fix(invite): fixed invite modal * fix(search-modal): fix search modal keyboard nav
…udioai#879) * fix(invite): fixed invite modal * fix(search-modal): fix search modal keyboard nav
1 participant
Summary
fixed invite modal, fix search modal keyboard nav. invite modal functionality broke after ui updates, keyboard nav in search modal was unintuitive
Type of Change
Testing
Tested manually.
Checklist