misc: added trigger for privilege upgrade

frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx

@@ -2,22 +2,29 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 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,
   OrgPermissionGroupActions,
   OrgPermissionIdentityActions,
   OrgPermissionSubjects,
+  useOrganization,
   useOrgPermission
 } from "@app/context";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
 import { OrgGroupsTab, OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { UpgradePrivilegeSystemModal } from "./components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal";
+import { useState } from "react";
 
 export const AccessManagementPage = () => {
   const { t } = useTranslation();
   const { permission } = useOrgPermission();
+  const { currentOrg } = useOrganization();
+
   const navigate = useNavigate({
     from: ROUTE_PATHS.Organization.AccessControlPage.path
   });
@@ -27,6 +34,8 @@ export const AccessManagementPage = () => {
     structuralSharing: true
   });
 
+  const [isUpgradePrivilegeSystemModalOpen, setIsUpgradePrivilegeSystemModalOpen] = useState(false);
+
   const updateSelectedTab = (tab: string) => {
     navigate({
       search: { selectedTab: tab }
@@ -73,6 +82,31 @@ 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'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.
+            </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