UX: confirmation before changing group membership in admin (#6426)

app/assets/javascripts/admin/controllers/admin-user-index.js.es6

@@ -11,6 +11,7 @@ export default Ember.Controller.extend(CanCheckEmails, {
   editingName: false,
   editingTitle: false,
   originalPrimaryGroupId: null,
+  customGroupIdsBuffer: null,
   availableGroups: null,
   userTitleValue: null,
 
@@ -30,6 +31,20 @@ export default Ember.Controller.extend(CanCheckEmails, {
     "model.can_disable_second_factor"
   ),
 
+  @computed("model.customGroups")
+  customGroupIds(customGroups) {
+    return customGroups.mapBy("id");
+  },
+
+  @computed("customGroupIdsBuffer", "customGroupIds")
+  customGroupsDirty(buffer, original) {
+    if (buffer === null) return false;
+
+    return buffer.length === original.length
+      ? buffer.any(id => !original.includes(id))
+      : true;
+  },
+
   @computed("model.automaticGroups")
   automaticGroups(automaticGroups) {
     return automaticGroups
@@ -105,6 +120,27 @@ export default Ember.Controller.extend(CanCheckEmails, {
     }
   },
 
+  groupAdded(added) {
+    this.get("model")
+      .groupAdded(added)
+      .catch(function() {
+        bootbox.alert(I18n.t("generic_error"));
+      });
+  },
+
+  groupRemoved(groupId) {
+    this.get("model")
+      .groupRemoved(groupId)
+      .then(() => {
+        if (groupId === this.get("originalPrimaryGroupId")) {
+          this.set("originalPrimaryGroupId", null);
+        }
+      })
+      .catch(function() {
+        bootbox.alert(I18n.t("generic_error"));
+      });
+  },
+
   actions: {
     impersonate() {
       return this.get("model").impersonate();
@@ -278,20 +314,22 @@ export default Ember.Controller.extend(CanCheckEmails, {
       this.get("model").generateApiKey();
     },
 
-    groupAdded(added) {
+    saveCustomGroups() {
-      this.get("model")
+      const currentIds = this.get("customGroupIds");
-        .groupAdded(added)
+      const bufferedIds = this.get("customGroupIdsBuffer");
-        .catch(function() {
+      const availableGroups = this.get("availableGroups");
-          bootbox.alert(I18n.t("generic_error"));
+
+      bufferedIds.filter(id => !currentIds.includes(id)).forEach(id => {
+        this.groupAdded(availableGroups.findBy("id", id));
       });
+
+      currentIds
+        .filter(id => !bufferedIds.includes(id))
+        .forEach(id => this.groupRemoved(id));
     },
 
-    groupRemoved(groupId) {
+    resetCustomGroups() {
-      this.get("model")
+      this.set("customGroupIdsBuffer", null);
-        .groupRemoved(groupId)
-        .catch(function() {
-          bootbox.alert(I18n.t("generic_error"));
-        });
     },
 
     savePrimaryGroup() {

app/assets/javascripts/admin/templates/user-index.hbs

@@ -459,19 +459,29 @@
       <div class='display-row'>
         <div class='field'>{{i18n 'admin.groups.custom'}}</div>
         <div class='value'>
-          {{admin-group-selector selected=model.customGroups available=availableGroups}}
+          {{admin-group-selector selected=model.customGroups available=availableGroups buffer=customGroupIdsBuffer}}
         </div>
+        {{#if customGroupsDirty}}
           <div class='controls'>
-          {{#if model.customGroups}}
+            {{d-button icon="check" class="ok" action="saveCustomGroups"}}
-            {{i18n 'admin.groups.primary'}}
+            {{d-button icon="times" class="cancel" action="resetCustomGroups"}}
-            {{combo-box content=model.customGroups value=model.primary_group_id none="admin.groups.no_primary"}}
+          </div>
         {{/if}}
+      </div>
+      {{#if model.customGroups}}
+        <div class='display-row'>
+          <div class='field'>{{i18n 'admin.groups.primary'}}</div>
+          <div class='value'>
+            {{combo-box content=model.customGroups value=model.primary_group_id none="admin.groups.no_primary"}}
+          </div>
           {{#if primaryGroupDirty}}
+            <div class='controls'>
               {{d-button icon="check" class="ok" action="savePrimaryGroup"}}
               {{d-button icon="times" class="cancel" action="resetPrimaryGroup"}}
+            </div>
           {{/if}}
         </div>
-      </div>
+      {{/if}}
   </section>
 {{/if}}
 

app/assets/javascripts/select-kit/components/admin-group-selector.js.es6

@@ -1,4 +1,5 @@
 import MultiSelectComponent from "select-kit/components/multi-select";
+import computed from "ember-addons/ember-computed-decorators";
 const { makeArray } = Ember;
 
 export default MultiSelectComponent.extend({
@@ -7,11 +8,13 @@ export default MultiSelectComponent.extend({
   selected: null,
   available: null,
   allowAny: false,
+  buffer: null,
 
-  computeValues() {
+  @computed("buffer")
-    return makeArray(this.get("selected")).map(s =>
+  values(buffer) {
-      this.valueForContentItem(s)
+    return buffer === null
-    );
+      ? makeArray(this.get("selected")).map(s => this.valueForContentItem(s))
+      : buffer;
   },
 
   computeContent() {
@@ -25,33 +28,6 @@ export default MultiSelectComponent.extend({
   },
 
   mutateValues(values) {
-    if (values.length > this.get("selected").length) {
+    this.set("buffer", values);
-      const newValues = values.filter(
-        v =>
-          !this.get("selected")
-            .map(s => this.valueForContentItem(s))
-            .includes(v)
-      );
-
-      newValues.forEach(value => {
-        const actionContext = this.get("available").findBy(
-          this.get("valueAttribute"),
-          parseInt(value, 10)
-        );
-
-        this.triggerAction({ action: "groupAdded", actionContext });
-      });
-    } else if (values.length < this.get("selected").length) {
-      const selected = this.get("selected").filter(
-        s => !values.includes(this.valueForContentItem(s))
-      );
-
-      selected.forEach(s => {
-        this.triggerAction({
-          action: "groupRemoved",
-          actionContext: this.valueForContentItem(s)
-        });
-      });
-    }
   }
 });