awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: add org role duplication

Browse Source
This commit is contained in:
Scott Wilson
2025-05-09 14:29:18 -07:00
parent 44c7be54cf
commit aa68a3ef58
8 changed files with 214 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
View File

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

24
frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
View File

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

157
frontend/src/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal.tsx Normal file
View File

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

8
frontend/src/pages/organization/RoleByIDPage/components/RoleModal.tsx
View File

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

4
frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
View File

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

4
frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
View File

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

4
frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateRoleModal.tsx → frontend/src/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal.tsx
View File

@@ -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 ?? "");

2
frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleModal.tsx
View File

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