From c393d88e2c8186c92cd34ddd1b14b8c3e84c1555 Mon Sep 17 00:00:00 2001
From: Rafael Agostini <rafael.agostini@automattic.com>
Date: Fri, 6 Sep 2024 18:44:11 -0500
Subject: [PATCH] Backup: render BackupRealtimeMessage component for displaying
 backup real-time info in restore page (#94218)

* feat: Add BackupRealtimeMessage component for displaying backup realtime information

* Render `BackupRealtimeMessage` on successful backup view

* Add unit tests for BackupRealtimeMessage component

* feat: Update BackupRealtimeMessage component to use baseBackupDate instead of backupDate

The BackupRealtimeMessage component has been updated to use the baseBackupDate prop instead of the backupDate prop. This change ensures that the correct backup date is displayed in the message. Also we are adding `selectedBackupDate` to use instead of `today` date.

* Refactor BackupSuccessful component to pass selectedBackupDate to BackupRealtimeMessage

* Remove redundant message scenario

* Replace `today` with `selectedBackupDate`

* Refactor BackupRealtimeMessage component to receive baseBackupDate as a Moment object

* Refactor BackupRealtimeMessage unit tests to consider latest changes

* Update test descriptions

* Improve unit test description grammar

* Improve showRealTimeMessage validation

* Remove `baseBackupDate` comment

* Refactor `BackupRealtimeMessage` conditions to improve readability and clarity

* Add real-time message on restore page

* Adjust CSS spacing on restore backup to properly fit realtime message

* BackupRealtimeMessage: add `Learn more` link

* BackupRealtimeMessage: update unit tests to consider the new Learn more link

* BackupRealtimeMessage: update unit tests comments

* Restore page: render real-time message under a feature flag
---
 .../status-card/backup-realtime-message.tsx   | 24 ++++++++++-
 .../test/backup-realtime-message.jsx          | 43 +++++++++++++++----
 client/my-sites/backup/rewind-flow/index.tsx  |  1 +
 .../my-sites/backup/rewind-flow/restore.tsx   | 16 +++++++
 client/my-sites/backup/rewind-flow/style.scss |  6 ++-
 5 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/client/components/jetpack/daily-backup-status/status-card/backup-realtime-message.tsx b/client/components/jetpack/daily-backup-status/status-card/backup-realtime-message.tsx
index e433328d3eaa9..bd612c782af40 100644
--- a/client/components/jetpack/daily-backup-status/status-card/backup-realtime-message.tsx
+++ b/client/components/jetpack/daily-backup-status/status-card/backup-realtime-message.tsx
@@ -1,21 +1,31 @@
+import { useCallback } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
 import { FunctionComponent } from 'react';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
 import type { Moment } from 'moment';
 
 type Props = {
 	baseBackupDate: Moment;
 	eventsCount: number;
 	selectedBackupDate: Moment;
+	learnMoreUrl?: string;
 };
 
 export const BackupRealtimeMessage: FunctionComponent< Props > = ( {
 	baseBackupDate,
 	eventsCount,
 	selectedBackupDate,
+	learnMoreUrl,
 } ) => {
 	const translate = useTranslate();
 	const moment = useLocalizedMoment();
+	const dispatch = useDispatch();
+
+	const onLearnMoreClick = useCallback( () => {
+		dispatch( recordTracksEvent( 'calypso_jetpack_backup_realtime_message_learn_more_click' ) );
+	}, [ dispatch ] );
 
 	if (
 		! moment.isMoment( baseBackupDate ) ||
@@ -76,5 +86,17 @@ export const BackupRealtimeMessage: FunctionComponent< Props > = ( {
 		);
 	}
 
-	return <>{ message }</>;
+	return (
+		<p>
+			{ message }
+			{ learnMoreUrl && (
+				<>
+					{ ' ' }
+					<a href={ learnMoreUrl } onClick={ onLearnMoreClick }>
+						{ translate( 'Learn more' ) }
+					</a>
+				</>
+			) }
+		</p>
+	);
 };
diff --git a/client/components/jetpack/daily-backup-status/test/backup-realtime-message.jsx b/client/components/jetpack/daily-backup-status/test/backup-realtime-message.jsx
index b1d1488a38b12..5989d3db6ccb8 100644
--- a/client/components/jetpack/daily-backup-status/test/backup-realtime-message.jsx
+++ b/client/components/jetpack/daily-backup-status/test/backup-realtime-message.jsx
@@ -4,33 +4,40 @@
 import { render } from '@testing-library/react';
 import { useTranslate } from 'i18n-calypso';
 import moment from 'moment';
+import { useDispatch } from 'calypso/state';
 import { BackupRealtimeMessage } from '../status-card/backup-realtime-message';
 
-// Mock the useTranslate function
-jest.mock( 'i18n-calypso' );
+jest.mock( 'i18n-calypso' ); // Mock the useTranslate hook
+jest.mock( 'calypso/state' ); // Mock the useDispatch hook
 
 describe( 'BackupRealtimeMessage', () => {
-	const renderMessage = ( baseBackupDate, eventsCount, selectedDate ) => {
+	const renderMessage = ( baseBackupDate, eventsCount, selectedDate, learnMoreUrl ) => {
 		return render(
 			<BackupRealtimeMessage
 				baseBackupDate={ baseBackupDate }
 				eventsCount={ eventsCount }
 				selectedBackupDate={ selectedDate }
+				learnMoreUrl={ learnMoreUrl } // Optional `Learn more` link
 			/>
 		);
 	};
 
-	const translateMock = jest.fn( ( singular, plural, { count, args } ) => {
-		const translatedText = count === 1 ? singular : plural;
+	const translateMock = jest.fn( ( singular, plural, options ) => {
+		if ( options === undefined ) {
+			return singular;
+		}
+
+		const translatedText = options.count === 1 ? singular : plural;
 		return translatedText
-			.replace( '%(baseBackupDate)s', args.baseBackupDate )
-			.replace( '%(eventsCount)d', args.eventsCount )
-			.replace( '%(daysAgo)d', args.daysAgo );
+			.replace( '%(baseBackupDate)s', options.args.baseBackupDate )
+			.replace( '%(eventsCount)d', options.args.eventsCount )
+			.replace( '%(daysAgo)d', options.args.daysAgo );
 	} );
 
 	beforeEach( () => {
 		jest.clearAllMocks();
 		useTranslate.mockImplementation( () => translateMock );
+		useDispatch.mockImplementation( () => jest.fn() );
 	} );
 
 	test( 'renders the correct message when the base backup date is the same as the selected backup date', () => {
@@ -77,4 +84,24 @@ describe( 'BackupRealtimeMessage', () => {
 			`We are using a full backup from this day (2024-08-26 12:00 PM) with 2 changes you have made since then until now.`
 		);
 	} );
+
+	test( 'renders the correct message and the "Learn more" link when learnMoreUrl is provided', () => {
+		useTranslate.mockImplementation( () => translateMock );
+
+		const selectedDate = moment( '2024-08-26T12:00:00Z' );
+		const baseBackupDate = moment( '2024-08-26T12:00:00Z' );
+		const learnMoreUrl = '/learn-more';
+
+		const { container, getByText } = renderMessage( baseBackupDate, 3, selectedDate, learnMoreUrl );
+
+		// Verify the message content
+		expect( container.textContent ).toContain(
+			'We are using a full backup from this day (2024-08-26 12:00 PM) with 3 changes you have made since then until now.'
+		);
+
+		// Verify the `Learn more` link is rendered
+		const learnMoreLink = getByText( 'Learn more' );
+		expect( learnMoreLink ).toBeInTheDocument();
+		expect( learnMoreLink.getAttribute( 'href' ) ).toBe( learnMoreUrl );
+	} );
 } );
diff --git a/client/my-sites/backup/rewind-flow/index.tsx b/client/my-sites/backup/rewind-flow/index.tsx
index fbf0a39ab60e3..418b3b47a83ec 100644
--- a/client/my-sites/backup/rewind-flow/index.tsx
+++ b/client/my-sites/backup/rewind-flow/index.tsx
@@ -99,6 +99,7 @@ const BackupRewindFlow: FunctionComponent< Props > = ( { rewindId, purpose } ) =
 			if ( purpose === RewindFlowPurpose.RESTORE ) {
 				return (
 					<BackupRestoreFlow
+						backup={ activityQuery.data }
 						backupDisplayDate={ backupDisplayDate }
 						rewindId={ rewindId }
 						siteId={ siteId }
diff --git a/client/my-sites/backup/rewind-flow/restore.tsx b/client/my-sites/backup/rewind-flow/restore.tsx
index d49601e897e49..616270b28ebf9 100644
--- a/client/my-sites/backup/rewind-flow/restore.tsx
+++ b/client/my-sites/backup/rewind-flow/restore.tsx
@@ -10,6 +10,8 @@ import QueryJetpackCredentialsStatus from 'calypso/components/data/query-jetpack
 import QueryRewindBackups from 'calypso/components/data/query-rewind-backups';
 import QueryRewindRestoreStatus from 'calypso/components/data/query-rewind-restore-status';
 import QueryRewindState from 'calypso/components/data/query-rewind-state';
+import { BackupRealtimeMessage } from 'calypso/components/jetpack/daily-backup-status/status-card/backup-realtime-message';
+import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import { Interval, EVERY_FIVE_SECONDS } from 'calypso/lib/interval';
 import { backupPath, settingsPath } from 'calypso/lib/jetpack/paths';
 import { useDispatch, useSelector } from 'calypso/state';
@@ -48,6 +50,7 @@ import type { RestoreProgress } from 'calypso/state/data-layer/wpcom/activity-lo
 import type { RewindState } from 'calypso/state/data-layer/wpcom/sites/rewind/type';
 
 interface Props {
+	backup: any;
 	backupDisplayDate: string;
 	rewindId: string;
 	siteId: number;
@@ -55,6 +58,7 @@ interface Props {
 }
 
 const BackupRestoreFlow: FunctionComponent< Props > = ( {
+	backup,
 	backupDisplayDate,
 	rewindId,
 	siteId,
@@ -62,6 +66,7 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 } ) => {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
+	const moment = useLocalizedMoment();
 
 	const [ rewindConfig, setRewindConfig ] = useState< RewindConfig >( defaultRewindConfig );
 
@@ -223,6 +228,10 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 		( ! isAtomic && areCredentialsInvalid ) ||
 		Object.values( rewindConfig ).every( ( setting ) => ! setting );
 
+	const selectedDate = moment( rewindId, 'X' );
+	const baseBackupDate = backup.baseRewindId ? moment.unix( backup.baseRewindId ) : null;
+	const showRealTimeMessage = backup.baseRewindId && baseBackupDate && backup.rewindStepCount > 0;
+
 	const renderConfirm = () => (
 		<>
 			{ ! isAtomic && <QueryJetpackCredentialsStatus siteId={ siteId } role="main" /> }
@@ -240,6 +249,13 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 					},
 				} ) }
 			</p>
+			{ config.isEnabled( 'jetpack/backup-realtime-message' ) && showRealTimeMessage && (
+				<BackupRealtimeMessage
+					baseBackupDate={ baseBackupDate }
+					eventsCount={ backup.rewindStepCount }
+					selectedBackupDate={ selectedDate }
+				/>
+			) }
 			<h4 className="rewind-flow__cta">{ translate( 'Choose the items you wish to restore:' ) }</h4>
 			<RewindConfigEditor currentConfig={ rewindConfig } onConfigChange={ setRewindConfig } />
 			<RewindFlowNotice
diff --git a/client/my-sites/backup/rewind-flow/style.scss b/client/my-sites/backup/rewind-flow/style.scss
index f148de8887f98..781a91a5cc2fa 100644
--- a/client/my-sites/backup/rewind-flow/style.scss
+++ b/client/my-sites/backup/rewind-flow/style.scss
@@ -32,7 +32,7 @@
 .rewind-flow__title {
 	font-size: 2.25rem;
 	line-height: 36px;
-	padding-bottom: 48px;
+	padding-bottom: 12px;
 	text-align: left;
 
 	&.error {
@@ -203,8 +203,10 @@ a.rewind-flow-notice__title-warning:visited {
 
 .rewind-flow__info,
 .rewind-flow__cta,
-.rewind-flow-notice__title-warning h4 {
+.rewind-flow-notice__title-warning h4,
+.rewind-flow__content p {
 	font-size: 0.875rem;
+	margin-bottom: 1em;
 }
 
 .rewind-flow__cta {