permissions sorting fixed + icon same size as avatrs

public/app/core/components/Permissions/DisabledPermissionsListItem.tsx

@@ -13,7 +13,7 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
     return (
     return (
       <tr className="gf-form-disabled">
       <tr className="gf-form-disabled">
         <td style={{ width: '1%' }}>
         <td style={{ width: '1%' }}>
-          <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-shield" />
+          <i style={{ width: '25px', height: '25px' }} className="gicon gicon-shield" />
         </td>
         </td>
         <td style={{ width: '90%' }}>
         <td style={{ width: '90%' }}>
           {item.name}
           {item.name}

public/app/core/components/Permissions/PermissionsListItem.tsx

@@ -15,10 +15,10 @@ function ItemAvatar({ item }) {
     return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
     return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
   }
   }
   if (item.role === 'Editor') {
   if (item.role === 'Editor') {
-    return <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-editor" />;
+    return <i style={{ width: '25px', height: '25px' }} className="gicon gicon-editor" />;
   }
   }
 
 
-  return <i style={{ width: '25px', fontSize: '1.5rem' }} className="gicon gicon-viewer" />;
+  return <i style={{ width: '25px', height: '25px' }} className="gicon gicon-viewer" />;
 }
 }
 
 
 function ItemDescription({ item }) {
 function ItemDescription({ item }) {

public/app/stores/PermissionsStore/PermissionsStore.ts

@@ -155,6 +155,8 @@ export const PermissionsStore = types
         try {
         try {
           yield updateItems(self, updatedItems);
           yield updateItems(self, updatedItems);
           self.items.push(newItem);
           self.items.push(newItem);
+          let sortedItems = self.items.sort((a, b) => b.sortRank - a.sortRank || a.name.localeCompare(b.name));
+          self.items = sortedItems;
           resetNewTypeInternal();
           resetNewTypeInternal();
         } catch {}
         } catch {}
         yield Promise.resolve();
         yield Promise.resolve();
@@ -214,9 +216,11 @@ const updateItems = (self, items) => {
 };
 };
 
 
 const prepareServerResponse = (response, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
 const prepareServerResponse = (response, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
-  return response.map(item => {
-    return prepareItem(item, dashboardId, isFolder, isInRoot);
-  });
+  return response
+    .map(item => {
+      return prepareItem(item, dashboardId, isFolder, isInRoot);
+    })
+    .sort((a, b) => b.sortRank - a.sortRank || a.name.localeCompare(b.name));
 };
 };
 
 
 const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
 const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boolean) => {
@@ -233,7 +237,7 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boo
     item.icon = 'fa fa-fw fa-street-view';
     item.icon = 'fa fa-fw fa-street-view';
     item.name = item.role;
     item.name = item.role;
     item.sortRank = 30;
     item.sortRank = 30;
-    if (item.role === 'Viewer') {
+    if (item.role === 'Editor') {
       item.sortRank += 1;
       item.sortRank += 1;
     }
     }
   }
   }