awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 04:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust OrgRoleTable

Browse Source
This commit is contained in:
Tuan Dang
2024-07-22 19:02:03 +07:00
parent 6ba1012f5b
commit 29d76c1deb
2 changed files with 77 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+24 -29
View File
@@ -110,8 +110,6 @@ export const OrgRoleTable = () => {
<OrgPermissionCan <OrgPermissionCan
I={OrgPermissionActions.Edit} I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Role} a={OrgPermissionSubjects.Role}
renderTooltip
allowedLabel="Edit"
> >
{(isAllowed) => ( {(isAllowed) => (
<DropdownMenuItem <DropdownMenuItem
@@ -121,39 +119,36 @@ export const OrgRoleTable = () => {
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
router.push(`/org/${orgId}/roles/${id}`); router.push(`/org/${orgId}/roles/${id}`);
// onSelectRole(role);
}} }}
disabled={!isAllowed} disabled={!isAllowed}
> >
Edit Role {`${isNonMutatable ? "View" : "Edit"} Role`}
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Role}
renderTooltip
allowedLabel={
isNonMutatable ? "Reserved roles are non-removable" : "Delete"
}
>
{(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("deleteRole", role);
}}
disabled={!isAllowed}
>
Delete Role
</DropdownMenuItem> </DropdownMenuItem>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
{!isNonMutatable && (
<OrgPermissionCan
I={OrgPermissionActions.Delete}
a={OrgPermissionSubjects.Role}
>
{(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("deleteRole", role);
}}
disabled={!isAllowed}
>
Delete Role
</DropdownMenuItem>
)}
</OrgPermissionCan>
)}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</Td> </Td>
frontend/src/views/Org/RolePage/RolePage.tsx
+53 -46
View File
@@ -17,7 +17,7 @@ import {
} from "@app/components/v2"; } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context"; import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { withPermission } from "@app/hoc"; import { withPermission } from "@app/hoc";
import { useDeleteOrgRole,useGetOrgRole } from "@app/hooks/api"; import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp"; import { usePopUp } from "@app/hooks/usePopUp";
import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components"; import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
@@ -64,6 +64,8 @@ export const RolePage = withPermission(
} }
}; };
const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
return ( return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white"> <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && ( {data && (
@@ -81,51 +83,56 @@ export const RolePage = withPermission(
</Button> </Button>
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<p className="text-3xl font-semibold text-white">{data.name}</p> <p className="text-3xl font-semibold text-white">{data.name}</p>
<DropdownMenu> {isCustomRole && (
<DropdownMenuTrigger asChild className="rounded-lg"> <DropdownMenu>
<div className="hover:text-primary-400 data-[state=open]:text-primary-400"> <DropdownMenuTrigger asChild className="rounded-lg">
<Tooltip content="More options"> <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
<FontAwesomeIcon size="sm" icon={faEllipsis} /> <Tooltip content="More options">
</Tooltip> <FontAwesomeIcon size="sm" icon={faEllipsis} />
</div> </Tooltip>
</DropdownMenuTrigger> </div>
<DropdownMenuContent align="start" className="p-1"> </DropdownMenuTrigger>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}> <DropdownMenuContent align="start" className="p-1">
{(isAllowed) => ( <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
<DropdownMenuItem {(isAllowed) => (
className={twMerge( <DropdownMenuItem
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50" className={twMerge(
)} !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
onClick={async () => { )}
handlePopUpOpen("role", { onClick={async () => {
roleId handlePopUpOpen("role", {
}); roleId
}} });
disabled={!isAllowed} }}
> disabled={!isAllowed}
Edit Role >
</DropdownMenuItem> Edit Role
)} </DropdownMenuItem>
</OrgPermissionCan> )}
<OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}> </OrgPermissionCan>
{(isAllowed) => ( <OrgPermissionCan
<DropdownMenuItem I={OrgPermissionActions.Delete}
className={twMerge( a={OrgPermissionSubjects.Role}
isAllowed >
? "hover:!bg-red-500 hover:!text-white" {(isAllowed) => (
: "pointer-events-none cursor-not-allowed opacity-50" <DropdownMenuItem
)} className={twMerge(
onClick={async () => { isAllowed
handlePopUpOpen("deleteOrgRole"); ? "hover:!bg-red-500 hover:!text-white"
}} : "pointer-events-none cursor-not-allowed opacity-50"
disabled={!isAllowed} )}
> onClick={async () => {
Delete Role handlePopUpOpen("deleteOrgRole");
</DropdownMenuItem> }}
)} disabled={!isAllowed}
</OrgPermissionCan> >
</DropdownMenuContent> Delete Role
</DropdownMenu> </DropdownMenuItem>
)}
</OrgPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
)}
</div> </div>
<div className="flex"> <div className="flex">
<div className="mr-4 w-96"> <div className="mr-4 w-96">