Commit b82b94a2 by Hugo Häggmark Committed by Leonard Gram

teams: disable buttons for team members

parent b60e71c2
......@@ -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>
......
......@@ -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();
});
});
});
......
......@@ -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>
......
......@@ -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,
});
}
......
......@@ -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,34 +736,67 @@ exports[`Render should render team members when sync enabled 1`] = `
<div
className="gf-form"
>
<span>
Member
</span>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}
key="label 1"
label="label 1"
onClick={[Function]}
removeIcon={false}
/>
<TagBadge
count={0}
key="label 2"
label="label 2"
onClick={[Function]}
removeIcon={false}
/>
</td>
<td
className="text-right"
>
<DeleteButton
onConfirm={[Function]}
/>
<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>
<td>
<TagBadge
count={0}
key="label 1"
label="label 1"
onClick={[Function]}
removeIcon={false}
/>
<TagBadge
count={0}
key="label 2"
label="label 2"
onClick={[Function]}
removeIcon={false}
/>
</td>
<td
className="text-right"
>
<DeleteButton
disabled={false}
onConfirm={[Function]}
/>
</td>
</tr>
<tr
......@@ -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,296 @@ 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>
<td
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>
......@@ -2052,6 +2523,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
className="text-right"
>
<DeleteButton
disabled={true}
onConfirm={[Function]}
/>
</td>
......
......@@ -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 = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment