[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

@@ -78,6 +78,7 @@ export const security = (kibana) => new kibana.Plugin({
       return {
         secureCookies: config.get('xpack.security.secureCookies'),
         sessionTimeout: config.get('xpack.security.sessionTimeout'),
+        enableSpaceAwarePrivileges: config.get('xpack.spaces.enabled'),
       };
     }
   },

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,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  EuiPageBody,
+  EuiText,
 } from '@elastic/eui';
 import { saveRole, deleteRole } from '../../../../objects';
 import { isReservedRole } from '../../../../lib/role';
@@ -39,6 +41,8 @@ export class EditRolePage extends Component {
     allowFieldLevelSecurity: PropTypes.bool.isRequired,
     kibanaAppPrivileges: PropTypes.array.isRequired,
     notifier: PropTypes.func.isRequired,
+    spaces: PropTypes.array,
+    spacesEnabled: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -52,38 +56,52 @@ 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 />
+            {isReservedRole(this.props.role) && (
+              <EuiText size="s" color="subdued">
+                <p id="reservedRoleDescription" tabIndex="1">
+                  Reserved roles are built-in and cannot be removed or modified.
+                </p>
+              </EuiText>
+            )}
 
-          {this.getRoleName()}
+            <EuiSpacer />
 
-          {this.getElasticsearchPrivileges()}
+            {this.getRoleName()}
 
-          {this.getKibanaPrivileges()}
+            {this.getElasticsearchPrivileges()}
 
-          <EuiSpacer />
+            {this.getKibanaPrivileges()}
 
-          {this.getFormButtons()}
-        </EuiForm>
+            <EuiSpacer />
+
+            {this.getFormButtons()}
+          </EuiForm>
+        </EuiPageBody>
       </EuiPage>
     );
   }
 
   getFormTitle = () => {
     let titleText;
+    const props = {
+      tabIndex: 0
+    };
     if (isReservedRole(this.props.role)) {
       titleText = 'Viewing role';
+      props['aria-describedby'] = 'reservedRoleDescription';
     } else if (this.editingExistingRole()) {
       titleText = 'Edit role';
     } else {
       titleText = 'Create role';
     }
 
     return (
-      <EuiTitle size="l"><h1>{titleText} <ReservedRoleBadge role={this.props.role} /></h1></EuiTitle>
+      <EuiTitle size="l" ><h1 {...props}>{titleText} <ReservedRoleBadge role={this.props.role} /></h1></EuiTitle>
     );
   };
 
@@ -115,6 +133,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 +143,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,17 +179,17 @@ export class EditRolePage extends Component {
   }
 
   getKibanaPrivileges = () => {
-    if (!this.props.rbacEnabled) {
-      return null;
-    }
-
     return (
       <div>
         <EuiSpacer />
         <KibanaPrivileges
           kibanaAppPrivileges={this.props.kibanaAppPrivileges}
+          spaces={this.props.spaces}
+          spacesEnabled={this.props.spacesEnabled}
+          editable={!isReservedRole(this.state.role)}
           role={this.state.role}
           onChange={this.onRoleChange}
+          validator={this.validator}
         />
       </div>
     );
@@ -190,10 +209,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,54 @@ exports[`it renders without crashing 1`] = `
   <EuiFlexItem
     component="div"
     grow={true}
-    key="0"
   >
-    <EuiCheckboxGroup
-      disabled={false}
-      idToSelectedMap={Object {}}
+    <EuiComboBox
+      fullWidth={false}
+      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

@@ -141,6 +141,7 @@ exports[`it renders without crashing 1`] = `
       }
       validator={
         RoleValidator {
+          "_inProgressSpacePrivileges": Array [],
           "_shouldValidate": undefined,
         }
       }