BackupScheduleSetting: Add tracking events (#95698)

* Add event when user clicks on `Modify`

* Add event when user updates the backup schedule

* Fix missing "key" prop for element in array

client/components/activity-card/toolbar/actions-button.tsx

@@ -51,9 +51,16 @@ const SingleSiteActionsButton: React.FC< SingleSiteOwnProps > = ( {
 
 	if ( useSplitButton ) {
 		const secondaryActions = [
-			needsCredentials && <CredentialsPrompt siteSlug={ siteSlug } />,
-			isSuccessfulBackup && <ViewFilesButton siteSlug={ siteSlug } rewindId={ rewindId } />,
-			<DownloadButton siteId={ siteId } siteSlug={ siteSlug } rewindId={ rewindId } />,
+			needsCredentials && <CredentialsPrompt key="credentials-prompt" siteSlug={ siteSlug } />,
+			isSuccessfulBackup && (
+				<ViewFilesButton key="view-files-button" siteSlug={ siteSlug } rewindId={ rewindId } />
+			),
+			<DownloadButton
+				key="download-button"
+				siteId={ siteId }
+				siteSlug={ siteSlug }
+				rewindId={ rewindId }
+			/>,
 		];
 
 		return (

client/components/jetpack/backup-schedule-setting/index.tsx

@@ -7,6 +7,7 @@ import useScheduledTimeMutation from 'calypso/data/jetpack-backup/use-scheduled-
 import useScheduledTimeQuery from 'calypso/data/jetpack-backup/use-scheduled-time-query';
 import { applySiteOffset } from 'calypso/lib/site/timezone';
 import { useDispatch, useSelector } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import getSiteGmtOffset from 'calypso/state/selectors/get-site-gmt-offset';
 import getSiteTimezoneValue from 'calypso/state/selectors/get-site-timezone-value';
@@ -53,14 +54,22 @@ const BackupScheduleSetting: FunctionComponent = () => {
 	const { isFetching: isScheduledTimeQueryFetching, data } = useScheduledTimeQuery( siteId );
 	const { isPending: isScheduledTimeMutationLoading, mutate: scheduledTimeMutate } =
 		useScheduledTimeMutation( {
-			onSuccess: () => {
+			onSuccess: ( data, variables ) => {
+				const { scheduledHour } = variables;
+
 				queryClient.invalidateQueries( { queryKey: [ 'jetpack-backup-scheduled-time', siteId ] } );
 				dispatch(
 					successNotice( translate( 'Daily backup time successfully changed.' ), {
 						duration: 5000,
 						isPersistent: true,
 					} )
 				);
+
+				dispatch(
+					recordTracksEvent( 'calypso_jetpack_backup_schedule_update', {
+						scheduled_hour: scheduledHour,
+					} )
+				);
 			},
 			onError: () => {
 				dispatch(

client/components/jetpack/daily-backup-status/status-card/parts/next-scheduled-backup.tsx

@@ -3,14 +3,16 @@ import { useTranslate } from 'i18n-calypso';
 import { FunctionComponent } from 'react';
 import { useNextBackupSchedule } from 'calypso/components/jetpack/backup-schedule-setting/hooks';
 import { settingsPath } from 'calypso/lib/jetpack/paths';
-import { useSelector } from 'calypso/state';
+import { useDispatch, useSelector } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { getSiteSlug } from 'calypso/state/sites/selectors';
 
 type Props = {
 	siteId: number;
 };
 
 const NextScheduledBackup: FunctionComponent< Props > = ( { siteId } ) => {
+	const dispatch = useDispatch();
 	const translate = useTranslate();
 	const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) );
 
@@ -28,6 +30,10 @@ const NextScheduledBackup: FunctionComponent< Props > = ( { siteId } ) => {
 		return null;
 	}
 
+	const onModifyClick = () => {
+		dispatch( recordTracksEvent( 'calypso_jetpack_backup_schedule_modify_click' ) );
+	};
+
 	return (
 		<div className="status-card__scheduled-backup">
 			<span className="scheduled-backup__message">
@@ -43,6 +49,7 @@ const NextScheduledBackup: FunctionComponent< Props > = ( { siteId } ) => {
 			<a
 				href={ `${ settingsPath( siteSlug ) }#backup-schedule` }
 				className="scheduled-backup__action"
+				onClick={ onModifyClick }
 			>
 				{ ' ' }
 				{ translate( 'Modify' ) }