From 0f08b2e5a2148fb3b2e0252fa83940fc4031b4e9 Mon Sep 17 00:00:00 2001
From: David Calhoun <438664+dcalhoun@users.noreply.github.com>
Date: Mon, 25 Oct 2021 11:05:10 -0500
Subject: [PATCH] Reset autosave timer when interval changes (#35639)

Previously, there was no way to disable the autosave timer created
within `AutosaveMonitor`'s `componentDidMount` hook. This resulted in
unexpected remote drafts to be saved from within the native editor's
Unsupported Block Editor (UBE) after the timer's 60 seconds elapsed.
The UBE loads the web-based editor within a web view and leverages
`autosaveInterval` to prevent autosave creating remote drafts.

This change enables clearing the initial autosave timer by modifying
`interval` via `autosaveInterval`. Now, when the `interval` changes the
previous timer is cleared and a new timer is created with the new
`interval`.
---
 .../src/components/autosave-monitor/index.js       |  5 +++++
 .../src/components/autosave-monitor/test/index.js  | 14 ++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/autosave-monitor/index.js b/packages/editor/src/components/autosave-monitor/index.js
index 2780c40041de63..33637310ab9483 100644
--- a/packages/editor/src/components/autosave-monitor/index.js
+++ b/packages/editor/src/components/autosave-monitor/index.js
@@ -42,6 +42,11 @@ export class AutosaveMonitor extends Component {
 			return;
 		}
 
+		if ( this.props.interval !== prevProps.interval ) {
+			clearTimeout( this.timerId );
+			this.setAutosaveTimer();
+		}
+
 		if ( ! this.props.isDirty ) {
 			this.needsAutosave = false;
 			return;
diff --git a/packages/editor/src/components/autosave-monitor/test/index.js b/packages/editor/src/components/autosave-monitor/test/index.js
index 0c8693fa34f580..6fd95c2c2c67c9 100644
--- a/packages/editor/src/components/autosave-monitor/test/index.js
+++ b/packages/editor/src/components/autosave-monitor/test/index.js
@@ -36,6 +36,12 @@ describe( 'AutosaveMonitor', () => {
 	} );
 
 	describe( '#componentDidUpdate()', () => {
+		it( 'should clear and restart autosave timer when the interval changes', () => {
+			wrapper.setProps( { interval: 999 } );
+			expect( clearTimeout ).toHaveBeenCalled();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+		} );
+
 		it( 'should set needsAutosave=true when editReference changes', () => {
 			expect( wrapper.instance().needsAutosave ).toBe( false );
 			wrapper.setProps( {
@@ -95,9 +101,9 @@ describe( 'AutosaveMonitor', () => {
 				isAutosaveable: true,
 				interval: 5,
 			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 1 );
-			wrapper.instance().autosaveTimerHandler();
 			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+			wrapper.instance().autosaveTimerHandler();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
 			expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
 		} );
 
@@ -106,9 +112,9 @@ describe( 'AutosaveMonitor', () => {
 				isAutosaveable: false,
 				interval: 5,
 			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 1 );
-			wrapper.instance().autosaveTimerHandler();
 			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+			wrapper.instance().autosaveTimerHandler();
+			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
 			expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
 		} );