BA-2084: Multiple Profiles - Search Bar #183
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
WalkthroughThe pull request introduces a search functionality for the Members component across multiple files. Enhancements include the addition of a Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📥 CommitsReviewing files that changed from the base of the PR and between 475d53c4a26d54eb8dab3b6d99b0a3641d6643f0 and 42d83d1. ⛔ Files ignored due to path filters (78)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Nitpick comments (3)
packages/components/modules/profiles/Members/index.tsx (1)
62-70: Consider handling loading state in Searchbar.The
isPendingprop is hardcoded tofalse. Consider reflecting the actual loading state when search is in progress.<Searchbar variant="outlined" size="small" - isPending={false} + isPending={isLoadingNext} onChange={(e) => setSearchQuery(e.target.value)} onClear={() => setSearchQuery('')} value={searchQuery} sx={{ mb: 4 }} />packages/components/modules/profiles/Members/MembersList/index.tsx (2)
30-32: Consider debouncing search queries.The current implementation triggers a refetch on every search query change. Consider debouncing the search to reduce unnecessary API calls.
+import { useCallback } from 'react' +import debounce from 'lodash/debounce' const MembersList: FC<MemberListProps> = ({ // ...props }) => { + const debouncedRefetch = useCallback( + debounce((query: string) => { + refetch({ q: query }) + }, 300), + [refetch] + ) + useEffect(() => { - refetch({ q: searchQuery }) + debouncedRefetch(searchQuery) + return () => { + debouncedRefetch.cancel() + } }, [searchQuery])
25-25: Consider handling loading state during search.The
isLoadingNextis only used for pagination loading. Consider tracking the loading state during search refetch to improve user experience.-const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment( +const { data, loadNext, hasNext, isLoadingNext, refetch, isRefetching } = usePaginationFragment( UserMembersListFragment, userRef, )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 2692120 and d1d56f716b7d3aeb097853661b7f6868585d13ed.
📒 Files selected for processing (4)
packages/components/modules/profiles/Members/MembersList/index.tsx(2 hunks)packages/components/modules/profiles/Members/index.tsx(4 hunks)packages/components/modules/profiles/Members/types.ts(2 hunks)packages/components/modules/profiles/graphql/queries/UserMembersList.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
packages/components/modules/profiles/Members/types.ts (1)
15-15: LGTM! Type definitions are well-structured.The optional
searchQueryprop is correctly typed as string and appropriately added to both interfaces, maintaining backward compatibility.Also applies to: 28-30
packages/components/modules/profiles/graphql/queries/UserMembersList.ts (2)
29-30: LGTM! Connection configuration is properly set up.The
@connectiondirective correctly includes the search query in filters, ensuring proper cache updates when the search query changes.
9-9: Verify case-insensitive search handling.The GraphQL query includes the search parameter, but we need to ensure the backend handles case-insensitive search as per requirements.
Also applies to: 13-13
packages/components/modules/profiles/Members/index.tsx (1)
53-53: LGTM! Search state management is well implemented.The search functionality is properly implemented with state management and the search query is correctly passed down to the Members component.
Also applies to: 73-73
luisguareschi
force-pushed
the
BA-2084-Multiple-Profiles-Search-Bar
branch
from
d1d56f7 to
46c7611
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/components/modules/profiles/Members/MembersList/index.tsx (1)
Line range hint
57-65: Add specific empty state for search results.The current implementation doesn't distinguish between having no members and having no search results. Consider adding a specific message for when the search returns no results.
if (members.length === 0) { + if (searchQuery) { + return ( + <Typography variant="body1" align="center" sx={{ py: 4 }}> + No members found matching "{searchQuery}" + </Typography> + ) + } return ( <> <Typography variant="subtitle2" mb={4}>
🧹 Nitpick comments (3)
packages/components/modules/profiles/Members/index.tsx (2)
Line range hint
16-40: Consider adding searchQuery to the initial query parameters.While the searchQuery prop is correctly passed to MembersList, consider including it in the initial useLazyLoadQuery parameters to avoid unnecessary refetches.
const data = useLazyLoadQuery<IUserMembersListPaginationQuery>(UserMembersListPaginationQuery, { profileId: currentProfile?.id || '', count: NUMBER_OF_MEMBERS_ON_FIRST_LOAD, orderBy: 'status', + q: searchQuery, })
62-70: Consider adding placeholder text and aria-label for better accessibility.The Searchbar implementation looks good but could benefit from additional accessibility improvements.
<Searchbar variant="outlined" size="small" isPending={false} onChange={(e) => setSearchQuery(e.target.value)} onClear={() => setSearchQuery('')} value={searchQuery} sx={{ mb: 4 }} + placeholder="Search members..." + aria-label="Search members" />packages/components/modules/profiles/Members/MembersList/index.tsx (1)
Line range hint
77-91: Consider preserving scroll position during search.The Virtuoso implementation looks good, but consider preserving the scroll position when performing a search to improve user experience.
<Virtuoso style={{ height: membersContainerHeight }} data={members} itemContent={(_index, member) => member && renderMemberItem(member, _index)} + restoreStateFrom={searchQuery ? undefined : 'members-list'} + saveStateOnUpdate={!searchQuery} components={{ Footer: renderLoadingState, }} // ... rest of the props />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between d1d56f716b7d3aeb097853661b7f6868585d13ed and 46c7611d4169ab6f9bf09797da97b4de891c2479.
📒 Files selected for processing (4)
packages/components/modules/profiles/Members/MembersList/index.tsx(2 hunks)packages/components/modules/profiles/Members/index.tsx(4 hunks)packages/components/modules/profiles/Members/types.ts(2 hunks)packages/components/modules/profiles/graphql/queries/UserMembersList.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/components/modules/profiles/Members/types.ts
- packages/components/modules/profiles/graphql/queries/UserMembersList.ts
🔇 Additional comments (1)
packages/components/modules/profiles/Members/index.tsx (1)
1-1: LGTM: Import statements are properly organized.The necessary imports for useState and Searchbar components are correctly added.
Also applies to: 4-4
anicioalexandre
requested changes
Jan 20, 2025
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/components/modules/profiles/Members/MembersList/index.tsx (3)
27-27: Fix formatting in destructuring assignment.Remove the extra space before
refetchin the destructuring assignment.- const { data, loadNext, hasNext, isLoadingNext , refetch} = usePaginationFragment( + const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment(
38-43: Optimize handleSearchClear implementation.The current implementation makes two state transitions: one for reset and one for search. These can be combined into a single transition for better performance.
const handleSearchClear = () => { startTransition(() => { reset() - handleSearch('') + refetch({ q: '' }) }) }
76-85: Extract duplicated Searchbar component.The Searchbar component is duplicated with identical props. Consider extracting it into a separate component or variable to improve maintainability.
+ const searchBar = ( + <Searchbar + variant="outlined" + size="small" + isPending={isPending} + onChange={(e) => handleSearch(e.target.value)} + onClear={() => handleSearchClear()} + name="search" + control={control} + sx={{ mb: 4 }} + /> + ) if (members.length === 0) { return ( <> - <Searchbar - variant="outlined" - size="small" - isPending={isPending} - onChange={(e) => handleSearch(e.target.value)} - onClear={() => handleSearchClear()} - name="search" - control={control} - sx={{ mb: 4 }} - /> + {searchBar} // ... rest of the code </> ) } return ( <> - <Searchbar - variant="outlined" - size="small" - isPending={isPending} - onChange={(e) => handleSearch(e.target.value)} - onClear={() => handleSearchClear()} - name="search" - control={control} - sx={{ mb: 4 }} - /> + {searchBar} // ... rest of the code </> )Also applies to: 96-105
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 46c7611d4169ab6f9bf09797da97b4de891c2479 and 1e57cb34729fa538a7dde63219e12509ba6a089b.
📒 Files selected for processing (3)
packages/components/modules/profiles/Members/MembersList/index.tsx(4 hunks)packages/components/modules/profiles/Members/index.tsx(3 hunks)packages/components/modules/profiles/Members/types.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/components/modules/profiles/Members/types.ts
- packages/components/modules/profiles/Members/index.tsx
🔇 Additional comments (2)
packages/components/modules/profiles/Members/MembersList/index.tsx (2)
1-9: LGTM! Appropriate imports for search functionality.The added imports support the search feature requirements with React's useTransition for smooth state updates and the reusable Searchbar component as specified in the PR objectives.
25-27: Add debouncing to search refetch and loading state.The current implementation triggers a refetch on every searchQuery change, which could lead to performance issues.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
packages/components/modules/profiles/Members/MembersList/index.tsx (1)
84-93: Extract duplicated Searchbar component.The Searchbar component configuration is duplicated. Consider extracting it into a separate component or variable to maintain DRY principles.
+const SearchbarComponent = () => ( + <Searchbar + variant="outlined" + size="small" + isPending={isPending} + onChange={(e) => handleSearch(e.target.value)} + onClear={() => handleSearchClear()} + name="search" + control={control} + sx={{ mb: 4 }} + /> +) if (members.length === 0) { return ( <> - <Searchbar {...} /> + <SearchbarComponent /> ... </> ) } return ( <> - <Searchbar {...} /> + <SearchbarComponent /> ... </> )Also applies to: 104-113
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 1e57cb34729fa538a7dde63219e12509ba6a089b and eed60a9f6059a0861691de42f17a2ccbc9015d3f.
📒 Files selected for processing (5)
packages/components/modules/profiles/Members/MemberItem/index.tsx(2 hunks)packages/components/modules/profiles/Members/MemberItem/types.ts(1 hunks)packages/components/modules/profiles/Members/MemberListItem/index.tsx(3 hunks)packages/components/modules/profiles/Members/MemberListItem/types.ts(1 hunks)packages/components/modules/profiles/Members/MembersList/index.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Component Test Applications and Packages
- GitHub Check: Lint
🔇 Additional comments (4)
packages/components/modules/profiles/Members/MemberItem/types.ts (1)
19-19: LGTM! Type definition is correct.The optional searchQuery prop is properly typed as string.
packages/components/modules/profiles/Members/MemberListItem/types.ts (1)
14-14: LGTM! Consistent type definition.The searchQuery prop type matches the MemberItemProps interface, maintaining consistency.
packages/components/modules/profiles/Members/MembersList/index.tsx (2)
27-29: Add debouncing to search refetch and loading state.The current implementation triggers a refetch on every searchQuery change, which could lead to performance issues.
77-77: Implementation successfully meets search requirements!The search functionality correctly implements:
- Case-insensitive search through the relay refetch
- Clear button functionality
- Search query propagation to child components
Also applies to: 97-97
packages/components/modules/profiles/Members/MemberItem/index.tsx
Outdated
Show resolved
Hide resolved
packages/components/modules/profiles/Members/MemberItem/index.tsx
Outdated
Show resolved
Hide resolved
luisguareschi
force-pushed
the
BA-2084-Multiple-Profiles-Search-Bar
branch
from
2b72a02 to
44a1393
Compare
anicioalexandre
approved these changes
Jan 21, 2025
luisguareschi
force-pushed
the
BA-2084-Multiple-Profiles-Search-Bar
branch
from
6bc9062 to
b85a8ac
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/components/CHANGELOG.md (1)
7-7: Enhance the changelog entry for clarity and completeness.Consider revising the changelog entry to be more specific and grammatically correct:
- Added search bar to members list. User can search for members by first name, last name and email. + Added search bar to the members' list, allowing users to perform case-insensitive searches by members' first name, last name, and email address. The search supports partial matches and includes a clear button to reset results.🧰 Tools
🪛 LanguageTool
[uncategorized] ~7-~7: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...## Patch Changes - Added search bar to members list. User can search for members by fi...(AI_HYDRA_LEO_APOSTROPHE_S_XS)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between eed60a9f6059a0861691de42f17a2ccbc9015d3f and 5295e9eb93381c8e8d7a4f76b2cc573ca2aba8ca.
⛔ Files ignored due to path filters (78)
packages/components/__generated__/ActivityLogsFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ActivityLogsPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ActivityLogsQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/AddProfilePopoverUserQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/AllProfilesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/AllProfilesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ArchiveChatRoomMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/BlockToggleFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/BlockToggleMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChangeUserRoleMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomMessagesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomParticipantsPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomsQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentCreateMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentDeleteMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentItemRefetchQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentItemWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentItem_comment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentItem_target.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentPinMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentUpdateMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsForTestingQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsListWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsList_comments.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsRefetchQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsUpdateWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CommentsWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CreateChatRoomMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/FollowToggleMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/FollowToggleUpdatableFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/GroupDetailsQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/GroupTitleFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/LastMessageFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MemberItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MembersListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessageItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessagesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationItemWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationUserMenuFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationsListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationsListQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationsMarkAllAsReadMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationsMarkAsReadMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/NotificationsPopoverQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/OrganizationCreateMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfileComponentFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfileItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfileUpdateMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfilesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ProfilesListQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReactionButtonMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReactionButtonWithQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReactionButton_target.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReadMessagesMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/RoomFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/RoomTitleFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/RoomsListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/SendMessageMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/TitleFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UnreadChatMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UnreadMessagesCountFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UpdateChatRoomMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UserMembersListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UserMembersListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UserProfileQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/chatRoomsPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/notificationsListRefetchable.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/profilesListRefetchable.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useMessageCountUpdateSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useMessagesListSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useNotificationsSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useRoomListSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/userMembersListPaginationRefetchable.graphql.tsis excluded by!**/__generated__/**
📒 Files selected for processing (1)
packages/components/CHANGELOG.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
packages/components/CHANGELOG.md
[uncategorized] ~7-~7: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...## Patch Changes - Added search bar to members list. User can search for members by fi...
(AI_HYDRA_LEO_APOSTROPHE_S_XS)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Analyze (javascript)
- GitHub Check: Unit Test Applications and Packages
- GitHub Check: Component Test Applications and Packages
- GitHub Check: Lint
🔇 Additional comments (1)
packages/components/CHANGELOG.md (1)
3-4: LGTM! Version and change type are appropriate.The version increment (0.0.51) and classification as a patch change are appropriate for this feature addition, as it enhances functionality without breaking changes.
priscilladeroode
approved these changes
Jan 21, 2025
luisguareschi
force-pushed
the
BA-2084-Multiple-Profiles-Search-Bar
branch
2 times, most recently
from
a823c3d to
475d53c
Compare
- Added a search bar to filter members in the MembersSuspended component. - Introduced `searchQuery` prop in Members and UserMembersProps interfaces. - Updated the UserMembersList GraphQL query to accept a search query parameter. - Refactored MembersList to refetch data based on the search query input. Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
Signed-off-by: luisguareschi <lg@tsl.io> Signed-off-by: luisguareschi <luisguareschi@hotmail.com>
luisguareschi
force-pushed
the
BA-2084-Multiple-Profiles-Search-Bar
branch
from
475d53c to
42d83d1
Compare
|
This was referenced Jan 21, 2025
This was referenced Jan 22, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As a user, on the BaseApp Profile,I would like to use a searc bar, In order to find invited and current members on the member list.
Original Story:
Acceptance Criteria
Context
In this story we want to implement the search bar in the Members List page.
Business Rules - Search Bar - 3
Users should be able to use a search bar to locate a member:
The search should be case-insensitive, so typing “john” should return results for “John” or “john.”
**The search should support partial matches, meaning typing part of a contact's name (e.g., “Jo” for “John Doe”) should filter the list to show all matching results.
The search bar should include a clear button (e.g., an “X” icon) that, when clicked, clears the search input and restores the full members list
Searchbar component should already be done, so re use it.
Current behavior
Expected behavior
Code Snippet
Design Link: https://www.figma.com/design/XRD6wSl1m8Kz6XUcAy5CLp/BaseApp---WEB?node-id=3660-64822&node-type=frame&t=IBg7GNDkZEpy2W77-0
Approvd
https://app.approvd.io/projects/BA/stories/35054
Summary by CodeRabbit
Release Notes
New Features
Improvements
Technical Updates