feature: add org role duplication

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