change: [M3-7540] - Improve tags experience

[hkhalil-akamai]

Description 📝

Update: it appears that the React 18 upgrade resolved the underlying bug! 🪄 Keeping this PR open without the workaround since it includes some improvements to the tag UX.

Fixes a bug in the TagCell component's overflow detection logic that caused it to sometimes render incorrectly. This bug only appeared in production builds of Cloud Manager and was caused by a parent Grid component briefly rendering as display: none, breaking the overflow detection in TagCell.

To fix this issue, this PR introduces a somewhat convoluted workaround: upon mount, TagCell locates its nearest ancestor in the DOM with display: none and then attaches a MutationObserver (via the newly introduced useMutationObserver hook) to that element, re-computing overflow when it is finally displayed.

This PR also includes improvements to the display of the TagCell component and AddTag input on small screens.

Changes 🔄

• Fix overflow detection using useMutationObserver on parent element
• Increase width of AddTag input on small screens
• Always render "Add a tag" and ellipses buttons to the right of tags
• Upgrade deprecated Select component to Autocomplete (this also fixes a momentary flicker when adding a tag)
• Replace TagsPanel component with TagCell (these components shared a lot of logic)

Preview 📷

Before	After
Not detecting overflow	Correctly detecting overflow
AddTag unusably small on small displays:	AddTag takes up entire width:
"Add a tag" and ellipses buttons appear to the left of existing tags on small displays:	Buttons now appear to the right of new tags, consistent with the "shadow" effect:

How to test 🧪

Prerequisites

As far as I am aware, this bug is only reproducible in production builds of Cloud Manager. For reproducing or testing, use either:

• https://cloud.linode.com / Preview link for this PR
• yarn build && yarn workspace linode-manager serve build

Reproduction steps

(For overflow detection bug)

• Add several tags to a Linode until they overflow in the Linode details footer
• Navigate back to the Linodes landing page (/linodes)
• Refresh the page
• Return to the details page for the Linode
• Observe that overflow detection fails, causing tags to clip instead of displaying the "shadow" effect and ellipses button

(For style changes on small screens)

• In the details page for a Linode with overflowing tags, reduce the window size until the mobile layout is activated
• Observe that the "Add a tag" and ellipses buttons appear to the left of the tags, inconsistent with how they're displayed on larger screens and unintuitive with the "shadow" UX metaphor indicating an overflow
• Click on the the "Add a tag" button
• Observe the tag input field is unusably small, with placeholder and tag labels clipped

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

[hkhalil-akamai]

I'm not sure why these styles were included before specifically for small screens, but it is arguably more intuitive to render the ellipses button next to the shadow effect when tags are overflowing, and the "Add a tag button" at the very right, in a LTR context.

Before	After

[abailly-akamai]

Makes sense to me - good change

[hkhalil-akamai]

Before	After

[hkhalil-akamai]

• In the tag drawer, the Autocomplete is opening randomly after I add a tag

Ah, good catch. Seems like this was caused by differences in how Chrome vs Safari trigger onblur.

• Somehow I'm able to make a tag look more transparent than the others

This is a new indication for a tag that is in progress of being deleted. Since multiple tags could be deleted at the same time, sometimes this would cause a race condition leading to inconsistent states. Fixed with a new useAtomic hook.

[hkhalil-akamai]

@abailly-akamai Thanks for the feedback. Took it a step further and completely removed TagsPanel in favor of TagCell, since I noticed most of the logic was being duplicated (aa3c9).

[hkhalil-akamai]

Introducing this as a new hook as I believe it could be used wherever we asynchronously update a remote resource based on user input.

[abailly-akamai]

Thanks for addressing the UI issues @hkhalil-akamai - the improved UI looks great!

I've left comments about the nitty gritty of your PR, specifically around the new hook you introduced and extra complexity. Happy to pair up to discuss those further

[bnussman-akamai]

Looking good. Can we add a loading state to this action?

Screen.Recording.2024-04-01.at.10.01.52.AM.mov

[bnussman-akamai]

Thanks for sticking with this PR for so long! Overall, I think this makes some solid improvements and clean up!

[abailly-akamai]

Thanks for the all the improvements here! it's going a long way in improving the tagging experience, and thank you for keeping an open mind regarding the earlier refactors.

No regression found with the latest changes ✅

⚠️ Can you make sure we get a proper e2e run before merging? I think the CI chocked on the last run