[Spaces] - Space aware privileges UI

x-pack/index.js

@@ -31,6 +31,7 @@ module.exports = function (kibana) {
     graph(kibana),
     monitoring(kibana),
     reporting(kibana),
+    spaces(kibana),
     security(kibana),
     searchprofiler(kibana),
     ml(kibana),
@@ -44,7 +45,6 @@ module.exports = function (kibana) {
     cloud(kibana),
     indexManagement(kibana),
     consoleExtensions(kibana),
-    spaces(kibana),
     notifications(kibana),
     kueryAutocomplete(kibana)
   ];

x-pack/plugins/security/index.js

@@ -27,7 +27,7 @@ export const security = (kibana) => new kibana.Plugin({
   id: 'security',
   configPrefix: 'xpack.security',
   publicDir: resolve(__dirname, 'public'),
-  require: ['kibana', 'elasticsearch', 'xpack_main'],
+  require: ['kibana', 'elasticsearch', 'xpack_main', 'spaces'],
 
   config(Joi) {
     return Joi.object({

x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.js

@@ -7,7 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
-  EuiButton,
+  EuiButtonEmpty,
   EuiOverlayMask,
   EuiConfirmModal,
 } from '@elastic/eui';
@@ -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>
     );

x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.test.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import {
-  EuiButton,
+  EuiButtonEmpty,
   EuiConfirmModal,
 } from '@elastic/eui';
 import { DeleteRoleButton } from './delete_role_button';
@@ -18,15 +18,15 @@ import {
 test('it renders without crashing', () => {
   const deleteHandler = jest.fn();
   const wrapper = shallow(<DeleteRoleButton canDelete={true} onDelete={deleteHandler} />);
-  expect(wrapper.find(EuiButton)).toHaveLength(1);
+  expect(wrapper.find(EuiButtonEmpty)).toHaveLength(1);
   expect(deleteHandler).toHaveBeenCalledTimes(0);
 });
 
 test('it shows a confirmation dialog when clicked', () => {
   const deleteHandler = jest.fn();
   const wrapper = mount(<DeleteRoleButton canDelete={true} onDelete={deleteHandler} />);
 
-  wrapper.find(EuiButton).simulate('click');
+  wrapper.find(EuiButtonEmpty).simulate('click');
 
   expect(wrapper.find(EuiConfirmModal)).toHaveLength(1);
 

x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js

@@ -19,6 +19,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiPageBody,
 } from '@elastic/eui';
 import { saveRole, deleteRole } from '../../../../objects';
 import { isReservedRole } from '../../../../lib/role';
@@ -39,6 +40,7 @@ export class EditRolePage extends Component {
     allowFieldLevelSecurity: PropTypes.bool.isRequired,
     kibanaAppPrivileges: PropTypes.array.isRequired,
     notifier: PropTypes.func.isRequired,
+    spaces: PropTypes.array,
   };
 
   constructor(props) {
@@ -52,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>
     );
   }
@@ -124,7 +128,7 @@ export class EditRolePage extends Component {
 
   onNameChange = (e) => {
     const rawValue = e.target.value;
-    const name = rawValue.replace(/\s/g, '-');
+    const name = rawValue.replace(/\s/g, '_');
 
     this.setState({
       role: {
@@ -160,15 +164,14 @@ export class EditRolePage extends Component {
   }
 
   getKibanaPrivileges = () => {
-    if (!this.props.rbacEnabled) {
-      return null;
-    }
-
     return (
       <div>
         <EuiSpacer />
         <KibanaPrivileges
           kibanaAppPrivileges={this.props.kibanaAppPrivileges}
+          spaces={this.props.spaces}
+          editable={!isReservedRole(this.state.role)}
+          spacesEnabled={this.props.spaces.length > 1}
           role={this.state.role}
           onChange={this.onRoleChange}
         />

x-pack/plugins/security/public/views/management/edit_role/components/privileges/cluster_privileges.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/cluster_privileges.js

@@ -7,8 +7,8 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { getClusterPrivileges } from '../../../../../services/role_privileges';
-import { isReservedRole } from '../../../../../lib/role';
+import { getClusterPrivileges } from '../../../../../../services/role_privileges';
+import { isReservedRole } from '../../../../../../lib/role';
 import {
   EuiCheckboxGroup,
   EuiFlexGroup,

x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.js

@@ -20,8 +20,8 @@ import {
 import './elasticsearch_privileges.less';
 import { ClusterPrivileges } from './cluster_privileges';
 import { IndexPrivileges } from './index_privileges';
-import { CollapsiblePanel } from '../collapsible_panel';
-import { documentationLinks } from '../../../../../documentation_links';
+import { CollapsiblePanel } from '../../collapsible_panel';
+import { documentationLinks } from '../../../../../../documentation_links';
 
 export class ElasticsearchPrivileges extends Component {
   static propTypes = {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.test.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.test.js

@@ -9,7 +9,7 @@ import { shallow, mount } from 'enzyme';
 import { IndexPrivileges } from './index_privileges';
 import { ClusterPrivileges } from './cluster_privileges';
 import { ElasticsearchPrivileges } from './elasticsearch_privileges';
-import { RoleValidator } from '../../lib/validate_role';
+import { RoleValidator } from '../../../lib/validate_role';
 
 test('it renders without crashing', () => {
   const props = {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.js

@@ -16,7 +16,7 @@ import {
   EuiHorizontalRule,
   EuiButtonIcon,
 } from '@elastic/eui';
-import { getIndexPrivileges } from '../../../../../services/role_privileges';
+import { getIndexPrivileges } from '../../../../../../services/role_privileges';
 
 const fromOption = (option) => option.label;
 const toOption = (value) => ({ label: value });

x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.test.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privilege_form.test.js

@@ -6,7 +6,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { IndexPrivilegeForm } from './index_privilege_form';
-import { RoleValidator } from '../../lib/validate_role';
+import { RoleValidator } from '../../../lib/validate_role';
 import { EuiSwitch, EuiTextArea, EuiButtonIcon } from '@elastic/eui';
 
 test('it renders without crashing', () => {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privileges.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privileges.js

@@ -6,9 +6,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { isReservedRole, isRoleEnabled } from '../../../../../lib/role';
+import { isReservedRole, isRoleEnabled } from '../../../../../../lib/role';
 import { IndexPrivilegeForm } from './index_privilege_form';
-import { getFields } from '../../../../../objects';
+import { getFields } from '../../../../../../objects';
 
 export class IndexPrivileges extends Component {
   static propTypes = {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privileges.test.js → x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/index_privileges.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { IndexPrivileges } from './index_privileges';
 import { IndexPrivilegeForm } from './index_privilege_form';
-import { RoleValidator } from '../../lib/validate_role';
+import { RoleValidator } from '../../../lib/validate_role';
 
 test('it renders without crashing', () => {
   const props = {

x-pack/plugins/security/public/views/management/edit_role/components/privileges/index.js

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { ElasticsearchPrivileges } from './elasticsearch_privileges';
-export { KibanaPrivileges } from './kibana_privileges';
+export { ElasticsearchPrivileges } from './es/elasticsearch_privileges';
+export { KibanaPrivileges } from './kibana/kibana_privileges';

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/privilege_callout_warning.test.js.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PrivilegeCalloutWarning renders without crashing 1`] = `
+<PrivilegeCalloutWarning
+  basePrivilege="all"
+  isReservedRole={false}
+  role={Object {}}
+  spaces={Array []}
+>
+  <EuiCallOut
+    color="warning"
+    iconType="iInCircle"
+    size="m"
+    title="Minimum privilege is too high to customize individual spaces"
+  >
+    <div
+      className="euiCallOut euiCallOut--warning"
+    >
+      <div
+        className="euiCallOutHeader"
+      >
+        <EuiIcon
+          aria-hidden="true"
+          className="euiCallOutHeader__icon"
+          size="m"
+          type="iInCircle"
+        >
+          <iInCircle
+            aria-hidden="true"
+            className="euiIcon euiIcon--medium euiCallOutHeader__icon"
+            focusable="false"
+            height="16"
+            style={
+              Object {
+                "fill": undefined,
+              }
+            }
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <svg
+              aria-hidden="true"
+              className="euiIcon euiIcon--medium euiCallOutHeader__icon"
+              focusable="false"
+              height="16"
+              style={
+                Object {
+                  "fill": undefined,
+                }
+              }
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.3 10.717H6.7v-4h1.6v4zm-1.6-5.71a.83.83 0 0 1 .207-.578c.137-.153.334-.229.59-.229.256 0 .454.076.594.23.14.152.209.345.209.576 0 .228-.07.417-.21.568-.14.15-.337.226-.593.226-.256 0-.453-.075-.59-.226a.81.81 0 0 1-.207-.568zM7.5 13A5.506 5.506 0 0 1 2 7.5C2 4.467 4.467 2 7.5 2S13 4.467 13 7.5 10.533 13 7.5 13m0-12a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13"
+                fillRule="evenodd"
+              />
+            </svg>
+          </iInCircle>
+        </EuiIcon>
+        <span
+          className="euiCallOutHeader__title"
+        >
+          Minimum privilege is too high to customize individual spaces
+        </span>
+      </div>
+      <EuiText
+        grow={true}
+        size="s"
+      >
+        <div
+          className="euiText euiText--small"
+        >
+          <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>
+        </div>
+      </EuiText>
+    </div>
+  </EuiCallOut>
+  <div
+    className="privilegeCallout--showSpacesLink"
+  >
+    <EuiSpacer
+      size="l"
+    >
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <EuiLink
+      color="primary"
+      onClick={[Function]}
+      type="button"
+    >
+      <button
+        className="euiLink euiLink--primary"
+        onClick={[Function]}
+        type="button"
+      >
+        See summary of all spaces privileges
+      </button>
+    </EuiLink>
+  </div>
+</PrivilegeCalloutWarning>
+`;