Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design edits #8

Merged
merged 2 commits into from
Jul 31, 2018
Merged

Design edits #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11f46e7
Fixed page layout
cchaos Jul 30, 2018
dca5d36
Design edits
cchaos Jul 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import {
EuiButton,
EuiButtonEmpty,
EuiOverlayMask,
EuiConfirmModal,
} from '@elastic/eui';
Expand All @@ -29,9 +29,9 @@ export class DeleteRoleButton extends Component {

return (
<Fragment>
<EuiButton color={'danger'} iconType={'trash'} onClick={this.showModal}>
Delete Role
</EuiButton>
<EuiButtonEmpty color={'danger'} onClick={this.showModal}>
Delete role
</EuiButtonEmpty>
{this.maybeShowModal()}
</Fragment>
);
Expand Down
23 changes: 13 additions & 10 deletions x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiButton,
EuiPageBody,
} from '@elastic/eui';
import { saveRole, deleteRole } from '../../../../objects';
import { isReservedRole } from '../../../../lib/role';
Expand Down Expand Up @@ -53,22 +54,24 @@ export class EditRolePage extends Component {

render() {
return (
<EuiPage className="editRolePage">
<EuiForm {...this.state.formError}>
{this.getFormTitle()}
<EuiPage className="editRolePage" restrictWidth>
<EuiPageBody>
<EuiForm {...this.state.formError}>
{this.getFormTitle()}

<EuiSpacer />
<EuiSpacer />

{this.getRoleName()}
{this.getRoleName()}

{this.getElasticsearchPrivileges()}
{this.getElasticsearchPrivileges()}

{this.getKibanaPrivileges()}
{this.getKibanaPrivileges()}

<EuiSpacer />
<EuiSpacer />

{this.getFormButtons()}
</EuiForm>
{this.getFormButtons()}
</EuiForm>
</EuiPageBody>
</EuiPage>
);
}
Expand Down
85 changes: 42 additions & 43 deletions ...blic/views/management/edit_role/components/privileges/kibana/privilege_callout_warning.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,60 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import {
EuiCallOut
} from '@elastic/eui';
import { NO_PRIVILEGE_VALUE } from '../../../lib/constants';

export const PrivilegeCalloutWarning = ({ basePrivilege, isReservedRole }) => {
if (basePrivilege === 'all') {
return (
<EuiCallOut color="warning" iconType="iInCircle" title={'Hey, this is important!'}>
<p>
Setting the minimum privilege to <strong>all</strong> grants full access to all spaces.<br />
{getCorrectiveActionText(basePrivilege, isReservedRole)}
</p>
</EuiCallOut>
);
if (isReservedRole) {
return (
<EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
<p>
This role always grants full access to all spaces.
To customize privileges for individual spaces, you must create a new role.
</p>
</EuiCallOut>
);
} else {
return (
<EuiCallOut color="warning" iconType="iInCircle" title={'Minimum privilege is too high to customize individual spaces'}>
<p>
Setting the minimum privilege to <strong>all</strong> grants full access to all spaces.
To customize privileges for individual spaces,
the minimum privilege must be either <strong>read</strong> or <strong>none</strong>.
</p>
</EuiCallOut>
);
}
}

if (basePrivilege === 'read') {
if (isReservedRole) {
return (
<EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
<p>
This role always grants read access to all spaces.
To customize privileges for individual spaces, you must create a new role.
</p>
</EuiCallOut>
);
} else {
return (
<EuiCallOut color="primary" iconType="iInCircle" title={'Lowest possible privilege is \'read\''} />
);
}
}

if (basePrivilege === NO_PRIVILEGE_VALUE && isReservedRole) {
return (
<EuiCallOut color="primary" iconType="iInCircle" title={'Hey, this is important!'} size={'s'}>
<EuiCallOut color="warning" iconType="iInCircle" title={'Cannot customize a reserved role\'s space privileges'}>
<p>
Setting the minimum privilege to <strong>read</strong> grants a minimum of read access to all spaces.<br />
{getCorrectiveActionText(basePrivilege, isReservedRole)}
This role never grants access to any spaces within Kibana.
To customize privileges for individual spaces, you must create a new role.
</p>
</EuiCallOut>
);
Expand All @@ -35,37 +65,6 @@ export const PrivilegeCalloutWarning = ({ basePrivilege, isReservedRole }) => {
return null;
};

function getCorrectiveActionText(basePrivilege, isReservedRole) {
if (basePrivilege === 'all') {
return isReservedRole
? (
<Fragment>
To customize privileges for individual spaces, create a new role,
and set the minimum privilege to either <strong>read</strong> or <strong>none</strong>
</Fragment>
)
: (
<Fragment>
To customize privileges for individual spaces, set the minimum privilege to either <strong>read</strong> or <strong>none</strong>
</Fragment>
);
}
if (basePrivilege === 'read') {
return isReservedRole
? (
<Fragment>
To restrict access to individual spaces, create a new role,
and set the minimum privilege to <strong>none</strong>
</Fragment>
)
: (
<Fragment>
To restrict access to individual spaces, set the minimum privilege to <strong>none</strong>
</Fragment>
);
}
}

PrivilegeCalloutWarning.propTypes = {
basePrivilege: PropTypes.string.isRequired,
isReservedRole: PropTypes.bool.isRequired,
Expand Down
3 changes: 3 additions & 0 deletions ...rity/public/views/management/edit_role/components/privileges/kibana/privilege_selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export class PrivilegeSelector extends Component {
value: PropTypes.string,
allowNone: PropTypes.bool,
disabled: PropTypes.bool,
compressed: PropTypes.bool,
};

state = {}
Expand All @@ -29,6 +30,7 @@ export class PrivilegeSelector extends Component {
value,
disabled,
allowNone,
compressed,
} = this.props;

const options = [];
Expand All @@ -48,6 +50,7 @@ export class PrivilegeSelector extends Component {
value={value || ''}
onChange={this.onChange}
disabled={disabled}
compressed={compressed}
/>
);
}
Expand Down
8 changes: 5 additions & 3 deletions ...y/public/views/management/edit_role/components/privileges/kibana/privilege_space_table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,14 @@ export class PrivilegeSpaceTable extends Component {

return (
<EuiInMemoryTable
hasActions
columns={[{
field: 'space',
name: 'Space',
width: '60%',
width: '50%',
render: (space) => (
<EuiFlexGroup responsive={false} alignItems={'center'}>
<EuiFlexItem grow={false}><SpaceAvatar space={space} /></EuiFlexItem>
<EuiFlexGroup gutterSize="s" responsive={false} alignItems={'center'}>
<EuiFlexItem grow={false}><SpaceAvatar space={space} size="s" /></EuiFlexItem>
<EuiFlexItem><EuiText>{space.name}</EuiText></EuiFlexItem>
</EuiFlexGroup>
)
Expand All @@ -59,6 +60,7 @@ export class PrivilegeSpaceTable extends Component {
value={privilege}
disabled={isReservedRole(role)}
onChange={this.onSpacePermissionChange(record)}
compressed
/>
);
}
Expand Down
67 changes: 37 additions & 30 deletions ...lic/views/management/edit_role/components/privileges/kibana/space_aware_privilege_form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
EuiButton,
EuiText,
EuiTitle,
EuiHorizontalRule,
} from '@elastic/eui';
import { isReservedRole } from '../../../../../../lib/role';
import { copyRole } from '../../../lib/copy_role';
Expand Down Expand Up @@ -64,13 +63,27 @@ export class SpaceAwarePrivilegeForm extends Component {

const basePrivilege = assignedPrivileges[ALL_RESOURCE].length > 0 ? assignedPrivileges[ALL_RESOURCE][0] : NO_PRIVILEGE_VALUE;

const description = (<p>Specifies the lowest permission level for all spaces, unless a custom privilege is specified.</p>);

let helptext;
if (basePrivilege === NO_PRIVILEGE_VALUE) {
helptext = "No access";
} else if (basePrivilege === 'all') {
helptext = "View, edit, and share all objects and apps within all spaces";
} else if (basePrivilege === 'read') {
helptext = "View only mode";
}

return (
<Fragment>
<EuiDescribedFormGroup
title={<p>Minimum privilege</p>}
description={<p>Specifies the lowest permission level for all spaces.</p>}
title={<h3>Minimum privilege</h3>}
description={description}
>
<EuiFormRow hasEmptyLabelSpace>
<EuiFormRow
hasEmptyLabelSpace
helpText={helptext}
>
<PrivilegeSelector
availablePrivileges={availablePrivileges}
value={basePrivilege}
Expand All @@ -82,16 +95,13 @@ export class SpaceAwarePrivilegeForm extends Component {
</EuiDescribedFormGroup>

<EuiSpacer />

{this.renderSpacePrivileges(basePrivilege, availablePrivileges)}
</Fragment>
);
}

renderSpacePrivileges = (basePrivilege, availablePrivileges) => {
if (basePrivilege === 'all') {
return <PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />;
}

const {
role,
spaces,
Expand All @@ -107,21 +117,24 @@ export class SpaceAwarePrivilegeForm extends Component {
<Fragment>
<EuiTitle size={'xs'}><h3>Space privileges</h3></EuiTitle>
<EuiSpacer size={'s'} />
<EuiText size={'s'} color={'subdued'}>
<EuiText grow={false} size={'s'} color={'subdued'}>
<p>
Customize permission levels on a per space basis.
If a space is not listed, its permissions will default to the minimum privilege specified above.
Customize permission levels per space.
If a space is not customized, its permissions will default to the minimum privilege specified above.
</p>
{basePrivilege !== 'all' && this.props.editable && (
<p>You can bulk-create space privileges though they will be saved individually upon saving the role.</p>
)}
</EuiText>

{
basePrivilege === 'read'
&& (this.state.privilegeForms.length > 0 || Object.keys(this.state.spacePrivileges).length > 0)
&& <PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />
{(basePrivilege !== NO_PRIVILEGE_VALUE || isReservedRole(this.props.role)) &&
<PrivilegeCalloutWarning basePrivilege={basePrivilege} isReservedRole={isReservedRole(this.props.role)} />
}

<EuiFormRow fullWidth>
<div>
{basePrivilege === 'read' && this.props.editable && <EuiSpacer />}

{basePrivilege !== 'all' && (
<Fragment>
<PrivilegeSpaceTable
role={role}
spaces={spaces}
Expand All @@ -130,20 +143,18 @@ export class SpaceAwarePrivilegeForm extends Component {
onChange={this.onExistingSpacePrivilegesChange}
/>

{(Object.keys(this.state.spacePrivileges).length > 0) && <EuiSpacer />}

{this.props.editable && (
<Fragment>
{this.state.privilegeForms.map((form, index) => this.getSpaceForm(form, index, basePrivilege))}
{availableSpaces.length > 0 &&
<Fragment>
<EuiSpacer />
<EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addSpacePrivilege}>Add space privilege</EuiButton>
</Fragment>
<EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addSpacePrivilege}>Add space privilege</EuiButton>
}
</Fragment>
)}
</div>

</EuiFormRow>
</Fragment>
)}
</Fragment>
);
}
Expand Down Expand Up @@ -189,13 +200,8 @@ export class SpaceAwarePrivilegeForm extends Component {

const availableSpaces = this.getAvailableSpaces(index);

const isFirst = index === 0;

const startingElement = isFirst ? <EuiSpacer /> : <EuiHorizontalRule />;

return (
<Fragment>
{startingElement}
<Fragment key={index}>
<PrivilegeSpaceForm
key={index}
availableSpaces={availableSpaces}
Expand All @@ -205,6 +211,7 @@ export class SpaceAwarePrivilegeForm extends Component {
onChange={this.onPrivilegeSpacePermissionChange(index)}
onDelete={this.onPrivilegeSpacePermissionDelete(index)}
/>
<EuiSpacer />
</Fragment>
);
}
Expand Down
8 changes: 1 addition & 7 deletions x-pack/plugins/security/public/views/management/edit_role/edit_role.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
#editRoleReactRoot {
background: #f5f5f5;
flex-grow: 1;
}

.editRolePage {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
min-height: ~"calc(100vh - 70px)";
}