Finish project role page

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

@@ -25,14 +25,14 @@ 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) => {
+export const ProjectRoleList = () => {
   const router = useRouter();
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "role",
+    "deleteRole"
+  ] as const);
   const { currentWorkspace } = useWorkspace();
   const projectSlug = currentWorkspace?.slug || "";
   const projectId = currentWorkspace?.id || "";
@@ -66,11 +66,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
               colorSchema="primary"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => onSelectRole()}
-              // onClick={() => {
-              //   TODO
-              //   handlePopUpOpen("role");
-              // }}
+              onClick={() => handlePopUpOpen("role")}
               isDisabled={!isAllowed}
             >
               Add Role
@@ -120,10 +116,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
                               )}
                               onClick={(e) => {
                                 e.stopPropagation();
-
-                                // TODO: remove/replace
-                                onSelectRole(role.slug);
-                                // router.push(`/project/${projectId}/roles/${id}`);
+                                router.push(`/project/${projectId}/roles/${slug}`);
                               }}
                               disabled={!isAllowed}
                             >
@@ -157,52 +150,13 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </Td>
-                  {/* <Td>
-                      <div className="flex justify-end space-x-2">
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Edit}
-                          a={ProjectPermissionSub.Role}
-                          renderTooltip
-                          allowedLabel="Edit"
-                        >
-                          {(isAllowed) => (
-                            <IconButton
-                              isDisabled={!isAllowed}
-                              ariaLabel="edit"
-                              onClick={() => onSelectRole(role.slug)}
-                              variant="plain"
-                            >
-                              <FontAwesomeIcon icon={faEdit} />
-                            </IconButton>
-                          )}
-                        </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>
+      <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
         title={`Are you sure want to delete ${

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

@@ -17,10 +17,10 @@ import {
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { useGetProjectRoleBySlug } from "@app/hooks/api";
+import { useDeleteProjectRole,useGetProjectRoleBySlug } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { RoleDetailsSection, RoleModal,RolePermissionsSection } from "./components";
+import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
 
 export const RolePage = withProjectPermission(
   () => {
@@ -31,8 +31,7 @@ export const RolePage = withProjectPermission(
 
     const { data } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
 
-    // const { data } = useGetOrgRole(orgId, roleId); // TODO: get project role
-    // const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
+    const { mutateAsync: deleteProjectRole } = useDeleteProjectRole();
 
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "role",
@@ -41,17 +40,19 @@ export const RolePage = withProjectPermission(
 
     const onDeleteRoleSubmit = async () => {
       try {
-        // if (!orgId || !roleId) return;
-        // await deleteOrgRole({
-        //   orgId,
-        //   id: roleId
-        // });
-        // createNotification({
-        //   text: "Successfully deleted organization role",
-        //   type: "success"
-        // });
-        // handlePopUpClose("deleteOrgRole");
-        // router.push(`/org/${orgId}/members`);
+        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;
@@ -74,9 +75,7 @@ export const RolePage = withProjectPermission(
               variant="link"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-              onClick={() => {
-                router.push(`/project/${projectId}/members`);
-              }}
+              onClick={() => router.push(`/project/${projectId}/members`)}
               className="mb-4"
             >
               Roles
@@ -102,12 +101,11 @@ export const RolePage = withProjectPermission(
                           className={twMerge(
                             !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                           )}
-                          onClick={async () => {
-                            // TODO
-                            // handlePopUpOpen("role", {
-                            //   roleId
-                            // });
-                          }}
+                          onClick={() =>
+                            handlePopUpOpen("role", {
+                              roleSlug
+                            })
+                          }
                           disabled={!isAllowed}
                         >
                           Edit Role
@@ -125,9 +123,7 @@ export const RolePage = withProjectPermission(
                               ? "hover:!bg-red-500 hover:!text-white"
                               : "pointer-events-none cursor-not-allowed opacity-50"
                           )}
-                          onClick={async () => {
-                            handlePopUpOpen("deleteRole");
-                          }}
+                          onClick={() => handlePopUpOpen("deleteRole")}
                           disabled={!isAllowed}
                         >
                           Delete Role

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

@@ -1,23 +1,16 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-// import { useRouter } from "next/router";
+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 {
-  // useOrganization,
-  useWorkspace
-} from "@app/context";
-import {
-  //   useCreateProjectRole,
-  //   useUpdateProjectRole,
-  useGetProjectRoleBySlug
-  // useCreateOrgRole,
-  // useGetOrgRole,
-  // useUpdateOrgRole
-} from "@app/hooks/api";
+  useCreateProjectRole,
+  useGetProjectRoleBySlug,
+  useUpdateProjectRole} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
@@ -36,7 +29,7 @@ type Props = {
 };
 
 export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
-  //   const router = useRouter();
+  const router = useRouter();
 
   const popupData = popUp?.role?.data as {
     roleSlug: string;
@@ -47,10 +40,8 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const { data: role } = useGetProjectRoleBySlug(projectSlug, popupData?.roleSlug ?? "");
 
-  console.log("Project RoleModal role: ", role);
-
-  //   const { mutateAsync: createProjectRole } = useCreateProjectRole();
-  //   const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
+  const { mutateAsync: createProjectRole } = useCreateProjectRole();
+  const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
 
   const {
     control,
@@ -83,59 +74,33 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const onFormSubmit = async ({ name, description, slug }: FormData) => {
     try {
-      console.log("onFormSubmit args: ", {
-        name,
-        description,
-        slug
-      });
-
-      if (!projectSlug || !role?.id) return;
+      if (!projectSlug) return;
 
       if (role) {
         // update
-        console.log("update");
-        // const u1 = await updateProjectRole({
-        //   id: role.id,
-        //   projectSlug,
-        //   name,
-        //   description,
-        //   slug
-        // });
-        // console.log("u1: ", u1);
+        await updateProjectRole({
+          id: role.id,
+          projectSlug,
+          name,
+          description,
+          slug
+        });
+
+        handlePopUpToggle("role", false);
       } else {
         // create
-        console.log("create");
+        const newRole = await createProjectRole({
+          projectSlug,
+          name,
+          description,
+          slug,
+          permissions: []
+        });
+
+        router.push(`/project/${currentWorkspace?.id}/roles/${newRole.slug}`);
+        handlePopUpToggle("role", false);
       }
 
-      //   if (!orgId) return;
-
-      //   if (role) {
-      //     // update
-
-      //     await updateOrgRole({
-      //       orgId,
-      //       id: role.id,
-      //       name,
-      //       description,
-      //       slug
-      //     });
-
-      //     handlePopUpToggle("role", false);
-      //   } else {
-      //     // create
-
-      //     const newRole = await createOrgRole({
-      //       orgId,
-      //       name,
-      //       description,
-      //       slug,
-      //       permissions: []
-      //     });
-
-      //     handlePopUpToggle("role", false);
-      //     router.push(`/org/${orgId}/roles/${newRole.id}`);
-      //   }
-
       createNotification({
         text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
         type: "success"

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

@@ -78,22 +78,9 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
   });
 
   const selectedPermissionCategory = useMemo(() => {
-    // TODO: re-check
     const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
 
     switch (formName) {
-      case "secret-rollback":
-      case "workspace": {
-        const totalActions = WORKSPACE_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;
-
-        return Permission.Custom; // TODO: update
-      }
       default: {
         const totalActions = GENERAL_PERMISSIONS.length;
         const score = actions

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

@@ -6,10 +6,11 @@ import { Button, Table, TableContainer, TBody, Th, THead, Tr } from "@app/compon
 import { ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api";
 import {
-formRolePermission2API,  formSchema,
+  formRolePermission2API,
+  formSchema,
   rolePermission2Form,
   TFormSchema
- } from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
+} from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
 
 import { RolePermissionRow } from "./RolePermissionRow";
 import { RowPermissionSecretsRow } from "./RolePermissionSecretsRow";
@@ -89,7 +90,6 @@ type Props = {
   roleSlug: string;
 };
 
-// note: isEditable should also depend on if user has edit role permission
 export const RolePermissionsSection = ({ roleSlug }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const projectSlug = currentWorkspace?.slug || "";