parent
aac3168c80
commit
520a553ea1
@ -0,0 +1,205 @@
|
|||||||
|
import { AbilityBuilder, MongoAbility, RawRuleOf, createMongoAbility } from "@casl/ability";
|
||||||
|
import { Membership } from "../models";
|
||||||
|
import { IRole } from "../models/role";
|
||||||
|
import { BadRequestError, UnauthorizedRequestError } from "../utils/errors";
|
||||||
|
|
||||||
|
export enum GeneralPermissionActions {
|
||||||
|
Read = "read",
|
||||||
|
Create = "create",
|
||||||
|
Edit = "edit",
|
||||||
|
Delete = "delete"
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ProjectPermission {
|
||||||
|
Role = "role",
|
||||||
|
Member = "member",
|
||||||
|
Settings = "settings",
|
||||||
|
Integrations = "integrations",
|
||||||
|
Webhooks = "webhooks",
|
||||||
|
ServiceTokens = "service-tokens",
|
||||||
|
Environments = "environments",
|
||||||
|
Tags = "tags",
|
||||||
|
AuditLogs = "audit-logs",
|
||||||
|
IpAllowList = "ip-allowlist",
|
||||||
|
Workspace = "workspace",
|
||||||
|
Secrets = "secrets",
|
||||||
|
SecretImports = "secret-imports",
|
||||||
|
Folders = "folders"
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ProjectPermissionSet =
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Secrets]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Folders]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.SecretImports]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Role]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Tags]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Member]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Integrations]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Webhooks]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.AuditLogs]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Environments]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.IpAllowList]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.Settings]
|
||||||
|
| [GeneralPermissionActions, ProjectPermission.ServiceTokens]
|
||||||
|
| [GeneralPermissionActions.Delete, ProjectPermission.Workspace]
|
||||||
|
| [GeneralPermissionActions.Edit, ProjectPermission.Workspace];
|
||||||
|
|
||||||
|
const buildAdminPermission = () => {
|
||||||
|
const { can, build } = new AbilityBuilder<MongoAbility<ProjectPermissionSet>>(createMongoAbility);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Secrets);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Folders);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.SecretImports);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Member);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Member);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Member);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Member);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Role);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Role);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Role);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Role);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Integrations);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Integrations);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Integrations);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Integrations);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Webhooks);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Webhooks);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Webhooks);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Webhooks);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.ServiceTokens);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.ServiceTokens);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.ServiceTokens);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.ServiceTokens);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Settings);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Settings);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Settings);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Settings);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Environments);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Environments);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Environments);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Environments);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Tags);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Tags);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Tags);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Tags);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.AuditLogs);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.AuditLogs);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.AuditLogs);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.AuditLogs);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.IpAllowList);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.IpAllowList);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.IpAllowList);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.IpAllowList);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Workspace);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.IpAllowList);
|
||||||
|
|
||||||
|
return build();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const adminProjectPermissions = buildAdminPermission();
|
||||||
|
|
||||||
|
const buildMemberPermission = () => {
|
||||||
|
const { can, build } = new AbilityBuilder<MongoAbility<ProjectPermissionSet>>(createMongoAbility);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Secrets);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.Folders);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Create, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Edit, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Delete, ProjectPermission.SecretImports);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Member);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Role);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Integrations);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Webhooks);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.ServiceTokens);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Settings);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Environments);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Tags);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.AuditLogs);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.IpAllowList);
|
||||||
|
|
||||||
|
return build();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const memberProjectPermissions = buildMemberPermission();
|
||||||
|
|
||||||
|
const buildViewerPermission = () => {
|
||||||
|
const { can, build } = new AbilityBuilder<MongoAbility<ProjectPermissionSet>>(createMongoAbility);
|
||||||
|
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Secrets);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Folders);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.SecretImports);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Member);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Role);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Integrations);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Webhooks);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.ServiceTokens);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Settings);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Environments);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.Tags);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.AuditLogs);
|
||||||
|
can(GeneralPermissionActions.Read, ProjectPermission.IpAllowList);
|
||||||
|
|
||||||
|
return build();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const viewerProjectPermission = buildViewerPermission();
|
||||||
|
|
||||||
|
export const getUserProjectPermissions = async (userId: string, workspaceId: string) => {
|
||||||
|
// TODO(akhilmhdh): speed this up by pulling from cache later
|
||||||
|
const membership = await Membership.findOne({
|
||||||
|
user: userId,
|
||||||
|
workspace: workspaceId
|
||||||
|
})
|
||||||
|
.populate<{
|
||||||
|
customRole: IRole & { permissions: RawRuleOf<MongoAbility<ProjectPermissionSet>>[] };
|
||||||
|
}>("customRole")
|
||||||
|
.exec();
|
||||||
|
|
||||||
|
console.log(membership, userId, workspaceId);
|
||||||
|
if (!membership || (membership.role === "custom" && !membership.customRole)) {
|
||||||
|
throw UnauthorizedRequestError({ message: "User doesn't belong to organization" });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (membership.role === "admin") return { permission: adminProjectPermissions, membership };
|
||||||
|
if (membership.role === "member") return { permission: memberProjectPermissions, membership };
|
||||||
|
if (membership.role === "viewer") return { permission: memberProjectPermissions, membership };
|
||||||
|
|
||||||
|
if (membership.role === "custom") {
|
||||||
|
const permission = createMongoAbility<ProjectPermissionSet>(membership.customRole.permissions);
|
||||||
|
return { permission, membership };
|
||||||
|
}
|
||||||
|
|
||||||
|
throw BadRequestError({ message: "User role not found" });
|
||||||
|
};
|
@ -0,0 +1,39 @@
|
|||||||
|
import { FunctionComponent, ReactNode } from "react";
|
||||||
|
import { BoundCanProps, Can } from "@casl/react";
|
||||||
|
|
||||||
|
import { TProjectPermission, useProjectPermission } from "@app/context/ProjectPermissionContext";
|
||||||
|
|
||||||
|
import { Tooltip } from "../v2";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
label?: ReactNode;
|
||||||
|
} & BoundCanProps<TProjectPermission>;
|
||||||
|
|
||||||
|
export const ProjectPermissionCan: FunctionComponent<Props> = ({
|
||||||
|
label = "Permission Denied. Kindly contact your org admin",
|
||||||
|
children,
|
||||||
|
passThrough = true,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const permission = useProjectPermission();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Can {...props} passThrough={passThrough} ability={props?.ability || permission}>
|
||||||
|
{(isAllowed, ability) => {
|
||||||
|
// akhilmhdh: This is set as type due to error in casl react type.
|
||||||
|
const finalChild =
|
||||||
|
typeof children === "function"
|
||||||
|
? children(isAllowed, ability as TProjectPermission)
|
||||||
|
: children;
|
||||||
|
|
||||||
|
if (!isAllowed && passThrough) {
|
||||||
|
return <Tooltip content={label}>{finalChild}</Tooltip>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isAllowed) return null;
|
||||||
|
|
||||||
|
return finalChild;
|
||||||
|
}}
|
||||||
|
</Can>
|
||||||
|
);
|
||||||
|
};
|
@ -1 +1,2 @@
|
|||||||
export { OrgPermissionCan } from "./OrgPermissionCan";
|
export { OrgPermissionCan } from "./OrgPermissionCan";
|
||||||
|
export { ProjectPermissionCan } from "./ProjectPermissionCan";
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
export { OrgPermissionProvider, useOrgPermission } from "./OrgPermissionContext";
|
export { OrgPermissionProvider, useOrgPermission } from "./OrgPermissionContext";
|
||||||
export type { TOrgPermission } from "./types";
|
export type { TOrgPermission } from "./types";
|
||||||
export {
|
export { GeneralPermissionActions,OrgPermissionSubjects } from "./types";
|
||||||
OrgGeneralPermissionActions,
|
|
||||||
OrgPermissionSubjects,
|
|
||||||
OrgWorkspacePermissionActions
|
|
||||||
} from "./types";
|
|
||||||
|
@ -0,0 +1,58 @@
|
|||||||
|
import { createContext, ReactNode, useContext } from "react";
|
||||||
|
|
||||||
|
import { useGetUserProjectPermissions } from "@app/hooks/api";
|
||||||
|
|
||||||
|
import { useWorkspace } from "../WorkspaceContext";
|
||||||
|
import { TProjectPermission } from "./types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProjectPermissionContext = createContext<null | TProjectPermission>(null);
|
||||||
|
|
||||||
|
export const ProjectPermissionProvider = ({ children }: Props): JSX.Element => {
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
const workspaceId = currentWorkspace?._id || "";
|
||||||
|
const { data: permission, isLoading } = useGetUserProjectPermissions({ workspaceId });
|
||||||
|
|
||||||
|
if (isLoading && workspaceId) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
|
||||||
|
<img
|
||||||
|
src="/images/loading/loading.gif"
|
||||||
|
height={70}
|
||||||
|
width={120}
|
||||||
|
alt="infisical loading indicator"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!permission && currentWorkspace) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center w-screen h-screen bg-bunker-800">
|
||||||
|
Failed to load user permissions
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!permission) {
|
||||||
|
return <>children</>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ProjectPermissionContext.Provider value={permission}>
|
||||||
|
{children}
|
||||||
|
</ProjectPermissionContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useProjectPermission = () => {
|
||||||
|
const ctx = useContext(ProjectPermissionContext);
|
||||||
|
if (!ctx) {
|
||||||
|
throw new Error("useProjectPermission to be used within <ProjectPermissionContext>");
|
||||||
|
}
|
||||||
|
|
||||||
|
return ctx;
|
||||||
|
};
|
@ -0,0 +1,3 @@
|
|||||||
|
export { ProjectPermissionProvider, useProjectPermission } from "./ProjectPermissionContext";
|
||||||
|
export type { ProjectPermissionSet, TProjectPermission } from "./types";
|
||||||
|
export { ProjectGeneralPermissionActions, ProjectPermissionSubjects } from "./types";
|
@ -0,0 +1,44 @@
|
|||||||
|
import { MongoAbility } from "@casl/ability";
|
||||||
|
|
||||||
|
export enum ProjectGeneralPermissionActions {
|
||||||
|
Read = "read",
|
||||||
|
Create = "create",
|
||||||
|
Edit = "edit",
|
||||||
|
Delete = "delete"
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ProjectPermissionSubjects {
|
||||||
|
Role = "role",
|
||||||
|
Member = "member",
|
||||||
|
Settings = "settings",
|
||||||
|
Integrations = "integrations",
|
||||||
|
Webhooks = "webhooks",
|
||||||
|
ServiceTokens = "service-tokens",
|
||||||
|
Environments = "environments",
|
||||||
|
Tags = "tags",
|
||||||
|
AuditLogs = "audit-logs",
|
||||||
|
IpAllowList = "ip-allowlist",
|
||||||
|
Workspace = "workspace",
|
||||||
|
Secrets = "secrets",
|
||||||
|
SecretImports = "secret-imports",
|
||||||
|
Folders = "folders"
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ProjectPermissionSet =
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Secrets]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Folders]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.SecretImports]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Role]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Tags]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Member]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Integrations]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Webhooks]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.AuditLogs]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Environments]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.IpAllowList]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.Settings]
|
||||||
|
| [ProjectGeneralPermissionActions, ProjectPermissionSubjects.ServiceTokens]
|
||||||
|
| [ProjectGeneralPermissionActions.Delete, ProjectPermissionSubjects.Workspace]
|
||||||
|
| [ProjectGeneralPermissionActions.Edit, ProjectPermissionSubjects.Workspace];
|
||||||
|
|
||||||
|
export type TProjectPermission = MongoAbility<ProjectPermissionSet>;
|
@ -1,2 +1,2 @@
|
|||||||
export { useCreateRole, useDeleteRole, useUpdateRole } from "./mutation";
|
export { useCreateRole, useDeleteRole, useUpdateRole } from "./mutation";
|
||||||
export { useGetRoles, useGetUserOrgPermissions } from "./queries";
|
export { useGetRoles, useGetUserOrgPermissions,useGetUserProjectPermissions } from "./queries";
|
||||||
|
@ -1,225 +1,21 @@
|
|||||||
import { useEffect, useState } from "react";
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import Image from "next/image";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import { faMagnifyingGlass, faPlus } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
|
|
||||||
import Button from "@app/components/basic/buttons/Button";
|
import { MembersPage } from "@app/views/Project/MembersPage";
|
||||||
import AddProjectMemberDialog from "@app/components/basic/dialog/AddProjectMemberDialog";
|
|
||||||
import ProjectUsersTable from "@app/components/basic/table/ProjectUsersTable";
|
|
||||||
import guidGenerator from "@app/components/utilities/randomId";
|
|
||||||
import { Input } from "@app/components/v2";
|
|
||||||
import { useOrganization } from "@app/context";
|
|
||||||
import {
|
|
||||||
useAddUserToWorkspace,
|
|
||||||
useGetOrgUsers,
|
|
||||||
useGetUser,
|
|
||||||
useGetWorkspaceUsers} from "@app/hooks/api";
|
|
||||||
import { uploadWsKey } from "@app/hooks/api/keys/queries";
|
|
||||||
|
|
||||||
import {
|
|
||||||
decryptAssymmetric,
|
|
||||||
encryptAssymmetric
|
|
||||||
} from "../../../../components/utilities/cryptography/crypto";
|
|
||||||
|
|
||||||
interface UserProps {
|
|
||||||
firstName: string;
|
|
||||||
lastName: string;
|
|
||||||
email: string;
|
|
||||||
_id: string;
|
|
||||||
publicKey: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MembershipProps {
|
|
||||||
deniedPermissions: any[];
|
|
||||||
user: UserProps;
|
|
||||||
inviteEmail: string;
|
|
||||||
role: string;
|
|
||||||
status: string;
|
|
||||||
_id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// #TODO: Update all the workspaceIds
|
|
||||||
|
|
||||||
export default function Users() {
|
|
||||||
const router = useRouter();
|
|
||||||
const workspaceId = router.query.id as string;
|
|
||||||
|
|
||||||
const { data: user } = useGetUser();
|
|
||||||
const { currentOrg } = useOrganization();
|
|
||||||
const { data: orgUsers } = useGetOrgUsers(currentOrg?._id ?? "");
|
|
||||||
|
|
||||||
const { data: workspaceUsers } = useGetWorkspaceUsers(workspaceId);
|
|
||||||
const { mutateAsync: addUserToWorkspaceMutateAsync } = useAddUserToWorkspace();
|
|
||||||
|
|
||||||
const [isAddOpen, setIsAddOpen] = useState(false);
|
|
||||||
// let [isDeleteOpen, setIsDeleteOpen] = useState(false);
|
|
||||||
// let [userIdToBeDeleted, setUserIdToBeDeleted] = useState(false);
|
|
||||||
const [email, setEmail] = useState("");
|
|
||||||
const [personalEmail, setPersonalEmail] = useState("");
|
|
||||||
const [searchUsers, setSearchUsers] = useState("");
|
|
||||||
|
|
||||||
|
export default function WorkspaceMemberSettings() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
const [userList, setUserList] = useState<any[]>([]);
|
<>
|
||||||
const [isUserListLoading, setIsUserListLoading] = useState(true);
|
|
||||||
const [orgUserList, setOrgUserList] = useState<any[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (user && workspaceUsers && orgUsers) {
|
|
||||||
(async () => {
|
|
||||||
setPersonalEmail(user.email);
|
|
||||||
|
|
||||||
const tempUserList = workspaceUsers.map((membership: MembershipProps) => ({
|
|
||||||
key: guidGenerator(),
|
|
||||||
firstName: membership.user?.firstName,
|
|
||||||
lastName: membership.user?.lastName,
|
|
||||||
email: membership.user?.email === null ? membership.inviteEmail : membership.user?.email,
|
|
||||||
role: membership?.role,
|
|
||||||
status: membership?.status,
|
|
||||||
userId: membership.user?._id,
|
|
||||||
membershipId: membership._id,
|
|
||||||
deniedPermissions: membership.deniedPermissions,
|
|
||||||
publicKey: membership.user?.publicKey
|
|
||||||
}));
|
|
||||||
setUserList(tempUserList);
|
|
||||||
|
|
||||||
setIsUserListLoading(false);
|
|
||||||
|
|
||||||
setOrgUserList(orgUsers);
|
|
||||||
setEmail(
|
|
||||||
orgUsers
|
|
||||||
?.filter((membership: MembershipProps) => membership.status === "accepted")
|
|
||||||
.map((membership: MembershipProps) => membership.user.email)
|
|
||||||
.filter(
|
|
||||||
(usEmail: string) =>
|
|
||||||
!tempUserList?.map((user1: UserProps) => user1.email).includes(usEmail)
|
|
||||||
)[0]
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}, [user, workspaceUsers, orgUsers]);
|
|
||||||
|
|
||||||
const closeAddModal = () => {
|
|
||||||
setIsAddOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openAddModal = () => {
|
|
||||||
setIsAddOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// function closeDeleteModal() {
|
|
||||||
// setIsDeleteOpen(false);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function deleteMembership(userId) {
|
|
||||||
// deleteUserFromWorkspace(userId, router.query.id)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function openDeleteModal() {
|
|
||||||
// setIsDeleteOpen(true);
|
|
||||||
// }
|
|
||||||
|
|
||||||
const submitAddModal = async () => {
|
|
||||||
const result = await addUserToWorkspaceMutateAsync({
|
|
||||||
email,
|
|
||||||
workspaceId
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result?.invitee && result?.latestKey) {
|
|
||||||
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
|
|
||||||
|
|
||||||
// assymmetrically decrypt symmetric key with local private key
|
|
||||||
const key = decryptAssymmetric({
|
|
||||||
ciphertext: result.latestKey.encryptedKey,
|
|
||||||
nonce: result.latestKey.nonce,
|
|
||||||
publicKey: result.latestKey.sender.publicKey,
|
|
||||||
privateKey: PRIVATE_KEY
|
|
||||||
});
|
|
||||||
|
|
||||||
const { ciphertext, nonce } = encryptAssymmetric({
|
|
||||||
plaintext: key,
|
|
||||||
publicKey: result.invitee.publicKey,
|
|
||||||
privateKey: PRIVATE_KEY
|
|
||||||
});
|
|
||||||
|
|
||||||
await uploadWsKey({
|
|
||||||
workspaceId,
|
|
||||||
userId: result.invitee._id,
|
|
||||||
encryptedKey: ciphertext,
|
|
||||||
nonce
|
|
||||||
});
|
|
||||||
}
|
|
||||||
setEmail("");
|
|
||||||
setIsAddOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return userList ? (
|
|
||||||
<div className="flex max-w-7xl mx-auto flex-col justify-start bg-bunker-800 md:h-screen">
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{t("common.head-title", { title: t("settings.members.title") })}</title>
|
<title>{t("common.head-title", { title: t("settings.members.title") })}</title>
|
||||||
<link rel="icon" href="/infisical.ico" />
|
<link rel="icon" href="/infisical.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
|
<MembersPage />
|
||||||
<p className="mr-4 font-semibold text-white">{t("settings.members.title")}</p>
|
</>
|
||||||
</div>
|
|
||||||
<AddProjectMemberDialog
|
|
||||||
isOpen={isAddOpen}
|
|
||||||
closeModal={closeAddModal}
|
|
||||||
submitModal={submitAddModal}
|
|
||||||
email={email}
|
|
||||||
data={orgUserList
|
|
||||||
?.filter((membership: MembershipProps) => membership.status === "accepted")
|
|
||||||
.map((membership: MembershipProps) => membership.user.email)
|
|
||||||
.filter(
|
|
||||||
(orgEmail) => !userList?.map((user1: UserProps) => user1.email).includes(orgEmail)
|
|
||||||
)}
|
|
||||||
setEmail={setEmail}
|
|
||||||
/>
|
|
||||||
{/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
|
|
||||||
<div className="flex w-full flex-row items-start px-6 pb-1">
|
|
||||||
<div className="flex w-full max-w-sm flex flex-row ml-auto">
|
|
||||||
<Input
|
|
||||||
className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
|
|
||||||
placeholder="Search by users..."
|
|
||||||
value={searchUsers}
|
|
||||||
onChange={(e) => setSearchUsers(e.target.value)}
|
|
||||||
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-2 flex min-w-max flex-row items-start justify-start">
|
|
||||||
<Button
|
|
||||||
text={String(t("section.members.add-member"))}
|
|
||||||
onButtonPressed={() => {
|
|
||||||
openAddModal();
|
|
||||||
}}
|
|
||||||
color="mineshaft"
|
|
||||||
size="md"
|
|
||||||
icon={faPlus}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="block overflow-x-auto px-6 pb-6">
|
|
||||||
<ProjectUsersTable
|
|
||||||
userData={userList}
|
|
||||||
changeData={setUserList}
|
|
||||||
myUser={personalEmail}
|
|
||||||
filter={searchUsers}
|
|
||||||
isUserListLoading={isUserListLoading}
|
|
||||||
// onClick={openDeleteModal}
|
|
||||||
// deleteUser={deleteMembership}
|
|
||||||
// setUserIdToBeDeleted={setUserIdToBeDeleted}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="relative z-10 mr-auto ml-2 flex h-full w-10/12 flex-col items-center justify-center bg-bunker-800">
|
|
||||||
<Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Users.requireAuth = true;
|
WorkspaceMemberSettings.requireAuth = true;
|
||||||
|
@ -0,0 +1,58 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
|
||||||
|
import { useWorkspace } from "@app/context";
|
||||||
|
import { useGetRoles } from "@app/hooks/api";
|
||||||
|
import { TRole } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
import { MemberListTab } from "./components/MemberListTab";
|
||||||
|
import { ProjectRoleListTab } from "./components/ProjectRoleListTab";
|
||||||
|
|
||||||
|
enum TabSections {
|
||||||
|
Member = "members",
|
||||||
|
Roles = "roles"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MembersPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
const workspaceId = currentWorkspace?._id || "";
|
||||||
|
const orgId = currentWorkspace?.organization || "";
|
||||||
|
|
||||||
|
const { data: roles, isLoading: isRolesLoading } = useGetRoles({
|
||||||
|
orgId,
|
||||||
|
workspaceId
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
|
||||||
|
<div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
|
||||||
|
<p className="mr-4 mb-4 text-3xl font-semibold text-white">{t("settings.members.title")}</p>
|
||||||
|
<Tabs defaultValue={TabSections.Member}>
|
||||||
|
<TabList>
|
||||||
|
<Tab value={TabSections.Member}>Members</Tab>
|
||||||
|
{process.env.NEXT_PUBLIC_NEW_PERMISSION_FLAG === "true" && (
|
||||||
|
<Tab value={TabSections.Roles}>Roles</Tab>
|
||||||
|
)}
|
||||||
|
</TabList>
|
||||||
|
<TabPanel value={TabSections.Member}>
|
||||||
|
<motion.div
|
||||||
|
key="panel-1"
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
initial={{ opacity: 0, translateX: 30 }}
|
||||||
|
animate={{ opacity: 1, translateX: 0 }}
|
||||||
|
exit={{ opacity: 0, translateX: 30 }}
|
||||||
|
>
|
||||||
|
<MemberListTab roles={roles as TRole<string>[]} />
|
||||||
|
</motion.div>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={TabSections.Roles}>
|
||||||
|
<ProjectRoleListTab roles={roles as TRole<string>[]} isRolesLoading={isRolesLoading} />
|
||||||
|
</TabPanel>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,419 @@
|
|||||||
|
import { useCallback, useMemo, useState } from "react";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||||
|
import { OrgPermissionCan } from "@app/components/permissions";
|
||||||
|
import {
|
||||||
|
decryptAssymmetric,
|
||||||
|
encryptAssymmetric
|
||||||
|
} from "@app/components/utilities/cryptography/crypto";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
DeleteActionModal,
|
||||||
|
EmptyState,
|
||||||
|
FormControl,
|
||||||
|
IconButton,
|
||||||
|
Input,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
Select,
|
||||||
|
SelectItem,
|
||||||
|
Table,
|
||||||
|
TableContainer,
|
||||||
|
TableSkeleton,
|
||||||
|
TBody,
|
||||||
|
Td,
|
||||||
|
Th,
|
||||||
|
THead,
|
||||||
|
Tr,
|
||||||
|
UpgradePlanModal
|
||||||
|
} from "@app/components/v2";
|
||||||
|
import {
|
||||||
|
GeneralPermissionActions,
|
||||||
|
OrgPermissionSubjects,
|
||||||
|
useOrganization,
|
||||||
|
useUser,
|
||||||
|
useWorkspace
|
||||||
|
} from "@app/context";
|
||||||
|
import { usePopUp } from "@app/hooks";
|
||||||
|
import {
|
||||||
|
useAddUserToWs,
|
||||||
|
useDeleteUserFromWorkspace,
|
||||||
|
useGetOrgUsers,
|
||||||
|
useGetUserWsKey,
|
||||||
|
useGetWorkspaceUsers,
|
||||||
|
useUpdateUserWorkspaceRole,
|
||||||
|
useUploadWsKey
|
||||||
|
} from "@app/hooks/api";
|
||||||
|
import { TRole } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
roles?: TRole<string>[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const addMemberFormSchema = z.object({
|
||||||
|
email: z.string().email().trim()
|
||||||
|
});
|
||||||
|
|
||||||
|
type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
|
||||||
|
|
||||||
|
export const MemberListTab = ({ roles = [] }: Props) => {
|
||||||
|
const { createNotification } = useNotificationContext();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const { currentOrg } = useOrganization();
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
const { user } = useUser();
|
||||||
|
|
||||||
|
const userId = user?._id || "";
|
||||||
|
const orgId = currentOrg?._id || "";
|
||||||
|
const workspaceId = currentWorkspace?._id || "";
|
||||||
|
|
||||||
|
const { data: wsKey } = useGetUserWsKey(workspaceId);
|
||||||
|
const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
|
||||||
|
const { data: orgUsers } = useGetOrgUsers(orgId);
|
||||||
|
|
||||||
|
const [searchMemberFilter, setSearchMemberFilter] = useState("");
|
||||||
|
|
||||||
|
const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
|
||||||
|
"addMember",
|
||||||
|
"removeMember",
|
||||||
|
"upgradePlan"
|
||||||
|
] as const);
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
formState: { isSubmitting }
|
||||||
|
} = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
|
||||||
|
|
||||||
|
const { mutateAsync: addUserToWorkspace } = useAddUserToWs();
|
||||||
|
const { mutateAsync: uploadWsKey } = useUploadWsKey();
|
||||||
|
const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
|
||||||
|
const { mutateAsync: updateUserWorkspaceRole } = useUpdateUserWorkspaceRole();
|
||||||
|
|
||||||
|
const onAddMember = async ({ email }: TAddMemberForm) => {
|
||||||
|
if (!currentOrg?._id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await addUserToWorkspace({
|
||||||
|
email,
|
||||||
|
workspaceId
|
||||||
|
});
|
||||||
|
createNotification({
|
||||||
|
text: "Successfully invited user to the organization.",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
createNotification({
|
||||||
|
text: "Failed to invite user to org",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handlePopUpClose("addMember");
|
||||||
|
reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveUser = async () => {
|
||||||
|
const membershipId = (popUp?.removeMember?.data as { id: string })?.id;
|
||||||
|
if (!currentOrg?._id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await removeUserFromWorkspace(membershipId);
|
||||||
|
createNotification({
|
||||||
|
text: "Successfully removed user from workspace",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
createNotification({
|
||||||
|
text: "Failed to remove user from the organization",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handlePopUpClose("removeMember");
|
||||||
|
};
|
||||||
|
|
||||||
|
const isIamOwner = useMemo(
|
||||||
|
() => members?.find(({ user: u }) => userId === u?._id)?.role === "owner",
|
||||||
|
[userId, members]
|
||||||
|
);
|
||||||
|
|
||||||
|
const findRoleFromId = useCallback(
|
||||||
|
(roleId: string) => {
|
||||||
|
return roles.find(({ _id: id }) => id === roleId);
|
||||||
|
},
|
||||||
|
[roles]
|
||||||
|
);
|
||||||
|
|
||||||
|
const onRoleChange = async (membershipId: string, role: string) => {
|
||||||
|
if (!currentOrg?._id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateUserWorkspaceRole({ membershipId, role });
|
||||||
|
createNotification({
|
||||||
|
text: "Successfully updated user role",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
createNotification({
|
||||||
|
text: "Failed to update user role",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterdUsers = useMemo(
|
||||||
|
() =>
|
||||||
|
members?.filter(
|
||||||
|
({ user: u, inviteEmail }) =>
|
||||||
|
u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
|
||||||
|
u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
|
||||||
|
u?.email?.toLowerCase().includes(searchMemberFilter) ||
|
||||||
|
inviteEmail?.includes(searchMemberFilter)
|
||||||
|
),
|
||||||
|
[members, searchMemberFilter]
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredOrgUsers = useMemo(() => {
|
||||||
|
const wsUserEmails = new Map();
|
||||||
|
members?.forEach((member) => {
|
||||||
|
wsUserEmails.set(member.user.email, true);
|
||||||
|
});
|
||||||
|
return (orgUsers || []).filter(
|
||||||
|
({ status, user: u }) => status === "accepted" && !wsUserEmails.has(u.email)
|
||||||
|
);
|
||||||
|
}, [orgUsers, members]);
|
||||||
|
|
||||||
|
const onGrantAccess = async (grantedUserId: string, publicKey: string) => {
|
||||||
|
try {
|
||||||
|
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
|
||||||
|
if (!PRIVATE_KEY || !wsKey) return;
|
||||||
|
|
||||||
|
// assymmetrically decrypt symmetric key with local private key
|
||||||
|
const key = decryptAssymmetric({
|
||||||
|
ciphertext: wsKey.encryptedKey,
|
||||||
|
nonce: wsKey.nonce,
|
||||||
|
publicKey: wsKey.sender.publicKey,
|
||||||
|
privateKey: PRIVATE_KEY
|
||||||
|
});
|
||||||
|
|
||||||
|
const { ciphertext, nonce } = encryptAssymmetric({
|
||||||
|
plaintext: key,
|
||||||
|
publicKey,
|
||||||
|
privateKey: PRIVATE_KEY
|
||||||
|
});
|
||||||
|
|
||||||
|
await uploadWsKey({
|
||||||
|
userId: grantedUserId,
|
||||||
|
nonce,
|
||||||
|
encryptedKey: ciphertext,
|
||||||
|
workspaceId: currentWorkspace?._id || ""
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
createNotification({
|
||||||
|
text: "Failed to grant access to user",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isLoading = isMembersLoading;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="mb-4 flex">
|
||||||
|
<div className="mr-4 flex-1">
|
||||||
|
<Input
|
||||||
|
value={searchMemberFilter}
|
||||||
|
onChange={(e) => setSearchMemberFilter(e.target.value)}
|
||||||
|
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
|
||||||
|
placeholder="Search members..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<OrgPermissionCan I={GeneralPermissionActions.Create} a={OrgPermissionSubjects.Member}>
|
||||||
|
{(isAllowed) => (
|
||||||
|
<Button
|
||||||
|
isDisabled={!isAllowed}
|
||||||
|
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||||
|
onClick={() => handlePopUpOpen("addMember")}
|
||||||
|
>
|
||||||
|
Add Member
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</OrgPermissionCan>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TableContainer>
|
||||||
|
<Table>
|
||||||
|
<THead>
|
||||||
|
<Tr>
|
||||||
|
<Th>Name</Th>
|
||||||
|
<Th>Email</Th>
|
||||||
|
<Th>Role</Th>
|
||||||
|
<Th aria-label="actions" />
|
||||||
|
</Tr>
|
||||||
|
</THead>
|
||||||
|
<TBody>
|
||||||
|
{isLoading && <TableSkeleton columns={4} innerKey="project-members" />}
|
||||||
|
{!isLoading &&
|
||||||
|
filterdUsers?.map(
|
||||||
|
({ user: u, inviteEmail, _id: membershipId, status, customRole, role }) => {
|
||||||
|
const name = u ? `${u.firstName} ${u.lastName}` : "-";
|
||||||
|
const email = u?.email || inviteEmail;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tr key={`membership-${membershipId}`} className="w-full">
|
||||||
|
<Td>{name}</Td>
|
||||||
|
<Td>{email}</Td>
|
||||||
|
<Td>
|
||||||
|
<OrgPermissionCan
|
||||||
|
I={GeneralPermissionActions.Edit}
|
||||||
|
a={OrgPermissionSubjects.Member}
|
||||||
|
>
|
||||||
|
{(isAllowed) => (
|
||||||
|
<>
|
||||||
|
<Select
|
||||||
|
defaultValue={
|
||||||
|
role === "custom" ? findRoleFromId(customRole)?.slug : role
|
||||||
|
}
|
||||||
|
isDisabled={userId === u?._id || !isAllowed}
|
||||||
|
className="w-40 bg-mineshaft-600"
|
||||||
|
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
|
||||||
|
onValueChange={(selectedRole) =>
|
||||||
|
onRoleChange(membershipId, selectedRole)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{roles
|
||||||
|
.filter(({ slug }) =>
|
||||||
|
slug === "owner" ? isIamOwner || role === "owner" : true
|
||||||
|
)
|
||||||
|
.map(({ slug, name: roleName }) => (
|
||||||
|
<SelectItem value={slug} key={`owner-option-${slug}`}>
|
||||||
|
{roleName}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
{status === "completed" && user.email !== email && (
|
||||||
|
<div className="rounded-md border border-mineshaft-700 bg-white/5 text-white duration-200 hover:bg-primary hover:text-black">
|
||||||
|
<Button
|
||||||
|
colorSchema="secondary"
|
||||||
|
isDisabled={!isAllowed}
|
||||||
|
onClick={() => onGrantAccess(u?._id, u?.publicKey)}
|
||||||
|
>
|
||||||
|
Grant Access
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</OrgPermissionCan>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
{userId !== u?._id && (
|
||||||
|
<OrgPermissionCan
|
||||||
|
I={GeneralPermissionActions.Delete}
|
||||||
|
a={OrgPermissionSubjects.Member}
|
||||||
|
>
|
||||||
|
{(isAllowed) => (
|
||||||
|
<IconButton
|
||||||
|
ariaLabel="delete"
|
||||||
|
colorSchema="danger"
|
||||||
|
isDisabled={userId === u?._id || !isAllowed}
|
||||||
|
onClick={() =>
|
||||||
|
handlePopUpOpen("removeMember", { id: membershipId })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</OrgPermissionCan>
|
||||||
|
)}
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</TBody>
|
||||||
|
</Table>
|
||||||
|
{!isLoading && filterdUsers?.length === 0 && (
|
||||||
|
<EmptyState title="No project members found" icon={faUsers} />
|
||||||
|
)}
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
isOpen={popUp?.addMember?.isOpen}
|
||||||
|
onOpenChange={(isOpen) => handlePopUpToggle("addMember", isOpen)}
|
||||||
|
>
|
||||||
|
<ModalContent
|
||||||
|
title={t("section.members.add-dialog.add-member-to-project") as string}
|
||||||
|
subTitle={t("section.members.add-dialog.user-will-email")}
|
||||||
|
>
|
||||||
|
<form onSubmit={handleSubmit(onAddMember)}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
defaultValue={filteredOrgUsers?.[0]?.user?.email}
|
||||||
|
name="email"
|
||||||
|
render={({ field, fieldState: { error } }) => (
|
||||||
|
<FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
|
||||||
|
<Select
|
||||||
|
position="popper"
|
||||||
|
className="w-full"
|
||||||
|
defaultValue={filteredOrgUsers?.[0]?.user?.email}
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
>
|
||||||
|
{filteredOrgUsers.map(({ _id: orgUserId, user: u }) => (
|
||||||
|
<SelectItem value={u?.email} key={`org-membership-join-${orgUserId}`}>
|
||||||
|
{u?.email}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="mt-8 flex items-center">
|
||||||
|
<Button
|
||||||
|
className="mr-4"
|
||||||
|
size="sm"
|
||||||
|
type="submit"
|
||||||
|
isLoading={isSubmitting}
|
||||||
|
isDisabled={isSubmitting}
|
||||||
|
>
|
||||||
|
Add Member
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
colorSchema="secondary"
|
||||||
|
variant="plain"
|
||||||
|
onClick={() => handlePopUpClose("addMember")}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
<DeleteActionModal
|
||||||
|
isOpen={popUp.removeMember.isOpen}
|
||||||
|
deleteKey="remove"
|
||||||
|
title="Do you want to remove this user from the org?"
|
||||||
|
onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
|
||||||
|
onDeleteApproved={handleRemoveUser}
|
||||||
|
/>
|
||||||
|
<UpgradePlanModal
|
||||||
|
isOpen={popUp.upgradePlan.isOpen}
|
||||||
|
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
|
||||||
|
text="You can add custom environments if you switch to Infisical's Team plan."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1 @@
|
|||||||
|
export { MemberListTab } from "./MemberListTab";
|
@ -0,0 +1,45 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
import { usePopUp } from "@app/hooks";
|
||||||
|
import { TRole } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
import { ProjectRoleList } from "./components/ProjectRoleList";
|
||||||
|
import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
roles?: TRole<string>[];
|
||||||
|
isRolesLoading?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ProjectRoleListTab = ({ roles = [], isRolesLoading }: Props) => {
|
||||||
|
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
|
||||||
|
role={popUp.editRole.data as TRole<string>}
|
||||||
|
onGoBack={() => handlePopUpClose("editRole")}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
key="role-list"
|
||||||
|
transition={{ duration: 0.1 }}
|
||||||
|
initial={{ opacity: 0, translateX: -30 }}
|
||||||
|
animate={{ opacity: 1, translateX: 0 }}
|
||||||
|
exit={{ opacity: 0, translateX: -30 }}
|
||||||
|
>
|
||||||
|
<ProjectRoleList
|
||||||
|
roles={roles}
|
||||||
|
isRolesLoading={isRolesLoading}
|
||||||
|
onSelectRole={(role) => handlePopUpOpen("editRole", role)}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,143 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
|
||||||
|
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
DeleteActionModal,
|
||||||
|
IconButton,
|
||||||
|
Input,
|
||||||
|
Table,
|
||||||
|
TableContainer,
|
||||||
|
TableSkeleton,
|
||||||
|
TBody,
|
||||||
|
Td,
|
||||||
|
Th,
|
||||||
|
THead,
|
||||||
|
Tooltip,
|
||||||
|
Tr
|
||||||
|
} from "@app/components/v2";
|
||||||
|
import { useOrganization, useWorkspace } from "@app/context";
|
||||||
|
import { usePopUp } from "@app/hooks";
|
||||||
|
import { useDeleteRole } from "@app/hooks/api";
|
||||||
|
import { TRole } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isRolesLoading?: boolean;
|
||||||
|
roles?: TRole<string>[];
|
||||||
|
onSelectRole: (role?: TRole<string>) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
|
||||||
|
const [searchRoles, setSearchRoles] = useState("");
|
||||||
|
const { currentOrg } = useOrganization();
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
const orgId = currentOrg?._id || "";
|
||||||
|
const workspaceId = currentWorkspace?._id || "";
|
||||||
|
|
||||||
|
const { createNotification } = useNotificationContext();
|
||||||
|
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
|
||||||
|
|
||||||
|
const { mutateAsync: deleteRole } = useDeleteRole();
|
||||||
|
|
||||||
|
const handleRoleDelete = async () => {
|
||||||
|
const { _id: id } = popUp?.deleteRole?.data as TRole<string>;
|
||||||
|
try {
|
||||||
|
await deleteRole({
|
||||||
|
orgId,
|
||||||
|
workspaceId,
|
||||||
|
id
|
||||||
|
});
|
||||||
|
createNotification({ type: "success", text: "Successfully removed the role" });
|
||||||
|
handlePopUpClose("deleteRole");
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
createNotification({ type: "error", text: "Failed to create role" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="mb-4 flex">
|
||||||
|
<div className="mr-4 flex-1">
|
||||||
|
<Input
|
||||||
|
value={searchRoles}
|
||||||
|
onChange={(e) => setSearchRoles(e.target.value)}
|
||||||
|
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
|
||||||
|
placeholder="Search roles..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button leftIcon={<FontAwesomeIcon icon={faPlus} />} onClick={() => onSelectRole()}>
|
||||||
|
Add Role
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TableContainer>
|
||||||
|
<Table>
|
||||||
|
<THead>
|
||||||
|
<Tr>
|
||||||
|
<Th>Name</Th>
|
||||||
|
<Th>Slug</Th>
|
||||||
|
<Th>Created At</Th>
|
||||||
|
<Th aria-label="actions" />
|
||||||
|
</Tr>
|
||||||
|
</THead>
|
||||||
|
<TBody>
|
||||||
|
{isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
|
||||||
|
{roles?.map((role) => {
|
||||||
|
const { _id: id, name, createdAt, slug } = role;
|
||||||
|
const isNonMutatable = ["owner", "admin", "member"].includes(slug);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tr key={`role-list-${id}`}>
|
||||||
|
<Td>{name}</Td>
|
||||||
|
<Td>{slug}</Td>
|
||||||
|
<Td>
|
||||||
|
{createdAt ? format(new Date(createdAt), "yyyy-MM-dd, hh:mm aaa") : "-"}
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<div className="flex space-x-2 items-center">
|
||||||
|
<Tooltip content="Edit">
|
||||||
|
<IconButton
|
||||||
|
ariaLabel="edit"
|
||||||
|
onClick={() => onSelectRole(role)}
|
||||||
|
variant="plain"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faEdit} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip
|
||||||
|
content={isNonMutatable ? "Reserved roles are non-removable" : "Delete"}
|
||||||
|
>
|
||||||
|
<IconButton
|
||||||
|
ariaLabel="delete"
|
||||||
|
onClick={() => handlePopUpOpen("deleteRole", role)}
|
||||||
|
variant="plain"
|
||||||
|
isDisabled={isNonMutatable}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</div>
|
||||||
|
<DeleteActionModal
|
||||||
|
isOpen={popUp.deleteRole.isOpen}
|
||||||
|
title={`Are you sure want to delete ${
|
||||||
|
(popUp?.deleteRole?.data as TRole<string>)?.name || " "
|
||||||
|
} role?`}
|
||||||
|
deleteKey={(popUp?.deleteRole?.data as TRole<string>)?.slug || ""}
|
||||||
|
onClose={() => handlePopUpClose("deleteRole")}
|
||||||
|
onDeleteApproved={handleRoleDelete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1 @@
|
|||||||
|
export { ProjectRoleList } from "./ProjectRoleList";
|
@ -0,0 +1,236 @@
|
|||||||
|
import { useMemo } from "react";
|
||||||
|
import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
|
||||||
|
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Checkbox,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
SelectItem,
|
||||||
|
Table,
|
||||||
|
TableContainer,
|
||||||
|
TBody,
|
||||||
|
Td,
|
||||||
|
Th,
|
||||||
|
THead,
|
||||||
|
Tr
|
||||||
|
} from "@app/components/v2";
|
||||||
|
import { useWorkspace } from "@app/context";
|
||||||
|
|
||||||
|
import { TFormSchema } from "./ProjectRoleModifySection.utils";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
formName: "secrets" | "folders" | "secret-imports";
|
||||||
|
isNonEditable?: boolean;
|
||||||
|
setValue: UseFormSetValue<TFormSchema>;
|
||||||
|
control: Control<TFormSchema>;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
icon: IconProp;
|
||||||
|
};
|
||||||
|
|
||||||
|
enum Permission {
|
||||||
|
NoAccess = "no-access",
|
||||||
|
ReadOnly = "read-only",
|
||||||
|
FullAccess = "full-acess",
|
||||||
|
Custom = "custom"
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MultiEnvProjectPermission = ({
|
||||||
|
isNonEditable,
|
||||||
|
setValue,
|
||||||
|
control,
|
||||||
|
formName,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
icon
|
||||||
|
}: Props) => {
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
|
||||||
|
const environments = currentWorkspace?.environments || [];
|
||||||
|
const customRule = useWatch({
|
||||||
|
control,
|
||||||
|
name: `permissions.${formName}.custom`
|
||||||
|
});
|
||||||
|
const isCustom = Boolean(customRule);
|
||||||
|
const allRule = useWatch({ control, name: `permissions.${formName}.all` });
|
||||||
|
|
||||||
|
const selectedPermissionCategory = useMemo(() => {
|
||||||
|
const { read, delete: del, edit, create } = allRule || {};
|
||||||
|
if (read && del && edit && create) return Permission.FullAccess;
|
||||||
|
if (read) return Permission.ReadOnly;
|
||||||
|
return Permission.NoAccess;
|
||||||
|
}, [allRule]);
|
||||||
|
|
||||||
|
const handlePermissionChange = (val: Permission) => {
|
||||||
|
switch (val) {
|
||||||
|
case Permission.NoAccess:
|
||||||
|
setValue(`permissions.${formName}`, {}, { shouldDirty: true });
|
||||||
|
break;
|
||||||
|
case Permission.FullAccess:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ all: { read: true, edit: true, create: true, delete: true } },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case Permission.ReadOnly:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ all: { read: true, edit: false, create: false, delete: false } },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ custom: { read: false, edit: false, create: false, delete: false } },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
"px-10 py-6 bg-mineshaft-800 rounded-md",
|
||||||
|
(selectedPermissionCategory !== Permission.NoAccess || isCustom) &&
|
||||||
|
"border-l-2 border-primary-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div>
|
||||||
|
<FontAwesomeIcon icon={icon} className="text-4xl" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow flex flex-col">
|
||||||
|
<div className="font-medium mb-1 text-lg">{title}</div>
|
||||||
|
<div className="text-xs font-light">{subtitle}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Select
|
||||||
|
defaultValue={Permission.NoAccess}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
value={isCustom ? Permission.Custom : selectedPermissionCategory}
|
||||||
|
onValueChange={handlePermissionChange}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
initial={false}
|
||||||
|
animate={{ height: isCustom ? "auto" : 0 }}
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
<TableContainer className="border-mineshaft-500 mt-6">
|
||||||
|
<Table>
|
||||||
|
<THead>
|
||||||
|
<Tr>
|
||||||
|
<Th />
|
||||||
|
<Th className="min-w-[8rem]">Secret Path</Th>
|
||||||
|
<Th className="text-center">Read</Th>
|
||||||
|
<Th className="text-center">Create</Th>
|
||||||
|
<Th className="text-center">Edit</Th>
|
||||||
|
<Th className="text-center">Delete</Th>
|
||||||
|
</Tr>
|
||||||
|
</THead>
|
||||||
|
<TBody>
|
||||||
|
{isCustom &&
|
||||||
|
environments.map(({ name, slug }) => (
|
||||||
|
<Tr key={`custom-role-project-secret-${slug}`}>
|
||||||
|
<Td>{name}</Td>
|
||||||
|
<Td>
|
||||||
|
<Controller
|
||||||
|
name={`permissions.${formName}.${slug}.secretPath`}
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Input {...field} className="w-full overflow-ellipsis" />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<Controller
|
||||||
|
name={`permissions.${formName}.${slug}.read`}
|
||||||
|
control={control}
|
||||||
|
defaultValue={false}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<Checkbox
|
||||||
|
isChecked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
id={`permissions.${formName}.${slug}.read`}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<Controller
|
||||||
|
name={`permissions.${formName}.${slug}.create`}
|
||||||
|
control={control}
|
||||||
|
defaultValue={false}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<Checkbox
|
||||||
|
isChecked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
onBlur={field.onBlur}
|
||||||
|
id={`permissions.${formName}.${slug}.modify`}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<Controller
|
||||||
|
name={`permissions.${formName}.${slug}.edit`}
|
||||||
|
control={control}
|
||||||
|
defaultValue={false}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<Checkbox
|
||||||
|
isChecked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
onBlur={field.onBlur}
|
||||||
|
id={`permissions.${formName}.${slug}.modify`}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<Controller
|
||||||
|
defaultValue={false}
|
||||||
|
name={`permissions.${formName}.${slug}.delete`}
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<Checkbox
|
||||||
|
isChecked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
id={`permissions.${formName}.${slug}.delete`}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
))}
|
||||||
|
</TBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,290 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { faElementor } from "@fortawesome/free-brands-svg-icons";
|
||||||
|
import {
|
||||||
|
faAnchorLock,
|
||||||
|
faArrowLeft,
|
||||||
|
faBook,
|
||||||
|
faCog,
|
||||||
|
faFolder,
|
||||||
|
faKey,
|
||||||
|
faLink,
|
||||||
|
faLock,
|
||||||
|
faMagnifyingGlass,
|
||||||
|
faNetworkWired,
|
||||||
|
faPuzzlePiece,
|
||||||
|
faTags,
|
||||||
|
faUser,
|
||||||
|
faUsers
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
|
||||||
|
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||||
|
import { Button, FormControl, Input } from "@app/components/v2";
|
||||||
|
import { useOrganization, useWorkspace } from "@app/context";
|
||||||
|
import { useCreateRole, useUpdateRole } from "@app/hooks/api";
|
||||||
|
import { TRole } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
import { MultiEnvProjectPermission } from "./MultiEnvProjectPermission";
|
||||||
|
import {
|
||||||
|
formRolePermission2API,
|
||||||
|
formSchema,
|
||||||
|
rolePermission2Form,
|
||||||
|
TFormSchema
|
||||||
|
} from "./ProjectRoleModifySection.utils";
|
||||||
|
import { SingleProjectPermission } from "./SingleProjectPermission";
|
||||||
|
|
||||||
|
const SINGLE_PERMISSION_LIST = [
|
||||||
|
{
|
||||||
|
title: "Integrations",
|
||||||
|
subtitle: "Integration management control",
|
||||||
|
icon: faPuzzlePiece,
|
||||||
|
formName: "integrations"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Roles",
|
||||||
|
subtitle: "Role management control",
|
||||||
|
icon: faUsers,
|
||||||
|
formName: "role"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Project Members",
|
||||||
|
subtitle: "Project members management control",
|
||||||
|
icon: faUser,
|
||||||
|
formName: "member"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Webhooks",
|
||||||
|
subtitle: "Webhook management control",
|
||||||
|
icon: faAnchorLock,
|
||||||
|
formName: "webhooks"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Service Tokens",
|
||||||
|
subtitle: "Token management control",
|
||||||
|
icon: faKey,
|
||||||
|
formName: "service-tokens"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Settings",
|
||||||
|
subtitle: "Settings control",
|
||||||
|
icon: faCog,
|
||||||
|
formName: "settings"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Environments",
|
||||||
|
subtitle: "Environment management control",
|
||||||
|
icon: faElementor,
|
||||||
|
formName: "environments"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tags",
|
||||||
|
subtitle: "Tag management control",
|
||||||
|
icon: faTags,
|
||||||
|
formName: "tags"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Audit Logs",
|
||||||
|
subtitle: "Audit log management control",
|
||||||
|
icon: faBook,
|
||||||
|
formName: "audit-logs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "IP Allowlist",
|
||||||
|
subtitle: "IP allowlist management control",
|
||||||
|
icon: faNetworkWired,
|
||||||
|
formName: "ip-allowlist"
|
||||||
|
}
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
role?: TRole<string>;
|
||||||
|
onGoBack: VoidFunction;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
|
||||||
|
const [searchPermission, setSearchPermission] = useState("");
|
||||||
|
|
||||||
|
const isNonEditable = ["owner", "admin", "member"].includes(role?.slug || "");
|
||||||
|
const isNewRole = !role?.slug;
|
||||||
|
|
||||||
|
const { createNotification } = useNotificationContext();
|
||||||
|
const { currentOrg } = useOrganization();
|
||||||
|
const orgId = currentOrg?._id || "";
|
||||||
|
const { currentWorkspace } = useWorkspace();
|
||||||
|
const workspaceId = currentWorkspace?._id || "";
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleSubmit,
|
||||||
|
register,
|
||||||
|
formState: { isSubmitting, isDirty, errors },
|
||||||
|
setValue,
|
||||||
|
control
|
||||||
|
} = useForm<TFormSchema>({
|
||||||
|
defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
|
||||||
|
resolver: zodResolver(formSchema)
|
||||||
|
});
|
||||||
|
const { mutateAsync: createRole } = useCreateRole();
|
||||||
|
const { mutateAsync: updateRole } = useUpdateRole();
|
||||||
|
|
||||||
|
const handleRoleUpdate = async (el: TFormSchema) => {
|
||||||
|
if (!role?._id) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateRole({
|
||||||
|
orgId,
|
||||||
|
id: role?._id,
|
||||||
|
workspaceId,
|
||||||
|
...el,
|
||||||
|
permissions: formRolePermission2API(el.permissions)
|
||||||
|
});
|
||||||
|
createNotification({ type: "success", text: "Successfully updated role" });
|
||||||
|
onGoBack();
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
createNotification({ type: "error", text: "Failed to update role" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = async (el: TFormSchema) => {
|
||||||
|
if (!isNewRole) {
|
||||||
|
await handleRoleUpdate(el);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await createRole({
|
||||||
|
orgId,
|
||||||
|
workspaceId,
|
||||||
|
...el,
|
||||||
|
permissions: formRolePermission2API(el.permissions)
|
||||||
|
});
|
||||||
|
createNotification({ type: "success", text: "Created new role" });
|
||||||
|
onGoBack();
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
createNotification({ type: "error", text: "Failed to create role" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||||
|
<div className="flex justify-between mb-2 items-center">
|
||||||
|
<h1 className="text-xl font-semibold text-mineshaft-100">
|
||||||
|
{isNewRole ? "New" : "Edit"} Role
|
||||||
|
</h1>
|
||||||
|
<Button
|
||||||
|
onClick={onGoBack}
|
||||||
|
variant="outline_bg"
|
||||||
|
leftIcon={<FontAwesomeIcon icon={faArrowLeft} />}
|
||||||
|
>
|
||||||
|
Go back
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="mb-8 text-gray-400">
|
||||||
|
Roles are used to grant access to particular resources in your organization
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col space-y-6">
|
||||||
|
<FormControl
|
||||||
|
label="Name"
|
||||||
|
isRequired
|
||||||
|
className="mb-0"
|
||||||
|
isError={Boolean(errors?.name)}
|
||||||
|
errorText={errors?.name?.message}
|
||||||
|
>
|
||||||
|
<Input {...register("name")} placeholder="Billing Team" isReadOnly={isNonEditable} />
|
||||||
|
</FormControl>
|
||||||
|
<FormControl
|
||||||
|
label="Slug"
|
||||||
|
isRequired
|
||||||
|
isError={Boolean(errors?.slug)}
|
||||||
|
errorText={errors?.slug?.message}
|
||||||
|
>
|
||||||
|
<Input {...register("slug")} placeholder="biller" isReadOnly={isNonEditable} />
|
||||||
|
</FormControl>
|
||||||
|
<FormControl
|
||||||
|
label="Description"
|
||||||
|
helperText="A short description about this role"
|
||||||
|
isError={Boolean(errors?.description)}
|
||||||
|
errorText={errors?.description?.message}
|
||||||
|
>
|
||||||
|
<Input {...register("description")} isReadOnly={isNonEditable} />
|
||||||
|
</FormControl>
|
||||||
|
<div className="flex justify-between items-center pt-4 border-t border-t-mineshaft-800">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-medium">Add Permission</h2>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 max-w-md">
|
||||||
|
<Input
|
||||||
|
value={searchPermission}
|
||||||
|
onChange={(e) => setSearchPermission(e.target.value)}
|
||||||
|
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
|
||||||
|
placeholder="Search permissions..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-4">
|
||||||
|
<MultiEnvProjectPermission
|
||||||
|
isNonEditable={isNonEditable}
|
||||||
|
control={control}
|
||||||
|
setValue={setValue}
|
||||||
|
icon={faLock}
|
||||||
|
title="Secrets"
|
||||||
|
subtitle="Secret management control"
|
||||||
|
formName="secrets"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-4">
|
||||||
|
<MultiEnvProjectPermission
|
||||||
|
isNonEditable={isNonEditable}
|
||||||
|
control={control}
|
||||||
|
setValue={setValue}
|
||||||
|
icon={faFolder}
|
||||||
|
title="Folders"
|
||||||
|
subtitle="Folder management control"
|
||||||
|
formName="folders"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-4">
|
||||||
|
<MultiEnvProjectPermission
|
||||||
|
isNonEditable={isNonEditable}
|
||||||
|
control={control}
|
||||||
|
setValue={setValue}
|
||||||
|
icon={faLink}
|
||||||
|
title="Secret Imports"
|
||||||
|
subtitle="Secret import management control"
|
||||||
|
formName="secret-imports"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{SINGLE_PERMISSION_LIST.map(({ title, subtitle, icon, formName }) => (
|
||||||
|
<div className="flex flex-col space-y-4" key={`permission-${title}`}>
|
||||||
|
<SingleProjectPermission
|
||||||
|
isNonEditable={isNonEditable}
|
||||||
|
control={control}
|
||||||
|
setValue={setValue}
|
||||||
|
icon={icon}
|
||||||
|
title={title}
|
||||||
|
subtitle={subtitle}
|
||||||
|
formName={formName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-4 mt-12">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
isDisabled={isSubmitting || isNonEditable || !isDirty}
|
||||||
|
isLoading={isSubmitting}
|
||||||
|
>
|
||||||
|
{isNewRole ? "Create Role" : "Save Role"}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={onGoBack} variant="outline_bg">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1,171 @@
|
|||||||
|
/* eslint-disable no-param-reassign */
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { TProjectPermission } from "@app/hooks/api/roles/types";
|
||||||
|
|
||||||
|
const generalPermissionSchema = z
|
||||||
|
.object({
|
||||||
|
read: z.boolean().optional(),
|
||||||
|
edit: z.boolean().optional(),
|
||||||
|
delete: z.boolean().optional(),
|
||||||
|
create: z.boolean().optional()
|
||||||
|
})
|
||||||
|
.optional();
|
||||||
|
|
||||||
|
const multiEnvPermissionSchema = z
|
||||||
|
.object({
|
||||||
|
secretPath: z.string().optional(),
|
||||||
|
read: z.boolean().optional(),
|
||||||
|
edit: z.boolean().optional(),
|
||||||
|
delete: z.boolean().optional(),
|
||||||
|
create: z.boolean().optional()
|
||||||
|
})
|
||||||
|
.optional();
|
||||||
|
|
||||||
|
const PERMISSION_ACTIONS = ["read", "create", "edit", "delete"] as const;
|
||||||
|
const MULTI_ENV_KEY = ["secrets", "folders", "secret-imports"] as const;
|
||||||
|
|
||||||
|
export const formSchema = z.object({
|
||||||
|
name: z.string(),
|
||||||
|
description: z.string().optional(),
|
||||||
|
slug: z.string(),
|
||||||
|
permissions: z.object({
|
||||||
|
secrets: z.record(multiEnvPermissionSchema).optional(),
|
||||||
|
folders: z.record(multiEnvPermissionSchema).optional(),
|
||||||
|
"secret-imports": z.record(multiEnvPermissionSchema).optional(),
|
||||||
|
member: generalPermissionSchema,
|
||||||
|
role: generalPermissionSchema,
|
||||||
|
integrations: generalPermissionSchema,
|
||||||
|
webhooks: generalPermissionSchema,
|
||||||
|
"service-tokens": generalPermissionSchema,
|
||||||
|
settings: generalPermissionSchema,
|
||||||
|
environments: generalPermissionSchema,
|
||||||
|
tags: generalPermissionSchema,
|
||||||
|
"audit-logs": generalPermissionSchema,
|
||||||
|
"ip-allowlist": generalPermissionSchema,
|
||||||
|
workspace: z
|
||||||
|
.object({
|
||||||
|
edit: z.boolean().optional(),
|
||||||
|
delete: z.boolean().optional()
|
||||||
|
})
|
||||||
|
.optional()
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
export type TFormSchema = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
const multiEnvApi2Form = (
|
||||||
|
formVal: TFormSchema["permissions"]["secrets"],
|
||||||
|
permission: TProjectPermission
|
||||||
|
) => {
|
||||||
|
const isCustomRule = Boolean(permission?.condition?.slug);
|
||||||
|
// full access
|
||||||
|
if (isCustomRule && formVal && !formVal?.custom) {
|
||||||
|
formVal.custom = { read: true, edit: true, delete: true, create: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
const secretEnv = permission?.condition?.slug || "all";
|
||||||
|
const secretPath = permission?.condition?.secretPath;
|
||||||
|
// initialize
|
||||||
|
if (formVal && !formVal?.[secretEnv]) {
|
||||||
|
formVal[secretEnv] = { read: false, edit: false, create: false, delete: false, secretPath };
|
||||||
|
}
|
||||||
|
formVal![secretEnv]![permission.action] = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// convert role permission to form compatiable data structure
|
||||||
|
export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
|
||||||
|
const formVal: TFormSchema["permissions"] = {
|
||||||
|
secrets: {},
|
||||||
|
folders: {},
|
||||||
|
integrations: {},
|
||||||
|
settings: {},
|
||||||
|
role: {},
|
||||||
|
member: {},
|
||||||
|
"service-tokens": {},
|
||||||
|
workspace: {},
|
||||||
|
environments: {},
|
||||||
|
tags: {},
|
||||||
|
webhooks: {},
|
||||||
|
"audit-logs": {},
|
||||||
|
"ip-allowlist": {},
|
||||||
|
"secret-imports": {}
|
||||||
|
};
|
||||||
|
|
||||||
|
permissions.forEach((permission) => {
|
||||||
|
if (["secrets", "folders", "secret-imports"].includes(permission.subject)) {
|
||||||
|
multiEnvApi2Form(formVal?.secrets, permission);
|
||||||
|
} else {
|
||||||
|
// everything else follows same pattern
|
||||||
|
// formVal[settings][read | write] = true
|
||||||
|
const key = permission.subject as keyof Omit<
|
||||||
|
TFormSchema["permissions"],
|
||||||
|
"secrets" | "workspace"
|
||||||
|
>;
|
||||||
|
formVal[key]![permission.action] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return formVal;
|
||||||
|
};
|
||||||
|
|
||||||
|
const multiEnvForm2Api = (
|
||||||
|
permissions: TProjectPermission[],
|
||||||
|
formVal: TFormSchema["permissions"]["secrets"],
|
||||||
|
subject: (typeof MULTI_ENV_KEY)[number]
|
||||||
|
) => {
|
||||||
|
const isFullAccess = PERMISSION_ACTIONS.every((action) => formVal?.all?.[action]);
|
||||||
|
// if any of them is set in all push it without any condition
|
||||||
|
PERMISSION_ACTIONS.forEach((action) => {
|
||||||
|
if (formVal?.all?.[action]) permissions.push({ action, subject });
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isFullAccess) {
|
||||||
|
Object.keys(formVal || {})
|
||||||
|
.filter((id) => id !== "all" && id !== "custom") // remove all and custom for iter
|
||||||
|
.forEach((slug) => {
|
||||||
|
const actions = Object.keys(formVal?.[slug] || {}) as [
|
||||||
|
"read",
|
||||||
|
"edit",
|
||||||
|
"create",
|
||||||
|
"delete",
|
||||||
|
"secretPath"
|
||||||
|
];
|
||||||
|
actions.forEach((action) => {
|
||||||
|
// if not full access for an action
|
||||||
|
if (!formVal?.all?.[action] && action !== "secretPath" && formVal?.[slug]?.[action]) {
|
||||||
|
permissions.push({
|
||||||
|
action,
|
||||||
|
subject,
|
||||||
|
condition: { slug, secretPath: formVal[slug]?.secretPath }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formRolePermission2API = (formVal: TFormSchema["permissions"]) => {
|
||||||
|
const permissions: TProjectPermission[] = [];
|
||||||
|
MULTI_ENV_KEY.forEach((formName) => {
|
||||||
|
multiEnvForm2Api(permissions, JSON.parse(JSON.stringify(formVal[formName] || {})), formName);
|
||||||
|
});
|
||||||
|
// other than workspace everything else follows same
|
||||||
|
// if in future there is a different follow the above on how workspace is done
|
||||||
|
(Object.keys(formVal) as Array<keyof typeof formVal>)
|
||||||
|
.filter((key) => !["secret-imports", "folders", "secrets"].includes(key))
|
||||||
|
.forEach((rule) => {
|
||||||
|
// all these type annotations are due to Object.keys of ts cannot infer and put it just a string[]
|
||||||
|
// quite annoying i know
|
||||||
|
const actions = Object.keys(formVal[rule] || {}) as Array<
|
||||||
|
keyof z.infer<typeof generalPermissionSchema>
|
||||||
|
>;
|
||||||
|
actions.forEach((action) => {
|
||||||
|
// akhilmhdh: set it as any due to the union type bug i would end up writing an if else with same condition on both side
|
||||||
|
if (formVal[rule]?.[action as keyof typeof formVal.workspace]) {
|
||||||
|
permissions.push({ subject: rule, action } as any);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return permissions;
|
||||||
|
};
|
@ -0,0 +1,171 @@
|
|||||||
|
import { useEffect, useMemo } from "react";
|
||||||
|
import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
|
||||||
|
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
import { Checkbox, Select, SelectItem } from "@app/components/v2";
|
||||||
|
import { useToggle } from "@app/hooks";
|
||||||
|
|
||||||
|
import { TFormSchema } from "./ProjectRoleModifySection.utils";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
formName:
|
||||||
|
| "role"
|
||||||
|
| "member"
|
||||||
|
| "integrations"
|
||||||
|
| "webhooks"
|
||||||
|
| "service-tokens"
|
||||||
|
| "settings"
|
||||||
|
| "environments"
|
||||||
|
| "tags"
|
||||||
|
| "audit-logs"
|
||||||
|
| "ip-allowlist";
|
||||||
|
isNonEditable?: boolean;
|
||||||
|
setValue: UseFormSetValue<TFormSchema>;
|
||||||
|
control: Control<TFormSchema>;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
icon: IconProp;
|
||||||
|
};
|
||||||
|
|
||||||
|
enum Permission {
|
||||||
|
NoAccess = "no-access",
|
||||||
|
ReadOnly = "read-only",
|
||||||
|
FullAccess = "full-acess",
|
||||||
|
Custom = "custom"
|
||||||
|
}
|
||||||
|
|
||||||
|
const PERMISSIONS = [
|
||||||
|
{ action: "read", label: "Read" },
|
||||||
|
{ action: "create", label: "Create" },
|
||||||
|
{ action: "edit", label: "Update" },
|
||||||
|
{ action: "delete", label: "Remove" }
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const SingleProjectPermission = ({
|
||||||
|
isNonEditable,
|
||||||
|
setValue,
|
||||||
|
control,
|
||||||
|
formName,
|
||||||
|
subtitle,
|
||||||
|
title,
|
||||||
|
icon
|
||||||
|
}: Props) => {
|
||||||
|
const rule = useWatch({
|
||||||
|
control,
|
||||||
|
name: `permissions.${formName}`
|
||||||
|
});
|
||||||
|
const [isCustom, setIsCustom] = useToggle();
|
||||||
|
|
||||||
|
const selectedPermissionCategory = useMemo(() => {
|
||||||
|
const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
|
||||||
|
const totalActions = 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;
|
||||||
|
if (score === 1 && rule?.read) return Permission.ReadOnly;
|
||||||
|
|
||||||
|
return Permission.Custom;
|
||||||
|
}, [rule, isCustom]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
|
||||||
|
else setIsCustom.off();
|
||||||
|
}, [selectedPermissionCategory]);
|
||||||
|
|
||||||
|
const handlePermissionChange = (val: Permission) => {
|
||||||
|
if (val === Permission.Custom) setIsCustom.on();
|
||||||
|
else setIsCustom.off();
|
||||||
|
|
||||||
|
switch (val) {
|
||||||
|
case Permission.NoAccess:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ read: false, edit: false, create: false, delete: false },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case Permission.FullAccess:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ read: true, edit: true, create: true, delete: true },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case Permission.ReadOnly:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ read: true, edit: false, create: false, delete: false },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
setValue(
|
||||||
|
`permissions.${formName}`,
|
||||||
|
{ read: false, edit: false, create: false, delete: false },
|
||||||
|
{ shouldDirty: true }
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={twMerge(
|
||||||
|
"px-10 py-6 bg-mineshaft-800 rounded-md",
|
||||||
|
selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div>
|
||||||
|
<FontAwesomeIcon icon={icon} className="text-4xl" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow flex flex-col">
|
||||||
|
<div className="font-medium mb-1 text-lg">{title}</div>
|
||||||
|
<div className="text-xs font-light">{subtitle}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Select
|
||||||
|
defaultValue={Permission.NoAccess}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
value={selectedPermissionCategory}
|
||||||
|
onValueChange={handlePermissionChange}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
initial={false}
|
||||||
|
animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
|
||||||
|
className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
|
||||||
|
>
|
||||||
|
{isCustom &&
|
||||||
|
PERMISSIONS.map(({ action, label }) => (
|
||||||
|
<Controller
|
||||||
|
name={`permissions.${formName}.${action}`}
|
||||||
|
key={`permissions.${formName}.${action}`}
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Checkbox
|
||||||
|
isChecked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
id={`permissions.${formName}.${action}`}
|
||||||
|
isDisabled={isNonEditable}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Checkbox>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
@ -0,0 +1 @@
|
|||||||
|
export { ProjectRoleModifySection } from "./ProjectRoleModifySection";
|
@ -0,0 +1 @@
|
|||||||
|
export { ProjectRoleListTab } from "./ProjectRoleListTab";
|
@ -0,0 +1 @@
|
|||||||
|
export { MembersPage } from "./MembersPage";
|
Loading…
Reference in new issue