Skip to content

N
nexpie-grafana-theme
Commit 467b7a40 by Hugo Häggmark Committed by Leonard Gram
Options

teams: feature toggle component

parent aedc4782
Showing with 453 additions and 392 deletions
public/app/core/components/WithFeatureToggle.tsx 0 → 100644
import React, { FunctionComponent } from 'react';
export interface Props {
featureToggle: boolean;
}
export const WithFeatureToggle: FunctionComponent<Props> = ({ featureToggle, children }) => {
if (featureToggle === true) {
return <>{children}</>;
}
return null;
};
public/app/features/teams/TeamMembers.tsx
...@@ -8,6 +8,8 @@ import { TeamMember, User, teamsPermissionLevels } from 'app/types'; ...@@ -8,6 +8,8 @@ import { TeamMember, User, teamsPermissionLevels } from 'app/types';
import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions'; import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
import { getSearchMemberQuery, getTeamMembers } from './state/selectors'; import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
import { config } from 'app/core/config';
export interface Props { export interface Props {
members: TeamMember[]; members: TeamMember[];
...@@ -78,18 +80,20 @@ export class TeamMembers extends PureComponent<Props, State> { ...@@ -78,18 +80,20 @@ export class TeamMembers extends PureComponent<Props, State> {
</td> </td>
<td>{member.login}</td> <td>{member.login}</td>
<td>{member.email}</td> <td>{member.email}</td>
<td> <WithFeatureToggle featureToggle={config.editorsCanOwn}>
<div className="gf-form"> <td>
<Select <div className="gf-form">
isSearchable={false} <Select
options={teamsPermissionLevels} isSearchable={false}
onChange={() => {}} options={teamsPermissionLevels}
className="gf-form-select-box__control--menu-right" onChange={() => {}}
value={currentPermissionLevel} className="gf-form-select-box__control--menu-right"
isDisabled={true} value={currentPermissionLevel}
/> isDisabled={true}
</div> />
</td>{' '} </div>
</td>
</WithFeatureToggle>
{syncEnabled && this.renderLabels(member.labels)} {syncEnabled && this.renderLabels(member.labels)}
<td className="text-right"> <td className="text-right">
<DeleteButton onConfirm={() => this.onRemoveMember(member)} /> <DeleteButton onConfirm={() => this.onRemoveMember(member)} />
...@@ -145,7 +149,9 @@ export class TeamMembers extends PureComponent<Props, State> { ...@@ -145,7 +149,9 @@ export class TeamMembers extends PureComponent<Props, State> {
<th /> <th />
<th>Name</th> <th>Name</th>
<th>Email</th> <th>Email</th>
<th>Permission</th> <WithFeatureToggle featureToggle={config.editorsCanOwn}>
<th>Permission</th>
</WithFeatureToggle>
{syncEnabled && <th />} {syncEnabled && <th />}
<th style={{ width: '1%' }} /> <th style={{ width: '1%' }} />
</tr> </tr>
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
...@@ -69,9 +69,13 @@ exports[`Render should render component 1`] = ` ...@@ -69,9 +69,13 @@ exports[`Render should render component 1`] = `
<th> <th>
Email Email
</th> </th>
<th> <Component
Permission featureToggle={false}
</th> >
<th>
Permission
</th>
</Component>
<th <th
style={ style={
Object { Object {
...@@ -156,9 +160,13 @@ exports[`Render should render team members 1`] = ` ...@@ -156,9 +160,13 @@ exports[`Render should render team members 1`] = `
<th> <th>
Email Email
</th> </th>
<th> <Component
Permission featureToggle={false}
</th> >
<th>
Permission
</th>
</Component>
<th <th
style={ style={
Object { Object {
...@@ -186,48 +194,51 @@ exports[`Render should render team members 1`] = ` ...@@ -186,48 +194,51 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td <td
className="text-right" className="text-right"
> >
...@@ -253,48 +264,51 @@ exports[`Render should render team members 1`] = ` ...@@ -253,48 +264,51 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td <td
className="text-right" className="text-right"
> >
...@@ -320,48 +334,51 @@ exports[`Render should render team members 1`] = ` ...@@ -320,48 +334,51 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td <td
className="text-right" className="text-right"
> >
...@@ -387,48 +404,51 @@ exports[`Render should render team members 1`] = ` ...@@ -387,48 +404,51 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td <td
className="text-right" className="text-right"
> >
...@@ -454,48 +474,51 @@ exports[`Render should render team members 1`] = ` ...@@ -454,48 +474,51 @@ exports[`Render should render team members 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td <td
className="text-right" className="text-right"
> >
...@@ -579,9 +602,13 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -579,9 +602,13 @@ exports[`Render should render team members when sync enabled 1`] = `
<th> <th>
Email Email
</th> </th>
<th> <Component
Permission featureToggle={false}
</th> >
<th>
Permission
</th>
</Component>
<th /> <th />
<th <th
style={ style={
...@@ -610,48 +637,51 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -610,48 +637,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
...@@ -693,48 +723,51 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -693,48 +723,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
...@@ -776,48 +809,51 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -776,48 +809,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
...@@ -859,48 +895,51 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -859,48 +895,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
...@@ -942,48 +981,51 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -942,48 +981,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td> <td>
test@test.com test@test.com
</td> </td>
<td> <Component
<div featureToggle={false}
className="gf-form" >
> <td>
<Select <div
autoFocus={false} className="gf-form"
backspaceRemovesValue={true} >
className="gf-form-select-box__control--menu-right" <Select
isClearable={false} autoFocus={false}
isDisabled={true} backspaceRemovesValue={true}
isLoading={false} className="gf-form-select-box__control--menu-right"
isMulti={false} isClearable={false}
isSearchable={false} isDisabled={true}
maxMenuHeight={300} isLoading={false}
onChange={[Function]} isMulti={false}
openMenuOnFocus={false} isSearchable={false}
options={ maxMenuHeight={300}
Array [ 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 { Object {
"description": "Is team member", "description": "Is team member",
"label": "Member", "label": "Member",
"value": 0, "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}
width={null} />
/> </div>
</div> </td>
</td> </Component>
<td> <td>
<TagBadge <TagBadge
count={0} count={0}
......
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