wip: dashboard acl ux2, #10747

pkg/api/dashboard_acl.go

@@ -30,6 +30,8 @@ func GetDashboardAclList(c *middleware.Context) Response {
 	}
 
 	for _, perm := range acl {
+		perm.UserAvatarUrl = dtos.GetGravatarUrl(perm.UserEmail)
+		perm.TeamAvatarUrl = dtos.GetGravatarUrl(perm.TeamEmail)
 		if perm.Slug != "" {
 			perm.Url = m.GetDashboardFolderUrl(perm.IsFolder, perm.Uid, perm.Slug)
 		}

pkg/models/dashboard_acl.go

@@ -53,7 +53,10 @@ type DashboardAclInfoDTO struct {
 	UserId         int64          `json:"userId"`
 	UserLogin      string         `json:"userLogin"`
 	UserEmail      string         `json:"userEmail"`
+	UserAvatarUrl  string         `json:"userAvatarUrl"`
 	TeamId         int64          `json:"teamId"`
+	TeamEmail      string         `json:"teamEmail"`
+	TeamAvatarUrl  string         `json:"teamAvatarUrl"`
 	Team           string         `json:"team"`
 	Role           *RoleType      `json:"role,omitempty"`
 	Permission     PermissionType `json:"permission"`

pkg/services/sqlstore/dashboard_acl.go

@@ -92,6 +92,7 @@ func GetDashboardAclInfoList(query *m.GetDashboardAclInfoListQuery) error {
 				u.login AS user_login,
 				u.email AS user_email,
 				ug.name AS team,
+				ug.email AS team_email,
 				d.title,
 				d.slug,
 				d.uid,

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react';
 import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
 import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
 
@@ -12,10 +12,10 @@ export default class DisabledPermissionListItem extends Component<IProps, any> {
 
     return (
       <tr className="gf-form-disabled">
-        <td style={{ width: '100%' }}>
+        <td style={{ width: '1%' }}>
           <i className={`fa--permissions-list ${item.icon}`} />
-          <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
         </td>
+        <td style={{ width: '90%' }}>{item.name}</td>
         <td />
         <td className="query-keyword">Can</td>
         <td>

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

@@ -15,9 +15,8 @@ export interface DashboardAcl {
   permissionName?: string;
   role?: string;
   icon?: string;
-  nameHtml?: string;
+  name?: string;
   inherited?: boolean;
-  sortName?: string;
   sortRank?: number;
 }
 

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react';
 import PermissionsListItem from './PermissionsListItem';
 import DisabledPermissionsListItem from './DisabledPermissionsListItem';
 import { observer } from 'mobx-react';
@@ -23,7 +23,7 @@ class PermissionsList extends Component<IProps, any> {
           <DisabledPermissionsListItem
             key={0}
             item={{
-              nameHtml: 'Everyone with <span class="query-keyword">Admin</span> Role',
+              name: 'Admin',
               permission: 4,
               icon: 'fa fa-fw fa-street-view',
             }}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
 import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
 import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
@@ -7,6 +7,16 @@ const setClassNameHelper = inherited => {
   return inherited ? 'gf-form-disabled' : '';
 };
 
+function ItemAvatar({ item }) {
+  if (item.userAvatarUrl) {
+    return <img className="filter-table__avatar" src={item.userAvatarUrl} />;
+  }
+  if (item.teamAvatarUrl) {
+    return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
+  }
+  return <span className={item.icon} />;
+}
+
 export default observer(({ item, removeItem, permissionChanged, itemIndex, folderInfo }) => {
   const handleRemoveItem = evt => {
     evt.preventDefault();
@@ -18,13 +28,14 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde
   };
 
   const inheritedFromRoot = item.dashboardId === -1 && folderInfo && folderInfo.id === 0;
+  console.log(item.name);
 
   return (
     <tr className={setClassNameHelper(item.inherited)}>
-      <td style={{ width: '100%' }}>
+      <td style={{ width: '1%' }}>
-        <i className={`fa--permissions-list ${item.icon}`} />
+        <ItemAvatar item={item} />
-        <span dangerouslySetInnerHTML={{ __html: item.nameHtml }} />
       </td>
+      <td style={{ width: '90%' }}>{item.name}</td>
       <td>
         {item.inherited &&
           folderInfo && (

public/app/stores/PermissionsStore/PermissionsStore.ts

@@ -231,19 +231,14 @@ const prepareItem = (item, dashboardId: number, isFolder: boolean, isInRoot: boo
 
   item.sortRank = 0;
   if (item.userId > 0) {
-    item.icon = 'fa fa-fw fa-user';
+    item.name = item.userLogin;
-    item.nameHtml = item.userLogin;
-    item.sortName = item.userLogin;
     item.sortRank = 10;
   } else if (item.teamId > 0) {
-    item.icon = 'fa fa-fw fa-users';
+    item.name = item.team;
-    item.nameHtml = item.team;
-    item.sortName = item.team;
     item.sortRank = 20;
   } else if (item.role) {
     item.icon = 'fa fa-fw fa-street-view';
-    item.nameHtml = `Everyone with <span class="query-keyword">${item.role}</span> Role`;
+    item.name = item.role;
-    item.sortName = item.role;
     item.sortRank = 30;
     if (item.role === 'Viewer') {
       item.sortRank += 1;

public/app/stores/PermissionsStore/PermissionsStoreItem.ts

@@ -14,8 +14,9 @@ export const PermissionsStoreItem = types
     inherited: types.maybe(types.boolean),
     sortRank: types.maybe(types.number),
     icon: types.maybe(types.string),
-    nameHtml: types.maybe(types.string),
+    name: types.maybe(types.string),
-    sortName: types.maybe(types.string),
+    teamAvatarUrl: types.maybe(types.string),
+    userAvatarUrl: types.maybe(types.string),
   })
   .actions(self => ({
     updateRole: role => {