feature: duplicate project role

backend/src/ee/services/permission/default-roles.ts

@@ -113,7 +113,6 @@ const buildAdminPermissionRules = () => {
 
   can(
     [
-      ProjectPermissionSecretActions.DescribeAndReadValue,
       ProjectPermissionSecretActions.DescribeSecret,
       ProjectPermissionSecretActions.ReadValue,
       ProjectPermissionSecretActions.Create,
@@ -194,7 +193,6 @@ const buildMemberPermissionRules = () => {
 
   can(
     [
-      ProjectPermissionSecretActions.DescribeAndReadValue,
       ProjectPermissionSecretActions.DescribeSecret,
       ProjectPermissionSecretActions.ReadValue,
       ProjectPermissionSecretActions.Edit,
@@ -372,9 +370,10 @@ const buildMemberPermissionRules = () => {
 const buildViewerPermissionRules = () => {
   const { can, rules } = new AbilityBuilder<MongoAbility<ProjectPermissionSet>>(createMongoAbility);
 
-  can(ProjectPermissionSecretActions.DescribeAndReadValue, ProjectPermissionSub.Secrets);
+  can(
-  can(ProjectPermissionSecretActions.DescribeSecret, ProjectPermissionSub.Secrets);
+    [ProjectPermissionSecretActions.DescribeSecret, ProjectPermissionSecretActions.ReadValue],
-  can(ProjectPermissionSecretActions.ReadValue, ProjectPermissionSub.Secrets);
+    ProjectPermissionSub.Secrets
+  );
   can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretFolders);
   can(ProjectPermissionDynamicSecretActions.ReadRootCredential, ProjectPermissionSub.DynamicSecrets);
   can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretImports);

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

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 { DuplicateRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateRoleModal";
 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()}
       />
+      <DuplicateRoleModal
+        isOpen={popUp.duplicateRole.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("duplicateRole", isOpen)}
+        roleSlug={roleSlug}
+      />
     </div>
   );
 };

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

@@ -0,0 +1,158 @@
+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(),
+    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) => {
+    try {
+      const newRole = await createRole.mutateAsync({
+        projectId: role.projectId,
+        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();
+    } 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 DuplicateRoleModal = ({ 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)} />
+        ) : (
+          <span>Error: could not find role with slug &#34;{roleSlug}&#34;</span>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};