Merge pull request #3573 from Infisical/duplicate-project-roles

feature(project/org-roles): Add ability to duplicate org and project roles

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

@@ -19,6 +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 { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
 import { RoleDetailsSection } from "./components/RoleDetailsSection";
@@ -40,7 +41,8 @@ const Page = () => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "role",
-    "deleteRole"
+    "deleteRole",
+    "duplicateRole"
   ] as const);
 
   const onDeleteRoleSubmit = async () => {
@@ -117,6 +119,24 @@ const Page = () => {
                       </DropdownMenuItem>
                     )}
                   </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Create}
+                    a={ProjectPermissionSub.Role}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={() => {
+                          handlePopUpOpen("duplicateRole");
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Duplicate Role
+                      </DropdownMenuItem>
+                    )}
+                  </ProjectPermissionCan>
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Delete}
                     a={ProjectPermissionSub.Role}
@@ -155,6 +175,11 @@ const Page = () => {
         deleteKey="confirm"
         onDeleteApproved={() => onDeleteRoleSubmit()}
       />
+      <DuplicateProjectRoleModal
+        isOpen={popUp.duplicateRole.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
+        roleSlug={roleSlug}
+      />
     </div>
   );
 };

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

@@ -0,0 +1,153 @@
+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 { useWorkspace } from "@app/context";
+import { useCreateProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
+import { TProjectRole } from "@app/hooks/api/roles/types";
+import { slugSchema } from "@app/lib/schemas";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  roleSlug?: 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: TProjectRole;
+  onClose: () => void;
+};
+
+const Content = ({ role, onClose }: ContentProps) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    defaultValues: {
+      name: `${role.name} Duplicate`
+    },
+    resolver: zodResolver(schema)
+  });
+
+  const { currentWorkspace } = useWorkspace();
+
+  const createRole = useCreateProjectRole();
+  const navigate = useNavigate();
+
+  const handleDuplicateRole = async (form: FormData) => {
+    const newRole = await createRole.mutateAsync({
+      projectId: currentWorkspace.id,
+      permissions: role.permissions,
+      ...form
+    });
+
+    createNotification({
+      type: "success",
+      text: "Role duplicated successfully"
+    });
+
+    navigate({
+      to: `/${currentWorkspace.type}/$projectId/roles/$roleSlug` as const,
+      params: {
+        roleSlug: newRole.slug,
+        projectId: currentWorkspace.id
+      }
+    });
+
+    onClose();
+  };
+
+  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 DuplicateProjectRoleModal = ({ isOpen, onOpenChange, roleSlug }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: role, isPending } = useGetProjectRoleBySlug(currentWorkspace.id, roleSlug ?? "");
+
+  if (!roleSlug) 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;{roleSlug}&#34;
+          </p>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

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 })
   })