feat(HMS-4129): support rbac on UI controls

This change add more granularity to the RBAC integration in the UI by enabling/disabling in a selective way the related controls depending on the current permissions when the user logged in. https://issues.redhat.com/browse/HMS-4129 Signed-off-by: Alejandro Visiedo <[email protected]>
avisiedo · Jun 4, 2024 · 3cd200c · 3cd200c
1 parent 90d6335
commit 3cd200c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/src/Components/DomainList/DomainList.tsx b/src/Components/DomainList/DomainList.tsx
@@ -16,6 +16,7 @@ import {
   buildDeleteFailedNotification,
   buildDeleteSuccessNotification,
 } from '../../Routes/DetailPage/detailNotifications';
+import useIdmPermissions from '../../Hooks/useIdmPermissions';
 
 export interface IColumnType<T> {
   key: string;
@@ -100,7 +101,8 @@ export const DomainList = () => {
   const base_url = '/api/idmsvc/v1';
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
 
-  const context = useContext<AppContextType>(AppContext);
+  const appContext = useContext<AppContextType>(AppContext);
+  const rbac = useIdmPermissions();
   const navigate = useNavigate();
   const { notifyError, notifySuccess } = useNotification();
 
@@ -112,7 +114,7 @@ export const DomainList = () => {
   // Sort direction of the currently sorted column
   const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>('asc');
 
-  const domains = context.listDomains;
+  const domains = appContext.listDomains;
 
   const [isOpenAutoJoinChangeConfirm, setIsOpenAutoJoinChangeConfirm] = useState(false);
   const [isOpenConfirmDelete, setIsOpenConfirmDelete] = useState<boolean>(false);
@@ -136,7 +138,7 @@ export const DomainList = () => {
 
   // remove domain(s) matching the given uuid from the `domains` state
   const removeDomain = (uuid: string): void => {
-    context.deleteDomain(uuid);
+    appContext.deleteDomain(uuid);
   };
 
   const showAutoJoinChangeConfirmDialog = (domain: Domain) => {
@@ -161,7 +163,7 @@ export const DomainList = () => {
         })
         .then((response) => {
           if (response.status == 200) {
-            context.updateDomain(response.data);
+            appContext.updateDomain(response.data);
             notifySuccess(buildAutoJoinToggleSuccessNotification(domain));
           } else {
             notifyError(buildAutoJoinToggleFailedNotification(domain));
@@ -209,6 +211,7 @@ export const DomainList = () => {
       title: 'Enable/Disable',
       onClick: () => showAutoJoinChangeConfirmDialog(domain),
       ouiaId: 'ButtonActionEnableDisable',
+      isDisabled: !rbac.permissions.hasDomainsUpdate,
     },
     {
       title: 'Edit',
@@ -219,6 +222,7 @@ export const DomainList = () => {
       title: 'Delete',
       onClick: () => OnShowConfirmDelete(domain),
       ouiaId: 'ButtonActionDelete',
+      isDisabled: !rbac.permissions.hasDomainsDelete,
     },
   ];
 
@@ -228,7 +232,7 @@ export const DomainList = () => {
 
   const onShowDetails = (domain: Domain | undefined) => {
     if (domain !== undefined) {
-      context.setEditing(domain);
+      appContext.setEditing(domain);
       navigate('/details/' + domain.domain_id);
     }
   };

diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -60,6 +60,7 @@ const Header = () => {
 
 const RegisterDomainButton = () => {
   const appContext = useContext(AppContext);
+  const rbac = useIdmPermissions();
   const navigate = useNavigate();
 
   const handleOpenWizard = () => {
@@ -69,8 +70,10 @@ const RegisterDomainButton = () => {
     navigate('/domains/wizard', { replace: true });
   };
 
+  const isDisabled = rbac.isLoading || !rbac.permissions.hasTokenCreate || !rbac.permissions.hasDomainsUpdate;
+
   return (
-    <Button ouiaId="ButtonDefaultRegisterIdentityDomain" onClick={handleOpenWizard}>
+    <Button ouiaId="ButtonDefaultRegisterIdentityDomain" onClick={handleOpenWizard} isLoading={rbac.isLoading} isDisabled={isDisabled}>
       Register identity domain
     </Button>
   );

diff --git a/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx b/src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.tsx
@@ -26,6 +26,7 @@ import {
   buildTitleEditFailedNotification,
   buildTitleEditSuccessNotification,
 } from '../../detailNotifications';
+import useIdmPermissions from '../../../../Hooks/useIdmPermissions';
 
 interface DetailGeneralProps {
   domain?: Domain;
@@ -41,6 +42,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
 
   const base_url = '/api/idmsvc/v1';
   const resources_api = ResourcesApiFactory(undefined, base_url, undefined);
+  const rbac = useIdmPermissions();
   const { notifyError, notifySuccess } = useNotification();
 
   // States
@@ -175,6 +177,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 return;
               }}
               ouiaId="ButtonDetailGeneralEditTitle"
+              isDisabled={!rbac.permissions.hasDomainsUpdate}
             >
               <Icon>
                 <PencilAltIcon />
@@ -196,6 +199,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
                 setIsDescriptionModalOpen(true);
               }}
               ouiaId="ButtonDetailGeneralEditDescription"
+              isDisabled={!rbac.permissions.hasDomainsUpdate}
             >
               <Icon>
                 <PencilAltIcon />
@@ -247,6 +251,7 @@ export const DetailGeneral = (props: DetailGeneralProps) => {
               isChecked={autoJoin}
               onChange={handleAutoJoin}
               ouiaId="ButtonDetailGeneralAutoenroll"
+              isDisabled={!rbac.permissions.hasDomainsUpdate}
             />
           </DescriptionListDescription>
         </DescriptionListGroup>

diff --git a/src/Routes/DetailPage/DetailPage.tsx b/src/Routes/DetailPage/DetailPage.tsx
@@ -168,6 +168,7 @@ const DetailPage = () => {
                       domain !== undefined && OnShowConfirmDelete();
                     }}
                     ouiaId="ButtonDetailsDelete"
+                    isDisabled={!rbac.permissions.hasDomainsDelete}
                   >
                     Delete
                   </DropdownItem>