VideoPress: add a "Learn more" support link to the admin page

projects/js-packages/shared-extension-utils/changelog/fix-support-link-color

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Support links that open in the Help Center now use the standard link color.

projects/js-packages/shared-extension-utils/src/components/wpcom-support-link.jsx

@@ -25,7 +25,7 @@ export const WpcomSupportLink = forwardRef(
 
 		if ( setShowSupportDoc ) {
 			return (
-				<a
+				<Link
 					href={ supportLink }
 					// eslint-disable-next-line react/jsx-no-bind
 					onClick={ event => {
@@ -37,7 +37,7 @@ export const WpcomSupportLink = forwardRef(
 					ref={ ref }
 				>
 					{ children }
-				</a>
+				</Link>
 			);
 		}
 		return (

projects/packages/videopress/changelog/add-videopress-admin-learn-more-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add a "Learn more" support link to the admin page.

projects/packages/videopress/src/client/admin/components/admin-page/index.tsx

@@ -31,6 +31,7 @@ import { usePermission } from '../../hooks/use-permission';
 import { usePlan } from '../../hooks/use-plan';
 import useSelectVideoFiles from '../../hooks/use-select-video-files';
 import { NeedUserConnectionGlobalNotice } from '../global-notice';
+import PageSubTitle from '../page-subtitle';
 import PricingSection from '../pricing-section';
 import { ConnectSiteSettingsSection as SettingsSection } from '../site-settings-section';
 import { ConnectVideoStorageMeter } from '../video-storage-meter';
@@ -74,7 +75,7 @@ const Admin = () => {
 	return (
 		<AdminPage
 			title={ 'VideoPress' /** "VideoPress" is a product name, do not translate. */ }
-			subTitle={ __( 'Professional quality, ad-free video hosting.', 'jetpack-videopress-pkg' ) }
+			subTitle={ <PageSubTitle /> }
 		>
 			<div
 				className={ clsx( styles[ 'files-overlay' ], {

projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx

@@ -36,6 +36,7 @@ import { usePermission } from '../../hooks/use-permission';
 import useUnloadPrevent from '../../hooks/use-unload-prevent';
 import { useVideosQuery } from '../../hooks/use-videos';
 import Input from '../input';
+import PageSubTitle from '../page-subtitle';
 import VideoDetails from '../video-details';
 import VideoDetailsActions from '../video-details-actions';
 import VideoThumbnail from '../video-thumbnail';
@@ -261,7 +262,7 @@ const EditVideoDetails = () => {
 
 			<AdminPage
 				breadcrumbs={ breadcrumbs }
-				subTitle={ __( 'Professional quality, ad-free video hosting.', 'jetpack-videopress-pkg' ) }
+				subTitle={ <PageSubTitle /> }
 				actions={ headerActions }
 			>
 				<Container horizontalSpacing={ 0 }>

projects/packages/videopress/src/client/admin/components/page-subtitle/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import SupportLink from '../../../components/support-link';
+
+/**
+ * Subtitle for the VideoPress admin page header, shared by the dashboard and
+ * the video details screen.
+ *
+ * @return The subtitle element.
+ */
+export default function PageSubTitle() {
+	return createInterpolateElement(
+		__(
+			'Professional quality, ad-free video hosting. <link>Learn more</link>.',
+			'jetpack-videopress-pkg'
+		),
+		{ link: <SupportLink /> }
+	);
+}

projects/packages/videopress/src/client/components/support-link/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
+import { WpcomSupportLink } from '@automattic/jetpack-shared-extension-utils/components/wpcom-support-link';
+import { Link } from '@wordpress/ui';
+/**
+ * Types
+ */
+import type { ReactNode } from 'react';
+
+type Props = {
+	children?: ReactNode;
+};
+
+/**
+ * Links to the VideoPress support doc. WordPress.com sites open it in the Help
+ * Center; everywhere else it opens the Jetpack doc in a new tab. The link text
+ * comes from the caller so it stays inside the translated sentence.
+ *
+ * @param props          - Component props.
+ * @param props.children - Link text.
+ * @return The link element.
+ */
+export default function SupportLink( { children }: Props ) {
+	const isWpcom = isWpcomPlatformSite();
+	const supportUrl = isWpcom
+		? 'https://wordpress.com/support/videopress/'
+		: 'https://jetpack.com/support/jetpack-videopress/';
+
+	return isWpcom ? (
+		<WpcomSupportLink supportLink={ supportUrl } supportPostId={ 4458 }>
+			{ children }
+		</WpcomSupportLink>
+	) : (
+		<Link openInNewTab href={ supportUrl }>
+			{ children }
+		</Link>
+	);
+}

projects/packages/videopress/src/client/components/support-link/test/support-link.test.tsx

@@ -0,0 +1,33 @@
+import { isWpcomPlatformSite } from '@automattic/jetpack-script-data';
+import { render, screen } from '@testing-library/react';
+import SupportLink from '..';
+
+jest.mock( '@automattic/jetpack-script-data', () => ( {
+	isWpcomPlatformSite: jest.fn(),
+} ) );
+
+const mockedIsWpcomPlatformSite = isWpcomPlatformSite as jest.Mock;
+
+describe( 'SupportLink', () => {
+	it( 'points WordPress.com sites at the Help Center doc', () => {
+		mockedIsWpcomPlatformSite.mockReturnValue( true );
+
+		render( <SupportLink>Learn more</SupportLink> );
+
+		expect( screen.getByRole( 'link', { name: /Learn more/ } ) ).toHaveAttribute(
+			'href',
+			'https://wordpress.com/support/videopress/'
+		);
+	} );
+
+	it( 'points self-hosted sites at the Jetpack doc', () => {
+		mockedIsWpcomPlatformSite.mockReturnValue( false );
+
+		render( <SupportLink>Learn more</SupportLink> );
+
+		expect( screen.getByRole( 'link', { name: /Learn more/ } ) ).toHaveAttribute(
+			'href',
+			'https://jetpack.com/support/jetpack-videopress/'
+		);
+	} );
+} );

projects/packages/videopress/src/dashboard/components/connection-gate/connect-screen.tsx

@@ -1,6 +1,7 @@
 import AdminPage from '@automattic/jetpack-components/admin-page';
 import { __ } from '@wordpress/i18n';
 import { Button, Stack, Text } from '@wordpress/ui';
+import PageSubTitle from '../page-subtitle';
 import './style.scss';
 
 type Props = {
@@ -26,10 +27,7 @@ export default function ConnectScreen( { onConnect, isConnecting }: Props ) {
 	return (
 		<AdminPage
 			title={ 'VideoPress' /* product name; not translated */ }
-			subTitle={ __(
-				'Host, manage, customize, and track your videos — all in one place.',
-				'jetpack-videopress-pkg'
-			) }
+			subTitle={ <PageSubTitle /> }
 		>
 			<Stack direction="column" gap="md" className="vp-connection-gate">
 				<Text variant="heading-2xl">

projects/packages/videopress/src/dashboard/components/connection-gate/pricing-upsell.tsx

@@ -11,6 +11,7 @@ import useConnection from '@automattic/jetpack-connection/use-connection';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
 import { VIDEOPRESS_ADMIN_PAGE } from '../../utils/constants';
+import PageSubTitle from '../page-subtitle';
 import './style.scss';
 
 /**
@@ -62,10 +63,7 @@ export default function PricingUpsell() {
 	return (
 		<AdminPage
 			title={ 'VideoPress' /* product name; not translated */ }
-			subTitle={ __(
-				'Host, manage, customize, and track your videos — all in one place.',
-				'jetpack-videopress-pkg'
-			) }
+			subTitle={ <PageSubTitle /> }
 		>
 			<div className="vp-connection-gate__upsell">
 				<PricingTable title={ title } items={ pricingItems }>

projects/packages/videopress/src/dashboard/components/dashboard-layout/index.tsx

@@ -6,11 +6,11 @@ import useConnectionErrorNotice, {
 	ConnectionError,
 } from '@automattic/jetpack-connection/use-connection-error-notice';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import { useNavigate } from '@wordpress/route';
 import { Stack, Tabs } from '@wordpress/ui';
 import DashboardTabs, { TAB_PATHS, type DashboardTab } from '../dashboard-tabs';
 import OnboardingModal from '../onboarding-modal';
+import PageSubTitle from '../page-subtitle';
 import './style.scss';
 import type { ReactNode } from 'react';
 
@@ -56,10 +56,7 @@ export default function DashboardLayout( { activeTab, children, actions, hideFoo
 	return (
 		<AdminPage
 			title={ 'VideoPress' /* product name; not translated */ }
-			subTitle={ __(
-				'Host, manage, customize, and track your videos — all in one place.',
-				'jetpack-videopress-pkg'
-			) }
+			subTitle={ <PageSubTitle /> }
 			actions={ actions }
 			showFooter={ ! hideFooter }
 		>

projects/packages/videopress/src/dashboard/components/page-subtitle/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import SupportLink from '../../../client/components/support-link';
+
+/**
+ * Subtitle for the VideoPress admin page header, shared by the dashboard chrome
+ * and the pre-connection screens so every state of the page reads the same.
+ *
+ * @return The subtitle element.
+ */
+export default function PageSubTitle() {
+	return createInterpolateElement(
+		__(
+			'Host, manage, customize, and track your videos — all in one place. <link>Learn more</link>.',
+			'jetpack-videopress-pkg'
+		),
+		{ link: <SupportLink /> }
+	);
+}

projects/plugins/jetpack/changelog/add-videopress-admin-learn-more-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+VideoPress: Add a "Learn more" support link to the admin page.

projects/plugins/videopress/changelog/add-videopress-admin-learn-more-link

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add a "Learn more" support link to the admin page.