DEV: Use new component based modal API and other modernizations (#60)

javascripts/discourse/components/spreadsheet-editor.hbs

@@ -0,0 +1,74 @@
+<DModal
+  @title={{i18n this.modalAttributes.title}}
+  @closeModal={{@closeModal}}
+  class="insert-table-modal"
+>
+  <:body>
+    {{#if this.isEditingTable}}
+      <div class="edit-reason">
+        <DButton
+          @icon="info-circle"
+          @title={{theme-prefix
+            "discourse_table_builder.edit.modal.trigger_reason"
+          }}
+          @action={{this.showEditReasonField}}
+          @class="btn btn-icon btn-flat no-text btn-edit-reason"
+        />
+        {{#if this.showEditReason}}
+          <TextField
+            @value={{this.editReason}}
+            @placeholderKey={{theme-prefix
+              "discourse_table_builder.edit.modal.reason"
+            }}
+          />
+        {{/if}}
+      </div>
+    {{/if}}
+
+    <ConditionalLoadingSpinner @condition={{this.loading}}>
+      <div
+        {{did-insert this.createSpreadsheet}}
+        tabindex="1"
+        class="jexcel_container"
+      ></div>
+    </ConditionalLoadingSpinner>
+  </:body>
+
+  <:footer>
+    <div class="primary-actions">
+      <DButton
+        @class="btn-insert-table"
+        @label={{this.modalAttributes.insertTable.title}}
+        @icon={{this.modalAttributes.insertTable.icon}}
+        @action={{this.insertTable}}
+      />
+      <DButton
+        @class="btn-flat"
+        @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
+        @action={{@closeModal}}
+      />
+    </div>
+
+    <div class="secondary-actions">
+      <DPopover>
+        <DButton class="trigger" @icon="question" />
+        <ul>
+          <h4>{{theme-i18n "discourse_table_builder.modal.help.title"}}</h4>
+          <li>
+            <kbd>
+              {{theme-i18n "discourse_table_builder.modal.help.enter_key"}}
+            </kbd>
+            {{theme-i18n "discourse_table_builder.modal.help.new_row"}}
+          </li>
+          <li>
+            <kbd>
+              {{theme-i18n "discourse_table_builder.modal.help.tab_key"}}
+            </kbd>
+            {{theme-i18n "discourse_table_builder.modal.help.new_col"}}
+          </li>
+          <li>{{theme-i18n "discourse_table_builder.modal.help.options"}}</li>
+        </ul>
+      </DPopover>
+    </div>
+  </:footer>
+</DModal>

javascripts/discourse/components/spreadsheet-editor.js

@@ -19,7 +19,7 @@ export default class SpreadsheetEditor extends Component {
   @tracked loading = null;
   spreadsheet = null;
   defaultColWidth = 150;
-  isEditingTable = !!this.args.tableTokens;
+  isEditingTable = !!this.args.model.tableTokens;
 
   // Getters:
   get modalAttributes() {
@@ -50,7 +50,7 @@ export default class SpreadsheetEditor extends Component {
     schedule("afterRender", () => {
       this.loadLibraries().then(() => {
         if (this.isEditingTable) {
-          this.buildPopulatedTable(this.args.tableTokens);
+          this.buildPopulatedTable(this.args.model.tableTokens);
         } else {
           this.buildNewTable();
         }
@@ -67,11 +67,6 @@ export default class SpreadsheetEditor extends Component {
     }
   }
 
-  @action
-  cancelTableInsertion() {
-    this.args.triggerModalClose();
-  }
-
   @action
   insertTable() {
     const updatedHeaders = this.spreadsheet.getHeaders().split(","); // keys
@@ -79,8 +74,8 @@ export default class SpreadsheetEditor extends Component {
     const markdownTable = this.buildTableMarkdown(updatedHeaders, updatedData);
 
     if (!this.isEditingTable) {
-      this.args.toolbarEvent.addText(markdownTable);
-      return this.args.triggerModalClose();
+      this.args.model.toolbarEvent.addText(markdownTable);
+      return this.args.closeModal();
     } else {
       return this.updateTable(markdownTable);
     }
@@ -205,14 +200,14 @@ export default class SpreadsheetEditor extends Component {
   }
 
   updateTable(markdownTable) {
-    const tableIndex = this.args.tableIndex;
-    const postId = this.args.model.id;
+    const tableIndex = this.args.model.tableIndex;
+    const postId = this.args.model.post.id;
     const newRaw = markdownTable;
 
     const editReason =
       this.editReason ||
       I18n.t(themePrefix("discourse_table_builder.edit.default_edit_reason"));
-    const raw = this.args.model.raw;
+    const raw = this.args.model.post.raw;
     const newPostRaw = this.buildUpdatedPost(tableIndex, raw, newRaw);
 
     return this.sendTableUpdate(postId, newPostRaw, editReason);
@@ -230,7 +225,7 @@ export default class SpreadsheetEditor extends Component {
     })
       .catch(popupAjaxError)
       .finally(() => {
-        this.args.triggerModalClose();
+        this.args.closeModal();
       });
   }