teams: basic ui for permission in team members view

pkg/models/team_member.go

@@ -63,4 +63,5 @@ type TeamMemberDTO struct {
 	Login      string   `json:"login"`
 	Login      string   `json:"login"`
 	AvatarUrl  string   `json:"avatarUrl"`
 	AvatarUrl  string   `json:"avatarUrl"`
 	Labels     []string `json:"labels"`
 	Labels     []string `json:"labels"`
+	Permission int64    `json:"permission"`
 }
 }

pkg/services/sqlstore/team.go

@@ -294,7 +294,7 @@ func GetTeamMembers(query *m.GetTeamMembersQuery) error {
 	if query.External {
 	if query.External {
 		sess.Where("team_member.external=?", dialect.BooleanStr(true))
 		sess.Where("team_member.external=?", dialect.BooleanStr(true))
 	}
 	}
-	sess.Cols("team_member.org_id", "team_member.team_id", "team_member.user_id", "user.email", "user.login", "team_member.external")
+	sess.Cols("team_member.org_id", "team_member.team_id", "team_member.user_id", "user.email", "user.login", "team_member.external", "team_member.permission")
 	sess.Asc("user.login", "user.email")
 	sess.Asc("user.login", "user.email")
 
 
 	err := sess.Find(&query.Result)
 	err := sess.Find(&query.Result)

public/app/features/teams/TeamMembers.tsx

@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
-import { DeleteButton } from '@grafana/ui';
+import { DeleteButton, Select } from '@grafana/ui';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
-import { TeamMember, User } from 'app/types';
+import { TeamMember, User, teamsPermissionLevels } from 'app/types';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -70,6 +70,7 @@ export class TeamMembers extends PureComponent<Props, State> {
   }
   }
 
 
   renderMember(member: TeamMember, syncEnabled: boolean) {
   renderMember(member: TeamMember, syncEnabled: boolean) {
+    const currentPermissionLevel = teamsPermissionLevels.find(dp => dp.value === member.permission);
     return (
     return (
       <tr key={member.userId}>
       <tr key={member.userId}>
         <td className="width-4 text-center">
         <td className="width-4 text-center">
@@ -77,6 +78,18 @@ export class TeamMembers extends PureComponent<Props, State> {
         </td>
         </td>
         <td>{member.login}</td>
         <td>{member.login}</td>
         <td>{member.email}</td>
         <td>{member.email}</td>
+        <td>
+          <div className="gf-form">
+            <Select
+              isSearchable={false}
+              options={teamsPermissionLevels}
+              onChange={() => {}}
+              className="gf-form-select-box__control--menu-right"
+              value={currentPermissionLevel}
+              isDisabled={true}
+            />
+          </div>
+        </td>{' '}
         {syncEnabled && this.renderLabels(member.labels)}
         {syncEnabled && this.renderLabels(member.labels)}
         <td className="text-right">
         <td className="text-right">
           <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
           <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
@@ -132,6 +145,7 @@ export class TeamMembers extends PureComponent<Props, State> {
                 <th />
                 <th />
                 <th>Name</th>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Email</th>
+                <th>Permission</th>
                 {syncEnabled && <th />}
                 {syncEnabled && <th />}
                 <th style={{ width: '1%' }} />
                 <th style={{ width: '1%' }} />
               </tr>
               </tr>

public/app/features/teams/__mocks__/teamMocks.ts

@@ -36,6 +36,7 @@ export const getMockTeamMembers = (amount: number): TeamMember[] => {
       email: 'test@test.com',
       email: 'test@test.com',
       login: `testUser-${i}`,
       login: `testUser-${i}`,
       labels: ['label 1', 'label 2'],
       labels: ['label 1', 'label 2'],
+      permission: 0,
     });
     });
   }
   }
 
 
@@ -50,6 +51,7 @@ export const getMockTeamMember = (): TeamMember => {
     email: 'test@test.com',
     email: 'test@test.com',
     login: 'testUser',
     login: 'testUser',
     labels: [],
     labels: [],
+    permission: 0,
   };
   };
 };
 };
 
 

public/app/types/acl.ts

@@ -98,3 +98,23 @@ export const dashboardPermissionLevels: DashboardPermissionInfo[] = [
     description: 'Can add/remove permissions and can add, edit and delete dashboards.',
     description: 'Can add/remove permissions and can add, edit and delete dashboards.',
   },
   },
 ];
 ];
+
+export enum TeamPermissionLevel {
+  Member = 0,
+  Admin = 4,
+}
+
+export interface TeamPermissionInfo {
+  value: TeamPermissionLevel;
+  label: string;
+  description: string;
+}
+
+export const teamsPermissionLevels: TeamPermissionInfo[] = [
+  { value: TeamPermissionLevel.Member, label: 'Member', description: 'Is team member' },
+  {
+    value: TeamPermissionLevel.Admin,
+    label: 'Admin',
+    description: 'Can add/remove permissions and delete team.',
+  },
+];

public/app/types/teams.ts

@@ -13,6 +13,7 @@ export interface TeamMember {
   email: string;
   email: string;
   login: string;
   login: string;
   labels: string[];
   labels: string[];
+  permission: number;
 }
 }
 
 
 export interface TeamGroup {
 export interface TeamGroup {