From 8e548228c10184d3a9eb284f0ab0a6399c07684f Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Fri, 6 Apr 2018 16:15:39 +0200
Subject: [PATCH] SONAR-10559 Fix select list to edit members and group form

---
 .../js/apps/groups/components/EditMembers.tsx | 31 ++++++++++++++-----
 .../js/apps/users/components/GroupsForm.tsx   | 14 ++++++++-
 .../SelectList/SelectListListElement.tsx      |  2 +-
 .../SelectListListElement-test.tsx.snap       |  4 +--
 .../main/js/components/SelectList/styles.css  |  2 +-
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx b/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
index ee0fc20aacc..ca563669161 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/EditMembers.tsx
@@ -60,17 +60,20 @@ export default class EditMembers extends React.PureComponent<Props, State> {
 
   handleSearch = (query: string, selected: Filter) => {
     return getUsersInGroup({
-      id: this.props.group.id,
+      name: this.props.group.name,
       organization: this.props.organization,
       ps: 100,
       q: query !== '' ? query : undefined,
       selected
-    }).then(data => {
-      this.setState({
-        users: data.users,
-        selectedUsers: data.users.filter(user => user.selected).map(user => user.login)
-      });
-    });
+    }).then(
+      data => {
+        this.setState({
+          users: data.users,
+          selectedUsers: data.users.filter(user => user.selected).map(user => user.login)
+        });
+      },
+      () => {}
+    );
   };
 
   handleSelect = (login: string) => {
@@ -110,7 +113,19 @@ export default class EditMembers extends React.PureComponent<Props, State> {
 
   renderElement = (login: string): React.ReactNode => {
     const user = find(this.state.users, { login });
-    return user === undefined ? login : user.login;
+    return (
+      <div className="select-list-list-item">
+        {user === undefined ? (
+          login
+        ) : (
+          <>
+            {user.name}
+            <br />
+            <span className="note">{user.login}</span>
+          </>
+        )}
+      </div>
+    );
   };
 
   render() {
diff --git a/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx b/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
index 6bb46a38335..75c98f1a131 100644
--- a/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/GroupsForm.tsx
@@ -87,7 +87,19 @@ export default class GroupsForm extends React.PureComponent<Props> {
 
   renderElement = (name: string): React.ReactNode => {
     const group = find(this.state.groups, { name });
-    return group === undefined ? name : group.name;
+    return (
+      <div className="select-list-list-item">
+        {group === undefined ? (
+          name
+        ) : (
+          <>
+            {group.name}
+            <br />
+            <span className="note">{group.description}</span>
+          </>
+        )}
+      </div>
+    );
   };
 
   render() {
diff --git a/server/sonar-web/src/main/js/components/SelectList/SelectListListElement.tsx b/server/sonar-web/src/main/js/components/SelectList/SelectListListElement.tsx
index a0a7afd7a0d..1d893f211b3 100644
--- a/server/sonar-web/src/main/js/components/SelectList/SelectListListElement.tsx
+++ b/server/sonar-web/src/main/js/components/SelectList/SelectListListElement.tsx
@@ -64,7 +64,7 @@ export default class SelectListListElement extends React.PureComponent<Props, St
       <li>
         <Checkbox
           checked={this.props.selected}
-          className={classNames({ active: this.props.active })}
+          className={classNames('select-list-list-checkbox', { active: this.props.active })}
           disabled={this.props.disabled}
           onCheck={this.handleCheck}>
           <span className="little-spacer-left">{this.props.renderElement(this.props.element)}</span>
diff --git a/server/sonar-web/src/main/js/components/SelectList/__tests__/__snapshots__/SelectListListElement-test.tsx.snap b/server/sonar-web/src/main/js/components/SelectList/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
index 28b25b2a3db..38351d99ec1 100644
--- a/server/sonar-web/src/main/js/components/SelectList/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SelectList/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`should display a loader when checking 1`] = `
 <li>
   <Checkbox
     checked={false}
-    className=""
+    className="select-list-list-checkbox"
     onCheck={[Function]}
     thirdState={false}
   >
@@ -21,7 +21,7 @@ exports[`should display a loader when checking 2`] = `
 <li>
   <Checkbox
     checked={false}
-    className=""
+    className="select-list-list-checkbox"
     onCheck={[Function]}
     thirdState={false}
   >
diff --git a/server/sonar-web/src/main/js/components/SelectList/styles.css b/server/sonar-web/src/main/js/components/SelectList/styles.css
index 8f44b2e61ae..beb5c992119 100644
--- a/server/sonar-web/src/main/js/components/SelectList/styles.css
+++ b/server/sonar-web/src/main/js/components/SelectList/styles.css
@@ -89,7 +89,7 @@
   background-color: var(--gray94);
 }
 
-.select-list-list-checkbox {
+.select-list-list-checkbox i {
   display: inline-block;
   vertical-align: middle;
   margin-right: 10px;
-- 
2.39.5