Hosting Dashboard: Fix glue records validation (#106050)

* Fix glue records validation message by switching to `ValidatedInputControl`

* Fix suffix looking bad for long domain names

* Fix type issues

* Update and use the `SuffixInputControl` component for the input

* Fix type

Author: m1r0

client/dashboard/components/input-control/suffix-input-control.tsx

@@ -1,17 +1,31 @@
 import {
-	__experimentalInputControl as InputControl,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	privateApis,
 } from '@wordpress/components';
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+import { Text } from '../../components/text';
 import type React from 'react';
 
+const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/components'
+);
+const { ValidatedInputControl } = unlock( privateApis );
+
 export default function SuffixInputControl( {
 	suffix,
 	...props
-}: React.ComponentProps< typeof InputControl > ) {
+}: React.ComponentProps< typeof ValidatedInputControl > ) {
 	return (
-		<InputControl
+		<ValidatedInputControl
 			{ ...props }
-			suffix={ <InputControlSuffixWrapper variant="control">{ suffix }</InputControlSuffixWrapper> }
+			suffix={
+				<InputControlSuffixWrapper>
+					<Text variant="muted" style={ { whiteSpace: 'nowrap' } }>
+						{ suffix }
+					</Text>
+				</InputControlSuffixWrapper>
+			}
 		/>
 	);
 }

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

@@ -1,16 +1,9 @@
-import {
-	Card,
-	CardBody,
-	__experimentalVStack as VStack,
-	__experimentalInputControl as InputControl,
-	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
-	Button,
-} from '@wordpress/components';
+import { Card, CardBody, __experimentalVStack as VStack, Button } from '@wordpress/components';
 import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ButtonStack } from '../../components/button-stack';
-import { Text } from '../../components/text';
+import SuffixInputControl from '../../components/input-control/suffix-input-control';
 import { isValidIpAddress, isValidNameServerSubdomain } from '../../utils/domain';
 import type { DomainGlueRecord } from '@automattic/api-core';
 import type { Field } from '@wordpress/dataviews';
@@ -61,22 +54,21 @@ export default function DomainGlueRecordsForm( {
 					const { id, getValue } = field;
 					const suffix = `.${ domainName }`;
 					const value = getValue( { item: data } ).replace( suffix, '' );
+					const validationMessage = field.isValid?.custom?.( data, field );
 
 					return (
-						// TODO: Show the error via Data Form when the ValidatedInputControl component is ready.
-						<InputControl
-							__next40pxDefaultSize
+						<SuffixInputControl
+							required={ !! field.isValid?.required }
 							label={ field.label }
 							placeholder={ field.placeholder }
 							value={ value }
-							onChange={ ( value ) => {
+							onChange={ ( value: string ) => {
 								return onChange( { [ id ]: value + suffix } );
 							} }
-							suffix={
-								<InputControlSuffixWrapper>
-									<Text variant="muted">{ suffix }</Text>
-								</InputControlSuffixWrapper>
+							customValidity={
+								validationMessage ? { type: 'invalid', message: validationMessage } : undefined
 							}
+							suffix={ suffix }
 						/>
 					);
 				},

client/dashboard/sites/site-change-address-modal/content.tsx

@@ -45,9 +45,8 @@ const SubdomainInputControlEdit = < Item, >( {
 		<SuffixInputControl
 			label={ field.label }
 			value={ getValue( { item: data } ) }
-			__next40pxDefaultSize
-			suffix={ <Text variant="muted">{ DOMAIN_SUFFIX }</Text> }
-			onChange={ ( newValue ) => {
+			suffix={ DOMAIN_SUFFIX }
+			onChange={ ( newValue: string ) => {
 				onChange( { [ id ]: newValue } as Partial< Item > );
 			} }
 		/>