FIX: Properly reset controller of admin-user-index. (#6760)

app/assets/javascripts/admin/components/admin-editable-field.js.es6

@@ -0,0 +1,23 @@
+export default Ember.Component.extend({
+  tagName: "",
+
+  buffer: "",
+  editing: false,
+
+  init() {
+    this._super(...arguments);
+    this.set("editing", false);
+  },
+
+  actions: {
+    edit() {
+      this.set("buffer", this.get("value"));
+      this.toggleProperty("editing");
+    },
+
+    save() {
+      // Action has to toggle 'editing' property.
+      this.action(this.get("buffer"));
+    }
+  }
+});

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

@@ -7,9 +7,6 @@ import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend(CanCheckEmails, {
   adminTools: Ember.inject.service(),
-  editingUsername: false,
-  editingName: false,
-  editingTitle: false,
   originalPrimaryGroupId: null,
   customGroupIdsBuffer: null,
   availableGroups: null,
@@ -244,17 +241,12 @@ export default Ember.Controller.extend(CanCheckEmails, {
       this.get("adminTools").showSilenceModal(this.get("model"));
     },
 
-    toggleUsernameEdit() {
+    saveUsername(newUsername) {
-      this.set("userUsernameValue", this.get("model.username"));
-      this.toggleProperty("editingUsername");
-    },
-
-    saveUsername() {
       const oldUsername = this.get("model.username");
-      this.set("model.username", this.get("userUsernameValue"));
+      this.set("model.username", newUsername);
 
       return ajax(`/users/${oldUsername.toLowerCase()}/preferences/username`, {
-        data: { new_username: this.get("userUsernameValue") },
+        data: { new_username: newUsername },
         type: "PUT"
       })
         .catch(e => {
@@ -264,19 +256,14 @@ export default Ember.Controller.extend(CanCheckEmails, {
         .finally(() => this.toggleProperty("editingUsername"));
     },
 
-    toggleNameEdit() {
+    saveName(newName) {
-      this.set("userNameValue", this.get("model.name"));
-      this.toggleProperty("editingName");
-    },
-
-    saveName() {
       const oldName = this.get("model.name");
-      this.set("model.name", this.get("userNameValue"));
+      this.set("model.name", newName);
 
       return ajax(
         userPath(`${this.get("model.username").toLowerCase()}.json`),
         {
-          data: { name: this.get("userNameValue") },
+          data: { name: newName },
           type: "PUT"
         }
       )
@@ -287,24 +274,19 @@ export default Ember.Controller.extend(CanCheckEmails, {
         .finally(() => this.toggleProperty("editingName"));
     },
 
-    toggleTitleEdit() {
+    saveTitle(newTitle) {
-      this.set("userTitleValue", this.get("model.title"));
+      const oldTitle = this.get("model.title");
-      this.toggleProperty("editingTitle");
-    },
 
-    saveTitle() {
+      this.set("model.title", newTitle);
-      const prevTitle = this.get("userTitleValue");
-
-      this.set("model.title", this.get("userTitleValue"));
       return ajax(
         userPath(`${this.get("model.username").toLowerCase()}.json`),
         {
-          data: { title: this.get("userTitleValue") },
+          data: { title: newTitle },
           type: "PUT"
         }
       )
         .catch(e => {
-          this.set("model.title", prevTitle);
+          this.set("model.title", oldTitle);
           popupAjaxError(e);
         })
         .finally(() => this.toggleProperty("editingTitle"));

app/assets/javascripts/admin/templates/components/admin-editable-field.hbs

@@ -0,0 +1,16 @@
+<div class='field'>{{i18n name}}</div>
+<div class='value'>
+  {{#if editing}}
+    {{text-field value=buffer autofocus="autofocus"}}
+  {{else}}
+    <span {{action "edit"}}>{{value}}</span>
+  {{/if}}
+</div>
+<div class='controls'>
+  {{#if editing}}
+    {{d-button class="btn-default" action=(action "save") label="admin.user_fields.save"}}
+    <a href {{action "edit"}}>{{i18n 'cancel'}}</a>
+  {{else}}
+    {{d-button class="btn-default" action=(action "edit") icon="pencil"}}
+  {{/if}}
+</div>

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

@@ -19,41 +19,17 @@
   </div>
 
   <div class='display-row username'>
-    <div class='field'>{{i18n 'user.username.title'}}</div>
+    {{admin-editable-field name='user.username.title'
-    <div class='value'>
+                           value=model.username
-      {{#if editingUsername}}
+                           action=(action 'saveUsername')
-        {{text-field value=userUsernameValue autofocus="autofocus"}}
+                           editing=editingUsername}}
-      {{else}}
-        <span {{action "toggleUsernameEdit"}}>{{model.username}}</span>
-      {{/if}}
-    </div>
-    <div class='controls'>
-      {{#if editingUsername}}
-        {{d-button class="btn-default" action="saveUsername" label="admin.user_fields.save"}}
-        <a href {{action "toggleUsernameEdit"}}>{{i18n 'cancel'}}</a>
-      {{else}}
-        {{d-button class="btn-default" action="toggleUsernameEdit" icon="pencil"}}
-      {{/if}}
-    </div>
   </div>
 
   <div class='display-row'>
-    <div class='field'>{{i18n 'user.name.title'}}</div>
+    {{admin-editable-field name='user.name.title'
-    <div class='value'>
+                           value=model.name
-      {{#if editingName}}
+                           action=(action 'saveName')
-        {{text-field value=userNameValue autofocus="autofocus"}}
+                           editing=editingName}}
-      {{else}}
-        <span {{action "toggleNameEdit"}}>{{model.name}}</span>
-      {{/if}}
-    </div>
-    <div class='controls'>
-      {{#if editingName}}
-        {{d-button class="btn-default" action="saveName" label="admin.user_fields.save"}}
-        <a href {{action "toggleNameEdit"}}>{{i18n 'cancel'}}</a>
-      {{else}}
-        {{d-button  class="btn-default" action="toggleNameEdit" icon="pencil"}}
-      {{/if}}
-    </div>
   </div>
 
   {{plugin-outlet name="admin-user-below-names" args=(hash user=model) tagName='' connectorTagName=''}}
@@ -130,22 +106,10 @@
   </div>
 
   <div class='display-row'>
-    <div class='field'>{{i18n 'user.title.title'}}</div>
+    {{admin-editable-field name='user.title.title'
-    <div class='value'>
+                           value=model.title
-      {{#if editingTitle}}
+                           action=(action 'saveTitle')
-        {{text-field value=userTitleValue autofocus="autofocus"}}
+                           editing=editingTitle}}
-      {{else}}
-        <span {{action "toggleTitleEdit"}}>{{model.title}}&nbsp;</span>
-      {{/if}}
-    </div>
-    <div class='controls'>
-      {{#if editingTitle}}
-        {{d-button  class="btn-default" action="saveTitle" label="admin.user_fields.save"}}
-        <a href {{action "toggleTitleEdit"}}>{{i18n 'cancel'}}</a>
-      {{else}}
-        {{d-button class="btn-default" action="toggleTitleEdit" icon="pencil"}}
-      {{/if}}
-    </div>
   </div>
 
   <div class='display-row last-ip'>

test/javascripts/acceptance/admin-user-index-test.js.es6

@@ -0,0 +1,43 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Admin - User Index", { loggedIn: true });
+
+QUnit.test("can edit username", async assert => {
+  /* global server */
+  server.put("/users/sam/preferences/username", () => [
+    200,
+    { "Content-Type": "application/json" },
+    { id: 2, username: "new-sam" }
+  ]);
+
+  await visit("/admin/users/2/sam");
+
+  assert.equal(
+    find(".display-row.username .value")
+      .text()
+      .trim(),
+    "sam"
+  );
+
+  // Trying cancel.
+  await click(".display-row.username button");
+  await fillIn(".display-row.username .value input", "new-sam");
+  await click(".display-row.username a");
+  assert.equal(
+    find(".display-row.username .value")
+      .text()
+      .trim(),
+    "sam"
+  );
+
+  // Doing edit.
+  await click(".display-row.username button");
+  await fillIn(".display-row.username .value input", "new-sam");
+  await click(".display-row.username button");
+  assert.equal(
+    find(".display-row.username .value")
+      .text()
+      .trim(),
+    "new-sam"
+  );
+});