infinispan · karesti · Nov 8, 2023 · Oct 24, 2023
diff --git a/cypress/e2e/1_acess_management.cy.js b/cypress/e2e/1_acess_management.cy.js
@@ -22,19 +22,44 @@ describe('Global stats', () => {
 
   });
 
-  it('successfully creates and removes a role', () => {
+  it('successfully creates, updates and removes a role', () => {
     // create
     cy.get('button[data-cy="createRoleButton"]').click();
     cy.get("[aria-label=role-name-input]").type("aRole");
     cy.get("[aria-label=role-description-input]").type("aRole description");
-    cy.get("[data-cy=menu-toogle-permissions").click();
-    cy.get("#option-typeahead-ALL").click();
-    cy.get("[data-cy=menu-toogle-permissions").click();
+    cy.get("[data-cy=menu-toogle-permissions]").click();
+    cy.get("[data-cy=option-typeahead-ALL]").click();
+    cy.get("[data-cy=menu-toogle-permissions]").click();
     cy.get("[aria-label=Create]").click();
     cy.contains('Role aRole has been created');
     cy.contains('aRole description');
 
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/access-management/role/aRole');
+    cy.get('[aria-label=role-name-input')
+      .should('have.value', 'aRole')
+      .should('be.disabled');
+    cy.get('[aria-label=role-description-input]')
+      .should('have.value', 'aRole description')
+      .type(' with update');
+    cy.get('[aria-label=Save').click();
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/access-management/role/aRole');
+    cy.get('[aria-label=role-description-input]')
+      .should('have.value', 'aRole description with update');
+
+    cy.get('[aria-label=nav-item-Permissions').click();
+    cy.contains('ALL');
+    cy.get('[data-cy=addPermissionButton').click();
+    cy.get('[data-cy=menu-toogle-permissions]').click();
+    cy.get("[data-cy=option-typeahead-READ]").click();
+    cy.get('[data-cy=menu-toogle-permissions]').click();
+    cy.get('[aria-label=Save').click();
+    cy.get("[aria-label=READ-menu]").click();
+    cy.get("[aria-label=removePermission-READ]").click();
+    cy.get("[aria-label=Remove]").click();
+    cy.contains('Role aRole has been updated');
+
     // remove
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/access-management');
     cy.get("[aria-label=aRole-menu]").click();
     cy.get("[aria-label=deleteRole]").click();
     cy.get("[aria-label=Delete]").click();

diff --git a/src/app/AccessManagement/CreateRole.tsx b/src/app/AccessManagement/CreateRole.tsx
@@ -16,27 +16,27 @@ 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 { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
 
 const CreateRole = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
   const { t } = useTranslation();
   const { roles } = useFetchAvailableRoles();
-  const initialSelectOptions: SelectOptionProps[] = [
-    { value: 'ALL', children: 'ALL', description: t('access-management.roles.permission-all') },
-    { value: 'ADMIN', children: 'ADMIN', description: t('access-management.roles.permission-admin') },
-    { value: 'ALL_READ', children: 'ALL_READ', description: t('access-management.roles.permission-all-read') },
-    { value: 'READ', children: 'READ', description: t('access-management.roles.permission-read') },
-    { value: 'BULK_READ', children: 'BULK_READ', description: t('access-management.roles.permission-bulk-read') },
-    { value: 'ALL_WRITE', children: 'ALL_WRITE', description: t('access-management.roles.permission-all-write') },
-    { value: 'WRITE', children: 'WRITE', description: t('access-management.roles.permission-write') },
-    { value: 'BULK_WRITE', children: 'BULK_WRITE', description: t('access-management.roles.permission-bulk-write') },
-    { value: 'MONITOR', children: 'MONITOR', description: t('access-management.roles.permission-monitor') },
-    { value: 'CREATE', children: 'CREATE', description: t('access-management.roles.permission-create') },
-    { value: 'EXEC', children: 'EXEC', description: t('access-management.roles.permission-exec') },
-    { value: 'LISTEN', children: 'LISTEN', description: t('access-management.roles.permission-listen') },
-    { value: 'LIFECYCLE', children: 'LIFECYCLE', description: t('access-management.roles.permission-lifecycle') },
-    { value: 'NONE', children: 'NONE', description: t('access-management.roles.permission-none') }
-  ];
+  const initPermissions = () => {
+    const array: SelectOptionProps[] = [];
+    PERMISSIONS_MAP.forEach((value, key, map) => {
+      const desc = t(value);
+      array.push({
+        id: key,
+        value: key,
+        children: key,
+        description: desc
+      });
+    });
+    return array;
+  };
+  const initialSelectOptions: SelectOptionProps[] = initPermissions();
+
   const roleNameInitialState: IField = {
     value: '',
     isValid: false,
@@ -131,10 +131,10 @@ const CreateRole = (props: { isModalOpen: boolean; submitModal: () => void; clos
       disableFocusTrap={true}
       actions={[
         <Button key={'Create'} aria-label={'Create'} variant={ButtonVariant.primary} onClick={handleSubmit}>
-          {t('access-management.roles.modal-save-action')}
+          {t('common.actions.save')}
         </Button>,
         <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={onCloseModal}>
-          {t('access-management.roles.modal-cancel-button')}
+          {t('common.actions.cancel')}
         </Button>
       ]}
     >

diff --git a/src/app/AccessManagement/DeleteRole.tsx b/src/app/AccessManagement/DeleteRole.tsx
@@ -28,7 +28,7 @@ const DeleteRole = (props: { name: string; isModalOpen: boolean; submitModal: ()
             onDeleteRole();
           }}
         >
-          {t('access-management.roles.delete-action')}
+          {t('common.actions.delete')}
         </Button>,
         <Button
           key={'Cancel'}
@@ -37,7 +37,7 @@ const DeleteRole = (props: { name: string; isModalOpen: boolean; submitModal: ()
           onClick={props.closeModal}
           data-cy="cancelRoleDeleteButton"
         >
-          {t('access-management.roles.modal-cancel-button')}
+          {t('common.actions.cancel')}
         </Button>
       ]}
     >

diff --git a/src/app/AccessManagement/RoleDetail.tsx b/src/app/AccessManagement/RoleDetail.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Card,
+  CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Nav,
+  NavItem,
+  NavList,
+  PageSection,
+  PageSectionVariants,
+  Text,
+  TextContent,
+  TextVariants,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { DataContainerBreadcrumb } from '@app/Common/DataContainerBreadcrumb';
+import { RoleGeneral } from '@app/AccessManagement/RoleDetailContent/RoleGeneral';
+import { RolePermissions } from '@app/AccessManagement/RoleDetailContent/RolePermissions';
+import { DeleteRole } from '@app/AccessManagement/DeleteRole';
+import { useHistory } from 'react-router';
+import { useDescribeRole } from '@app/services/rolesHook';
+
+const RoleDetail = (props) => {
+  const roleName = decodeURIComponent(props.computedMatch.params.roleName);
+  const history = useHistory();
+  const { t } = useTranslation();
+  const { role } = useDescribeRole(roleName);
+  const [activeTabKey, setActiveTabKey] = useState('0');
+  const [showGeneralDescription, setShowGeneralDescription] = useState(true);
+  const [showPermissions, setShowPermissions] = useState(false);
+  // const [showCaches, setShowCaches] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDeleteRole, setIsDeleteRole] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    setShowGeneralDescription(activeTabKey === '0');
+    setShowPermissions(activeTabKey === '1');
+    // setShowCaches(activeTabKey === '2');
+  }, [activeTabKey]);
+
+  interface AccessTab {
+    key: string;
+    name: string;
+  }
+
+  const handleTabClick = (event, nav) => {
+    setActiveTabKey(nav.itemId);
+  };
+
+  const tabs: AccessTab[] = [
+    { name: t('access-management.role.tab-general'), key: '0' },
+    { name: t('access-management.role.tab-permissions'), key: '1' }
+    // { name: t('access-management.role.tab-caches'), key: '2' }
+  ];
+
+  const buildTabs = () => {
+    return (
+      <Nav data-cy="navigationTabs" onSelect={handleTabClick} variant={'tertiary'}>
+        <NavList>
+          {tabs.map((tab) => (
+            <NavItem
+              aria-label={'nav-item-' + tab.name}
+              key={'nav-item-' + tab.key}
+              itemId={tab.key}
+              isActive={activeTabKey === tab.key}
+            >
+              {tab.name}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+  };
+
+  const displayActions = () => {
+    if (!role || role.implicit) {
+      return;
+    }
+
+    return (
+      <ToolbarGroup align={{ default: 'alignRight' }}>
+        <ToolbarItem>
+          <Dropdown
+            isOpen={isOpen}
+            onSelect={onSelect}
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+                {t('access-management.role.actions')}
+              </MenuToggle>
+            )}
+            ouiaId="roleDetailDropdown"
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>
+              <DropdownItem value={0} key="deleteRole" onClick={() => setIsDeleteRole(true)}>
+                {t('common.actions.delete')}
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        </ToolbarItem>
+      </ToolbarGroup>
+    );
+  };
+
+  return (
+    <>
+      <PageSection variant={PageSectionVariants.light} style={{ paddingBottom: 0 }}>
+        <DataContainerBreadcrumb
+          parentPage={'/access-management'}
+          label={'access-management.title'}
+          currentPage={t('access-management.role.breadcrumb', { roleName: roleName })}
+        />
+        <Toolbar id="role-detail-toolbar">
+          <ToolbarContent>
+            <ToolbarGroup>
+              <ToolbarItem>
+                <TextContent>
+                  <Text component={TextVariants.h1}>{roleName}</Text>
+                </TextContent>
+              </ToolbarItem>
+            </ToolbarGroup>
+            {displayActions()}
+          </ToolbarContent>
+        </Toolbar>
+        {buildTabs()}
+      </PageSection>
+      <PageSection variant={PageSectionVariants.default}>
+        <Card>
+          <CardBody>
+            {showGeneralDescription && <RoleGeneral name={roleName} />}
+            {showPermissions && <RolePermissions name={roleName} />}
+            {/*{showCaches && <RoleCaches />}*/}
+          </CardBody>
+        </Card>
+      </PageSection>
+      <DeleteRole
+        name={roleName}
+        isModalOpen={isDeleteRole}
+        submitModal={() => {
+          setIsDeleteRole(false);
+          history.push('/access-management');
+        }}
+        closeModal={() => {
+          setIsDeleteRole(false);
+        }}
+      />
+    </>
+  );
+};
+
+export { RoleDetail };