feat(HMS-2721): add rbac control to every page

This change leverage the rbac hook so it is checked the permissions when a page is loaded. Out of the scope is custom enable/disable controls for each page. Signed-off-by: Alejandro Visiedo <[email protected]>
avisiedo · May 29, 2024 · 6cd0e8e · 6cd0e8e
1 parent 7c4bdba
commit 6cd0e8e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 5 deletions.
diff --git a/src/Routes/DefaultPage/DefaultPage.tsx b/src/Routes/DefaultPage/DefaultPage.tsx
@@ -185,10 +185,20 @@ const DefaultPage = () => {
   const [perPage, setPerPage] = useState<number>(10);
   const offset = (page - 1) * perPage;
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const navigate = useNavigate();
 
   console.log('INFO:DefaultPage render');
 
   useEffect(() => {
+    if (appContext.rbac.isLoading) {
+      console.debug('rbac is loading yet');
+      setIsLoading(true);
+      return;
+    }
+    console.debug('rbac is loaded');
+    if (!appContext.rbac.permissions.hasDomainsList) {
+      navigate('/no-permissions', { replace: true });
+    }
     setIsLoading(true);
     resources_api
       .listDomains(undefined, offset, perPage, undefined)
@@ -203,7 +213,7 @@ const DefaultPage = () => {
         console.log(reason);
         setIsLoading(false);
       });
-  }, [page, perPage]);
+  }, [page, perPage, appContext.rbac.isLoading]);
 
   const changePageSize = (size: number) => {
     setPerPage(size);
@@ -233,7 +243,7 @@ const DefaultPage = () => {
     </>
   );
 
-  if (isLoading) {
+  if (appContext.rbac.isLoading || isLoading) {
     return loadingContent;
   }
   const content = appContext.totalDomains <= 0 ? emptyContent : listContent;

diff --git a/src/Routes/DetailPage/DetailPage.tsx b/src/Routes/DetailPage/DetailPage.tsx
@@ -57,6 +57,14 @@ const DetailPage = () => {
 
   // Load Domain to display
   useEffect(() => {
+    if (appContext.rbac.isLoading) {
+      console.debug('rbac is loading yet');
+      return;
+    }
+    console.debug('rbac is loaded');
+    if (!appContext.rbac.permissions.hasDomainsRead) {
+      navigate('/no-permissions', { replace: true });
+    }
     if (domain_id) {
       resources_api
         .readDomain(domain_id)
@@ -72,7 +80,7 @@ const DetailPage = () => {
           navigate('/domains', { replace: true });
         });
     }
-  }, [domain_id]);
+  }, [domain_id, appContext.rbac.isLoading]);
 
   // Kebab menu
   const [isKebabOpen, setIsKebabOpen] = useState<boolean>(false);

diff --git a/src/Routes/NoPermissionsPage/NoPermissionsPage.tsx b/src/Routes/NoPermissionsPage/NoPermissionsPage.tsx
@@ -2,15 +2,35 @@ import React, { useEffect } from 'react';
 
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
 import { NotAuthorized } from '@redhat-cloud-services/frontend-components/NotAuthorized';
+import { Button } from '@patternfly/react-core';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 const NoPermissionsPage = () => {
   useEffect(() => {
     insights?.chrome?.appAction?.('no-permissions');
   }, []);
 
+  const { isBeta } = useChrome();
+  const linkMyUserAccess = isBeta() ? '/beta/iam/my-user-access' : '/preview/iam/my-user-access';
+
   return (
     <Main>
-      <NotAuthorized serviceName="Sample app" />
+      <NotAuthorized
+        serviceName="Directory and Domain"
+        showReturnButton
+        title="Access permissions needed"
+        description={
+          <>
+            To access identity domains, contact your organization <br />
+            administrator. Aternatively, visit
+            <br />
+            <Button component="a" variant="link" isInline iconPosition="right" href={linkMyUserAccess} ouiaId="LinkNoPermissionsMyUserAccess">
+              My User Access
+            </Button>{' '}
+            to learn more about your permissions.
+          </>
+        }
+      />
     </Main>
   );
 };

diff --git a/src/Routes/WizardPage/WizardPage.tsx b/src/Routes/WizardPage/WizardPage.tsx
@@ -4,7 +4,7 @@
  * The goal is provide the steps to register and add
  * a new domain service.
  */
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 
 import { Button, Modal, ModalVariant, PageGroup, PageSection, PageSectionVariants, Text, Wizard, WizardStep } from '@patternfly/react-core';
@@ -43,6 +43,20 @@ const WizardPage = () => {
   const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const linkLearnMoreAboutRemovingDirectoryAndDomainServices = 'https://access.redhat.com/articles/1586893';
 
+  useEffect(() => {
+    if (appContext.rbac.isLoading) {
+      console.debug('rbac is loading yet');
+      return;
+    }
+    console.debug('rbac is loaded');
+    if (!appContext.rbac.permissions.hasTokenCreate) {
+      navigate('/no-permissions', { replace: true });
+    }
+    if (!appContext.rbac.permissions.hasDomainsUpdate) {
+      navigate('/no-permissions');
+    }
+  }, [appContext.rbac.isLoading]);
+
   const notifyNotCompleted = () => {
     const notificationID = 'domain-registration-cancelled-notification';
     notifyError({