fix: [M3-7590] – Improve UX for Linode Resize dialog when linode data is being loaded or there is a form error

[dwiley-akamai]

Description 📝

Improve the UX for the Linode Resize dialog.

Changes 🔄

• Only display Linode Resize form if linode data has been loaded (if it is still loading, render a <CircleProgress />)
• Prevent dialog title from being Resize Linode undefined by rendering an empty string when linode.label is undefined as the linode data loads
• Implement scrollErrorIntoViewV2() to ensure errors are scrolled into view

Target release date 🗓️

7/8/24

Preview 📷

Before	After

Error scrolls into view

https://github.com/linode/manager/assets/114682940/9ecc52bf-8773-49a3-ab04-a757d3a7bc87

How to test 🧪

Reproduction steps

From the Linodes landing page, open the Resize dialog for a linode. Observe: the dialog title briefly says "Resize Linode undefined" and the body of the dialog shifts once the linode data is loaded.

For the error, either block requests to *resize* or choose a larger linode that you can resize to a smaller plan. Try to submit the form and observe that the form does not scroll to the error at the top.

Verification steps

• Confirm the "Resize Linode undefined" and dialog body shift issues are no longer happening
• Confirm we now scroll to errors

As an Author I have considered 🤔

• [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
• [X] 🚩 Using a feature flag to protect the release
• [X] 👣 Providing comprehensive reproduction steps
• [X] 📑 Providing or updating our documentation
• [X] 🕛 Scheduling a pair reviewing session
• [X] 📱 Providing mobile support
• [X] ♿ Providing accessibility support

[dwiley-akamai]

@abailly-akamai Any objections to this approach? I couldn't reproduce some of the items you mentioned in the ticket, but in prod I was seeing "Resize Linode undefined" as the dialog title and the dialog contents shifting abruptly (when opening from the Linodes landing page). Waiting until the linode data has been fetched before rendering the full form addresses those issues.

[abailly-akamai]

@dwiley-akamai Yeah I can't reproduce some of those either, so this approach is a good first step, tho the code could use a cleanup too, but not a requirement.

One think i noticed however is the broken scrollErrorIntoView on first form submission. To reproduce you'd have to try to resize to a smaller plan and submit the form. You should use scrollErrorIntoViewV2 to fix this.