refactor: [UIE-9325] - Replace Formik with React Hook Form in AddAccessControlDrawer by hana-akamai · Pull Request #13044 · linode/manager

hana-akamai · 2025-10-31T15:49:53Z

Description 📝

Refactor Database Manage Networking drawer to use React Hook Form instead of Formik

Changes 🔄

There should be no visual external changes other than IP validation on blur instead of after clicking Update Access Controls

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

How to test 🧪

Prerequisites

(How to setup test environment)

Have the Database VPC feature flag enabled

Verification steps

(How to verify changes)

Test adding/editing IPs in the Database landing page via Manage Access Controls action dropdown
Test adding/editing IPs in the Database details page via the Networking tab
There should be no regressions compared to prod, error messages should display

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

…rolDrawer

hana-akamai · 2025-10-31T19:13:39Z

packages/manager/.changeset/pr-13002-tech-stories-1761925907093.md

+"@linode/manager": Tech Stories
+---
+
+Replace Formik with React Hook Form in DatabaseManageNetworkingDrawer ([#13002](https://github.com/linode/manager/pull/13002))


Forgot to add a changeset to the other PR so adding it here!

hana-akamai · 2025-10-31T19:14:39Z

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx

+  allow_list: ExtendedIP[];
+}
+
+export const ManageAccessControlDrawer = (props: Props) => {


Renamed file from AddAccessControlDrawer to ManageAccessControlDrawer and refactored formik logic to react hook form

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.test.tsx

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx

hana-akamai · 2025-11-05T21:42:34Z

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx

-      let ipString = extendedIPToString(currentIP);
-      if (ipString === '') {
-        return acc;
-      }
+    const allowList = getValues('allow_list');

-      if (ipString.indexOf('/') === -1) {
-        ipString += '/32';
-      }


handleValidateIPs already handles this so removed and simplified the reduce to a map below

smans-akamai

Thanks for applying my feedback! The changes look good so I'm approving!

…trol-drawer

dwiley-akamai

Code review ✅
Verification steps ✅

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx

linode-gh-bot · 2025-11-06T21:05:49Z

Cloud Manager UI test results

🔺 5 failing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`5 Failing`	`856 Passing`	`11 Skipped`	`48m 22s`

Details

Failing Tests
	Spec	Test
❌	`timerange-verification.spec.ts`	Cloud Manager Cypress Tests→Integration tests for verifying Cloudpulse custom and preset configurations » should implement and validate custom date/time picker for a specific date and time range
❌	`update-stackscripts.spec.ts`	Cloud Manager Cypress Tests→Update stackscripts » updates a StackScript
❌	`clone-linode.spec.ts`	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page
❌	`search-images.spec.ts`	Cloud Manager Cypress Tests→Search Images » creates two images and make sure they show up in the table and are searchable
❌	`create-stackscripts.spec.ts`	Cloud Manager Cypress Tests→Create stackscripts » creates a StackScript and deploys a Linode with it

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/cloudpulse/timerange-verification.spec.ts,cypress/e2e/core/stackscripts/update-stackscripts.spec.ts,cypress/e2e/core/linodes/clone-linode.spec.ts,cypress/e2e/core/images/search-images.spec.ts,cypress/e2e/core/stackscripts/create-stackscripts.spec.ts"

…ssControlDrawer (linode#13044) ## Description 📝 Refactor Database Manage Networking drawer to use React Hook Form instead of Formik ## Changes 🔄 - There should be no visual external changes other than IP validation on blur instead of after clicking Update Access Controls ## How to test 🧪 ### Prerequisites (How to setup test environment) - Have the Database VPC feature flag enabled ### Verification steps (How to verify changes) - [ ] Test adding/editing IPs in the Database landing page via Manage Access Controls action dropdown - [ ] Test adding/editing IPs in the Database details page via the Networking tab - [ ] There should be no regressions compared to prod, error messages should display

* initial commit * Added changeset: Address oAuth issue with IAM OAuthCallback * fix: [UIE-9456 & UIE-9457] - Typo + expose search filters on /iam/roles route (#13034) * UIE-9456 & UIE-9457 * test * Added changeset: Typo + expose search filters on /iam/roles route * feat: [UIE-9481] - IAM: add perm check for the drawer (#13043) * feat: [UIE-9481] - IAM: add perm check for the drawer * Added changeset: IAM: add a permission check for delete nodebalancer drawer * feat: [UIE-9503] - add empty state to Default Roles/Entities tab (#13042) * feat: add empty state to Default Roles/Entities table * Added changeset: IAM: Empty state for the Default Roles and Default Entities Access tabs * update text * add unit tests * review fix * unit test fix * fix: [UIE-9478] - IAM: disable tag edit (#13046) * fix: [UIE-9478] - IAM: disable tag edit * Added changeset: IAM: tags editing was enabled for restricted users * fix: [UIE-9478] - add tooltip, disable manage tags in Volume action menu * style fix * Cloud version 1.154.0, API v4 version 0.152.0, Validation version 0.78.0, UI version 0.23.0 * Cloud version 1.154.0, API v4 version 0.152.0, Validation version 0.78.0, UI version 0.23.0 * fix: [M3-10698] - Update linode/clone endpoint and label calculations for < 1 hour (#13045) * fix: [M3-9498] - Update linode/clone endpoint and label calculations for < 1 hour * Add changelogs --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> * fix: [UIE-9520] - IAM Child Account - user not found error handling (#13047) * try/cath child user query * consistent handling * types * Added changeset: IAM Child Account - user not found error handling * fix: [UIE-9477] - IAM: disable delete and detach popups for Volumes when user has no permissions (#13049) * fix: [UIE-9477] - IAM: Disable delete and detach popups for Volumes if no permissions * Added changeset: IAM: restricted users could access delete and detach popups without permissions * upcoming: [UIE-9434] - Create feature flag for generational compute plans (#13054) * upcoming: [UIE-9434] - Create feature flag for generational compute plans * Added changeset: Feature flag for Generational Compute plans * test: [DPS-34825] Add cypress tests for Create/Edit Stream forms and Streams Landing (#13008) * refactor: [DI-27807] - Change status of edit & delete button in alert list table based on status (#13052) * refactor: [DI-27807] - Change status of edit & delete button in alert list table based on status * Added comment * Added changeset * refactor: [DI-27807] - Updated test cases * upcoming: [UIE-9368] - Create a firewall Rulesets & Preflixlists feature flag (#13051) * Add firewall rs & pl feature flag * Added changeset: Feature flag for Firewall Rulesets & Prefixlists * feat: [UIE-9341, UIE-9342, UIE-9521] - IAM: fix perm for vpcs (#13050) * UIE-9342 * UIE-9341 * feat: [UIE-9341, UIE-9342, UIE-9521] - IAM: fix perm for vpc * Added changeset: IAM: fix permissiom's check for vpc for assigning/unassigning linodes * filter linodes * e2e deferred getLinodes call --------- Co-authored-by: Alban Bailly <abailly@akamai.com> * refactor: [UIE-9325] - Replace Formik with React Hook Form in AddAccessControlDrawer (#13044) ## Description 📝 Refactor Database Manage Networking drawer to use React Hook Form instead of Formik ## Changes 🔄 - There should be no visual external changes other than IP validation on blur instead of after clicking Update Access Controls ## How to test 🧪 ### Prerequisites (How to setup test environment) - Have the Database VPC feature flag enabled ### Verification steps (How to verify changes) - [ ] Test adding/editing IPs in the Database landing page via Manage Access Controls action dropdown - [ ] Test adding/editing IPs in the Database details page via the Networking tab - [ ] There should be no regressions compared to prod, error messages should display * [UIE-9533] -Hopeful fix: Race condition with Preferences overrides in PrimaryNav (#13056) * attempt to rule out any race condition * comments * code and fixes * cleanup * Added changeset: Race condition with Preferences overrides in PrimaryNav * feat: [UIE-9393] - IAM Parent/Child: delegate permissions for child account (#13033) * feat: [UIE-9393] - IAM Parent/Child: delegate permissions for child account * changesets * remove the unrestricted check for query * fix conflict * e2e gating * lint fix * better approach to fixing e2e * Mock IAM to be disabled in Account Switching test --------- Co-authored-by: Alban Bailly <abailly@akamai.com> Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com> Co-authored-by: Joe D'Amore <jdamore@akamai.com> * feat: [UIE-9534] - IAM: fix perm for nodebalancer (#13058) * feat: [UIE-9534] - IAM: add tooltips * Added changeset: IAM: add tooltips for disabled buttons for nodebalancers, remove notification banner * update text * remove tooltip * change:[UIE-9541] Add MSW crud support for types API (#13067) * change:[UIE-9541] Add MSW crud support for types API * Added changeset: Add MSW crud support for types API * Added changeset: Add MSW crud support for types API --------- Co-authored-by: aaleksee-akamai <aaleksee@akamai.com> Co-authored-by: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com> Co-authored-by: Dajahi Wiley <dwiley@linode.com> Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: grevanak-akamai <145482092+grevanak-akamai@users.noreply.github.com> Co-authored-by: mduda-akamai <mduda@akamai.com> Co-authored-by: Nikhil Agrawal <165884194+nikhagra-akamai@users.noreply.github.com> Co-authored-by: Purvesh Makode <pmakode@akamai.com> Co-authored-by: Hana Xu <115299789+hana-akamai@users.noreply.github.com> Co-authored-by: Joe D'Amore <jdamore@akamai.com>

refactor AddAccessControlDrawer to react-hook-form

b0c9865

hana-akamai self-assigned this Oct 31, 2025

hana-akamai added DBaaS Relates to Database as a Service Clean Up labels Oct 31, 2025

github-project-automation bot added this to Cloud Manager Oct 31, 2025

github-project-automation bot moved this to Review in Cloud Manager Oct 31, 2025

hana-akamai added 3 commits October 31, 2025 11:51

Added changeset: Replace Formik with React Hook Form in AddAccessCont…

ba3c638

…rolDrawer

add missed changeset for DatabaseManageNetworkingDrawer

f53b493

rename AddAccessControlDrawer to ManageAccessControlDrawer

e524b90

hana-akamai marked this pull request as ready for review October 31, 2025 19:04

hana-akamai requested a review from a team as a code owner October 31, 2025 19:04

hana-akamai requested a review from smans-akamai October 31, 2025 19:04

hana-akamai commented Oct 31, 2025

View reviewed changes

smans-akamai reviewed Nov 4, 2025

View reviewed changes

feedback and clean up test file

5514086

hana-akamai requested a review from smans-akamai November 4, 2025 22:39

smans-akamai reviewed Nov 5, 2025

View reviewed changes

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx Show resolved Hide resolved

smans-akamai self-requested a review November 5, 2025 20:32

prevent updating if there is an empty input

8a28f37

hana-akamai commented Nov 5, 2025

View reviewed changes

update empty error message

e169465

smans-akamai approved these changes Nov 6, 2025

View reviewed changes

Merge branch 'develop' into UIE-9325-refactor-database-add-access-con…

ff730a7

…trol-drawer

dwiley-akamai approved these changes Nov 6, 2025

View reviewed changes

packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.tsx Outdated Show resolved Hide resolved

github-project-automation bot moved this from Review to Approved in Cloud Manager Nov 6, 2025

consolidate types

7a2d3cf

hana-akamai merged commit fa3304b into linode:develop Nov 6, 2025
34 of 35 checks passed

hana-akamai deleted the UIE-9325-refactor-database-add-access-control-drawer branch November 6, 2025 21:16

github-project-automation bot moved this from Approved to Merged in Cloud Manager Nov 6, 2025

This was referenced Nov 13, 2025

Release v1.155.0 - release → staging #13085

Merged

Release v1.155.0 - staging → master #13101

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [UIE-9325] - Replace Formik with React Hook Form in AddAccessControlDrawer#13044

refactor: [UIE-9325] - Replace Formik with React Hook Form in AddAccessControlDrawer#13044
hana-akamai merged 9 commits intolinode:developfrom
hana-akamai:UIE-9325-refactor-database-add-access-control-drawer

hana-akamai commented Oct 31, 2025 •

edited

Loading

Uh oh!

hana-akamai Oct 31, 2025

Uh oh!

hana-akamai Oct 31, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hana-akamai Nov 5, 2025

Uh oh!

smans-akamai left a comment

Uh oh!

dwiley-akamai left a comment

Uh oh!

Uh oh!

linode-gh-bot commented Nov 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

hana-akamai commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

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

Uh oh!

hana-akamai Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

hana-akamai Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hana-akamai Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

smans-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

linode-gh-bot commented Nov 6, 2025

Cloud Manager UI test results

🔺 5 failing tests on test run #8 ↗︎

Details

Troubleshooting

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hana-akamai commented Oct 31, 2025 •

edited

Loading