diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts index be0c860627f799..47d481630510e2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/constants.ts @@ -200,3 +200,8 @@ export const ROLE_MAPPINGS_HEADING_BUTTON = i18n.translate( 'xpack.enterpriseSearch.roleMapping.roleMappingsHeadingButton', { defaultMessage: 'Create a new role mapping' } ); + +export const ROLE_MAPPINGS_NO_RESULTS_MESSAGE = i18n.translate( + 'xpack.enterpriseSearch.roleMapping.noResults.message', + { defaultMessage: 'Create a new role mapping' } +); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/index.ts index 0f9362157f50ad..b0d10e9692714f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/index.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/index.ts @@ -11,3 +11,4 @@ export { RoleOptionLabel } from './role_option_label'; export { RoleSelector } from './role_selector'; export { RoleMappingFlyout } from './role_mapping_flyout'; export { RoleMappingsHeading } from './role_mappings_heading'; +export { UsersAndRolesRowActions } from './users_and_roles_row_actions'; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.test.tsx index 5ec84db478bc3d..156b52a4016c32 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/role_mappings_table.test.tsx @@ -9,13 +9,14 @@ import { wsRoleMapping, asRoleMapping } from './__mocks__/roles'; import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; -import { EuiFieldSearch, EuiTableRow } from '@elastic/eui'; +import { EuiInMemoryTable, EuiTableHeaderCell } from '@elastic/eui'; import { ALL_LABEL, ANY_AUTH_PROVIDER_OPTION_LABEL } from './constants'; import { RoleMappingsTable } from './role_mappings_table'; +import { UsersAndRolesRowActions } from './users_and_roles_row_actions'; describe('RoleMappingsTable', () => { const initializeRoleMapping = jest.fn(); @@ -41,55 +42,44 @@ describe('RoleMappingsTable', () => { handleDeleteMapping, }; - it('renders', () => { - const wrapper = shallow(); + it('renders with "shouldShowAuthProvider" true', () => { + const wrapper = mount(); - expect(wrapper.find(EuiFieldSearch)).toHaveLength(1); - expect(wrapper.find(EuiTableRow)).toHaveLength(1); + expect(wrapper.find(EuiInMemoryTable)).toHaveLength(1); + expect(wrapper.find(EuiTableHeaderCell)).toHaveLength(6); }); - it('renders auth provider display names', () => { - const wrapper = shallow(); + it('renders with "shouldShowAuthProvider" false', () => { + const wrapper = mount(); - expect(wrapper.find('[data-test-subj="AuthProviderDisplay"]').prop('children')).toEqual( - `${ANY_AUTH_PROVIDER_OPTION_LABEL}, other_auth` - ); + expect(wrapper.find(EuiInMemoryTable)).toHaveLength(1); + expect(wrapper.find(EuiTableHeaderCell)).toHaveLength(5); }); - it('handles input change', () => { - const wrapper = shallow(); - const input = wrapper.find(EuiFieldSearch); - const value = 'Query'; - input.simulate('change', { target: { value } }); + it('renders auth provider display names', () => { + const wrapper = mount(); - expect(wrapper.find(EuiTableRow)).toHaveLength(0); + expect(wrapper.find('[data-test-subj="AuthProviderDisplayValue"]').prop('children')).toEqual( + `${ANY_AUTH_PROVIDER_OPTION_LABEL}, other_auth` + ); }); it('handles manage click', () => { - const wrapper = shallow(); - wrapper.find('[data-test-subj="ManageButton"]').simulate('click'); + const wrapper = mount(); + wrapper.find(UsersAndRolesRowActions).prop('onManageClick')(); expect(initializeRoleMapping).toHaveBeenCalled(); }); it('handles delete click', () => { - const wrapper = shallow(); - wrapper.find('[data-test-subj="DeleteButton"]').simulate('click'); + const wrapper = mount(); + wrapper.find(UsersAndRolesRowActions).prop('onDeleteClick')(); expect(handleDeleteMapping).toHaveBeenCalled(); }); - it('handles input change with special chars', () => { - const wrapper = shallow(); - const input = wrapper.find(EuiFieldSearch); - const value = '*//username'; - input.simulate('change', { target: { value } }); - - expect(wrapper.find(EuiTableRow)).toHaveLength(1); - }); - it('shows default message when "accessAllEngines" is true', () => { - const wrapper = shallow( + const wrapper = mount( ); @@ -100,7 +90,7 @@ describe('RoleMappingsTable', () => { const noItemsRoleMapping = { ...asRoleMapping, engines: [] }; noItemsRoleMapping.accessAllEngines = false; - const wrapper = shallow( + const wrapper = mount( —; const getAuthProviderDisplayValue = (authProvider: string) => @@ -73,114 +59,104 @@ export const RoleMappingsTable: React.FC = ({ initializeRoleMapping, handleDeleteMapping, }) => { - const [filterValue, updateValue] = useState(''); + const getFirstAttributeName = (rules: RoleRules): string => Object.entries(rules)[0][0]; + const getFirstAttributeValue = (rules: RoleRules): string => Object.entries(rules)[0][1]; // This is needed because App Search has `engines` and Workplace Search has `groups`. - const standardizeRoleMapping = (roleMappings as SharedRoleMapping[]).map((rm) => { + const standardizedRoleMappings = (roleMappings as SharedRoleMapping[]).map((rm) => { const _rm = { ...rm } as SharedRoleMapping; _rm.accessItems = rm[accessItemKey]; return _rm; - }); - - const filterResults = (result: SharedRoleMapping) => { - // Filter out non-alphanumeric characters, except for underscores, hyphens, and spaces - const sanitizedValue = filterValue.replace(/[^\w\s-]/g, ''); - const values = Object.values(result); - const regexp = new RegExp(sanitizedValue, 'i'); - return values.filter((x) => regexp.test(x)).length > 0; + }) as SharedRoleMapping[]; + + const attributeNameCol: EuiBasicTableColumn = { + field: 'attribute', + name: EXTERNAL_ATTRIBUTE_LABEL, + render: (_, { rules }: SharedRoleMapping) => getFirstAttributeName(rules), }; - const filteredResults = standardizeRoleMapping.filter(filterResults); - const getFirstAttributeName = (rules: RoleRules): string => Object.entries(rules)[0][0]; - const getFirstAttributeValue = (rules: RoleRules): string => Object.entries(rules)[0][1]; + const attributeValueCol: EuiBasicTableColumn = { + field: 'attributeValue', + name: ATTRIBUTE_VALUE_LABEL, + render: (_, { rules }: SharedRoleMapping) => getFirstAttributeValue(rules), + }; - const rowActions = (id: string) => ( - <> - initializeRoleMapping(id)} - iconType="pencil" - aria-label={MANAGE_BUTTON_LABEL} - data-test-subj="ManageButton" - />{' '} - handleDeleteMapping(id)} - iconType="trash" - aria-label={DELETE_BUTTON_LABEL} - data-test-subj="DeleteButton" + const roleCol: EuiBasicTableColumn = { + field: 'roleType', + name: ROLE_LABEL, + render: (_, { rules }: SharedRoleMapping) => getFirstAttributeValue(rules), + }; + + const accessItemsCol: EuiBasicTableColumn = { + field: 'accessItems', + name: accessHeader, + render: (_, { accessAllEngines, accessItems }: SharedRoleMapping) => ( + + {accessAllEngines ? ( + ALL_LABEL + ) : ( + <> + {accessItems.length === 0 + ? noItemsPlaceholder + : accessItems.map(({ name }) => ( + + {name} +
+
+ ))} + + )} +
+ ), + }; + + const authProviderCol: EuiBasicTableColumn = { + field: 'authProvider', + name: AUTH_PROVIDER_LABEL, + render: (_, { authProvider }: SharedRoleMapping) => ( + + {authProvider.map(getAuthProviderDisplayValue).join(', ')} + + ), + }; + + const actionsCol: EuiBasicTableColumn = { + field: 'id', + name: '', + align: 'right', + render: (_, { id }: SharedRoleMapping) => ( + initializeRoleMapping(id)} + onDeleteClick={() => handleDeleteMapping(id)} /> - - ); + ), + }; + const columns = shouldShowAuthProvider + ? [attributeNameCol, attributeValueCol, roleCol, accessItemsCol, authProviderCol, actionsCol] + : [attributeNameCol, attributeValueCol, roleCol, accessItemsCol, actionsCol]; + + const pagination = { + hidePerPageOptions: true, + }; + + const search = { + box: { + incremental: true, + fullWidth: false, + placeholder: FILTER_ROLE_MAPPINGS_PLACEHOLDER, + 'data-test-subj': 'RoleMappingsTableSearchInput', + }, + }; return ( - <> - updateValue(e.target.value)} - /> - - {filteredResults.length > 0 ? ( - - - {EXTERNAL_ATTRIBUTE_LABEL} - {ATTRIBUTE_VALUE_LABEL} - {ROLE_LABEL} - {accessHeader} - {shouldShowAuthProvider && ( - {AUTH_PROVIDER_LABEL} - )} - - - - {filteredResults.map( - ({ id, authProvider, rules, roleType, accessAllEngines, accessItems, toolTip }) => ( - - {getFirstAttributeName(rules)} - - {getFirstAttributeValue(rules)} - - {roleType} - - {accessAllEngines ? ( - ALL_LABEL - ) : ( - <> - {accessItems.length === 0 - ? noItemsPlaceholder - : accessItems.map(({ name }) => ( - - {name} -
-
- ))} - - )} -
- {shouldShowAuthProvider && ( - - {authProvider.map(getAuthProviderDisplayValue).join(', ')} - - )} - - {id && rowActions(id)} - {toolTip && } - -
- ) - )} -
-
- ) : ( -

- {i18n.translate('xpack.enterpriseSearch.roleMapping.moResults.message', { - defaultMessage: "No results found for '{filterValue}'", - values: { filterValue }, - })} -

- )} - + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.test.tsx new file mode 100644 index 00000000000000..dbb47b50d40669 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.test.tsx @@ -0,0 +1,46 @@ +/* + * 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 { EuiButtonIcon } from '@elastic/eui'; + +import { UsersAndRolesRowActions } from './users_and_roles_row_actions'; + +describe('UsersAndRolesRowActions', () => { + const onManageClick = jest.fn(); + const onDeleteClick = jest.fn(); + + const props = { + onManageClick, + onDeleteClick, + }; + + it('renders', () => { + const wrapper = shallow(); + + expect(wrapper.find(EuiButtonIcon)).toHaveLength(2); + }); + + it('handles manage click', () => { + const wrapper = shallow(); + const button = wrapper.find(EuiButtonIcon).first(); + button.simulate('click'); + + expect(onManageClick).toHaveBeenCalled(); + }); + + it('handles delete click', () => { + const wrapper = shallow(); + const button = wrapper.find(EuiButtonIcon).last(); + button.simulate('click'); + + expect(onDeleteClick).toHaveBeenCalled(); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.tsx new file mode 100644 index 00000000000000..3d956c0aabd688 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/role_mapping/users_and_roles_row_actions.tsx @@ -0,0 +1,24 @@ +/* + * 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 { EuiButtonIcon } from '@elastic/eui'; + +import { MANAGE_BUTTON_LABEL, DELETE_BUTTON_LABEL } from '../constants'; + +interface Props { + onManageClick(): void; + onDeleteClick(): void; +} + +export const UsersAndRolesRowActions: React.FC = ({ onManageClick, onDeleteClick }) => ( + <> + {' '} + + +); diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 13ec1efeb1bec1..ad68b7180c8966 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7966,7 +7966,7 @@ "xpack.enterpriseSearch.roleMapping.filterRoleMappingsPlaceholder": "ロールをフィルタリング...", "xpack.enterpriseSearch.roleMapping.individualAuthProviderLabel": "個別の認証プロバイダーを選択", "xpack.enterpriseSearch.roleMapping.manageRoleMappingTitle": "ロールマッピングを管理", - "xpack.enterpriseSearch.roleMapping.moResults.message": "'{filterValue}'の結果が見つかりません。", + "xpack.enterpriseSearch.roleMapping.noResults.message": "の結果が見つかりません。", "xpack.enterpriseSearch.roleMapping.newRoleMappingTitle": "ロールマッピングを追加", "xpack.enterpriseSearch.roleMapping.roleLabel": "ロール", "xpack.enterpriseSearch.roleMapping.roleMappingsTitle": "ユーザーとロール", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index efa055e06bc405..a25a7438bcd167 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -8034,7 +8034,7 @@ "xpack.enterpriseSearch.roleMapping.filterRoleMappingsPlaceholder": "筛选角色......", "xpack.enterpriseSearch.roleMapping.individualAuthProviderLabel": "选择单个身份验证提供程序", "xpack.enterpriseSearch.roleMapping.manageRoleMappingTitle": "管理角色映射", - "xpack.enterpriseSearch.roleMapping.moResults.message": "找不到“{filterValue}”的结果", + "xpack.enterpriseSearch.roleMapping.noResults.message": "找不到的结果", "xpack.enterpriseSearch.roleMapping.newRoleMappingTitle": "添加角色映射", "xpack.enterpriseSearch.roleMapping.roleLabel": "角色", "xpack.enterpriseSearch.roleMapping.roleMappingsTitle": "用户和角色",