mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
Clean org roles concept refactor
This commit is contained in:
Tuan Dang
@@ -9,6 +9,7 @@ import {
|
||||
TCreateProjectRoleDTO,
|
||||
TDeleteOrgRoleDTO,
|
||||
TDeleteProjectRoleDTO,
|
||||
TOrgRole,
|
||||
TUpdateOrgRoleDTO,
|
||||
TUpdateProjectRoleDTO
|
||||
} from "./types";
|
||||
@@ -52,12 +53,17 @@ export const useDeleteProjectRole = () => {
|
||||
export const useCreateOrgRole = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) =>
|
||||
apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
|
||||
return useMutation<TOrgRole, {}, TCreateOrgRoleDTO>({
|
||||
mutationFn: async ({ orgId, permissions, ...dto }: TCreateOrgRoleDTO) => {
|
||||
const {
|
||||
data: { role }
|
||||
} = await apiRequest.post(`/api/v1/organization/${orgId}/roles`, {
|
||||
...dto,
|
||||
permissions: permissions.length ? packRules(permissions) : []
|
||||
}),
|
||||
});
|
||||
|
||||
return role;
|
||||
},
|
||||
onSuccess: (_, { orgId }) => {
|
||||
queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
|
||||
}
|
||||
@@ -67,19 +73,16 @@ export const useCreateOrgRole = () => {
|
||||
export const useUpdateOrgRole = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) => {
|
||||
console.log("update args: ", {
|
||||
id,
|
||||
orgId,
|
||||
permissions,
|
||||
...dto,
|
||||
pack: permissions?.length ? packRules(permissions) : []
|
||||
});
|
||||
return apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
|
||||
return useMutation<TOrgRole, {}, TUpdateOrgRoleDTO>({
|
||||
mutationFn: async ({ id, orgId, permissions, ...dto }: TUpdateOrgRoleDTO) => {
|
||||
const {
|
||||
data: { role }
|
||||
} = await apiRequest.patch(`/api/v1/organization/${orgId}/roles/${id}`, {
|
||||
...dto,
|
||||
permissions: permissions?.length ? packRules(permissions) : []
|
||||
});
|
||||
|
||||
return role;
|
||||
},
|
||||
onSuccess: (_, { id, orgId }) => {
|
||||
queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
|
||||
@@ -91,11 +94,16 @@ export const useUpdateOrgRole = () => {
|
||||
export const useDeleteOrgRole = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ orgId, id }: TDeleteOrgRoleDTO) =>
|
||||
apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
|
||||
return useMutation<TOrgRole, {}, TDeleteOrgRoleDTO>({
|
||||
mutationFn: async ({ orgId, id }: TDeleteOrgRoleDTO) => {
|
||||
const {
|
||||
data: { role }
|
||||
} = await apiRequest.delete(`/api/v1/organization/${orgId}/roles/${id}`, {
|
||||
data: { orgId }
|
||||
}),
|
||||
});
|
||||
|
||||
return role;
|
||||
},
|
||||
onSuccess: (_, { id, orgId }) => {
|
||||
queryClient.invalidateQueries(roleQueryKeys.getOrgRoles(orgId));
|
||||
queryClient.invalidateQueries(roleQueryKeys.getOrgRole(orgId, id));
|
||||
|
||||
@@ -7,7 +7,7 @@ import { OrgRoleModifySection } from "./OrgRoleModifySection";
|
||||
import { OrgRoleTable } from "./OrgRoleTable";
|
||||
|
||||
export const OrgRoleTabSection = () => {
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
|
||||
const { popUp, handlePopUpClose } = usePopUp(["editRole"] as const);
|
||||
return popUp.editRole.isOpen ? (
|
||||
<motion.div
|
||||
key="role-modify"
|
||||
@@ -29,7 +29,7 @@ export const OrgRoleTabSection = () => {
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<OrgRoleTable onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
|
||||
<OrgRoleTable />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -25,17 +25,15 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import { useDeleteOrgRole, useGetOrgRoles } from "@app/hooks/api";
|
||||
import { TOrgRole } from "@app/hooks/api/roles/types";
|
||||
import { RoleModal } from "@app/views/Org/RolePage/components";
|
||||
|
||||
type Props = {
|
||||
onSelectRole: (role?: TOrgRole) => void;
|
||||
};
|
||||
|
||||
export const OrgRoleTable = ({ onSelectRole }: Props) => {
|
||||
export const OrgRoleTable = () => {
|
||||
const router = useRouter();
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
||||
"role",
|
||||
"deleteRole"
|
||||
] as const);
|
||||
|
||||
@@ -68,7 +66,10 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
|
||||
colorSchema="primary"
|
||||
type="submit"
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
onClick={() => onSelectRole()}
|
||||
// onClick={() => onSelectRole()}
|
||||
onClick={() => {
|
||||
handlePopUpOpen("role");
|
||||
}}
|
||||
isDisabled={!isAllowed}
|
||||
>
|
||||
Add Role
|
||||
@@ -119,7 +120,8 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelectRole(role);
|
||||
router.push(`/org/${orgId}/roles/${id}`);
|
||||
// onSelectRole(role);
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
@@ -142,7 +144,10 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
|
||||
? "hover:!bg-red-500 hover:!text-white"
|
||||
: "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={() => handlePopUpOpen("deleteRole", role)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePopUpOpen("deleteRole", role);
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
Delete Role
|
||||
@@ -158,6 +163,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.deleteRole.isOpen}
|
||||
title={`Are you sure want to delete ${
|
||||
|
||||
@@ -13,20 +13,14 @@ import {
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Tooltip,
|
||||
UpgradePlanModal
|
||||
Tooltip
|
||||
} from "@app/components/v2";
|
||||
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
|
||||
import { withPermission } from "@app/hoc";
|
||||
import { useGetOrgRole } from "@app/hooks/api";
|
||||
import { useDeleteOrgRole,useGetOrgRole } from "@app/hooks/api";
|
||||
import { usePopUp } from "@app/hooks/usePopUp";
|
||||
|
||||
import { RolePermissionsTable } from "./components/RolePermissionsSection/RolePermissionsTable";
|
||||
import {
|
||||
RoleDetailsSection,
|
||||
RoleModal,
|
||||
RolePermissionModal,
|
||||
RolePermissionsSection} from "./components";
|
||||
import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
|
||||
|
||||
export const RolePage = withPermission(
|
||||
() => {
|
||||
@@ -35,76 +29,40 @@ export const RolePage = withPermission(
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
const { data } = useGetOrgRole(orgId, roleId);
|
||||
console.log("useGetOrgRole data: ", data);
|
||||
|
||||
// const { data } = useGetIdentityById(identityId); // TODO: get role by id
|
||||
// const { mutateAsync: deleteIdentity } = useDeleteIdentity();
|
||||
// const { mutateAsync: revokeToken } = useRevokeIdentityTokenAuthToken();
|
||||
// const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
|
||||
const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
|
||||
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
||||
"role",
|
||||
"rolePermission"
|
||||
"deleteOrgRole"
|
||||
] as const);
|
||||
|
||||
// const onDeleteIdentitySubmit = async (id: string) => {
|
||||
// try {
|
||||
// await deleteIdentity({
|
||||
// identityId: id,
|
||||
// organizationId: orgId
|
||||
// });
|
||||
const onDeleteOrgRoleSubmit = async () => {
|
||||
try {
|
||||
if (!orgId || !roleId) return;
|
||||
|
||||
// createNotification({
|
||||
// text: "Successfully deleted identity",
|
||||
// type: "success"
|
||||
// });
|
||||
await deleteOrgRole({
|
||||
orgId,
|
||||
id: roleId
|
||||
});
|
||||
|
||||
// handlePopUpClose("deleteIdentity");
|
||||
// router.push(`/org/${orgId}/members`);
|
||||
// } catch (err) {
|
||||
// console.error(err);
|
||||
// const error = err as any;
|
||||
// const text = error?.response?.data?.message ?? "Failed to delete identity";
|
||||
createNotification({
|
||||
text: "Successfully deleted organization role",
|
||||
type: "success"
|
||||
});
|
||||
|
||||
// createNotification({
|
||||
// text,
|
||||
// type: "error"
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
handlePopUpClose("deleteOrgRole");
|
||||
router.push(`/org/${orgId}/members`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const error = err as any;
|
||||
const text = error?.response?.data?.message ?? "Failed to delete organization role";
|
||||
|
||||
// const onRevokeTokenSubmit = async ({
|
||||
// identityId: parentIdentityId,
|
||||
// tokenId,
|
||||
// name
|
||||
// }: {
|
||||
// identityId: string;
|
||||
// tokenId: string;
|
||||
// name: string;
|
||||
// }) => {
|
||||
// try {
|
||||
// await revokeToken({
|
||||
// identityId: parentIdentityId,
|
||||
// tokenId
|
||||
// });
|
||||
|
||||
// handlePopUpClose("revokeToken");
|
||||
|
||||
// createNotification({
|
||||
// text: `Successfully revoked token ${name ?? ""}`,
|
||||
// type: "success"
|
||||
// });
|
||||
// } catch (err) {
|
||||
// console.error(err);
|
||||
// const error = err as any;
|
||||
// const text = error?.response?.data?.message ?? "Failed to delete identity";
|
||||
|
||||
// createNotification({
|
||||
// text,
|
||||
// type: "error"
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
createNotification({
|
||||
text,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
|
||||
@@ -139,12 +97,9 @@ export const RolePage = withPermission(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={async () => {
|
||||
// handlePopUpOpen("identity", {
|
||||
// identityId,
|
||||
// name: data.identity.name,
|
||||
// role: data.role,
|
||||
// customRole: data.customRole
|
||||
// });
|
||||
handlePopUpOpen("role", {
|
||||
roleId
|
||||
});
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
@@ -161,10 +116,7 @@ export const RolePage = withPermission(
|
||||
: "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={async () => {
|
||||
// handlePopUpOpen("deleteIdentity", {
|
||||
// identityId,
|
||||
// name: data.identity.name
|
||||
// });
|
||||
handlePopUpOpen("deleteOrgRole");
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
@@ -179,84 +131,18 @@ export const RolePage = withPermission(
|
||||
<div className="mr-4 w-96">
|
||||
<RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
|
||||
</div>
|
||||
<RolePermissionsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
|
||||
<RolePermissionsSection roleId={roleId} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
<RolePermissionModal roleId={roleId} popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
{/* <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
<IdentityAuthMethodModal
|
||||
popUp={popUp}
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/>
|
||||
<IdentityTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
<IdentityTokenListModal
|
||||
popUp={popUp}
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/>
|
||||
<IdentityClientSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
|
||||
<IdentityUniversalAuthClientSecretModal
|
||||
popUp={popUp}
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/>
|
||||
<UpgradePlanModal
|
||||
isOpen={popUp.upgradePlan.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
|
||||
text={(popUp.upgradePlan?.data as { description: string })?.description}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.deleteIdentity.isOpen}
|
||||
title={`Are you sure want to delete ${
|
||||
(popUp?.deleteIdentity?.data as { name: string })?.name || ""
|
||||
}?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
|
||||
isOpen={popUp.deleteOrgRole.isOpen}
|
||||
title={`Are you sure want to delete the organization role ${data?.name ?? ""}?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("deleteOrgRole", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={() =>
|
||||
onDeleteIdentitySubmit(
|
||||
(popUp?.deleteIdentity?.data as { identityId: string })?.identityId
|
||||
)
|
||||
}
|
||||
onDeleteApproved={() => onDeleteOrgRoleSubmit()}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.revokeToken.isOpen}
|
||||
title={`Are you sure want to revoke ${
|
||||
(popUp?.revokeToken?.data as { name: string })?.name || ""
|
||||
}?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={() => {
|
||||
const revokeTokenData = popUp?.revokeToken?.data as {
|
||||
identityId: string;
|
||||
tokenId: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
return onRevokeTokenSubmit(revokeTokenData);
|
||||
}}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.revokeClientSecret.isOpen}
|
||||
title={`Are you sure want to delete the client secret ${
|
||||
(popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })
|
||||
?.clientSecretPrefix || ""
|
||||
}************?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("revokeClientSecret", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={() => {
|
||||
const deleteClientSecretData = popUp?.revokeClientSecret?.data as {
|
||||
clientSecretId: string;
|
||||
clientSecretPrefix: string;
|
||||
};
|
||||
|
||||
return onDeleteClientSecretSubmit({
|
||||
clientSecretId: deleteClientSecretData.clientSecretId
|
||||
});
|
||||
}}
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -80,7 +80,9 @@ export const RoleDetailsSection = ({ roleId, handlePopUpOpen }: Props) => {
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-semibold text-mineshaft-300">Description</p>
|
||||
<p className="text-sm text-mineshaft-300">{data.description}</p>
|
||||
<p className="text-sm text-mineshaft-300">
|
||||
{data.description?.length ? data.description : "-"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useRouter } from "next/router";
|
||||
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, useUpdateOrgRole } from "@app/hooks/api";
|
||||
import { useCreateOrgRole, useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
const schema = z
|
||||
@@ -22,19 +22,11 @@ export type FormData = z.infer<typeof schema>;
|
||||
|
||||
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 RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
// const router = useRouter();
|
||||
const router = useRouter();
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
|
||||
@@ -44,10 +36,7 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
|
||||
const { data: role } = useGetOrgRole(orgId, popupData?.roleId ?? "");
|
||||
|
||||
// const { mutateAsync: createMutateAsync } = useCreateIdentity();
|
||||
// const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
|
||||
// const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
|
||||
|
||||
const { mutateAsync: createOrgRole } = useCreateOrgRole();
|
||||
const { mutateAsync: updateOrgRole } = useUpdateOrgRole();
|
||||
|
||||
const {
|
||||
@@ -102,16 +91,18 @@ export const RoleModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
|
||||
handlePopUpToggle("role", false);
|
||||
} else {
|
||||
// TODO: create
|
||||
// create
|
||||
|
||||
// const { id: createdId } = await createMutateAsync({
|
||||
// name,
|
||||
// role: role || undefined,
|
||||
// organizationId: orgId
|
||||
// });
|
||||
const newRole = await createOrgRole({
|
||||
orgId,
|
||||
name,
|
||||
description,
|
||||
slug,
|
||||
permissions: []
|
||||
});
|
||||
|
||||
handlePopUpToggle("role", false);
|
||||
// router.push(`/org/${orgId}/identities/${createdId}`);
|
||||
router.push(`/org/${orgId}/roles/${newRole.id}`);
|
||||
}
|
||||
|
||||
createNotification({
|
||||
|
||||
@@ -1,350 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Select,
|
||||
SelectItem
|
||||
} from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import { useGetOrgRole } from "@app/hooks/api";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
enum Permission {
|
||||
NoAccess = "no-access",
|
||||
ReadOnly = "read-only",
|
||||
FullAccess = "full-acess",
|
||||
Custom = "custom"
|
||||
}
|
||||
|
||||
const generalPermissionSchema = z
|
||||
.object({
|
||||
read: z.boolean().optional(),
|
||||
edit: z.boolean().optional(),
|
||||
delete: z.boolean().optional(),
|
||||
create: z.boolean().optional()
|
||||
})
|
||||
.optional();
|
||||
|
||||
const specificPermissionSchemas = {
|
||||
workspace: z
|
||||
.object({
|
||||
read: z.boolean().optional(),
|
||||
create: z.boolean().optional()
|
||||
})
|
||||
.optional(),
|
||||
member: generalPermissionSchema,
|
||||
groups: generalPermissionSchema,
|
||||
role: generalPermissionSchema,
|
||||
settings: generalPermissionSchema,
|
||||
"service-account": generalPermissionSchema,
|
||||
"incident-contact": generalPermissionSchema,
|
||||
"secret-scanning": generalPermissionSchema,
|
||||
sso: generalPermissionSchema,
|
||||
scim: generalPermissionSchema,
|
||||
ldap: generalPermissionSchema,
|
||||
billing: generalPermissionSchema,
|
||||
identity: generalPermissionSchema
|
||||
};
|
||||
|
||||
// Create a union of all possible keys
|
||||
const permissionsUnion = z.union([
|
||||
z.object({ workspace: specificPermissionSchemas.workspace }),
|
||||
z.object({ member: specificPermissionSchemas.member }),
|
||||
z.object({ groups: specificPermissionSchemas.groups }),
|
||||
z.object({ role: specificPermissionSchemas.role }),
|
||||
z.object({ settings: specificPermissionSchemas.settings }),
|
||||
z.object({ "service-account": specificPermissionSchemas["service-account"] }),
|
||||
z.object({ "incident-contact": specificPermissionSchemas["incident-contact"] }),
|
||||
z.object({ "secret-scanning": specificPermissionSchemas["secret-scanning"] }),
|
||||
z.object({ sso: specificPermissionSchemas.sso }),
|
||||
z.object({ scim: specificPermissionSchemas.scim }),
|
||||
z.object({ ldap: specificPermissionSchemas.ldap }),
|
||||
z.object({ billing: specificPermissionSchemas.billing }),
|
||||
z.object({ identity: specificPermissionSchemas.identity })
|
||||
]);
|
||||
|
||||
const schema = z.object({
|
||||
resource: z.string(), // this is formName
|
||||
action: z.nativeEnum(Permission),
|
||||
permissions: z.record(z.string(), permissionsUnion).optional()
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
type Props = {
|
||||
roleId: string;
|
||||
popUp: UsePopUpState<["rolePermission"]>;
|
||||
handlePopUpToggle: (popUpName: keyof UsePopUpState<["rolePermission"]>, state?: boolean) => void;
|
||||
};
|
||||
|
||||
const SIMPLE_PERMISSION_OPTIONS = [
|
||||
{
|
||||
title: "User management",
|
||||
formName: "member"
|
||||
},
|
||||
{
|
||||
title: "Group management",
|
||||
formName: "groups"
|
||||
},
|
||||
{
|
||||
title: "Machine identity management",
|
||||
formName: "identity"
|
||||
},
|
||||
{
|
||||
title: "Billing & usage",
|
||||
formName: "billing"
|
||||
},
|
||||
{
|
||||
title: "Role management",
|
||||
formName: "role"
|
||||
},
|
||||
{
|
||||
title: "Incident Contacts",
|
||||
formName: "incident-contact"
|
||||
},
|
||||
{
|
||||
title: "Organization profile",
|
||||
formName: "settings"
|
||||
},
|
||||
{
|
||||
title: "Secret Scanning",
|
||||
formName: "secret-scanning"
|
||||
},
|
||||
{
|
||||
title: "SSO",
|
||||
formName: "sso"
|
||||
},
|
||||
{
|
||||
title: "LDAP",
|
||||
formName: "ldap"
|
||||
},
|
||||
{
|
||||
title: "SCIM",
|
||||
formName: "scim"
|
||||
}
|
||||
] as const;
|
||||
|
||||
const PERMISSIONS = [
|
||||
{ action: "read", label: "View" },
|
||||
{ action: "create", label: "Create" },
|
||||
{ action: "edit", label: "Modify" },
|
||||
{ action: "delete", label: "Remove" }
|
||||
] as const;
|
||||
|
||||
const SECRET_SCANNING_PERMISSIONS = [
|
||||
{ action: "read", label: "View risks" },
|
||||
{ action: "create", label: "Add integrations" },
|
||||
{ action: "edit", label: "Edit risk status" },
|
||||
{ action: "delete", label: "Remove integrations" }
|
||||
] as const;
|
||||
|
||||
const INCIDENT_CONTACTS_PERMISSIONS = [
|
||||
{ action: "read", label: "View contacts" },
|
||||
{ action: "create", label: "Add new contacts" },
|
||||
{ action: "edit", label: "Edit contacts" },
|
||||
{ action: "delete", label: "Remove contacts" }
|
||||
] as const;
|
||||
|
||||
const MEMBERS_PERMISSIONS = [
|
||||
{ action: "read", label: "View all members" },
|
||||
{ action: "create", label: "Invite members" },
|
||||
{ action: "edit", label: "Edit members" },
|
||||
{ action: "delete", label: "Remove members" }
|
||||
] as const;
|
||||
|
||||
const BILLING_PERMISSIONS = [
|
||||
{ action: "read", label: "View bills" },
|
||||
{ action: "create", label: "Add payment methods" },
|
||||
{ action: "edit", label: "Edit payments" },
|
||||
{ action: "delete", label: "Remove payments" }
|
||||
] as const;
|
||||
|
||||
const getPermissionList = (option: string) => {
|
||||
switch (option) {
|
||||
case "secret-scanning":
|
||||
return SECRET_SCANNING_PERMISSIONS;
|
||||
case "billing":
|
||||
return BILLING_PERMISSIONS;
|
||||
case "incident-contact":
|
||||
return INCIDENT_CONTACTS_PERMISSIONS;
|
||||
case "member":
|
||||
return MEMBERS_PERMISSIONS;
|
||||
default:
|
||||
return PERMISSIONS;
|
||||
}
|
||||
};
|
||||
|
||||
export const RolePermissionModal = ({ roleId, popUp, handlePopUpToggle }: Props) => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
const { data: role } = useGetOrgRole(orgId, roleId);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
watch
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema)
|
||||
});
|
||||
|
||||
const resource = watch("resource");
|
||||
const action = watch("action");
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
resource: SIMPLE_PERMISSION_OPTIONS[0].formName,
|
||||
action: Permission.NoAccess
|
||||
});
|
||||
|
||||
// TODO: update for existing permission
|
||||
|
||||
// if (role) {
|
||||
// console.log("existing role found: ", role);
|
||||
// reset({
|
||||
// resource: SIMPLE_PERMISSION_OPTIONS[0].formName
|
||||
// });
|
||||
// } else {
|
||||
// console.log("no role found");
|
||||
// reset({
|
||||
// resource: SIMPLE_PERMISSION_OPTIONS[0].formName
|
||||
// });
|
||||
// }
|
||||
}, [role]);
|
||||
|
||||
const onFormSubmit = async () => {
|
||||
try {
|
||||
// TODO: map action to permission array?
|
||||
|
||||
// TODO: add permission to role
|
||||
|
||||
// await addIdentityToWorkspace({
|
||||
// workspaceId,
|
||||
// identityId,
|
||||
// role: role || undefined
|
||||
// });
|
||||
|
||||
createNotification({
|
||||
text: "Successfully added permission to role",
|
||||
type: "success"
|
||||
});
|
||||
|
||||
// reset();
|
||||
// handlePopUpToggle("rolePermission", false);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const error = err as any;
|
||||
const text = error?.response?.data?.message ?? "Failed to add identity to project";
|
||||
|
||||
createNotification({
|
||||
text,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={popUp?.rolePermission?.isOpen}
|
||||
onOpenChange={(isOpen) => {
|
||||
handlePopUpToggle("rolePermission", isOpen);
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
<ModalContent title="Add Permission to Role">
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="resource"
|
||||
defaultValue=""
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl label="Resource" errorText={error?.message} isError={Boolean(error)}>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
{SIMPLE_PERMISSION_OPTIONS.map(({ title, formName }) => (
|
||||
<SelectItem value={formName} key={`resource-${title}`}>
|
||||
{title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="action"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl label="Action" errorText={error?.message} isError={Boolean(error)}>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
<SelectItem value={Permission.NoAccess}>No Access</SelectItem>
|
||||
<SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
|
||||
<SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
|
||||
<SelectItem value={Permission.Custom}>Custom</SelectItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
{action === Permission.Custom && (
|
||||
<div className="mt-8 mb-4 grid grid-cols-3 gap-4">
|
||||
{getPermissionList(watch("resource")).map((p) => {
|
||||
return (
|
||||
<Controller
|
||||
name={`permissions.${resource}.${p.action}`}
|
||||
key={`permissions.${resource}.${p.action}`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
isChecked
|
||||
onCheckedChange={field.onChange}
|
||||
id={`permissions.${resource}.${p.action}`}
|
||||
isDisabled={false}
|
||||
>
|
||||
{p.label}
|
||||
</Checkbox>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-8 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
size="sm"
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
<Button
|
||||
colorSchema="secondary"
|
||||
variant="plain"
|
||||
onClick={() => handlePopUpToggle("rolePermission", false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -3,8 +3,7 @@ import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form"
|
||||
import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Checkbox, IconButton, Select, SelectItem,Td, Tr } from "@app/components/v2";
|
||||
import { Checkbox, IconButton, Select, SelectItem, Td, Tr } from "@app/components/v2";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import { TFormSchema } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
|
||||
|
||||
@@ -63,6 +62,7 @@ type Props = {
|
||||
formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "workspace">;
|
||||
setValue: UseFormSetValue<TFormSchema>;
|
||||
control: Control<TFormSchema>;
|
||||
handleSubmit: () => void;
|
||||
};
|
||||
|
||||
// permission categories
|
||||
@@ -76,7 +76,7 @@ enum Permission {
|
||||
|
||||
// TODO: support for default roles
|
||||
|
||||
export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props) => {
|
||||
export const RolePermissionRow = ({ title, formName, handleSubmit, control, setValue }: Props) => {
|
||||
const [isRowExpanded, setIsRowExpanded] = useToggle();
|
||||
const [isCustom, setIsCustom] = useToggle();
|
||||
|
||||
@@ -111,7 +111,6 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
|
||||
}, []);
|
||||
|
||||
const handlePermissionChange = (val: Permission) => {
|
||||
// TODO: trigger update
|
||||
if (val === Permission.Custom) {
|
||||
setIsRowExpanded.on();
|
||||
setIsCustom.on();
|
||||
@@ -150,12 +149,15 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
|
||||
break;
|
||||
}
|
||||
|
||||
createNotification({ type: "success", text: "Updated permission on role." });
|
||||
handleSubmit();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tr>
|
||||
<Tr
|
||||
className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
|
||||
onClick={() => setIsRowExpanded.toggle()}
|
||||
>
|
||||
<Td>
|
||||
<IconButton
|
||||
ariaLabel="copy icon"
|
||||
@@ -197,7 +199,10 @@ export const RolePermissionRow2 = ({ title, formName, control, setValue }: Props
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
isChecked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
onCheckedChange={(e) => {
|
||||
field.onChange(e);
|
||||
handleSubmit();
|
||||
}}
|
||||
id={`permissions.${formName}.${action}`}
|
||||
>
|
||||
{label}
|
||||
@@ -1,88 +1,18 @@
|
||||
// import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
import { RolePermissionsTable2 } from "./RolePermissionsTable2";
|
||||
import { RolePermissionsTable } from "./RolePermissionsTable";
|
||||
|
||||
type Props = {
|
||||
roleId: string;
|
||||
// handlePopUpOpen: (popUpName: keyof UsePopUpState<["rolePermission"]>, data?: {}) => void;
|
||||
};
|
||||
|
||||
export const RolePermissionsSection = ({
|
||||
roleId
|
||||
}: // handlePopUpOpen
|
||||
Props) => {
|
||||
// const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
|
||||
|
||||
// const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
||||
// "addIdentityToProject",
|
||||
// "removeIdentityFromProject"
|
||||
// ] as const);
|
||||
|
||||
// const onRemoveIdentitySubmit = async (id: string, projectId: string) => {
|
||||
// try {
|
||||
// await deleteMutateAsync({
|
||||
// identityId: id,
|
||||
// workspaceId: projectId
|
||||
// });
|
||||
|
||||
// createNotification({
|
||||
// text: "Successfully removed identity from project",
|
||||
// type: "success"
|
||||
// });
|
||||
|
||||
// handlePopUpClose("removeIdentityFromProject");
|
||||
// } catch (err) {
|
||||
// console.error(err);
|
||||
// const error = err as any;
|
||||
// const text = error?.response?.data?.message ?? "Failed to remove identity from project";
|
||||
|
||||
// createNotification({
|
||||
// text,
|
||||
// type: "error"
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
export const RolePermissionsSection = ({ roleId }: Props) => {
|
||||
return (
|
||||
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
|
||||
<h3 className="text-lg font-semibold text-mineshaft-100">Permissions</h3>
|
||||
{/* <IconButton
|
||||
ariaLabel="copy icon"
|
||||
variant="plain"
|
||||
className="group relative"
|
||||
onClick={() => handlePopUpOpen("rolePermission")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} />
|
||||
</IconButton> */}
|
||||
</div>
|
||||
<div className="py-4">
|
||||
{/* <RolePermissionsTable /> */}
|
||||
<RolePermissionsTable2 roleId={roleId} />
|
||||
{/* <IdentityProjectsTable identityId={identityId} handlePopUpOpen={handlePopUpOpen} /> */}
|
||||
<RolePermissionsTable roleId={roleId} />
|
||||
</div>
|
||||
{/* <DeleteActionModal
|
||||
isOpen={popUp.removeIdentityFromProject.isOpen}
|
||||
title={`Are you sure want to remove ${
|
||||
(popUp?.removeIdentityFromProject?.data as { identityName: string })?.identityName || ""
|
||||
} from ${
|
||||
(popUp?.removeIdentityFromProject?.data as { projectName: string })?.projectName || ""
|
||||
}?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("removeIdentityFromProject", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={() => {
|
||||
const popupData = popUp?.removeIdentityFromProject?.data as {
|
||||
identityId: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
return onRemoveIdentitySubmit(popupData.identityId, popupData.projectId);
|
||||
}}
|
||||
/> */}
|
||||
{/* <IdentityAddToProjectModal
|
||||
identityId={identityId}
|
||||
popUp={popUp}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,124 +1,125 @@
|
||||
import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { OrgPermissionCan } from "@app/components/permissions";
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
// Tooltip,
|
||||
// IconButton,
|
||||
// EmptyState,
|
||||
Table,
|
||||
TableContainer,
|
||||
// TableSkeleton,
|
||||
TBody,
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr} from "@app/components/v2";
|
||||
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
|
||||
// import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
formRolePermission2API,
|
||||
formSchema,
|
||||
rolePermission2Form,
|
||||
TFormSchema
|
||||
} from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
|
||||
|
||||
// import { IdentityProjectRow } from "./IdentityProjectRow";
|
||||
import { RolePermissionRow } from "./RolePermissionRow";
|
||||
|
||||
// type Props = {
|
||||
// identityId: string;
|
||||
// handlePopUpOpen: (
|
||||
// popUpName: keyof UsePopUpState<["removeIdentityFromProject"]>,
|
||||
// data?: {}
|
||||
// ) => void;
|
||||
// };
|
||||
const SIMPLE_PERMISSION_OPTIONS = [
|
||||
{
|
||||
title: "User management",
|
||||
formName: "member"
|
||||
},
|
||||
{
|
||||
title: "Group management",
|
||||
formName: "groups"
|
||||
},
|
||||
{
|
||||
title: "Machine identity management",
|
||||
formName: "identity"
|
||||
},
|
||||
{
|
||||
title: "Billing & usage",
|
||||
formName: "billing"
|
||||
},
|
||||
{
|
||||
title: "Role management",
|
||||
formName: "role"
|
||||
},
|
||||
{
|
||||
title: "Incident Contacts",
|
||||
formName: "incident-contact"
|
||||
},
|
||||
{
|
||||
title: "Organization profile",
|
||||
formName: "settings"
|
||||
},
|
||||
{
|
||||
title: "Secret Scanning",
|
||||
formName: "secret-scanning"
|
||||
},
|
||||
{
|
||||
title: "SSO",
|
||||
formName: "sso"
|
||||
},
|
||||
{
|
||||
title: "LDAP",
|
||||
formName: "ldap"
|
||||
},
|
||||
{
|
||||
title: "SCIM",
|
||||
formName: "scim"
|
||||
}
|
||||
] as const;
|
||||
|
||||
type Props = {
|
||||
roleId: string;
|
||||
};
|
||||
|
||||
export const RolePermissionsTable = ({ roleId }: Props) => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
|
||||
const { data: role } = useGetOrgRole(orgId, roleId);
|
||||
|
||||
const { setValue, control, handleSubmit } = useForm<TFormSchema>({
|
||||
defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
|
||||
const { mutateAsync: updateRole } = useUpdateOrgRole();
|
||||
|
||||
const onSubmit = async (el: TFormSchema) => {
|
||||
try {
|
||||
await updateRole({
|
||||
orgId,
|
||||
id: roleId,
|
||||
...el,
|
||||
permissions: formRolePermission2API(el.permissions)
|
||||
});
|
||||
createNotification({ type: "success", text: "Successfully updated role" });
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
createNotification({ type: "error", text: "Failed to update role" });
|
||||
}
|
||||
};
|
||||
|
||||
export const RolePermissionsTable = () => {
|
||||
// const { data: projectMemberships, isLoading } = useGetIdentityProjectMemberships(identityId);
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Resource</Th>
|
||||
<Th>Allowed Actions</Th>
|
||||
<Th className="w-5" />
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
<Tr>
|
||||
<Td>Identity</Td>
|
||||
<Td>Create/Read</Td>
|
||||
<Td>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-lg">
|
||||
<div className="hover:text-primary-400 data-[state=open]:text-primary-400">
|
||||
<FontAwesomeIcon size="sm" icon={faEllipsis} />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// TODO
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
Edit Permission
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
<OrgPermissionCan
|
||||
I={OrgPermissionActions.Edit}
|
||||
a={OrgPermissionSubjects.Identity}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
className={twMerge(
|
||||
isAllowed
|
||||
? "hover:!bg-red-500 hover:!text-white"
|
||||
: "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// handlePopUpOpen("deleteIdentity", {
|
||||
// identityId: id,
|
||||
// name
|
||||
// });
|
||||
}}
|
||||
disabled={!isAllowed}
|
||||
>
|
||||
Delete Permission
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Td>
|
||||
</Tr>
|
||||
{/* <TableSkeleton columns={3} innerKey="role-permissions" /> */}
|
||||
{/* {isLoading && <TableSkeleton columns={2} innerKey="identity-project-memberships" />} */}
|
||||
{/* {!isLoading &&
|
||||
projectMemberships?.map((membership) => {
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th className="w-5" />
|
||||
<Th>Resource</Th>
|
||||
<Th>Permission</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{SIMPLE_PERMISSION_OPTIONS.map((permission) => {
|
||||
return (
|
||||
<div key={`membership-${membership.id}`}>Row</div>
|
||||
<IdentityProjectRow
|
||||
key={`identity-project-membership-${membership.id}`}
|
||||
membership={membership}
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
<RolePermissionRow
|
||||
title={permission.title}
|
||||
formName={permission.formName}
|
||||
control={control}
|
||||
setValue={setValue}
|
||||
handleSubmit={handleSubmit(onSubmit)}
|
||||
key={`org-role-${roleId}-permission-${permission.formName}`}
|
||||
/>
|
||||
);
|
||||
})} */}
|
||||
</TBody>
|
||||
</Table>
|
||||
{/* <EmptyState title="This role does not have any permissions on it" icon={faShield} /> */}
|
||||
{/* {!isLoading && !projectMemberships?.length && (
|
||||
<EmptyState title="This identity has not been assigned to any projects" icon={faKey} />
|
||||
)} */}
|
||||
})}
|
||||
</TBody>
|
||||
</Table>
|
||||
</form>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
|
||||
import { Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
|
||||
import { useOrganization } from "@app/context";
|
||||
import { useGetOrgRole } from "@app/hooks/api";
|
||||
// TODO: consider moving this out
|
||||
import {
|
||||
formSchema,
|
||||
rolePermission2Form,
|
||||
TFormSchema} from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils";
|
||||
|
||||
import { RolePermissionRow2 } from "./RolePermissionRow2";
|
||||
|
||||
const SIMPLE_PERMISSION_OPTIONS = [
|
||||
{
|
||||
title: "User management",
|
||||
formName: "member"
|
||||
},
|
||||
{
|
||||
title: "Group management",
|
||||
formName: "groups"
|
||||
},
|
||||
{
|
||||
title: "Machine identity management",
|
||||
formName: "identity"
|
||||
},
|
||||
{
|
||||
title: "Billing & usage",
|
||||
formName: "billing"
|
||||
},
|
||||
{
|
||||
title: "Role management",
|
||||
formName: "role"
|
||||
},
|
||||
{
|
||||
title: "Incident Contacts",
|
||||
formName: "incident-contact"
|
||||
},
|
||||
{
|
||||
title: "Organization profile",
|
||||
formName: "settings"
|
||||
},
|
||||
{
|
||||
title: "Secret Scanning",
|
||||
formName: "secret-scanning"
|
||||
},
|
||||
{
|
||||
title: "SSO",
|
||||
formName: "sso"
|
||||
},
|
||||
{
|
||||
title: "LDAP",
|
||||
formName: "ldap"
|
||||
},
|
||||
{
|
||||
title: "SCIM",
|
||||
formName: "scim"
|
||||
}
|
||||
] as const;
|
||||
|
||||
type Props = {
|
||||
roleId: string;
|
||||
};
|
||||
|
||||
export const RolePermissionsTable2 = ({ roleId }: Props) => {
|
||||
const { currentOrg } = useOrganization();
|
||||
const orgId = currentOrg?.id || "";
|
||||
|
||||
const { data: role } = useGetOrgRole(orgId, roleId);
|
||||
|
||||
const { setValue, control } = useForm<TFormSchema>({
|
||||
defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th className="w-5" />
|
||||
<Th>Resource</Th>
|
||||
<Th>Permission</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{SIMPLE_PERMISSION_OPTIONS.map((permission) => {
|
||||
return (
|
||||
<RolePermissionRow2
|
||||
title={permission.title}
|
||||
formName={permission.formName}
|
||||
control={control}
|
||||
setValue={setValue}
|
||||
key={`org-role-${roleId}-permission-${permission.formName}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +1,3 @@
|
||||
export { RoleDetailsSection } from "./RoleDetailsSection";
|
||||
export { RoleModal } from "./RoleModal";
|
||||
export { RolePermissionModal } from "./RolePermissionModal";
|
||||
export { RolePermissionsSection } from "./RolePermissionsSection";
|
||||
|
||||
Reference in New Issue
Block a user