teams: enabled so that user can update permission for team members

public/app/features/teams/TeamMembers.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { TeamMembers, Props, State } from './TeamMembers';
-import { TeamMember } from '../../types';
+import { TeamMember, TeamPermissionLevel } from '../../types';
 import { getMockTeamMember, getMockTeamMembers } from './__mocks__/teamMocks';
+import { SelectOptionItem } from '@grafana/ui';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -12,6 +13,7 @@ const setup = (propOverrides?: object) => {
     loadTeamMembers: jest.fn(),
     addTeamMember: jest.fn(),
     removeTeamMember: jest.fn(),
+    updateTeamMember: jest.fn(),
     syncEnabled: false,
   };
 
@@ -86,4 +88,24 @@ describe('Functions', () => {
 
     expect(instance.props.addTeamMember).toHaveBeenCalledWith(1);
   });
+
+  describe('on update permision for user in team', () => {
+    const { instance } = setup();
+    const permission = TeamPermissionLevel.Admin;
+    const item: SelectOptionItem = { value: permission };
+    const member: TeamMember = {
+      userId: 3,
+      teamId: 2,
+      avatarUrl: '',
+      email: 'user@user.org',
+      labels: [],
+      login: 'member',
+      permission: TeamPermissionLevel.Member,
+    };
+    const expectedTeamMemeber = { ...member, permission };
+
+    instance.onPermissionChange(item, member);
+
+    expect(instance.props.updateTeamMember).toHaveBeenCalledWith(expectedTeamMemeber);
+  });
 });

public/app/features/teams/TeamMembers.tsx

@@ -2,10 +2,16 @@ 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, Select } from '@grafana/ui';
+import { DeleteButton, Select, SelectOptionItem } from '@grafana/ui';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User, teamsPermissionLevels } from 'app/types';
-import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
+import {
+  loadTeamMembers,
+  addTeamMember,
+  removeTeamMember,
+  setSearchMemberQuery,
+  updateTeamMember,
+} from './state/actions';
 import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
@@ -18,6 +24,7 @@ export interface Props {
   addTeamMember: typeof addTeamMember;
   removeTeamMember: typeof removeTeamMember;
   setSearchMemberQuery: typeof setSearchMemberQuery;
+  updateTeamMember: typeof updateTeamMember;
   syncEnabled: boolean;
 }
 
@@ -71,8 +78,14 @@ export class TeamMembers extends PureComponent<Props, State> {
     );
   }
 
+  onPermissionChange = (item: SelectOptionItem, member: TeamMember) => {
+    const permission = item.value;
+    const updatedTeamMember = { ...member, permission };
+
+    this.props.updateTeamMember(updatedTeamMember);
+  };
+
   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">
@@ -86,10 +99,9 @@ export class TeamMembers extends PureComponent<Props, State> {
               <Select
                 isSearchable={false}
                 options={teamsPermissionLevels}
-                onChange={() => {}}
+                onChange={item => this.onPermissionChange(item, member)}
                 className="gf-form-select-box__control--menu-right"
-                value={currentPermissionLevel}
+                value={teamsPermissionLevels.find(dp => dp.value === member.permission)}
-                isDisabled={true}
               />
             </div>
           </td>
@@ -176,6 +188,7 @@ const mapDispatchToProps = {
   addTeamMember,
   removeTeamMember,
   setSearchMemberQuery,
+  updateTeamMember,
 };
 
 export default connect(

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -206,7 +206,7 @@ exports[`Render should render team members 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -276,7 +276,7 @@ exports[`Render should render team members 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -346,7 +346,7 @@ exports[`Render should render team members 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -416,7 +416,7 @@ exports[`Render should render team members 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -486,7 +486,7 @@ exports[`Render should render team members 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -649,7 +649,7 @@ exports[`Render should render team members when sync enabled 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -735,7 +735,7 @@ exports[`Render should render team members when sync enabled 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -821,7 +821,7 @@ exports[`Render should render team members when sync enabled 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -907,7 +907,7 @@ exports[`Render should render team members when sync enabled 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}
@@ -993,7 +993,7 @@ exports[`Render should render team members when sync enabled 1`] = `
                   backspaceRemovesValue={true}
                   className="gf-form-select-box__control--menu-right"
                   isClearable={false}
-                  isDisabled={true}
+                  isDisabled={false}
                   isLoading={false}
                   isMulti={false}
                   isSearchable={false}

public/app/features/teams/state/actions.ts

@@ -160,3 +160,12 @@ export function deleteTeam(id: number): ThunkResult<void> {
     dispatch(loadTeams());
   };
 }
+
+export function updateTeamMember(member: TeamMember): ThunkResult<void> {
+  return async dispatch => {
+    await getBackendSrv().put(`/api/teams/${member.teamId}/members/${member.userId}`, {
+      permission: member.permission,
+    });
+    dispatch(loadTeamMembers());
+  };
+}