manager icon indicating copy to clipboard operation
manager copied to clipboard

feat: [M3-7883] - Add search and alphabetical sorting to Switch Account drawer

Open mjac0bs opened this issue 1 year ago โ€ข 1 comments

Description ๐Ÿ“

This PR brings two improvements to the Switch Account drawer, allowing users with hundreds of child accounts to more easily navigate that list:

  1. Search capabilities on the company name
  2. 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
Screenshot 2024-05-24 at 12 15 32โ€ฏPM Screenshot 2024-05-24 at 12 16 47โ€ฏPM

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-accounts request.
  • 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

mjac0bs avatar May 23 '24 23:05 mjac0bs

Coverage Report: โœ…
Base Coverage: 82.29%
Current Coverage: 82.29%

github-actions[bot] avatar May 24 '24 17:05 github-actions[bot]