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';
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>
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
......@@ -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}
......
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