From c57292a80e552ec3c2d3ba6ea55674e1edcda295 Mon Sep 17 00:00:00 2001
From: Rahat <136263179+rahat2134@users.noreply.github.com>
Date: Wed, 8 May 2024 13:59:29 +0530
Subject: [PATCH] Fix#20230: Disable the discard button until Autosave is in
 progress. (#20231)

* Disable discard button when autosave is in progress for mobile and desktop

* Disable discard button when autosave is in progress for mobile and desktop

* Make the selector more specific

* correct the strings

* remove comment
---
 .../editor-navigation.component.html          |  8 ++++++-
 .../editor-navigation.component.spec.ts       | 22 +++++++++++++++++++
 .../editor-navigation.component.ts            |  9 ++++++++
 ...on-save-and-publish-buttons.component.html |  5 ++---
 ...save-and-publish-buttons.component.spec.ts | 22 +++++++++++++++++++
 ...tion-save-and-publish-buttons.component.ts |  9 ++++++++
 6 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html
index 319991dfc237..7eaee2b1c130 100644
--- a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.html
@@ -119,7 +119,8 @@
         </div>
 
         <ul class="dropdown-menu" aria-labelledby="discardButtonPopup">
-          <div class="e2e-test-mobile-exploration-discard-tab" (click)="discardChanges()">
+<!-- The 'disabled' class is added when autosave is in progress. This disables user interactions with the discard button, preventing changes from being discarded before they are saved. -->
+          <div class="e2e-test-mobile-exploration-discard-tab" (click)="discardChanges()" [class.disabled]="autosaveIsInProgress">
             <i class="fa fa-pen oppia-mobile-exploration-editor-tabs-icon"></i>
             Discard
           </div>
@@ -155,6 +156,11 @@
   .nav > li > a.oppia-editor-navbar-tab-anchor {
     padding: 15px 11px;
   }
+  /* Ensures targeted styling only affects 'Discard Draft' tab. */
+  div.e2e-test-mobile-exploration-discard-tab.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
   .oppia-exploration-open-threads-count {
     background-color: #4078c0;
     border: 1px solid;
diff --git a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.spec.ts b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.spec.ts
index 18b53d7523d4..2fadffdc02b0 100644
--- a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.spec.ts
+++ b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.spec.ts
@@ -315,6 +315,28 @@ describe('Editor Navigation Component', () => {
       expect(component.isEditableOutsideTutorialMode()).toEqual(true);
     });
 
+    it('should update autosaveIsInProgress when autosaveInProgressEventEmitter emits true', () => {
+      spyOn(
+        changeListService.autosaveInProgressEventEmitter,
+        'subscribe'
+      ).and.callFake((callback: (autosaveInProgress: boolean) => void) => {
+        callback(true);
+      });
+      component.ngOnInit();
+      expect(component.autosaveIsInProgress).toBe(true);
+    });
+
+    it('should update autosaveIsInProgress when autosaveInProgressEventEmitter emits false', () => {
+      spyOn(
+        changeListService.autosaveInProgressEventEmitter,
+        'subscribe'
+      ).and.callFake((callback: (autosaveInProgress: boolean) => void) => {
+        callback(false);
+      });
+      component.ngOnInit();
+      expect(component.autosaveIsInProgress).toBe(false);
+    });
+
     it('should call exploration save service to discard changes', () => {
       let explorationSpy = spyOn(explorationSaveService, 'discardChanges');
       component.discardChanges();
diff --git a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.ts b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.ts
index 4cc7b9ba66c0..0fe304cc3617 100644
--- a/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.ts
+++ b/core/templates/pages/exploration-editor-page/editor-navigation/editor-navigation.component.ts
@@ -44,6 +44,7 @@ import {UserExplorationPermissionsService} from '../services/user-exploration-pe
 })
 export class EditorNavigationComponent implements OnInit, OnDestroy {
   directiveSubscriptions = new Subscription();
+  autosaveIsInProgress: boolean = false;
   screenIsLarge: boolean = false;
   isPublishButtonEnabled: boolean = false;
   postTutorialHelpPopoverIsShown: boolean = false;
@@ -280,6 +281,14 @@ export class EditorNavigationComponent implements OnInit, OnDestroy {
       )
     );
 
+    this.directiveSubscriptions.add(
+      this.changeListService.autosaveInProgressEventEmitter.subscribe(
+        (autosaveInProgress: boolean) => {
+          this.autosaveIsInProgress = autosaveInProgress;
+        }
+      )
+    );
+
     this.directiveSubscriptions.add(
       this.internetConnectivityService.onInternetStateChange.subscribe(
         internetAccessible => {
diff --git a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html
index 919f4a91636d..c8b08c60feb7 100644
--- a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html
+++ b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.html
@@ -67,13 +67,12 @@ <h3 class="e2e-test-joyride-title" tabindex="0">Save</h3>
           <loading-dots [hidden]="!loadingDotsAreShown"></loading-dots>
         </span>
       </button>
-
       <button [matMenuTriggerFor]="discardButton" type="button" class="btn btn-light oppia-discard-button e2e-test-save-discard-toggle dropdown-toggle"
-              [disabled]="!connectedToInternet || !getChangeListLength()" aria-label="Discard Draft">
+              [disabled]="!connectedToInternet || !getChangeListLength() || autosaveIsInProgress" aria-label="Discard Draft">
       </button>
 
       <mat-menu #discardButton="matMenu" [ngStyle]="{ width: getChangeListLength() && !isPrivate() ? '150px' : '120px' }">
-        <button mat-menu-item title="Discard all pending changes"><a (click)="discardChanges()" [ngClass]="{'oppia-disabled-link': !connectedToInternet || !getChangeListLength()}" class="dropdown-item nav-item e2e-test-discard-changes">Discard Draft</a></button>
+        <button mat-menu-item title="Discard all pending changes"><a (click)="discardChanges()" [ngClass]="{'oppia-disabled-link': !connectedToInternet || !getChangeListLength() || autosaveIsInProgress}" class="dropdown-item nav-item e2e-test-discard-changes">Discard Draft</a></button>
       </mat-menu>
     </div>
   </li>
diff --git a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.spec.ts b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.spec.ts
index 9af6a0dd3620..df250634b7b7 100644
--- a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.spec.ts
+++ b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.spec.ts
@@ -264,6 +264,28 @@ describe('Exploration save and publish buttons component', () => {
     }
   );
 
+  it('should update autosaveIsInProgress when autosaveInProgressEventEmitter emits true', () => {
+    spyOn(
+      changeListService.autosaveInProgressEventEmitter,
+      'subscribe'
+    ).and.callFake((callback: (autosaveInProgress: boolean) => void) => {
+      callback(true);
+    });
+    component.ngOnInit();
+    expect(component.autosaveIsInProgress).toBe(true);
+  });
+
+  it('should update autosaveIsInProgress when autosaveInProgressEventEmitter emits false', () => {
+    spyOn(
+      changeListService.autosaveInProgressEventEmitter,
+      'subscribe'
+    ).and.callFake((callback: (autosaveInProgress: boolean) => void) => {
+      callback(false);
+    });
+    component.ngOnInit();
+    expect(component.autosaveIsInProgress).toBe(false);
+  });
+
   it(
     'should publish exploration changes when it has no warnings and it is' +
       ' public',
diff --git a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.ts b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.ts
index e0cf8c2295e8..e7e9ab9c6a32 100644
--- a/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.ts
+++ b/core/templates/pages/exploration-editor-page/exploration-save-and-publish-buttons/exploration-save-and-publish-buttons.component.ts
@@ -40,6 +40,7 @@ export class ExplorationSaveAndPublishButtonsComponent
   directiveSubscriptions = new Subscription();
 
   isModalDisplayed: boolean = false;
+  autosaveIsInProgress: boolean;
   saveIsInProcess: boolean;
   publishIsInProcess: boolean;
   loadingDotsAreShown: boolean;
@@ -216,6 +217,14 @@ export class ExplorationSaveAndPublishButtonsComponent
       )
     );
 
+    this.directiveSubscriptions.add(
+      this.changeListService.autosaveInProgressEventEmitter.subscribe(
+        (autosaveInProgress: boolean) => {
+          this.autosaveIsInProgress = autosaveInProgress;
+        }
+      )
+    );
+
     this.directiveSubscriptions.add(
       this.internetConnectivityService.onInternetStateChange.subscribe(
         internetAccessible => {