Hosting Dashboard: Add domain glue records add/edit screen #105213

m1r0 · 2025-08-14T16:36:15Z

Part of DOTDASH-202

Proposed Changes

This change introduces the glue records add/edit form.
A few things are missing that will be added in the next iteration. Those are tracking, tests, and probably better error handling.

dv9Srg.mov

Why are these changes being made?

This is part of the Hosting Dashboard: Domains project.

Testing Instructions

Go to /v2/domains/[domain]/glue-records and click Add glue record.
You should be redirected to the add screen.
Test the form validation by adding an invalid server name and IP address.
Add a valid glue record. You should be redirected back to the listing screen.
Click on the new record. You should be redirected to the edit screen.
Update the IP address. You should be redirected to the listing screen again.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-08-14T16:36:25Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-152980

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-152980&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-152980&env=a8c-for-agencies

m1r0 · 2025-08-15T15:08:26Z

client/dashboard/domains/overview-glue-records/form.tsx

+// eslint-disable-next-line no-restricted-imports
+import { ValidatedInputControl } from '@automattic/components/src/validated-form-controls/components/input-control';


It looks like the ValidatedInputControl is still in beta, so I'm not sure if this is the right thing to do.

I'm using this because I found no other component that has a validated input that can have a suffix.

@hambai, I saw that you faced the same issue in #105113. Do you think this is an ok approach for now?

Is that what this message was referring to?

If it is something we need for domain input boxes, maybe this is something we could create and contribute upstream 🤔 A place to ask about it might be #atelier-data-views

We could leave the suffix out of the component for now and follow up once we have a done the component work?

I don't think we can import it directly...so I didn't use it in #105191

Thanks, Arthur. I've updated the code to use InputControl while we wait for a better solution.

@mirka, I'm not sure if someone has already contacted you, but do you know if there are plans to release the validated-form-controls package? Our project could use the ValidatedInputControl component.

Thanks for the ping! Those validation components are kind of meant to be a temporary solution, especially now that we're working on a new set of components. Hence the reluctance to make them directly available to consumers.

I also just recently removed them from the wp-calypso repo entirely (#105219), since canonical development has already moved to the Gutenberg repo.

At the moment we're exposing them for external use mainly through the DataForm abstraction in @wordpress/dataviews. Is that an option here?

I see. Not sure how far DataForm wants to support extension points like this in the standard data types.

I can see how it'd be beneficial to support this, so consumers can configure the Edit component.

My main concern is that we shouldn't couple DataForm to a specific component implementation. We want to be future-proof, which means that we can update the underlying components when/if require it. I don't think we should allow passing any prop to the underlying components, for example. This needs to be discussed in a case-by-case basis.

@mirka do you think prefix/suffix for inputs is a common enough concept that we can incorporate it to DataForm and be future-proof?

I'm thinking we could do this via the Edit function of a field. It's now a React component or a string (e.g., text, email, integer). It could also be an object with some props to be passed down to the component. For example:

{ id: 'field', Edit: { type: 'text', suffix: 'suffix-will-go-here' } }

I totally understand how you wouldn't want to couple DataForm to underlying component implementations, so personally I'm not pushing too hard in that direction.

And the validated form components will be available for public use eventually, in one form or another, so in the long run it's not absolutely necessary that DataForm support these customizations in the standard field types.

On the future-proof angle, the prefix/suffix props themselves are pretty stable, and there are no plans to remove them even in the next-gen components. However, there's a subcomponent (InputControlPrefixWrapper) that can be used to control padding in the prefix/suffix slots, and that part is subject to change 😅 Plus those old subcomponents will not work with the next-gen InputControls. So these types of small back compat issues cannot be 100% avoided if we go down this route. If this is the first time this request has come up, it's maybe too early to say that this is a common enough use case.

I'm fine with temporarily exposing any of the validated form components you need as an unlocked API in @automattic/components

@mirka, just to make sure I understand, our option right now is to unlock ValidatedInputControl and wait for the validated form components to become public. Is that correct?

Correct 👍

Got it, thank you!

client/dashboard/domains/overview-glue-records/utils.ts

client/dashboard/app/queries/domain-glue-records.ts

client/dashboard/data/domain-glue-records.ts

client/dashboard/domains/overview-glue-records/add.tsx

client/dashboard/domains/overview-glue-records/edit.tsx

p-jackson · 2025-08-18T08:14:12Z

client/dashboard/domains/overview-glue-records/form.tsx

+// eslint-disable-next-line no-restricted-imports
+import { ValidatedInputControl } from '@automattic/components/src/validated-form-controls/components/input-control';


Is that what this message was referring to?

If it is something we need for domain input boxes, maybe this is something we could create and contribute upstream 🤔 A place to ask about it might be #atelier-data-views

We could leave the suffix out of the component for now and follow up once we have a done the component work?

client/dashboard/domains/overview-glue-records/utils.ts

client/dashboard/domains/overview-glue-records/add.tsx

client/dashboard/domains/overview-glue-records/form.tsx

fushar

Could we rename domains/overview-glue-records to domains/domain-glue-records, to be consistent with the others?

p-jackson

I left some more feedback but after that I think the code is looking good from my point of view.

I think when it comes to that input field which includes the subdomain it would be better to just leave it like Arthur did in the earlier PR. https://app.graphite.dev/github/pr/Automattic/wp-calypso/105213/Hosting-Dashboard-Add-domain-glue-records-add%2Fedit-screen#comment-PRRC_kwDOArzw_86ICrFp

It seems like we should figure it out upstream and then we can bulk-fix-up the Hosting Dashboard input fields that need it.

client/dashboard/domains/overview-glue-records/form.tsx

client/dashboard/app/queries/domain-glue-records.ts

m1r0 · 2025-08-19T16:19:06Z

Could we rename domains/overview-glue-records to domains/domain-glue-records, to be consistent with the others?

Thanks for the review, @fushar. The folder was renamed. 👍

It seems like we should figure it out upstream and then we can bulk-fix-up the Hosting Dashboard input fields that need it.

@p-jackson Makes sense.

I think I've addressed all the feedback. @p-jackson @arthur791004 @fushar, could you please give it another look? 🙏

This allows for adding the needed suffix.

The `ValidatedInputControl` component is still in beta, so we decided not to use it. This means that the input won't show error messages for now.

leonardost

Tested and LGTM! I think the code looks great. I have some nitpicks but none are blockers, I think we can deploy this and iterate.

Maybe we could have a "Cancel" button to go back to the glue records list page?

This list shouldn't be too long (domains who use glue records usually have 2 or 3), so I wonder if we need to show the filtering and display options here.

The suffix part in this input looks weird for long domain names, but I guess we'll change these components soon.

m1r0 · 2025-08-25T11:50:47Z

I think we can deploy this and iterate.

Sounds good. Thanks for the review, Leo!

a8ci18n · 2025-08-25T12:23:06Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/19980504

Some locales (Brazilian Portuguese, Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @m1r0 for including a screenshot in the description! This is really helpful for our translators.

oandregal · 2025-08-25T14:04:41Z

client/dashboard/domains/domain-glue-records/form.tsx

+				isValid: {
+					required: true,
+					custom: ( item ) => {
+						if ( ! isValidNameServerSubdomain( item.nameServer ) ) {
+							return __( 'Please enter a valid name server.' );
+						}
+						return null;
+					},
+				},


Hey, I just want to make sure we are aware that the rules provided here are not doing anything because they're not handled in the custom Edit control.

Edit: see how it's implemented in the input control for DataForm and the custom Edit example in the storybook.

Thanks, André. I'll refactor this part in a future PR.

m1r0 self-assigned this Aug 15, 2025

m1r0 marked this pull request as ready for review August 15, 2025 15:01

m1r0 requested a review from a team as a code owner August 15, 2025 15:01

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 15, 2025

m1r0 requested a review from a team August 15, 2025 15:01

m1r0 commented Aug 15, 2025

View reviewed changes

client/dashboard/domains/overview-glue-records/utils.ts Outdated Show resolved Hide resolved

p-jackson reviewed Aug 18, 2025

View reviewed changes

arthur791004 reviewed Aug 18, 2025

View reviewed changes

client/dashboard/domains/overview-glue-records/add.tsx Outdated Show resolved Hide resolved

client/dashboard/domains/overview-glue-records/form.tsx Outdated Show resolved Hide resolved

fushar reviewed Aug 19, 2025

View reviewed changes

p-jackson reviewed Aug 19, 2025

View reviewed changes

client/dashboard/domains/overview-glue-records/form.tsx Outdated Show resolved Hide resolved

client/dashboard/app/queries/domain-glue-records.ts Outdated Show resolved Hide resolved

m1r0 force-pushed the add/hosting-dashboard-domain-glue-records-form branch from 18b30e3 to 2f59398 Compare August 19, 2025 13:55

m1r0 added 16 commits August 20, 2025 01:43

Add glue records creation form

b71e67a

Fix text case

241d94f

Add glue records edit form

1768cff

Switch to ValidatedInputControl for the name server input

8d32de8

This allows for adding the needed suffix.

Add a variable for the suffix value

2278bed

Fix the placeholder value to make it consistent

74a78ce

Update the client before invalidating the queries

378a238

Replace useRoute with useNavigate

25514be

Switch to the useSuspenseQuery hook

12ccb26

Move the 404 redirect to the router

1755dbb

Move the util helpers

2c77a36

Fix missing useMemo dependency

eafbe78

Cleanup glue record transform duplication

2b0417e

Rename overview-glue-records to domain-glue-records

e3b69bd

Disable the submit button when form is invalid

973aaee

Replace ValidatedInputControl with InputControl

75d9dee

The `ValidatedInputControl` component is still in beta, so we decided not to use it. This means that the input won't show error messages for now.

m1r0 added 2 commits August 20, 2025 01:49

Fix domain router imports

047484e

Improve mutation types

1a57c05

m1r0 force-pushed the add/hosting-dashboard-domain-glue-records-form branch from 76dee31 to 1a57c05 Compare August 19, 2025 22:50

Fix missing useMemo dependencies

b57c72e

leonardost approved these changes Aug 22, 2025

View reviewed changes

m1r0 merged commit 6f3ddf1 into trunk Aug 25, 2025
14 checks passed

m1r0 deleted the add/hosting-dashboard-domain-glue-records-form branch August 25, 2025 11:51

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 25, 2025

oandregal reviewed Aug 25, 2025

View reviewed changes

m1r0 mentioned this pull request Sep 1, 2025

Expose ValidatedInputControl via privateAPIs WordPress/gutenberg#71451

Closed

oandregal mentioned this pull request Sep 4, 2025

DataForm: Add a textarea control available for use with the text field type WordPress/gutenberg#71495

Merged

m1r0 mentioned this pull request Sep 25, 2025

Hosting Dashboard: Fix glue records validation #106050

Merged

9 tasks

		// eslint-disable-next-line no-restricted-imports
		import { ValidatedInputControl } from '@automattic/components/src/validated-form-controls/components/input-control';

Hosting Dashboard: Add domain glue records add/edit screen #105213

Hosting Dashboard: Add domain glue records add/edit screen #105213

Uh oh!

Conversation

m1r0 commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Aug 14, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1r0 Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fushar left a comment

Choose a reason for hiding this comment

Uh oh!

p-jackson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

m1r0 commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

leonardost left a comment

Choose a reason for hiding this comment

Uh oh!

m1r0 commented Aug 25, 2025

Uh oh!

Uh oh!

a8ci18n commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oandregal Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

m1r0 commented Aug 14, 2025 •

edited

Loading

github-actions bot commented Aug 14, 2025 •

edited by matticbot

Loading

m1r0 Aug 15, 2025 •

edited

Loading

m1r0 commented Aug 19, 2025 •

edited

Loading

a8ci18n commented Aug 25, 2025 •

edited

Loading

oandregal Aug 25, 2025 •

edited

Loading