[Spaces] - Update Roles screen to use public API (#21031)

This PR updates the new Role Management screen to use the public role API introduced as part of #20732.

Additionally, this updates the breadcrumb nav for Spaces and Role management screens to be consistent with the nav introduced in #20739.

There are a couple of visual glitches in this PR which are a result of current defects on master, so they can be safely ignored for the time being.

x-pack/plugins/security/public/lib/api.js

@@ -6,7 +6,7 @@
 import chrome from 'ui/chrome';
 
 const usersUrl = chrome.addBasePath('/api/security/v1/users');
-const rolesUrl = chrome.addBasePath('/api/security/v1/roles');
+const rolesUrl = chrome.addBasePath('/api/security/role');
 
 export const createApiClient = (httpClient) => {
   return {

x-pack/plugins/security/public/objects/lib/roles.js

@@ -4,11 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import chrome from 'ui/chrome';
+import { omit } from 'lodash';
 
-const apiBase = chrome.addBasePath(`/api/security/v1/roles`);
+const apiBase = chrome.addBasePath(`/api/security/role`);
 
 export async function saveRole($http, role) {
-  return await $http.post(`${apiBase}/${role.name}`, role);
+  const data = omit(role, 'name', 'transient_metadata', '_unrecognized_applications');
+  return await $http.put(`${apiBase}/${role.name}`, data);
 }
 
 export async function deleteRole($http, name) {

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

@@ -20,7 +20,6 @@ import {
   EuiFlexItem,
   EuiButton,
 } from '@elastic/eui';
-import { PageHeader } from './page_header';
 import { saveRole, deleteRole } from '../../../../objects';
 import { isReservedRole } from '../../../../lib/role';
 import { RoleValidator } from '../lib/validate_role';
@@ -36,7 +35,6 @@ export class EditRolePage extends Component {
     indexPatterns: PropTypes.array.isRequired,
     httpClient: PropTypes.func.isRequired,
     rbacEnabled: PropTypes.bool.isRequired,
-    rbacApplication: PropTypes.string,
     allowDocumentLevelSecurity: PropTypes.bool.isRequired,
     allowFieldLevelSecurity: PropTypes.bool.isRequired,
     kibanaAppPrivileges: PropTypes.array.isRequired,
@@ -55,7 +53,6 @@ export class EditRolePage extends Component {
   render() {
     return (
       <EuiPage className="editRolePage">
-        <PageHeader breadcrumbs={this.props.breadcrumbs} />
         <EuiForm {...this.state.formError}>
           {this.getFormTitle()}
 
@@ -172,7 +169,6 @@ export class EditRolePage extends Component {
         <EuiSpacer />
         <KibanaPrivileges
           kibanaAppPrivileges={this.props.kibanaAppPrivileges}
-          rbacApplication={this.props.rbacApplication}
           role={this.state.role}
           onChange={this.onRoleChange}
         />
@@ -237,8 +233,8 @@ export class EditRolePage extends Component {
         ...this.state.role
       };
 
-      role.indices = role.indices.filter(i => !this.isPlaceholderPrivilege(i));
-      role.indices.forEach((index) => index.query || delete index.query);
+      role.elasticsearch.indices = role.elasticsearch.indices.filter(i => !this.isPlaceholderPrivilege(i));
+      role.elasticsearch.indices.forEach((index) => index.query || delete index.query);
 
       saveRole(httpClient, role)
         .then(() => {

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

@@ -39,9 +39,11 @@ exports[`it renders without crashing 1`] = `
           onChange={[Function]}
           role={
             Object {
-              "cluster": Array [],
-              "indices": Array [],
-              "run_as": Array [],
+              "elasticsearch": Object {
+                "cluster": Array [],
+                "indices": Array [],
+                "run_as": Array [],
+              },
             }
           }
         />
@@ -129,9 +131,11 @@ exports[`it renders without crashing 1`] = `
       onChange={[MockFunction]}
       role={
         Object {
-          "cluster": Array [],
-          "indices": Array [],
-          "run_as": Array [],
+          "elasticsearch": Object {
+            "cluster": Array [],
+            "indices": Array [],
+            "run_as": Array [],
+          },
         }
       }
       validator={

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

@@ -41,7 +41,7 @@ export class ClusterPrivileges extends Component {
       label: i
     }));
 
-    const selectionMap = (role.cluster || [])
+    const selectionMap = (role.elasticsearch.cluster || [])
       .map(k => ({ [k]: true }))
       .reduce((acc, o) => ({ ...acc, ...o }), {});
 
@@ -58,7 +58,7 @@ export class ClusterPrivileges extends Component {
   };
 
   onClusterPrivilegesChange = (privilege) => {
-    const { cluster } = this.props.role;
+    const { cluster } = this.props.role.elasticsearch;
     const indexOfExistingPrivilege = cluster.indexOf(privilege);
 
     const shouldRemove = indexOfExistingPrivilege >= 0;

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

@@ -10,11 +10,11 @@ import { ClusterPrivileges } from './cluster_privileges';
 import { EuiCheckboxGroup } from '@elastic/eui';
 
 test('it renders without crashing', () => {
-  const wrapper = shallow(<ClusterPrivileges role={{}} onChange={jest.fn()} />);
+  const wrapper = shallow(<ClusterPrivileges role={{ elasticsearch: {} }} onChange={jest.fn()} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 test('it renders 2 checkbox groups of privileges', () => {
-  const wrapper = mount(<ClusterPrivileges role={{}} onChange={jest.fn()} />);
+  const wrapper = mount(<ClusterPrivileges role={{ elasticsearch: {} }} onChange={jest.fn()} />);
   expect(wrapper.find(EuiCheckboxGroup)).toHaveLength(2);
 });

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

@@ -94,7 +94,7 @@ export class ElasticsearchPrivileges extends Component {
             <EuiComboBox
               placeholder={this.props.editable ? 'Add a user...' : null}
               options={this.props.runAsUsers.map(username => ({ id: username, label: username }))}
-              selectedOptions={this.props.role.run_as.map(u => ({ label: u }))}
+              selectedOptions={this.props.role.elasticsearch.run_as.map(u => ({ label: u }))}
               onChange={this.onRunAsUserChange}
               isDisabled={!this.props.editable}
             />
@@ -129,7 +129,7 @@ export class ElasticsearchPrivileges extends Component {
   addIndexPrivilege = () => {
     const { role } = this.props;
 
-    const newIndices = [...role.indices, {
+    const newIndices = [...role.elasticsearch.indices, {
       names: [],
       privileges: [],
       field_security: {
@@ -139,14 +139,20 @@ export class ElasticsearchPrivileges extends Component {
 
     this.props.onChange({
       ...this.props.role,
-      indices: newIndices
+      elasticsearch: {
+        ...this.props.role.elasticsearch,
+        indices: newIndices
+      }
     });
   };
 
   onClusterPrivilegesChange = (cluster) => {
     const role = {
       ...this.props.role,
-      cluster
+      elasticsearch: {
+        ...this.props.role.elasticsearch,
+        cluster,
+      },
     };
 
     this.props.onChange(role);
@@ -155,7 +161,10 @@ export class ElasticsearchPrivileges extends Component {
   onRunAsUserChange = (users) => {
     const role = {
       ...this.props.role,
-      run_as: users.map(u => u.label)
+      elasticsearch: {
+        ...this.props.role.elasticsearch,
+        run_as: users.map(u => u.label),
+      },
     };
 
     this.props.onChange(role);

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

@@ -14,9 +14,11 @@ import { RoleValidator } from '../../lib/validate_role';
 test('it renders without crashing', () => {
   const props = {
     role: {
-      cluster: [],
-      indices: [],
-      run_as: []
+      elasticsearch: {
+        cluster: [],
+        indices: [],
+        run_as: [],
+      },
     },
     editable: true,
     httpClient: jest.fn(),
@@ -34,9 +36,11 @@ test('it renders without crashing', () => {
 test('it renders ClusterPrivileges', () => {
   const props = {
     role: {
-      cluster: [],
-      indices: [],
-      run_as: []
+      elasticsearch: {
+        cluster: [],
+        indices: [],
+        run_as: [],
+      },
     },
     editable: true,
     httpClient: jest.fn(),
@@ -54,9 +58,11 @@ test('it renders ClusterPrivileges', () => {
 test('it renders IndexPrivileges', () => {
   const props = {
     role: {
-      cluster: [],
-      indices: [],
-      run_as: []
+      elasticsearch: {
+        cluster: [],
+        indices: [],
+        run_as: [],
+      },
     },
     editable: true,
     httpClient: jest.fn(),
@@ -69,4 +75,4 @@ test('it renders IndexPrivileges', () => {
   };
   const wrapper = mount(<ElasticsearchPrivileges {...props} />);
   expect(wrapper.find(IndexPrivileges)).toHaveLength(1);
-});
+});

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

@@ -26,11 +26,11 @@ export class IndexPrivileges extends Component {
   }
 
   componentDidMount() {
-    this.loadAvailableFields(this.props.role.indices);
+    this.loadAvailableFields(this.props.role.elasticsearch.indices);
   }
 
   render() {
-    const { indices = [] } = this.props.role;
+    const { indices = [] } = this.props.role.elasticsearch;
 
     const {
       indexPatterns,
@@ -67,7 +67,7 @@ export class IndexPrivileges extends Component {
   addIndexPrivilege = () => {
     const { role } = this.props;
 
-    const newIndices = [...role.indices, {
+    const newIndices = [...role.elasticsearch.indices, {
       names: [],
       privileges: [],
       field_security: {
@@ -77,21 +77,27 @@ export class IndexPrivileges extends Component {
 
     this.props.onChange({
       ...this.props.role,
-      indices: newIndices
+      elasticsearch: {
+        ...this.props.role.elasticsearch,
+        indices: newIndices,
+      },
     });
   };
 
   onIndexPrivilegeChange = (privilegeIndex) => {
     return (updatedPrivilege) => {
       const { role } = this.props;
-      const { indices } = role;
+      const { indices } = role.elasticsearch;
 
       const newIndices = [...indices];
       newIndices[privilegeIndex] = updatedPrivilege;
 
       this.props.onChange({
         ...this.props.role,
-        indices: newIndices
+        elasticsearch: {
+          ...this.props.role.elasticsearch,
+          indices: newIndices,
+        },
       });
 
       this.loadAvailableFields(newIndices);
@@ -102,12 +108,15 @@ export class IndexPrivileges extends Component {
     return () => {
       const { role } = this.props;
 
-      const newIndices = [...role.indices];
+      const newIndices = [...role.elasticsearch.indices];
       newIndices.splice(privilegeIndex, 1);
 
       this.props.onChange({
         ...this.props.role,
-        indices: newIndices
+        elasticsearch: {
+          ...this.props.role.elasticsearch,
+          indices: newIndices
+        },
       });
     };
   }