IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

teams: feature toggle component

Browse Source
This commit is contained in:
Hugo Häggmark 2019-03-08 10:46:52 +01:00 committed by Leonard Gram
parent aedc478208
commit 467b7a40d8
3 changed files with 453 additions and 392 deletions
public/app
core/components
WithFeatureToggle.tsx
features/teams
TeamMembers.tsx
__snapshots__
TeamMembers.test.tsx.snap

13
public/app/core/components/WithFeatureToggle.tsx Normal file
View File

@ -0,0 +1,13 @@
import React, { FunctionComponent } from 'react';
export interface Props {
featureToggle: boolean;
}
export const WithFeatureToggle: FunctionComponent<Props> = ({ featureToggle, children }) => {
if (featureToggle === true) {
return <>{children}</>;
}
return null;
};

32
public/app/features/teams/TeamMembers.tsx
View File

@ -8,6 +8,8 @@ import { TeamMember, User, teamsPermissionLevels } from 'app/types';
import { loadTeamMembers, addTeamMember, removeTeamMember, setSearchMemberQuery } from './state/actions';
import { getSearchMemberQuery, getTeamMembers } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
import { config } from 'app/core/config';
export interface Props {
members: TeamMember[];
@ -78,18 +80,20 @@ export class TeamMembers extends PureComponent<Props, State> {
</td>
<td>{member.login}</td>
<td>{member.email}</td>
<td>
<div className="gf-form">
<Select
isSearchable={false}
options={teamsPermissionLevels}
onChange={() => {}}
className="gf-form-select-box__control--menu-right"
value={currentPermissionLevel}
isDisabled={true}
/>
</div>
</td>{' '}
<WithFeatureToggle featureToggle={config.editorsCanOwn}>
<td>
<div className="gf-form">
<Select
isSearchable={false}
options={teamsPermissionLevels}
onChange={() => {}}
className="gf-form-select-box__control--menu-right"
value={currentPermissionLevel}
isDisabled={true}
/>
</div>
</td>
</WithFeatureToggle>
{syncEnabled && this.renderLabels(member.labels)}
<td className="text-right">
<DeleteButton onConfirm={() => this.onRemoveMember(member)} />
@ -145,7 +149,9 @@ export class TeamMembers extends PureComponent<Props, State> {
<th />
<th>Name</th>
<th>Email</th>
<th>Permission</th>
<WithFeatureToggle featureToggle={config.editorsCanOwn}>
<th>Permission</th>
</WithFeatureToggle>
{syncEnabled && <th />}
<th style={{ width: '1%' }} />
</tr>

800
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
View File

@ -69,9 +69,13 @@ exports[`Render should render component 1`] = `
<th>
Email
</th>
<th>
Permission
</th>
<Component
featureToggle={false}
>
<th>
Permission
</th>
</Component>
<th
style={
Object {
@ -156,9 +160,13 @@ exports[`Render should render team members 1`] = `
<th>
Email
</th>
<th>
Permission
</th>
<Component
featureToggle={false}
>
<th>
Permission
</th>
</Component>
<th
style={
Object {
@ -186,48 +194,51 @@ exports[`Render should render team members 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td
className="text-right"
>
@ -253,48 +264,51 @@ exports[`Render should render team members 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td
className="text-right"
>
@ -320,48 +334,51 @@ exports[`Render should render team members 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td
className="text-right"
>
@ -387,48 +404,51 @@ exports[`Render should render team members 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td
className="text-right"
>
@ -454,48 +474,51 @@ exports[`Render should render team members 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td
className="text-right"
>
@ -579,9 +602,13 @@ exports[`Render should render team members when sync enabled 1`] = `
<th>
Email
</th>
<th>
Permission
</th>
<Component
featureToggle={false}
>
<th>
Permission
</th>
</Component>
<th />
<th
style={
@ -610,48 +637,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}
@ -693,48 +723,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}
@ -776,48 +809,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}
@ -859,48 +895,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}
@ -942,48 +981,51 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
<Component
featureToggle={false}
>
<td>
<div
className="gf-form"
>
<Select
autoFocus={false}
backspaceRemovesValue={true}
className="gf-form-select-box__control--menu-right"
isClearable={false}
isDisabled={true}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
},
Object {
"description": "Can add/remove permissions and delete team.",
"label": "Admin",
"value": 4,
},
]
}
value={
Object {
"description": "Is team member",
"label": "Member",
"value": 0,
}
}
}
width={null}
/>
</div>
</td>
width={null}
/>
</div>
</td>
</Component>
<td>
<TagBadge
count={0}