awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 19:16:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3193 from Infisical/misc/privilege-management-v2-transition

Browse Source 
misc: privilege management v2 transition
This commit is contained in:
Maidul Islam
2025-03-27 01:43:31 -04:00
committed by GitHub
parent 8e3ac6ca29 73b5ca5b4f
commit 697543e4a2
76 changed files with 3002 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+46 -4
View File
@@ -1,17 +1,30 @@
import { useState } from "react";
import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate, useSearch } from "@tanstack/react-router";
import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { Button, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
import {
OrgPermissionActions,
OrgPermissionGroupActions,
OrgPermissionIdentityActions,
OrgPermissionSubjects,
useOrganization,
useOrgPermission
} from "@app/context";
import { OrgAccessControlTabSections } from "@app/types/org";
import { UpgradePrivilegeSystemModal } from "./components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal";
import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
export const AccessManagementPage = () => {
const { t } = useTranslation();
const { permission } = useOrgPermission();
const { currentOrg } = useOrganization();
const navigate = useNavigate({
from: ROUTE_PATHS.Organization.AccessControlPage.path
});
@@ -21,6 +34,8 @@ export const AccessManagementPage = () => {
structuralSharing: true
});
const [isUpgradePrivilegeSystemModalOpen, setIsUpgradePrivilegeSystemModalOpen] = useState(false);
const updateSelectedTab = (tab: string) => {
navigate({
search: { selectedTab: tab }
@@ -37,13 +52,16 @@ export const AccessManagementPage = () => {
{
key: OrgAccessControlTabSections.Groups,
label: "Groups",
isHidden: permission.cannot(OrgPermissionActions.Read, OrgPermissionSubjects.Groups),
isHidden: permission.cannot(OrgPermissionGroupActions.Read, OrgPermissionSubjects.Groups),
component: OrgGroupsTab
},
{
key: OrgAccessControlTabSections.Identities,
label: "Identities",
isHidden: permission.cannot(OrgPermissionActions.Read, OrgPermissionSubjects.Identity),
isHidden: permission.cannot(
OrgPermissionIdentityActions.Read,
OrgPermissionSubjects.Identity
),
component: OrgIdentityTab
},
{
@@ -64,6 +82,30 @@ export const AccessManagementPage = () => {
title="Organization Access Control"
description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
/>
{!currentOrg.shouldUseNewPrivilegeSystem && (
<div className="mb-4 mt-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
<div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Your organization is using legacy privilege management
</div>
<p className="mb-2 mt-1 text-sm text-bunker-300">
We&apos;ve developed an improved privilege management system to better serve your
security needs. Upgrade to our new permission-based approach that allows you to
explicitly designate who can modify specific access levels, rather than relying on hierarchy comparisons.
</p>
<Button
colorSchema="primary"
className="mt-2 w-fit text-xs"
onClick={() => setIsUpgradePrivilegeSystemModalOpen(true)}
>
Learn More & Upgrade
</Button>
</div>
)}
<UpgradePrivilegeSystemModal
isOpen={isUpgradePrivilegeSystemModalOpen}
onOpenChange={setIsUpgradePrivilegeSystemModalOpen}
/>
<Tabs value={selectedTab} onValueChange={updateSelectedTab}>
<TabList>
{tabSections
frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button, DeleteActionModal } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects, useSubscription } from "@app/context";
import { useDeleteGroup } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
@@ -58,7 +58,7 @@ export const OrgGroupsSection = () => {
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Groups</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Button
colorSchema="primary"
frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
+5 -5
View File
@@ -33,7 +33,7 @@ import {
THead,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { usePagination, useResetPageHelper } from "@app/hooks";
import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -241,7 +241,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
<Td>{slug}</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionGroupActions.Edit}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => {
@@ -289,7 +289,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
Copy Group ID
</DropdownMenuItem>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionGroupActions.Edit}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => (
@@ -315,7 +315,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionGroupActions.Edit}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => (
@@ -339,7 +339,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
I={OrgPermissionGroupActions.Delete}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => (
frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+6 -3
View File
@@ -6,7 +6,7 @@ import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button, DeleteActionModal } from "@app/components/v2";
import {
OrgPermissionActions,
OrgPermissionIdentityActions,
OrgPermissionSubjects,
useOrganization,
useSubscription
@@ -87,7 +87,10 @@ export const IdentitySection = withPermission(
/>
</a>
</div>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Create}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<Button
colorSchema="primary"
@@ -143,5 +146,5 @@ export const IdentitySection = withPermission(
</div>
);
},
{ action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Identity }
{ action: OrgPermissionIdentityActions.Read, subject: OrgPermissionSubjects.Identity }
);
frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+4 -4
View File
@@ -32,7 +32,7 @@ import {
THead,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { usePagination, useResetPageHelper } from "@app/hooks";
import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -207,7 +207,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
<Td>{name}</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => {
@@ -243,7 +243,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="p-1">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
@@ -267,7 +267,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
I={OrgPermissionIdentityActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
+293
View File
@@ -0,0 +1,293 @@
import { useState } 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, Modal, ModalContent } from "@app/components/v2";
import { useOrgPermission } from "@app/context";
import { useUpgradePrivilegeSystem } from "@app/hooks/api";
const formSchema = z.object({
isProjectPrivilegesUpdated: z.literal(true),
isOrgPrivilegesUpdated: z.literal(true),
isInfrastructureUpdated: z.literal(true),
acknowledgesPermanentChange: z.literal(true)
});
type Props = {
isOpen?: boolean;
onOpenChange: (isOpen: boolean) => void;
};
export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) => {
const { membership } = useOrgPermission();
const [step, setStep] = useState<"info" | "upgrade">("info");
const {
handleSubmit,
control,
watch,
formState: { isSubmitting }
} = useForm({ resolver: zodResolver(formSchema) });
const { mutateAsync: upgradePrivilegeSystem } = useUpgradePrivilegeSystem();
const isProjectPrivilegesUpdated = watch("isProjectPrivilegesUpdated");
const isOrgPrivilegesUpdated = watch("isOrgPrivilegesUpdated");
const isInfrastructureUpdated = watch("isInfrastructureUpdated");
const acknowledgesPermanentChange = watch("acknowledgesPermanentChange");
const isAllChecksCompleted =
isProjectPrivilegesUpdated &&
isOrgPrivilegesUpdated &&
isInfrastructureUpdated &&
acknowledgesPermanentChange;
const handlePrivilegeSystemUpgrade = async () => {
try {
await upgradePrivilegeSystem();
createNotification({
text: "Privilege system upgrade completed",
type: "success"
});
onOpenChange(false);
} catch {
createNotification({
text: "Failed to upgrade privilege system",
type: "error"
});
}
};
const handleClose = () => {
onOpenChange(false);
setStep("info");
};
const isAdmin = membership?.role === "admin";
return (
<Modal isOpen={isOpen} onOpenChange={handleClose}>
<ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
{step === "info" ? (
<div className="mb-4">
<p className="mb-4 text-sm text-mineshaft-300">
We&apos;ve developed an improved privilege management system that enhances how access
controls work in your organization.
</p>
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<div className="mb-3">
<div className="mb-3">
<p className="mb-3 text-sm text-mineshaft-300">
<strong>Current system: </strong>
Users with higher privilege levels can modify access for anyone below them. This
rigid hierarchy makes it difficult to implement precise access control policies,
forcing you to either over-grant permissions or create complex workarounds when
specialized roles (like team leads) need to manage their team&apos;s access
without receiving broader administrative powers.
</p>
<p className="text-sm text-mineshaft-300">
<strong>New system:</strong> Users need explicit permission to modify specific
access levels, providing targeted control. After upgrading, you&apos;ll need to
grant the new &apos;Grant Privileges&apos; permission. At the organization
level, this is available for the{" "}
<a
href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-groups"
target="_blank"
rel="noreferrer"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Group
</a>{" "}
and{" "}
<a
href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-identity"
target="_blank"
rel="noreferrer"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Identity
</a>{" "}
subjects while at the project level, this is available for the{" "}
<a
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-member"
target="_blank"
rel="noreferrer"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Member,
</a>{" "}
<a
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-groups"
target="_blank"
rel="noreferrer"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Group,
</a>{" "}
and{" "}
<a
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-identity"
target="_blank"
rel="noreferrer"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Identity
</a>{" "}
subjects.
</p>
</div>
</div>
</div>
<div className="mt-4 flex justify-end">
<Button
onClick={() => setStep("upgrade")}
variant="solid"
colorSchema="primary"
size="md"
className="w-[120px] bg-primary hover:bg-primary-600"
>
Continue
</Button>
</div>
</div>
) : (
<div className="mb-4">
<p className="mb-4 text-sm text-mineshaft-300">
Your existing access control workflows will continue to function. However, actions
that involve modifying privileges or permissions will now use the new permission-based
system, requiring users to have explicit permission to modify given resource.
</p>
<p className="mb-4 text-sm text-mineshaft-300">
This upgrade affects operations like updating roles, managing group memberships, and
modifying privileges across your organization and projects.
</p>
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<p className="mb-4 text-sm text-mineshaft-300">
Once upgraded, your organization <span className="font-bold">cannot</span> revert to
the legacy privilege system. Please ensure you&apos;ve completed all preparations
before proceeding.
</p>
<div className="mb-4">
<p className="mb-3 text-sm font-medium">Required preparation checklist:</p>
<div className="flex flex-col space-y-4">
<Controller
control={control}
name="isProjectPrivilegesUpdated"
defaultValue={false}
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
<Checkbox
containerClassName="items-start"
className="mt-0.5 items-start"
id="is-project-privileges-updated"
indicatorClassName="flex h-full w-full items-center justify-center"
allowMultilineLabel
isChecked={value}
onCheckedChange={onChange}
onBlur={onBlur}
isError={Boolean(error?.message)}
>
I have reviewed project-level privileges and updated them if necessary
</Checkbox>
)}
/>
<Controller
control={control}
name="isOrgPrivilegesUpdated"
defaultValue={false}
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
<Checkbox
containerClassName="items-start"
className="mt-0.5 items-start"
id="is-org-privileges-updated"
indicatorClassName="flex h-full w-full items-center justify-center"
allowMultilineLabel
isChecked={value}
onCheckedChange={onChange}
onBlur={onBlur}
isError={Boolean(error?.message)}
>
I have reviewed organization-level privileges and updated them if necessary
</Checkbox>
)}
/>
<Controller
control={control}
name="isInfrastructureUpdated"
defaultValue={false}
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
<Checkbox
containerClassName="items-start"
className="mt-0.5 items-start"
id="is-infrastructure-updated"
indicatorClassName="flex h-full w-full items-center justify-center"
allowMultilineLabel
isChecked={value}
onCheckedChange={onChange}
onBlur={onBlur}
isError={Boolean(error?.message)}
>
I have checked Terraform configurations and API integrations for
compatibility with the new system
</Checkbox>
)}
/>
<Controller
control={control}
name="acknowledgesPermanentChange"
defaultValue={false}
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
<Checkbox
containerClassName="items-start"
className="mt-0.5 items-start"
id="acknowledges-permanent-change"
indicatorClassName="flex h-full w-full items-center justify-center"
allowMultilineLabel
isChecked={value}
onCheckedChange={onChange}
onBlur={onBlur}
isError={Boolean(error?.message)}
>
I understand that this upgrade is permanent and cannot be reversed
</Checkbox>
)}
/>
</div>
</div>
</div>
<form onSubmit={handleSubmit(handlePrivilegeSystemUpgrade)}>
<div className="mt-6 flex items-center justify-end gap-4">
<button
type="button"
onClick={() => setStep("info")}
className="w-[120px] text-sm text-mineshaft-300 hover:text-mineshaft-200"
>
Cancel
</button>
<Button
type="submit"
variant="solid"
colorSchema="primary"
size="md"
className="w-[120px] bg-primary hover:bg-primary-600"
isDisabled={!isAllChecksCompleted || !isAdmin}
isLoading={isSubmitting}
>
Upgrade
</Button>
</div>
</form>
</div>
)}
</ModalContent>
</Modal>
);
};
frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+10 -4
View File
@@ -18,7 +18,7 @@ import {
Tooltip
} from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
import { useDeleteGroup } from "@app/hooks/api";
import { useGetGroupById } from "@app/hooks/api/groups/queries";
import { usePopUp } from "@app/hooks/usePopUp";
@@ -93,7 +93,10 @@ const Page = () => {
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="p-1">
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan
I={OrgPermissionGroupActions.Edit}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
@@ -113,7 +116,10 @@ const Page = () => {
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan
I={OrgPermissionGroupActions.Delete}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
@@ -179,7 +185,7 @@ export const GroupDetailsByIDPage = () => {
</Helmet>
<OrgPermissionCan
passThrough={false}
I={OrgPermissionActions.Read}
I={OrgPermissionGroupActions.Read}
a={OrgPermissionSubjects.Groups}
>
<Page />
frontend/src/pages/organization/GroupDetailsByIDPage/components/AddGroupMemberModal.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import {
THead,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
import { useDebounce, useResetPageHelper } from "@app/hooks";
import { useAddUserToGroup, useListGroupUsers } from "@app/hooks/api";
import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
@@ -124,7 +124,7 @@ export const AddGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
</Td>
<Td className="flex justify-end">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionGroupActions.Edit}
a={OrgPermissionSubjects.Groups}
>
{(isAllowed) => {
frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupDetailsSection.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OrgPermissionCan } from "@app/components/permissions";
import { IconButton, Spinner, Tooltip } from "@app/components/v2";
import { CopyButton } from "@app/components/v2/CopyButton";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects } from "@app/context";
import { useGetGroupById } from "@app/hooks/api/";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -22,7 +22,7 @@ export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
<div className="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">Group Details</h3>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => {
return (
<Tooltip content="Edit Group">
frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { useOidcManageGroupMembershipsEnabled, useRemoveUserFromGroup } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
@@ -54,7 +54,7 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
<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">Group Members</h3>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Tooltip
className="text-center"
frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ import {
Tooltip,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { usePagination, useResetPageHelper } from "@app/hooks";
import { useListGroupUsers, useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -177,7 +177,7 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
/>
)}
{!groupMemberships?.users.length && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Tooltip
className="text-center"
frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembershipRow.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OrgPermissionCan } from "@app/components/permissions";
import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
import { TGroupUser } from "@app/hooks/api/groups/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -39,7 +39,7 @@ export const GroupMembershipRow = ({
</Tooltip>
</Td>
<Td className="justify-end">
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => {
return (
<Tooltip
frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions";
import { DeleteActionModal, PageHeader } from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { ViewIdentityAuthModal } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal";
@@ -132,7 +132,7 @@ export const IdentityDetailsByIDPage = () => {
</Helmet>
<OrgPermissionCan
passThrough={false}
I={OrgPermissionActions.Read}
I={OrgPermissionIdentityActions.Read}
a={OrgPermissionSubjects.Identity}
>
<Page />
frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityAuthenticationSection.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
import { IdentityAuthMethod, identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -47,7 +47,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
{!Object.values(IdentityAuthMethod).every((method) =>
data.identity.authMethods.includes(method)
) && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
<Button
isDisabled={!isAllowed}
frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityAuthenticationSection/IdentityClientSecrets.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { format } from "date-fns";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button, IconButton, Tooltip } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
import { useTimedReset } from "@app/hooks";
import {
useGetIdentityById,
@@ -118,7 +118,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
</div>
);
})}
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => {
return (
<Button
frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx
+9 -3
View File
@@ -20,7 +20,7 @@ import {
Tag,
Tooltip
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
import { useTimedReset } from "@app/hooks";
import { useGetIdentityById } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -54,7 +54,10 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[120px]" align="end">
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
@@ -75,7 +78,10 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx
+4 -4
View File
@@ -20,7 +20,7 @@ import {
Tooltip,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useRevokeIdentityTokenAuthToken } from "@app/hooks/api";
import { IdentityAccessToken } from "@app/hooks/api/identities/types";
@@ -79,7 +79,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
<div className="col-span-2 mt-3">
<div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Access Tokens</span>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
<Button
size="xs"
@@ -144,7 +144,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
<Td>
<div className="flex items-center gap-2">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
@@ -169,7 +169,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
</OrgPermissionCan>
{!isAccessTokenRevoked && (
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ import {
Tooltip,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useRevokeIdentityUniversalAuthClientSecret } from "@app/hooks/api";
import { ClientSecretData } from "@app/hooks/api/identities/types";
@@ -68,7 +68,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
<div className="col-span-2">
<div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Client Secrets</span>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
<Button
isDisabled={!isAllowed}
@@ -129,7 +129,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
</Td>
<Td>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx
+9 -3
View File
@@ -10,7 +10,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
type Props = {
children: ReactNode;
@@ -36,7 +36,10 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[120px]" align="end">
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Edit}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
isDisabled={!isAllowed}
@@ -47,7 +50,10 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan
I={OrgPermissionIdentityActions.Delete}
a={OrgPermissionSubjects.Identity}
>
{(isAllowed) => (
<DropdownMenuItem
isDisabled={!isAllowed}
frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts
+30 -2
View File
@@ -5,6 +5,8 @@ import { OrgPermissionSubjects } from "@app/context";
import {
OrgGatewayPermissionActions,
OrgPermissionAppConnectionActions,
OrgPermissionGroupActions,
OrgPermissionIdentityActions,
OrgPermissionKmipActions,
OrgPermissionSecretShareAction
} from "@app/context/OrgPermissionContext/types";
@@ -36,6 +38,32 @@ const kmipPermissionSchema = z
})
.optional();
const identityPermissionSchema = z
.object({
[OrgPermissionIdentityActions.Read]: z.boolean().optional(),
[OrgPermissionIdentityActions.Edit]: z.boolean().optional(),
[OrgPermissionIdentityActions.Delete]: z.boolean().optional(),
[OrgPermissionIdentityActions.Create]: z.boolean().optional(),
[OrgPermissionIdentityActions.GrantPrivileges]: z.boolean().optional(),
[OrgPermissionIdentityActions.RevokeAuth]: z.boolean().optional(),
[OrgPermissionIdentityActions.CreateToken]: z.boolean().optional(),
[OrgPermissionIdentityActions.GetToken]: z.boolean().optional(),
[OrgPermissionIdentityActions.DeleteToken]: z.boolean().optional()
})
.optional();
const groupPermissionSchema = z
.object({
[OrgPermissionGroupActions.Read]: z.boolean().optional(),
[OrgPermissionGroupActions.Create]: z.boolean().optional(),
[OrgPermissionGroupActions.Edit]: z.boolean().optional(),
[OrgPermissionGroupActions.Delete]: z.boolean().optional(),
[OrgPermissionGroupActions.GrantPrivileges]: z.boolean().optional(),
[OrgPermissionGroupActions.AddMembers]: z.boolean().optional(),
[OrgPermissionGroupActions.RemoveMembers]: z.boolean().optional()
})
.optional();
const orgGatewayPermissionSchema = z
.object({
[OrgGatewayPermissionActions.ListGateways]: z.boolean().optional(),
@@ -74,7 +102,7 @@ export const formSchema = z.object({
"audit-logs": generalPermissionSchema,
member: generalPermissionSchema,
groups: generalPermissionSchema,
groups: groupPermissionSchema,
role: generalPermissionSchema,
settings: generalPermissionSchema,
"service-account": generalPermissionSchema,
@@ -84,7 +112,7 @@ export const formSchema = z.object({
scim: generalPermissionSchema,
ldap: generalPermissionSchema,
billing: generalPermissionSchema,
identity: generalPermissionSchema,
identity: identityPermissionSchema,
"organization-admin-console": adminConsolePermissionSchmea,
[OrgPermissionSubjects.Kms]: generalPermissionSchema,
[OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,
frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
+207
View File
@@ -0,0 +1,207 @@
import { useEffect, useMemo } from "react";
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, Select, SelectItem, Td, Tr } from "@app/components/v2";
import { OrgPermissionGroupActions } from "@app/context/OrgPermissionContext/types";
import { useToggle } from "@app/hooks";
import { TFormSchema } from "../OrgRoleModifySection.utils";
const PERMISSION_ACTIONS = [
{ action: OrgPermissionGroupActions.Read, label: "Read Groups" },
{ action: OrgPermissionGroupActions.Create, label: "Create Groups" },
{ action: OrgPermissionGroupActions.Edit, label: "Edit Groups" },
{ action: OrgPermissionGroupActions.Delete, label: "Delete Groups" },
{ action: OrgPermissionGroupActions.GrantPrivileges, label: "Grant Privileges" },
{ action: OrgPermissionGroupActions.AddMembers, label: "Add Members" },
{ action: OrgPermissionGroupActions.RemoveMembers, label: "Remove Members" }
] as const;
type Props = {
isEditable: boolean;
setValue: UseFormSetValue<TFormSchema>;
control: Control<TFormSchema>;
};
enum Permission {
NoAccess = "no-access",
ReadOnly = "read-only",
FullAccess = "full-access",
Custom = "custom"
}
export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props) => {
const [isRowExpanded, setIsRowExpanded] = useToggle();
const [isCustom, setIsCustom] = useToggle();
const rule = useWatch({
control,
name: "permissions.groups"
});
const selectedPermissionCategory = useMemo(() => {
const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
const totalActions = PERMISSION_ACTIONS.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]);
useEffect(() => {
const isRowCustom = selectedPermissionCategory === Permission.Custom;
if (isRowCustom) {
setIsRowExpanded.on();
}
}, []);
const handlePermissionChange = (val: Permission) => {
if (val === Permission.Custom) {
setIsRowExpanded.on();
setIsCustom.on();
return;
}
setIsCustom.off();
switch (val) {
case Permission.NoAccess:
setValue(
"permissions.groups",
{
[OrgPermissionGroupActions.Read]: false,
[OrgPermissionGroupActions.Create]: false,
[OrgPermissionGroupActions.Edit]: false,
[OrgPermissionGroupActions.Delete]: false,
[OrgPermissionGroupActions.GrantPrivileges]: false,
[OrgPermissionGroupActions.AddMembers]: false,
[OrgPermissionGroupActions.RemoveMembers]: false
},
{ shouldDirty: true }
);
break;
case Permission.FullAccess:
setValue(
"permissions.groups",
{
[OrgPermissionGroupActions.Read]: true,
[OrgPermissionGroupActions.Create]: true,
[OrgPermissionGroupActions.Edit]: true,
[OrgPermissionGroupActions.Delete]: true,
[OrgPermissionGroupActions.GrantPrivileges]: true,
[OrgPermissionGroupActions.AddMembers]: true,
[OrgPermissionGroupActions.RemoveMembers]: true
},
{ shouldDirty: true }
);
break;
case Permission.ReadOnly:
setValue(
"permissions.groups",
{
[OrgPermissionGroupActions.Read]: true,
[OrgPermissionGroupActions.Edit]: false,
[OrgPermissionGroupActions.Create]: false,
[OrgPermissionGroupActions.Delete]: false,
[OrgPermissionGroupActions.GrantPrivileges]: false,
[OrgPermissionGroupActions.AddMembers]: false,
[OrgPermissionGroupActions.RemoveMembers]: false
},
{ shouldDirty: true }
);
break;
default:
setValue(
"permissions.groups",
{
[OrgPermissionGroupActions.Read]: false,
[OrgPermissionGroupActions.Edit]: false,
[OrgPermissionGroupActions.Create]: false,
[OrgPermissionGroupActions.Delete]: false,
[OrgPermissionGroupActions.GrantPrivileges]: false,
[OrgPermissionGroupActions.AddMembers]: false,
[OrgPermissionGroupActions.RemoveMembers]: false
},
{ shouldDirty: true }
);
break;
}
};
return (
<>
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
onClick={() => setIsRowExpanded.toggle()}
>
<Td>
<FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
</Td>
<Td>Group Management</Td>
<Td>
<Select
value={selectedPermissionCategory}
className="w-40 bg-mineshaft-600"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={handlePermissionChange}
isDisabled={!isEditable}
>
<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>
</Td>
</Tr>
{isRowExpanded && (
<Tr>
<Td
colSpan={3}
className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
>
<div className="grid grid-cols-3 gap-4">
{PERMISSION_ACTIONS.map(({ action, label }) => {
return (
<Controller
name={`permissions.groups.${action}`}
key={`permissions.groups.${action}`}
control={control}
render={({ field }) => (
<Checkbox
isChecked={field.value}
onCheckedChange={(e) => {
if (!isEditable) {
createNotification({
type: "error",
text: "Failed to update default role"
});
return;
}
field.onChange(e);
}}
id={`permissions.groups.${action}`}
>
{label}
</Checkbox>
)}
/>
);
})}
</div>
</Td>
</Tr>
)}
</>
);
};
frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
+217
View File
@@ -0,0 +1,217 @@
import { useEffect, useMemo } from "react";
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, Select, SelectItem, Td, Tr } from "@app/components/v2";
import { OrgPermissionIdentityActions } from "@app/context/OrgPermissionContext/types";
import { useToggle } from "@app/hooks";
import { TFormSchema } from "../OrgRoleModifySection.utils";
const PERMISSION_ACTIONS = [
{ action: OrgPermissionIdentityActions.Read, label: "Read Identities" },
{ action: OrgPermissionIdentityActions.Create, label: "Create Identities" },
{ action: OrgPermissionIdentityActions.Edit, label: "Edit Identities" },
{ action: OrgPermissionIdentityActions.Delete, label: "Delete Identities" },
{ action: OrgPermissionIdentityActions.GrantPrivileges, label: "Grant Privileges" },
{ action: OrgPermissionIdentityActions.RevokeAuth, label: "Revoke Auth" },
{ action: OrgPermissionIdentityActions.CreateToken, label: "Create Token" },
{ action: OrgPermissionIdentityActions.GetToken, label: "Get Token" },
{ action: OrgPermissionIdentityActions.DeleteToken, label: "Delete Token" }
] as const;
type Props = {
isEditable: boolean;
setValue: UseFormSetValue<TFormSchema>;
control: Control<TFormSchema>;
};
enum Permission {
NoAccess = "no-access",
ReadOnly = "read-only",
FullAccess = "full-access",
Custom = "custom"
}
export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Props) => {
const [isRowExpanded, setIsRowExpanded] = useToggle();
const [isCustom, setIsCustom] = useToggle();
const rule = useWatch({
control,
name: "permissions.identity"
});
const selectedPermissionCategory = useMemo(() => {
const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
const totalActions = PERMISSION_ACTIONS.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]);
useEffect(() => {
const isRowCustom = selectedPermissionCategory === Permission.Custom;
if (isRowCustom) {
setIsRowExpanded.on();
}
}, []);
const handlePermissionChange = (val: Permission) => {
if (val === Permission.Custom) {
setIsRowExpanded.on();
setIsCustom.on();
return;
}
setIsCustom.off();
switch (val) {
case Permission.NoAccess:
setValue(
"permissions.identity",
{
[OrgPermissionIdentityActions.Read]: false,
[OrgPermissionIdentityActions.Edit]: false,
[OrgPermissionIdentityActions.Create]: false,
[OrgPermissionIdentityActions.Delete]: false,
[OrgPermissionIdentityActions.GrantPrivileges]: false,
[OrgPermissionIdentityActions.RevokeAuth]: false,
[OrgPermissionIdentityActions.CreateToken]: false,
[OrgPermissionIdentityActions.GetToken]: false,
[OrgPermissionIdentityActions.DeleteToken]: false
},
{ shouldDirty: true }
);
break;
case Permission.FullAccess:
setValue(
"permissions.identity",
{
[OrgPermissionIdentityActions.Read]: true,
[OrgPermissionIdentityActions.Edit]: true,
[OrgPermissionIdentityActions.Create]: true,
[OrgPermissionIdentityActions.Delete]: true,
[OrgPermissionIdentityActions.GrantPrivileges]: true,
[OrgPermissionIdentityActions.RevokeAuth]: true,
[OrgPermissionIdentityActions.CreateToken]: true,
[OrgPermissionIdentityActions.GetToken]: true,
[OrgPermissionIdentityActions.DeleteToken]: true
},
{ shouldDirty: true }
);
break;
case Permission.ReadOnly:
setValue(
"permissions.identity",
{
[OrgPermissionIdentityActions.Read]: true,
[OrgPermissionIdentityActions.Edit]: false,
[OrgPermissionIdentityActions.Create]: false,
[OrgPermissionIdentityActions.Delete]: false,
[OrgPermissionIdentityActions.GrantPrivileges]: false,
[OrgPermissionIdentityActions.RevokeAuth]: false,
[OrgPermissionIdentityActions.CreateToken]: false,
[OrgPermissionIdentityActions.GetToken]: false,
[OrgPermissionIdentityActions.DeleteToken]: false
},
{ shouldDirty: true }
);
break;
default:
setValue(
"permissions.identity",
{
[OrgPermissionIdentityActions.Read]: false,
[OrgPermissionIdentityActions.Edit]: false,
[OrgPermissionIdentityActions.Create]: false,
[OrgPermissionIdentityActions.Delete]: false,
[OrgPermissionIdentityActions.GrantPrivileges]: false,
[OrgPermissionIdentityActions.RevokeAuth]: false,
[OrgPermissionIdentityActions.CreateToken]: false,
[OrgPermissionIdentityActions.GetToken]: false,
[OrgPermissionIdentityActions.DeleteToken]: false
},
{ shouldDirty: true }
);
break;
}
};
return (
<>
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
onClick={() => setIsRowExpanded.toggle()}
>
<Td>
<FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
</Td>
<Td>Machine Identity Management</Td>
<Td>
<Select
value={selectedPermissionCategory}
className="w-40 bg-mineshaft-600"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={handlePermissionChange}
isDisabled={!isEditable}
>
<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>
</Td>
</Tr>
{isRowExpanded && (
<Tr>
<Td
colSpan={3}
className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
>
<div className="grid grid-cols-3 gap-4">
{PERMISSION_ACTIONS.map(({ action, label }) => {
return (
<Controller
name={`permissions.identity.${action}`}
key={`permissions.identity.${action}`}
control={control}
render={({ field }) => (
<Checkbox
isChecked={field.value}
onCheckedChange={(e) => {
if (!isEditable) {
createNotification({
type: "error",
text: "Failed to update default role"
});
return;
}
field.onChange(e);
}}
id={`permissions.identity.${action}`}
>
{label}
</Checkbox>
)}
/>
);
})}
</div>
</Td>
</Tr>
)}
</>
);
};
frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
+12 -8
View File
@@ -15,6 +15,8 @@ import {
} from "../OrgRoleModifySection.utils";
import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
import { OrgPermissionIdentityRow } from "./OrgPermissionIdentityRow";
import { OrgPermissionKmipRow } from "./OrgPermissionKmipRow";
import { OrgPermissionSecretShareRow } from "./OrgPermissionSecretShareRow";
import { OrgRoleWorkspaceRow } from "./OrgRoleWorkspaceRow";
@@ -25,14 +27,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
title: "User Management",
formName: "member"
},
{
title: "Group Management",
formName: "groups"
},
{
title: "Machine Identity Management",
formName: "identity"
},
{
title: "Usage & Billing",
formName: "billing"
@@ -168,6 +162,16 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
/>
);
})}
<OrgPermissionIdentityRow
control={control}
setValue={setValue}
isEditable={isCustomRole}
/>
<OrgPermissionGroupRow
control={control}
setValue={setValue}
isEditable={isCustomRole}
/>
<OrgPermissionAppConnectionRow
control={control}
setValue={setValue}
frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ const Page = withPermission(
<DropdownMenuContent align="end" className="p-1">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Identity}
a={OrgPermissionSubjects.Member}
>
{(isAllowed) => (
<DropdownMenuItem
frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
+2 -2
View File
@@ -82,7 +82,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">User Details</h3>
{userId !== membership.user.id && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Member}>
{(isAllowed) => {
return (
<Tooltip content="Edit Membership">
@@ -196,7 +196,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
(membership.status === "invited" || membership.status === "verified") &&
membership.user.email &&
serverDetails?.emailConfigured && (
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Member}>
{(isAllowed) => {
return (
<Button
frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+56 -63
View File
@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
import { useNavigate, useSearch } from "@tanstack/react-router";
import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { useWorkspace } from "@app/context";
import { ProjectType } from "@app/hooks/api/workspace/types";
import { ProjectAccessControlTabs } from "@app/types/project";
@@ -16,73 +15,67 @@ import {
ServiceTokenTab
} from "./components";
const Page = withProjectPermission(
() => {
const navigate = useNavigate();
const { currentWorkspace } = useWorkspace();
const selectedTab = useSearch({
strict: false,
select: (el) => el.selectedTab
const Page = () => {
const navigate = useNavigate();
const { currentWorkspace } = useWorkspace();
const selectedTab = useSearch({
strict: false,
select: (el) => el.selectedTab
});
const updateSelectedTab = (tab: string) => {
navigate({
to: `/${currentWorkspace.type}/$projectId/access-management` as const,
search: (prev) => ({ ...prev, selectedTab: tab }),
params: {
projectId: currentWorkspace.id
}
});
};
const updateSelectedTab = (tab: string) => {
navigate({
to: `/${currentWorkspace.type}/$projectId/access-management` as const,
search: (prev) => ({ ...prev, selectedTab: tab }),
params: {
projectId: currentWorkspace.id
}
});
};
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Access Control"
description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
/>
<Tabs value={selectedTab} onValueChange={updateSelectedTab}>
<TabList>
<Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
<Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
<Tab value={ProjectAccessControlTabs.Identities}>
<div className="flex items-center">
<p>Machine Identities</p>
</div>
</Tab>
{currentWorkspace?.type === ProjectType.SecretManager && (
<Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
)}
<Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
</TabList>
<TabPanel value={ProjectAccessControlTabs.Member}>
<MembersTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Groups}>
<GroupsTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Identities}>
<IdentityTab />
</TabPanel>
return (
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader
title="Access Control"
description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
/>
<Tabs value={selectedTab} onValueChange={updateSelectedTab}>
<TabList>
<Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
<Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
<Tab value={ProjectAccessControlTabs.Identities}>
<div className="flex items-center">
<p>Machine Identities</p>
</div>
</Tab>
{currentWorkspace?.type === ProjectType.SecretManager && (
<TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
<ServiceTokenTab />
</TabPanel>
<Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
)}
<TabPanel value={ProjectAccessControlTabs.Roles}>
<ProjectRoleListTab />
<Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
</TabList>
<TabPanel value={ProjectAccessControlTabs.Member}>
<MembersTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Groups}>
<GroupsTab />
</TabPanel>
<TabPanel value={ProjectAccessControlTabs.Identities}>
<IdentityTab />
</TabPanel>
{currentWorkspace?.type === ProjectType.SecretManager && (
<TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
<ServiceTokenTab />
</TabPanel>
</Tabs>
</div>
)}
<TabPanel value={ProjectAccessControlTabs.Roles}>
<ProjectRoleListTab />
</TabPanel>
</Tabs>
</div>
);
},
{
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Member
}
);
</div>
);
};
export const AccessControlPage = () => {
const { t } = useTranslation();
frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx
+22 -13
View File
@@ -1,17 +1,26 @@
import { motion } from "framer-motion";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { GroupsSection } from "./components";
export const GroupsTab = () => {
return (
<motion.div
key="panel-groups"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<GroupsSection />
</motion.div>
);
};
export const GroupsTab = withProjectPermission(
() => {
return (
<motion.div
key="panel-groups"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<GroupsSection />
</motion.div>
);
},
{
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Groups
}
);
frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx
+22 -13
View File
@@ -1,17 +1,26 @@
import { motion } from "framer-motion";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { MembersSection } from "./components";
export const MembersTab = () => {
return (
<motion.div
key="panel-project-members"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<MembersSection />
</motion.div>
);
};
export const MembersTab = withProjectPermission(
() => {
return (
<motion.div
key="panel-project-members"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<MembersSection />
</motion.div>
);
},
{
action: ProjectPermissionActions.Read,
subject: ProjectPermissionSub.Member
}
);
frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx
+102 -18
View File
@@ -12,7 +12,10 @@ import {
import {
PermissionConditionOperators,
ProjectPermissionDynamicSecretActions,
ProjectPermissionGroupActions,
ProjectPermissionIdentityActions,
ProjectPermissionKmipActions,
ProjectPermissionMemberActions,
ProjectPermissionSecretActions,
ProjectPermissionSecretSyncActions,
TPermissionCondition,
@@ -71,6 +74,30 @@ const KmipPolicyActionSchema = z.object({
[ProjectPermissionKmipActions.GenerateClientCertificates]: z.boolean().optional()
});
const MemberPolicyActionSchema = z.object({
[ProjectPermissionMemberActions.Read]: z.boolean().optional(),
[ProjectPermissionMemberActions.Create]: z.boolean().optional(),
[ProjectPermissionMemberActions.Edit]: z.boolean().optional(),
[ProjectPermissionMemberActions.Delete]: z.boolean().optional(),
[ProjectPermissionMemberActions.GrantPrivileges]: z.boolean().optional()
});
const IdentityPolicyActionSchema = z.object({
[ProjectPermissionIdentityActions.Read]: z.boolean().optional(),
[ProjectPermissionIdentityActions.Create]: z.boolean().optional(),
[ProjectPermissionIdentityActions.Edit]: z.boolean().optional(),
[ProjectPermissionIdentityActions.Delete]: z.boolean().optional(),
[ProjectPermissionIdentityActions.GrantPrivileges]: z.boolean().optional()
});
const GroupPolicyActionSchema = z.object({
[ProjectPermissionGroupActions.Read]: z.boolean().optional(),
[ProjectPermissionGroupActions.Create]: z.boolean().optional(),
[ProjectPermissionGroupActions.Edit]: z.boolean().optional(),
[ProjectPermissionGroupActions.Delete]: z.boolean().optional(),
[ProjectPermissionGroupActions.GrantPrivileges]: z.boolean().optional()
});
const SecretRollbackPolicyActionSchema = z.object({
read: z.boolean().optional(),
create: z.boolean().optional()
@@ -152,14 +179,14 @@ export const projectRoleFormSchema = z.object({
})
.array()
.default([]),
[ProjectPermissionSub.Identity]: GeneralPolicyActionSchema.extend({
[ProjectPermissionSub.Identity]: IdentityPolicyActionSchema.extend({
inverted: z.boolean().optional(),
conditions: ConditionSchema
})
.array()
.default([]),
[ProjectPermissionSub.Member]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Groups]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Member]: MemberPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Groups]: GroupPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Role]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Integrations]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Webhooks]: GeneralPolicyActionSchema.array().default([]),
@@ -248,9 +275,6 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
ProjectPermissionSub.DynamicSecrets,
ProjectPermissionSub.SecretFolders,
ProjectPermissionSub.SecretImports,
ProjectPermissionSub.Member,
ProjectPermissionSub.Groups,
ProjectPermissionSub.Identity,
ProjectPermissionSub.Role,
ProjectPermissionSub.Integrations,
ProjectPermissionSub.Webhooks,
@@ -432,6 +456,63 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
return;
}
if (subject === ProjectPermissionSub.Member) {
const canRead = action.includes(ProjectPermissionMemberActions.Read);
const canCreate = action.includes(ProjectPermissionMemberActions.Create);
const canEdit = action.includes(ProjectPermissionMemberActions.Edit);
const canDelete = action.includes(ProjectPermissionMemberActions.Delete);
const canGrantPrivileges = action.includes(ProjectPermissionMemberActions.GrantPrivileges);
if (!formVal[subject]) formVal[subject] = [{}];
// from above statement we are sure it won't be undefined
if (canRead) formVal[subject]![0][ProjectPermissionMemberActions.Read] = true;
if (canCreate) formVal[subject]![0][ProjectPermissionMemberActions.Create] = true;
if (canEdit) formVal[subject]![0][ProjectPermissionMemberActions.Edit] = true;
if (canDelete) formVal[subject]![0][ProjectPermissionMemberActions.Delete] = true;
if (canGrantPrivileges)
formVal[subject]![0][ProjectPermissionMemberActions.GrantPrivileges] = true;
return;
}
if (subject === ProjectPermissionSub.Identity) {
const canRead = action.includes(ProjectPermissionIdentityActions.Read);
const canCreate = action.includes(ProjectPermissionIdentityActions.Create);
const canEdit = action.includes(ProjectPermissionIdentityActions.Edit);
const canDelete = action.includes(ProjectPermissionIdentityActions.Delete);
const canGrantPrivileges = action.includes(ProjectPermissionIdentityActions.GrantPrivileges);
if (!formVal[subject]) formVal[subject] = [{ conditions: [] }];
// from above statement we are sure it won't be undefined
if (canRead) formVal[subject]![0][ProjectPermissionIdentityActions.Read] = true;
if (canCreate) formVal[subject]![0][ProjectPermissionIdentityActions.Create] = true;
if (canEdit) formVal[subject]![0][ProjectPermissionIdentityActions.Edit] = true;
if (canDelete) formVal[subject]![0][ProjectPermissionIdentityActions.Delete] = true;
if (canGrantPrivileges)
formVal[subject]![0][ProjectPermissionIdentityActions.GrantPrivileges] = true;
return;
}
if (subject === ProjectPermissionSub.Groups) {
const canRead = action.includes(ProjectPermissionGroupActions.Read);
const canCreate = action.includes(ProjectPermissionGroupActions.Create);
const canEdit = action.includes(ProjectPermissionGroupActions.Edit);
const canDelete = action.includes(ProjectPermissionGroupActions.Delete);
const canGrantPrivileges = action.includes(ProjectPermissionGroupActions.GrantPrivileges);
if (!formVal[subject]) formVal[subject] = [{}];
// from above statement we are sure it won't be undefined
if (canRead) formVal[subject]![0][ProjectPermissionGroupActions.Read] = true;
if (canCreate) formVal[subject]![0][ProjectPermissionGroupActions.Create] = true;
if (canEdit) formVal[subject]![0][ProjectPermissionGroupActions.Edit] = true;
if (canDelete) formVal[subject]![0][ProjectPermissionGroupActions.Delete] = true;
if (canGrantPrivileges)
formVal[subject]![0][ProjectPermissionGroupActions.GrantPrivileges] = true;
return;
}
if (subject === ProjectPermissionSub.SecretSyncs) {
const canRead = action.includes(ProjectPermissionSecretSyncActions.Read);
const canEdit = action.includes(ProjectPermissionSecretSyncActions.Edit);
@@ -637,28 +718,31 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
[ProjectPermissionSub.Member]: {
title: "User Management",
actions: [
{ label: "View all members", value: "read" },
{ label: "Invite members", value: "create" },
{ label: "Edit members", value: "edit" },
{ label: "Remove members", value: "delete" }
{ label: "Read", value: ProjectPermissionMemberActions.Read },
{ label: "Add", value: ProjectPermissionMemberActions.Create },
{ label: "Modify", value: ProjectPermissionMemberActions.Edit },
{ label: "Remove", value: ProjectPermissionMemberActions.Delete },
{ label: "Grant Privileges", value: ProjectPermissionMemberActions.GrantPrivileges }
]
},
[ProjectPermissionSub.Identity]: {
title: "Machine Identity Management",
actions: [
{ label: "Read", value: "read" },
{ label: "Add", value: "create" },
{ label: "Modify", value: "edit" },
{ label: "Remove", value: "delete" }
{ label: "Read", value: ProjectPermissionIdentityActions.Read },
{ label: "Add", value: ProjectPermissionIdentityActions.Create },
{ label: "Modify", value: ProjectPermissionIdentityActions.Edit },
{ label: "Remove", value: ProjectPermissionIdentityActions.Delete },
{ label: "Grant Privileges", value: ProjectPermissionIdentityActions.GrantPrivileges }
]
},
[ProjectPermissionSub.Groups]: {
title: "Group Management",
actions: [
{ label: "Read", value: "read" },
{ label: "Create", value: "create" },
{ label: "Modify", value: "edit" },
{ label: "Remove", value: "delete" }
{ label: "Read", value: ProjectPermissionGroupActions.Read },
{ label: "Create", value: ProjectPermissionGroupActions.Create },
{ label: "Modify", value: ProjectPermissionGroupActions.Edit },
{ label: "Remove", value: ProjectPermissionGroupActions.Delete },
{ label: "Grant Privileges", value: ProjectPermissionGroupActions.GrantPrivileges }
]
},
[ProjectPermissionSub.Webhooks]: {