From 80d89a69cc4417a9fcab76542ca2eec66e6e6890 Mon Sep 17 00:00:00 2001
From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Tue, 9 Oct 2018 09:15:17 +0200
Subject: [PATCH] Do not reorder permissions list on toggle

---
 .../shared/components/HoldersList.tsx         | 49 ++++++++++++++++---
 .../__snapshots__/HoldersList-test.tsx.snap   | 12 ++---
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
index ef234d81905..bc916310724 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/HoldersList.tsx
@@ -38,11 +38,49 @@ interface Props {
   users: PermissionUser[];
 }
 
-export default class HoldersList extends React.PureComponent<Props> {
+interface State {
+  permissionsCount: { [key: string]: number };
+}
+
+export default class HoldersList extends React.PureComponent<Props, State> {
+  state: State = { permissionsCount: {} };
+
   isPermissionUser(item: PermissionGroup | PermissionUser): item is PermissionUser {
     return (item as PermissionUser).login !== undefined;
   }
 
+  handleGroupToggle = (group: PermissionGroup, permission: string) => {
+    const key = group.id || group.name;
+    if (this.state.permissionsCount[key] === undefined) {
+      this.setState(state => ({
+        permissionsCount: {
+          ...state.permissionsCount,
+          [key]: group.permissions.length
+        }
+      }));
+    }
+    return this.props.onToggleGroup(group, permission);
+  };
+
+  handleUserToggle = (user: PermissionUser, permission: string) => {
+    if (this.state.permissionsCount[user.login] === undefined) {
+      this.setState(state => ({
+        permissionsCount: {
+          ...state.permissionsCount,
+          [user.login]: user.permissions.length
+        }
+      }));
+    }
+    return this.props.onToggleUser(user, permission);
+  };
+
+  getItemInitialPermissionsCount = (item: PermissionGroup | PermissionUser) => {
+    const key = this.isPermissionUser(item) ? item.login : item.id || item.name;
+    return this.state.permissionsCount[key] !== undefined
+      ? this.state.permissionsCount[key]
+      : item.permissions.length;
+  };
+
   renderEmpty() {
     const columns = this.props.permissions.length + 1;
     return (
@@ -56,7 +94,7 @@ export default class HoldersList extends React.PureComponent<Props> {
     return this.isPermissionUser(item) ? (
       <UserHolder
         key={`user-${item.login}`}
-        onToggle={this.props.onToggleUser}
+        onToggle={this.handleUserToggle}
         permissions={permissions}
         selectedPermission={this.props.selectedPermission}
         user={item}
@@ -65,7 +103,7 @@ export default class HoldersList extends React.PureComponent<Props> {
       <GroupHolder
         group={item}
         key={`group-${item.id || item.name}`}
-        onToggle={this.props.onToggleGroup}
+        onToggle={this.handleGroupToggle}
         permissions={permissions}
         selectedPermission={this.props.selectedPermission}
       />
@@ -80,9 +118,8 @@ export default class HoldersList extends React.PureComponent<Props> {
       }
       return item.name;
     });
-    const [itemWithPermissions, itemWithoutPermissions] = partition(
-      items,
-      item => item.permissions.length > 0
+    const [itemWithPermissions, itemWithoutPermissions] = partition(items, item =>
+      this.getItemInitialPermissionsCount(item)
     );
     return (
       <div className="boxed-group boxed-group-inner">
diff --git a/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/HoldersList-test.tsx.snap b/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/HoldersList-test.tsx.snap
index df11bc04eb6..d139d7061d8 100644
--- a/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/HoldersList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/permissions/shared/components/__tests__/__snapshots__/HoldersList-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`should display users and groups 1`] = `
     <tbody>
       <UserHolder
         key="user-barbaz"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
@@ -98,7 +98,7 @@ exports[`should display users and groups 1`] = `
           }
         }
         key="group-barbaz"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
@@ -127,7 +127,7 @@ exports[`should display users and groups 1`] = `
       />
       <UserHolder
         key="user-foobar"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
@@ -174,7 +174,7 @@ exports[`should display users and groups 1`] = `
           }
         }
         key="group-foobar"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
@@ -219,7 +219,7 @@ exports[`should display users and groups 1`] = `
           }
         }
         key="group-abc"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
@@ -248,7 +248,7 @@ exports[`should display users and groups 1`] = `
       />
       <UserHolder
         key="user-bcd"
-        onToggle={[MockFunction]}
+        onToggle={[Function]}
         permissions={
           Array [
             Object {
-- 
2.39.5