[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>
     );
   }
@@ -115,6 +119,7 @@ export class EditRolePage extends Component {
             name={'name'}
             value={this.state.role.name || ''}
             onChange={this.onNameChange}
+            data-test-subj={'roleFormNameInput'}
             readOnly={isReservedRole(this.props.role) || this.editingExistingRole()}
           />
         </EuiFormRow>
@@ -124,7 +129,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 +165,13 @@ 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)}
           role={this.state.role}
           onChange={this.onRoleChange}
         />
@@ -190,10 +193,20 @@ export class EditRolePage extends Component {
     return (
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={this.saveRole} disabled={isReservedRole(this.props.role)}>{saveText}</EuiButton>
+          <EuiButton
+            data-test-subj={`roleFormSaveButton`}
+            fill
+            onClick={this.saveRole}
+            disabled={isReservedRole(this.props.role)}
+          >
+            {saveText}
+          </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={this.backToRoleList}>
+          <EuiButtonEmpty
+            data-test-subj={`roleFormCancelButton`}
+            onClick={this.backToRoleList}
+          >
             Cancel
           </EuiButtonEmpty>
         </EuiFlexItem>

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

@@ -13,79 +13,53 @@ exports[`it renders without crashing 1`] = `
   <EuiFlexItem
     component="div"
     grow={true}
-    key="0"
   >
-    <EuiCheckboxGroup
-      disabled={false}
-      idToSelectedMap={Object {}}
+    <EuiComboBox
+      isClearable={true}
+      isDisabled={false}
       onChange={[Function]}
       options={
         Array [
           Object {
-            "id": "all",
             "label": "all",
           },
           Object {
-            "id": "monitor",
             "label": "monitor",
           },
           Object {
-            "id": "manage",
             "label": "manage",
           },
           Object {
-            "id": "manage_security",
             "label": "manage_security",
           },
           Object {
-            "id": "manage_index_templates",
             "label": "manage_index_templates",
           },
           Object {
-            "id": "manage_pipeline",
             "label": "manage_pipeline",
           },
-        ]
-      }
-    />
-  </EuiFlexItem>
-  <EuiFlexItem
-    component="div"
-    grow={true}
-    key="1"
-  >
-    <EuiCheckboxGroup
-      disabled={false}
-      idToSelectedMap={Object {}}
-      onChange={[Function]}
-      options={
-        Array [
           Object {
-            "id": "manage_ingest_pipelines",
             "label": "manage_ingest_pipelines",
           },
           Object {
-            "id": "transport_client",
             "label": "transport_client",
           },
           Object {
-            "id": "manage_ml",
             "label": "manage_ml",
           },
           Object {
-            "id": "monitor_ml",
             "label": "monitor_ml",
           },
           Object {
-            "id": "manage_watcher",
             "label": "manage_watcher",
           },
           Object {
-            "id": "monitor_watcher",
             "label": "monitor_watcher",
           },
         ]
       }
+      selectedOptions={Array []}
+      singleSelection={false}
     />
   </EuiFlexItem>
 </EuiFlexGroup>

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

@@ -82,7 +82,6 @@ exports[`it renders without crashing 1`] = `
         hasEmptyLabelSpace={true}
       >
         <EuiComboBox
-          fullWidth={false}
           isClearable={true}
           isDisabled={false}
           onChange={[Function]}

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

@@ -42,7 +42,6 @@ exports[`it renders without crashing 1`] = `
               label="Indices"
             >
               <EuiComboBox
-                fullWidth={false}
                 isClearable={true}
                 isDisabled={false}
                 onChange={[Function]}
@@ -64,7 +63,6 @@ exports[`it renders without crashing 1`] = `
               label="Privileges"
             >
               <EuiComboBox
-                fullWidth={false}
                 isClearable={true}
                 isDisabled={false}
                 onChange={[Function]}
@@ -127,7 +125,6 @@ exports[`it renders without crashing 1`] = `
             >
               <React.Fragment>
                 <EuiComboBox
-                  fullWidth={false}
                   isClearable={true}
                   isDisabled={false}
                   onChange={[Function]}