From 7888457aaee0aa233bd2696b75436d6fc686ff06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Wed, 6 Mar 2019 12:27:18 +0100
Subject: [PATCH] teams: basic ui for permission in team members view

---
 pkg/models/team_member.go                     |  17 +-
 pkg/services/sqlstore/team.go                 |   2 +-
 public/app/features/teams/TeamMembers.tsx     |  18 +-
 .../app/features/teams/__mocks__/teamMocks.ts |   2 +
 .../__snapshots__/TeamMembers.test.tsx.snap   | 429 ++++++++++++++++++
 public/app/types/acl.ts                       |  20 +
 public/app/types/teams.ts                     |   1 +
 7 files changed, 478 insertions(+), 11 deletions(-)

diff --git a/pkg/models/team_member.go b/pkg/models/team_member.go
index 01659cb0347..813455d3d2b 100644
--- a/pkg/models/team_member.go
+++ b/pkg/models/team_member.go
@@ -55,12 +55,13 @@ type GetTeamMembersQuery struct {
 // Projections and DTOs
 
 type TeamMemberDTO struct {
-	OrgId     int64    `json:"orgId"`
-	TeamId    int64    `json:"teamId"`
-	UserId    int64    `json:"userId"`
-	External  bool     `json:"-"`
-	Email     string   `json:"email"`
-	Login     string   `json:"login"`
-	AvatarUrl string   `json:"avatarUrl"`
-	Labels    []string `json:"labels"`
+	OrgId      int64    `json:"orgId"`
+	TeamId     int64    `json:"teamId"`
+	UserId     int64    `json:"userId"`
+	External   bool     `json:"-"`
+	Email      string   `json:"email"`
+	Login      string   `json:"login"`
+	AvatarUrl  string   `json:"avatarUrl"`
+	Labels     []string `json:"labels"`
+	Permission int64    `json:"permission"`
 }
diff --git a/pkg/services/sqlstore/team.go b/pkg/services/sqlstore/team.go
index c11a2d077ed..546e0231706 100644
--- a/pkg/services/sqlstore/team.go
+++ b/pkg/services/sqlstore/team.go
@@ -294,7 +294,7 @@ func GetTeamMembers(query *m.GetTeamMembersQuery) error {
 	if query.External {
 		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")
 
 	err := sess.Find(&query.Result)
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index e5c3aaafef0..341d9311b53 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -2,9 +2,9 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 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 { TeamMember, User } from 'app/types';
+import { TeamMember, User, teamsPermissionLevels } from 'app/types';
 import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -70,6 +70,7 @@ export class TeamMembers extends PureComponent<Props, State> {
   }
 
   renderMember(member: TeamMember, syncEnabled: boolean) {
+    const currentPermissionLevel = teamsPermissionLevels.find(dp => dp.value === member.permission);
     return (
       <tr key={member.userId}>
         <td className="width-4 text-center">
@@ -77,6 +78,18 @@ export class TeamMembers extends PureComponent<Props, State> {
         </td>
         <td>{member.login}</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)}
         <td className="text-right">
           <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
@@ -132,6 +145,7 @@ export class TeamMembers extends PureComponent<Props, State> {
                 <th />
                 <th>Name</th>
                 <th>Email</th>
+                <th>Permission</th>
                 {syncEnabled && <th />}
                 <th style={{ width: '1%' }} />
               </tr>
diff --git a/public/app/features/teams/__mocks__/teamMocks.ts b/public/app/features/teams/__mocks__/teamMocks.ts
index 339f227c081..6d4b5ea3aad 100644
--- a/public/app/features/teams/__mocks__/teamMocks.ts
+++ b/public/app/features/teams/__mocks__/teamMocks.ts
@@ -36,6 +36,7 @@ export const getMockTeamMembers = (amount: number): TeamMember[] => {
       email: 'test@test.com',
       login: `testUser-${i}`,
       labels: ['label 1', 'label 2'],
+      permission: 0,
     });
   }
 
@@ -50,6 +51,7 @@ export const getMockTeamMember = (): TeamMember => {
     email: 'test@test.com',
     login: 'testUser',
     labels: [],
+    permission: 0,
   };
 };
 
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index 202da95c55c..ba20817b836 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -69,6 +69,9 @@ exports[`Render should render component 1`] = `
           <th>
             Email
           </th>
+          <th>
+            Permission
+          </th>
           <th
             style={
               Object {
@@ -153,6 +156,9 @@ exports[`Render should render team members 1`] = `
           <th>
             Email
           </th>
+          <th>
+            Permission
+          </th>
           <th
             style={
               Object {
@@ -180,6 +186,48 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td
             className="text-right"
           >
@@ -205,6 +253,48 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td
             className="text-right"
           >
@@ -230,6 +320,48 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td
             className="text-right"
           >
@@ -255,6 +387,48 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td
             className="text-right"
           >
@@ -280,6 +454,48 @@ exports[`Render should render team members 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td
             className="text-right"
           >
@@ -363,6 +579,9 @@ exports[`Render should render team members when sync enabled 1`] = `
           <th>
             Email
           </th>
+          <th>
+            Permission
+          </th>
           <th />
           <th
             style={
@@ -391,6 +610,48 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td>
             <TagBadge
               count={0}
@@ -432,6 +693,48 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td>
             <TagBadge
               count={0}
@@ -473,6 +776,48 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td>
             <TagBadge
               count={0}
@@ -514,6 +859,48 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td>
             <TagBadge
               count={0}
@@ -555,6 +942,48 @@ exports[`Render should render team members when sync enabled 1`] = `
           <td>
             test@test.com
           </td>
+          <td>
+            <div
+              className="gf-form"
+            >
+              <Select
+                autoFocus={false}
+                backspaceRemovesValue={true}
+                className="gf-form-select-box__control--menu-right"
+                isClearable={false}
+                isDisabled={true}
+                isLoading={false}
+                isMulti={false}
+                isSearchable={false}
+                maxMenuHeight={300}
+                onChange={[Function]}
+                openMenuOnFocus={false}
+                options={
+                  Array [
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    },
+                    Object {
+                      "description": "Can add/remove permissions and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    },
+                  ]
+                }
+                value={
+                  Object {
+                    "description": "Is team member",
+                    "label": "Member",
+                    "value": 0,
+                  }
+                }
+                width={null}
+              />
+            </div>
+          </td>
+           
           <td>
             <TagBadge
               count={0}
diff --git a/public/app/types/acl.ts b/public/app/types/acl.ts
index 21f7bdac2d4..8134ddb1749 100644
--- a/public/app/types/acl.ts
+++ b/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.',
   },
 ];
+
+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.',
+  },
+];
diff --git a/public/app/types/teams.ts b/public/app/types/teams.ts
index a524f0dcf87..ef804e437d4 100644
--- a/public/app/types/teams.ts
+++ b/public/app/types/teams.ts
@@ -13,6 +13,7 @@ export interface TeamMember {
   email: string;
   login: string;
   labels: string[];
+  permission: number;
 }
 
 export interface TeamGroup {