[Enterprise Search] Add User management feature

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx

@@ -100,8 +100,8 @@ describe('useAppSearchNav', () => {
           },
           {
             id: 'usersRoles',
-            name: 'Users & roles',
-            href: '/role_mappings',
+            name: 'Users and roles',
+            href: '/users_and_roles',
           },
         ],
       },

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx

@@ -13,7 +13,7 @@ import { generateNavLink } from '../../../shared/layout';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
 
 import { AppLogic } from '../../app_logic';
-import { ENGINES_PATH, SETTINGS_PATH, CREDENTIALS_PATH, ROLE_MAPPINGS_PATH } from '../../routes';
+import { ENGINES_PATH, SETTINGS_PATH, CREDENTIALS_PATH, USERS_AND_ROLES_PATH } from '../../routes';
 import { CREDENTIALS_TITLE } from '../credentials';
 import { useEngineNav } from '../engine/engine_nav';
 import { ENGINES_TITLE } from '../engines';
@@ -57,7 +57,7 @@ export const useAppSearchNav = () => {
     navItems.push({
       id: 'usersRoles',
       name: ROLE_MAPPINGS_TITLE,
-      ...generateNavLink({ to: ROLE_MAPPINGS_PATH }),
+      ...generateNavLink({ to: USERS_AND_ROLES_PATH }),
     });
   }
 

x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mapping.tsx

@@ -28,7 +28,7 @@ export const RoleMapping: React.FC = () => {
     handleAuthProviderChange,
     handleRoleChange,
     handleSaveMapping,
-    closeRoleMappingFlyout,
+    closeUsersAndRolesFlyout,
   } = useActions(RoleMappingsLogic);
 
   const {
@@ -68,7 +68,7 @@ export const RoleMapping: React.FC = () => {
     <RoleMappingFlyout
       disabled={attributeValueInvalid || !hasEngineAssignment}
       isNew={isNew}
-      closeRoleMappingFlyout={closeRoleMappingFlyout}
+      closeUsersAndRolesFlyout={closeUsersAndRolesFlyout}
       handleSaveMapping={handleSaveMapping}
     >
       <EuiForm isInvalid={roleMappingErrors.length > 0} error={roleMappingErrors}>

x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.test.tsx

@@ -12,26 +12,39 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { RoleMappingsTable, RoleMappingsHeading } from '../../../shared/role_mapping';
-import { wsRoleMapping } from '../../../shared/role_mapping/__mocks__/roles';
+import {
+  RoleMappingsTable,
+  RoleMappingsHeading,
+  UsersHeading,
+  UsersEmptyPrompt,
+} from '../../../shared/role_mapping';
+import {
+  asRoleMapping,
+  asSingleUserRoleMapping,
+} from '../../../shared/role_mapping/__mocks__/roles';
 
 import { RoleMapping } from './role_mapping';
 import { RoleMappings } from './role_mappings';
+import { User } from './user';
 
 describe('RoleMappings', () => {
   const initializeRoleMappings = jest.fn();
   const initializeRoleMapping = jest.fn();
+  const initializeSingleUserRoleMapping = jest.fn();
   const handleDeleteMapping = jest.fn();
   const mockValues = {
-    roleMappings: [wsRoleMapping],
+    roleMappings: [asRoleMapping],
     dataLoading: false,
     multipleAuthProvidersConfig: false,
+    singleUserRoleMappings: [asSingleUserRoleMapping],
+    singleUserRoleMappingFlyoutOpen: false,
   };
 
   beforeEach(() => {
     setMockActions({
       initializeRoleMappings,
       initializeRoleMapping,
+      initializeSingleUserRoleMapping,
       handleDeleteMapping,
     });
     setMockValues(mockValues);
@@ -50,10 +63,31 @@ describe('RoleMappings', () => {
     expect(wrapper.find(RoleMapping)).toHaveLength(1);
   });
 
-  it('handles onClick', () => {
+  it('renders User flyout', () => {
+    setMockValues({ ...mockValues, singleUserRoleMappingFlyoutOpen: true });
+    const wrapper = shallow(<RoleMappings />);
+
+    expect(wrapper.find(User)).toHaveLength(1);
+  });
+
+  it('handles RoleMappingsHeading onClick', () => {
     const wrapper = shallow(<RoleMappings />);
     wrapper.find(RoleMappingsHeading).prop('onClick')();
 
     expect(initializeRoleMapping).toHaveBeenCalled();
   });
+
+  it('handles UsersHeading onClick', () => {
+    const wrapper = shallow(<RoleMappings />);
+    wrapper.find(UsersHeading).prop('onClick')();
+
+    expect(initializeSingleUserRoleMapping).toHaveBeenCalled();
+  });
+
+  it('handles empty users state', () => {
+    setMockValues({ ...mockValues, singleUserRoleMappings: [] });
+    const wrapper = shallow(<RoleMappings />);
+
+    expect(wrapper.find(UsersEmptyPrompt)).toHaveLength(1);
+  });
 });

x-pack/plugins/enterprise_search/public/applications/app_search/components/role_mappings/role_mappings.tsx

@@ -9,11 +9,16 @@ import React, { useEffect } from 'react';
 
 import { useActions, useValues } from 'kea';
 
+import { EuiSpacer } from '@elastic/eui';
+
 import { APP_SEARCH_PLUGIN } from '../../../../../common/constants';
 import {
   RoleMappingsTable,
   RoleMappingsHeading,
   RolesEmptyPrompt,
+  UsersTable,
+  UsersHeading,
+  UsersEmptyPrompt,
 } from '../../../shared/role_mapping';
 import { ROLE_MAPPINGS_TITLE } from '../../../shared/role_mapping/constants';
 
@@ -23,6 +28,7 @@ import { AppSearchPageTemplate } from '../layout';
 import { ROLE_MAPPINGS_ENGINE_ACCESS_HEADING } from './constants';
 import { RoleMapping } from './role_mapping';
 import { RoleMappingsLogic } from './role_mappings_logic';
+import { User } from './user';
 
 const ROLES_DOCS_LINK = `${DOCS_PREFIX}/security-and-users.html`;
 
@@ -31,21 +37,26 @@ export const RoleMappings: React.FC = () => {
     enableRoleBasedAccess,
     initializeRoleMappings,
     initializeRoleMapping,
+    initializeSingleUserRoleMapping,
     handleDeleteMapping,
     resetState,
   } = useActions(RoleMappingsLogic);
   const {
     roleMappings,
+    singleUserRoleMappings,
     multipleAuthProvidersConfig,
     dataLoading,
     roleMappingFlyoutOpen,
+    singleUserRoleMappingFlyoutOpen,
   } = useValues(RoleMappingsLogic);
 
   useEffect(() => {
     initializeRoleMappings();
     return resetState;
   }, []);
 
+  const hasUsers = singleUserRoleMappings.length > 0;
+
   const rolesEmptyState = (
     <RolesEmptyPrompt
       productName={APP_SEARCH_PLUGIN.NAME}
@@ -72,6 +83,23 @@ export const RoleMappings: React.FC = () => {
     </section>
   );
 
+  const usersTable = (
+    <UsersTable
+      accessItemKey="engines"
+      singleUserRoleMappings={singleUserRoleMappings}
+      initializeSingleUserRoleMapping={initializeSingleUserRoleMapping}
+      handleDeleteMapping={handleDeleteMapping}
+    />
+  );
+
+  const usersSection = (
+    <>
+      <UsersHeading onClick={() => initializeSingleUserRoleMapping()} />
+      <EuiSpacer />
+      {hasUsers ? usersTable : <UsersEmptyPrompt />}
+    </>
+  );
+
   return (
     <AppSearchPageTemplate
       pageChrome={[ROLE_MAPPINGS_TITLE]}
@@ -81,7 +109,10 @@ export const RoleMappings: React.FC = () => {
       emptyState={rolesEmptyState}
     >
       {roleMappingFlyoutOpen && <RoleMapping />}
+      {singleUserRoleMappingFlyoutOpen && <User />}
       {roleMappingsSection}
+      <EuiSpacer size="xxl" />
+      {usersSection}
     </AppSearchPageTemplate>
   );
 };