upcoming: [DI-20934] - Configurable Max limit on resource selection component

[ankitaakamai]

Description 📝

Introduction of configurable Max limit on resource selection component and other enhancements.

Changes 🔄

1. SELECT_ALL option in resources list component will not be available if number of resources are higher than the maximum resources selection limit set in launchDarkly.
2. In resource selection autocomplete, user will be able to select resources up to maximum resource selection limit, all other resources(options) will be disabled after reaching this limit.
3. Text 'Select up to limit label' is introduced under resource selection autocomplete.

Target release date 🗓️

12-12-2024

Preview 📷

Before	After

How to test 🧪

Verification steps

1. Login as a mock user.
2. Select any resource type - linode or databases, and the relevant filters.
3. If you have resources > max resource selection limit, you will not see any 'Select All' tab in resource selection autocomplete.
4. Try selecting any resource after you have already selected resources up to max limit, you will not be able to select any additional resource as they are disabled after reaching max selection limit.

As an Author, I have considered 🤔

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[github-actions]

Coverage Report: ✅
Base Coverage: 87.37%
Current Coverage: 87.37%

[linode-gh-bot]

Cloud Manager UI test results

🎉 445 passing tests on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	445 Passing	2 Skipped	94m 15s

[mjac0bs]

Verified:

• Any selections beyond the max limit are disabled
• The Select All option is only present when the number of resource options is less than the limit
• Test coverage is present and passing

Thanks @ankitaakamai, approving pending a couple of comments I left are addressed. I also called out one question about buggy UI behavior to see if the team is aware of it.

[mjac0bs]

While reviewing, I noticed some unexpected behavior here: after making a selection and closing the resource select, opening it back up displays a flash of content for the options. This appears to be happening with any number of selections (not just the max) and is happening on the develop branch, so preexisting to this PR. Is this a bug that's already known and there is a ticket to address?

Screen.Recording.2024-11-13.at.9.27.28.AM.mov

[mjac0bs]

Suggested change

	Configurable Max limit on resource selection component ([#11252](https://github.com/linode/manager/pull/11252))
	Configurable max limit on CloudPulse resource selection component ([#11252](https://github.com/linode/manager/pull/11252))

Could we mention CloudPulse here? Once this changeset becomes part of a full list of changes in a changelog, it's not always clear at a glance what product was impacted.

[mjac0bs]

Please use userEvent for the reasons described here in our developer docs. This was a recent update we made to update our best practices, so let's not rely on fireEvent for new test coverage.

We recommend using userEvent rather than fireEvent where possible. This is a React Testing Library best practice, because userEvent more accurately simulates user interactions in a browser and makes the test more reliable in catching unintended event handler behavior.

[mjac0bs]

Same comment as above.