REFACTOR: Invite modal panels init, actions, and styling (#10242)

* Import @action rather than using actions: {}
* Set default values in functions outside of init, so the functions can be modified by modifyClass (plugin api).
* Move padding from .choices div to the input in group selector.

app/assets/javascripts/discourse/app/components/invite-link-panel.js

@@ -21,16 +21,12 @@ export default Component.extend({
 
   init() {
     this._super(...arguments);
-
-    this.set("groupIds", []);
-    Group.findAll().then(groups => {
-      this.set("allGroups", groups.filterBy("automatic", false));
-    });
+    this.setDefaultSelectedGroups();
+    this.setGroupOptions();
   },
 
   willDestroyElement() {
     this._super(...arguments);
-
     this.reset();
   },
 
@@ -112,5 +108,15 @@ export default Component.extend({
         }
         model.setProperties({ saving: false, error: true });
       });
+  },
+
+  setDefaultSelectedGroups() {
+    this.set("groupIds", []);
+  },
+
+  setGroupOptions() {
+    Group.findAll().then(groups => {
+      this.set("allGroups", groups.filterBy("automatic", false));
+    });
   }
 });

app/assets/javascripts/discourse/app/components/invite-panel.js

@@ -1,7 +1,7 @@
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
-import EmberObject, { computed } from "@ember/object";
+import EmberObject, { action, computed } from "@ember/object";
 import { alias, and, equal } from "@ember/object/computed";
 import Component from "@ember/component";
 import { emailValid } from "discourse/lib/utilities";
@@ -30,16 +30,12 @@ export default Component.extend({
 
   init() {
     this._super(...arguments);
-
-    this.set("groupIds", []);
-    Group.findAll().then(groups => {
-      this.set("allGroups", groups.filterBy("automatic", false));
-    });
+    this.setDefaultSelectedGroups();
+    this.setGroupOptions();
   },
 
   willDestroyElement() {
     this._super(...arguments);
-
     this.reset();
   },
 
@@ -304,7 +300,17 @@ export default Component.extend({
     });
   },
 
-  actions: {
+  setDefaultSelectedGroups() {
+    this.set("groupIds", []);
+  },
+
+  setGroupOptions() {
+    Group.findAll().then(groups => {
+      this.set("allGroups", groups.filterBy("automatic", false));
+    });
+  },
+
+  @action
   createInvite() {
     if (this.disabled) {
       return;
@@ -343,11 +349,7 @@ export default Component.extend({
         .catch(onerror);
     } else {
       return this.inviteModel
-          .createInvite(
-            this.emailOrUsername.trim(),
-            groupIds,
-            this.customMessage
-          )
+        .createInvite(this.emailOrUsername.trim(), groupIds, this.customMessage)
         .then(result => {
           model.setProperties({ saving: false, finished: true });
           if (!this.invitingToTopic && userInvitedController) {
@@ -378,6 +380,7 @@ export default Component.extend({
     }
   },
 
+  @action
   generateInvitelink() {
     if (this.disabled) {
       return;
@@ -429,6 +432,7 @@ export default Component.extend({
       });
   },
 
+  @action
   showCustomMessageBox() {
     this.toggleProperty("hasCustomMessage");
     if (this.hasCustomMessage) {
@@ -448,10 +452,10 @@ export default Component.extend({
     }
   },
 
+  @action
   searchContact() {
     getNativeContact(["email"], false).then(result => {
       this.set("emailOrUsername", result[0].email[0]);
     });
   }
-  }
 });

app/assets/stylesheets/common/components/share-and-invite-modal.scss

@@ -81,7 +81,7 @@
     }
 
     .group-access-control {
-      .select-kit.multi-select .choices {
+      .select-kit.multi-select input.filter-input {
         padding-left: 8px;
       }