Update members display

6 files changed, 65 insertions, 111 deletions

diff --git a/it/it-tests/src/test/java/pageobjects/organization/MemberItem.java b/it/it-tests/src/test/java/pageobjects/organization/MemberItem.java
index f3099f5ec7f..436637d489f 100644
--- a/it/it-tests/src/test/java/pageobjects/organization/MemberItem.java
+++ b/it/it-tests/src/test/java/pageobjects/organization/MemberItem.java
@@ -36,8 +36,8 @@ public class MemberItem {
 
   public MemberItem shouldBeNamed(String login, String name) {
     ElementsCollection tds = this.elt.$$("td");
-    tds.get(1).$("strong").shouldHave(Condition.text(login));
-    tds.get(1).$("span").shouldHave(Condition.text(name));
+    tds.get(1).$("strong").shouldHave(Condition.text(name));
+    tds.get(1).$("span").shouldHave(Condition.text(login));
     return this;
   }
 
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/MembersListItem.js b/server/sonar-web/src/main/js/apps/organizations/components/MembersListItem.js
index 751b92275ac..df9a1496503 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/MembersListItem.js
+++ b/server/sonar-web/src/main/js/apps/organizations/components/MembersListItem.js
@@ -48,8 +48,8 @@ export default class MembersListItem extends React.PureComponent {
           <Avatar hash={member.avatar} email={member.email} size={AVATAR_SIZE} />
         </td>
         <td className="nowrap text-middle">
-          <strong>{member.login}</strong>
-          <span className="note little-spacer-left">{member.name}</span>
+          <strong>{member.name}</strong>
+          <span className="note little-spacer-left">{member.login}</span>
         </td>
         {organization.canAdmin &&
           <td className="text-right text-middle">
diff --git a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersListItem-test.js.snap b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersListItem-test.js.snap
index 8a3ac0d24ac..153c98f4d35 100644
--- a/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersListItem-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/components/__tests__/__snapshots__/MembersListItem-test.js.snap
@@ -1,53 +1,40 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should groups at 0 if the groupCount field is not defined (just added user) 1`] = `
+exports[`test should groups at 0 if the groupCount field is not defined (just added user) 1`] = `
 <tr>
   <td
-    className="thin nowrap"
-  >
+    className="thin nowrap">
     <Connect(Avatar)
       hash="7daf6c79d4802916d83f6266e24850af"
-      size={36}
-    />
+      size={36} />
   </td>
   <td
-    className="nowrap text-middle"
-  >
+    className="nowrap text-middle">
     <strong>
-      john
+      John Doe
     </strong>
     <span
-      className="note little-spacer-left"
-    >
-      John Doe
+      className="note little-spacer-left">
+      john
     </span>
   </td>
   <td
-    className="text-right text-middle"
-  >
+    className="text-right text-middle">
     organization.members.x_groups.0
   </td>
   <td
-    className="nowrap text-middle text-right"
-  >
+    className="nowrap text-middle text-right">
     <div
-      className="dropdown"
-    >
+      className="dropdown">
       <button
         className="dropdown-toggle little-spacer-right"
-        data-toggle="dropdown"
-      >
+        data-toggle="dropdown">
         <i
-          className="icon-settings"
-        />
+          className="icon-settings" />
          
         <i
-          className="icon-dropdown"
-        />
+          className="icon-dropdown" />
       </button>
       <ul
-        className="dropdown-menu dropdown-menu-right"
-      >
+        className="dropdown-menu dropdown-menu-right">
         <li>
           <ManageMemberGroupsForm
             member={
@@ -63,13 +50,11 @@ exports[`should groups at 0 if the groupCount field is not defined (just added u
                 "key": "foo",
                 "name": "Foo",
               }
-            }
-          />
+            } />
         </li>
         <li
           className="divider"
-          role="separator"
-        />
+          role="separator" />
         <li>
           <RemoveMemberForm
             member={
@@ -85,8 +70,7 @@ exports[`should groups at 0 if the groupCount field is not defined (just added u
                 "key": "foo",
                 "name": "Foo",
               }
-            }
-          />
+            } />
         </li>
       </ul>
     </div>
@@ -94,79 +78,64 @@ exports[`should groups at 0 if the groupCount field is not defined (just added u
 </tr>
 `;
 
-exports[`should not render actions and groups for non admin 1`] = `
+exports[`test should not render actions and groups for non admin 1`] = `
 <tr>
   <td
-    className="thin nowrap"
-  >
+    className="thin nowrap">
     <Connect(Avatar)
       hash=""
-      size={36}
-    />
+      size={36} />
   </td>
   <td
-    className="nowrap text-middle"
-  >
+    className="nowrap text-middle">
     <strong>
-      admin
+      Admin Istrator
     </strong>
     <span
-      className="note little-spacer-left"
-    >
-      Admin Istrator
+      className="note little-spacer-left">
+      admin
     </span>
   </td>
 </tr>
 `;
 
-exports[`should render actions and groups for admin 1`] = `
+exports[`test should render actions and groups for admin 1`] = `
 <tr>
   <td
-    className="thin nowrap"
-  >
+    className="thin nowrap">
     <Connect(Avatar)
       hash=""
-      size={36}
-    />
+      size={36} />
   </td>
   <td
-    className="nowrap text-middle"
-  >
+    className="nowrap text-middle">
     <strong>
-      admin
+      Admin Istrator
     </strong>
     <span
-      className="note little-spacer-left"
-    >
-      Admin Istrator
+      className="note little-spacer-left">
+      admin
     </span>
   </td>
   <td
-    className="text-right text-middle"
-  >
+    className="text-right text-middle">
     organization.members.x_groups.3
   </td>
   <td
-    className="nowrap text-middle text-right"
-  >
+    className="nowrap text-middle text-right">
     <div
-      className="dropdown"
-    >
+      className="dropdown">
       <button
         className="dropdown-toggle little-spacer-right"
-        data-toggle="dropdown"
-      >
+        data-toggle="dropdown">
         <i
-          className="icon-settings"
-        />
+          className="icon-settings" />
          
         <i
-          className="icon-dropdown"
-        />
+          className="icon-dropdown" />
       </button>
       <ul
-        className="dropdown-menu dropdown-menu-right"
-      >
+        className="dropdown-menu dropdown-menu-right">
         <li>
           <ManageMemberGroupsForm
             member={
@@ -183,13 +152,11 @@ exports[`should render actions and groups for admin 1`] = `
                 "key": "foo",
                 "name": "Foo",
               }
-            }
-          />
+            } />
         </li>
         <li
           className="divider"
-          role="separator"
-        />
+          role="separator" />
         <li>
           <RemoveMemberForm
             member={
@@ -206,8 +173,7 @@ exports[`should render actions and groups for admin 1`] = `
                 "key": "foo",
                 "name": "Foo",
               }
-            }
-          />
+            } />
         </li>
       </ul>
     </div>
diff --git a/server/sonar-web/src/main/js/apps/users/components/UsersSelectSearchOption.js b/server/sonar-web/src/main/js/apps/users/components/UsersSelectSearchOption.js
index 8cf4c65f370..125a20a5f0e 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UsersSelectSearchOption.js
+++ b/server/sonar-web/src/main/js/apps/users/components/UsersSelectSearchOption.js
@@ -64,8 +64,8 @@ export default class UsersSelectSearchOption extends React.PureComponent {
         title={user.name}>
         <div className="little-spacer-bottom little-spacer-top">
           <Avatar hash={user.avatar} email={user.email} size={AVATAR_SIZE} />
-          <strong className="spacer-left">{user.login}</strong>
-          <span className="note little-spacer-left">{this.props.children}</span>
+          <strong className="spacer-left">{this.props.children}</strong>
+          <span className="note little-spacer-left">{user.login}</span>
         </div>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearchOption-test.js.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearchOption-test.js.snap
index 94b1e8414c9..9ee1a0b7206 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearchOption-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/UsersSelectSearchOption-test.js.snap
@@ -1,56 +1,44 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly with email instead of hash 1`] = `
+exports[`test should render correctly with email instead of hash 1`] = `
 <div
   onMouseDown={[Function]}
   onMouseEnter={[Function]}
   onMouseMove={[Function]}
-  title="Administrator"
->
+  title="Administrator">
   <div
-    className="little-spacer-bottom little-spacer-top"
-  >
+    className="little-spacer-bottom little-spacer-top">
     <Connect(Avatar)
       email="admin@admin.ch"
-      size={20}
-    />
+      size={20} />
     <strong
-      className="spacer-left"
-    >
-      admin
+      className="spacer-left">
+      Administrator
     </strong>
     <span
-      className="note little-spacer-left"
-    >
-      Administrator
+      className="note little-spacer-left">
+      admin
     </span>
   </div>
 </div>
 `;
 
-exports[`should render correctly without all parameters 1`] = `
+exports[`test should render correctly without all parameters 1`] = `
 <div
   onMouseDown={[Function]}
   onMouseEnter={[Function]}
   onMouseMove={[Function]}
-  title="Administrator"
->
+  title="Administrator">
   <div
-    className="little-spacer-bottom little-spacer-top"
-  >
+    className="little-spacer-bottom little-spacer-top">
     <Connect(Avatar)
       hash="7daf6c79d4802916d83f6266e24850af"
-      size={20}
-    />
+      size={20} />
     <strong
-      className="spacer-left"
-    >
-      admin
+      className="spacer-left">
+      Administrator
     </strong>
     <span
-      className="note little-spacer-left"
-    >
-      Administrator
+      className="note little-spacer-left">
+      admin
     </span>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/js/store/organizationsMembers/reducer.js b/server/sonar-web/src/main/js/store/organizationsMembers/reducer.js
index d1ceb15087d..3a2e1410703 100644
--- a/server/sonar-web/src/main/js/store/organizationsMembers/reducer.js
+++ b/server/sonar-web/src/main/js/store/organizationsMembers/reducer.js
@@ -51,7 +51,7 @@ const organizationMembers = (state = {}, action = {}) => {
       const withNew = [...members, action.member.login].sort();
       return {
         ...state,
-        total: withNew.length,
+        total: state.total + 1,
         members: withNew
       };
     }
@@ -62,7 +62,7 @@ const organizationMembers = (state = {}, action = {}) => {
       }
       return {
         ...state,
-        total: withoutDeleted.length,
+        total: state.total - 1,
         members: withoutDeleted
       };
     }