Domain management: Handle domain options links for different usage co…

…ntext (#98438) * Introduce data table context param * Provide context for different DomainsTable usage * Update method to generate path based on context * Add missing isHostingOverview param to cover site context * Update emailManagementEdit method to support different context
Automattic · Jan 17, 2025 · 4633da2 · 4633da2
1 parent 298d556
commit 4633da2
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 16 deletions.
diff --git a/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx b/client/my-sites/domains/domain-management/list/bulk-all-domains.tsx
@@ -427,6 +427,7 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) {
 				{ ! isLoading && ! isDomainsEmpty && <GoogleDomainOwnerBanner /> }
 				{ ! isDomainsEmpty ? (
 					<DomainsTable
+						context="domains"
 						isLoadingDomains={ isLoading }
 						domains={ domains }
 						isAllSitesView

diff --git a/client/sites/overview/components/active-domains-card.tsx b/client/sites/overview/components/active-domains-card.tsx
@@ -71,6 +71,7 @@ const ActiveDomainsCard: FC = () => {
 
 			<DomainsTable
 				className="hosting-overview__domains-table"
+				context="site"
 				hideCheckbox
 				isLoadingDomains={ isLoading }
 				domains={ data?.domains }

diff --git a/packages/domains-table/src/domains-table/domains-table-email-indicator.tsx b/packages/domains-table/src/domains-table/domains-table-email-indicator.tsx
@@ -4,16 +4,19 @@ import { useI18n } from '@wordpress/react-i18n';
 import { type as domainTypes } from '../utils/constants';
 import { getDomainType } from '../utils/get-domain-type';
 import { emailManagementEdit } from '../utils/paths';
+import type { DomainsTableContext } from './domains-table';
 import type { MouseEvent } from 'react';
 
 interface DomainsTableEmailIndicatorProps {
 	domain: PartialDomainData;
 	siteSlug: string;
+	context?: DomainsTableContext;
 }
 
 export const DomainsTableEmailIndicator = ( {
 	domain,
 	siteSlug,
+	context,
 }: DomainsTableEmailIndicatorProps ) => {
 	const { __, _n } = useI18n();
 
@@ -64,7 +67,7 @@ export const DomainsTableEmailIndicator = ( {
 		return (
 			<a
 				className="domains-table-view-email-button"
-				href={ emailManagementEdit( siteSlug, domain.domain ) }
+				href={ emailManagementEdit( siteSlug, domain.domain, context ) }
 				onClick={ ( e: MouseEvent ) => e.stopPropagation() }
 			>
 				{ message }
@@ -79,7 +82,7 @@ export const DomainsTableEmailIndicator = ( {
 	return (
 		<a
 			className="domains-table-add-email-button"
-			href={ emailManagementEdit( siteSlug, domain.domain ) }
+			href={ emailManagementEdit( siteSlug, domain.domain, context ) }
 			onClick={ ( e: MouseEvent ) => e.stopPropagation() }
 		>
 			{ __( '+ Add email' ) }

diff --git a/packages/domains-table/src/domains-table/domains-table-row-actions.tsx b/packages/domains-table/src/domains-table/domains-table-row-actions.tsx
@@ -18,7 +18,7 @@ import {
 } from '../utils/paths';
 import { shouldUpgradeToMakeDomainPrimary } from '../utils/should-upgrade-to-make-domain-primary';
 import { ResponseDomain } from '../utils/types';
-import { useDomainsTable } from './domains-table';
+import { useDomainsTable, DomainsTableContext } from './domains-table';
 
 export type DomainAction = 'change-site-address' | 'manage-dns-settings' | 'set-primary-address';
 
@@ -36,6 +36,7 @@ interface DomainsTableRowActionsProps {
 	isSiteOnFreePlan: boolean;
 	isSimpleSite: boolean;
 	isHostingOverview?: boolean;
+	context?: DomainsTableContext;
 }
 
 export const DomainsTableRowActions = ( {
@@ -46,6 +47,7 @@ export const DomainsTableRowActions = ( {
 	isSiteOnFreePlan,
 	isSimpleSite,
 	isHostingOverview,
+	context,
 }: DomainsTableRowActionsProps ) => {
 	const {
 		onDomainAction,
@@ -86,7 +88,13 @@ export const DomainsTableRowActions = ( {
 			canViewDetails && (
 				<MenuItemLink
 					key="actionDetails"
-					href={ domainManagementLink( domain, siteSlug, isAllSitesView ) }
+					href={ domainManagementLink(
+						domain,
+						siteSlug,
+						isAllSitesView,
+						undefined,
+						isHostingOverview
+					) }
 				>
 					{ domain.type === domainTypes.TRANSFER ? __( 'View transfer' ) : __( 'View settings' ) }
 				</MenuItemLink>
@@ -95,15 +103,15 @@ export const DomainsTableRowActions = ( {
 				<MenuItemLink
 					key="manageDNS"
 					onClick={ () => onDomainAction?.( 'manage-dns-settings', domain ) }
-					href={ domainManagementDNS( siteSlug, domain.name, isHostingOverview ) }
+					href={ domainManagementDNS( siteSlug, domain.name, context ) }
 				>
 					{ __( 'Manage DNS' ) }
 				</MenuItemLink>
 			),
 			canManageContactInfo && (
 				<MenuItemLink
 					key="manageContactInfo"
-					href={ domainManagementEditContactInfo( siteSlug, domain.name ) }
+					href={ domainManagementEditContactInfo( siteSlug, domain.name, null, context ) }
 				>
 					{ __( 'Manage contact information' ) }
 				</MenuItemLink>

diff --git a/packages/domains-table/src/domains-table/domains-table-row.tsx b/packages/domains-table/src/domains-table/domains-table-row.tsx
@@ -51,6 +51,7 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 		hasWpcomManagedSslCert,
 	} = useDomainRow( domain );
 	const {
+		context,
 		canSelectAnyDomains,
 		domainsTableColumns,
 		isCompact,
@@ -223,7 +224,11 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 				if ( column.name === 'email' ) {
 					return (
 						<td key={ domain.domain + column.name }>
-							<DomainsTableEmailIndicator domain={ domain } siteSlug={ siteSlug } />
+							<DomainsTableEmailIndicator
+								domain={ domain }
+								siteSlug={ siteSlug }
+								context={ context }
+							/>
 						</td>
 					);
 				}
@@ -259,6 +264,7 @@ export function DomainsTableRow( { domain }: DomainsTableRowProps ) {
 									isSiteOnFreePlan={ site?.plan?.is_free ?? true }
 									isSimpleSite={ ! site?.is_wpcom_atomic }
 									isHostingOverview={ isHostingOverview }
+									context={ context }
 								/>
 							) }
 						</td>

diff --git a/packages/domains-table/src/domains-table/domains-table.tsx b/packages/domains-table/src/domains-table/domains-table.tsx
@@ -72,8 +72,10 @@ interface BaseDomainsTableProps {
 	selectedDomainName?: string;
 	selectedFeature?: string;
 	isHostingOverview?: boolean;
+	context?: DomainsTableContext;
 }
 
+export type DomainsTableContext = 'site' | 'domains' | string;
 export type DomainsTableProps =
 	| ( BaseDomainsTableProps & { isAllSitesView: true } )
 	| ( BaseDomainsTableProps & { isAllSitesView: false; siteSlug: string | null } );
@@ -130,6 +132,7 @@ type Value = {
 	currentlySelectedDomainName?: string;
 	selectedFeature?: string;
 	isHostingOverview?: boolean;
+	context?: DomainsTableContext;
 };
 
 export const DomainsTableStateContext = createContext< Value | undefined >( undefined );
@@ -155,6 +158,7 @@ export const useGenerateDomainsTableState = ( props: DomainsTableProps ) => {
 		selectedDomainName,
 		selectedFeature,
 		isHostingOverview = false,
+		context,
 	} = props;
 
 	const [ { sortKey, sortDirection }, setSort ] = useState< {
@@ -458,6 +462,7 @@ export const useGenerateDomainsTableState = ( props: DomainsTableProps ) => {
 		currentlySelectedDomainName: selectedDomainName,
 		selectedFeature,
 		isHostingOverview,
+		context,
 	};
 
 	return value;

diff --git a/packages/domains-table/src/utils/paths.ts b/packages/domains-table/src/utils/paths.ts
@@ -2,6 +2,7 @@ import config from '@automattic/calypso-config';
 import { addQueryArgs } from '@wordpress/url';
 import { stringify } from 'qs';
 import { ResponseDomain } from './types';
+import type { DomainsTableContext } from '../domains-table/domains-table';
 
 export const emailManagementAllSitesPrefix = '/email/all';
 
@@ -116,9 +117,17 @@ export function domainManagementAllRoot() {
 export function domainManagementEditContactInfo(
 	siteName: string,
 	domainName: string,
-	relativeTo: string | null = null
+	relativeTo: string | null = null,
+	context?: DomainsTableContext
 ) {
-	return domainManagementEditBase( siteName, domainName, 'edit-contact-info', relativeTo );
+	switch ( context ) {
+		case 'site':
+			return `/overview/site-domain/contact-info/edit/${ domainName }/${ siteName }`;
+		case 'domains':
+			return `${ domainManagementAllRoot() }/contact-info/edit/${ domainName }/${ siteName }`;
+		default:
+			return domainManagementEditBase( siteName, domainName, 'edit-contact-info', relativeTo );
+	}
 }
 
 export function domainMappingSetup(
@@ -193,22 +202,36 @@ export function isUnderEmailManagementAll( path: string ) {
 export function domainManagementDNS(
 	siteName: string,
 	domainName: string,
-	isHostingOverview?: boolean
+	context?: DomainsTableContext
 ) {
-	if ( isHostingOverview ) {
-		return `/overview/site-domain/domain/${ domainName }/dns/${ siteName }`;
+	switch ( context ) {
+		case 'site':
+			return `/overview/site-domain/domain/${ domainName }/dns/${ siteName }`;
+		case 'domains':
+			return `${ domainManagementAllRoot() }/overview/${ domainName }/dns/${ siteName }`;
+		default:
+			return domainManagementEditBase( siteName, domainName, 'dns' );
 	}
-
-	return domainManagementEditBase( siteName, domainName, 'dns' );
 }
 
-export function emailManagementEdit( siteSlug: string, domainName: string ) {
+export function emailManagementEdit(
+	siteSlug: string,
+	domainName: string,
+	context?: DomainsTableContext
+) {
 	// Encodes only real domain names and not parameter placeholders
 	if ( domainName && ! String( domainName ).startsWith( ':' ) ) {
 		// Encodes domain names so addresses with slashes in the path (e.g. used in site redirects) don't break routing.
 		// Note they are encoded twice since page.js decodes the path by default.
 		domainName = encodeURIComponent( encodeURIComponent( domainName ) );
 	}
 
-	return '/email/' + domainName + '/manage/' + siteSlug;
+	switch ( context ) {
+		case 'site':
+			return `/overview/site-domain/email/${ domainName }/${ siteSlug }`;
+		case 'domains':
+			return `${ domainManagementAllRoot() }/email/${ domainName }/${ siteSlug }`;
+		default:
+			return '/email/' + domainName + '/manage/' + siteSlug;
+	}
 }