Merge add/edit dns record file into one

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/subpages.tsx

@@ -1,23 +1,21 @@
 import { __ } from '@wordpress/i18n';
-import AddDnsRecordHeader, {
-	addDnsRecordTitle,
-	addDnsRecordsSubtitle,
-} from './headers/add-dns-record-header';
 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,
 } from './headers/dns-records-header';
-import EditDnsRecordHeader, {
-	editDnsRecordTitle,
-	editDnsRecordsSubtitle,
-} from './headers/edit-dns-record-header';
 
 type SubpageWrapperParamsType = {
 	CustomHeader?: CustomHeaderComponentType;
 	title?: string | React.ReactNode;
 	subtitle?: string | React.ReactNode;
+	context?: string;
 	[ key: string ]: unknown;
 };
 
@@ -48,18 +46,20 @@ const SUBPAGE_TO_PARAMS_MAP: Record< string, SubpageWrapperParamsType > = {
 		subtitle: __( "Manage your domain's contact details." ),
 	},
 	[ ADD_DNS_RECORD ]: {
-		CustomHeader: AddDnsRecordHeader,
+		CustomHeader: DnsRecordHeader,
 		subPageKey: ADD_DNS_RECORD,
 		titleOverride: addDnsRecordTitle,
 		subtitleOverride: addDnsRecordsSubtitle,
 		showBreadcrumb: false,
+		context: 'add',
 	},
 	[ EDIT_DNS_RECORD ]: {
-		CustomHeader: EditDnsRecordHeader,
+		CustomHeader: DnsRecordHeader,
 		subPageKey: EDIT_DNS_RECORD,
 		titleOverride: editDnsRecordTitle,
-		subtitleOverride: editDnsRecordsSubtitle,
+		subtitleOverride: addDnsRecordsSubtitle,
 		showBreadcrumb: false,
+		context: 'edit',
 	},
 };