github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-09 15:38:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make the model look simpler

Browse Source
This commit is contained in:
Maidul Islam
2025-03-26 21:41:07 -04:00
parent 67a0e5ae68
commit c376add0fa
4 changed files with 221 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
View File

@@ -91,8 +91,7 @@ export const AccessManagementPage = () => {
<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
traditional hierarchy comparisons.
explicitly designate who can modify specific access levels, rather than relying on hierarchy comparisons.
</p>
<Button
colorSchema="primary"

430
frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
View File

@@ -1,8 +1,7 @@
import { Controller, useForm } from "react-hook-form";
import { faCheck, faCircleInfo, faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useState } from "react";
import { createNotification } from "@app/components/notifications";
import { Button, Checkbox, Modal, ModalContent } from "@app/components/v2";
@@ -23,6 +22,7 @@ type Props = {
export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) => {
const { membership } = useOrgPermission();
const [step, setStep] = useState<"info" | "upgrade">("info");
const {
handleSubmit,
@@ -60,225 +60,231 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
}
};
const handleClose = () => {
onOpenChange(false);
setStep("info");
};
const isAdmin = membership?.role === "admin";
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<Modal isOpen={isOpen} onOpenChange={handleClose}>
<ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
<div className="mb-4">
<h4 className="mb-2 text-lg font-semibold">
Introducing Permission-Based Privilege Management
</h4>
<p className="mb-4 leading-7 text-mineshaft-100">
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-2 flex items-start gap-2">
<FontAwesomeIcon icon={faCircleInfo} className="mt-1 text-primary" />
<p className="font-medium">How it works:</p>
</div>
<div className="mb-3 ml-7">
<p className="mb-3">
<strong>Legacy system:</strong> Users with higher privilege levels could 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>
<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;Manage 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"
>
Groups
</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"
>
Groups,
</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 className="mt-3">
<div className="mb-2 flex items-start gap-2">
<FontAwesomeIcon icon={faCheck} className="mt-1 text-primary" />
<p className="font-medium">Benefits:</p>
</div>
<div className="ml-7">
<ul className="list-disc pl-5">
<li>More granular control over who can modify access levels</li>
<li>Improved security through precise permission checks</li>
</ul>
</div>
</div>
</div>
<p className="mb-4 leading-7 text-mineshaft-100">
This upgrade affects operations like updating roles, managing group memberships, and
modifying privileges across your organization and projects.
</p>
</div>
<div className="mt-6 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
<div className="mb-4 flex items-start gap-2">
<FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
<p className="text-xl font-semibold">Upgrade privilege system</p>
</div>
<p className="mx-1 mb-4 leading-7 text-mineshaft-100">
Your existing access control workflows will continue to function. However, actions that
involve changing privileges or permissions will now use the new permission-based system,
requiring users to have explicit permission to modify access levels.
</p>
<p className="mb-6 text-mineshaft-100">
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>
<form onSubmit={handleSubmit(handlePrivilegeSystemUpgrade)}>
{step === "info" ? (
<>
<div className="mb-4">
<p className="mb-3 font-medium">Required preparation checklist:</p>
<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="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>
)}
/>
<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;Manage 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>
<Controller
control={control}
name="isOrgPrivilegesUpdated"
defaultValue={false}
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
<Checkbox
containerClassName="items-start"
className="mt-0.5 items-start"
indicatorClassName="flex h-full w-full items-center justify-center"
allowMultilineLabel
id="is-org-privileges-updated"
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}
rules={{ required: true }}
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)}
>
<span className="font-bold">
I understand that this upgrade is permanent and cannot be reversed
</span>
</Checkbox>
)}
/>
<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>
<Button
type="submit"
isDisabled={!isAdmin || !isAllChecksCompleted}
isLoading={isSubmitting}
className="mt-5 w-full"
>
{isAdmin ? "Upgrade Privilege System" : "Upgrade requires admin privilege"}
</Button>
</form>
</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
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>
);