Backups: add "learn about" link to file browser (#94386)

* backups: add 'learn about' link to file browser * backups: add track event for 'learn about browser'
Automattic · Sep 11, 2024 · 9423d48 · 9423d48
1 parent cb372ef
commit 9423d48
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git a/client/my-sites/backup/backup-contents-page/index.tsx b/client/my-sites/backup/backup-contents-page/index.tsx
@@ -1,8 +1,8 @@
 import { Card } from '@automattic/components';
-import { Button } from '@wordpress/components';
+import { Button, ExternalLink } from '@wordpress/components';
 import { arrowLeft, Icon } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
-import { FunctionComponent, useEffect } from 'react';
+import { FunctionComponent, useCallback, useEffect } from 'react';
 import DocumentHead from 'calypso/components/data/document-head';
 import QuerySiteCredentials from 'calypso/components/data/query-site-credentials';
 import ActionButtons from 'calypso/components/jetpack/daily-backup-status/action-buttons';
@@ -41,6 +41,10 @@ const BackupContentsPage: FunctionComponent< OwnProps > = ( { rewindId, siteId }
 		dispatch( recordTracksEvent( 'calypso_jetpack_backup_browser_view' ) );
 	}, [ dispatch ] );
 
+	const onLearnAboutClick = useCallback( () => {
+		dispatch( recordTracksEvent( 'calypso_jetpack_backup_browser_learn_about_click' ) );
+	}, [ dispatch ] );
+
 	return (
 		<>
 			<QuerySiteCredentials siteId={ siteId } />
@@ -58,7 +62,17 @@ const BackupContentsPage: FunctionComponent< OwnProps > = ( { rewindId, siteId }
 					<div className="backup-contents-page__header daily-backup-status status-card">
 						<div className="status-card__message-head">
 							<img src={ cloudIcon } alt="" role="presentation" />
-							<div className="status-card__title">{ translate( 'Backup contents from:' ) }</div>
+							<div className="status-card__header-content">
+								<div className="status-card__title">{ translate( 'Backup contents from:' ) }</div>
+								<div className="status-card__learn-about">
+									<ExternalLink
+										href="https://jetpack.com/blog/introducing-backup-file-browser/"
+										onClick={ onLearnAboutClick }
+									>
+										{ translate( 'Learn about the file browser' ) }
+									</ExternalLink>
+								</div>
+							</div>
 						</div>
 						<div className="status-card__title">{ displayDate }</div>
 						{ browserCheckList.totalItems === 0 && (

diff --git a/client/my-sites/backup/backup-contents-page/style.scss b/client/my-sites/backup/backup-contents-page/style.scss
@@ -21,13 +21,40 @@
 		}
 	}
 
+	.status-card__header-content {
+		align-items: center;
+		display: flex;
+		// Given the layout is mobile-first, reverse the div arrangement by default
+		flex-direction: column-reverse;
+	}
+
+	.status-card__learn-about {
+		font-size: $font-body-small;
+		font-weight: 400;
+		text-decoration-line: underline;
+	}
+
+	.status-card__learn-about a {
+		color: var(--studio-gray-80);
+	}
+
 	// We are using the deprecated mixin to match the when the mobile navigation appears
 	// which is at 660px instead of the 600px break-small breakpoint.
 	@include breakpoint-deprecated( ">660px" ) {
 		&__back-button.components-button.is-link {
 			padding: 0 0 12px 0;
 			margin: 0;
 		}
+
+		.status-card__header-content {
+			// Return to the default div arrangement on the desktop
+			flex-direction: row;
+			flex-grow: 1;
+		}
+
+		.status-card__learn-about {
+			margin-left: auto;
+		}
 	}
 
 	&__header {