Domain management: Register Add/Edit DNS record paths (#97792)

* Domain management: Register 'Add new DNS record' path

* Create custom header

* Add dns record screen, adapt styling

* Support edit DNS record

* Fix constant name typo

* Configure subpage header override

* Update title for Edit DNS context

* Update title style

* Fix typo

* Update tests

* Merge add/edit dns record file into one

client/my-sites/domains/domain-management/dns/add-dns-record.jsx

@@ -42,6 +42,12 @@ class AddDnsRecord extends Component {
 
 	renderHeader() {
 		const { translate, selectedSite, currentRoute, selectedDomainName } = this.props;
+		const {
+			showBreadcrumb = true,
+			titleOverride,
+			subtitleOverride,
+		} = this.props.context?.params || {};
+
 		const recordBeingEdited = this.getRecordBeingEdited();
 		const dnsSupportPageLink = (
 			<ExternalLink
@@ -97,7 +103,14 @@ class AddDnsRecord extends Component {
 			showBackArrow: true,
 		};
 
-		return <DomainHeader items={ items } mobileItem={ mobileItem } />;
+		return (
+			<DomainHeader
+				items={ showBreadcrumb ? items : [] }
+				mobileItem={ showBreadcrumb ? mobileItem : null }
+				titleOverride={ titleOverride }
+				subtitleOverride={ subtitleOverride }
+			/>
+		);
 	}
 
 	goBack = () => {
@@ -107,7 +120,6 @@ class AddDnsRecord extends Component {
 
 	renderMain() {
 		const { domains, dns, selectedDomainName, selectedSite, translate } = this.props;
-
 		const recordBeingEdited = this.getRecordBeingEdited();
 
 		const dnsSupportPageLink = (

client/my-sites/domains/domain-management/subpage-wrapper/headers/custom-header-component-type.ts

@@ -1,4 +1,5 @@
 export type CustomHeaderComponentType = React.ComponentType< {
 	selectedDomainName: string;
 	selectedSiteSlug: string;
+	context?: string;
 } >;

client/my-sites/domains/domain-management/subpage-wrapper/headers/dns-record-header.tsx

@@ -0,0 +1,59 @@
+import { localizeUrl } from '@automattic/i18n-utils';
+import { translate } from 'i18n-calypso';
+import React from 'react';
+import ExternalLink from 'calypso/components/external-link';
+import NavigationHeader from 'calypso/components/navigation-header';
+import { CustomHeaderComponentType } from './custom-header-component-type';
+
+export const addDnsRecordTitle = translate( 'Add a new DNS record' );
+export const editDnsRecordTitle = translate( 'Edit DNS record' );
+export const addDnsRecordsSubtitle = translate(
+	'DNS records change how your domain works. {{a}}Learn more{{/a}}.',
+	{
+		components: {
+			a: (
+				<ExternalLink href={ localizeUrl( 'https://wordpress.com/support/domains/custom-dns/' ) } />
+			),
+		},
+	}
+);
+
+const DnsRecordHeader: CustomHeaderComponentType = ( {
+	selectedDomainName,
+	selectedSiteSlug,
+	context = 'add',
+} ) => {
+	return (
+		<NavigationHeader
+			className="navigation-header__breadcrumb"
+			navigationItems={ [
+				{
+					label: selectedDomainName,
+					href: `/domains/manage/all/overview/${ selectedDomainName }/${ selectedSiteSlug }`,
+				},
+				{
+					label: translate( 'DNS records' ),
+					href: `/domains/manage/all/overview/${ selectedDomainName }/dns/${ selectedSiteSlug }`,
+				},
+				{
+					label:
+						context === 'add'
+							? translate( 'Add a new DNS record' )
+							: translate( 'Edit DNS record' ),
+				},
+			] }
+			title={ translate( 'DNS records' ) }
+			subtitle={ translate( 'DNS records change how your domain works. {a}Learn more{/a}', {
+				components: {
+					a: (
+						<ExternalLink
+							href={ localizeUrl( 'https://wordpress.com/support/domains/custom-dns/' ) }
+						/>
+					),
+				},
+			} ) }
+		/>
+	);
+};
+
+export default DnsRecordHeader;

client/my-sites/domains/domain-management/subpage-wrapper/index.tsx

@@ -11,12 +11,16 @@ type SubpageWrapperProps = {
 };
 
 const SubpageWrapper = ( { children, subpageKey, siteName, domainName }: SubpageWrapperProps ) => {
-	const { CustomHeader, title, subtitle } = getSubpageParams( subpageKey ) || {};
+	const { CustomHeader, title, subtitle, context } = getSubpageParams( subpageKey ) || {};
 
 	if ( CustomHeader ) {
 		return (
 			<div className="subpage-wrapper">
-				<CustomHeader selectedDomainName={ domainName } selectedSiteSlug={ siteName } />
+				<CustomHeader
+					selectedDomainName={ domainName }
+					selectedSiteSlug={ siteName }
+					context={ context }
+				/>
 				<div className="subpage-wrapper__content">{ children }</div>
 			</div>
 		);

client/my-sites/domains/domain-management/subpage-wrapper/style.scss

@@ -7,6 +7,10 @@
 	flex-direction: column;
 	height: 100%;
 
+	.form-text-input-with-affixes .form-text-input {
+		border-radius: 2px 0 0 2px;
+	}
+
 	.subpage-wrapper__header.navigation-header {
 		padding: 24px;
 		border-block-end: 1px solid var(--color-border-secondary);
@@ -47,10 +51,6 @@
 			margin-bottom: 16px;
 		}
 
-		.form-text-input-with-affixes .form-text-input {
-			border-radius: 2px 0 0 2px;
-		}
-
 		.button {
 			padding: 10px 24px;
 			border-radius: 4px;
@@ -123,8 +123,9 @@
     }
 
     .domain__main-placeholder,
-    .dns-records {
-        .navigation-header{
+    .dns-records,
+	.add-dns-record {
+        .navigation-header {
             border-block-end: none !important;
             padding-top: 0 !important;
             padding-bottom: 0;
@@ -134,6 +135,20 @@
             }
         }
     }
+
+	.add-dns-record {
+		grid-gap: 2rem;
+
+		&__main {
+			border: solid 1px $studio-gray-5;
+			padding: 1.5rem;
+		}
+
+		&__main,
+		&__sidebar > div {
+			border-radius: 4px;
+		}
+	}
 }
 
 .is-bulk-all-domains-page .layout__content .main {

client/my-sites/domains/domain-management/subpage-wrapper/subpages.tsx

@@ -1,6 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import AddForwardingEmailHeader from './headers/add-fowarding-email-header';
 import { CustomHeaderComponentType } from './headers/custom-header-component-type';
+import DnsRecordHeader, {
+	addDnsRecordTitle,
+	addDnsRecordsSubtitle,
+	editDnsRecordTitle,
+} from './headers/dns-record-header';
 import DNSRecordsHeader, {
 	dnsRecordsTitle,
 	dnsRecordsSubtitle,
@@ -10,17 +15,20 @@ type SubpageWrapperParamsType = {
 	CustomHeader?: CustomHeaderComponentType;
 	title?: string | React.ReactNode;
 	subtitle?: string | React.ReactNode;
+	context?: string;
 	[ key: string ]: unknown;
 };
 
 // Subpage keys
-export const ADD_FOWARDING_EMAIL = 'add-forwarding-email';
+export const ADD_FORWARDING_EMAIL = 'add-forwarding-email';
 export const DNS_RECORDS = 'dns-records';
+export const ADD_DNS_RECORD = 'add-dns-record';
+export const EDIT_DNS_RECORD = 'edit-dns-record';
 export const EDIT_CONTACT_INFO = 'edit-contact-info';
 
 // Subpage params map
 const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
-	[ ADD_FOWARDING_EMAIL ]: {
+	[ ADD_FORWARDING_EMAIL ]: {
 		CustomHeader: AddForwardingEmailHeader,
 		showFormHeader: true,
 		showPageHeader: false,
@@ -37,6 +45,22 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		title: __( 'Contact information' ),
 		subtitle: __( "Manage your domain's contact details." ),
 	},
+	[ ADD_DNS_RECORD ]: {
+		CustomHeader: DnsRecordHeader,
+		subPageKey: ADD_DNS_RECORD,
+		titleOverride: addDnsRecordTitle,
+		subtitleOverride: addDnsRecordsSubtitle,
+		showBreadcrumb: false,
+		context: 'add',
+	},
+	[ EDIT_DNS_RECORD ]: {
+		CustomHeader: DnsRecordHeader,
+		subPageKey: EDIT_DNS_RECORD,
+		titleOverride: editDnsRecordTitle,
+		subtitleOverride: addDnsRecordsSubtitle,
+		showBreadcrumb: false,
+		context: 'edit',
+	},
 };
 
 export const getSubpageParams = ( subPageKey: string ): SubpageWrapperParamsType => {

client/my-sites/domains/domain-management/subpage-wrapper/test/index.test.tsx

@@ -4,15 +4,20 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import SubpageWrapper from '../index';
-import { ADD_FOWARDING_EMAIL, EDIT_CONTACT_INFO } from '../subpages';
+import {
+	ADD_FORWARDING_EMAIL,
+	EDIT_CONTACT_INFO,
+	ADD_DNS_RECORD,
+	EDIT_DNS_RECORD,
+} from '../subpages';
 
 jest.mock( 'component-file-picker', () => () => <div>File Picker</div> );
 
 describe( 'SubpageWrapper', () => {
 	it( 'should render the children', () => {
 		render(
 			<SubpageWrapper
-				subpageKey={ ADD_FOWARDING_EMAIL }
+				subpageKey={ ADD_FORWARDING_EMAIL }
 				siteName="site.com"
 				domainName="domain.com"
 			>
@@ -26,7 +31,7 @@ describe( 'SubpageWrapper', () => {
 	it( 'should render the children with the subpage header', () => {
 		render(
 			<SubpageWrapper
-				subpageKey={ ADD_FOWARDING_EMAIL }
+				subpageKey={ ADD_FORWARDING_EMAIL }
 				siteName="site.com"
 				domainName="domain.com"
 			>
@@ -66,4 +71,34 @@ describe( 'SubpageWrapper', () => {
 			'Contact information'
 		);
 	} );
+
+	it( 'should render Add DNS subpage breadcrumbs', () => {
+		const { container } = render(
+			<SubpageWrapper subpageKey={ ADD_DNS_RECORD } siteName="site.com" domainName="domain.com">
+				<span>Hello</span>
+			</SubpageWrapper>
+		);
+
+		expect( container.querySelector( '.breadcrumbs li:nth-child(2)' )?.textContent ).toContain(
+			'DNS records'
+		);
+		expect( container.querySelector( '.breadcrumbs li:last-child' )?.textContent ).toContain(
+			'Add a new DNS record'
+		);
+	} );
+
+	it( 'should render Edit DNS subpage breadcrumbs', () => {
+		const { container } = render(
+			<SubpageWrapper subpageKey={ EDIT_DNS_RECORD } siteName="site.com" domainName="domain.com">
+				<span>Hello</span>
+			</SubpageWrapper>
+		);
+
+		expect( container.querySelector( '.breadcrumbs li:nth-child(2)' )?.textContent ).toContain(
+			'DNS records'
+		);
+		expect( container.querySelector( '.breadcrumbs li:last-child' )?.textContent ).toContain(
+			'Edit DNS record'
+		);
+	} );
 } );

client/my-sites/domains/index.js

@@ -17,8 +17,10 @@ import {
 	EMAIL_MANAGEMENT,
 } from './domain-management/domain-overview-pane/constants';
 import {
-	ADD_FOWARDING_EMAIL,
+	ADD_FORWARDING_EMAIL,
 	DNS_RECORDS,
+	ADD_DNS_RECORD,
+	EDIT_DNS_RECORD,
 	EDIT_CONTACT_INFO,
 } from './domain-management/subpage-wrapper/subpages';
 import * as paths from './paths';
@@ -414,7 +416,7 @@ export default function () {
 		paths.domainManagementAllEmailRoot() + '/:domain/forwarding/add/:site',
 		siteSelection,
 		navigation,
-		domainManagementController.domainManagementSubpageParams( ADD_FOWARDING_EMAIL ),
+		domainManagementController.domainManagementSubpageParams( ADD_FORWARDING_EMAIL ),
 		emailController.emailManagementAddEmailForwards,
 		domainManagementController.domainManagementSubpageView,
 		domainManagementController.domainDashboardLayout,
@@ -445,4 +447,28 @@ export default function () {
 		makeLayout,
 		clientRender
 	);
+
+	page(
+		paths.domainManagementOverviewRoot() + '/:domain/dns/add/:site',
+		siteSelection,
+		navigation,
+		domainManagementController.domainManagementSubpageParams( ADD_DNS_RECORD ),
+		domainManagementController.domainManagementDnsAddRecord,
+		domainManagementController.domainManagementSubpageView,
+		domainManagementController.domainDashboardLayout,
+		makeLayout,
+		clientRender
+	);
+
+	page(
+		paths.domainManagementOverviewRoot() + '/:domain/dns/edit/:site',
+		siteSelection,
+		navigation,
+		domainManagementController.domainManagementSubpageParams( EDIT_DNS_RECORD ),
+		domainManagementController.domainManagementDnsEditRecord,
+		domainManagementController.domainManagementSubpageView,
+		domainManagementController.domainDashboardLayout,
+		makeLayout,
+		clientRender
+	);
 }

client/my-sites/domains/paths.js

@@ -207,6 +207,10 @@ export function domainManagementDns( siteName, domainName, relativeTo = null ) {
  * @param {string?} relativeTo
  */
 export function domainManagementDnsAddRecord( siteName, domainName, relativeTo = null ) {
+	if ( isUnderDomainManagementOverview( relativeTo ) ) {
+		return domainManagementOverviewRoot() + '/' + domainName + '/dns/add/' + siteName;
+	}
+
 	return domainManagementEditBase( siteName, domainName, 'add-dns-record', relativeTo );
 }
 
@@ -216,10 +220,18 @@ export function domainManagementDnsEditRecord(
 	relativeTo = null,
 	recordId = null
 ) {
-	let path = domainManagementEditBase( siteName, domainName, 'edit-dns-record', relativeTo );
+	let path;
+
+	if ( isUnderDomainManagementOverview( relativeTo ) ) {
+		path = domainManagementOverviewRoot() + '/' + domainName + '/dns/edit/' + siteName;
+	} else {
+		path = domainManagementEditBase( siteName, domainName, 'edit-dns-record', relativeTo );
+	}
+
 	if ( recordId ) {
 		path += '?recordId=' + encodeURI( recordId );
 	}
+
 	return path;
 }