Forms: replace links with Link component from @wordpress/ui.

projects/packages/forms/changelog/update-forms-external-links-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace link-style `Button` components and bare `<a>` tags with `Link` from `@wordpress/ui` in integrations, the responses modal, and response inspector mailto/tel links. Open Akismet-related URLs in a new tab only in the block editor so the dashboard keeps navigation in the same tab.

projects/packages/forms/routes/responses/integrations-modal.tsx

@@ -214,9 +214,9 @@ const IntegrationCardComponent = ( {
 			<VStack spacing="3">
 				<p style={ { color: '#50575e', margin: 0 } }>{ message }</p>
 				<HStack spacing="2" justify="start">
-					<Button variant="link" href={ settingsUrl } target="_blank" rel="noopener noreferrer">
+					<Link openInNewTab href={ settingsUrl }>
 						{ __( 'View settings', 'jetpack-forms' ) }
-					</Button>
+					</Link>
 					{ id === 'akismet' && (
 						<>
 							<span>|</span>

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/akismet.tsx

@@ -56,13 +56,21 @@ export function buildAkismetCard( {
 							'Akismet is active. There is one step left. Please add your <a>Akismet key</a>.',
 							'jetpack-forms'
 						),
-						{ a: <Link openInNewTab href={ settingsUrl } children={ null } /> }
+						{
+							a: (
+								<Link
+									openInNewTab={ context === 'block-editor' }
+									href={ settingsUrl }
+									children={ null }
+								/>
+							),
+						}
 					) }
 				</p>
 				<Button
 					variant="secondary"
 					href={ settingsUrl }
-					target="_blank"
+					target={ context === 'block-editor' ? '_blank' : '_self' }
 					rel="noopener noreferrer"
 					__next40pxDefaultSize={ true }
 				>
@@ -76,20 +84,18 @@ export function buildAkismetCard( {
 				</p>
 				<HStack spacing="2" justify="start" className="integration-card__links">
 					{ context === 'dashboard' && handlers?.goToSpam ? (
-						<Button variant="link" onClick={ handlers.goToSpam }>
-							{ __( 'View spam', 'jetpack-forms' ) }
-						</Button>
+						<Link onClick={ handlers.goToSpam }>{ __( 'View spam', 'jetpack-forms' ) }</Link>
 					) : (
-						<Button variant="link" href={ spamUrl } target="_blank" rel="noopener noreferrer">
+						<Link openInNewTab={ context === 'block-editor' } href={ spamUrl }>
 							{ __( 'View spam', 'jetpack-forms' ) }
-						</Button>
+						</Link>
 					) }
 					<span>|</span>
 					{ settingsUrl && (
 						<>
-							<Button variant="link" href={ settingsUrl } target="_blank" rel="noopener noreferrer">
+							<Link openInNewTab={ context === 'block-editor' } href={ settingsUrl }>
 								{ __( 'View stats and settings', 'jetpack-forms' ) }
-							</Button>
+							</Link>
 							<span>|</span>
 						</>
 					) }

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/google-drive.tsx

@@ -1,5 +1,6 @@
 import { Button, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { __ } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import GoogleSheetsIcon from '../../../../../icons/google-sheets.tsx';
 import GoogleDriveConnectButton from '../components/google-drive-connect-button.tsx';
 import GoogleDriveDisconnectButton from '../components/google-drive-disconnect-button.tsx';
@@ -60,9 +61,9 @@ export function buildGoogleDriveCard( {
 							{ __( 'View form responses', 'jetpack-forms' ) }
 						</Button>
 					) : (
-						<Button variant="link" href={ responsesUrl } target="_blank" rel="noopener noreferrer">
+						<Link openInNewTab href={ responsesUrl }>
 							{ __( 'View form responses', 'jetpack-forms' ) }
-						</Button>
+						</Link>
 					) }
 					<span>|</span>
 					<GoogleDriveDisconnectButton

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/helpers/jetpack-crm.tsx

@@ -60,14 +60,7 @@ export function buildJetpackCrmCard( {
 								'jetpack-forms'
 							),
 							{
-								a: (
-									<Button
-										variant="link"
-										href={ settingsUrl }
-										target="_blank"
-										rel="noopener noreferrer"
-									/>
-								),
+								a: <Link openInNewTab href={ settingsUrl } />,
 							}
 						) }
 					</p>

projects/packages/forms/src/dashboard/components/inspector/response-fields/field-email/index.tsx

@@ -1,6 +1,7 @@
 import {
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
+import { Link } from '@wordpress/ui';
 import CopyClipboardButton from '../../../copy-clipboard-button';
 import './style.scss';
 
@@ -14,10 +15,10 @@ const FieldEmail = ( { email } ) => {
 			justify="left"
 			spacing="2"
 		>
-			<a href={ `mailto:${ email }` }>
+			<Link href={ `mailto:${ email }` }>
 				{ emailParts[ 0 ] }
 				<wbr />@{ emailParts[ 1 ] }
-			</a>
+			</Link>
 			<CopyClipboardButton text={ email } />
 		</HStack>
 	);

projects/packages/forms/src/dashboard/components/inspector/response-fields/field-phone/index.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { Link } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
@@ -65,7 +66,7 @@ const FieldPhone = ( { phone }: FieldPhoneProps ) => {
 
 	return (
 		<TextWithFlag countryCode={ countryCode }>
-			<a href={ `tel:${ phone }` }>{ formattedNumber }</a>
+			<Link href={ `tel:${ phone }` }>{ formattedNumber }</Link>
 		</TextWithFlag>
 	);
 };

projects/packages/forms/src/dashboard/components/inspector/response-fields/index.tsx

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import {
 	isFieldsCollection,
@@ -56,7 +57,7 @@ const ResponseFieldsIterator = ( {
 		}
 
 		if ( isLikelyPhoneNumber( value ) ) {
-			return <a href={ `tel:${ value }` }>{ String( value ) }</a>;
+			return <Link href={ `tel:${ value }` }>{ String( value ) }</Link>;
 		}
 
 		return value as import('react').ReactNode;