From b82b94a2470e6d6f5889076b20dd4155ec4d473e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Wed, 13 Mar 2019 15:34:38 +0100
Subject: [PATCH] teams: disable buttons for team members

---
 .../components/DeleteButton/DeleteButton.tsx  |  24 +-
 .../app/features/teams/TeamMembers.test.tsx   |  34 +-
 public/app/features/teams/TeamMembers.tsx     |  28 +-
 .../app/features/teams/__mocks__/teamMocks.ts |   4 +-
 .../__snapshots__/TeamMembers.test.tsx.snap   | 884 ++++++++++++++----
 .../features/teams/state/selectors.test.ts    |   2 +-
 6 files changed, 734 insertions(+), 242 deletions(-)

diff --git a/packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx b/packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx
index df65d156ab3..d262c821968 100644
--- a/packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx
+++ b/packages/grafana-ui/src/components/DeleteButton/DeleteButton.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent, SyntheticEvent } from 'react';
 
 interface Props {
   onConfirm(): void;
+  disabled?: boolean;
 }
 
 interface State {
@@ -33,25 +34,22 @@ export class DeleteButton extends PureComponent<Props, State> {
   };
 
   render() {
-    const { onConfirm } = this.props;
-    let showConfirm;
-    let showDeleteButton;
-
-    if (this.state.showConfirm) {
-      showConfirm = 'show';
-      showDeleteButton = 'hide';
-    } else {
-      showConfirm = 'hide';
-      showDeleteButton = 'show';
-    }
+    const { onConfirm, disabled } = this.props;
+    const showConfirmClass = this.state.showConfirm ? 'show' : 'hide';
+    const showDeleteButtonClass = this.state.showConfirm ? 'hide' : 'show';
+    const disabledClass = disabled ? 'disabled btn-inverse' : '';
+    const onClick = disabled ? () => {} : this.onClickDelete;
 
     return (
       <span className="delete-button-container">
-        <a className={'delete-button ' + showDeleteButton + ' btn btn-danger btn-small'} onClick={this.onClickDelete}>
+        <a
+          className={`delete-button ${showDeleteButtonClass} btn btn-danger btn-small ${disabledClass}`}
+          onClick={onClick}
+        >
           <i className="fa fa-remove" />
         </a>
         <span className="confirm-delete-container">
-          <span className={'confirm-delete ' + showConfirm}>
+          <span className={`confirm-delete ${showConfirmClass}`}>
             <a className="btn btn-small" onClick={this.onClickCancel}>
               Cancel
             </a>
diff --git a/public/app/features/teams/TeamMembers.test.tsx b/public/app/features/teams/TeamMembers.test.tsx
index 64609f1fd79..f6f0b4a5e49 100644
--- a/public/app/features/teams/TeamMembers.test.tsx
+++ b/public/app/features/teams/TeamMembers.test.tsx
@@ -6,16 +6,17 @@ import { getMockTeamMember, getMockTeamMembers } from './__mocks__/teamMocks';
 import { SelectOptionItem } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 
+const signedInUserId = 1;
+const originalContextSrv = contextSrv;
+
 jest.mock('app/core/services/context_srv', () => ({
   contextSrv: {
     isGrafanaAdmin: false,
     hasRole: role => false,
-    user: { id: 1 },
+    user: { id: signedInUserId },
   },
 }));
 
-const originalContextSrv = contextSrv;
-
 interface SetupProps {
   propOverrides?: object;
   isGrafanaAdmin?: boolean;
@@ -64,7 +65,7 @@ describe('Render', () => {
   it('should render team members', () => {
     const { wrapper } = setup({
       propOverrides: {
-        members: getMockTeamMembers(5),
+        members: getMockTeamMembers(5, 5),
       },
     });
 
@@ -74,7 +75,7 @@ describe('Render', () => {
   it('should render team members when sync enabled', () => {
     const { wrapper } = setup({
       propOverrides: {
-        members: getMockTeamMembers(5),
+        members: getMockTeamMembers(5, 5),
         syncEnabled: true,
       },
     });
@@ -84,8 +85,7 @@ describe('Render', () => {
 
   describe('when feature toggle editorsCanAdmin is turned on', () => {
     it('should render permissions select if user is Grafana Admin', () => {
-      const members = getMockTeamMembers(5);
-      members[4].permission = TeamPermissionLevel.Admin;
+      const members = getMockTeamMembers(5, 5);
       const { wrapper } = setup({
         propOverrides: { members, editorsCanAdmin: true },
         isGrafanaAdmin: true,
@@ -96,8 +96,7 @@ describe('Render', () => {
     });
 
     it('should render permissions select if user is Org Admin', () => {
-      const members = getMockTeamMembers(5);
-      members[4].permission = TeamPermissionLevel.Admin;
+      const members = getMockTeamMembers(5, 5);
       const { wrapper } = setup({
         propOverrides: { members, editorsCanAdmin: true },
         isGrafanaAdmin: false,
@@ -108,8 +107,7 @@ describe('Render', () => {
     });
 
     it('should render permissions select if user is team admin', () => {
-      const members = getMockTeamMembers(5);
-      members[0].permission = TeamPermissionLevel.Admin;
+      const members = getMockTeamMembers(5, signedInUserId);
       const { wrapper } = setup({
         propOverrides: { members, editorsCanAdmin: true },
         isGrafanaAdmin: false,
@@ -118,6 +116,20 @@ describe('Render', () => {
 
       expect(wrapper).toMatchSnapshot();
     });
+
+    it('should render span and disable buttons if user is team member', () => {
+      const members = getMockTeamMembers(5, 5);
+      const { wrapper } = setup({
+        propOverrides: {
+          members,
+          editorsCanAdmin: true,
+        },
+        isGrafanaAdmin: false,
+        isOrgAdmin: false,
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });
 
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index 89ad24f9c58..fc5706ec68f 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -39,7 +39,7 @@ export class TeamMembers extends PureComponent<Props, State> {
   constructor(props) {
     super(props);
     this.state = { isAdding: false, newTeamMember: null };
-    this.renderPermissionsSelect = this.renderPermissionsSelect.bind(this);
+    this.renderPermissions = this.renderPermissions.bind(this);
   }
 
   componentDidMount() {
@@ -88,13 +88,19 @@ export class TeamMembers extends PureComponent<Props, State> {
     this.props.updateTeamMember(updatedTeamMember);
   };
 
-  renderPermissionsSelect(member: TeamMember) {
+  private isSignedInUserTeamAdmin = () => {
     const { members, editorsCanAdmin } = this.props;
     const userInMembers = members.find(m => m.userId === contextSrv.user.id);
-    const isUserTeamAdmin =
-      contextSrv.isGrafanaAdmin || contextSrv.hasRole(OrgRole.Admin)
-        ? true
-        : userInMembers && userInMembers.permission === TeamPermissionLevel.Admin;
+    const isAdmin = contextSrv.isGrafanaAdmin || contextSrv.hasRole(OrgRole.Admin);
+    const userIsTeamAdmin = userInMembers && userInMembers.permission === TeamPermissionLevel.Admin;
+    const isSignedInUserTeamAdmin = isAdmin || userIsTeamAdmin;
+
+    return isSignedInUserTeamAdmin || !editorsCanAdmin;
+  };
+
+  renderPermissions(member: TeamMember) {
+    const { editorsCanAdmin } = this.props;
+    const isUserTeamAdmin = this.isSignedInUserTeamAdmin();
     const value = teamsPermissionLevels.find(dp => dp.value === member.permission);
 
     return (
@@ -125,10 +131,10 @@ export class TeamMembers extends PureComponent<Props, State> {
         </td>
         <td>{member.login}</td>
         <td>{member.email}</td>
-        {this.renderPermissionsSelect(member)}
+        {this.renderPermissions(member)}
         {syncEnabled && this.renderLabels(member.labels)}
         <td className="text-right">
-          <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
+          <DeleteButton onConfirm={() => this.onRemoveMember(member)} disabled={!this.isSignedInUserTeamAdmin()} />
         </td>
       </tr>
     );
@@ -152,7 +158,11 @@ export class TeamMembers extends PureComponent<Props, State> {
 
           <div className="page-action-bar__spacer" />
 
-          <button className="btn btn-primary pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
+          <button
+            className="btn btn-primary pull-right"
+            onClick={this.onToggleAdding}
+            disabled={isAdding || !this.isSignedInUserTeamAdmin()}
+          >
             Add member
           </button>
         </div>
diff --git a/public/app/features/teams/__mocks__/teamMocks.ts b/public/app/features/teams/__mocks__/teamMocks.ts
index 3f0830eda16..f38f8f2b144 100644
--- a/public/app/features/teams/__mocks__/teamMocks.ts
+++ b/public/app/features/teams/__mocks__/teamMocks.ts
@@ -25,7 +25,7 @@ export const getMockTeam = (): Team => {
   };
 };
 
-export const getMockTeamMembers = (amount: number): TeamMember[] => {
+export const getMockTeamMembers = (amount: number, teamAdminId: number): TeamMember[] => {
   const teamMembers: TeamMember[] = [];
 
   for (let i = 1; i <= amount; i++) {
@@ -36,7 +36,7 @@ export const getMockTeamMembers = (amount: number): TeamMember[] => {
       email: 'test@test.com',
       login: `testUser-${i}`,
       labels: ['label 1', 'label 2'],
-      permission: TeamPermissionLevel.Member,
+      permission: i === teamAdminId ? TeamPermissionLevel.Admin : TeamPermissionLevel.Member,
     });
   }
 
diff --git a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
index 77b50436590..da89d26d191 100644
--- a/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
@@ -201,9 +201,41 @@ exports[`Render should render team members 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -211,6 +243,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -239,9 +272,41 @@ exports[`Render should render team members 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -249,6 +314,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -277,9 +343,41 @@ exports[`Render should render team members 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -287,6 +385,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -315,9 +414,41 @@ exports[`Render should render team members 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -325,6 +456,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -353,9 +485,41 @@ exports[`Render should render team members 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Can add/remove permissions, members and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -363,6 +527,7 @@ exports[`Render should render team members 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -484,9 +649,41 @@ exports[`Render should render team members when sync enabled 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -510,6 +707,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -538,9 +736,41 @@ exports[`Render should render team members when sync enabled 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -564,6 +794,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -592,9 +823,41 @@ exports[`Render should render team members when sync enabled 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -618,6 +881,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -646,9 +910,41 @@ exports[`Render should render team members when sync enabled 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Is team member",
+                      "label": "Member",
+                      "value": 0,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -672,6 +968,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -700,9 +997,41 @@ exports[`Render should render team members when sync enabled 1`] = `
               <div
                 className="gf-form"
               >
-                <span>
-                  Member
-                </span>
+                <Select
+                  autoFocus={false}
+                  backspaceRemovesValue={true}
+                  className="gf-form-select-box__control--menu-right"
+                  isClearable={false}
+                  isDisabled={false}
+                  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, members and delete team.",
+                        "label": "Admin",
+                        "value": 4,
+                      },
+                    ]
+                  }
+                  value={
+                    Object {
+                      "description": "Can add/remove permissions, members and delete team.",
+                      "label": "Admin",
+                      "value": 4,
+                    }
+                  }
+                  width={null}
+                />
               </div>
             </td>
           </Component>
@@ -726,6 +1055,7 @@ exports[`Render should render team members when sync enabled 1`] = `
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -888,6 +1218,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -958,6 +1289,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1028,6 +1360,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1098,6 +1431,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1168,6 +1502,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1330,6 +1665,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1400,6 +1736,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1470,6 +1807,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1540,6 +1878,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1610,6 +1949,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={false}
               onConfirm={[Function]}
             />
           </td>
@@ -1641,7 +1981,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
     />
     <button
       className="btn btn-primary pull-right"
-      disabled={false}
+      disabled={true}
       onClick={[Function]}
     >
       Add member
@@ -1730,41 +2070,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
               <div
                 className="gf-form"
               >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  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, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Can add/remove permissions, members and delete team.",
-                      "label": "Admin",
-                      "value": 4,
-                    }
-                  }
-                  width={null}
-                />
+                <span>
+                  Admin
+                </span>
               </div>
             </td>
           </Component>
@@ -1772,6 +2080,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={true}
               onConfirm={[Function]}
             />
           </td>
@@ -1800,41 +2109,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
               <div
                 className="gf-form"
               >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  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, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
+                <span>
+                  Member
+                </span>
               </div>
             </td>
           </Component>
@@ -1842,6 +2119,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={true}
               onConfirm={[Function]}
             />
           </td>
@@ -1870,41 +2148,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
               <div
                 className="gf-form"
               >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  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, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
+                <span>
+                  Member
+                </span>
               </div>
             </td>
           </Component>
@@ -1912,6 +2158,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={true}
               onConfirm={[Function]}
             />
           </td>
@@ -1940,41 +2187,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
               <div
                 className="gf-form"
               >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  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, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
+                <span>
+                  Member
+                </span>
               </div>
             </td>
           </Component>
@@ -1982,6 +2197,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={true}
               onConfirm={[Function]}
             />
           </td>
@@ -2010,41 +2226,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
               <div
                 className="gf-form"
               >
-                <Select
-                  autoFocus={false}
-                  backspaceRemovesValue={true}
-                  className="gf-form-select-box__control--menu-right"
-                  isClearable={false}
-                  isDisabled={false}
-                  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, members and delete team.",
-                        "label": "Admin",
-                        "value": 4,
-                      },
-                    ]
-                  }
-                  value={
-                    Object {
-                      "description": "Is team member",
-                      "label": "Member",
-                      "value": 0,
-                    }
-                  }
-                  width={null}
-                />
+                <span>
+                  Member
+                </span>
               </div>
             </td>
           </Component>
@@ -2052,6 +2236,294 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
             className="text-right"
           >
             <DeleteButton
+              disabled={true}
+              onConfirm={[Function]}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Render when feature toggle editorsCanAdmin is turned on should render span and disable buttons if user is team member 1`] = `
+<div>
+  <div
+    className="page-action-bar"
+  >
+    <div
+      className="gf-form gf-form--grow"
+    >
+      <ForwardRef
+        inputClassName="gf-form-input"
+        labelClassName="gf-form--has-input-icon gf-form--grow"
+        onChange={[Function]}
+        placeholder="Search members"
+        value=""
+      />
+    </div>
+    <div
+      className="page-action-bar__spacer"
+    />
+    <button
+      className="btn btn-primary pull-right"
+      disabled={true}
+      onClick={[Function]}
+    >
+      Add member
+    </button>
+  </div>
+  <Component
+    in={false}
+  >
+    <div
+      className="cta-form"
+    >
+      <button
+        className="cta-form__close btn btn-transparent"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-close"
+        />
+      </button>
+      <h5>
+        Add team member
+      </h5>
+      <div
+        className="gf-form-inline"
+      >
+        <UserPicker
+          className="min-width-30"
+          onSelected={[Function]}
+        />
+      </div>
+    </div>
+  </Component>
+  <div
+    className="admin-list-table"
+  >
+    <table
+      className="filter-table filter-table--hover form-inline"
+    >
+      <thead>
+        <tr>
+          <th />
+          <th>
+            Name
+          </th>
+          <th>
+            Email
+          </th>
+          <Component
+            featureToggle={true}
+          >
+            <th>
+              Permission
+            </th>
+          </Component>
+          <th
+            style={
+              Object {
+                "width": "1%",
+              }
+            }
+          />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          key="1"
+        >
+          <td
+            className="width-4 text-center"
+          >
+            <img
+              className="filter-table__avatar"
+              src="some/url/"
+            />
+          </td>
+          <td>
+            testUser-1
+          </td>
+          <td>
+            test@test.com
+          </td>
+          <Component
+            featureToggle={true}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <span>
+                  Member
+                </span>
+              </div>
+            </td>
+          </Component>
+          <td
+            className="text-right"
+          >
+            <DeleteButton
+              disabled={true}
+              onConfirm={[Function]}
+            />
+          </td>
+        </tr>
+        <tr
+          key="2"
+        >
+          <td
+            className="width-4 text-center"
+          >
+            <img
+              className="filter-table__avatar"
+              src="some/url/"
+            />
+          </td>
+          <td>
+            testUser-2
+          </td>
+          <td>
+            test@test.com
+          </td>
+          <Component
+            featureToggle={true}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <span>
+                  Member
+                </span>
+              </div>
+            </td>
+          </Component>
+          <td
+            className="text-right"
+          >
+            <DeleteButton
+              disabled={true}
+              onConfirm={[Function]}
+            />
+          </td>
+        </tr>
+        <tr
+          key="3"
+        >
+          <td
+            className="width-4 text-center"
+          >
+            <img
+              className="filter-table__avatar"
+              src="some/url/"
+            />
+          </td>
+          <td>
+            testUser-3
+          </td>
+          <td>
+            test@test.com
+          </td>
+          <Component
+            featureToggle={true}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <span>
+                  Member
+                </span>
+              </div>
+            </td>
+          </Component>
+          <td
+            className="text-right"
+          >
+            <DeleteButton
+              disabled={true}
+              onConfirm={[Function]}
+            />
+          </td>
+        </tr>
+        <tr
+          key="4"
+        >
+          <td
+            className="width-4 text-center"
+          >
+            <img
+              className="filter-table__avatar"
+              src="some/url/"
+            />
+          </td>
+          <td>
+            testUser-4
+          </td>
+          <td>
+            test@test.com
+          </td>
+          <Component
+            featureToggle={true}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <span>
+                  Member
+                </span>
+              </div>
+            </td>
+          </Component>
+          <td
+            className="text-right"
+          >
+            <DeleteButton
+              disabled={true}
+              onConfirm={[Function]}
+            />
+          </td>
+        </tr>
+        <tr
+          key="5"
+        >
+          <td
+            className="width-4 text-center"
+          >
+            <img
+              className="filter-table__avatar"
+              src="some/url/"
+            />
+          </td>
+          <td>
+            testUser-5
+          </td>
+          <td>
+            test@test.com
+          </td>
+          <Component
+            featureToggle={true}
+          >
+            <td>
+              <div
+                className="gf-form"
+              >
+                <span>
+                  Admin
+                </span>
+              </div>
+            </td>
+          </Component>
+          <td
+            className="text-right"
+          >
+            <DeleteButton
+              disabled={true}
               onConfirm={[Function]}
             />
           </td>
diff --git a/public/app/features/teams/state/selectors.test.ts b/public/app/features/teams/state/selectors.test.ts
index e88fbdfd4b1..1721437c929 100644
--- a/public/app/features/teams/state/selectors.test.ts
+++ b/public/app/features/teams/state/selectors.test.ts
@@ -40,7 +40,7 @@ describe('Team selectors', () => {
   });
 
   describe('Get members', () => {
-    const mockTeamMembers = getMockTeamMembers(5);
+    const mockTeamMembers = getMockTeamMembers(5, 5);
 
     it('should return team members', () => {
       const mockState: TeamState = {