misc: addressed comments

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

@@ -64,7 +64,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent title="Privilege Management System Upgrade">
+      <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

frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx

@@ -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 { useWorkspace } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
@@ -16,8 +15,7 @@ import {
   ServiceTokenTab
 } from "./components";
 
-const Page = withProjectPermission(
+const Page = () => {
-  () => {
   const navigate = useNavigate();
   const { currentWorkspace } = useWorkspace();
   const selectedTab = useSearch({
@@ -77,12 +75,7 @@ const Page = withProjectPermission(
       </div>
     </div>
   );
-  },
+};
-  {
-    action: ProjectPermissionActions.Read,
-    subject: ProjectPermissionSub.Member
-  }
-);
 
 export const AccessControlPage = () => {
   const { t } = useTranslation();

frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx

@@ -1,8 +1,12 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { GroupsSection } from "./components";
 
-export const GroupsTab = () => {
+export const GroupsTab = withProjectPermission(
+  () => {
     return (
       <motion.div
         key="panel-groups"
@@ -14,4 +18,9 @@ export const GroupsTab = () => {
         <GroupsSection />
       </motion.div>
     );
-};
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Groups
+  }
+);

frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx

@@ -1,8 +1,12 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { MembersSection } from "./components";
 
-export const MembersTab = () => {
+export const MembersTab = withProjectPermission(
+  () => {
     return (
       <motion.div
         key="panel-project-members"
@@ -14,4 +18,9 @@ export const MembersTab = () => {
         <MembersSection />
       </motion.div>
     );
-};
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Member
+  }
+);