fix: [UIE-9832] - Database advanced config inline errors not displaying

[hana-akamai]

Description 📝

Fix some advanced config inline errors not displaying such as synchronous_replication for pgbouncer clusters

Changes 🔄

• Use formState errors instead of managing our own error states
• Minor refactoring

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

Next release

Preview 📷

Inline error	Global error

How to test 🧪

Prerequisites

(How to setup test environment)

• Ensure you have a mysql and postgres Database cluster created

Reproduction steps

(How to reproduce the issue, if applicable)

• Go to prod or another branch
• Go to a postgres Database cluster that does not have 3 nodes and go to the Advanced Configuration tab
• Add synchronous_replication config option with the value being quorum
• Open network tab, click Save and observe the network error but no error displayed in the form

Verification steps

(How to verify changes)

• Checkout preview link or pull this branch locally
• Go to a postgres Database cluster that does not have 3 nodes and go to the Advanced Configuration tab
• Add synchronous_replication config option with the value being quorum
• Open network tab, click Save, observe the network error and there should be an inline error displayed in the form
• There should be no regressions in global errors or other inline options (such as for mysql)

Author Checklists

As an Author, to speed up the review process, I 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 tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #3 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	864 Passing	11 Skipped	42m 11s

Details

Failing Tests
	Spec	Test
❌	clone-linode.spec.ts	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts"

[bnussman-akamai]

Nice fixes. Love seeing react-hook-form's error handling working well for us

[bnussman-akamai]

No concerns with this change, just a small note:

Because useWatch is mounted at the same level as the useForm, I don't think there is any re-render benefit to using useWatch over watch in this case. In this case, if configs change, this component will re-render the same number of times with either approach.

From my understanding, useWatch is only useful for minimizing re-renders when used in a child component of react-hook-form's FormProvider in more complex forms.

[smans-akamai]

Followed the steps to reproduce the error in both scenarios and see the inline errors and error banner displaying as expected!