REFACTOR: uses more modern patterns to prevent issues (#27)

assets/javascripts/admin/components/channel-details.js.es6

@@ -2,12 +2,9 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Ember.Component.extend({
   classNames: ["channel-details"],
-  actions: {
-    refresh: function() {
-      this.sendAction("refresh");
-    },
 
-    delete(channel) {
+  actions: {
+    deleteChannel(channel) {
       bootbox.confirm(
         I18n.t("chat_integration.channel_delete_confirm"),
         I18n.t("no_value"),
@@ -16,33 +13,15 @@ export default Ember.Component.extend({
           if (result) {
             channel
               .destroyRecord()
-              .then(() => {
-                this.send("refresh");
-              })
+              .then(() => this.refresh())
               .catch(popupAjaxError);
           }
         }
       );
     },
 
-    edit(channel) {
-      this.sendAction("edit", channel);
-    },
-
-    test(channel) {
-      this.sendAction("test", channel);
-    },
-
-    createRule(channel) {
-      this.sendAction("createRule", channel);
-    },
-
     editRule(rule) {
-      this.sendAction("editRule", rule, this.get("channel"));
-    },
-
-    showError(channel) {
-      this.sendAction("showError", channel);
+      this.editRuleWithChannel(rule, this.get("channel"));
     }
   }
 });

assets/javascripts/admin/components/rule-row.js.es6

@@ -20,21 +20,11 @@ export default Ember.Component.extend({
   },
 
   actions: {
-    edit() {
-      this.sendAction("edit", this.get("rule"));
-    },
-
     delete(rule) {
       rule
         .destroyRecord()
-        .then(() => {
-          this.send("refresh");
-        })
+        .then(() => this.refresh())
         .catch(popupAjaxError);
-    },
-
-    refresh() {
-      this.sendAction("refresh");
     }
   }
 });

assets/javascripts/admin/controllers/admin-plugins-chat-provider.js.es6

@@ -30,7 +30,7 @@ export default Ember.Controller.extend({
       };
 
       showModal("admin-plugins-chat-edit-channel", {
-        model: model,
+        model,
         admin: true
       });
     },
@@ -39,12 +39,12 @@ export default Ember.Controller.extend({
       this.set("modalShowing", true);
 
       const model = {
-        channel: channel,
+        channel,
         provider: this.get("model.provider")
       };
 
       showModal("admin-plugins-chat-edit-channel", {
-        model: model,
+        model,
         admin: true
       });
     },
@@ -52,7 +52,7 @@ export default Ember.Controller.extend({
     testChannel(channel) {
       this.set("modalShowing", true);
       showModal("admin-plugins-chat-test", {
-        model: { channel: channel },
+        model: { channel },
         admin: true
       });
     },
@@ -62,24 +62,25 @@ export default Ember.Controller.extend({
 
       const model = {
         rule: this.store.createRecord("rule", { channel_id: channel.id }),
-        channel: channel,
+        channel,
         provider: this.get("model.provider"),
         groups: this.get("model.groups")
       };
 
-      showModal("admin-plugins-chat-edit-rule", { model: model, admin: true });
+      showModal("admin-plugins-chat-edit-rule", { model, admin: true });
     },
-    editRule(rule, channel) {
+
+    editRuleWithChannel(rule, channel) {
       this.set("modalShowing", true);
 
       const model = {
-        rule: rule,
-        channel: channel,
+        rule,
+        channel,
         provider: this.get("model.provider"),
         groups: this.get("model.groups")
       };
 
-      showModal("admin-plugins-chat-edit-rule", { model: model, admin: true });
+      showModal("admin-plugins-chat-edit-rule", { model, admin: true });
     },
 
     showError(channel) {

assets/javascripts/admin/controllers/modals/admin-plugins-chat-edit-rule.js.es6

@@ -25,18 +25,12 @@ export default Ember.Controller.extend(ModalFunctionality, {
   },
 
   actions: {
-    cancel() {
-      this.send("closeModal");
-    },
-
-    save() {
+    save(rule) {
       if (this.get("saveDisabled")) return;
 
-      this.get("model.rule")
+      rule
         .save()
-        .then(() => {
-          this.send("closeModal");
-        })
+        .then(() => this.send("closeModal"))
         .catch(popupAjaxError);
     }
   }

assets/javascripts/admin/routes/admin-plugins-chat-provider.js.es6

@@ -41,7 +41,7 @@ export default Discourse.Route.extend({
       return true; // Continue bubbling up, so the modal actually closes
     },
 
-    refresh() {
+    refreshProvider() {
       this.refresh();
     }
   }

assets/javascripts/admin/templates/modal/admin-plugins-chat-edit-rule.hbs

@@ -97,14 +97,15 @@
 
 <div class="modal-footer">
   {{d-button id="save-rule"
-      class='btn-primary btn-large'
-      action="save"
-      title="chat_integration.edit_rule_modal.save"
-      label="chat_integration.edit_rule_modal.save"
-      disabled=saveDisabled}}
+    class='btn-primary btn-large'
+    action="save"
+    actionParam=model.rule
+    title="chat_integration.edit_rule_modal.save"
+    label="chat_integration.edit_rule_modal.save"
+    disabled=saveDisabled}}
 
   {{d-button class="btn-large"
-      action="cancel"
+      action=(route-action "closeModal")
       title="chat_integration.edit_rule_modal.cancel"
       label="chat_integration.edit_rule_modal.cancel"}}
 </div>

assets/javascripts/admin/templates/modal/admin-plugins-chat-test.hbs

@@ -15,16 +15,18 @@
 
 <div class="modal-footer">
   {{#conditional-loading-spinner condition=loading}}
-    {{d-button id="send-test"
-        class='btn-primary btn-large'
-        action="send"
-        title="chat_integration.test_modal.send"
-        label="chat_integration.test_modal.send"
-        disabled=sendDisabled}}
+    {{d-button
+      id="send-test"
+      class='btn-primary btn-large'
+      action=(action "send")
+      title="chat_integration.test_modal.send"
+      label="chat_integration.test_modal.send"
+      disabled=sendDisabled}}
 
-    {{d-button class="btn-large"
-        action="closeModal"
-        title="chat_integration.test_modal.close"
-        label="chat_integration.test_modal.close"}}
+    {{d-button
+      class="btn-large"
+      action=(route-action "closeModal")
+      title="chat_integration.test_modal.close"
+      label="chat_integration.test_modal.close"}}
   {{/conditional-loading-spinner}}
 </div>

assets/javascripts/discourse/templates/admin/plugins-chat-provider.hbs

@@ -7,24 +7,24 @@
 
 {{#each model.channels as |channel|}}
   {{channel-details
-      channel=channel
-      provider=model.provider
-      store=store
-      refresh='refresh'
-      edit='editChannel'
-      test='testChannel'
-      createRule='createRule'
-      editRule='editRule'
-      showError='showError'}}
+    channel=channel
+    provider=model.provider
+    refresh=(route-action "refreshProvider")
+    editChannel=(action "editChannel")
+    test=(action "testChannel")
+    createRule=(action "createRule")
+    editRuleWithChannel=(action "editRuleWithChannel")
+    showError=(action "showError")}}
 {{/each}}
 
 <div class="table-footer">
   <div class="pull-right">
-     {{d-button id="create-channel"
-        action="createChannel"
-        actionParam=model.provider
-        icon="plus"
-        title="chat_integration.create_channel"
-        label="chat_integration.create_channel"}}
+    {{d-button
+      id="create-channel"
+      action=(action "createChannel")
+      actionParam=model.provider
+      icon="plus"
+      title="chat_integration.create_channel"
+      label="chat_integration.create_channel"}}
   </div>
 </div>

assets/javascripts/discourse/templates/admin/plugins-chat.hbs

@@ -3,16 +3,20 @@
     <div class="span15">
       <ul class="nav nav-pills">
         {{#each model as |provider|}}
-          {{nav-item route='adminPlugins.chat.provider' routeParam=provider.name label=(concat 'chat_integration.provider.' provider.name '.title')}}
+          {{nav-item
+            route='adminPlugins.chat.provider'
+            routeParam=provider.name
+            label=(concat 'chat_integration.provider.' provider.name '.title')}}
         {{/each}}
       </ul>
     </div>
 
     <div class="pull-right">
-      {{d-button action="showSettings"
-          icon="gear"
-          title="chat_integration.settings"
-          label="chat_integration.settings"}}
+      {{d-button
+        action=(route-action "showSettings")
+        icon="gear"
+        title="chat_integration.settings"
+        label="chat_integration.settings"}}
     </div>
   </div>
 

assets/javascripts/discourse/templates/components/channel-data.hbs

@@ -1,6 +1,8 @@
 {{#each provider.channel_parameters as |param|}}
   {{#unless param.hidden}}
-    <span class='field-name'>{{i18n (concat 'chat_integration.provider.' channel.provider '.param.' param.key '.title')}}:</span>
+    <span class='field-name'>
+      {{i18n (concat 'chat_integration.provider.' channel.provider '.param.' param.key '.title')}}:
+    </span>
     <span class='field-value'>{{get channel.data param.key}}</span>
     <br/>
   {{/unless}}

assets/javascripts/discourse/templates/components/channel-details.hbs

@@ -1,15 +1,36 @@
 <div class='channel-header'>
   <div class='pull-right'>
-    {{d-button action="edit" actionParam=channel icon="pencil" title="chat_integration.edit_channel" label="chat_integration.edit_channel"}}
+    {{d-button
+      action=editChannel
+      actionParam=channel
+      icon="pencil"
+      title="chat_integration.edit_channel"
+      label="chat_integration.edit_channel"}}
 
-    {{d-button action="test" actionParam=channel icon="rocket" title="chat_integration.test_channel" label="chat_integration.test_channel" class="btn-chat-test"}}
+    {{d-button
+      action=test
+      actionParam=channel
+      icon="rocket"
+      title="chat_integration.test_channel"
+      label="chat_integration.test_channel"
+      class="btn-chat-test"}}
 
-    {{d-button class='cancel' action="delete" actionParam=channel icon="trash" title="chat_integration.delete_channel" label="chat_integration.delete_channel"}}
+    {{d-button
+      class='cancel'
+      action=(action "deleteChannel")
+      actionParam=channel
+      icon="trash"
+      title="chat_integration.delete_channel"
+      label="chat_integration.delete_channel"}}
   </div>
 
   <span class='channel-title'>
     {{#if channel.error_key}}
-      {{d-button action="showError" actionParam=channel class="delete btn-danger" icon="exclamation-triangle"}}
+      {{d-button
+        action=showError
+        actionParam=channel
+        class="delete btn-danger"
+        icon="exclamation-triangle"}}
     {{/if}}
 
     {{channel-data provider=provider channel=channel}}
@@ -30,14 +51,15 @@
     </tr>
 
     {{#each channel.rules as |rule|}}
-      {{rule-row rule=rule edit='editRule' refresh='refresh'}}
+      {{rule-row rule=rule edit=(action "editRule") refresh=refresh}}
     {{/each}}
   </table>
 </div>
 
 <div class='channel-footer'>
   <div class='pull-right'>
-   {{d-button action="createRule"
+   {{d-button
+      action=createRule
       actionParam=channel
       icon="plus"
       title="chat_integration.create_rule"

assets/javascripts/discourse/templates/components/rule-row.hbs

@@ -28,6 +28,17 @@
 {{/if}}
 
 <td>
-  {{d-button action="edit" actionParam=rule icon="pencil" class="edit" title="chat_integration.rule_table.edit_rule"}}
-  {{d-button action="delete" actionParam=rule icon="trash-o" class="delete" title="chat_integration.rule_table.delete_rule"}}
+  {{d-button
+    action=edit
+    actionParam=rule
+    icon="pencil"
+    class="edit"
+    title="chat_integration.rule_table.edit_rule"}}
+
+  {{d-button
+    action=(action "delete")
+    actionParam=rule
+    icon="trash-o"
+    class="delete"
+    title="chat_integration.rule_table.delete_rule"}}
 </td>

test/javascripts/acceptance/chat-integration-test.js.es6

@@ -7,8 +7,16 @@ acceptance("Chat Integration", {
       return [200, { "Content-Type": "text/html; charset=utf-8" }, object];
     };
 
+    const jsonResponse = object => {
+      return [
+        200,
+        { "Content-Type": "application/json; charset=utf-8" },
+        object
+      ];
+    };
+
     server.get("/admin/plugins/chat/providers", () => {
-      return response({
+      return jsonResponse({
         providers: [
           {
             name: "dummy",
@@ -20,7 +28,7 @@ acceptance("Chat Integration", {
     });
 
     server.get("/admin/plugins/chat/channels", () => {
-      return response({
+      return jsonResponse({
         channels: [
           {
             id: 97,
@@ -72,94 +80,72 @@ acceptance("Chat Integration", {
     });
 
     server.get("/groups/search.json", () => {
-      return response([]);
+      return jsonResponse([]);
     });
   }
 });
 
-test("Rules load successfully", assert => {
-  visit("/admin/plugins/chat");
+test("Rules load successfully", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    assert.ok(
-      exists("#admin-plugin-chat table"),
-      "it shows the table of rules"
-    );
-    assert.equal(
-      find("#admin-plugin-chat table tr td")
-        .eq(0)
-        .text()
-        .trim(),
-      "All posts and replies",
-      "rule displayed"
-    );
-  });
+  assert.ok(exists("#admin-plugin-chat table"), "it shows the table of rules");
+
+  assert.equal(
+    find("#admin-plugin-chat table tr td")
+      .eq(0)
+      .text()
+      .trim(),
+    "All posts and replies",
+    "rule displayed"
+  );
 });
 
-test("Create channel works", assert => {
-  visit("/admin/plugins/chat");
+test("Create channel works", async assert => {
+  await visit("/admin/plugins/chat");
+  await click("#create-channel");
 
-  andThen(() => {
-    click("#create-channel");
-  });
+  assert.ok(
+    exists("#chat-integration-edit-channel-modal"),
+    "it displays the modal"
+  );
+  assert.ok(
+    find("#save-channel").prop("disabled"),
+    "it disables the save button"
+  );
 
-  andThen(() => {
-    assert.ok(
-      exists("#chat-integration-edit-channel-modal"),
-      "it displays the modal"
-    );
-    assert.ok(
-      find("#save-channel").prop("disabled"),
-      "it disables the save button"
-    );
-    fillIn("#chat-integration-edit-channel-modal input", "#general");
-  });
+  await fillIn("#chat-integration-edit-channel-modal input", "#general");
 
-  andThen(() => {
-    assert.ok(
-      find("#save-channel").prop("disabled") === false,
-      "it enables the save button"
-    );
-  });
+  assert.ok(
+    find("#save-channel").prop("disabled") === false,
+    "it enables the save button"
+  );
 
-  andThen(() => {
-    click("#save-channel");
-  });
+  await click("#save-channel");
 
-  andThen(() => {
-    assert.ok(
-      !exists("#chat-integration-edit-channel-modal"),
-      "modal closes on save"
-    );
-  });
+  assert.ok(
+    !exists("#chat-integration-edit-channel-modal"),
+    "modal closes on save"
+  );
 });
 
-test("Edit channel works", assert => {
-  visit("/admin/plugins/chat");
+test("Edit channel works", async assert => {
+  await visit("/admin/plugins/chat");
+  await click(".channel-header button:first");
 
-  andThen(() => {
-    click(".channel-header button:first");
-  });
+  assert.ok(
+    exists("#chat-integration-edit-channel-modal"),
+    "it displays the modal"
+  );
+  assert.ok(!find("#save-channel").prop("disabled"), "save is enabled");
 
-  andThen(() => {
-    assert.ok(
-      exists("#chat-integration-edit-channel-modal"),
-      "it displays the modal"
-    );
-    assert.ok(!find("#save-channel").prop("disabled"), "save is enabled");
-    fillIn("#chat-integration-edit-channel-modal input", " general");
-  });
+  await fillIn("#chat-integration-edit-channel-modal input", " general");
 
-  andThen(() => {
-    assert.ok(
-      find("#save-channel").prop("disabled"),
-      "it disables the save button"
-    );
-  });
+  assert.ok(
+    find("#save-channel").prop("disabled"),
+    "it disables the save button"
+  );
 
-  andThen(() => {
-    fillIn("#chat-integration-edit-channel-modal input", "#random");
-  });
+  await fillIn("#chat-integration-edit-channel-modal input", "#random");
 
   andThen(() => {
     $("#chat-integration-edit-channel-modal input").trigger(
@@ -175,132 +161,88 @@ test("Edit channel works", assert => {
   });
 });
 
-test("Create rule works", assert => {
-  visit("/admin/plugins/chat");
+test("Create rule works", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    assert.ok(
-      exists(".channel-footer button:first"),
-      "create button is displayed"
-    );
-  });
+  assert.ok(
+    exists(".channel-footer button:first"),
+    "create button is displayed"
+  );
 
-  click(".channel-footer button:first");
+  await click(".channel-footer button:first");
 
-  andThen(() => {
-    assert.ok(
-      exists("#chat-integration-edit-rule_modal"),
-      "modal opens on edit"
-    );
-    assert.ok(find("#save-rule").prop("disabled") === false, "save is enabled");
-  });
+  assert.ok(exists("#chat-integration-edit-rule_modal"), "modal opens on edit");
+  assert.ok(find("#save-rule").prop("disabled") === false, "save is enabled");
 
-  click("#save-rule");
+  await click("#save-rule");
 
-  andThen(() => {
-    assert.ok(
-      !exists("#chat-integration-edit-rule_modal"),
-      "modal closes on save"
-    );
-  });
+  assert.ok(
+    !exists("#chat-integration-edit-rule_modal"),
+    "modal closes on save"
+  );
 });
 
-test("Edit rule works", assert => {
-  visit("/admin/plugins/chat");
+test("Edit rule works", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    assert.ok(exists(".edit:first"), "edit button is displayed");
-  });
+  assert.ok(exists(".edit:first"), "edit button is displayed");
 
-  click(".edit:first");
+  await click(".edit:first");
 
-  andThen(() => {
-    assert.ok(
-      exists("#chat-integration-edit-rule_modal"),
-      "modal opens on edit"
-    );
-    assert.ok(
-      find("#save-rule").prop("disabled") === false,
-      "it enables the save button"
-    );
-  });
+  assert.ok(exists("#chat-integration-edit-rule_modal"), "modal opens on edit");
+  assert.ok(
+    find("#save-rule").prop("disabled") === false,
+    "it enables the save button"
+  );
 
-  click("#save-rule");
+  await click("#save-rule");
 
-  andThen(() => {
-    assert.ok(
-      !exists("#chat-integration-edit-rule_modal"),
-      "modal closes on save"
-    );
-  });
+  assert.ok(
+    !exists("#chat-integration-edit-rule_modal"),
+    "modal closes on save"
+  );
 });
 
-test("Delete channel works", function(assert) {
-  visit("/admin/plugins/chat");
+test("Delete channel works", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    assert.ok(exists(".channel-header button:last"), "delete button exists");
-    click(".channel-header button:last");
-  });
+  assert.ok(exists(".channel-header button:last"), "delete button exists");
+  await click(".channel-header button:last");
 
-  andThen(() => {
-    assert.ok(exists("div.bootbox"), "modal is displayed");
-    click("div.bootbox .btn-primary");
-  });
+  assert.ok(exists("div.bootbox"), "modal is displayed");
+  await click("div.bootbox .btn-primary");
 
-  andThen(() => {
-    assert.ok(exists("div.bootbox") === false, "modal has closed");
-  });
+  assert.ok(exists("div.bootbox") === false, "modal has closed");
 });
 
-test("Delete rule works", function(assert) {
-  visit("/admin/plugins/chat");
+test("Delete rule works", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    assert.ok(exists(".delete:first"));
-    click(".delete:first");
-  });
+  assert.ok(exists(".delete:first"));
+  await click(".delete:first");
 });
 
-test("Test channel works", assert => {
-  visit("/admin/plugins/chat");
+test("Test channel works", async assert => {
+  await visit("/admin/plugins/chat");
 
-  andThen(() => {
-    click(".btn-chat-test");
-  });
+  await click(".btn-chat-test");
 
-  andThen(() => {
-    assert.ok(exists("#chat_integration_test_modal"), "it displays the modal");
-    assert.ok(
-      find("#send-test").prop("disabled"),
-      "it disables the send button"
-    );
-    fillIn("#choose-topic-title", "9318");
-  });
+  assert.ok(exists("#chat_integration_test_modal"), "it displays the modal");
+  assert.ok(find("#send-test").prop("disabled"), "it disables the send button");
 
-  andThen(() => {
-    click("#chat_integration_test_modal .radio:first");
-  });
+  await fillIn("#choose-topic-title", "9318");
+  await click("#chat_integration_test_modal .radio:first");
 
-  andThen(() => {
-    assert.ok(
-      find("#send-test").prop("disabled") === false,
-      "it enables the send button"
-    );
-  });
+  assert.ok(
+    find("#send-test").prop("disabled") === false,
+    "it enables the send button"
+  );
 
-  andThen(() => {
-    click("#send-test");
-  });
+  await click("#send-test");
 
-  andThen(() => {
-    assert.ok(
-      exists("#chat_integration_test_modal"),
-      "modal doesn't close on send"
-    );
-    assert.ok(
-      exists("#modal-alert.alert-success"),
-      "success message displayed"
-    );
-  });
+  assert.ok(
+    exists("#chat_integration_test_modal"),
+    "modal doesn't close on send"
+  );
+  assert.ok(exists("#modal-alert.alert-success"), "success message displayed");
 });