SONAR-10559 Fix select list to edit members and group form

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 ee0fc20aacc4cbda3074ade98e29646b4e1336e9..ca563669161b75dc56b8e4a3c942f4300598ef9a 100644 (file)
--- 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 6bb46a383355f50292d8f44d829c2c337ac3b66b..75c98f1a1311f8bc87ee5a594cf1ad491438096e 100644 (file)
--- 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 a0a7afd7a0de04e9d5cbf41bc968ce7c7ea81449..1d893f211b30a15c1f072221f51b6932300b429c 100644 (file)
--- 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 28b25b2a3dbe64d2e1d4209b1b604e557615d67f..38351d99ec16f8598cb7604efffae32764b0567f 100644 (file)
--- 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 8f44b2e61ae4ad1ff9849401e9cf989436bf8e56..beb5c99211966125264cab7fd1ef9f74c6a4a1a5 100644 (file)
--- 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;