From 6190c51a76841949237e406806eb50bc9455af2e Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 23 Oct 2024 21:03:53 -0500 Subject: [PATCH 1/7] Switch useNextBackupSchedule to named export --- client/components/jetpack/backup-schedule-setting/hooks.ts | 4 +--- .../status-card/parts/next-scheduled-backup.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/client/components/jetpack/backup-schedule-setting/hooks.ts b/client/components/jetpack/backup-schedule-setting/hooks.ts index b05fd6194434fc..c02e58894d27fb 100644 --- a/client/components/jetpack/backup-schedule-setting/hooks.ts +++ b/client/components/jetpack/backup-schedule-setting/hooks.ts @@ -7,7 +7,7 @@ import getSiteTimezoneValue from 'calypso/state/selectors/get-site-timezone-valu import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { convertHourToRange } from './utils'; -const useNextBackupSchedule = () => { +export const useNextBackupSchedule = () => { const moment = useLocalizedMoment(); const siteId = useSelector( getSelectedSiteId ) as number; const timezone = useSelector( ( state ) => getSiteTimezoneValue( state, siteId ) ); @@ -60,5 +60,3 @@ const useNextBackupSchedule = () => { timeRange: timeRange, }; }; - -export default useNextBackupSchedule; diff --git a/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx b/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx index 43b062c1e8aaf9..fea21a707d3844 100644 --- a/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx +++ b/client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx @@ -1,7 +1,7 @@ import { LoadingPlaceholder } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { FunctionComponent } from 'react'; -import useNextBackupSchedule from 'calypso/components/jetpack/backup-schedule-setting/hooks'; +import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks'; import { settingsPath } from 'calypso/lib/jetpack/paths'; import { useSelector } from 'calypso/state'; import { getSiteSlug } from 'calypso/state/sites/selectors'; From 6f9f167087f27a9100e212fa5c28bdffc6a98dfb Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 23 Oct 2024 21:14:22 -0500 Subject: [PATCH 2/7] feat: improve next backup time estimation - Replaced the calculation with precise scheduling data from the useNextBackupSchedule hook. - Added logic to round up the hours when there are remaining minutes for more accurate time estimation. --- .../status-card/backup-scheduled.jsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx index 84601c285bf49c..987d9b359e0599 100644 --- a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx +++ b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx @@ -1,6 +1,7 @@ import { isEnabled } from '@automattic/calypso-config'; import { useTranslate } from 'i18n-calypso'; import { useSelector } from 'react-redux'; +import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks'; import { useLocalizedMoment } from 'calypso/components/localized-moment'; import { INDEX_FORMAT } from 'calypso/lib/jetpack/backup-utils'; import { applySiteOffset } from 'calypso/lib/site/timezone'; @@ -35,16 +36,22 @@ const BackupScheduled = ( { lastBackupDate } ) => { const lastBackupTime = lastBackupDate.format( 'LT' ); - // Calculates the remaining hours for the next backup + 3 hours of safety margin - const DAY_HOURS = 24; - const hoursForNextBackup = DAY_HOURS - today.diff( lastBackupDate, 'hours' ) + 3; + const { date: nextBackupDate } = useNextBackupSchedule(); + + // Calculate the time difference for hours and minutes + const hoursForNextBackup = nextBackupDate.diff( today, 'hours' ); + const minutesForNextBackup = nextBackupDate.diff( today, 'minutes' ) % 60; + + // Round up to the next hour if there are remaining minutes + const totalHoursForNextBackup = + minutesForNextBackup > 0 ? hoursForNextBackup + 1 : hoursForNextBackup; const nextBackupHoursText = - hoursForNextBackup <= 1 + totalHoursForNextBackup <= 1 ? translate( 'In the next hour' ) : translate( 'In the next %d hour', 'In the next %d hours', { - args: [ hoursForNextBackup ], - count: hoursForNextBackup, + args: [ totalHoursForNextBackup ], + count: totalHoursForNextBackup, } ); return ( From 66dc8cd3e1db857928fbae98acb91bc550d496a8 Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 23 Oct 2024 21:14:53 -0500 Subject: [PATCH 3/7] refactor: get rid of defaultProps on ActionsButton --- .../daily-backup-status/action-buttons.jsx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/client/components/jetpack/daily-backup-status/action-buttons.jsx b/client/components/jetpack/daily-backup-status/action-buttons.jsx index abdeb652324649..b27457c7670a67 100644 --- a/client/components/jetpack/daily-backup-status/action-buttons.jsx +++ b/client/components/jetpack/daily-backup-status/action-buttons.jsx @@ -104,12 +104,12 @@ const CloneButton = ( { disabled, rewindId, primary, onClickClone } ) => { }; const ActionButtons = ( { - rewindId, + rewindId = null, disabled, - isMultiSite, - hasWarnings, - availableActions, - onClickClone, + isMultiSite = false, + hasWarnings = false, + availableActions = [ 'rewind', 'download' ], + onClickClone = () => {}, } ) => ( <> { availableActions && availableActions.includes( 'download' ) && ( @@ -146,13 +146,4 @@ ActionButtons.propTypes = { onClickClone: PropTypes.func, }; -ActionButtons.defaultProps = { - rewindId: null, - disabled: false, - isMultiSite: false, - hasWarnings: false, - availableActions: [ 'rewind', 'download' ], - onClickClone: () => {}, -}; - export default ActionButtons; From a6ecfb610daa416c5ed70f8b617cd9b2e147ef9e Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 23 Oct 2024 21:25:24 -0500 Subject: [PATCH 4/7] Update schedule backup message in settings page --- .../jetpack/backup-schedule-setting/index.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/client/components/jetpack/backup-schedule-setting/index.tsx b/client/components/jetpack/backup-schedule-setting/index.tsx index 13a5a0b8ff6dfa..0ed226292728b4 100644 --- a/client/components/jetpack/backup-schedule-setting/index.tsx +++ b/client/components/jetpack/backup-schedule-setting/index.tsx @@ -82,12 +82,21 @@ const BackupScheduleSetting: FunctionComponent = () => { const hour = data?.scheduledHour || 0; const range = convertHourToRange( moment, hour, true ); - if ( ! data || ! data.scheduledBy ) { - return `${ translate( 'Default time' ) }. UTC: ${ range }`; - } - return `${ translate( 'Time set by %(scheduledBy)s', { - args: { scheduledBy: data.scheduledBy }, - } ) }. UTC: ${ range }`; + const scheduledBy = + ! data || ! data.scheduledBy + ? translate( 'Currently using default time.' ) + : translate( 'Time set by %(scheduledBy)s.', { + args: { scheduledBy: data.scheduledBy }, + } ); + + const utcInfo = translate( 'UTC (%(timeRange)s) is used as the base timezone.', { + args: { + timeRange: range, + }, + comment: '%(timeRange)s is a time range, such as 10:00-10:59.', + } ); + + return `${ scheduledBy } ${ utcInfo }`; }; return ( From 407490a4dfc8f6e77347e9c7d929ff80a3449f5c Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Wed, 23 Oct 2024 21:29:50 -0500 Subject: [PATCH 5/7] Revert "refactor: get rid of defaultProps on ActionsButton" This reverts commit 66dc8cd3e1db857928fbae98acb91bc550d496a8. --- .../daily-backup-status/action-buttons.jsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/client/components/jetpack/daily-backup-status/action-buttons.jsx b/client/components/jetpack/daily-backup-status/action-buttons.jsx index b27457c7670a67..abdeb652324649 100644 --- a/client/components/jetpack/daily-backup-status/action-buttons.jsx +++ b/client/components/jetpack/daily-backup-status/action-buttons.jsx @@ -104,12 +104,12 @@ const CloneButton = ( { disabled, rewindId, primary, onClickClone } ) => { }; const ActionButtons = ( { - rewindId = null, + rewindId, disabled, - isMultiSite = false, - hasWarnings = false, - availableActions = [ 'rewind', 'download' ], - onClickClone = () => {}, + isMultiSite, + hasWarnings, + availableActions, + onClickClone, } ) => ( <> { availableActions && availableActions.includes( 'download' ) && ( @@ -146,4 +146,13 @@ ActionButtons.propTypes = { onClickClone: PropTypes.func, }; +ActionButtons.defaultProps = { + rewindId: null, + disabled: false, + isMultiSite: false, + hasWarnings: false, + availableActions: [ 'rewind', 'download' ], + onClickClone: () => {}, +}; + export default ActionButtons; From fa4f4d062b7a0a5f54940716b2389e883062961a Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Thu, 24 Oct 2024 10:47:46 -0500 Subject: [PATCH 6/7] Validate if next backup schedule date has loaded --- .../status-card/backup-scheduled.jsx | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx index 987d9b359e0599..af40c95e416ccb 100644 --- a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx +++ b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx @@ -36,23 +36,27 @@ const BackupScheduled = ( { lastBackupDate } ) => { const lastBackupTime = lastBackupDate.format( 'LT' ); - const { date: nextBackupDate } = useNextBackupSchedule(); + const { hasLoaded, date: nextBackupDate } = useNextBackupSchedule(); - // Calculate the time difference for hours and minutes - const hoursForNextBackup = nextBackupDate.diff( today, 'hours' ); - const minutesForNextBackup = nextBackupDate.diff( today, 'minutes' ) % 60; + let nextBackupHoursText = translate( 'In the next hour' ); // Default fallback - // Round up to the next hour if there are remaining minutes - const totalHoursForNextBackup = - minutesForNextBackup > 0 ? hoursForNextBackup + 1 : hoursForNextBackup; + if ( hasLoaded && nextBackupDate ) { + // Calculate the time difference for hours and minutes + const hoursForNextBackup = nextBackupDate.diff( today, 'hours' ); + const minutesForNextBackup = nextBackupDate.diff( today, 'minutes' ) % 60; - const nextBackupHoursText = - totalHoursForNextBackup <= 1 - ? translate( 'In the next hour' ) - : translate( 'In the next %d hour', 'In the next %d hours', { - args: [ totalHoursForNextBackup ], - count: totalHoursForNextBackup, - } ); + // Round up to the next hour if there are remaining minutes + const totalHoursForNextBackup = + minutesForNextBackup > 0 ? hoursForNextBackup + 1 : hoursForNextBackup; + + nextBackupHoursText = + totalHoursForNextBackup <= 1 + ? translate( 'In the next hour' ) + : translate( 'In the next %d hour', 'In the next %d hours', { + args: [ totalHoursForNextBackup ], + count: totalHoursForNextBackup, + } ); + } return ( <> From ceb11de74ae0069ca9e627615160983ae7fc5240 Mon Sep 17 00:00:00 2001 From: Rafael Agostini Date: Thu, 24 Oct 2024 10:58:44 -0500 Subject: [PATCH 7/7] Add loading placeholder for next backup hours text --- .../daily-backup-status/status-card/backup-scheduled.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx index af40c95e416ccb..efb89c4f043a89 100644 --- a/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx +++ b/client/components/jetpack/daily-backup-status/status-card/backup-scheduled.jsx @@ -1,4 +1,5 @@ import { isEnabled } from '@automattic/calypso-config'; +import { LoadingPlaceholder } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { useSelector } from 'react-redux'; import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks'; @@ -38,7 +39,7 @@ const BackupScheduled = ( { lastBackupDate } ) => { const { hasLoaded, date: nextBackupDate } = useNextBackupSchedule(); - let nextBackupHoursText = translate( 'In the next hour' ); // Default fallback + let nextBackupHoursText = null; if ( hasLoaded && nextBackupDate ) { // Calculate the time difference for hours and minutes @@ -66,7 +67,11 @@ const BackupScheduled = ( { lastBackupDate } ) => {
{ translate( 'Backup Scheduled' ) }:
-
{ nextBackupHoursText }
+ { hasLoaded && nextBackupHoursText ? ( +
{ nextBackupHoursText }
+ ) : ( + + ) }
{ translate( 'Last daily backup: {{link}}%(lastBackupDay)s %(lastBackupTime)s{{/link}}', {