Add LearnHow link (#2353)

Author: nightnei

src/components/content-tab-settings.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from 'react';
 import { decodePassword } from 'common/lib/passwords';
 import { CopyTextButton } from 'src/components/copy-text-button';
 import DeleteSite from 'src/components/delete-site';
+import { LearnHowLink } from 'src/components/learn-more';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import EditSiteDetails from 'src/modules/site-settings/edit-site-details';
@@ -105,17 +106,7 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 										'You need to trust this certificate to prevent your browser from showing a secure connection warning.'
 									) }
 								</span>{ ' ' }
-								<Button
-									variant="link"
-									onClick={ () => {
-										getIpcApi().openURL(
-											'https://developer.wordpress.com/docs/developer-tools/studio/ssl-in-studio/'
-										);
-									} }
-								>
-									{ __( 'Learn how' ) }
-									<span aria-label={ __( '(opens in a web browser)' ) }>&#8599;</span>
-								</Button>
+								<LearnHowLink docsLinksKey="docsSslInStudio" />
 							</div>
 						) }
 					</SettingsRow>

src/components/learn-more.tsx

@@ -4,13 +4,12 @@ import { getIpcApi } from 'src/lib/get-ipc-api';
 import { getLocalizedLink, type DocsLinkKey } from 'src/lib/get-localized-link';
 import { useI18nLocale } from 'src/stores';
 
-export function LearnMoreLink( {
-	docsLinksKey,
-	className,
-}: {
+interface LinkProps {
 	docsLinksKey: DocsLinkKey;
 	className?: string;
-} ) {
+}
+
+function MoreLink( { docsLinksKey, className, label }: LinkProps & { label: string } ) {
 	const { __ } = useI18n();
 	const locale = useI18nLocale();
 
@@ -24,7 +23,19 @@ export function LearnMoreLink( {
 			} }
 			variant="link"
 		>
-			{ __( 'Learn more' ) }
+			{ label }
 		</Button>
 	);
 }
+
+export function LearnMoreLink( props: LinkProps ) {
+	const { __ } = useI18n();
+
+	return <MoreLink { ...props } label={ __( 'Learn more' ) } />;
+}
+
+export function LearnHowLink( props: LinkProps ) {
+	const { __ } = useI18n();
+
+	return <MoreLink { ...props } label={ __( 'Learn how' ) } />;
+}

src/lib/get-localized-link.ts

@@ -34,6 +34,9 @@ const DOCS_LINKS = {
 	docsXdebug: {
 		en: 'https://developer.wordpress.com/docs/developer-tools/studio/xdebug/',
 	},
+	docsSslInStudio: {
+		en: 'https://developer.wordpress.com/docs/developer-tools/studio/ssl-in-studio/',
+	},
 } satisfies Record< `docs${ string }`, TranslatedLink >;
 
 const BLOG_LINKS = {

src/modules/add-site/components/create-site-form.tsx

@@ -7,11 +7,10 @@ import { FormEvent, useState, useEffect } from 'react';
 import { generateCustomDomainFromSiteName } from 'common/lib/domains';
 import Button from 'src/components/button';
 import FolderIcon from 'src/components/folder-icon';
-import { LearnMoreLink } from 'src/components/learn-more';
+import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more';
 import TextControlComponent from 'src/components/text-control';
 import { WPVersionSelector } from 'src/components/wp-version-selector';
 import { cx } from 'src/lib/cx';
-import { getIpcApi } from 'src/lib/get-ipc-api';
 import { AllowedPHPVersion } from 'src/lib/wordpress-provider/constants';
 import { useRootSelector } from 'src/stores';
 import { useCheckCertificateTrustQuery } from 'src/stores/certificate-trust-api';
@@ -380,17 +379,7 @@ export const CreateSiteForm = ( {
 										{ __(
 											'You need to manually add the Studio root certificate authority to your keychain and trust it to enable HTTPS.'
 										) }{ ' ' }
-										<Button
-											variant="link"
-											onClick={ () => {
-												getIpcApi().openURL(
-													'https://developer.wordpress.com/docs/developer-tools/studio/ssl-in-studio/'
-												);
-											} }
-										>
-											{ __( 'Learn how' ) }
-											<span aria-label={ __( '(opens in a web browser)' ) }>&#8599;</span>
-										</Button>
+										<LearnHowLink docsLinksKey="docsSslInStudio" />
 									</div>
 								) }
 							</div>

src/modules/site-settings/edit-site-details.tsx

@@ -8,7 +8,7 @@ import { generateCustomDomainFromSiteName, getDomainNameValidationError } from '
 import { getWordPressVersionUrl } from 'common/lib/wordpress-version-utils';
 import Button from 'src/components/button';
 import { ErrorInformation } from 'src/components/error-information';
-import { LearnMoreLink } from 'src/components/learn-more';
+import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more';
 import Modal from 'src/components/modal';
 import TextControlComponent from 'src/components/text-control';
 import { Tooltip } from 'src/components/tooltip';
@@ -328,17 +328,7 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 										{ __(
 											'You need to manually add the Studio certificate authority to your keychain and trust it.'
 										) }{ ' ' }
-										<Button
-											variant="link"
-											onClick={ () => {
-												getIpcApi().openURL(
-													'https://developer.wordpress.com/docs/developer-tools/studio/ssl-in-studio/'
-												);
-											} }
-										>
-											{ __( 'Learn how' ) }
-											<span aria-label={ __( '(opens in a web browser)' ) }>&#8599;</span>
-										</Button>
+										<LearnHowLink docsLinksKey="docsSslInStudio" />
 									</div>
 								) }
 							</div>