UX: Confirm before closing unsaved changes (#68)

javascripts/discourse/components/spreadsheet-editor.hbs

@@ -1,6 +1,6 @@
 <DModal
   @title={{i18n this.modalAttributes.title}}
-  @closeModal={{@closeModal}}
+  @closeModal={{this.interceptCloseModal}}
   class="insert-table-modal"
 >
   <:body>
@@ -24,7 +24,7 @@
       <DButton
         @class="btn-flat"
         @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
-        @action={{@closeModal}}
+        @action={{this.interceptCloseModal}}
       />
     </div>
 

javascripts/discourse/components/spreadsheet-editor.js

@@ -12,10 +12,12 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import I18n from "I18n";
 import { schedule } from "@ember/runloop";
 import { tracked } from "@glimmer/tracking";
-
+import { inject as service } from "@ember/service";
 export default class SpreadsheetEditor extends Component {
+  @service dialog;
   @tracked showEditReason = false;
   @tracked loading = null;
+
   spreadsheet = null;
   defaultColWidth = 150;
   isEditingTable = !!this.args.model.tableTokens;
@@ -62,6 +64,20 @@ export default class SpreadsheetEditor extends Component {
     this.showEditReason = !this.showEditReason;
   }
 
+  @action
+  interceptCloseModal() {
+    if (this._hasChanges()) {
+      this.dialog.yesNoConfirm({
+        message: I18n.t(
+          themePrefix("discourse_table_builder.modal.confirm_close")
+        ),
+        didConfirm: () => this.args.closeModal(),
+      });
+    } else {
+      this.args.closeModal();
+    }
+  }
+
   @action
   insertTable() {
     const updatedHeaders = this.spreadsheet.getHeaders().split(","); // keys
@@ -76,6 +92,27 @@ export default class SpreadsheetEditor extends Component {
     }
   }
 
+  _hasChanges() {
+    if (this.isEditingTable) {
+      const originalSpreadsheetData = this.extractTableContent(
+        tokenRange(this.args.model.tableTokens, "tr_open", "tr_close")
+      );
+      const currentHeaders = this.spreadsheet.getHeaders().split(",");
+      const currentRows = this.spreadsheet.getData();
+      const currentSpreadsheetData = currentHeaders.concat(currentRows.flat());
+
+      return (
+        JSON.stringify(currentSpreadsheetData) !==
+        JSON.stringify(originalSpreadsheetData)
+      );
+    } else {
+      return this.spreadsheet
+        .getData()
+        .flat()
+        .some((element) => element !== "");
+    }
+  }
+
   // Helper Methods:
   loadLibraries() {
     this.loading = true;

locales/en.yml

@@ -14,6 +14,7 @@ en:
         new_row: "at the end of a row to insert a new row."
         new_col: "at the end of a column to insert a new  column."
         options: "Right-click on cells to access more options in a dropdown menu."
+      confirm_close: "Are you sure you want to close the table builder? Any unsaved changes will be lost."
     edit:
       btn_edit: "Edit Table"
       modal: