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

misc: privilege management v2 transition
2026-10-18 00:51:15 +00:00 · 2025-03-27 01:43:31 -04:00
parent 8e3ac6ca29 73b5ca5b4f
commit 697543e4a2
76 changed files with 3002 additions and 802 deletions
@@ -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
@@ -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"
@@ -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) => (
@@ -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 }
 );
@@ -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) => (
@@ -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>
+  );
+};