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

javascripts/discourse/api-initializers/table-builder.js

@@ -1,16 +1,20 @@
 import { apiInitializer } from "discourse/lib/api";
+import SpreadsheetEditor from "../components/spreadsheet-editor";
 import { action } from "@ember/object";
-import showModal from "discourse/lib/show-modal";
+import { inject as service } from "@ember/service";
 
 export default apiInitializer("0.11.1", (api) => {
   api.modifyClass("controller:composer", {
     pluginId: "discourse-table-builder",
+    modal: service(),
 
     @action
     showTableBuilder() {
-      showModal("insert-table-modal").setProperties({
+      this.modal.show(SpreadsheetEditor, {
-        toolbarEvent: this.toolbarEvent,
+        model: {
-        tableTokens: null,
+          toolbarEvent: this.toolbarEvent,
+          tableTokens: null,
+        },
       });
     },
   });

javascripts/discourse/api-initializers/table-editor.js

@@ -1,5 +1,5 @@
 import { apiInitializer } from "discourse/lib/api";
-import showModal from "discourse/lib/show-modal";
+import SpreadsheetEditor from "../components/spreadsheet-editor";
 import { schedule } from "@ember/runloop";
 import I18n from "I18n";
 import { iconNode } from "discourse-common/lib/icon-library";
@@ -10,6 +10,8 @@ import { parseAsync } from "discourse/lib/text";
 import { tokenRange } from "../../discourse-table-builder/lib/utilities";
 
 export default apiInitializer("0.11.1", (api) => {
+  const modal = api.container.lookup("service:modal");
+
   function createButton() {
     const openPopupBtn = document.createElement("button");
     openPopupBtn.classList.add(
@@ -39,11 +41,12 @@ export default apiInitializer("0.11.1", (api) => {
           const allTables = tokenRange(tokens, "table_open", "table_close");
           const tableTokens = allTables[tableIndex];
 
-          showModal("insert-table-modal", {
+          modal.show(SpreadsheetEditor, {
-            model: post,
+            model: {
-          }).setProperties({
+              post,
-            tableIndex,
+              tableIndex,
-            tableTokens,
+              tableTokens,
+            },
           });
         })
       )

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);
+      this.args.model.toolbarEvent.addText(markdownTable);
-      return this.args.triggerModalClose();
+      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 tableIndex = this.args.model.tableIndex;
-    const postId = this.args.model.id;
+    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();
       });
   }
 

javascripts/discourse/controllers/insert-table-modal.js

@@ -1,9 +0,0 @@
-import Controller from "@ember/controller";
-import { action } from "@ember/object";
-
-export default class extends Controller {
-  @action
-  closeEditModal() {
-    this.send("closeModal");
-  }
-}

javascripts/discourse/templates/components/spreadsheet-editor.hbs

@@ -1,68 +0,0 @@
-<DModalBody @title={{this.modalAttributes.title}} @class="insert-table-modal">
-  {{#if this.isEditingTable}}
-    <div class="edit-reason">
-      <DButton
-        @icon="info-circle"
-        @title={{theme-prefix
-          "discourse_table_builder.edit.modal.trigger_reason"
-        }}
-        @action={{action "showEditReasonField"}}
-        @class="btn btn-icon btn-flat no-text btn-edit-reason"
-      />
-      {{#if 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>
-</DModalBody>
-
-<div class="modal-footer">
-  <div class="primary-actions">
-    <DButton
-      @class="btn-insert-table"
-      @label={{this.modalAttributes.insertTable.title}}
-      @icon={{this.modalAttributes.insertTable.icon}}
-      @action={{action "insertTable"}}
-    />
-    <DButton
-      @class="btn-flat"
-      @label={{theme-prefix "discourse_table_builder.edit.modal.cancel"}}
-      @action={{action "cancelTableInsertion"}}
-    />
-  </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>
-</div>

javascripts/discourse/templates/modal/insert-table-modal.hbs

@@ -1,7 +0,0 @@
-<SpreadsheetEditor
-  @model={{this.model}}
-  @tableTokens={{this.tableTokens}}
-  @tableIndex={{this.tableIndex}}
-  @triggerModalClose={{action "closeEditModal"}}
-  @toolbarEvent={{this.toolbarEvent}}
-/>

scss/modal/insert-table-modal.scss

@@ -18,7 +18,7 @@
   }
 }
 
-.insert-table-modal-modal {
+.insert-table-modal {
   display: flex;
   flex-direction: column;
   align-items: flex-start;