feature: add org role duplication

frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -34,6 +34,7 @@ import { isCustomOrgRole } from "@app/helpers/roles";
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
 import { TOrgRole } from "@app/hooks/api/roles/types";
+import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { RoleModal } from "@app/pages/organization/RoleByIDPage/components/RoleModal";
 
 export const OrgRoleTable = () => {
@@ -44,6 +45,7 @@ export const OrgRoleTable = () => {
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "role",
     "deleteRole",
+    "duplicateRole",
     "upgradePlan"
   ] as const);
 
@@ -192,6 +194,25 @@ export const OrgRoleTable = () => {
                             </DropdownMenuItem>
                           )}
                         </OrgPermissionCan>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Create}
+                          a={OrgPermissionSubjects.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>
+                          )}
+                        </OrgPermissionCan>
                         {!isDefaultOrgRole && (
                           <OrgPermissionCan
                             I={OrgPermissionActions.Edit}
@@ -272,6 +293,11 @@ export const OrgRoleTable = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text={(popUp.upgradePlan?.data as { description: string })?.description}
       />
+      <DuplicateOrgRoleModal
+        isOpen={popUp.duplicateRole.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
+        roleId={(popUp?.duplicateRole?.data as TOrgRole)?.id}
+      />
     </div>
   );
 };

frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx

@@ -19,6 +19,7 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
+import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
 import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
@@ -36,7 +37,8 @@ export const Page = () => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "role",
-    "deleteOrgRole"
+    "deleteOrgRole",
+    "duplicateRole"
   ] as const);
 
   const onDeleteOrgRoleSubmit = async () => {
@@ -106,6 +108,21 @@ export const Page = () => {
                       </DropdownMenuItem>
                     )}
                   </OrgPermissionCan>
+                  <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={() => {
+                          handlePopUpOpen("duplicateRole");
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Duplicate Role
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
                   <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
@@ -143,6 +160,11 @@ export const Page = () => {
         deleteKey="confirm"
         onDeleteApproved={() => onDeleteOrgRoleSubmit()}
       />
+      <DuplicateOrgRoleModal
+        isOpen={popUp.duplicateRole.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
+        roleId={data?.id}
+      />
     </div>
   );
 };

frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx

@@ -0,0 +1,157 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent, Spinner } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useCreateOrgRole, useGetOrgRole } from "@app/hooks/api";
+import { TOrgRole } from "@app/hooks/api/roles/types";
+import { slugSchema } from "@app/lib/schemas";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  roleId?: string;
+};
+
+const schema = z
+  .object({
+    name: z.string().min(1, "Name required"),
+    description: z.string(),
+    slug: slugSchema({ min: 1 })
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type ContentProps = {
+  role: TOrgRole;
+  onClose: () => void;
+};
+
+const Content = ({ role, onClose }: ContentProps) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    defaultValues: {
+      name: `${role.name} Duplicate`
+    },
+    resolver: zodResolver(schema)
+  });
+
+  const createRole = useCreateOrgRole();
+  const navigate = useNavigate();
+
+  const handleDuplicateRole = async (form: FormData) => {
+    try {
+      const newRole = await createRole.mutateAsync({
+        orgId: role.orgId,
+        permissions: role.permissions,
+        ...form
+      });
+
+      createNotification({
+        type: "success",
+        text: "Role duplicated successfully"
+      });
+
+      navigate({
+        to: "/organization/roles/$roleId",
+        params: {
+          roleId: newRole.id
+        }
+      });
+
+      onClose();
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to duplicate role"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleDuplicateRole)}>
+      <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}
+        >
+          Duplicate Role
+        </Button>
+        <Button colorSchema="secondary" variant="plain" onClick={onClose}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export const DuplicateOrgRoleModal = ({ isOpen, onOpenChange, roleId }: Props) => {
+  const { currentOrg } = useOrganization();
+
+  const { data: role, isPending } = useGetOrgRole(currentOrg.id, roleId ?? "");
+
+  if (!roleId) return null;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Duplicate Role"
+        subTitle="Duplicate this role to create a new role with the same permissions."
+      >
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {isPending ? (
+          <div className="flex h-full flex-col items-center justify-center py-2.5">
+            <Spinner size="lg" className="text-mineshaft-500" />
+            <p className="mt-4 text-sm text-mineshaft-400">Loading Role...</p>
+          </div>
+        ) : role ? (
+          <Content role={role!} onClose={() => onOpenChange(false)} />
+        ) : (
+          <p className="w-full text-center text-red">
+            Error: could not find role with slug &#34;{roleId}&#34;
+          </p>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/organization/RoleByIDPage/components/RoleModal.tsx

@@ -13,7 +13,7 @@ import { slugSchema } from "@app/lib/schemas";
 
 const schema = z
   .object({
-    name: z.string(),
+    name: z.string().min(1, "Name required"),
     description: z.string(),
     slug: slugSchema({ min: 1 })
   })
@@ -71,12 +71,6 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   const onFormSubmit = async ({ name, description, slug }: FormData) => {
     try {
-      console.log("onFormSubmit args: ", {
-        name,
-        description,
-        slug
-      });
-
       if (!orgId) return;
 
       if (role) {

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

@@ -25,7 +25,7 @@ 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 { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
 import { RoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/RoleModal";
 
 export const ProjectRoleList = () => {
@@ -202,7 +202,7 @@ export const ProjectRoleList = () => {
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
       />
-      <DuplicateRoleModal
+      <DuplicateProjectRoleModal
         isOpen={popUp.duplicateRole.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
         roleSlug={(popUp?.duplicateRole?.data as TProjectRole)?.slug}

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -19,7 +19,7 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
 import { useDeleteProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { DuplicateRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateRoleModal";
+import { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
 import { RoleDetailsSection } from "./components/RoleDetailsSection";
@@ -175,7 +175,7 @@ const Page = () => {
         deleteKey="confirm"
         onDeleteApproved={() => onDeleteRoleSubmit()}
       />
-      <DuplicateRoleModal
+      <DuplicateProjectRoleModal
         isOpen={popUp.duplicateRole.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
         roleSlug={roleSlug}

frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx

@@ -51,7 +51,7 @@ const Content = ({ role, onClose }: ContentProps) => {
   const handleDuplicateRole = async (form: FormData) => {
     try {
       const newRole = await createRole.mutateAsync({
-        projectId: role.projectId,
+        projectId: currentWorkspace.id,
         permissions: role.permissions,
         ...form
       });
@@ -128,7 +128,7 @@ const Content = ({ role, onClose }: ContentProps) => {
   );
 };
 
-export const DuplicateRoleModal = ({ isOpen, onOpenChange, roleSlug }: Props) => {
+export const DuplicateProjectRoleModal = ({ isOpen, onOpenChange, roleSlug }: Props) => {
   const { currentWorkspace } = useWorkspace();
 
   const { data: role, isPending } = useGetProjectRoleBySlug(currentWorkspace.id, roleSlug ?? "");

frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleModal.tsx

@@ -17,7 +17,7 @@ import { slugSchema } from "@app/lib/schemas";
 
 const schema = z
   .object({
-    name: z.string(),
+    name: z.string().min(1, "Name required"),
     description: z.string(),
     slug: slugSchema({ min: 1 })
   })