FIX: Form validation bugs, new modal api, glimmer (#182)

Author: CvX

admin/assets/javascripts/admin/components/channel-details.hbs

@@ -5,22 +5,22 @@
         @icon="pencil-alt"
         @title="chat_integration.edit_channel"
         @label="chat_integration.edit_channel"
-        @action={{action @editChannel @channel}}
+        @action={{fn @editChannel @channel}}
       />
 
       <DButton
         @icon="rocket"
         @title="chat_integration.test_channel"
         @label="chat_integration.test_channel"
-        @action={{action @test @channel}}
+        @action={{fn @test @channel}}
         @class="btn-chat-test"
       />
 
       <DButton
         @icon="trash-alt"
         @title="chat_integration.delete_channel"
         @label="chat_integration.delete_channel"
-        @action={{action this.deleteChannel @channel}}
+        @action={{fn this.deleteChannel @channel}}
         @class="cancel delete-channel"
       />
     </div>
@@ -30,7 +30,7 @@
         <DButton
           @class="delete btn-danger"
           @icon="exclamation-triangle"
-          @action={{action @showError @channel}}
+          @action={{fn @showError @channel}}
         />
       {{/if}}
 
@@ -56,7 +56,7 @@
         {{#each @channel.rules as |rule|}}
           <RuleRow
             @rule={{rule}}
-            @edit={{action @editRuleWithChannel rule @channel}}
+            @edit={{fn @editRuleWithChannel rule @channel}}
             @refresh={{@refresh}}
           />
         {{/each}}
@@ -71,7 +71,7 @@
         @icon="plus"
         @title="chat_integration.create_rule"
         @label="chat_integration.create_rule"
-        @action={{action @createRule @channel}}
+        @action={{fn @createRule @channel}}
       />
     </div>
   </div>

admin/assets/javascripts/admin/components/channel-param-row.hbs

@@ -4,7 +4,7 @@
       {{i18n
         (concat
           "chat_integration.provider."
-          @model.channel.provider
+          @channel.provider
           ".param."
           @param.key
           ".title"
@@ -13,14 +13,14 @@
     </label>
   </td>
   <td>
-    <Input
-      name={{concat "param-" @param.key}}
-      @value={{this.inputValue}}
-      {{on "change" this.updateValue}}
+    <input
+      {{on "input" this.updateValue}}
+      value={{get @channel.data @param.key}}
+      type="text"
+      name="param-{{@param.key}}"
     />
 
-    <InputTip @validation={{this.validate}} />
-
+    <InputTip @validation={{this.validation}} />
   </td>
 </tr>
 
@@ -31,7 +31,7 @@
       {{i18n
         (concat
           "chat_integration.provider."
-          @model.channel.provider
+          @channel.provider
           ".param."
           @param.key
           ".help"

admin/assets/javascripts/admin/components/channel-param-row.js

@@ -1,51 +1,34 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import EmberObject, { action } from "@ember/object";
+import { action } from "@ember/object";
 import I18n from "I18n";
 
 export default class ChannelParamRow extends Component {
-  @tracked inputValue = this.args.model.channel.data[this.args.param.key] || "";
+  get validation() {
+    const value = this.args.channel.get(`data.${this.args.param.key}`);
 
-  get validate() {
-    const parameter = this.args.param;
-    const regString = parameter.regex;
-    const regex = new RegExp(regString);
-
-    if (this.inputValue === "") {
-      // Fail silently if field blank
-      this.args.isValidParams(false);
-      return EmberObject.create({
-        failed: true,
-      });
-    } else if (!regString) {
-      // Pass silently if no regex available for provider
-      this.args.isValidParams(true);
-      return EmberObject.create({
-        ok: true,
-      });
-    } else if (regex.test(this.inputValue)) {
-      // Test against regex
-      this.args.isValidParams(true);
-      return EmberObject.create({
+    if (!value?.trim()) {
+      return { failed: true };
+    } else if (!this.args.param.regex) {
+      return { ok: true };
+    } else if (new RegExp(this.args.param.regex).test(value)) {
+      return {
         ok: true,
         reason: I18n.t(
           "chat_integration.edit_channel_modal.channel_validation.ok"
         ),
-      });
+      };
     } else {
-      // Failed regex
-      this.args.isValidParams(false);
-      return EmberObject.create({
+      return {
         failed: true,
         reason: I18n.t(
           "chat_integration.edit_channel_modal.channel_validation.fail"
         ),
-      });
+      };
     }
   }
 
   @action
   updateValue(event) {
-    this.args.model.channel.data[this.args.param.key] = event.target.value;
+    this.args.channel.set(`data.${this.args.param.key}`, event.target.value);
   }
 }

admin/assets/javascripts/admin/components/modal/channel-error.hbs

@@ -0,0 +1,4 @@
+<DModal @closeModal={{@closeModal}} id="chat_integration_error_modal">
+  <h4>{{i18n @model.error_key}}</h4>
+  <pre>{{@model.error_info}}</pre>
+</DModal>

admin/assets/javascripts/admin/components/modal/edit-channel.hbs

@@ -0,0 +1,54 @@
+<DModal
+  {{on "submit" this.save}}
+  @title={{i18n "chat_integration.edit_channel_modal.title"}}
+  @closeModal={{@closeModal}}
+  @tagName="form"
+  id="chat-integration-edit-channel-modal"
+>
+  <:body>
+    <table>
+      <tbody>
+        <tr class="input">
+          <td class="label">
+            <label for="provider">
+              {{i18n "chat_integration.edit_channel_modal.provider"}}
+            </label>
+          </td>
+          <td>
+            {{i18n
+              (concat
+                "chat_integration.provider." @model.channel.provider ".title"
+              )
+            }}
+          </td>
+        </tr>
+
+        <tr class="chat-instructions">
+          <td></td>
+          <td></td>
+        </tr>
+
+        {{#each @model.provider.channel_parameters as |param|}}
+          <ChannelParamRow @param={{param}} @channel={{@model.channel}} />
+        {{/each}}
+      </tbody>
+    </table>
+  </:body>
+
+  <:footer>
+    <DButton
+      @action={{this.save}}
+      @label="chat_integration.edit_channel_modal.save"
+      @disabled={{not this.validParams}}
+      type="submit"
+      id="save-channel"
+      class="btn-primary btn-large"
+    />
+
+    <DButton
+      @action={{@closeModal}}
+      @label="chat_integration.edit_channel_modal.cancel"
+      class="btn-large"
+    />
+  </:footer>
+</DModal>

admin/assets/javascripts/admin/components/modal/edit-channel.js

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class EditChannel extends Component {
+  get validParams() {
+    return this.args.model.provider.channel_parameters.every((param) => {
+      const value = this.args.model.channel.get(`data.${param.key}`);
+
+      if (!value?.trim()) {
+        return false;
+      }
+
+      if (!param.regex) {
+        return true;
+      }
+
+      return new RegExp(param.regex).test(value);
+    });
+  }
+
+  @action
+  async save() {
+    try {
+      await this.args.model.channel.save();
+      this.args.closeModal();
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+}