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

Finish project role page

Browse Source
This commit is contained in:
Tuan Dang
2024-07-26 11:00:47 -07:00
parent 84af8e708e
commit 4d711ae149
9 changed files with 97 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/ee/routes/v1/project-role-router.ts
View File

@@ -101,7 +101,7 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
message: "Slug must be a valid"
}),
name: z.string().trim().optional().describe(PROJECT_ROLE.UPDATE.name),
permissions: ProjectPermissionSchema.array().describe(PROJECT_ROLE.UPDATE.permissions)
permissions: ProjectPermissionSchema.array().describe(PROJECT_ROLE.UPDATE.permissions).optional()
}),
response: {
200: z.object({
@@ -120,7 +120,7 @@ export const registerProjectRoleRouter = async (server: FastifyZodProvider) => {
roleId: req.params.roleId,
data: {
...req.body,
permissions: JSON.stringify(packRules(req.body.permissions))
permissions: req.body.permissions ? JSON.stringify(packRules(req.body.permissions)) : undefined
}
});
return { role };

9
backend/src/services/project-role/project-role-service.ts
View File

@@ -162,12 +162,19 @@ export const projectRoleServiceFactory = ({
actorOrgId
);
ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Edit, ProjectPermissionSub.Role);
if (data?.slug) {
const existingRole = await projectRoleDAL.findOne({ slug: data.slug, projectId });
if (existingRole && existingRole.id !== roleId)
throw new BadRequestError({ name: "Update Role", message: "Duplicate role" });
}
const [updatedRole] = await projectRoleDAL.update({ id: roleId, projectId }, data);
const [updatedRole] = await projectRoleDAL.update(
{ id: roleId, projectId },
{
...data,
permissions: data.permissions ? data.permissions : undefined
}
);
if (!updatedRole) throw new BadRequestError({ message: "Role not found", name: "Update role" });
return { ...updatedRole, permissions: unpackPermissions(updatedRole.permissions) };
};

32
frontend/src/hooks/api/roles/mutation.tsx
View File

@@ -10,6 +10,7 @@ import {
TDeleteOrgRoleDTO,
TDeleteProjectRoleDTO,
TOrgRole,
TProjectRole,
TUpdateOrgRoleDTO,
TUpdateProjectRoleDTO
} from "./types";
@@ -17,9 +18,13 @@ import {
export const useCreateProjectRole = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ projectSlug, ...dto }: TCreateProjectRoleDTO) =>
apiRequest.post(`/api/v1/workspace/${projectSlug}/roles`, dto),
return useMutation<TProjectRole, {}, TCreateProjectRoleDTO>({
mutationFn: async ({ projectSlug, ...dto }: TCreateProjectRoleDTO) => {
const {
data: { role }
} = await apiRequest.post(`/api/v1/workspace/${projectSlug}/roles`, dto);
return role;
},
onSuccess: (_, { projectSlug }) => {
queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
}
@@ -29,9 +34,13 @@ export const useCreateProjectRole = () => {
export const useUpdateProjectRole = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, projectSlug, ...dto }: TUpdateProjectRoleDTO) =>
apiRequest.patch(`/api/v1/workspace/${projectSlug}/roles/${id}`, dto),
return useMutation<TProjectRole, {}, TUpdateProjectRoleDTO>({
mutationFn: async ({ id, projectSlug, ...dto }: TUpdateProjectRoleDTO) => {
const {
data: { role }
} = await apiRequest.patch(`/api/v1/workspace/${projectSlug}/roles/${id}`, dto);
return role;
},
onSuccess: (_, { projectSlug }) => {
queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
}
@@ -40,10 +49,13 @@ export const useUpdateProjectRole = () => {
export const useDeleteProjectRole = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ projectSlug, id }: TDeleteProjectRoleDTO) =>
apiRequest.delete(`/api/v1/workspace/${projectSlug}/roles/${id}`),
return useMutation<TProjectRole, {}, TDeleteProjectRoleDTO>({
mutationFn: async ({ projectSlug, id }: TDeleteProjectRoleDTO) => {
const {
data: { role }
} = await apiRequest.delete(`/api/v1/workspace/${projectSlug}/roles/${id}`);
return role;
},
onSuccess: (_, { projectSlug }) => {
queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
}

21
frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx
View File

@@ -2,29 +2,12 @@ import { motion } from "framer-motion";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { usePopUp } from "@app/hooks";
import { ProjectRoleList } from "./components/ProjectRoleList";
import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
export const ProjectRoleListTab = withProjectPermission(
() => {
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
return popUp.editRole.isOpen ? (
<motion.div
key="role-modify"
transition={{ duration: 0.1 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<ProjectRoleModifySection
roleSlug={popUp.editRole.data as string}
onGoBack={() => handlePopUpClose("editRole")}
/>
</motion.div>
) : (
return (
<motion.div
key="role-list"
transition={{ duration: 0.1 }}
@@ -32,7 +15,7 @@ export const ProjectRoleListTab = withProjectPermission(
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: -30 }}
>
<ProjectRoleList onSelectRole={(slug) => handlePopUpOpen("editRole", slug)} />
<ProjectRoleList />
</motion.div>
);
},

64
frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
View File

@@ -25,14 +25,14 @@ import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@a
import { usePopUp } from "@app/hooks";
import { useDeleteProjectRole, useGetProjectRoles } from "@app/hooks/api";
import { TProjectRole } from "@app/hooks/api/roles/types";
import { RoleModal } from "@app/views/Project/RolePage/components";
type Props = {
onSelectRole: (slug?: string) => void;
};
export const ProjectRoleList = ({ onSelectRole }: Props) => {
export const ProjectRoleList = () => {
const router = useRouter();
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"role",
"deleteRole"
] as const);
const { currentWorkspace } = useWorkspace();
const projectSlug = currentWorkspace?.slug || "";
const projectId = currentWorkspace?.id || "";
@@ -66,11 +66,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
colorSchema="primary"
type="submit"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => onSelectRole()}
// onClick={() => {
// TODO
// handlePopUpOpen("role");
// }}
onClick={() => handlePopUpOpen("role")}
isDisabled={!isAllowed}
>
Add Role
@@ -120,10 +116,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
)}
onClick={(e) => {
e.stopPropagation();
// TODO: remove/replace
onSelectRole(role.slug);
// router.push(`/project/${projectId}/roles/${id}`);
router.push(`/project/${projectId}/roles/${slug}`);
}}
disabled={!isAllowed}
>
@@ -157,52 +150,13 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
</DropdownMenuContent>
</DropdownMenu>
</Td>
{/* <Td>
<div className="flex justify-end space-x-2">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.Role}
renderTooltip
allowedLabel="Edit"
>
{(isAllowed) => (
<IconButton
isDisabled={!isAllowed}
ariaLabel="edit"
onClick={() => onSelectRole(role.slug)}
variant="plain"
>
<FontAwesomeIcon icon={faEdit} />
</IconButton>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={ProjectPermissionSub.Role}
renderTooltip
allowedLabel={
isNonMutatable ? "Reserved roles are non-removable" : "Delete"
}
>
{(isAllowed) => (
<IconButton
ariaLabel="delete"
onClick={() => handlePopUpOpen("deleteRole", role)}
variant="plain"
isDisabled={isNonMutatable || !isAllowed}
>
<FontAwesomeIcon icon={faTrash} />
</IconButton>
)}
</ProjectPermissionCan>
</div>
</Td> */}
</Tr>
);
})}
</TBody>
</Table>
</TableContainer>
<RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
<DeleteActionModal
isOpen={popUp.deleteRole.isOpen}
title={`Are you sure want to delete ${

50
frontend/src/views/Project/RolePage/RolePage.tsx
View File

@@ -17,10 +17,10 @@ import {
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { useGetProjectRoleBySlug } from "@app/hooks/api";
import { useDeleteProjectRole,useGetProjectRoleBySlug } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { RoleDetailsSection, RoleModal,RolePermissionsSection } from "./components";
import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
export const RolePage = withProjectPermission(
() => {
@@ -31,8 +31,7 @@ export const RolePage = withProjectPermission(
const { data } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
// const { data } = useGetOrgRole(orgId, roleId); // TODO: get project role
// const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
const { mutateAsync: deleteProjectRole } = useDeleteProjectRole();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"role",
@@ -41,17 +40,19 @@ export const RolePage = withProjectPermission(
const onDeleteRoleSubmit = async () => {
try {
// if (!orgId || !roleId) return;
// await deleteOrgRole({
// orgId,
// id: roleId
// });
// createNotification({
// text: "Successfully deleted organization role",
// type: "success"
// });
// handlePopUpClose("deleteOrgRole");
// router.push(`/org/${orgId}/members`);
if (!currentWorkspace?.slug || !data?.id) return;
await deleteProjectRole({
projectSlug: currentWorkspace.slug,
id: data.id
});
createNotification({
text: "Successfully deleted project role",
type: "success"
});
handlePopUpClose("deleteRole");
router.push(`/project/${projectId}/members`);
} catch (err) {
console.error(err);
const error = err as any;
@@ -74,9 +75,7 @@ export const RolePage = withProjectPermission(
variant="link"
type="submit"
leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
onClick={() => {
router.push(`/project/${projectId}/members`);
}}
onClick={() => router.push(`/project/${projectId}/members`)}
className="mb-4"
>
Roles
@@ -102,12 +101,11 @@ export const RolePage = withProjectPermission(
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={async () => {
// TODO
// handlePopUpOpen("role", {
// roleId
// });
}}
onClick={() =>
handlePopUpOpen("role", {
roleSlug
})
}
disabled={!isAllowed}
>
Edit Role
@@ -125,9 +123,7 @@ export const RolePage = withProjectPermission(
? "hover:!bg-red-500 hover:!text-white"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={async () => {
handlePopUpOpen("deleteRole");
}}
onClick={() => handlePopUpOpen("deleteRole")}
disabled={!isAllowed}
>
Delete Role

91
frontend/src/views/Project/RolePage/components/RoleModal.tsx
View File

@@ -1,23 +1,16 @@
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
// import { useRouter } from "next/router";
import { useRouter } from "next/router";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
import { useWorkspace } from "@app/context";
import {
// useOrganization,
useWorkspace
} from "@app/context";
import {
// useCreateProjectRole,
// useUpdateProjectRole,
useGetProjectRoleBySlug
// useCreateOrgRole,
// useGetOrgRole,
// useUpdateOrgRole
} from "@app/hooks/api";
useCreateProjectRole,
useGetProjectRoleBySlug,
useUpdateProjectRole} from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
const schema = z
@@ -36,7 +29,7 @@ type Props = {
};
export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
// const router = useRouter();
const router = useRouter();
const popupData = popUp?.role?.data as {
roleSlug: string;
@@ -47,10 +40,8 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
const { data: role } = useGetProjectRoleBySlug(projectSlug, popupData?.roleSlug ?? "");
console.log("Project RoleModal role: ", role);
// const { mutateAsync: createProjectRole } = useCreateProjectRole();
// const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
const { mutateAsync: createProjectRole } = useCreateProjectRole();
const { mutateAsync: updateProjectRole } = useUpdateProjectRole();
const {
control,
@@ -83,59 +74,33 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
const onFormSubmit = async ({ name, description, slug }: FormData) => {
try {
console.log("onFormSubmit args: ", {
name,
description,
slug
});
if (!projectSlug || !role?.id) return;
if (!projectSlug) return;
if (role) {
// update
console.log("update");
// const u1 = await updateProjectRole({
// id: role.id,
// projectSlug,
// name,
// description,
// slug
// });
// console.log("u1: ", u1);
await updateProjectRole({
id: role.id,
projectSlug,
name,
description,
slug
});
handlePopUpToggle("role", false);
} else {
// create
console.log("create");
const newRole = await createProjectRole({
projectSlug,
name,
description,
slug,
permissions: []
});
router.push(`/project/${currentWorkspace?.id}/roles/${newRole.slug}`);
handlePopUpToggle("role", false);
}
// if (!orgId) return;
// if (role) {
// // update
// await updateOrgRole({
// orgId,
// id: role.id,
// name,
// description,
// slug
// });
// handlePopUpToggle("role", false);
// } else {
// // create
// const newRole = await createOrgRole({
// orgId,
// name,
// description,
// slug,
// permissions: []
// });
// handlePopUpToggle("role", false);
// router.push(`/org/${orgId}/roles/${newRole.id}`);
// }
createNotification({
text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`,
type: "success"

13
frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionRow.tsx
View File

@@ -78,22 +78,9 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
});
const selectedPermissionCategory = useMemo(() => {
// TODO: re-check
const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
switch (formName) {
case "secret-rollback":
case "workspace": {
const totalActions = WORKSPACE_PERMISSIONS.length;
const score = actions
.map((key) => (rule?.[key] ? 1 : 0))
.reduce((a, b) => a + b, 0 as number);
if (isCustom) return Permission.Custom;
if (score === 0) return Permission.NoAccess;
if (score === totalActions) return Permission.FullAccess;
return Permission.Custom; // TODO: update
}
default: {
const totalActions = GENERAL_PERMISSIONS.length;
const score = actions

6
frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx
View File

@@ -6,10 +6,11 @@ import { Button, Table, TableContainer, TBody, Th, THead, Tr } from "@app/compon
import { ProjectPermissionSub, useWorkspace } from "@app/context";
import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api";
import {
formRolePermission2API, formSchema,
formRolePermission2API,
formSchema,
rolePermission2Form,
TFormSchema
} from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
} from "@app/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils";
import { RolePermissionRow } from "./RolePermissionRow";
import { RowPermissionSecretsRow } from "./RolePermissionSecretsRow";
@@ -89,7 +90,6 @@ type Props = {
roleSlug: string;
};
// note: isEditable should also depend on if user has edit role permission
export const RolePermissionsSection = ({ roleSlug }: Props) => {
const { currentWorkspace } = useWorkspace();
const projectSlug = currentWorkspace?.slug || "";