From 3731459e991901769de02b04bb1ae3307e9008b9 Mon Sep 17 00:00:00 2001 From: Tuan Dang Date: Fri, 19 Jul 2024 16:53:04 +0700 Subject: [PATCH] Make progress on org role detail modal --- frontend/src/views/Org/RolePage/RolePage.tsx | 6 +- .../RolePage/components/RoleDetailsModal.tsx | 218 ++++++++++++++++++ .../RolePermissionsSection.tsx | 6 +- .../RolePermissionsTable.tsx | 124 +++++++--- .../RolePermissionsSection/index.tsx | 2 +- .../views/Org/RolePage/components/index.tsx | 1 + 6 files changed, 320 insertions(+), 37 deletions(-) create mode 100644 frontend/src/views/Org/RolePage/components/RoleDetailsModal.tsx diff --git a/frontend/src/views/Org/RolePage/RolePage.tsx b/frontend/src/views/Org/RolePage/RolePage.tsx index d290b45b4..d939a28b9 100644 --- a/frontend/src/views/Org/RolePage/RolePage.tsx +++ b/frontend/src/views/Org/RolePage/RolePage.tsx @@ -27,7 +27,8 @@ import { } from "@app/hooks/api"; import { usePopUp } from "@app/hooks/usePopUp"; -import { RoleDetailsSection } from "./components"; +import { RolePermissionsTable } from "./components/RolePermissionsSection/RolePermissionsTable"; +import { RoleDetailsSection, RolePermissionsSection } from "./components"; // import { IdentityAuthMethodModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal"; // import { IdentityModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal"; @@ -201,8 +202,7 @@ export const RolePage = withPermission(
- Permissions Section - {/* */} + )} diff --git a/frontend/src/views/Org/RolePage/components/RoleDetailsModal.tsx b/frontend/src/views/Org/RolePage/components/RoleDetailsModal.tsx new file mode 100644 index 000000000..68f6f2b75 --- /dev/null +++ b/frontend/src/views/Org/RolePage/components/RoleDetailsModal.tsx @@ -0,0 +1,218 @@ +// import { useEffect } from "react"; +import { Controller, useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; + +// import { useRouter } from "next/router"; +import { createNotification } from "@app/components/notifications"; +import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2"; +import { useOrganization } from "@app/context"; +import { + useGetOrgRole + // useCreateOrgRole, + // useUpdateOrgRole +} from "@app/hooks/api"; +import { UsePopUpState } from "@app/hooks/usePopUp"; + +const schema = z + .object({ + name: z.string(), + description: z.string(), + slug: z.string() + }) + .required(); + +export type FormData = z.infer; + +type Props = { + popUp: UsePopUpState<["role"]>; + // handlePopUpOpen: ( + // popUpName: keyof UsePopUpState<["identityAuthMethod"]>, + // data: { + // identityId: string; + // name: string; + // authMethod?: IdentityAuthMethod; + // } + // ) => void; + handlePopUpToggle: (popUpName: keyof UsePopUpState<["role"]>, state?: boolean) => void; +}; + +export const RoleDetailsModal = ({ popUp, handlePopUpToggle }: Props) => { + // const router = useRouter(); + const { currentOrg } = useOrganization(); + const orgId = currentOrg?.id || ""; + + const role = popUp?.role?.data as { + roleId: string; + }; + + const { data } = useGetOrgRole(orgId, role.roleId ?? ""); + console.log("RoleDetailsModal: useGetOrgRole data: ", data); + + // TODO: fetch by role id here + + // const { mutateAsync: createMutateAsync } = useCreateIdentity(); + // const { mutateAsync: updateMutateAsync } = useUpdateIdentity(); + // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth(); + + // const { mutateAsync: createOrgRole } = useCreateOrgRole(); + // const { mutateAsync: updateOrgRole } = useUpdateOrgRole(); + + const { + control, + handleSubmit, + reset, + formState: { isSubmitting } + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + name: "", + description: "" + } + }); + + // useEffect(() => { + // if (role) { + // reset({ + // name: role.name, + // description: role.description, + // slug: role.slug + // }); + // } else { + // reset({ + // name: "", + // description: "", + // slug: "" + // }); + // } + // }, [role]); + + const onFormSubmit = async ({ name, description, slug }: FormData) => { + try { + console.log("onFormSubmit args: ", { + name, + description, + slug + }); + + if (role) { + // update + + // const up = await updateOrgRole({}); + + // console.log("onFormSubmit up: ", up); + + // await updateMutateAsync({ + // identityId: identity.identityId, + // name, + // role: role || undefined, + // organizationId: orgId + // }); + + handlePopUpToggle("role", false); + } else { + // create + + // const { id: createdId } = await createMutateAsync({ + // name, + // role: role || undefined, + // organizationId: orgId + // }); + + // await addMutateAsync({ + // organizationId: orgId, + // identityId: createdId, + // clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }], + // accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }], + // accessTokenTTL: 2592000, + // accessTokenMaxTTL: 2592000, + // accessTokenNumUsesLimit: 0 + // }); + + handlePopUpToggle("role", false); + // router.push(`/org/${orgId}/identities/${createdId}`); + } + + createNotification({ + text: `Successfully ${popUp?.role?.data ? "updated" : "created"} role`, + type: "success" + }); + + reset(); + } catch (err) { + console.error(err); + const error = err as any; + const text = + error?.response?.data?.message ?? + `Failed to ${popUp?.role?.data ? "update" : "create"} role`; + + createNotification({ + text, + type: "error" + }); + } + }; + + return ( + { + handlePopUpToggle("role", isOpen); + reset(); + }} + > + +
+ ( + + + + )} + /> + ( + + + + )} + /> + ( + + + + )} + /> +
+ + +
+ +
+ + ); +}; diff --git a/frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx b/frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx index 4346bce3b..347fb6ba2 100644 --- a/frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx +++ b/frontend/src/views/Org/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx @@ -6,13 +6,15 @@ import { // DeleteActionModal, IconButton } from "@app/components/v2"; + +import { RolePermissionsTable } from "./RolePermissionsTable"; // import { useDeleteIdentityFromWorkspace } from "@app/hooks/api"; // import { usePopUp } from "@app/hooks/usePopUp"; // import { IdentityAddToProjectModal } from "./IdentityAddToProjectModal"; // import { IdentityProjectsTable } from "./IdentityProjectsTable"; -export const RolePermissionsSesction = () => { +export const RolePermissionsSection = () => { // const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace(); // const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ @@ -62,7 +64,7 @@ export const RolePermissionsSesction = () => {
- Permissions Table + {/* */}
{/* , - // data?: {} - // ) => void; -}; +// type Props = { +// identityId: string; +// handlePopUpOpen: ( +// popUpName: keyof UsePopUpState<["removeIdentityFromProject"]>, +// data?: {} +// ) => void; +// }; -export const IdentityProjectsTable = ({ - identityId -}: // handlePopUpOpen -Props) => { - const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId); +export const RolePermissionsTable = () => { + // const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId); return ( - - - + + - {isLoading && } - {!isLoading && + + + + + + {/* */} + {/* {isLoading && } */} + {/* {!isLoading && projectMemberships?.map((membership) => { return (
Row
- // + ); - })} + })} */}
NameRoleAdded OnResourceAllowed Actions
IdentityCreate/Read + + +
+ +
+ + + + {(isAllowed) => ( + { + e.stopPropagation(); + // TODO + }} + disabled={!isAllowed} + > + Edit Permission + + )} + + + {(isAllowed) => ( + { + e.stopPropagation(); + // handlePopUpOpen("deleteIdentity", { + // identityId: id, + // name + // }); + }} + disabled={!isAllowed} + > + Delete Permission + + )} + + + +
- {!isLoading && !projectMemberships?.length && ( + {/* */} + {/* {!isLoading && !projectMemberships?.length && ( - )} + )} */} ); }; diff --git a/frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx b/frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx index 9a451ebef..104e2144e 100644 --- a/frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx +++ b/frontend/src/views/Org/RolePage/components/RolePermissionsSection/index.tsx @@ -1 +1 @@ -export { RolePermissionsSesction } from "./RolePermissionsSection"; +export { RolePermissionsSection } from "./RolePermissionsSection"; diff --git a/frontend/src/views/Org/RolePage/components/index.tsx b/frontend/src/views/Org/RolePage/components/index.tsx index 0432a2cba..dadfb93af 100644 --- a/frontend/src/views/Org/RolePage/components/index.tsx +++ b/frontend/src/views/Org/RolePage/components/index.tsx @@ -1 +1,2 @@ export { RoleDetailsSection } from "./RoleDetailsSection"; +export { RolePermissionsSection } from "./RolePermissionsSection";