Merge pull request #2183 from Infisical/project-role-concept

Project Role Page

backend/src/ee/routes/v1/project-role-router.ts

@@ -101,7 +101,7 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
             message: "Slug must be a valid"
           }),
         name: z.string().trim().optional().describe(PROJECT_ROLE.UPDATE.name),
-        permissions: ProjectPermissionSchema.array().describe(PROJECT_ROLE.UPDATE.permissions)
+        permissions: ProjectPermissionSchema.array().describe(PROJECT_ROLE.UPDATE.permissions).optional()
       }),
       response: {
         200: z.object({
@@ -120,7 +120,7 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
         roleId: req.params.roleId,
         data: {
           ...req.body,
-          permissions: JSON.stringify(packRules(req.body.permissions))
+          permissions: req.body.permissions ? JSON.stringify(packRules(req.body.permissions)) : undefined
         }
       });
       return { role };

backend/src/services/project-role/project-role-service.ts

@@ -162,12 +162,19 @@ export const projectRoleServiceFactory = ({
       actorOrgId
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Edit, ProjectPermissionSub.Role);
+
     if (data?.slug) {
       const existingRole = await projectRoleDAL.findOne({ slug: data.slug, projectId });
       if (existingRole && existingRole.id !== roleId)
         throw new BadRequestError({ name: "Update Role", message: "Duplicate role" });
     }
-    const [updatedRole] = await projectRoleDAL.update({ id: roleId, projectId }, data);
+    const [updatedRole] = await projectRoleDAL.update(
+      { id: roleId, projectId },
+      {
+        ...data,
+        permissions: data.permissions ? data.permissions : undefined
+      }
+    );
     if (!updatedRole) throw new BadRequestError({ message: "Role not found", name: "Update role" });
     return { ...updatedRole, permissions: unpackPermissions(updatedRole.permissions) };
   };

frontend/src/hooks/api/roles/mutation.tsx

@@ -10,6 +10,7 @@ import {
   TDeleteOrgRoleDTO,
   TDeleteProjectRoleDTO,
   TOrgRole,
+  TProjectRole,
   TUpdateOrgRoleDTO,
   TUpdateProjectRoleDTO
 } from "./types";
@@ -17,9 +18,13 @@ import {
 export const useCreateProjectRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: ({ projectSlug, ...dto }: TCreateProjectRoleDTO) =>
-      apiRequest.post(`/api/v1/workspace/${projectSlug}/roles`, dto),
+  return useMutation<TProjectRole, {}, TCreateProjectRoleDTO>({
+    mutationFn: async ({ projectSlug, ...dto }: TCreateProjectRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.post(`/api/v1/workspace/${projectSlug}/roles`, dto);
+      return role;
+    },
     onSuccess: (_, { projectSlug }) => {
       queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }
@@ -29,9 +34,13 @@ export const useCreateProjectRole = () => {
 export const useUpdateProjectRole = () => {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: ({ id, projectSlug, ...dto }: TUpdateProjectRoleDTO) =>
-      apiRequest.patch(`/api/v1/workspace/${projectSlug}/roles/${id}`, dto),
+  return useMutation<TProjectRole, {}, TUpdateProjectRoleDTO>({
+    mutationFn: async ({ id, projectSlug, ...dto }: TUpdateProjectRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.patch(`/api/v1/workspace/${projectSlug}/roles/${id}`, dto);
+      return role;
+    },
     onSuccess: (_, { projectSlug }) => {
       queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }
@@ -40,10 +49,13 @@ export const useUpdateProjectRole = () => {
 
 export const useDeleteProjectRole = () => {
   const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ projectSlug, id }: TDeleteProjectRoleDTO) =>
-      apiRequest.delete(`/api/v1/workspace/${projectSlug}/roles/${id}`),
+  return useMutation<TProjectRole, {}, TDeleteProjectRoleDTO>({
+    mutationFn: async ({ projectSlug, id }: TDeleteProjectRoleDTO) => {
+      const {
+        data: { role }
+      } = await apiRequest.delete(`/api/v1/workspace/${projectSlug}/roles/${id}`);
+      return role;
+    },
     onSuccess: (_, { projectSlug }) => {
       queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }

frontend/src/pages/project/[id]/roles/[roleSlug]/index.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { RolePage } from "@app/views/Project/RolePage";
+
+export default function Role() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: "Project Settings" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <RolePage />
+    </>
+  );
+}
+
+Role.requireAuth = true;

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx

@@ -2,29 +2,12 @@ import { motion } from "framer-motion";
 
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { usePopUp } from "@app/hooks";
 
 import { ProjectRoleList } from "./components/ProjectRoleList";
-import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
 
 export const ProjectRoleListTab = withProjectPermission(
   () => {
-    const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
-
-    return popUp.editRole.isOpen ? (
-      <motion.div
-        key="role-modify"
-        transition={{ duration: 0.1 }}
-        initial={{ opacity: 0, translateX: 30 }}
-        animate={{ opacity: 1, translateX: 0 }}
-        exit={{ opacity: 0, translateX: 30 }}
-      >
-        <ProjectRoleModifySection
-          roleSlug={popUp.editRole.data as string}
-          onGoBack={() => handlePopUpClose("editRole")}
-        />
-      </motion.div>
-    ) : (
+    return (
       <motion.div
         key="role-list"
         transition={{ duration: 0.1 }}
@@ -32,7 +15,7 @@ export const ProjectRoleListTab = withProjectPermission(
         animate={{ opacity: 1, translateX: 0 }}
         exit={{ opacity: 0, translateX: -30 }}
       >
-        <ProjectRoleList onSelectRole={(slug) => handlePopUpOpen("editRole", slug)} />
+        <ProjectRoleList />
       </motion.div>
     );
   },

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -1,14 +1,17 @@
-import { useState } from "react";
-import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
-  IconButton,
-  Input,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Table,
   TableContainer,
   TableSkeleton,
@@ -22,17 +25,17 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
 import { usePopUp } from "@app/hooks";
 import { useDeleteProjectRole, useGetProjectRoles } from "@app/hooks/api";
 import { TProjectRole } from "@app/hooks/api/roles/types";
+import { RoleModal } from "@app/views/Project/RolePage/components";
 
-type Props = {
-  onSelectRole: (slug?: string) => void;
-};
-
-export const ProjectRoleList = ({ onSelectRole }: Props) => {
-  const [searchRoles, setSearchRoles] = useState("");
-
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
+export const ProjectRoleList = () => {
+  const router = useRouter();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "role",
+    "deleteRole"
+  ] as const);
   const { currentWorkspace } = useWorkspace();
   const projectSlug = currentWorkspace?.slug || "";
+  const projectId = currentWorkspace?.id || "";
 
   const { data: roles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
 
@@ -54,21 +57,16 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
   };
 
   return (
-    <div className="w-full">
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchRoles}
-            onChange={(e) => setSearchRoles(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search roles..."
-          />
-        </div>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Project Roles</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
           {(isAllowed) => (
             <Button
+              colorSchema="primary"
+              type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => onSelectRole()}
+              onClick={() => handlePopUpOpen("role")}
               isDisabled={!isAllowed}
             >
               Add Role
@@ -76,77 +74,94 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
           )}
         </ProjectPermissionCan>
       </div>
-      <div>
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Slug</Th>
-                <Th aria-label="actions" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
-                const { id, name, slug } = role;
-                const isNonMutatable = ["admin", "member", "viewer", "no-access"].includes(slug);
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th aria-label="actions" className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
+            {roles?.map((role) => {
+              const { id, name, slug } = role;
+              const isNonMutatable = ["admin", "member", "viewer", "no-access"].includes(slug);
 
-                return (
-                  <Tr key={`role-list-${id}`}>
-                    <Td>{name}</Td>
-                    <Td>{slug}</Td>
-                    <Td>
-                      <div className="flex justify-end space-x-2">
+              return (
+                <Tr
+                  key={`role-list-${id}`}
+                  className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                  onClick={() => router.push(`/project/${projectId}/roles/${slug}`)}
+                >
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
                         <ProjectPermissionCan
                           I={ProjectPermissionActions.Edit}
                           a={ProjectPermissionSub.Role}
-                          renderTooltip
-                          allowedLabel="Edit"
                         >
                           {(isAllowed) => (
-                            <IconButton
-                              isDisabled={!isAllowed}
-                              ariaLabel="edit"
-                              onClick={() => onSelectRole(role.slug)}
-                              variant="plain"
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                router.push(`/project/${projectId}/roles/${slug}`);
+                              }}
+                              disabled={!isAllowed}
                             >
-                              <FontAwesomeIcon icon={faEdit} />
-                            </IconButton>
+                              {`${isNonMutatable ? "View" : "Edit"} Role`}
+                            </DropdownMenuItem>
                           )}
                         </ProjectPermissionCan>
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Delete}
-                          a={ProjectPermissionSub.Role}
-                          renderTooltip
-                          allowedLabel={
-                            isNonMutatable ? "Reserved roles are non-removable" : "Delete"
-                          }
-                        >
-                          {(isAllowed) => (
-                            <IconButton
-                              ariaLabel="delete"
-                              onClick={() => handlePopUpOpen("deleteRole", role)}
-                              variant="plain"
-                              isDisabled={isNonMutatable || !isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faTrash} />
-                            </IconButton>
-                          )}
-                        </ProjectPermissionCan>
-                      </div>
-                    </Td>
-                  </Tr>
-                );
-              })}
-            </TBody>
-          </Table>
-        </TableContainer>
-      </div>
+                        {!isNonMutatable && (
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Role}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteRole", role);
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Role
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        )}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                </Tr>
+              );
+            })}
+          </TBody>
+        </Table>
+      </TableContainer>
+      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete ${(popUp?.deleteRole?.data as TProjectRole)?.name || " "
-          } role?`}
+        title={`Are you sure want to delete ${
+          (popUp?.deleteRole?.data as TProjectRole)?.name || " "
+        } role?`}
         deleteKey={(popUp?.deleteRole?.data as TProjectRole)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -14,7 +14,8 @@ import {
   faShield,
   faTags,
   faUser,
-  faUsers} from "@fortawesome/free-solid-svg-icons";
+  faUsers
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 

frontend/src/views/Project/RolePage/RolePage.tsx

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { useDeleteProjectRole,useGetProjectRoleBySlug } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
+
+export const RolePage = withProjectPermission(
+  () => {
+    const router = useRouter();
+    const roleSlug = router.query.roleSlug as string;
+    const { currentWorkspace } = useWorkspace();
+    const projectId = currentWorkspace?.id || "";
+
+    const { data } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
+
+    const { mutateAsync: deleteProjectRole } = useDeleteProjectRole();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "role",
+      "deleteRole"
+    ] as const);
+
+    const onDeleteRoleSubmit = async () => {
+      try {
+        if (!currentWorkspace?.slug || !data?.id) return;
+
+        await deleteProjectRole({
+          projectSlug: currentWorkspace.slug,
+          id: data.id
+        });
+
+        createNotification({
+          text: "Successfully deleted project role",
+          type: "success"
+        });
+        handlePopUpClose("deleteRole");
+        router.push(`/project/${projectId}/members`);
+      } catch (err) {
+        console.error(err);
+        const error = err as any;
+        const text = error?.response?.data?.message ?? "Failed to delete project role";
+
+        createNotification({
+          text,
+          type: "error"
+        });
+      }
+    };
+
+    const isCustomRole = !["admin", "member", "viewer", "no-access"].includes(data?.slug ?? "");
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => router.push(`/project/${projectId}/members`)}
+              className="mb-4"
+            >
+              Roles
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.name}</p>
+              {isCustomRole && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild className="rounded-lg">
+                    <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                      <Tooltip content="More options">
+                        <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      </Tooltip>
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={ProjectPermissionSub.Role}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={() =>
+                            handlePopUpOpen("role", {
+                              roleSlug
+                            })
+                          }
+                          disabled={!isAllowed}
+                        >
+                          Edit Role
+                        </DropdownMenuItem>
+                      )}
+                    </ProjectPermissionCan>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Delete}
+                      a={ProjectPermissionSub.Role}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            isAllowed
+                              ? "hover:!bg-red-500 hover:!text-white"
+                              : "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={() => handlePopUpOpen("deleteRole")}
+                          disabled={!isAllowed}
+                        >
+                          Delete Role
+                        </DropdownMenuItem>
+                      )}
+                    </ProjectPermissionCan>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <RoleDetailsSection roleSlug={roleSlug} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              <RolePermissionsSection roleSlug={roleSlug} />
+            </div>
+          </div>
+        )}
+        <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <DeleteActionModal
+          isOpen={popUp.deleteRole.isOpen}
+          title={`Are you sure want to delete the project role ${data?.name ?? ""}?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteRole", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => onDeleteRoleSubmit()}
+        />
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Role }
+);

frontend/src/views/Project/RolePage/components/RoleDetailsSection.tsx

@@ -0,0 +1,95 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetProjectRoleBySlug } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  roleSlug: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["role"]>, data?: {}) => void;
+};
+
+export const RoleDetailsSection = ({ roleSlug, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { currentWorkspace } = useWorkspace();
+  const { data } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
+
+  const isCustomRole = !["admin", "member", "viewer", "no-access"].includes(data?.slug ?? "");
+
+  return data ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
+        {isCustomRole && (
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Role}>
+            {(isAllowed) => {
+              return (
+                <Tooltip content="Edit Role">
+                  <IconButton
+                    isDisabled={!isAllowed}
+                    ariaLabel="copy icon"
+                    variant="plain"
+                    className="group relative"
+                    onClick={() => {
+                      handlePopUpOpen("role", {
+                        roleSlug
+                      });
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faPencil} />
+                  </IconButton>
+                </Tooltip>
+              );
+            }}
+          </ProjectPermissionCan>
+        )}
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Role ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{data.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(data.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.name}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Slug</p>
+          <p className="text-sm text-mineshaft-300">{data.slug}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
+          <p className="text-sm text-mineshaft-300">
+            {data.description?.length ? data.description : "-"}
+          </p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/Project/RolePage/components/RoleModal.tsx

@@ -0,0 +1,196 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  useCreateProjectRole,
+  useGetProjectRoleBySlug,
+  useUpdateProjectRole} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    name: z.string(),
+    description: z.string(),
+    slug: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["role"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void;
+};
+
+export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
+
+  const popupData = popUp?.role?.data as {
+    roleSlug: string;
+  };
+
+  const { currentWorkspace } = useWorkspace();
+  const projectSlug = currentWorkspace?.slug || "";
+
+  const { data: role } = useGetProjectRoleBySlug(projectSlug, popupData?.roleSlug ?? "");
+
+  const { mutateAsync: createProjectRole } = useCreateProjectRole();
+  const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: ""
+    }
+  });
+
+  useEffect(() => {
+    if (role) {
+      reset({
+        name: role.name,
+        description: role.description,
+        slug: role.slug
+      });
+    } else {
+      reset({
+        name: "",
+        description: "",
+        slug: ""
+      });
+    }
+  }, [role]);
+
+  const onFormSubmit = async ({ name, description, slug }: FormData) => {
+    try {
+      if (!projectSlug) return;
+
+      if (role) {
+        // update
+        await updateProjectRole({
+          id: role.id,
+          projectSlug,
+          name,
+          description,
+          slug
+        });
+
+        handlePopUpToggle("role", false);
+      } else {
+        // create
+        const newRole = await createProjectRole({
+          projectSlug,
+          name,
+          description,
+          slug,
+          permissions: []
+        });
+
+        router.push(`/project/${currentWorkspace?.id}/roles/${newRole.slug}`);
+        handlePopUpToggle("role", false);
+      }
+
+      createNotification({
+        text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text =
+        error?.response?.data?.message ??
+        `Failed to ${popUp?.role?.data ? "update" : "create"} role`;
+
+      createNotification({
+        text,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.role?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("role", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title={`${popUp?.role?.data ? "Update" : "Create"} Role`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="Billing Team" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="slug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Slug"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="billing" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="description"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Description" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="To manage billing" />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.role?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("role", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionRow.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { TFormSchema } from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
+
+const GENERAL_PERMISSIONS = [
+  { action: "read", label: "View" },
+  { action: "create", label: "Create" },
+  { action: "edit", label: "Modify" },
+  { action: "delete", label: "Remove" }
+] as const;
+
+const WORKSPACE_PERMISSIONS = [
+  { action: "edit", label: "Update project details" },
+  { action: "delete", label: "Delete projects" }
+] as const;
+
+const MEMBERS_PERMISSIONS = [
+  { action: "read", label: "View all members" },
+  { action: "create", label: "Invite members" },
+  { action: "edit", label: "Edit members" },
+  { action: "delete", label: "Remove members" }
+] as const;
+
+const SECRET_ROLLBACK_PERMISSIONS = [
+  { action: "create", label: "Perform Rollback" },
+  { action: "read", label: "View" }
+] as const;
+
+const getPermissionList = (option: Props["formName"]) => {
+  switch (option) {
+    case "workspace":
+      return WORKSPACE_PERMISSIONS;
+    case "member":
+      return MEMBERS_PERMISSIONS;
+    case "secret-rollback":
+      return SECRET_ROLLBACK_PERMISSIONS;
+    default:
+      return GENERAL_PERMISSIONS;
+  }
+};
+
+type PermissionName =
+  | `permissions.workspace.${"edit" | "delete"}`
+  | `permissions.secret-rollback.${"create" | "read"}`
+  | `permissions.${Exclude<
+      keyof NonNullable<TFormSchema["permissions"]>,
+      "workspace" | "secret-rollback" | "secrets"
+    >}.${"read" | "create" | "edit" | "delete"}`;
+
+type Props = {
+  isEditable: boolean;
+  title: string;
+  formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "secrets">;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-acess",
+  Custom = "custom"
+}
+
+export const RolePermissionRow = ({ isEditable, title, formName, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: `permissions.${formName}`
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+
+    switch (formName) {
+      default: {
+        const totalActions = GENERAL_PERMISSIONS.length;
+        const score = actions
+          .map((key) => (rule?.[key] ? 1 : 0))
+          .reduce((a, b) => a + b, 0 as number);
+        if (isCustom) return Permission.Custom;
+        if (score === 0) return Permission.NoAccess;
+        if (score === totalActions) return Permission.FullAccess;
+        if (rule && "read" in rule) {
+          if (score === 1 && rule?.read) return Permission.ReadOnly;
+        }
+
+        return Permission.Custom;
+      }
+    }
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          `permissions.${formName}`,
+          { read: false, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          `permissions.${formName}`,
+          { read: true, edit: true, create: true, delete: true },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          `permissions.${formName}`,
+          { read: true, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          `permissions.${formName}`,
+          { read: false, edit: false, create: false, delete: false },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>{title}</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && " border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {getPermissionList(formName).map(({ action, label }) => {
+                const permissionName = `permissions.${formName}.${action}` as PermissionName;
+                return (
+                  <Controller
+                    name={permissionName}
+                    key={permissionName}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={permissionName}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionSecretsRow.tsx

@@ -0,0 +1,247 @@
+import { useMemo } from "react";
+import { Control, Controller, UseFormGetValues, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
+import {
+  Checkbox,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { TFormSchema } from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
+
+type Props = {
+  title: string;
+  formName: "secrets";
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  getValue: UseFormGetValues<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-acess",
+  Custom = "custom"
+}
+
+export const RowPermissionSecretsRow = ({
+  title,
+  formName,
+  isEditable,
+  setValue,
+  getValue,
+  control
+}: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
+
+  const customRule = useWatch({
+    control,
+    name: `permissions.${formName}.custom`
+  });
+  const isCustom = Boolean(customRule);
+
+  const allRule = useWatch({ control, name: `permissions.${formName}.all` });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const { read, delete: del, edit, create } = allRule || {};
+    if (read && del && edit && create) return Permission.FullAccess;
+    if (read) return Permission.ReadOnly;
+    return Permission.NoAccess;
+  }, [allRule]);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    switch (val) {
+      case Permission.NoAccess: {
+        const permissions = getValue("permissions");
+        if (permissions) delete permissions[formName];
+        setValue("permissions", permissions, { shouldDirty: true });
+        break;
+      }
+      case Permission.FullAccess:
+        setValue(
+          `permissions.${formName}`,
+          { all: { read: true, edit: true, create: true, delete: true } },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          `permissions.${formName}`,
+          { all: { read: true, edit: false, create: false, delete: false } },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          `permissions.${formName}`,
+          { custom: { read: false, edit: false, create: false, delete: false } },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  return (
+    <>
+      <Tr>
+        <Td>{isCustom && <FontAwesomeIcon icon={faChevronDown} />}</Td>
+        <Td>{title}</Td>
+        <Td>
+          <Select
+            value={isCustom ? Permission.Custom : selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isCustom && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isCustom && " border-mineshaft-500 p-8"}`}
+          >
+            <div>
+              <TableContainer className="border-mineshaft-500">
+                <Table>
+                  <THead>
+                    <Tr>
+                      <Th />
+                      <Th className="min-w-[8rem]">
+                        <div className="flex items-center gap-2">
+                          Secret Path
+                          <span className="text-xs normal-case">
+                            <GlobPatternExamples />
+                          </span>
+                        </div>
+                      </Th>
+                      <Th className="text-center">View</Th>
+                      <Th className="text-center">Create</Th>
+                      <Th className="text-center">Modify</Th>
+                      <Th className="text-center">Delete</Th>
+                    </Tr>
+                  </THead>
+                  <TBody>
+                    {isCustom &&
+                      environments.map(({ name, slug }) => (
+                        <Tr key={`custom-role-project-secret-${slug}`}>
+                          <Td>{name}</Td>
+                          <Td>
+                            <Controller
+                              name={`permissions.${formName}.${slug}.secretPath`}
+                              control={control}
+                              render={({ field }) => (
+                                /* eslint-disable-next-line no-template-curly-in-string */
+                                <FormControl helperText="Supports glob path pattern string">
+                                  <Input
+                                    {...field}
+                                    className="w-full overflow-ellipsis"
+                                    placeholder="Glob patterns are supported"
+                                  />
+                                </FormControl>
+                              )}
+                            />
+                          </Td>
+                          <Td>
+                            <Controller
+                              name={`permissions.${formName}.${slug}.read`}
+                              control={control}
+                              defaultValue={false}
+                              render={({ field }) => (
+                                <div className="flex items-center justify-center">
+                                  <Checkbox
+                                    isChecked={field.value}
+                                    onCheckedChange={field.onChange}
+                                    id={`permissions.${formName}.${slug}.read`}
+                                    isDisabled={!isEditable}
+                                  />
+                                </div>
+                              )}
+                            />
+                          </Td>
+                          <Td>
+                            <Controller
+                              name={`permissions.${formName}.${slug}.create`}
+                              control={control}
+                              defaultValue={false}
+                              render={({ field }) => (
+                                <div className="flex items-center justify-center">
+                                  <Checkbox
+                                    isChecked={field.value}
+                                    onCheckedChange={field.onChange}
+                                    onBlur={field.onBlur}
+                                    id={`permissions.${formName}.${slug}.modify`}
+                                    isDisabled={!isEditable}
+                                  />
+                                </div>
+                              )}
+                            />
+                          </Td>
+                          <Td>
+                            <Controller
+                              name={`permissions.${formName}.${slug}.edit`}
+                              control={control}
+                              defaultValue={false}
+                              render={({ field }) => (
+                                <div className="flex items-center justify-center">
+                                  <Checkbox
+                                    isChecked={field.value}
+                                    onCheckedChange={field.onChange}
+                                    onBlur={field.onBlur}
+                                    id={`permissions.${formName}.${slug}.modify`}
+                                    isDisabled={!isEditable}
+                                  />
+                                </div>
+                              )}
+                            />
+                          </Td>
+                          <Td>
+                            <Controller
+                              defaultValue={false}
+                              name={`permissions.${formName}.${slug}.delete`}
+                              control={control}
+                              render={({ field }) => (
+                                <div className="flex items-center justify-center">
+                                  <Checkbox
+                                    isChecked={field.value}
+                                    onCheckedChange={field.onChange}
+                                    id={`permissions.${formName}.${slug}.delete`}
+                                    isDisabled={!isEditable}
+                                  />
+                                </div>
+                              )}
+                            />
+                          </Td>
+                        </Tr>
+                      ))}
+                  </TBody>
+                </Table>
+              </TableContainer>
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -0,0 +1,198 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api";
+import {
+  formRolePermission2API,
+  formSchema,
+  rolePermission2Form,
+  TFormSchema
+} from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
+
+import { RolePermissionRow } from "./RolePermissionRow";
+import { RowPermissionSecretsRow } from "./RolePermissionSecretsRow";
+
+const SINGLE_PERMISSION_LIST = [
+  {
+    title: "Project",
+    formName: "workspace"
+  },
+  {
+    title: "Integrations",
+    formName: "integrations"
+  },
+  {
+    title: "Secret Protect policy",
+    formName: ProjectPermissionSub.SecretApproval
+  },
+  {
+    title: "Roles",
+    formName: "role"
+  },
+  {
+    title: "User management",
+    formName: "member"
+  },
+  {
+    title: "Group management",
+    formName: "groups"
+  },
+  {
+    title: "Machine identity management",
+    formName: "identity"
+  },
+  {
+    title: "Webhooks",
+    formName: "webhooks"
+  },
+  {
+    title: "Service Tokens",
+    formName: "service-tokens"
+  },
+  {
+    title: "Settings",
+    formName: "settings"
+  },
+  {
+    title: "Environments",
+    formName: "environments"
+  },
+  {
+    title: "Tags",
+    formName: "tags"
+  },
+  {
+    title: "Audit Logs",
+    formName: "audit-logs"
+  },
+  {
+    title: "IP Allowlist",
+    formName: "ip-allowlist"
+  },
+  {
+    title: "Certificate Authorities",
+    formName: "certificate-authorities"
+  },
+  {
+    title: "Certificates",
+    formName: "certificates"
+  },
+  {
+    title: "Secret Rollback",
+    formName: "secret-rollback"
+  }
+] as const;
+
+type Props = {
+  roleSlug: string;
+};
+
+export const RolePermissionsSection = ({ roleSlug }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const projectSlug = currentWorkspace?.slug || "";
+  const { data: role } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
+
+  const {
+    setValue,
+    getValues,
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting },
+    reset
+  } = useForm<TFormSchema>({
+    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
+    resolver: zodResolver(formSchema)
+  });
+
+  const { mutateAsync: updateRole } = useUpdateProjectRole();
+
+  const onSubmit = async (el: TFormSchema) => {
+    try {
+      if (!projectSlug || !role?.id) return;
+
+      await updateRole({
+        id: role?.id as string,
+        projectSlug,
+        ...el,
+        permissions: formRolePermission2API(el.permissions)
+      });
+
+      createNotification({ type: "success", text: "Successfully updated role" });
+    } catch (err) {
+      console.log(err);
+      createNotification({ type: "error", text: "Failed to update role" });
+    }
+  };
+
+  const isCustomRole = !["admin", "member", "viewer", "no-access"].includes(role?.slug ?? "");
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Permissions</h3>
+        {isCustomRole && (
+          <div className="flex items-center">
+            <Button
+              colorSchema="primary"
+              type="submit"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              className="ml-4 text-mineshaft-300"
+              variant="link"
+              isDisabled={isSubmitting || !isDirty}
+              isLoading={isSubmitting}
+              onClick={() => reset()}
+            >
+              Cancel
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="py-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-5" />
+                <Th>Resource</Th>
+                <Th>Permission</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              <RowPermissionSecretsRow
+                title="Secrets"
+                formName={ProjectPermissionSub.Secrets}
+                isEditable={isCustomRole}
+                setValue={setValue}
+                getValue={getValues}
+                control={control}
+              />
+              {SINGLE_PERMISSION_LIST.map((permission) => {
+                return (
+                  <RolePermissionRow
+                    title={permission.title}
+                    formName={permission.formName}
+                    control={control}
+                    setValue={setValue}
+                    key={`project-role-${roleSlug}-permission-${permission.formName}`}
+                    isEditable={isCustomRole}
+                  />
+                );
+              })}
+            </TBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Project/RolePage/components/RolePermissionsSection/index.tsx

@@ -0,0 +1 @@
+export { RolePermissionsSection } from "./RolePermissionsSection";

frontend/src/views/Project/RolePage/components/index.tsx

@@ -0,0 +1,3 @@
+export { RoleDetailsSection } from "./RoleDetailsSection";
+export { RoleModal } from "./RoleModal";
+export { RolePermissionsSection } from "./RolePermissionsSection";

frontend/src/views/Project/RolePage/index.tsx

@@ -0,0 +1 @@
+export { RolePage } from "./RolePage";