[Enterprise Search] Migrate shared role mapping components

x-pack/plugins/enterprise_search/public/applications/app_search/types.ts

@@ -6,5 +6,5 @@
  */
 
 export * from '../../../common/types/app_search';
-export { Role, RoleTypes, AbilityTypes } from './utils/role';
+export { Role, RoleTypes, AbilityTypes, ASRoleMapping } from './utils/role';
 export { Engine } from './components/engine/types';

x-pack/plugins/enterprise_search/public/applications/app_search/utils/role/index.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { RoleMapping } from '../../../shared/types';
+import { Engine } from '../../components/engine/types';
 import { Account } from '../../types';
 
 export type RoleTypes = 'owner' | 'admin' | 'dev' | 'editor' | 'analyst';
@@ -103,3 +105,11 @@ export const getRoleAbilities = (role: Account['role']): Role => {
 
   return Object.assign(myRole, topLevelProps, abilities);
 };
+
+export interface ASRoleMapping extends RoleMapping {
+  accessAllEngines: boolean;
+  engines: Engine[];
+  toolTip?: {
+    content: string;
+  };
+}

x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/add_role_mapping_button.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiButtonTo } from '../react_router_helpers';
+
+import { AddRoleMappingButton } from './add_role_mapping_button';
+
+describe('AddRoleMappingButton', () => {
+  it('renders', () => {
+    const wrapper = shallow(<AddRoleMappingButton path="/foo" />);
+
+    expect(wrapper.find(EuiButtonTo)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/add_role_mapping_button.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiButtonTo } from '../react_router_helpers';
+
+import { ADD_ROLE_MAPPING_BUTTON } from './constants';
+
+interface IAddRoleMappingButtonProps {
+  path: string;
+}
+
+export const AddRoleMappingButton: React.FC<IAddRoleMappingButtonProps> = ({ path }) => (
+  <EuiButtonTo to={path} fill color="secondary">
+    {ADD_ROLE_MAPPING_BUTTON}
+  </EuiButtonTo>
+);

x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.test.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow, ShallowWrapper } from 'enzyme';
+
+import { AttributeSelector } from './attribute_selector';
+
+const baseProps = {
+  attributeName: 'An Attribute',
+  attributeValue: 'Something',
+  attributes: ['a', 'b', 'c'],
+  availableAuthProviders: ['ees_saml', 'kbn_saml'],
+  selectedAuthProviders: ['ees_saml'],
+  elasticsearchRoles: ['whatever'],
+  multipleAuthProvidersConfig: true,
+  disabled: false,
+  handleAttributeSelectorChange: () => {},
+  handleAttributeValueChange: () => {},
+  handleAuthProviderChange: () => {},
+};
+
+describe('<AttributeSelector />', () => {
+  it('renders', () => {
+    const wrapper = shallow(<AttributeSelector {...baseProps} />);
+
+    expect(wrapper.find('[data-test-subj="attributeSelector"]')).toBeDefined();
+  });
+
+  describe('Auth Providers', () => {
+    const findAuthProvidersSelect = (wrapper: ShallowWrapper) =>
+      wrapper.find('[data-test-subj="authProviderSelect"]');
+
+    it('will not render if "availableAuthProviders" prop has not been provided', () => {
+      const wrapper = shallow(
+        <AttributeSelector {...baseProps} availableAuthProviders={undefined} />
+      );
+
+      expect(wrapper.find('[data-test-subj="authProviderSelect"]')).toHaveLength(0);
+    });
+
+    it('renders a list of auth providers from the "availableAuthProviders" prop including an "Any" option', () => {
+      const wrapper = shallow(
+        <AttributeSelector {...baseProps} availableAuthProviders={['ees_saml', 'kbn_saml']} />
+      );
+
+      const select = findAuthProvidersSelect(wrapper) as any;
+
+      expect(select.props().options).toEqual([
+        {
+          label: expect.any(String),
+          options: [{ label: 'Any', value: '*' }],
+        },
+        {
+          label: expect.any(String),
+          options: [
+            { label: 'ees_saml', value: 'ees_saml' },
+            { label: 'kbn_saml', value: 'kbn_saml' },
+          ],
+        },
+      ]);
+    });
+
+    it('the "selectedAuthProviders" prop should be used as the selected value', () => {
+      const wrapper = shallow(
+        <AttributeSelector
+          {...baseProps}
+          availableAuthProviders={['ees_saml', 'kbn_saml']}
+          selectedAuthProviders={['kbn_saml']}
+        />
+      );
+
+      const select = findAuthProvidersSelect(wrapper) as any;
+
+      expect(select.props().selectedOptions).toEqual([{ label: 'kbn_saml', value: 'kbn_saml' }]);
+    });
+
+    it('should call the "handleAuthProviderChange" prop when a value is selected', () => {
+      const handleAuthProviderChangeMock = jest.fn();
+      const wrapper = shallow(
+        <AttributeSelector {...baseProps} handleAuthProviderChange={handleAuthProviderChangeMock} />
+      );
+
+      const select = findAuthProvidersSelect(wrapper);
+      select.simulate('change', [{ label: 'kbn_saml', value: 'kbn_saml' }]);
+
+      expect(handleAuthProviderChangeMock).toHaveBeenCalledWith(['kbn_saml']);
+    });
+  });
+});

x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/attribute_selector.tsx

@@ -0,0 +1,187 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSelect,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+
+import {
+  ANY_AUTH_PROVIDER,
+  ANY_AUTH_PROVIDER_OPTION_LABEL,
+  AUTH_ANY_PROVIDER_LABEL,
+  AUTH_INDIVIDUAL_PROVIDER_LABEL,
+  ATTRIBUTE_SELECTOR_TITLE,
+  AUTH_PROVIDER_LABEL,
+  EXTERNAL_ATTRIBUTE_LABEL,
+  ATTRIBUTE_VALUE_LABEL,
+} from './constants';
+
+interface IAttributeSelectorProps {
+  attributeName: string;
+  attributeValue?: string;
+  attributes: string[];
+  selectedAuthProviders?: string[];
+  availableAuthProviders?: string[];
+  elasticsearchRoles: string[];
+  disabled: boolean;
+  multipleAuthProvidersConfig: boolean;
+  handleAttributeSelectorChange(value: string, elasticsearchRole: string): void;
+  handleAttributeValueChange(value: string): void;
+  handleAuthProviderChange?(value: string[]): void;
+}
+
+interface AttributeExamples {
+  username: string;
+  email: string;
+  metadata: string;
+}
+
+const attributeValueExamples = {
+  username: 'elastic,*_system',
+  email: 'user@example.com,*@example.org',
+  metadata: '{"_reserved": true}',
+};
+
+const getAuthProviderOptions = (
+  availableAuthProviders: string[]
+): Array<EuiComboBoxOptionOption<string>> => {
+  return [
+    {
+      label: AUTH_ANY_PROVIDER_LABEL,
+      options: [{ value: ANY_AUTH_PROVIDER, label: ANY_AUTH_PROVIDER_OPTION_LABEL }],
+    },
+    {
+      label: AUTH_INDIVIDUAL_PROVIDER_LABEL,
+      options: availableAuthProviders.map((authProvider) => ({
+        value: authProvider,
+        label: authProvider,
+      })),
+    },
+  ];
+};
+
+const getSelectedOptions = (
+  selectedAuthProviders: string[],
+  availableAuthProviders: string[]
+): Array<EuiComboBoxOptionOption<string>> => {
+  const groupedOptions: Array<EuiComboBoxOptionOption<string>> = getAuthProviderOptions(
+    availableAuthProviders
+  );
+  const options: Array<EuiComboBoxOptionOption<string>> = groupedOptions.reduce(
+    (acc: Array<EuiComboBoxOptionOption<string>>, n: EuiComboBoxOptionOption<string>) => [
+      ...acc,
+      ...(n.options as Array<EuiComboBoxOptionOption<string>>),
+    ],
+    []
+  );
+  return options.filter((o) => o.value && selectedAuthProviders.includes(o.value));
+};
+
+export const AttributeSelector: React.FC<IAttributeSelectorProps> = ({
+  attributeName,
+  attributeValue = '',
+  attributes,
+  availableAuthProviders,
+  selectedAuthProviders = [ANY_AUTH_PROVIDER],
+  elasticsearchRoles,
+  disabled,
+  multipleAuthProvidersConfig,
+  handleAttributeSelectorChange,
+  handleAttributeValueChange,
+  handleAuthProviderChange = () => null,
+}) => {
+  return (
+    <EuiPanel
+      data-test-subj="attributeSelector"
+      paddingSize="l"
+      className={disabled ? 'euiPanel--disabled' : ''}
+    >
+      <EuiTitle size="s">
+        <h3>{ATTRIBUTE_SELECTOR_TITLE}</h3>
+      </EuiTitle>
+      <EuiSpacer />
+      {availableAuthProviders && multipleAuthProvidersConfig && (
+        <EuiFlexGroup alignItems="stretch">
+          <EuiFlexItem>
+            <EuiFormRow label={AUTH_PROVIDER_LABEL} fullWidth>
+              <EuiComboBox
+                data-test-subj="authProviderSelect"
+                selectedOptions={getSelectedOptions(selectedAuthProviders, availableAuthProviders)}
+                options={getAuthProviderOptions(availableAuthProviders)}
+                onChange={(options) => {
+                  handleAuthProviderChange(options.map((o) => o.value as string));
+                }}
+                fullWidth
+                isDisabled={disabled}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem />
+        </EuiFlexGroup>
+      )}
+      <EuiFlexGroup alignItems="stretch">
+        <EuiFlexItem>
+          <EuiFormRow label={EXTERNAL_ATTRIBUTE_LABEL} fullWidth>
+            <EuiSelect
+              name="external-attribute"
+              value={attributeName}
+              required
+              options={attributes.map((attribute) => ({ value: attribute, text: attribute }))}
+              onChange={(e) => {
+                handleAttributeSelectorChange(e.target.value, elasticsearchRoles[0]);
+              }}
+              fullWidth
+              disabled={disabled}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow label={ATTRIBUTE_VALUE_LABEL} fullWidth>
+            {attributeName === 'role' ? (
+              <EuiSelect
+                value={attributeValue}
+                name="elasticsearch-role"
+                required
+                options={elasticsearchRoles.map((elasticsearchRole) => ({
+                  value: elasticsearchRole,
+                  text: elasticsearchRole,
+                }))}
+                onChange={(e) => {
+                  handleAttributeValueChange(e.target.value);
+                }}
+                fullWidth
+                disabled={disabled}
+              />
+            ) : (
+              <EuiFieldText
+                value={attributeValue}
+                name="attribute-value"
+                placeholder={attributeValueExamples[attributeName as keyof AttributeExamples]}
+                onChange={(e) => {
+                  handleAttributeValueChange(e.target.value);
+                }}
+                fullWidth
+                disabled={disabled}
+              />
+            )}
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+};