Security - allow for custom cluster privileges (elastic#43817)

* allow for custom cluster privileges

* improve prop/state names

* update snapshot

* remove unnecessary code

* removing state altogether

x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/cluster_privileges.test.tsx

@@ -8,6 +8,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { Role } from '../../../../../../../common/model';
 import { ClusterPrivileges } from './cluster_privileges';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 test('it renders without crashing', () => {
   const role: Role = {
@@ -24,8 +25,37 @@ test('it renders without crashing', () => {
     <ClusterPrivileges
       role={role}
       onChange={jest.fn()}
-      availableClusterPrivileges={['all', 'manage', 'monitor']}
+      builtinClusterPrivileges={['all', 'manage', 'monitor']}
     />
   );
   expect(wrapper).toMatchSnapshot();
 });
+
+test('it allows for custom cluster privileges', () => {
+  const role: Role = {
+    name: '',
+    elasticsearch: {
+      cluster: ['existing-custom', 'monitor'],
+      indices: [],
+      run_as: [],
+    },
+    kibana: [],
+  };
+
+  const onChange = jest.fn();
+  const wrapper = mountWithIntl(
+    <ClusterPrivileges
+      role={role}
+      onChange={onChange}
+      builtinClusterPrivileges={['all', 'manage', 'monitor']}
+    />
+  );
+
+  const clusterPrivsSelect = wrapper.find(
+    'EuiComboBox[data-test-subj="cluster-privileges-combobox"]'
+  );
+
+  (clusterPrivsSelect.props() as any).onCreateOption('custom-cluster-privilege');
+
+  expect(onChange).toHaveBeenCalledWith(['existing-custom', 'monitor', 'custom-cluster-privilege']);
+});

x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/cluster_privileges.tsx

@@ -6,18 +6,20 @@
 
 import { EuiComboBox, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { Component } from 'react';
+import _ from 'lodash';
 import { Role } from '../../../../../../../common/model';
 import { isReadOnlyRole } from '../../../../../../lib/role_utils';
 
 interface Props {
   role: Role;
-  availableClusterPrivileges: string[];
+  builtinClusterPrivileges: string[];
   onChange: (privs: string[]) => void;
 }
 
 export class ClusterPrivileges extends Component<Props, {}> {
   public render() {
-    return <EuiFlexGroup>{this.buildComboBox(this.props.availableClusterPrivileges)}</EuiFlexGroup>;
+    const availableClusterPrivileges = this.getAvailableClusterPrivileges();
+    return <EuiFlexGroup>{this.buildComboBox(availableClusterPrivileges)}</EuiFlexGroup>;
   }
 
   public buildComboBox = (items: string[]) => {
@@ -32,9 +34,11 @@ export class ClusterPrivileges extends Component<Props, {}> {
     return (
       <EuiFlexItem key={'clusterPrivs'}>
         <EuiComboBox
+          data-test-subj={'cluster-privileges-combobox'}
           options={options}
           selectedOptions={selectedOptions}
           onChange={this.onClusterPrivilegesChange}
+          onCreateOption={this.onCreateCustomPrivilege}
           isDisabled={isReadOnlyRole(role)}
         />
       </EuiFlexItem>
@@ -44,4 +48,17 @@ export class ClusterPrivileges extends Component<Props, {}> {
   public onClusterPrivilegesChange = (selectedPrivileges: any) => {
     this.props.onChange(selectedPrivileges.map((priv: any) => priv.label));
   };
+
+  private onCreateCustomPrivilege = (customPrivilege: string) => {
+    this.props.onChange([...this.props.role.elasticsearch.cluster, customPrivilege]);
+  };
+
+  private getAvailableClusterPrivileges = () => {
+    const availableClusterPrivileges = [
+      ...this.props.builtinClusterPrivileges,
+      ...this.props.role.elasticsearch.cluster,
+    ];
+
+    return _.uniq(availableClusterPrivileges);
+  };
 }

x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx

@@ -99,7 +99,7 @@ export class ElasticsearchPrivileges extends Component<Props, {}> {
             <ClusterPrivileges
               role={this.props.role}
               onChange={this.onClusterPrivilegesChange}
-              availableClusterPrivileges={builtinESPrivileges.cluster}
+              builtinClusterPrivileges={builtinESPrivileges.cluster}
             />
           </EuiFormRow>
         </EuiDescribedFormGroup>