Add glue records edit form

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

@@ -1,9 +1,10 @@
 import { queryOptions, mutationOptions } from '@tanstack/react-query';
 import {
 	DomainGlueRecord,
+	fetchDomainGlueRecords,
 	createDomainGlueRecord,
+	updateDomainGlueRecord,
 	deleteDomainGlueRecord,
-	fetchDomainGlueRecords,
 } from '../../data/domain-glue-records';
 import { queryClient } from '../query-client';
 
@@ -13,17 +14,25 @@ export const domainGlueRecordsQuery = ( domainName: string ) =>
 		queryFn: () => fetchDomainGlueRecords( domainName ),
 	} );
 
-export const domainGlueRecordDeleteMutation = ( domainName: string ) =>
+export const domainGlueRecordCreateMutation = ( domainName: string ) =>
 	mutationOptions( {
-		mutationFn: ( nameServer: string ) => deleteDomainGlueRecord( domainName, nameServer ),
+		mutationFn: ( glueRecord: DomainGlueRecord ) => createDomainGlueRecord( glueRecord ),
 		onSuccess: () => {
 			queryClient.invalidateQueries( domainGlueRecordsQuery( domainName ) );
 		},
 	} );
 
-export const domainGlueRecordCreateMutation = ( domainName: string ) =>
+export const domainGlueRecordUpdateMutation = ( domainName: string ) =>
 	mutationOptions( {
-		mutationFn: ( glueRecord: DomainGlueRecord ) => createDomainGlueRecord( glueRecord ),
+		mutationFn: ( glueRecord: DomainGlueRecord ) => updateDomainGlueRecord( glueRecord ),
+		onSuccess: () => {
+			queryClient.invalidateQueries( domainGlueRecordsQuery( domainName ) );
+		},
+	} );
+
+export const domainGlueRecordDeleteMutation = ( domainName: string ) =>
+	mutationOptions( {
+		mutationFn: ( nameServer: string ) => deleteDomainGlueRecord( domainName, nameServer ),
 		onSuccess: () => {
 			queryClient.invalidateQueries( domainGlueRecordsQuery( domainName ) );
 		},

client/dashboard/app/router/domains.ts

@@ -190,7 +190,7 @@ export const domainGlueRecordsEditRoute = createRoute( {
 	getParentRoute: () => domainRoute,
 	path: 'glue-records/edit/$nameServer',
 } ).lazy( () =>
-	import( '../../sites/domains/placeholder' ).then( ( d ) =>
+	import( '../../domains/overview-glue-records/edit' ).then( ( d ) =>
 		createLazyRoute( 'domain-glue-records-edit' )( {
 			component: d.default,
 		} )

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

@@ -12,28 +12,42 @@ export function fetchDomainGlueRecords( domainName: string ): Promise< DomainGlu
 	} );
 }
 
-export function deleteDomainGlueRecord( domainName: string, nameServer: string ): Promise< void > {
+export function createDomainGlueRecord( glueRecord: DomainGlueRecord ): Promise< void > {
 	return wpcom.req.post(
 		{
-			path: `/domains/glue-records/${ domainName }`,
+			path: '/domains/glue-records',
 			apiNamespace: 'wpcom/v2',
-			method: 'DELETE',
 		},
 		{
-			name_server: nameServer,
+			name_server: glueRecord.nameserver,
+			ip_addresses: glueRecord.ip_addresses,
 		}
 	);
 }
 
-export function createDomainGlueRecord( glueRecord: DomainGlueRecord ): Promise< void > {
-	return wpcom.req.post(
+export function updateDomainGlueRecord( glueRecord: DomainGlueRecord ): Promise< void > {
+	return wpcom.req.put(
 		{
 			path: '/domains/glue-records',
 			apiNamespace: 'wpcom/v2',
+			method: 'PUT',
 		},
 		{
-			name_server: glueRecord.nameserver.toLowerCase(),
+			name_server: glueRecord.nameserver,
 			ip_addresses: glueRecord.ip_addresses,
 		}
 	);
 }
+
+export function deleteDomainGlueRecord( domainName: string, nameServer: string ): Promise< void > {
+	return wpcom.req.post(
+		{
+			path: `/domains/glue-records/${ domainName }`,
+			apiNamespace: 'wpcom/v2',
+			method: 'DELETE',
+		},
+		{
+			name_server: nameServer,
+		}
+	);
+}

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

@@ -24,7 +24,7 @@ export default function AddDomainGlueRecords() {
 
 		createMutation.mutate( glueRecord, {
 			onSuccess: () => {
-				createSuccessNotice( __( 'Domain glue record created successfully.' ), {
+				createSuccessNotice( __( 'Glue record created successfully.' ), {
 					type: 'snackbar',
 				} );
 				router.navigate( {
@@ -33,7 +33,7 @@ export default function AddDomainGlueRecords() {
 				} );
 			},
 			onError: () => {
-				createErrorNotice( __( 'Failed to create domain glue record.' ), { type: 'snackbar' } );
+				createErrorNotice( __( 'Failed to create glue record.' ), { type: 'snackbar' } );
 			},
 		} );
 	};

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

@@ -0,0 +1,73 @@
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { notFound, useRouter } from '@tanstack/react-router';
+import { useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import {
+	domainGlueRecordsQuery,
+	domainGlueRecordUpdateMutation,
+} from '../../app/queries/domain-glue-records';
+import { domainRoute, domainGlueRecordsRoute } from '../../app/router';
+import { PageHeader } from '../../components/page-header';
+import PageLayout from '../../components/page-layout';
+import DomainGlueRecordsForm from './form';
+import type { FormData } from './form';
+
+export default function EditDomainGlueRecords() {
+	const router = useRouter();
+	const { domainName, nameServer } = domainRoute.useParams();
+	const { data: glueRecordsData } = useQuery( domainGlueRecordsQuery( domainName ) );
+	const updateMutation = useMutation( domainGlueRecordUpdateMutation( domainName ) );
+	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
+
+	const existingGlueRecord = useMemo( () => {
+		if ( ! glueRecordsData || ! nameServer ) {
+			throw notFound();
+		}
+		const existingGlueRecord = glueRecordsData.find( ( f ) => f.nameserver === nameServer );
+		if ( ! existingGlueRecord ) {
+			throw notFound();
+		}
+		return existingGlueRecord;
+	}, [ glueRecordsData, nameServer ] );
+
+	const handleSubmit = ( formData: FormData ) => {
+		if ( ! existingGlueRecord ) {
+			return;
+		}
+
+		const updatedGlueRecord = {
+			nameserver: formData.nameServer,
+			ip_addresses: [ formData.ipAddress ],
+		};
+
+		updateMutation.mutate( updatedGlueRecord, {
+			onSuccess: () => {
+				createSuccessNotice( __( 'Glue record updated successfully.' ), {
+					type: 'snackbar',
+				} );
+				router.navigate( {
+					to: domainGlueRecordsRoute.fullPath,
+					params: { domainName },
+				} );
+			},
+			onError: () => {
+				createErrorNotice( __( 'Failed to update glue record.' ), { type: 'snackbar' } );
+			},
+		} );
+	};
+
+	return (
+		<PageLayout size="small" header={ <PageHeader title={ __( 'Edit glue record' ) } /> }>
+			<DomainGlueRecordsForm
+				domainName={ domainName }
+				initialData={ existingGlueRecord }
+				onSubmit={ handleSubmit }
+				isSubmitting={ updateMutation.isPending }
+				isEdit
+				submitButtonText={ __( 'Update glue record' ) }
+			/>
+		</PageLayout>
+	);
+}

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

@@ -22,6 +22,7 @@ interface DomainGlueRecordsFormProps {
 	initialData?: DomainGlueRecord | null;
 	onSubmit: ( data: FormData ) => void;
 	isSubmitting: boolean;
+	isEdit?: boolean;
 	submitButtonText: string;
 }
 
@@ -30,6 +31,7 @@ export default function DomainGlueRecordsForm( {
 	initialData,
 	onSubmit,
 	isSubmitting,
+	isEdit = false,
 	submitButtonText,
 }: DomainGlueRecordsFormProps ) {
 	const [ formData, setFormData ] = useState< FormData >( () => {
@@ -52,6 +54,7 @@ export default function DomainGlueRecordsForm( {
 				label: __( 'Name Server' ),
 				placeholder: 'ns1.' + domainName,
 				type: 'text' as const,
+				readOnly: isEdit,
 				isValid: {
 					custom: ( item ) => {
 						if ( ! isValidNameServer( item.nameServer ) ) {