Open deployment mode tooltip support link in help center modal (#103771)

Co-authored-by: Claude <noreply@anthropic.com>

Author: escapemanuele

client/components/support-info/index.jsx

@@ -1,10 +1,15 @@
 import { ExternalLink } from '@automattic/components';
+import { HelpCenter } from '@automattic/data-stores';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { dispatch as dataStoreDispatch } from '@wordpress/data';
 import { useTranslate } from 'i18n-calypso';
 import PropTypes from 'prop-types';
 import InfoPopover from 'calypso/components/info-popover';
 
 import './style.scss';
 
+const HELP_CENTER_STORE = HelpCenter.register();
+
 function makePrivacyLink( privacyLink = true, link = '' ) {
 	if ( privacyLink ) {
 		if ( typeof privacyLink === 'string' ) {
@@ -24,10 +29,23 @@ function SupportInfo( {
 	position = 'left',
 	privacyLink,
 	popoverClassName = '',
+	supportPostId,
+	supportBlogId,
 } ) {
 	const translate = useTranslate();
 	const filteredPrivacyLink = makePrivacyLink( privacyLink, link );
 
+	const handleLinkClick = ( event, url ) => {
+		if ( supportPostId ) {
+			event.preventDefault();
+			dataStoreDispatch( HELP_CENTER_STORE ).setShowSupportDoc( url, supportPostId, supportBlogId );
+		}
+		// If no supportPostId, let the link open normally in a new tab
+	};
+
+	const LinkComponent = supportPostId ? 'a' : ExternalLink;
+	const linkUrl = supportPostId ? localizeUrl( link ) : link;
+
 	return (
 		<div className="support-info">
 			<InfoPopover
@@ -40,9 +58,13 @@ function SupportInfo( {
 				{ link || filteredPrivacyLink ? ' ' : null }
 				{ link && (
 					<span className="support-info__learn-more">
-						<ExternalLink href={ link } target="_blank">
+						<LinkComponent
+							href={ linkUrl }
+							target={ supportPostId ? undefined : '_blank' }
+							onClick={ ( event ) => handleLinkClick( event, linkUrl ) }
+						>
 							{ translate( 'Learn more' ) }
-						</ExternalLink>
+						</LinkComponent>
 					</span>
 				) }
 				{ filteredPrivacyLink && (
@@ -63,6 +85,9 @@ SupportInfo.propTypes = {
 	link: PropTypes.string,
 	position: PropTypes.string,
 	privacyLink: PropTypes.oneOfType( [ PropTypes.string, PropTypes.bool ] ),
+	popoverClassName: PropTypes.string,
+	supportPostId: PropTypes.number,
+	supportBlogId: PropTypes.number,
 };
 
 export default SupportInfo;

client/sites/deployments/components/deployment-style/index.tsx

@@ -62,6 +62,8 @@ export const DeploymentStyle = ( {
 					popoverClassName="github-deployments-deployments-style-popover"
 					// @todo Move to contextLinks
 					link="https://developer.wordpress.com/docs/developer-tools/github-deployments/github-deployments-workflow-recipes/"
+					supportPostId={ 99879 }
+					supportBlogId={ 33534099 }
 					privacyLink={ false }
 				>
 					{ supportMessage }