-
Notifications
You must be signed in to change notification settings - Fork 365
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: [M3-7883] - Add search and alphabetical sorting to Switch Account drawer #10515
feat: [M3-7883] - Add search and alphabetical sorting to Switch Account drawer #10515
Conversation
… to Switch Account drawer
{(isSwitchingChildAccounts || isLoading) && ( | ||
<Box display="flex" justifyContent="center" width={'100%'}> | ||
<CircleProgress mini size={70} /> | ||
</Box> | ||
)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure why we were setting up loading spinners in two different places, but I removed this and added all conditions to L67-72. The addition of isRefetching handles loading state for the search queries. Reviewers should check that they're not seeing any unexpected behavior in our handling of loading state.
@@ -67,7 +79,10 @@ export const ChildAccountList = React.memo( | |||
|
|||
if (childAccounts?.length === 0) { | |||
return ( | |||
<Notice variant="info">There are no indirect customer accounts.</Notice> | |||
<Notice variant="info"> | |||
There are no child accounts |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We're not using "indirect customer", so updated the terminology here.
packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
Outdated
Show resolved
Hide resolved
Coverage Report: ✅ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code review is looking good; left some minor suggestions.
Note that I am currently unable to access alpha due to issues with my VPN access, so I will leave it to another reviewer to test functionality. Existing functionality looks good using MSW.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding this test
packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
Outdated
Show resolved
Hide resolved
packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works great! 🎉
Screen.Recording.2024-05-28.at.9.48.37.AM.mov
I wonder if the user would benefit from having a clear button on the search field 💭
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tests pass ✅
Code review ✅
Functionality (search, loading states, X-Filter, alphabetical sorting) ✅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work @mjac0bs 🚀
Description 📝
This PR brings two improvements to the Switch Account drawer, allowing users with hundreds of child accounts to more easily navigate that list:
We are already incrementally fetching the list using an infinite query, but the existing UI still requires scrolling and visually searching, which can be a burden on the user.
Changes 🔄
Target release date 🗓️
06/10
Preview 📷
Screen.Recording.2024-05-24.at.9.44.03.AM.mov
How to test 🧪
Prerequisites
(How to setup test environment)
Verification steps
(How to verify changes)
/child-accounts
request.As an Author I have considered 🤔
Check all that apply