feature: duplicate project role

frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -25,13 +25,15 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
 import { usePopUp } from "@app/hooks";
 import { useDeleteProjectRole, useGetProjectRoles } from "@app/hooks/api";
 import { ProjectMembershipRole, TProjectRole } from "@app/hooks/api/roles/types";
+import { DuplicateRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateRoleModal";
 import { RoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/RoleModal";
 
 export const ProjectRoleList = () => {
   const navigate = useNavigate();
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "role",
-    "deleteRole"
+    "deleteRole",
+    "duplicateRole"
   ] as const);
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
@@ -139,6 +141,25 @@ export const ProjectRoleList = () => {
                             </DropdownMenuItem>
                           )}
                         </ProjectPermissionCan>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Create}
+                          a={ProjectPermissionSub.Role}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handlePopUpOpen("duplicateRole", role);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Duplicate Role
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
                         {!isNonMutatable && (
                           <ProjectPermissionCan
                             I={ProjectPermissionActions.Delete}
@@ -181,6 +202,11 @@ export const ProjectRoleList = () => {
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
       />
+      <DuplicateRoleModal
+        isOpen={popUp.duplicateRole.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
+        roleSlug={(popUp?.duplicateRole?.data as TProjectRole)?.slug}
+      />
     </div>
   );
 };