feat(rbac): added frontend permission validation for missing pages and merged new features

frontend/src/views/IntegrationsPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -2,7 +2,9 @@ import { useTranslation } from "react-i18next";
 import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { DeleteActionModal,Skeleton, Tooltip } from "@app/components/v2";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { DeleteActionModal, Skeleton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { IntegrationAuth, TCloudIntegration } from "@app/hooks/api/types";
 
@@ -28,11 +30,13 @@ export const CloudIntegrationSection = ({
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteConfirmation"
   ] as const);
+  const permission = useProjectPermission();
+  const { createNotification } = useNotificationContext();
 
   const isEmpty = !isLoading && !cloudIntegrations?.length;
 
   const sortedCloudIntegrations = cloudIntegrations.sort((a, b) => a.name.localeCompare(b.name));
-  
+
   return (
     <div>
       <div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
@@ -57,6 +61,18 @@ export const CloudIntegrationSection = ({
               } flex h-32 flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4`}
               onClick={() => {
                 if (!cloudIntegration.isAvailable) return;
+                if (
+                  permission.cannot(
+                    ProjectPermissionActions.Create,
+                    ProjectPermissionSub.Integrations
+                  )
+                ) {
+                  createNotification({
+                    type: "error",
+                    text: "Permission Denied. Kindly contact your project admin"
+                  });
+                  return;
+                }
                 onIntegrationStart(cloudIntegration.slug);
               }}
               key={cloudIntegration.slug}

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -2,6 +2,7 @@ import { faArrowRight, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { integrationSlugNameMapping } from "public/data/frequentConstants";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   DeleteActionModal,
   EmptyState,
@@ -13,6 +14,7 @@ import {
   Skeleton,
   Tooltip
 } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { TIntegration } from "@app/hooks/api/types";
 
@@ -125,18 +127,26 @@ export const IntegrationsSection = ({
                 )}
               </div>
               <div className="flex cursor-default items-center">
-                <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
-                  <Tooltip content="Remove Integration">
-                    <IconButton
-                      onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
-                      ariaLabel="delete"
-                      colorSchema="danger"
-                      variant="star"
-                    >
-                      <FontAwesomeIcon icon={faXmark} className="px-0.5" />
-                    </IconButton>
-                  </Tooltip>
-                </div>
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Delete}
+                  a={ProjectPermissionSub.Integrations}
+                >
+                  {(isAllowed) => (
+                    <div className="ml-2 opacity-80 duration-200 hover:opacity-100">
+                      <Tooltip content="Remove Integration">
+                        <IconButton
+                          onClick={() => handlePopUpOpen("deleteConfirmation", integration)}
+                          ariaLabel="delete"
+                          isDisabled={!isAllowed}
+                          colorSchema="danger"
+                          variant="star"
+                        >
+                          <FontAwesomeIcon icon={faXmark} className="px-0.5" />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  )}
+                </ProjectPermissionCan>
               </div>
             </div>
           ))}