manager
manager copied to clipboard
feat: [M3-7883] - Add search and alphabetical sorting to Switch Account drawer
Description ๐
This PR brings two improvements to the Switch Account drawer, allowing users with hundreds of child accounts to more easily navigate that list:
- Search capabilities on the company name
- Alphabetization of the list of company names
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 ๐
- Sorted the list of child accounts alphabetically.
- Added a search bar and functionality to filter the child account list based on company name.
- Updated the info notice to show more accurate terminology and slightly more specific helper text if there are no results.
- Added unit test and Cypress test coverage.
Target release date ๐๏ธ
06/10
Preview ๐ท
https://github.com/linode/manager/assets/114685994/525d3e2a-e7d9-48b0-960c-4b33872ff38f
| Dev (Cloud Manager Parent Test Account) | This Branch |
|---|---|
How to test ๐งช
Prerequisites
(How to setup test environment)
- Log into our Cloud Manager parent user test dev account to test these changes.
Verification steps
(How to verify changes)
- Confirm the x-filter in the network request is correct and all child accounts are displayed in alphabetical order.
- Search for a company that is in the list and confirm the child accounts list updates to only show relevant results.
- Search for a company name that is not in the list and confirm a message displays to inform the user there are no results.
- Confirm loading and error states for
/child-accountsrequest. - Confirm tests pass:
yarn test ChildAccountList SwitchAccountDrawer
yarn cy:run -s "cypress/e2e/core/parentChild/account-switching.spec.ts"
As an Author I have considered ๐ค
Check all that apply
- [x] ๐ Doing a self review
- [x] โ Our contribution guidelines
- [x] ๐ค Splitting feature into small PRs
- [x] โ Adding a changeset
- [x] ๐งช Providing/Improving test coverage
- [x] ๐ Removing all sensitive information from the code and PR description
- [ ] ๐ฉ Using a feature flag to protect the release
- [x] ๐ฃ Providing comprehensive reproduction steps
- [ ] ๐ Providing or updating our documentation
- [ ] ๐ Scheduling a pair reviewing session
- [ ] ๐ฑ Providing mobile support
- [ ] โฟ Providing accessibility support
Coverage Report: โ
Base Coverage: 82.29%
Current Coverage: 82.29%