From f0204d454b741789c2523330ec7c7b7c67a0a1e9 Mon Sep 17 00:00:00 2001
From: Katia Aresti <karesti@redhat.com>
Date: Tue, 14 Nov 2023 17:42:10 +0100
Subject: [PATCH] ISPN-14702 Grant and deny new access

---
 cypress/e2e/1_acess_management.cy.js          |  22 ++
 src/__tests__/views/NotFound.test.tsx         |   2 +-
 src/app/AccessManagement/AccessManager.tsx    |  17 +-
 src/app/AccessManagement/CreateRole.tsx       |   4 +-
 src/app/AccessManagement/GrantNewAccess.tsx   | 193 ++++++++++++++++++
 .../ManageRolesForPrincipal.tsx               | 186 +++++++++++++++++
 .../PrincipalTableDisplay.tsx                 | 117 +++++++++--
 src/app/AccessManagement/RemovePrincipal.tsx  |  58 ++++++
 src/app/AccessManagement/RoleDetail.tsx       |   4 +-
 .../RoleDetailContent/AddPermissions.tsx      |   4 +-
 .../RoleDetailContent/RoleCaches.tsx          |  19 +-
 .../RoleDetailContent/RolePermissions.tsx     |   6 +-
 src/app/AccessManagement/RoleTableDisplay.tsx |   8 +-
 src/app/assets/languages/en.json              |  24 ++-
 src/app/services/principalsHook.ts            | 103 ++++++++++
 src/services/cacheService.ts                  |   6 +-
 src/services/infinispanRefData.ts             |   2 +-
 src/services/securityService.ts               |  46 +++++
 src/test-utils.tsx                            |  11 +-
 19 files changed, 761 insertions(+), 71 deletions(-)
 create mode 100644 src/app/AccessManagement/GrantNewAccess.tsx
 create mode 100644 src/app/AccessManagement/ManageRolesForPrincipal.tsx
 create mode 100644 src/app/AccessManagement/RemovePrincipal.tsx

diff --git a/cypress/e2e/1_acess_management.cy.js b/cypress/e2e/1_acess_management.cy.js
index 84f0cf79..41c87be2 100644
--- a/cypress/e2e/1_acess_management.cy.js
+++ b/cypress/e2e/1_acess_management.cy.js
@@ -70,4 +70,26 @@ describe('Global stats', () => {
     cy.contains('aRole description').should('not.exist');
   });
 
+  it('successfully creates, updates and removes a principal', () => {
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/access-management');
+    cy.get('[aria-label=nav-item-principals').click();
+    cy.contains('No principals').click();
+    cy.get('[data-cy=grantAccessPrincipalButton').click();
+    cy.get("[aria-label=principal-name-input]").type("aPrincipal");
+    cy.get("[data-cy=menu-toogle-roles]").click();
+    cy.get("[data-cy=option-typeahead-deployer]").click();
+    cy.get("[data-cy=menu-toogle-roles]").click();
+    cy.get('[aria-label=Save').click();
+    // cy.contains('Access granted to aPrincipal.');
+    // cy.get("[aria-label=aPrincipal-menu]").click();
+    // cy.get("[aria-label=manageRoles]").click();
+    // cy.get("[data-cy=menu-toogle-roles]").click();
+    // cy.get("[data-cy=option-typeahead-admin]").click();
+    // cy.get("[data-cy=option-typeahead-deployer]").click();
+    // cy.get("[data-cy=menu-toogle-roles]").click();
+    // cy.get('[aria-label=Save').click();
+    // cy.contains('Roles [admin] granted to aPrincipal.');
+    // TODO: remove needs to be tested with REST API fixes
+  });
+
 });
diff --git a/src/__tests__/views/NotFound.test.tsx b/src/__tests__/views/NotFound.test.tsx
index 006ef466..d52a7e9d 100644
--- a/src/__tests__/views/NotFound.test.tsx
+++ b/src/__tests__/views/NotFound.test.tsx
@@ -7,7 +7,7 @@ const mockNavigate = jest.fn();
 
 jest.mock('react-router', () => ({
   ...jest.requireActual('react-router'),
-  useNavigate: () => mockNavigate,
+  useNavigate: () => mockNavigate
 }));
 
 describe('Not found page', () => {
diff --git a/src/app/AccessManagement/AccessManager.tsx b/src/app/AccessManagement/AccessManager.tsx
index d6c047b8..e6e64b7e 100644
--- a/src/app/AccessManagement/AccessManager.tsx
+++ b/src/app/AccessManagement/AccessManager.tsx
@@ -25,11 +25,12 @@ import { useTranslation } from 'react-i18next';
 import { RoleTableDisplay } from '@app/AccessManagement/RoleTableDisplay';
 import { FlushRoleCacheModal } from '@app/AccessManagement/FlushRoleCacheModal';
 import { PrincipalTableDisplay } from '@app/AccessManagement/PrincipalTableDisplay';
+import { IAction } from '@patternfly/react-table';
 
 const AccessManager = () => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
-  const [activeTabKey, setActiveTabKey] = useState('0');
+  const [activeTabKey, setActiveTabKey] = useState<'roles' | 'principals'>('roles');
   const [showRoles, setShowRoles] = useState(true);
   const [showAccessControl, setShowAccessControl] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -51,21 +52,23 @@ const AccessManager = () => {
   const handleTabClick = (ev, nav) => {
     const tabIndex = nav.itemId;
     setActiveTabKey(tabIndex);
-    setShowRoles(tabIndex == '0');
-    setShowAccessControl(tabIndex == '1');
+    setShowRoles(tabIndex == 'roles');
+    setShowAccessControl(tabIndex == 'principals');
   };
+
   const buildTabs = () => {
     const tabs: AccessTab[] = [
-      { name: t('access-management.tab-roles'), key: '0' },
-      { name: t('access-management.tab-access-control'), key: '1' },
+      { name: t('access-management.tab-roles'), key: 'roles' },
+      { name: t('access-management.tab-access-control'), key: 'principals' }
     ];
 
     return (
-      <Nav data-cy="navigationTabs" onSelect={handleTabClick} variant={'tertiary'}>
+      <Nav onSelect={handleTabClick} variant={'tertiary'}>
         <NavList>
           {tabs.map((tab) => (
             <NavItem
-              aria-label={'nav-item-' + tab.name}
+              data-cy={'nav-item-' + tab.key}
+              aria-label={'nav-item-' + tab.key}
               key={'nav-item-' + tab.key}
               itemId={tab.key}
               isActive={activeTabKey === tab.key}
diff --git a/src/app/AccessManagement/CreateRole.tsx b/src/app/AccessManagement/CreateRole.tsx
index 3578b3dd..8477db4c 100644
--- a/src/app/AccessManagement/CreateRole.tsx
+++ b/src/app/AccessManagement/CreateRole.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import formUtils, { IField } from '@services/formUtils';
 import { AddCircleOIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { useCreateRole, useFetchAvailableRoles } from '@app/services/rolesHook';
-import { PERMISSIONS_MAP } from '@services/infinispanRefData';
+import { ROLES_MAP } from '@services/infinispanRefData';
 import { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
 
 const CreateRole = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
@@ -24,7 +24,7 @@ const CreateRole = (props: { isModalOpen: boolean; submitModal: () => void; clos
   const { roles } = useFetchAvailableRoles();
   const initPermissions = () => {
     const array: SelectOptionProps[] = [];
-    PERMISSIONS_MAP.forEach((value, key, map) => {
+    ROLES_MAP.forEach((value, key, map) => {
       const desc = t(value);
       array.push({
         id: key,
diff --git a/src/app/AccessManagement/GrantNewAccess.tsx b/src/app/AccessManagement/GrantNewAccess.tsx
new file mode 100644
index 00000000..a81f0374
--- /dev/null
+++ b/src/app/AccessManagement/GrantNewAccess.tsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Modal,
+  ModalVariant,
+  SelectOptionProps,
+  TextInput
+} from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import formUtils, { IField } from '@services/formUtils';
+import { AddCircleOIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { useFetchAvailableRoles } from '@app/services/rolesHook';
+import { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
+import { useFetchAvailablePrincipals, useGrantAccess } from '@app/services/principalsHook';
+
+const GrantNewAccess = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
+  const { t } = useTranslation();
+  const brandname = t('brandname.brandname');
+  const { roles } = useFetchAvailableRoles();
+  const { principals } = useFetchAvailablePrincipals();
+  const rolesOptions = () => {
+    const array: SelectOptionProps[] = [];
+    roles.forEach((role) => {
+      array.push({
+        id: role.name,
+        value: role.name,
+        children: role.name,
+        description: role.description
+      });
+    });
+    return array;
+  };
+
+  const principalNameInitialState: IField = {
+    value: '',
+    isValid: false,
+    validated: 'default'
+  };
+
+  const principalRolesInitialState: IField = {
+    value: '',
+    isValid: false,
+    validated: 'default'
+  };
+
+  const [principalName, setPrincipalName] = useState<IField>(principalNameInitialState);
+  const [principalRolesField, setPrincipalRolesField] = useState<IField>(principalRolesInitialState);
+  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
+  const { onGrantAccess } = useGrantAccess(principalName.value, selectedRoles, props.submitModal);
+
+  useEffect(() => {
+    if (selectedRoles.length > 0) {
+      setPrincipalRolesField(principalRolesInitialState);
+    }
+  }, [selectedRoles]);
+
+  const handleSubmit = () => {
+    let isValid = true;
+    const trimmedPrincipalName = principalName.value.trim();
+    if (trimmedPrincipalName.length == 0) {
+      isValid = false;
+      setPrincipalName({
+        ...principalName,
+        isValid: isValid,
+        invalidText: t('access-management.principals.modal-principal-name-is-required'),
+        validated: 'error'
+      });
+    } else if (principals.filter((p) => p.name == trimmedPrincipalName).length > 0) {
+      isValid = false;
+      setPrincipalName({
+        ...principalName,
+        isValid: isValid,
+        invalidText: t('access-management.principals.modal-principal-exists', { name: trimmedPrincipalName }),
+        validated: 'error'
+      });
+    }
+    // validates permissions
+    if (selectedRoles.length == 0) {
+      isValid = false;
+      setPrincipalRolesField({
+        ...principalRolesField,
+        isValid: isValid,
+        invalidText: t('access-management.principals.modal-roles-is-required'),
+        validated: 'error'
+      });
+    }
+
+    if (isValid) {
+      onGrantAccess();
+      onCloseModal();
+    }
+  };
+
+  const onCloseModal = () => {
+    props.closeModal();
+    setPrincipalName(principalNameInitialState);
+    setPrincipalRolesField(principalRolesInitialState);
+    setSelectedRoles([]);
+  };
+
+  const onSelectRoles = (value: string) => {
+    if (value && value !== 'no results') {
+      setSelectedRoles(
+        selectedRoles.includes(value)
+          ? selectedRoles.filter((selection) => selection !== value)
+          : [...selectedRoles, value]
+      );
+    }
+  };
+
+  return (
+    <Modal
+      position={'top'}
+      tabIndex={0}
+      titleIconVariant={AddCircleOIcon}
+      variant={ModalVariant.small}
+      id={'grant-new-access-modal'}
+      className="pf-m-redhat-font"
+      isOpen={props.isModalOpen}
+      title={t('access-management.principals.modal-grant-title')}
+      description={t('access-management.principals.modal-grant-description', { brandname: brandname })}
+      onClose={onCloseModal}
+      aria-label={'principals-modal-grant-title'}
+      disableFocusTrap={true}
+      actions={[
+        <Button key={'Save'} aria-label={'Save'} variant={ButtonVariant.primary} onClick={handleSubmit}>
+          {t('common.actions.save')}
+        </Button>,
+        <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={onCloseModal}>
+          {t('common.actions.cancel')}
+        </Button>
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormGroup isRequired isInline label={t('access-management.principals.modal-principal-name')}>
+          <TextInput
+            validated={principalName.validated}
+            value={principalName.value}
+            type="text"
+            onChange={(_event, value) =>
+              formUtils.validateRequiredField(
+                value,
+                t('access-management.principals.modal-principal-name'),
+                setPrincipalName
+              )
+            }
+            aria-label="principal-name-input"
+          />
+          {principalName.validated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant={'error'} icon={<ExclamationCircleIcon />}>
+                  {principalName.invalidText}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
+        </FormGroup>
+        <FormGroup fieldId="roles" isRequired isInline label={t('access-management.principals.modal-roles')}>
+          <SelectMultiWithChips
+            id="roles"
+            placeholder={t('access-management.principals.modal-roles-list-placeholder')}
+            options={rolesOptions()}
+            selection={selectedRoles}
+            onSelect={onSelectRoles}
+            onClear={() => setSelectedRoles([])}
+          />
+          {principalRolesField.validated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant={'error'} icon={<ExclamationCircleIcon />}>
+                  {principalRolesField.invalidText}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export { GrantNewAccess };
diff --git a/src/app/AccessManagement/ManageRolesForPrincipal.tsx b/src/app/AccessManagement/ManageRolesForPrincipal.tsx
new file mode 100644
index 00000000..a2528d07
--- /dev/null
+++ b/src/app/AccessManagement/ManageRolesForPrincipal.tsx
@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Modal,
+  ModalVariant,
+  SelectOptionProps,
+  Spinner,
+  TextInput
+} from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { IField } from '@services/formUtils';
+import { AddCircleOIcon, EditIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
+import { useFetchAvailableRoles } from '@app/services/rolesHook';
+import { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
+import { useDescribePrincipal, useGrantOrDenyRoles } from '@app/services/principalsHook';
+
+const ManageRolesForPrincipal = (props: {
+  principalName: string;
+  isModalOpen: boolean;
+  submitModal: () => void;
+  closeModal: () => void;
+}) => {
+  const { t } = useTranslation();
+  const brandname = t('brandname.brandname');
+  const { roles } = useFetchAvailableRoles();
+  const { principal, loading, error, setLoading } = useDescribePrincipal(props.principalName);
+  const rolesOptions = () => {
+    const array: SelectOptionProps[] = [];
+    roles.forEach((role) => {
+      array.push({
+        id: role.name,
+        value: role.name,
+        children: role.name,
+        description: role.description
+      });
+    });
+    return array;
+  };
+
+  const principalRolesInitialState: IField = {
+    value: '',
+    isValid: false,
+    validated: 'default'
+  };
+
+  const [principalRolesField, setPrincipalRolesField] = useState<IField>(principalRolesInitialState);
+  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
+  const { onGrantOrDenyRoles } = useGrantOrDenyRoles(props.principalName, props.submitModal);
+
+  useEffect(() => {
+    if (props.isModalOpen) {
+      setLoading(true);
+    }
+  }, [props.isModalOpen]);
+
+  useEffect(() => {
+    if (principal && !loading) {
+      setSelectedRoles(principal.roles);
+    }
+  }, [loading, principal]);
+
+  useEffect(() => {
+    if (selectedRoles.length > 0) {
+      setPrincipalRolesField(principalRolesInitialState);
+    }
+  }, [selectedRoles]);
+
+  const handleSubmit = () => {
+    let isValid = true;
+    if (selectedRoles.length == 0) {
+      isValid = false;
+      setPrincipalRolesField({
+        ...principalRolesField,
+        isValid: isValid,
+        invalidText: t('access-management.principals.modal-roles-is-required'),
+        validated: 'error'
+      });
+    }
+
+    if (isValid) {
+      if (principal) {
+        onGrantOrDenyRoles(
+          'grant',
+          selectedRoles.filter((r) => !principal.roles.includes(r))
+        );
+        onGrantOrDenyRoles(
+          'deny',
+          principal.roles.filter((r) => !selectedRoles.includes(r))
+        );
+      }
+      onCloseModal();
+    }
+  };
+
+  const onCloseModal = () => {
+    props.closeModal();
+    setPrincipalRolesField(principalRolesInitialState);
+    setSelectedRoles([]);
+  };
+
+  const onSelectRoles = (value: string) => {
+    if (value && value !== 'no results') {
+      setSelectedRoles(
+        selectedRoles.includes(value)
+          ? selectedRoles.filter((selection) => selection !== value)
+          : [...selectedRoles, value]
+      );
+    }
+  };
+
+  const displayContent = () => {
+    if (loading) {
+      return <Spinner size={'lg'} />;
+    }
+
+    if (error) {
+      return <Alert variant="danger" isInline isPlain title={error} />;
+    }
+
+    return (
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormGroup isRequired isInline label={t('access-management.principals.modal-principal-name')}>
+          <TextInput value={props.principalName} type="text" aria-label="principal-name-input" isDisabled={true} />
+        </FormGroup>
+        <FormGroup fieldId="roles" isRequired isInline label={t('access-management.principals.modal-roles')}>
+          <SelectMultiWithChips
+            id="roles"
+            placeholder={t('access-management.principals.modal-roles-list-placeholder')}
+            options={rolesOptions()}
+            selection={selectedRoles}
+            onSelect={onSelectRoles}
+            onClear={() => setSelectedRoles([])}
+          />
+          {principalRolesField.validated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant={'error'} icon={<ExclamationCircleIcon />}>
+                  {principalRolesField.invalidText}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
+        </FormGroup>
+      </Form>
+    );
+  };
+  return (
+    <Modal
+      position={'top'}
+      tabIndex={0}
+      titleIconVariant={EditIcon}
+      variant={ModalVariant.small}
+      id={'grant-new-access-modal'}
+      className="pf-m-redhat-font"
+      isOpen={props.isModalOpen}
+      title={t('access-management.principals.modal-manage-roles-title')}
+      description={t('access-management.principals.modal-manage-roles-description', { brandname: brandname })}
+      onClose={onCloseModal}
+      aria-label={'principals-modal-grant-title'}
+      disableFocusTrap={true}
+      actions={[
+        <Button key={'Save'} aria-label={'Save'} variant={ButtonVariant.primary} onClick={handleSubmit}>
+          {t('common.actions.save')}
+        </Button>,
+        <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={onCloseModal}>
+          {t('common.actions.cancel')}
+        </Button>
+      ]}
+    >
+      {displayContent()}
+    </Modal>
+  );
+};
+
+export { ManageRolesForPrincipal };
diff --git a/src/app/AccessManagement/PrincipalTableDisplay.tsx b/src/app/AccessManagement/PrincipalTableDisplay.tsx
index b8feb3b6..e3b3b6f7 100644
--- a/src/app/AccessManagement/PrincipalTableDisplay.tsx
+++ b/src/app/AccessManagement/PrincipalTableDisplay.tsx
@@ -4,14 +4,14 @@ import {
   Bullseye,
   Button,
   ButtonVariant,
-  Chip,
-  ChipGroup,
   EmptyState,
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStateVariant, Label, LabelGroup,
+  EmptyStateVariant,
+  Label,
+  LabelGroup,
   Pagination,
   SearchInput,
   Title,
@@ -21,13 +21,16 @@ import {
   ToolbarItem,
   ToolbarItemVariant
 } from '@patternfly/react-core';
-import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { ActionsColumn, IAction, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import { DatabaseIcon, SearchIcon } from '@patternfly/react-icons';
 import { useFetchAvailablePrincipals } from '@app/services/principalsHook';
 import { global_spacer_sm, global_spacer_xl } from '@patternfly/react-tokens';
 import { TableErrorState } from '@app/Common/TableErrorState';
 import { TableLoadingState } from '@app/Common/TableLoadingState';
+import { GrantNewAccess } from '@app/AccessManagement/GrantNewAccess';
+import { RemovePrincipal } from '@app/AccessManagement/RemovePrincipal';
+import { ManageRolesForPrincipal } from '@app/AccessManagement/ManageRolesForPrincipal';
 
 const PrincipalTableDisplay = () => {
   const { t } = useTranslation();
@@ -36,11 +39,15 @@ const PrincipalTableDisplay = () => {
   const [searchValue, setSearchValue] = useState<string>('');
   const [principalsPagination, setPrincipalsPagination] = useState({
     page: 1,
-    perPage: 10
+    perPage: 5
   });
 
   const [filteredPrincipals, setFilteredPrincipals] = useState<Principal[]>([]);
   const [principalsRows, setPrincipalsRows] = useState<Principal[]>([]);
+  const [isGrantAccess, setIsGrantAccess] = useState(false);
+  const [isRemovePrincipal, setIsRemovePrincipal] = useState(false);
+  const [isManageRoles, setIsManageRoles] = useState(false);
+  const [principalToManage, setPrincipalToManage] = useState('');
 
   useEffect(() => {
     if (searchValue.trim() !== '') {
@@ -61,9 +68,31 @@ const PrincipalTableDisplay = () => {
 
   const columnNames = {
     name: t('access-management.principals.principal-name'),
-    roles: t('access-management.principals.roles'),
+    roles: t('access-management.principals.roles')
   };
 
+  const rowActions = (principal: Principal): IAction[] => [
+    {
+      'aria-label': 'manageRoles',
+      title: t('access-management.principals.manage-roles-action'),
+      onClick: () => {
+        setPrincipalToManage(principal.name);
+        setIsManageRoles(true);
+      }
+    },
+    {
+      isSeparator: true
+    },
+    {
+      'aria-label': 'removePrincipal',
+      title: t('common.actions.remove'),
+      onClick: () => {
+        setPrincipalToManage(principal.name);
+        setIsRemovePrincipal(true);
+      }
+    }
+  ];
+
   const onSetPage = (_event, pageNumber) => {
     setPrincipalsPagination({
       ...principalsPagination,
@@ -100,22 +129,26 @@ const PrincipalTableDisplay = () => {
         {principalsRows.map((row) => (
           <Tr key={row.name}>
             <Td dataLabel={columnNames.name} width={15}>
-                {row.name}
+              {row.name}
             </Td>
             <Td dataLabel={columnNames.roles} width={30}>
               {
                 <LabelGroup>
                   {row.roles.map((currentRole) => (
-                    <Label key={currentRole}
-                           render={({ className, content, componentRef }) => (
-                             <Link
-                               data-cy={`detailLink-${currentRole}`}
-                               key={currentRole}
-                               to={{ pathname: '/access-management/role/' + encodeURIComponent(currentRole), search: location.search }}
-                             >
-                               {content}
-                             </Link>
-                           )}
+                    <Label
+                      key={currentRole}
+                      render={({ className, content, componentRef }) => (
+                        <Link
+                          data-cy={`detailLink-${currentRole}`}
+                          key={currentRole}
+                          to={{
+                            pathname: '/access-management/role/' + encodeURIComponent(currentRole),
+                            search: location.search
+                          }}
+                        >
+                          {content}
+                        </Link>
+                      )}
                     >
                       {currentRole}
                     </Label>
@@ -123,6 +156,9 @@ const PrincipalTableDisplay = () => {
                 </LabelGroup>
               }
             </Td>
+            <Td isActionCell aria-label={row.name + '-menu'}>
+              {<ActionsColumn items={rowActions(row)} />}
+            </Td>
           </Tr>
         ))}
       </React.Fragment>
@@ -132,7 +168,7 @@ const PrincipalTableDisplay = () => {
   const displayEmptySearch = () => {
     return (
       <Tr>
-        <Td colSpan={2}>
+        <Td colSpan={3}>
           <Bullseye>
             <EmptyState variant={EmptyStateVariant.sm}>
               <EmptyStateIcon icon={SearchIcon} />
@@ -151,7 +187,7 @@ const PrincipalTableDisplay = () => {
     );
   };
 
-  const createPrincipalButtonHelper = (isEmptyPage?: boolean) => {
+  const grantAccessButtonHelper = (isEmptyPage?: boolean) => {
     const emptyPageButtonProp = { style: { marginTop: global_spacer_xl.value } };
     const normalPageButtonProps = { style: { marginLeft: global_spacer_sm.value } };
     return (
@@ -159,6 +195,7 @@ const PrincipalTableDisplay = () => {
         variant={ButtonVariant.primary}
         aria-label="grant-access-principal-button-helper"
         data-cy="grantAccessPrincipalButton"
+        onClick={() => setIsGrantAccess(true)}
         {...(isEmptyPage ? emptyPageButtonProp : normalPageButtonProps)}
       >
         {t('access-management.principals.grant-access')}
@@ -175,8 +212,10 @@ const PrincipalTableDisplay = () => {
             icon={<EmptyStateIcon icon={DatabaseIcon} />}
             headingLevel="h4"
           />
-          <EmptyStateBody>{t('access-management.principals.no-principals-body', { brandname: brandname })}</EmptyStateBody>
-          {/*<EmptyStateFooter>{createPrincipalButtonHelper(true)}</EmptyStateFooter>*/}
+          <EmptyStateBody>
+            {t('access-management.principals.no-principals-body', { brandname: brandname })}
+          </EmptyStateBody>
+          <EmptyStateFooter>{grantAccessButtonHelper(true)}</EmptyStateFooter>
         </EmptyState>
       );
     }
@@ -203,7 +242,7 @@ const PrincipalTableDisplay = () => {
                   onClear={() => setSearchValue('')}
                 />
               </ToolbarItem>
-              {/*<ToolbarItem>{createPrincipalButtonHelper(false)}</ToolbarItem>*/}
+              <ToolbarItem>{grantAccessButtonHelper(false)}</ToolbarItem>
             </ToolbarGroup>
             <ToolbarItem variant={ToolbarItemVariant.pagination}>{pagination}</ToolbarItem>
           </ToolbarContent>
@@ -242,6 +281,40 @@ const PrincipalTableDisplay = () => {
   return (
     <React.Fragment>
       {displayContent()}
+      <GrantNewAccess
+        isModalOpen={isGrantAccess}
+        submitModal={() => {
+          setIsGrantAccess(false);
+          setLoading(true);
+        }}
+        closeModal={() => setIsGrantAccess(false)}
+      />
+      <ManageRolesForPrincipal
+        principalName={principalToManage}
+        isModalOpen={isManageRoles}
+        submitModal={() => {
+          setPrincipalToManage('');
+          setIsManageRoles(false);
+          setLoading(true);
+        }}
+        closeModal={() => {
+          setPrincipalToManage('');
+          setIsManageRoles(false);
+        }}
+      />
+      <RemovePrincipal
+        name={principalToManage}
+        isModalOpen={isRemovePrincipal}
+        submitModal={() => {
+          setPrincipalToManage('');
+          setIsRemovePrincipal(false);
+          setLoading(true);
+        }}
+        closeModal={() => {
+          setPrincipalToManage('');
+          setIsRemovePrincipal(false);
+        }}
+      />
     </React.Fragment>
   );
 };
diff --git a/src/app/AccessManagement/RemovePrincipal.tsx b/src/app/AccessManagement/RemovePrincipal.tsx
new file mode 100644
index 00000000..bd88f207
--- /dev/null
+++ b/src/app/AccessManagement/RemovePrincipal.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button, ButtonVariant, Modal, Text, TextContent } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { useDeleteRole } from '@app/services/rolesHook';
+import { useGrantAccess, useRemovePrincipal } from '@app/services/principalsHook';
+
+const RemovePrincipal = (props: {
+  name: string;
+  isModalOpen: boolean;
+  submitModal: () => void;
+  closeModal: () => void;
+}) => {
+  const { t } = useTranslation();
+  const { onRemove } = useRemovePrincipal(props.name, props.submitModal);
+  const brandname = t('brandname.brandname');
+
+  return (
+    <Modal
+      titleIconVariant={'warning'}
+      id={'remove-principal-modal'}
+      className="pf-m-redhat-font"
+      width={'50%'}
+      isOpen={props.isModalOpen}
+      title={t('access-management.principals.modal-remove-title', { principalName: props.name })}
+      onClose={props.closeModal}
+      aria-label="modal-principal-delete"
+      disableFocusTrap={true}
+      actions={[
+        <Button
+          key={'Remove'}
+          aria-label={'Remove'}
+          variant={ButtonVariant.warning}
+          onClick={() => {
+            onRemove();
+          }}
+        >
+          {t('common.actions.remove')}
+        </Button>,
+        <Button
+          key={'Cancel'}
+          aria-label={'Cancel'}
+          variant={ButtonVariant.link}
+          onClick={props.closeModal}
+          data-cy="cancelPrincipalRemoveButton"
+        >
+          {t('common.actions.cancel')}
+        </Button>
+      ]}
+    >
+      <TextContent>
+        <Text>{t('access-management.principals.modal-remove-description-1', { brandname: brandname })}</Text>
+        <Text>{t('access-management.principals.modal-remove-description-2')}</Text>
+      </TextContent>
+    </Modal>
+  );
+};
+
+export { RemovePrincipal };
diff --git a/src/app/AccessManagement/RoleDetail.tsx b/src/app/AccessManagement/RoleDetail.tsx
index f817c7d8..7f35ac26 100644
--- a/src/app/AccessManagement/RoleDetail.tsx
+++ b/src/app/AccessManagement/RoleDetail.tsx
@@ -73,7 +73,7 @@ const RoleDetail = () => {
 
   const buildTabs = () => {
     return (
-      <Nav data-cy="navigationTabs" onSelect={handleTabClick} variant={'tertiary'}>
+      <Nav onSelect={handleTabClick} variant={'tertiary'}>
         <NavList>
           {tabs.map((tab) => (
             <NavItem
@@ -148,7 +148,7 @@ const RoleDetail = () => {
           <CardBody>
             {showGeneralDescription && <RoleGeneral name={roleName} />}
             {showPermissions && <RolePermissions name={roleName} />}
-            {showCaches && <RoleCaches name={roleName}/>}
+            {showCaches && <RoleCaches name={roleName} />}
           </CardBody>
         </Card>
       </PageSection>
diff --git a/src/app/AccessManagement/RoleDetailContent/AddPermissions.tsx b/src/app/AccessManagement/RoleDetailContent/AddPermissions.tsx
index aa20009e..3a1fbbdc 100644
--- a/src/app/AccessManagement/RoleDetailContent/AddPermissions.tsx
+++ b/src/app/AccessManagement/RoleDetailContent/AddPermissions.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { IField } from '@services/formUtils';
 import { AddCircleOIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { useUpdateRole } from '@app/services/rolesHook';
-import { PERMISSIONS_MAP } from '@services/infinispanRefData';
+import { ROLES_MAP } from '@services/infinispanRefData';
 import { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
 
 const AddPermissions = (props: {
@@ -28,7 +28,7 @@ const AddPermissions = (props: {
   const { t } = useTranslation();
   const initPermissions = () => {
     const array: SelectOptionProps[] = [];
-    PERMISSIONS_MAP.forEach((value, key, map) => {
+    ROLES_MAP.forEach((value, key, map) => {
       if (!props.permissions.includes(key)) {
         const desc = t(value);
         array.push({
diff --git a/src/app/AccessManagement/RoleDetailContent/RoleCaches.tsx b/src/app/AccessManagement/RoleDetailContent/RoleCaches.tsx
index e10acb43..367a9ba0 100644
--- a/src/app/AccessManagement/RoleDetailContent/RoleCaches.tsx
+++ b/src/app/AccessManagement/RoleDetailContent/RoleCaches.tsx
@@ -42,9 +42,7 @@ const RoleCaches = (props: { name: string }) => {
 
     const caches = secured.concat(nonSecured);
     if (searchValue.trim() !== '') {
-      setFilteredCaches(
-        caches.filter((perm) => perm.toLowerCase().includes(searchValue.toLowerCase())).sort()
-      );
+      setFilteredCaches(caches.filter((perm) => perm.toLowerCase().includes(searchValue.toLowerCase())).sort());
     } else {
       setFilteredCaches(caches);
     }
@@ -121,17 +119,13 @@ const RoleCaches = (props: { name: string }) => {
         {cachesRows.map((row) => (
           <Tr key={row}>
             <Td dataLabel={columnNames.name}>
-              {secured.includes(row) && <KeyIcon/> }
+              {secured.includes(row) && <KeyIcon />}
               <Link
                 data-cy={`detailLink-${row}`}
                 key={row}
                 to={{ pathname: '/cache/' + encodeURIComponent(row), search: location.search }}
               >
-                <Button
-                  data-cy={`detailButton-${row}`}
-                  key={`detail-button-${row}`}
-                  variant={ButtonVariant.link}
-                >
+                <Button data-cy={`detailButton-${row}`} key={`detail-button-${row}`} variant={ButtonVariant.link}>
                   {row}
                 </Button>
               </Link>
@@ -176,9 +170,12 @@ const RoleCaches = (props: { name: string }) => {
                 popover: <div>{t('access-management.role.caches-name-tooltip')}</div>,
                 ariaLabel: 'Cache name more information',
                 popoverProps: {
-                  headerContent: columnNames.name,
+                  headerContent: columnNames.name
                 }
-              }}>{columnNames.name}</Th>
+              }}
+            >
+              {columnNames.name}
+            </Th>
           </Tr>
         </Thead>
         <Tbody>{displayRows()}</Tbody>
diff --git a/src/app/AccessManagement/RoleDetailContent/RolePermissions.tsx b/src/app/AccessManagement/RoleDetailContent/RolePermissions.tsx
index d70d80b7..defcd0bc 100644
--- a/src/app/AccessManagement/RoleDetailContent/RolePermissions.tsx
+++ b/src/app/AccessManagement/RoleDetailContent/RolePermissions.tsx
@@ -20,7 +20,7 @@ import {
 import React, { useEffect, useState } from 'react';
 import { ActionsColumn, IAction, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useDescribeRole } from '@app/services/rolesHook';
-import { PERMISSIONS_MAP } from '@services/infinispanRefData';
+import { ROLES_MAP } from '@services/infinispanRefData';
 import { TableErrorState } from '@app/Common/TableErrorState';
 import { TableLoadingState } from '@app/Common/TableLoadingState';
 import { SearchIcon } from '@patternfly/react-icons';
@@ -138,9 +138,7 @@ const RolePermissions = (props: { name: string }) => {
             <Td dataLabel={columnNames.name} width={20}>
               {row}
             </Td>
-            <Td dataLabel={columnNames.description}>
-              {PERMISSIONS_MAP.get(row) ? t(PERMISSIONS_MAP.get(row) as string) : row}
-            </Td>
+            <Td dataLabel={columnNames.description}>{ROLES_MAP.get(row) ? t(ROLES_MAP.get(row) as string) : row}</Td>
             {!role.implicit && role.permissions.length > 1 && (
               <Td isActionCell aria-label={row + '-menu'}>
                 {<ActionsColumn items={rowActions(row)} />}
diff --git a/src/app/AccessManagement/RoleTableDisplay.tsx b/src/app/AccessManagement/RoleTableDisplay.tsx
index c6363581..4a3195fa 100644
--- a/src/app/AccessManagement/RoleTableDisplay.tsx
+++ b/src/app/AccessManagement/RoleTableDisplay.tsx
@@ -118,16 +118,12 @@ const RoleTableDisplay = () => {
         {rolesRows.map((row) => (
           <Tr key={row.name}>
             <Td dataLabel={columnNames.name} width={15}>
-              {row.implicit && (<LockIcon className="role-icon" />)}
+              {row.implicit && <LockIcon className="role-icon" />}
               <Link
                 key={row.name}
                 to={{ pathname: '/access-management/role/' + encodeURIComponent(row.name), search: location.search }}
               >
-                <Button
-                  data-cy={`detailLink-${row.name}`}
-                  key={`detailLink-${row}`}
-                  variant={ButtonVariant.link}
-                >
+                <Button data-cy={`detailLink-${row.name}`} key={`detailLink-${row}`} variant={ButtonVariant.link}>
                   {row.name}
                 </Button>
               </Link>
diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
index ae9960f1..63608710 100644
--- a/src/app/assets/languages/en.json
+++ b/src/app/assets/languages/en.json
@@ -965,7 +965,29 @@
       "loading-principals": "Loading principals",
       "loading-principals-error": "Unexpected error loading principals",
       "grant-access": "Grant access",
-      "no-principals-status": "No principals"
+      "no-principals-status": "No principals",
+      "modal-grant-title": "Grant new access",
+      "modal-grant-description": "Grant access to {{brandname}} to a principal by granting roles.",
+      "modal-principal-name": "Principal",
+      "modal-principal-name-is-required": "Principal role mapper name is required",
+      "modal-roles-is-required": "Select at least one role",
+      "modal-principal-exists": "Principal role mapper {{name}} already exists",
+      "modal-roles": "Roles",
+      "modal-roles-list-placeholder": "Select roles",
+      "grant-success": "Access granted to {{principalName}}.",
+      "grant-error": "Unexpected error while granting access to {{principalName}}. ",
+      "grant-role-success": "Roles {{roles}} granted to {{principalName}}.",
+      "grant-role-error": "Unexpected error granting {{roles}} to {{principalName}}. ",
+      "deny-role-success": "Roles {{roles}} denied to {{principalName}}.",
+      "deny-role-error": "Unexpected error denying {{roles}} to {{principalName}}. ",
+      "remove-success": "{{principalName}} successfully removed.",
+      "remove-error": "Unexpected error while removing {{principalName}}. ",
+      "manage-roles-action": "Manage roles",
+      "modal-remove-title": "Remove principal {{principalName}}",
+      "modal-remove-description-1": "Are you sure you want to remove this principal? After removing, the access will be completely denied to the {{brandname}} Server.",
+      "modal-remove-description-2": "You can always recreate the principal after.",
+      "modal-manage-roles-title": "Manage access",
+      "modal-manage-roles-description": "Grant or deny roles to a principal."
     }
   }
 }
diff --git a/src/app/services/principalsHook.ts b/src/app/services/principalsHook.ts
index 329c6545..67d1b677 100644
--- a/src/app/services/principalsHook.ts
+++ b/src/app/services/principalsHook.ts
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ConsoleServices } from '@services/ConsoleServices';
+import { useApiAlert } from '@utils/useApiAlert';
+import { useTranslation } from 'react-i18next';
 
 export function useFetchAvailablePrincipals() {
   const [principals, setPrincipals] = useState<Principal[]>([]);
@@ -31,3 +33,104 @@ export function useFetchAvailablePrincipals() {
     error
   };
 }
+
+export function useGrantAccess(principal: string, roles: string[], call: () => void) {
+  const { addAlert } = useApiAlert();
+  const { t } = useTranslation();
+
+  const onGrantAccess = () => {
+    ConsoleServices.security()
+      .grantAccess(
+        principal,
+        roles,
+        t('access-management.principals.grant-success', { principalName: principal }),
+        t('access-management.principals.grant-error', { principalName: principal })
+      )
+      .then((actionResponse) => {
+        addAlert(actionResponse);
+      })
+      .finally(() => call());
+  };
+  return {
+    onGrantAccess
+  };
+}
+
+export function useDescribePrincipal(principalName: string) {
+  const { t } = useTranslation();
+  const [principal, setPrincipal] = useState<Principal>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (loading) {
+      ConsoleServices.security()
+        .describePrincipal(principalName)
+        .then((either) => {
+          if (either.isRight()) {
+            setPrincipal({ name: principalName, roles: either.value.sort() });
+          } else {
+            setError(either.value.message);
+          }
+        })
+        .then(() => setLoading(false));
+    }
+  }, [loading]);
+
+  return {
+    principal,
+    setLoading,
+    loading,
+    error
+  };
+}
+
+export function useGrantOrDenyRoles(principal: string, call: () => void) {
+  const { addAlert } = useApiAlert();
+  const { t } = useTranslation();
+
+  const onGrantOrDenyRoles = (action: 'grant' | 'deny', roles: string[]) => {
+    if (roles.length == 0) {
+      return;
+    }
+    const roleStr = '[' + roles.map((p) => p).join(', ') + ']';
+
+    ConsoleServices.security()
+      .grantOrDenyRoles(
+        principal,
+        action,
+        roles,
+        t('access-management.principals.' + action + '-role-success', { roles: roleStr, principalName: principal }),
+        t('access-management.principals.' + action + '-role-error', { roles: roleStr, principalName: principal })
+      )
+      .then((actionResponse) => {
+        addAlert(actionResponse);
+      })
+      .finally(() => call());
+  };
+
+  return {
+    onGrantOrDenyRoles
+  };
+}
+
+export function useRemovePrincipal(principal: string, call: () => void) {
+  const { addAlert } = useApiAlert();
+  const { t } = useTranslation();
+
+  const onRemove = () => {
+    ConsoleServices.security()
+      .removePrincipal(
+        principal,
+        t('access-management.principals.remove-success', { principalName: principal }),
+        t('access-management.principals.remove-error', { principalName: principal })
+      )
+      .then((actionResponse) => {
+        addAlert(actionResponse);
+      })
+      .finally(() => call());
+  };
+  return {
+    onRemove
+  };
+}
diff --git a/src/services/cacheService.ts b/src/services/cacheService.ts
index fa24712f..d754ab49 100644
--- a/src/services/cacheService.ts
+++ b/src/services/cacheService.ts
@@ -604,10 +604,8 @@ export class CacheService {
    *
    */
   public async getCachesForRole(role: string): Promise<Either<ActionResponse, Map<string, string[]>>> {
-    return this.fetchCaller.get(this.endpoint + '/caches?action=role-accessible&role=' + role,
-      (data) => new Map()
-      .set('secured', data['secured'])
-      .set('non-secured', data['non-secured'])
+    return this.fetchCaller.get(this.endpoint + '/caches?action=role-accessible&role=' + role, (data) =>
+      new Map().set('secured', data['secured']).set('non-secured', data['non-secured'])
     );
   }
 }
diff --git a/src/services/infinispanRefData.ts b/src/services/infinispanRefData.ts
index abf19f44..d51c7c68 100644
--- a/src/services/infinispanRefData.ts
+++ b/src/services/infinispanRefData.ts
@@ -252,7 +252,7 @@ export enum Permission {
   ALL = 'all'
 }
 
-export const PERMISSIONS_MAP = new Map<string, string>([
+export const ROLES_MAP = new Map<string, string>([
   ['ALL', 'access-management.roles.permission-all'],
   ['ADMIN', 'access-management.roles.permission-admin'],
   ['ALL_READ', 'access-management.roles.permission-all-read'],
diff --git a/src/services/securityService.ts b/src/services/securityService.ts
index 0e8fd168..6b593202 100644
--- a/src/services/securityService.ts
+++ b/src/services/securityService.ts
@@ -279,4 +279,50 @@ export class SecurityService {
       )
     );
   }
+
+  /**
+   * Created a new principal role mapper
+   */
+  public async grantAccess(principal: string, roles: string[], messageOk: string, messageError: string) {
+    const customHeaders = new Headers();
+    customHeaders.append('Content-Type', 'json');
+    return this.fetchCaller.post({
+      url: this.endpoint + '/roles/' + principal + '?action=grant&' + roles.map((p) => 'role=' + p).join('&'),
+      successMessage: messageOk,
+      errorMessage: messageError,
+      customHeaders: customHeaders
+    });
+  }
+
+  public async grantOrDenyRoles(
+    principal: string,
+    action: 'grant' | 'deny',
+    roles: string[],
+    messageOk: string,
+    messageError: string
+  ) {
+    const customHeaders = new Headers();
+    customHeaders.append('Content-Type', 'json');
+    return this.fetchCaller.put({
+      url: this.endpoint + '/roles/' + principal + '?action=' + action + '&' + roles.map((p) => 'role=' + p).join('&'),
+      successMessage: messageOk,
+      errorMessage: messageError,
+      customHeaders: customHeaders
+    });
+  }
+
+  public async removePrincipal(principal: string, messageOk: string, messageError: string) {
+    const customHeaders = new Headers();
+    customHeaders.append('Content-Type', 'json');
+    return this.fetchCaller.delete({
+      url: this.endpoint + '/roles/' + principal + '?action=grant',
+      successMessage: messageOk,
+      errorMessage: messageError,
+      customHeaders: customHeaders
+    });
+  }
+
+  public async describePrincipal(principalName: string): Promise<Either<ActionResponse, string[]>> {
+    return this.fetchCaller.get(this.endpoint + '/roles/' + principalName, (data) => data);
+  }
 }
diff --git a/src/test-utils.tsx b/src/test-utils.tsx
index 78026cf9..c8ebcbe0 100644
--- a/src/test-utils.tsx
+++ b/src/test-utils.tsx
@@ -5,18 +5,13 @@ import { I18nextProvider } from 'react-i18next';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 
 export function renderWithRouter(children, routes = []) {
+  const wrapper = (children) => <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
 
-  const wrapper = (children) => (
-      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
-  );
-
-  const options = isValidElement(children)
-    ? { element: wrapper(children), path: "/" }
-    : children;
+  const options = isValidElement(children) ? { element: wrapper(children), path: '/' } : children;
 
   const router = createMemoryRouter([{ ...options }, ...routes], {
     initialEntries: [options.path],
-    initialIndex: 1,
+    initialIndex: 1
   });
 
   return render(<RouterProvider router={router} />);