feat(rbac): implemented project based permission loading and role management

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from "react-i18next";
 import { motion } from "framer-motion";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { OrgGeneralPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { GeneralPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { withPermission } from "@app/hoc";
 import { useGetRoles } from "@app/hooks/api";
+import { TRole } from "@app/hooks/api/roles/types";
 
 import { OrgMembersTable } from "./components/OrgMembersTable";
 import { OrgRoleTabSection } from "./components/OrgRoleTabSection";
@@ -47,16 +48,16 @@ export const MembersPage = withPermission(
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-                <OrgMembersTable roles={roles} />
+                <OrgMembersTable roles={roles as TRole<undefined>[]} />
               </motion.div>
             </TabPanel>
             <TabPanel value={TabSections.Roles}>
-              <OrgRoleTabSection roles={roles} />
+              <OrgRoleTabSection roles={roles as TRole<undefined>[]} />
             </TabPanel>
           </Tabs>
         </div>
       </div>
     );
   },
-  { action: OrgGeneralPermissionActions.Read, subject: OrgPermissionSubjects.Member }
+  { action: GeneralPermissionActions.Read, subject: OrgPermissionSubjects.Member }
 );

frontend/src/views/Org/MembersPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -43,7 +43,7 @@ import {
   UpgradePlanModal
 } from "@app/components/v2";
 import {
-  OrgGeneralPermissionActions,
+  GeneralPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
   useSubscription,
@@ -65,7 +65,7 @@ import { TRole } from "@app/hooks/api/roles/types";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 
 type Props = {
-  roles?: TRole[];
+  roles?: TRole<undefined>[];
 };
 
 const addMemberFormSchema = yup.object({
@@ -305,7 +305,7 @@ export const OrgMembersTable = ({ roles = [] }: Props) => {
             placeholder="Search members..."
           />
         </div>
-        <OrgPermissionCan I={OrgGeneralPermissionActions.Create} a={OrgPermissionSubjects.Member}>
+        <OrgPermissionCan I={GeneralPermissionActions.Create} a={OrgPermissionSubjects.Member}>
           {(isAllowed) => (
             <Button
               isDisabled={!isAllowed}
@@ -359,7 +359,7 @@ export const OrgMembersTable = ({ roles = [] }: Props) => {
                         <Td>{email}</Td>
                         <Td>
                           <OrgPermissionCan
-                            I={OrgGeneralPermissionActions.Edit}
+                            I={GeneralPermissionActions.Edit}
                             a={OrgPermissionSubjects.Member}
                           >
                             {(isAllowed) => (
@@ -453,7 +453,7 @@ export const OrgMembersTable = ({ roles = [] }: Props) => {
                         <Td>
                           {userId !== u?._id && (
                             <OrgPermissionCan
-                              I={OrgGeneralPermissionActions.Delete}
+                              I={GeneralPermissionActions.Delete}
                               a={OrgPermissionSubjects.Member}
                             >
                               {(isAllowed) => (

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -26,7 +26,7 @@ import { SsoPermission } from "./SsoPermission";
 import { WorkspacePermission } from "./WorkspacePermission";
 
 type Props = {
-  role?: TRole;
+  role?: TRole<undefined>;
   onGoBack: VoidFunction;
 };
 

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTabSection.tsx

@@ -1,14 +1,13 @@
 import { motion } from "framer-motion";
 
 import { usePopUp } from "@app/hooks";
-
-import { TRole } from "~/hooks/api/roles/types";
+import { TRole } from "@app/hooks/api/roles/types";
 
 import { OrgRoleModifySection } from "./OrgRoleModifySection";
 import { OrgRoleTable } from "./OrgRoleTable";
 
 type Props = {
-  roles?: TRole[];
+  roles?: TRole<undefined>[];
   isRolesLoading?: boolean;
 };
 
@@ -24,7 +23,7 @@ export const OrgRoleTabSection = ({ roles = [], isRolesLoading }: Props) => {
       exit={{ opacity: 0, translateX: 30 }}
     >
       <OrgRoleModifySection
-        role={popUp.editRole.data as TRole}
+        role={popUp.editRole.data as TRole<undefined>}
         onGoBack={() => handlePopUpClose("editRole")}
       />
     </motion.div>

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -3,6 +3,7 @@ import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-so
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
   Button,
   DeleteActionModal,
@@ -19,16 +20,14 @@ import {
   Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { usePopUp } from "@app/hooks";
 import { useDeleteRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
-import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
-import { usePopUp } from "~/hooks/usePopUp";
-
 type Props = {
   isRolesLoading?: boolean;
-  roles?: TRole[];
-  onSelectRole: (role?: TRole) => void;
+  roles?: TRole<undefined>[];
+  onSelectRole: (role?: TRole<undefined>) => void;
 };
 
 export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
@@ -41,7 +40,7 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
   const { mutateAsync: deleteRole } = useDeleteRole();
 
   const handleRoleDelete = async () => {
-    const { _id: id } = popUp?.deleteRole?.data as TRole;
+    const { _id: id } = popUp?.deleteRole?.data as TRole<undefined>;
     try {
       await deleteRole({
         orgId,
@@ -129,9 +128,9 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
         title={`Are you sure want to delete ${
-          (popUp?.deleteRole?.data as TRole)?.name || " "
+          (popUp?.deleteRole?.data as TRole<undefined>)?.name || " "
         } role?`}
-        deleteKey={(popUp?.deleteRole?.data as TRole)?.slug || ""}
+        deleteKey={(popUp?.deleteRole?.data as TRole<undefined>)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
       />