Merge pull request #2091 from Infisical/misc/moved-admin-user-deletion-to-pro

misc: moved admin user deletion to pro plan

backend/src/ee/services/license/licence-fns.ts

@@ -38,7 +38,8 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   has_used_trial: true,
   secretApproval: false,
   secretRotation: true,
-  caCrl: false
+  caCrl: false,
+  instanceUserManagement: false
 });
 
 export const setupLicenceRequestWithStore = (baseURL: string, refreshUrl: string, licenseKey: string) => {

backend/src/ee/services/license/license-types.ts

@@ -56,6 +56,7 @@ export type TFeatureSet = {
   secretApproval: false;
   secretRotation: true;
   caCrl: false;
+  instanceUserManagement: false;
 };
 
 export type TOrgPlansTableDTO = {

backend/src/server/routes/index.ts

@@ -469,7 +469,8 @@ export const registerRoutes = async (
     authService: loginService,
     serverCfgDAL: superAdminDAL,
     orgService,
-    keyStore
+    keyStore,
+    licenseService
   });
   const rateLimitService = rateLimitServiceFactory({
     rateLimitDAL,

backend/src/server/routes/v1/identity-aws-iam-auth-router.ts

@@ -100,6 +100,7 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -108,6 +109,7 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -182,11 +184,12 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
           .min(1)
           .optional()
           .describe(AWS_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(AWS_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z.number().int().min(0).max(315360000).optional().describe(AWS_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(AWS_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })

backend/src/server/routes/v1/identity-azure-auth-router.ts

@@ -90,6 +90,7 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -98,6 +99,7 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -173,11 +175,12 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
           .min(1)
           .optional()
           .describe(AZURE_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(AZURE_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z.number().int().min(0).max(315360000).optional().describe(AZURE_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(AZURE_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })

backend/src/server/routes/v1/identity-gcp-auth-router.ts

@@ -91,6 +91,7 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -99,6 +100,7 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -175,11 +177,12 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
           .min(1)
           .optional()
           .describe(GCP_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(GCP_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z.number().int().min(0).max(315360000).optional().describe(GCP_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(GCP_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })

backend/src/server/routes/v1/identity-kubernetes-auth-router.ts

@@ -106,6 +106,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -114,6 +115,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -196,7 +198,13 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
           .min(1)
           .optional()
           .describe(KUBERNETES_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(KUBERNETES_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z
+          .number()
+          .int()
+          .min(0)
+          .max(315360000)
+          .optional()
+          .describe(KUBERNETES_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z
           .number()
           .int()
@@ -206,6 +214,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })

backend/src/server/routes/v1/identity-oidc-auth-router.ts

@@ -106,6 +106,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -114,6 +115,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -201,6 +203,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
             .number()
             .int()
             .min(1)
+            .max(315360000)
             .refine((value) => value !== 0, {
               message: "accessTokenTTL must have a non zero number"
             })
@@ -209,6 +212,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
           accessTokenMaxTTL: z
             .number()
             .int()
+            .max(315360000)
             .refine((value) => value !== 0, {
               message: "accessTokenMaxTTL must have a non zero number"
             })

backend/src/server/routes/v1/identity-token-auth-router.ts

@@ -39,6 +39,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -47,6 +48,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -117,11 +119,12 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           .min(1)
           .optional()
           .describe(TOKEN_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(TOKEN_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z.number().int().min(0).max(315360000).optional().describe(TOKEN_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(TOKEN_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })

backend/src/server/routes/v1/identity-universal-auth-router.ts

@@ -107,6 +107,7 @@ export const registerIdentityUaRouter = async (server: FastifyZodProvider) => {
           .number()
           .int()
           .min(1)
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
@@ -115,6 +116,7 @@ export const registerIdentityUaRouter = async (server: FastifyZodProvider) => {
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -196,7 +198,13 @@ export const registerIdentityUaRouter = async (server: FastifyZodProvider) => {
           .min(1)
           .optional()
           .describe(UNIVERSAL_AUTH.UPDATE.accessTokenTrustedIps),
-        accessTokenTTL: z.number().int().min(0).optional().describe(UNIVERSAL_AUTH.UPDATE.accessTokenTTL),
+        accessTokenTTL: z
+          .number()
+          .int()
+          .min(0)
+          .max(315360000)
+          .optional()
+          .describe(UNIVERSAL_AUTH.UPDATE.accessTokenTTL),
         accessTokenNumUsesLimit: z
           .number()
           .int()
@@ -206,6 +214,7 @@ export const registerIdentityUaRouter = async (server: FastifyZodProvider) => {
         accessTokenMaxTTL: z
           .number()
           .int()
+          .max(315360000)
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
@@ -362,7 +371,7 @@ export const registerIdentityUaRouter = async (server: FastifyZodProvider) => {
       body: z.object({
         description: z.string().trim().default("").describe(UNIVERSAL_AUTH.CREATE_CLIENT_SECRET.description),
         numUsesLimit: z.number().min(0).default(0).describe(UNIVERSAL_AUTH.CREATE_CLIENT_SECRET.numUsesLimit),
-        ttl: z.number().min(0).default(0).describe(UNIVERSAL_AUTH.CREATE_CLIENT_SECRET.ttl)
+        ttl: z.number().min(0).max(315360000).default(0).describe(UNIVERSAL_AUTH.CREATE_CLIENT_SECRET.ttl)
       }),
       response: {
         200: z.object({

backend/src/services/identity-access-token/identity-access-token-dal.ts

@@ -57,6 +57,12 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
             `${TableName.IdentityOidcAuth}.identityId`
           );
         })
+        .leftJoin(TableName.IdentityTokenAuth, (qb) => {
+          qb.on(`${TableName.Identity}.authMethod`, db.raw("?", [IdentityAuthMethod.TOKEN_AUTH])).andOn(
+            `${TableName.Identity}.id`,
+            `${TableName.IdentityTokenAuth}.identityId`
+          );
+        })
         .select(selectAllTableCols(TableName.IdentityAccessToken))
         .select(
           db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityUniversalAuth).as("accessTokenTrustedIpsUa"),
@@ -65,6 +71,7 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
           db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityAzureAuth).as("accessTokenTrustedIpsAzure"),
           db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityKubernetesAuth).as("accessTokenTrustedIpsK8s"),
           db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityOidcAuth).as("accessTokenTrustedIpsOidc"),
+          db.ref("accessTokenTrustedIps").withSchema(TableName.IdentityTokenAuth).as("accessTokenTrustedIpsToken"),
           db.ref("name").withSchema(TableName.Identity)
         )
         .first();
@@ -79,7 +86,8 @@ export const identityAccessTokenDALFactory = (db: TDbClient) => {
           doc.accessTokenTrustedIpsAws ||
           doc.accessTokenTrustedIpsAzure ||
           doc.accessTokenTrustedIpsK8s ||
-          doc.accessTokenTrustedIpsOidc
+          doc.accessTokenTrustedIpsOidc ||
+          doc.accessTokenTrustedIpsToken
       };
     } catch (error) {
       throw new DatabaseError({ error, name: "IdAccessTokenFindOne" });

backend/src/services/super-admin/super-admin-service.ts

@@ -1,6 +1,7 @@
 import bcrypt from "bcrypt";
 
 import { TSuperAdmin, TSuperAdminUpdate } from "@app/db/schemas";
+import { TLicenseServiceFactory } from "@app/ee/services/license/license-service";
 import { TKeyStoreFactory } from "@app/keystore/keystore";
 import { getConfig } from "@app/lib/config/env";
 import { infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
@@ -20,6 +21,7 @@ type TSuperAdminServiceFactoryDep = {
   authService: Pick<TAuthLoginFactory, "generateUserTokens">;
   orgService: Pick<TOrgServiceFactory, "createOrganization">;
   keyStore: Pick<TKeyStoreFactory, "getItem" | "setItemWithExpiry" | "deleteItem">;
+  licenseService: Pick<TLicenseServiceFactory, "onPremFeatures">;
 };
 
 export type TSuperAdminServiceFactory = ReturnType<typeof superAdminServiceFactory>;
@@ -36,7 +38,8 @@ export const superAdminServiceFactory = ({
   userDAL,
   authService,
   orgService,
-  keyStore
+  keyStore,
+  licenseService
 }: TSuperAdminServiceFactoryDep) => {
   const initServerCfg = async () => {
     // TODO(akhilmhdh): bad  pattern time less change this later to me itself
@@ -219,6 +222,12 @@ export const superAdminServiceFactory = ({
   };
 
   const deleteUser = async (userId: string) => {
+    if (!licenseService.onPremFeatures?.instanceUserManagement) {
+      throw new BadRequestError({
+        message: "Failed to delete user due to plan restriction. Upgrade to Infisical's Pro plan."
+      });
+    }
+
     const user = await userDAL.deleteById(userId);
     return user;
   };

frontend/next.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 const ContentSecurityPolicy = `
 	default-src 'self';
-	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
+	script-src 'self' https://*.posthog.com https://*.*.posthog.com https://js.stripe.com https://api.stripe.com https://widget.intercom.io https://js.intercomcdn.com https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline' https://hcaptcha.com https://*.hcaptcha.com;
 	child-src https://api.stripe.com;
 	frame-src https://js.stripe.com/ https://api.stripe.com https://www.youtube.com/ https://hcaptcha.com https://*.hcaptcha.com;

frontend/src/hooks/api/subscriptions/types.ts

@@ -39,4 +39,5 @@ export type SubscriptionPlan = {
   trial_end: number | null;
   has_used_trial: boolean;
   caCrl: boolean;
+  instanceUserManagement: boolean;
 };

frontend/src/views/Org/IdentityPage/components/IdentityClientSecretModal.tsx

@@ -22,7 +22,9 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 const schema = z
   .object({
     description: z.string(),
-    ttl: z.string(),
+    ttl: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "TTL cannot be greater than 315360000"
+    }),
     numUsesLimit: z.string()
   })
   .required();

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityAddToProjectModal.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Modal, ModalContent,Select, SelectItem } from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import {
   useAddIdentityToWorkspace,
@@ -54,7 +54,7 @@ export const IdentityAddToProjectModal = ({ identityId, popUp, handlePopUpToggle
   const filteredWorkspaces = useMemo(() => {
     const wsWorkspaceIds = new Map();
 
-    projectMemberships?.forEach((projectMembership: any) => {
+    projectMemberships?.forEach((projectMembership) => {
       wsWorkspaceIds.set(projectMembership.project.id, true);
     });
 

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -1,9 +1,12 @@
+import { useMemo } from "react";
 import { useRouter } from "next/router";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
+import { createNotification } from "@app/components/notifications";
 import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -21,7 +24,7 @@ const formatRoleName = (role: string, customRoleName?: string) => {
   if (role === ProjectMembershipRole.Admin) return "Admin";
   if (role === ProjectMembershipRole.Member) return "Developer";
   if (role === ProjectMembershipRole.Viewer) return "Viewer";
-  if (role === ProjectMembershipRole.NoAccess) return "No access";
+  if (role === ProjectMembershipRole.NoAccess) return "No Access";
   return role;
 };
 
@@ -29,12 +32,34 @@ export const IdentityProjectRow = ({
   membership: { id, createdAt, identity, project, roles },
   handlePopUpOpen
 }: Props) => {
+  const { workspaces } = useWorkspace();
   const router = useRouter();
+
+  const isAccessible = useMemo(() => {
+    const workspaceIds = new Map();
+
+    workspaces?.forEach((workspace) => {
+      workspaceIds.set(workspace.id, true);
+    });
+
+    return workspaceIds.has(project.id);
+  }, [workspaces, project]);
+
   return (
     <Tr
       className="group h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
       key={`identity-project-membership-${id}`}
-      onClick={() => router.push(`/project/${project.id}/members`)}
+      onClick={() => {
+        if (isAccessible) {
+          router.push(`/project/${project.id}/members`);
+          return;
+        }
+
+        createNotification({
+          text: "Unable to access project",
+          type: "error"
+        });
+      }}
     >
       <Td>{project.name}</Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
@@ -42,26 +67,29 @@ export const IdentityProjectRow = ({
       }`}</Td>
       <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
       <Td>
-        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        {isAccessible && (
-          <Tooltip content="Remove">
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-            <IconButton
+            <Tooltip content="Remove">
-              ariaLabel="copy icon"
+              <IconButton
-              variant="plain"
+                colorSchema="danger"
-              className="group relative"
+                ariaLabel="copy icon"
-              onClick={(e) => {
+                variant="plain"
-                e.stopPropagation();
+                className="group relative"
-                handlePopUpOpen("removeIdentityFromProject", {
+                onClick={(e) => {
-                  identityId: identity.id,
+                  e.stopPropagation();
-                  identityName: identity.name,
+                  handlePopUpOpen("removeIdentityFromProject", {
-                  projectId: project.id,
+                    identityId: identity.id,
-                  projectName: project.name
+                    identityName: identity.name,
-                });
+                    projectId: project.id,
-              }}
+                    projectName: project.name
-            >
+                  });
-              <FontAwesomeIcon icon={faTrash} />
+                }}
-            </IconButton>
+              >
-          </Tooltip>
+                <FontAwesomeIcon icon={faTrash} />
-        </div>
+              </IconButton>
+            </Tooltip>
+          </div>
+        )}
       </Td>
     </Tr>
   );

frontend/src/views/Org/MembersPage/MembersPage.tsx

@@ -3,16 +3,10 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
-import { 
+import { OrgIdentityTab, OrgMembersTab, OrgRoleTabSection } from "./components";
-  OrgGroupsTab,
-  OrgIdentityTab, 
-  OrgMembersTab,
-  OrgRoleTabSection 
-} from "./components";
 
 enum TabSections {
   Member = "members",
-  Groups = "groups",
   Roles = "roles",
   Identities = "identities"
 }
@@ -25,8 +19,7 @@ export const MembersPage = withPermission(
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">Organization Access Control</p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
-              <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Member}>Users</Tab>
-              <Tab value={TabSections.Groups}>Groups</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
@@ -37,9 +30,6 @@ export const MembersPage = withPermission(
             <TabPanel value={TabSections.Member}>
               <OrgMembersTab />
             </TabPanel>
-            <TabPanel value={TabSections.Groups}>
-              <OrgGroupsTab />
-            </TabPanel>
             <TabPanel value={TabSections.Identities}>
               <OrgIdentityTab />
             </TabPanel>

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx

@@ -3,16 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
+import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
-    Button,
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-    DeleteActionModal,
-    UpgradePlanModal
-} from "@app/components/v2";
-import {
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useSubscription
-} from "@app/context";
 import { useDeleteGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -21,100 +13,88 @@ import { OrgGroupModal } from "./OrgGroupModal";
 import { OrgGroupsTable } from "./OrgGroupsTable";
 
 export const OrgGroupsSection = () => {
-    const { subscription } = useSubscription();
+  const { subscription } = useSubscription();
-    const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
+  const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
-        
+
-    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-        "group",
+    "group",
-        "groupMembers",
+    "groupMembers",
-        "deleteGroup",
+    "deleteGroup",
-        "upgradePlan"
+    "upgradePlan"
-    ] as const);
+  ] as const);
-    
+
-    const handleAddGroupModal = () => {
+  const handleAddGroupModal = () => {
-        if (!subscription?.groups) {
+    if (!subscription?.groups) {
-            handlePopUpOpen("upgradePlan", {
+      handlePopUpOpen("upgradePlan", {
-                description: "You can manage users more efficiently with groups if you upgrade your Infisical plan."
+        description:
-            });
+          "You can manage users more efficiently with groups if you upgrade your Infisical plan."
-        } else {
+      });
-            handlePopUpOpen("group");
+    } else {
-        }
+      handlePopUpOpen("group");
     }
-    
+  };
-    const onDeleteGroupSubmit = async ({
+
-        name,
+  const onDeleteGroupSubmit = async ({ name, slug }: { name: string; slug: string }) => {
+    try {
+      await deleteMutateAsync({
         slug
-    }: {
+      });
-        name: string;
+      createNotification({
-        slug: string;
+        text: `Successfully deleted the group named ${name}`,
-    }) => {
+        type: "success"
-        try {
+      });
-            await deleteMutateAsync({
+    } catch (err) {
-                slug
+      console.error(err);
-            });
+      createNotification({
-            createNotification({
+        text: `Failed to delete the group named ${name}`,
-                text: `Successfully deleted the group named ${name}`,
+        type: "error"
-                type: "success"
+      });
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to delete the group named ${name}`,
-                type: "error"
-            });
-        }
-        
-        handlePopUpClose("deleteGroup");
     }
-    
+
-    return (
+    handlePopUpClose("deleteGroup");
-        <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>
+  return (
-                <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-                {(isAllowed) => (
+      <div className="mb-4 flex justify-between">
-                    <Button
+        <p className="text-xl font-semibold text-mineshaft-100">User Groups</p>
-                        colorSchema="primary"
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
-                        type="submit"
+          {(isAllowed) => (
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            <Button
-                        onClick={() => handleAddGroupModal()}
+              colorSchema="primary"
-                        isDisabled={!isAllowed}
+              type="submit"
-                    >
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        Create Group
+              onClick={() => handleAddGroupModal()}
-                    </Button>
+              isDisabled={!isAllowed}
-                )}
+            >
-                </OrgPermissionCan>
+              Create Group
-            </div>
+            </Button>
-            <OrgGroupsTable 
+          )}
-                handlePopUpOpen={handlePopUpOpen}
+        </OrgPermissionCan>
-            />
+      </div>
-            <OrgGroupModal
+      <OrgGroupsTable handlePopUpOpen={handlePopUpOpen} />
-                popUp={popUp}
+      <OrgGroupModal
-                handlePopUpClose={handlePopUpClose}
+        popUp={popUp}
-                handlePopUpToggle={handlePopUpToggle}
+        handlePopUpClose={handlePopUpClose}
-            />
+        handlePopUpToggle={handlePopUpToggle}
-            <OrgGroupMembersModal
+      />
-                popUp={popUp}
+      <OrgGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-                handlePopUpToggle={handlePopUpToggle}
+      <DeleteActionModal
-            />
+        isOpen={popUp.deleteGroup.isOpen}
-            <DeleteActionModal
+        title={`Are you sure want to delete the group named ${
-                isOpen={popUp.deleteGroup.isOpen}
+          (popUp?.deleteGroup?.data as { name: string })?.name || ""
-                title={`Are you sure want to delete the group named ${
+        }?`}
-                    (popUp?.deleteGroup?.data as { name: string })?.name || ""
+        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
-                }?`}
+        deleteKey="confirm"
-                onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+        onDeleteApproved={() =>
-                deleteKey="confirm"
+          onDeleteGroupSubmit(popUp?.deleteGroup?.data as { name: string; slug: string })
-                onDeleteApproved={() =>
+        }
-                    onDeleteGroupSubmit(
+      />
-                        (popUp?.deleteGroup?.data as { name: string; slug: string })
+      <UpgradePlanModal
-                    )
+        isOpen={popUp.upgradePlan.isOpen}
-                }
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            />
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
-            <UpgradePlanModal
+      />
-                isOpen={popUp.upgradePlan.isOpen}
+    </div>
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+  );
-                text={(popUp.upgradePlan?.data as { description: string })?.description}
+};
-            />
-        </div>
-    );
-}

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx

@@ -1,12 +1,16 @@
 import { useState } from "react";
-import { faMagnifyingGlass, faPencil, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsis,faMagnifyingGlass, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
-  IconButton,
   Input,
   Select,
   SelectItem,
@@ -17,218 +21,200 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
-import {
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-    OrgPermissionActions,
+import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
-    OrgPermissionSubjects,
-    useOrganization} from "@app/context";
-import { 
-    useGetOrganizationGroups, 
-    useGetOrgRoles,
-    useUpdateGroup
-} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
+  handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<
+    popUpName: keyof UsePopUpState<["group", "deleteGroup", "groupMembers"]>,
-        ["group", "deleteGroup", "groupMembers"]
+    data?: {
-      >,
+      groupId?: string;
-      data?: {
+      name?: string;
-        groupId?: string;
+      slug?: string;
-        name?: string;
+      role?: string;
-        slug?: string;
+      customRole?: {
-        role?: string;
+        name: string;
-        customRole?: {
+        slug: string;
-            name: string;
+      };
-            slug: string;
+    }
-        }
+  ) => void;
-      }
+};
-    ) => void;
-  };
 
-export const OrgGroupsTable = ({
+export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
-    handlePopUpOpen
+  const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
-}: Props) => {
+  const { currentOrg } = useOrganization();
-    const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
+  const orgId = currentOrg?.id || "";
-    const { currentOrg } = useOrganization();
+  const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
-    const orgId = currentOrg?.id || "";
+  const { mutateAsync: updateMutateAsync } = useUpdateGroup();
-    const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
+
-    const { mutateAsync: updateMutateAsync } = useUpdateGroup();
+  const { data: roles } = useGetOrgRoles(orgId);
-    
+
-    const { data: roles } = useGetOrgRoles(orgId);
+  const handleChangeRole = async ({ currentSlug, role }: { currentSlug: string; role: string }) => {
-    
+    try {
-    const handleChangeRole = async ({
+      await updateMutateAsync({
         currentSlug,
         role
-    }: {
+      });
-        currentSlug: string;
+
-        role: string;
+      createNotification({
-    }) => {
+        text: "Successfully updated group role",
-        try {
+        type: "success"
-            await updateMutateAsync({
+      });
-                currentSlug,
+    } catch (err) {
-                role
+      console.error(err);
-            });
+      createNotification({
-            
+        text: "Failed to update group role",
-            createNotification({
+        type: "error"
-                text: "Successfully updated group role",
+      });
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to update group role",
-                type: "error"
-            });
-        }
     }
-    
+  };
-    return (
+
-        <div>
+  return (
-            <Input
+    <div>
-                value={searchGroupsFilter}
+      <Input
-                onChange={(e) => setSearchGroupsFilter(e.target.value)}
+        value={searchGroupsFilter}
-                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        onChange={(e) => setSearchGroupsFilter(e.target.value)}
-                placeholder="Search groups..."
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            />
+        placeholder="Search groups..."
-            <TableContainer className="mt-4">
+      />
-                <Table>
+      <TableContainer className="mt-4">
-                    <THead>
+        <Table>
-                        <Tr>
+          <THead>
-                            <Th>Name</Th>
+            <Tr>
-                            <Th>Slug</Th>
+              <Th>Name</Th>
-                            <Th>Role</Th>
+              <Th>Slug</Th>
-                            <Th className="w-5" />
+              <Th>Role</Th>
-                        </Tr>
+              <Th className="w-5" />
-                    </THead>
+            </Tr>
-                    <TBody>
+          </THead>
-                        {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
+          <TBody>
-                        {!isLoading && groups?.map(({ id, name, slug, role, customRole }) => {
+            {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
-                            return (
+            {!isLoading &&
-                                <Tr className="h-10" key={`org-group-${id}`}>
+              groups?.map(({ id, name, slug, role, customRole }) => {
-                                    <Td>{name}</Td>
+                return (
-                                    <Td>{slug}</Td>
+                  <Tr className="h-10" key={`org-group-${id}`}>
-                                    <Td>
+                    <Td>{name}</Td>
-                                    <OrgPermissionCan
+                    <Td>{slug}</Td>
-                                        I={OrgPermissionActions.Edit}
+                    <Td>
-                                        a={OrgPermissionSubjects.Groups}
+                      <OrgPermissionCan
-                                    >
+                        I={OrgPermissionActions.Edit}
-                                        {(isAllowed) => {
+                        a={OrgPermissionSubjects.Groups}
-                                            return (
+                      >
-                                                <Select
+                        {(isAllowed) => {
-                                                    value={role === "custom" ? (customRole?.slug as string) : role}
+                          return (
-                                                    isDisabled={!isAllowed}
+                            <Select
-                                                    className="w-40 bg-mineshaft-600"
+                              value={role === "custom" ? (customRole?.slug as string) : role}
-                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                              isDisabled={!isAllowed}
-                                                    onValueChange={(selectedRole) =>
+                              className="w-40 bg-mineshaft-600"
-                                                        handleChangeRole({
+                              dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                                            currentSlug: slug,
+                              onValueChange={(selectedRole) =>
-                                                            role: selectedRole
+                                handleChangeRole({
-                                                        })
+                                  currentSlug: slug,
-                                                    }
+                                  role: selectedRole
-                                                >
+                                })
-                                                    {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
+                              }
-                                                    <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
+                            >
-                                                        {roleName}
+                              {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
-                                                    </SelectItem>
+                                <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
-                                                    ))}
+                                  {roleName}
-                                                </Select>
+                                </SelectItem>
-                                            );
+                              ))}
-                                        }}
+                            </Select>
-                                    </OrgPermissionCan>
+                          );
-                                    </Td>
+                        }}
-                                    <Td>
+                      </OrgPermissionCan>
-                                        <div className="flex items-center justify-end">
+                    </Td>
-                                            <OrgPermissionCan
+                    <Td>
-                                                I={OrgPermissionActions.Edit}
+                      <DropdownMenu>
-                                                a={OrgPermissionSubjects.Groups}
+                        <DropdownMenuTrigger asChild className="rounded-lg">
-                                            >
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                                                {(isAllowed) => (
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                                                    <Tooltip content="Manage group members">
+                          </div>
-                                                        <IconButton
+                        </DropdownMenuTrigger>
-                                                            onClick={() => {
+                        <DropdownMenuContent align="start" className="p-1">
-                                                                handlePopUpOpen("groupMembers", {
+                          <OrgPermissionCan
-                                                                    slug
+                            I={OrgPermissionActions.Edit}
-                                                                });
+                            a={OrgPermissionSubjects.Identity}
-                                                            }}
+                          >
-                                                            size="lg"
+                            {(isAllowed) => (
-                                                            colorSchema="primary"
+                              <DropdownMenuItem
-                                                            variant="plain"
+                                className={twMerge(
-                                                            ariaLabel="update"
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                                            isDisabled={!isAllowed}
+                                )}
-                                                        >
+                                onClick={(e) => {
-                                                            <FontAwesomeIcon icon={faUsers} />
+                                  e.stopPropagation();
-                                                        </IconButton>
+                                  handlePopUpOpen("groupMembers", {
-                                                    </Tooltip>
+                                    slug
-                                                )}
+                                  });
-                                            </OrgPermissionCan>
+                                }}
-                                            <OrgPermissionCan
+                                disabled={!isAllowed}
-                                                I={OrgPermissionActions.Edit}
+                              >
-                                                a={OrgPermissionSubjects.Groups}
+                                Manage Users
-                                            >
+                              </DropdownMenuItem>
-                                                {(isAllowed) => (
+                            )}
-                                                    <Tooltip content="Edit group">
+                          </OrgPermissionCan>
-                                                        <IconButton
+                          <OrgPermissionCan
-                                                            onClick={async () => {
+                            I={OrgPermissionActions.Edit}
-                                                                handlePopUpOpen("group", {
+                            a={OrgPermissionSubjects.Identity}
-                                                                    groupId: id,
+                          >
-                                                                    name,
+                            {(isAllowed) => (
-                                                                    slug,
+                              <DropdownMenuItem
-                                                                    role,
+                                className={twMerge(
-                                                                    customRole
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                                                });
+                                )}
-                                                            }}
+                                onClick={(e) => {
-                                                            size="lg"
+                                  e.stopPropagation();
-                                                            colorSchema="primary"
+                                  handlePopUpOpen("group", {
-                                                            variant="plain"
+                                    groupId: id,
-                                                            ariaLabel="update"
+                                    name,
-                                                            className="ml-4"
+                                    slug,
-                                                            isDisabled={!isAllowed}
+                                    role,
-                                                        >
+                                    customRole
-                                                            <FontAwesomeIcon icon={faPencil} />
+                                  });
-                                                        </IconButton>
+                                }}
-                                                    </Tooltip>
+                                disabled={!isAllowed}
-                                                )}
+                              >
-                                            </OrgPermissionCan>
+                                Edit Group
-                                            <OrgPermissionCan
+                              </DropdownMenuItem>
-                                                I={OrgPermissionActions.Delete}
+                            )}
-                                                a={OrgPermissionSubjects.Groups}
+                          </OrgPermissionCan>
-                                            >
+                          <OrgPermissionCan
-                                                {(isAllowed) => (
+                            I={OrgPermissionActions.Delete}
-                                                    <Tooltip content="Delete group">
+                            a={OrgPermissionSubjects.Groups}
-                                                        <IconButton
+                          >
-                                                            onClick={() => {
+                            {(isAllowed) => (
-                                                                handlePopUpOpen("deleteGroup", {
+                              <DropdownMenuItem
-                                                                    slug,
+                                className={twMerge(
-                                                                    name
+                                  isAllowed
-                                                                });
+                                    ? "hover:!bg-red-500 hover:!text-white"
-                                                            }}
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                                            size="lg"
+                                )}
-                                                            colorSchema="danger"
+                                onClick={(e) => {
-                                                            variant="plain"
+                                  e.stopPropagation();
-                                                            ariaLabel="update"
+                                  handlePopUpOpen("deleteGroup", {
-                                                            className="ml-4"
+                                    slug,
-                                                            isDisabled={!isAllowed}
+                                    name
-                                                        >
+                                  });
-                                                            <FontAwesomeIcon icon={faXmark} />
+                                }}
-                                                        </IconButton>
+                                disabled={!isAllowed}
-                                                    </Tooltip>
+                              >
-                                                )}
+                                Delete Group
-                                            </OrgPermissionCan>
+                              </DropdownMenuItem>
-                                        </div>
+                            )}
-                                    </Td>
+                          </OrgPermissionCan>
-                                </Tr>
+                        </DropdownMenuContent>
-                            );
+                      </DropdownMenu>
-                        })}
+                    </Td>
-                    </TBody>
+                  </Tr>
-                </Table>
+                );
-                {groups?.length === 0 && (
+              })}
-                    <EmptyState title="No groups found" icon={faUsers} />
+          </TBody>
-                )}
+        </Table>
-            </TableContainer>
+        {groups?.length === 0 && <EmptyState title="No groups found" icon={faUsers} />}
-        </div>
+      </TableContainer>
-    );
+    </div>
-}
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm.tsx

@@ -22,8 +22,22 @@ const schema = yup
     stsEndpoint: yup.string(),
     allowedPrincipalArns: yup.string(),
     allowedAccountIds: yup.string(),
-    accessTokenTTL: yup.string().required("Access Token TTL is required"),
+    accessTokenTTL: yup
-    accessTokenMaxTTL: yup.string().required("Access Max Token TTL is required"),
+      .string()
+      .required("Access Token TTL is required")
+      .test(
+        "is-value-valid",
+        "Access Token TTL cannot be greater than 315360000",
+        (value) => Number(value) <= 315360000
+      ),
+    accessTokenMaxTTL: yup
+      .string()
+      .required("Access Max Token TTL is required")
+      .test(
+        "is-value-valid",
+        "Access Token Max TTL cannot be greater than 315360000",
+        (value) => Number(value) <= 315360000
+      ),
     accessTokenNumUsesLimit: yup.string().required("Access Token Max Number of Uses is required"),
     accessTokenTrustedIps: yup
       .array(

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -22,8 +22,12 @@ const schema = z
     tenantId: z.string(),
     resource: z.string(),
     allowedServicePrincipalIds: z.string(),
-    accessTokenTTL: z.string(),
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
-    accessTokenMaxTTL: z.string(),
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
     accessTokenNumUsesLimit: z.string(),
     accessTokenTrustedIps: z
       .array(

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm.tsx

@@ -23,8 +23,12 @@ const schema = z
     allowedServiceAccounts: z.string(),
     allowedProjects: z.string(),
     allowedZones: z.string(),
-    accessTokenTTL: z.string(),
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
-    accessTokenMaxTTL: z.string(),
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
     accessTokenNumUsesLimit: z.string(),
     accessTokenTrustedIps: z
       .array(

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -25,8 +25,12 @@ const schema = z
     allowedNamespaces: z.string(),
     allowedAudience: z.string(),
     caCert: z.string(),
-    accessTokenTTL: z.string(),
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
-    accessTokenMaxTTL: z.string(),
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
     accessTokenNumUsesLimit: z.string(),
     accessTokenTrustedIps: z
       .array(

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -22,8 +22,12 @@ const schema = z.object({
       })
     )
     .min(1),
-  accessTokenTTL: z.string(),
+  accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
-  accessTokenMaxTTL: z.string(),
+    message: "Access Token TTL cannot be greater than 315360000"
+  }),
+  accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token Max TTL cannot be greater than 315360000"
+  }),
   accessTokenNumUsesLimit: z.string(),
   oidcDiscoveryUrl: z.string().url().min(1),
   caCert: z.string().trim().default(""),

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -108,7 +108,7 @@ export const IdentitySection = withPermission(
             )}
           </OrgPermissionCan>
         </div>
-        <IdentityTable />
+        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
         <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
         {/* <IdentityAuthMethodModal
           popUp={popUp}

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,13 +1,16 @@
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
-  IconButton,
   Select,
   SelectItem,
   Table,
@@ -21,8 +24,19 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
 
-export const IdentityTable = () => {
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteIdentity"]>,
+    data?: {
+      identityId: string;
+      name: string;
+    }
+  ) => void;
+};
+
+export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -76,9 +90,7 @@ export const IdentityTable = () => {
                   key={`identity-${id}`}
                   onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
                 >
-                  <Td>
+                  <Td>{name}</Td>
-                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
-                  </Td>
                   <Td>
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}
@@ -109,16 +121,58 @@ export const IdentityTable = () => {
                     </OrgPermissionCan>
                   </Td>
                   <Td>
-                    <div className="flex items-center justify-end space-x-4">
+                    <DropdownMenu>
-                      <IconButton
+                      <DropdownMenuTrigger asChild className="rounded-lg">
-                        ariaLabel="copy icon"
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                        variant="plain"
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
-                        className="group relative"
+                        </div>
-                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
+                      </DropdownMenuTrigger>
-                      >
+                      <DropdownMenuContent align="start" className="p-1">
-                        <FontAwesomeIcon icon={faEllipsis} />
+                        <OrgPermissionCan
-                      </IconButton>
+                          I={OrgPermissionActions.Edit}
-                    </div>
+                          a={OrgPermissionSubjects.Identity}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                router.push(`/org/${orgId}/identities/${id}`);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Edit Identity
+                            </DropdownMenuItem>
+                          )}
+                        </OrgPermissionCan>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Delete}
+                          a={OrgPermissionSubjects.Identity}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                isAllowed
+                                  ? "hover:!bg-red-500 hover:!text-white"
+                                  : "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handlePopUpOpen("deleteIdentity", {
+                                  identityId: id,
+                                  name
+                                });
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              Delete Identity
+                            </DropdownMenuItem>
+                          )}
+                        </OrgPermissionCan>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </Td>
                 </Tr>
               );

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm.tsx

@@ -17,8 +17,12 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
-    accessTokenTTL: z.string(),
+    accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
-    accessTokenMaxTTL: z.string(),
+      message: "Access Token TTL cannot be greater than 315360000"
+    }),
+    accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+      message: "Access Token Max TTL cannot be greater than 315360000"
+    }),
     accessTokenNumUsesLimit: z.string(),
     accessTokenTrustedIps: z
       .array(

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx

@@ -36,7 +36,13 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup.object({
   description: yup.string(),
-  ttl: yup.string(),
+  ttl: yup
+    .string()
+    .test(
+      "is-value-valid",
+      "TTL cannot be greater than 315360000",
+      (value) => Number(value) <= 315360000
+    ),
   numUsesLimit: yup.string()
 });
 

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -19,8 +19,22 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
-    accessTokenTTL: yup.string().required("Access Token TTL is required"),
+    accessTokenTTL: yup
-    accessTokenMaxTTL: yup.string().required("Access Max Token TTL is required"),
+      .string()
+      .required("Access Token TTL is required")
+      .test(
+        "is-value-valid",
+        "Access Token TTL cannot be greater than 315360000",
+        (value) => Number(value) <= 315360000
+      ),
+    accessTokenMaxTTL: yup
+      .string()
+      .required("Access Max Token TTL is required")
+      .test(
+        "is-value-valid",
+        "Access Max Token TTL cannot be greater than 315360000",
+        (value) => Number(value) <= 315360000
+      ),
     accessTokenNumUsesLimit: yup.string().required("Access Token Max Number of Uses is required"),
     clientSecretTrustedIps: yup
       .array(

frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx

@@ -1,17 +1,19 @@
 import { motion } from "framer-motion";
 
+import { OrgGroupsSection } from "../OrgGroupsTab/components";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
   return (
     <motion.div
-        key="panel-org-members"
+      key="panel-org-members"
-        transition={{ duration: 0.15 }}
+      transition={{ duration: 0.15 }}
-        initial={{ opacity: 0, translateX: 30 }}
+      initial={{ opacity: 0, translateX: 30 }}
-        animate={{ opacity: 1, translateX: 0 }}
+      animate={{ opacity: 1, translateX: 0 }}
-        exit={{ opacity: 0, translateX: 30 }}
+      exit={{ opacity: 0, translateX: 30 }}
     >
-        <OrgMembersSection />
+      <OrgMembersSection />
+      <OrgGroupsSection />
     </motion.div>
   );
-}
+};

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -90,7 +90,7 @@ export const OrgMembersSection = () => {
   return (
     <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">Members</p>
+        <p className="text-xl font-semibold text-mineshaft-100">Users</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
           {(isAllowed) => (
             <Button

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -1,17 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { motion } from "framer-motion";
-
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import {
+import { IdentityTab, MembersTab,ProjectRoleListTab, ServiceTokenTab } from "./components";
-  GroupsTab,
-  IdentityTab,
-  MemberListTab,
-  ProjectRoleListTab,
-  ServiceTokenTab
-} from "./components";
 
 enum TabSections {
   Member = "members",
@@ -23,17 +15,13 @@ enum TabSections {
 
 export const MembersPage = withProjectPermission(
   () => {
-    const { currentWorkspace } = useWorkspace();
     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 py-6 px-6">
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">Project Access Control</p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
-              <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Member}>Users</Tab>
-              {currentWorkspace?.version && currentWorkspace.version > 1 && (
-                <Tab value={TabSections.Groups}>Groups</Tab>
-              )}
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
@@ -43,21 +31,8 @@ export const MembersPage = withProjectPermission(
               <Tab value={TabSections.Roles}>Project Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
-              <MemberListTab />
+              <MembersTab />
             </TabPanel>
-            {currentWorkspace?.version && currentWorkspace.version > 1 && (
-              <TabPanel value={TabSections.Groups}>
-                <motion.div
-                  key="panel-groups"
-                  transition={{ duration: 0.15 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: 30 }}
-                >
-                  <GroupsTab />
-                </motion.div>
-              </TabPanel>
-            )}
             <TabPanel value={TabSections.Identities}>
               <IdentityTab />
             </TabPanel>

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx

@@ -3,12 +3,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
 import {
-    Button,
+  ProjectPermissionActions,
-    DeleteActionModal,
+  ProjectPermissionSub,
-    UpgradePlanModal
+  useSubscription,
-} from "@app/components/v2";
+  useWorkspace
-import { ProjectPermissionActions, ProjectPermissionSub, useSubscription,useWorkspace } from "@app/context";
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
 
@@ -16,90 +17,89 @@ import { GroupModal } from "./GroupModal";
 import { GroupTable } from "./GroupsTable";
 
 export const GroupsSection = () => {
-    const { subscription } = useSubscription();
+  const { subscription } = useSubscription();
-    const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace } = useWorkspace();
 
-    const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
+  const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
-    
-    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-        "group",
-        "deleteGroup",
-        "upgradePlan"
-    ] as const);
 
-    const handleAddGroupModal = () => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-        if (!subscription?.groups) {
+    "group",
-            handlePopUpOpen("upgradePlan", {
+    "deleteGroup",
-                description: "You can manage users more efficiently with groups if you upgrade your Infisical plan."
+    "upgradePlan"
-            });
+  ] as const);
-        } else {
+
-            handlePopUpOpen("group");
+  const handleAddGroupModal = () => {
-        }
+    if (!subscription?.groups) {
+      handlePopUpOpen("upgradePlan", {
+        description:
+          "You can manage users more efficiently with groups if you upgrade your Infisical plan."
+      });
+    } else {
+      handlePopUpOpen("group");
     }
+  };
 
-    const onRemoveGroupSubmit = async (groupSlug: string) => {
+  const onRemoveGroupSubmit = async (groupSlug: string) => {
-        try {
+    try {
-            await deleteMutateAsync({
+      await deleteMutateAsync({
-                groupSlug,
+        groupSlug,
-                projectSlug: currentWorkspace?.slug || ""
+        projectSlug: currentWorkspace?.slug || ""
-            });
+      });
-  
+
-            createNotification({
+      createNotification({
-                text: "Successfully removed identity from project",
+        text: "Successfully removed identity from project",
-                type: "success"
+        type: "success"
-            });
+      });
-  
+
-          handlePopUpClose("deleteGroup");
+      handlePopUpClose("deleteGroup");
-        } catch (err) {
+    } catch (err) {
-            console.error(err);
+      console.error(err);
-            const error = err as any;
+      const error = err as any;
-            const text = error?.response?.data?.message ?? "Failed to remove group from project";
+      const text = error?.response?.data?.message ?? "Failed to remove group from project";
-    
+
-            createNotification({
+      createNotification({
-                text,
+        text,
-                type: "error"
+        type: "error"
-            });
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">User Groups</p>
+        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handleAddGroupModal()}
+              isDisabled={!isAllowed}
+            >
+              Add Group
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <GroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <GroupTable handlePopUpOpen={handlePopUpOpen} />
+      <DeleteActionModal
+        isOpen={popUp.deleteGroup.isOpen}
+        title={`Are you sure want to remove the group ${
+          (popUp?.deleteGroup?.data as { name: string })?.name || ""
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveGroupSubmit((popUp?.deleteGroup?.data as { slug: string })?.slug)
         }
-    };
+      />
-      
+      <UpgradePlanModal
-    return (
+        isOpen={popUp.upgradePlan.isOpen}
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-            <div className="mb-4 flex items-center justify-between">
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
-                <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
+      />
-                <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
+    </div>
-                    {(isAllowed) => (
+  );
-                        <Button
+};
-                            colorSchema="primary"
-                            type="submit"
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                            onClick={() => handleAddGroupModal()}
-                            isDisabled={!isAllowed}
-                        >
-                            Add Group
-                        </Button>
-                    )}
-                </ProjectPermissionCan>
-            </div>
-            <GroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-            <GroupTable handlePopUpOpen={handlePopUpOpen} />
-            <DeleteActionModal
-                isOpen={popUp.deleteGroup.isOpen}
-                title={`Are you sure want to remove the group ${
-                    (popUp?.deleteGroup?.data as { name: string })?.name || ""
-                } from the project?`}
-                onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={() =>
-                    onRemoveGroupSubmit(
-                        (popUp?.deleteGroup?.data as { slug: string })?.slug
-                    )
-                }
-            />
-            <UpgradePlanModal
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text={(popUp.upgradePlan?.data as { description: string })?.description}
-            />
-        </div>
-    );
-}

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -1,4 +1,4 @@
-import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faServer, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
@@ -13,6 +13,7 @@ import {
   Td,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -36,68 +37,71 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
   const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.slug || "");
   return (
     <TableContainer>
-        <Table>
+      <Table>
-            <THead>
+        <THead>
-            <Tr>
+          <Tr>
-                <Th>Name</Th>
+            <Th>Name</Th>
-                <Th>Role</Th>
+            <Th>Role</Th>
-                <Th>Added on</Th>
+            <Th>Added on</Th>
-                <Th className="w-5" />
+            <Th className="w-5" />
-            </Tr>
+          </Tr>
-            </THead>
+        </THead>
-            <TBody>
+        <TBody>
-            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+          {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
-            {!isLoading &&
+          {!isLoading &&
-                data &&
+            data &&
-                data.length > 0 &&
+            data.length > 0 &&
-                data.map(({ group: { id, name, slug }, roles, createdAt }) => {
+            data.map(({ group: { id, name, slug }, roles, createdAt }) => {
-                    return (
+              return (
-                        <Tr className="h-10" key={`st-v3-${id}`}>
+                <Tr className="group h-10" key={`st-v3-${id}`}>
-                        <Td>{name}</Td>
+                  <Td>{name}</Td>
-                        <Td>
+                  <Td>
-                            <ProjectPermissionCan
+                    <ProjectPermissionCan
-                                I={ProjectPermissionActions.Edit}
+                      I={ProjectPermissionActions.Edit}
-                                a={ProjectPermissionSub.Groups}
+                      a={ProjectPermissionSub.Groups}
+                    >
+                      {(isAllowed) => (
+                        <GroupRoles roles={roles} disableEdit={!isAllowed} groupSlug={slug} />
+                      )}
+                    </ProjectPermissionCan>
+                  </Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td className="flex justify-end">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Delete}
+                      a={ProjectPermissionSub.Groups}
+                    >
+                      {(isAllowed) => (
+                        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                          <Tooltip content="Remove">
+                            <IconButton
+                              onClick={() => {
+                                handlePopUpOpen("deleteGroup", {
+                                  slug,
+                                  name
+                                });
+                              }}
+                              colorSchema="danger"
+                              variant="plain"
+                              ariaLabel="update"
+                              className="ml-4"
+                              isDisabled={!isAllowed}
                             >
-                                {(isAllowed) => (
+                              <FontAwesomeIcon icon={faTrash} />
-                                    <GroupRoles roles={roles} disableEdit={!isAllowed} groupSlug={slug} />
+                            </IconButton>
-                                )}
+                          </Tooltip>
-                            </ProjectPermissionCan>
+                        </div>
-                        </Td>
+                      )}
-                        <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                    </ProjectPermissionCan>
-                        <Td className="flex justify-end">
+                  </Td>
-                            <ProjectPermissionCan
+                </Tr>
-                            I={ProjectPermissionActions.Delete}
+              );
-                            a={ProjectPermissionSub.Groups}
+            })}
-                            >
+        </TBody>
-                            {(isAllowed) => (
+      </Table>
-                                <IconButton
+      {!isLoading && data?.length === 0 && (
-                                onClick={() => {
+        <EmptyState title="No groups have been added to this project" icon={faServer} />
-                                    handlePopUpOpen("deleteGroup", {
+      )}
-                                        slug,
-                                        name
-                                    });
-                                }}
-                                size="lg"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="update"
-                                className="ml-4"
-                                isDisabled={!isAllowed}
-                                >
-                                <FontAwesomeIcon icon={faXmark} />
-                                </IconButton>
-                            )}
-                            </ProjectPermissionCan>
-                        </Td>
-                        </Tr>
-                    );
-                })}
-            </TBody>
-        </Table>
-        {!isLoading && data?.length === 0 && (
-            <EmptyState title="No groups have been added to this project" icon={faServer} />
-        )}
     </TableContainer>
   );
 };

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -1,505 +0,0 @@
-import { useMemo, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import Link from "next/link";
-import {
-  faClock,
-  faEdit,
-  faMagnifyingGlass,
-  faPlus,
-  faUsers,
-  faXmark
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { motion } from "framer-motion";
-import { twMerge } from "tailwind-merge";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  Button,
-  DeleteActionModal,
-  EmptyState,
-  FormControl,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-  IconButton,
-  Input,
-  Modal,
-  ModalContent,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  Tag,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tooltip,
-  Tr,
-  UpgradePlanModal
-} from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useOrganization,
-  useUser,
-  useWorkspace
-} from "@app/context";
-import { usePopUp } from "@app/hooks";
-import {
-  useAddUserToWsE2EE,
-  useAddUserToWsNonE2EE,
-  useDeleteUserFromWorkspace,
-  useGetOrgUsers,
-  useGetUserWsKey,
-  useGetWorkspaceUsers
-} from "@app/hooks/api";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
-import { TWorkspaceUser } from "@app/hooks/api/types";
-import { ProjectVersion } from "@app/hooks/api/workspace/types";
-
-import { MemberRoleForm } from "./MemberRoleForm";
-
-const addMemberFormSchema = z.object({
-  orgMembershipId: z.string().trim()
-});
-
-type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
-
-const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
-const formatRoleName = (role: string, customRoleName?: string) => {
-  if (role === ProjectMembershipRole.Custom) return customRoleName;
-  if (role === ProjectMembershipRole.Member) return "Developer";
-  if (role === ProjectMembershipRole.NoAccess) return "No access";
-  return role;
-};
-
-export const MemberListTab = () => {
-  const { t } = useTranslation();
-
-  const { currentOrg } = useOrganization();
-  const { currentWorkspace } = useWorkspace();
-  const { user } = useUser();
-
-  const userId = user?.id || "";
-  const orgId = currentOrg?.id || "";
-  const workspaceId = currentWorkspace?.id || "";
-
-  const { data: wsKey } = useGetUserWsKey(workspaceId);
-  const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
-  const { data: orgUsers } = useGetOrgUsers(orgId);
-
-  const [searchMemberFilter, setSearchMemberFilter] = useState("");
-
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "addMember",
-    "removeMember",
-    "upgradePlan",
-    "updateRole"
-  ] as const);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
-
-  const { mutateAsync: addUserToWorkspace } = useAddUserToWsE2EE();
-  const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
-  const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
-
-  const onAddMember = async ({ orgMembershipId }: TAddMemberForm) => {
-    if (!currentWorkspace) return;
-    if (!currentOrg?.id) return;
-    // TODO(akhilmhdh): Move to memory storage
-    const userPrivateKey = localStorage.getItem("PRIVATE_KEY");
-    if (!userPrivateKey || !wsKey) {
-      createNotification({
-        text: "Failed to find private key. Try re-login"
-      });
-      return;
-    }
-    const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
-    if (!orgUser) return;
-
-    try {
-      // TODO: update
-      if (currentWorkspace.version === ProjectVersion.V1) {
-        await addUserToWorkspace({
-          workspaceId,
-          userPrivateKey,
-          decryptKey: wsKey,
-          members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
-        });
-      } else if (currentWorkspace.version === ProjectVersion.V2) {
-        await addUserToWorkspaceNonE2EE({
-          projectId: workspaceId,
-          usernames: [orgUser.user.username]
-        });
-      } else {
-        createNotification({
-          text: "Failed to add user to project, unknown project type",
-          type: "error"
-        });
-
-        return;
-      }
-      createNotification({
-        text: "Successfully added user to the project",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to add user to project",
-        type: "error"
-      });
-    }
-    handlePopUpClose("addMember");
-    reset();
-  };
-
-  const handleRemoveUser = async () => {
-    const username = (popUp?.removeMember?.data as { username: string })?.username;
-    if (!currentOrg?.id) return;
-
-    try {
-      await removeUserFromWorkspace({ workspaceId, usernames: [username] });
-      createNotification({
-        text: "Successfully removed user from project",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to remove user from the project",
-        type: "error"
-      });
-    }
-    handlePopUpClose("removeMember");
-  };
-
-  const filterdUsers = useMemo(
-    () =>
-      members?.filter(
-        ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
-          inviteEmail?.includes(searchMemberFilter.toLowerCase())
-      ),
-    [members, searchMemberFilter]
-  );
-
-  const filteredOrgUsers = useMemo(() => {
-    const wsUserUsernames = new Map();
-    members?.forEach((member) => {
-      wsUserUsernames.set(member.user.username, true);
-    });
-    return (orgUsers || []).filter(
-      ({ status, user: u }) => status === "accepted" && !wsUserUsernames.has(u.username)
-    );
-  }, [orgUsers, members]);
-
-  return (
-    <motion.div
-      key="user-role-1"
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">Members</p>
-        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
-          {(isAllowed) => (
-            <Button
-              colorSchema="primary"
-              type="submit"
-              leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => handlePopUpOpen("addMember")}
-              isDisabled={!isAllowed}
-            >
-              Add Member
-            </Button>
-          )}
-        </ProjectPermissionCan>
-      </div>
-      <Input
-        value={searchMemberFilter}
-        onChange={(e) => setSearchMemberFilter(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
-      />
-      <div className="mt-4">
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Username</Th>
-                <Th>Role</Th>
-                <Th className="w-5" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isMembersLoading && <TableSkeleton columns={4} innerKey="project-members" />}
-              {!isMembersLoading &&
-                filterdUsers?.map((projectMember, index) => {
-                  const { user: u, inviteEmail, id: membershipId, roles } = projectMember;
-                  const name = u ? `${u.firstName} ${u.lastName}` : "-";
-                  const email = u?.email || inviteEmail;
-
-                  return (
-                    <Tr key={`membership-${membershipId}`} className="w-full">
-                      <Td>{name}</Td>
-                      <Td>{email}</Td>
-                      <Td>
-                        <div className="flex items-center space-x-2">
-                          {roles
-                            .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
-                            .map(
-                              ({
-                                role,
-                                customRoleName,
-                                id,
-                                isTemporary,
-                                temporaryAccessEndTime
-                              }) => {
-                                const isExpired =
-                                  new Date() > new Date(temporaryAccessEndTime || ("" as string));
-                                return (
-                                  <Tag key={id}>
-                                    <div className="flex items-center space-x-2">
-                                      <div className="capitalize">
-                                        {formatRoleName(role, customRoleName)}
-                                      </div>
-                                      {isTemporary && (
-                                        <div>
-                                          <Tooltip
-                                            content={
-                                              isExpired ? "Timed role expired" : "Timed role access"
-                                            }
-                                          >
-                                            <FontAwesomeIcon
-                                              icon={faClock}
-                                              className={twMerge(isExpired && "text-red-600")}
-                                            />
-                                          </Tooltip>
-                                        </div>
-                                      )}
-                                    </div>
-                                  </Tag>
-                                );
-                              }
-                            )}
-                          {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
-                            <HoverCard>
-                              <HoverCardTrigger>
-                                <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
-                              </HoverCardTrigger>
-                              <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
-                                {roles
-                                  .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
-                                  .map(
-                                    ({
-                                      role,
-                                      customRoleName,
-                                      id,
-                                      isTemporary,
-                                      temporaryAccessEndTime
-                                    }) => {
-                                      const isExpired =
-                                        new Date() >
-                                        new Date(temporaryAccessEndTime || ("" as string));
-                                      return (
-                                        <Tag key={id} className="capitalize">
-                                          <div className="flex items-center space-x-2">
-                                            <div>{formatRoleName(role, customRoleName)}</div>
-                                            {isTemporary && (
-                                              <div>
-                                                <Tooltip
-                                                  content={
-                                                    isExpired
-                                                      ? "Access expired"
-                                                      : "Temporary access"
-                                                  }
-                                                >
-                                                  <FontAwesomeIcon
-                                                    icon={faClock}
-                                                    className={twMerge(
-                                                      new Date() >
-                                                      new Date(
-                                                        temporaryAccessEndTime as string
-                                                      ) && "text-red-600"
-                                                    )}
-                                                  />
-                                                </Tooltip>
-                                              </div>
-                                            )}
-                                          </div>
-                                        </Tag>
-                                      );
-                                    }
-                                  )}
-                              </HoverCardContent>
-                            </HoverCard>
-                          )}
-                          {userId !== u?.id && (
-                            <Tooltip content="Edit permission">
-                              <IconButton
-                                size="sm"
-                                variant="plain"
-                                ariaLabel="update-role"
-                                onClick={() =>
-                                  handlePopUpOpen("updateRole", { ...projectMember, index })
-                                }
-                              >
-                                <FontAwesomeIcon icon={faEdit} />
-                              </IconButton>
-                            </Tooltip>
-                          )}
-                        </div>
-                      </Td>
-                      <Td>
-                        {userId !== u?.id && (
-                          <div className="flex items-center space-x-2">
-                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Delete}
-                              a={ProjectPermissionSub.Member}
-                            >
-                              {(isAllowed) => (
-                                <IconButton
-                                  size="lg"
-                                  colorSchema="danger"
-                                  variant="plain"
-                                  ariaLabel="update"
-                                  className="ml-4"
-                                  isDisabled={userId === u?.id || !isAllowed}
-                                  onClick={() =>
-                                    handlePopUpOpen("removeMember", { username: u.username })
-                                  }
-                                >
-                                  <FontAwesomeIcon icon={faXmark} />
-                                </IconButton>
-                              )}
-                            </ProjectPermissionCan>
-                          </div>
-                        )}
-                      </Td>
-                    </Tr>
-                  );
-                })}
-            </TBody>
-          </Table>
-          {!isMembersLoading && filterdUsers?.length === 0 && (
-            <EmptyState title="No project members found" icon={faUsers} />
-          )}
-        </TableContainer>
-      </div>
-      <Modal
-        isOpen={popUp?.addMember?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("addMember", isOpen)}
-      >
-        <ModalContent
-          title={t("section.members.add-dialog.add-member-to-project") as string}
-          subTitle={t("section.members.add-dialog.user-will-email")}
-        >
-          {filteredOrgUsers.length ? (
-            <form onSubmit={handleSubmit(onAddMember)}>
-              <Controller
-                control={control}
-                defaultValue={filteredOrgUsers?.[0]?.user?.username}
-                name="orgMembershipId"
-                render={({ field, fieldState: { error } }) => (
-                  <FormControl label="Username" isError={Boolean(error)} errorText={error?.message}>
-                    <Select
-                      position="popper"
-                      className="w-full"
-                      defaultValue={filteredOrgUsers?.[0]?.user?.username}
-                      value={field.value}
-                      onValueChange={field.onChange}
-                    >
-                      {filteredOrgUsers.map(({ id: orgUserId, user: u }) => (
-                        <SelectItem value={orgUserId} key={`org-membership-join-${orgUserId}`}>
-                          {u?.username}
-                        </SelectItem>
-                      ))}
-                    </Select>
-                  </FormControl>
-                )}
-              />
-              <div className="mt-8 flex items-center">
-                <Button
-                  className="mr-4"
-                  size="sm"
-                  type="submit"
-                  isLoading={isSubmitting}
-                  isDisabled={isSubmitting}
-                >
-                  Add Member
-                </Button>
-                <Button
-                  colorSchema="secondary"
-                  variant="plain"
-                  onClick={() => handlePopUpClose("addMember")}
-                >
-                  Cancel
-                </Button>
-              </div>
-            </form>
-          ) : (
-            <div className="flex flex-col space-y-4">
-              <div>All the users in your organization are already invited.</div>
-              <Link href={`/org/${currentWorkspace?.orgId}/members`}>
-                <Button variant="outline_bg">Add users to organization</Button>
-              </Link>
-            </div>
-          )}
-        </ModalContent>
-      </Modal>
-      <Modal
-        isOpen={popUp.updateRole.isOpen}
-        onOpenChange={(state) => handlePopUpToggle("updateRole", state)}
-      >
-        <ModalContent
-          className="max-w-4xl"
-          title={`Manage Access for ${(popUp.updateRole.data as TWorkspaceUser)?.user?.email}`}
-          subTitle={`
-          Configure role-based access control by assigning Infisical users a mix of roles and specific privileges. A user will gain access to all actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
-          `}
-        >
-          <MemberRoleForm
-            onOpenUpgradeModal={(description) => handlePopUpOpen("upgradePlan", { description })}
-            projectMember={
-              filterdUsers?.[
-              (popUp.updateRole?.data as TWorkspaceUser & { index: number })?.index
-              ] as TWorkspaceUser
-            }
-          />
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.removeMember.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this user from the project?"
-        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
-        onDeleteApproved={handleRemoveUser}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text={(popUp.upgradePlan?.data as { description: string })?.description}
-      />
-    </motion.div>
-  );
-};

frontend/src/views/Project/MembersPage/components/MemberListTab/index.tsx

@@ -1 +0,0 @@
-export { MemberListTab } from "./MemberListTab";

frontend/src/views/Project/MembersPage/components/MembersTab/MembersTab.tsx

@@ -0,0 +1,22 @@
+import { motion } from "framer-motion";
+
+import { useWorkspace } from "@app/context";
+
+import { GroupsSection } from "../GroupsTab/components";
+import { MembersSection } from "./components";
+
+export const MembersTab = () => {
+  const { currentWorkspace } = useWorkspace();
+  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 />
+      {currentWorkspace?.version && currentWorkspace.version > 1 && <GroupsSection />}
+    </motion.div>
+  );
+};

frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx

@@ -0,0 +1,177 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button,FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import {
+  useAddUserToWsE2EE,
+  useAddUserToWsNonE2EE,
+  useGetOrgUsers,
+  useGetUserWsKey,
+  useGetWorkspaceUsers} from "@app/hooks/api";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const addMemberFormSchema = z.object({
+  orgMembershipId: z.string().trim()
+});
+
+type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
+
+type Props = {
+  popUp: UsePopUpState<["addMember"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addMember"]>, state?: boolean) => void;
+};
+
+export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { t } = useTranslation();
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
+
+  const orgId = currentOrg?.id || "";
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: wsKey } = useGetUserWsKey(workspaceId);
+  const { data: members } = useGetWorkspaceUsers(workspaceId);
+  const { data: orgUsers } = useGetOrgUsers(orgId);
+
+  const { mutateAsync: addUserToWorkspace } = useAddUserToWsE2EE();
+  const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
+
+  const onAddMember = async ({ orgMembershipId }: TAddMemberForm) => {
+    if (!currentWorkspace) return;
+    if (!currentOrg?.id) return;
+    // TODO(akhilmhdh): Move to memory storage
+    const userPrivateKey = localStorage.getItem("PRIVATE_KEY");
+    if (!userPrivateKey || !wsKey) {
+      createNotification({
+        text: "Failed to find private key. Try re-login"
+      });
+      return;
+    }
+    const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
+    if (!orgUser) return;
+
+    try {
+      // TODO: update
+      if (currentWorkspace.version === ProjectVersion.V1) {
+        await addUserToWorkspace({
+          workspaceId,
+          userPrivateKey,
+          decryptKey: wsKey,
+          members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
+        });
+      } else if (currentWorkspace.version === ProjectVersion.V2) {
+        await addUserToWorkspaceNonE2EE({
+          projectId: workspaceId,
+          usernames: [orgUser.user.username]
+        });
+      } else {
+        createNotification({
+          text: "Failed to add user to project, unknown project type",
+          type: "error"
+        });
+
+        return;
+      }
+      createNotification({
+        text: "Successfully added user to the project",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to add user to project",
+        type: "error"
+      });
+    }
+    handlePopUpToggle("addMember", false);
+    reset();
+  };
+
+  const filteredOrgUsers = useMemo(() => {
+    const wsUserUsernames = new Map();
+    members?.forEach((member) => {
+      wsUserUsernames.set(member.user.username, true);
+    });
+    return (orgUsers || []).filter(
+      ({ status, user: u }) => status === "accepted" && !wsUserUsernames.has(u.username)
+    );
+  }, [orgUsers, members]);
+
+  return (
+    <Modal
+      isOpen={popUp?.addMember?.isOpen}
+      onOpenChange={(isOpen) => handlePopUpToggle("addMember", isOpen)}
+    >
+      <ModalContent
+        title={t("section.members.add-dialog.add-member-to-project") as string}
+        subTitle={t("section.members.add-dialog.user-will-email")}
+      >
+        {filteredOrgUsers.length ? (
+          <form onSubmit={handleSubmit(onAddMember)}>
+            <Controller
+              control={control}
+              defaultValue={filteredOrgUsers?.[0]?.user?.username}
+              name="orgMembershipId"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl label="Username" isError={Boolean(error)} errorText={error?.message}>
+                  <Select
+                    position="popper"
+                    className="w-full"
+                    defaultValue={filteredOrgUsers?.[0]?.user?.username}
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    {filteredOrgUsers.map(({ id: orgUserId, user: u }) => (
+                      <SelectItem value={orgUserId} key={`org-membership-join-${orgUserId}`}>
+                        {u?.username}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                Add Member
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addMember", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="flex flex-col space-y-4">
+            <div>All the users in your organization are already invited.</div>
+            <Link href={`/org/${currentWorkspace?.orgId}/members`}>
+              <Button variant="outline_bg">Add users to organization</Button>
+            </Link>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersSection.tsx

@@ -0,0 +1,86 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub , useOrganization, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteUserFromWorkspace } from "@app/hooks/api";
+
+import { AddMemberModal } from "./AddMemberModal";
+import { MembersTable } from "./MembersTable";
+
+export const MembersSection = () => {
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
+
+  const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "addMember",
+    "removeMember",
+    "upgradePlan",
+    "updateRole"
+  ] as const);
+
+  const handleRemoveUser = async () => {
+    const username = (popUp?.removeMember?.data as { username: string })?.username;
+    if (!currentOrg?.id) return;
+    if (!currentWorkspace?.id) return;
+
+    try {
+      await removeUserFromWorkspace({ workspaceId: currentWorkspace.id, usernames: [username] });
+      createNotification({
+        text: "Successfully removed user from project",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to remove user from the project",
+        type: "error"
+      });
+    }
+    handlePopUpClose("removeMember");
+  };
+
+  return (
+    <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">Users</p>
+        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("addMember")}
+              isDisabled={!isAllowed}
+            >
+              Add Member
+            </Button>
+          )}
+        </ProjectPermissionCan>
+      </div>
+      <MembersTable
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <AddMemberModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.removeMember.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this user from the project?"
+        onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
+        onDeleteApproved={handleRemoveUser}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
+    </div>
+  );
+};

frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx

@@ -0,0 +1,269 @@
+import { useMemo,useState } from "react";
+import {
+  faClock,
+  faEdit,
+  faMagnifyingGlass,
+  faTrash,
+  faUsers} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  Tag,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useUser,
+  useWorkspace} from "@app/context";
+import { useGetWorkspaceUsers } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { MemberRoleForm } from "./MemberRoleForm";
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+const formatRoleName = (role: string, customRoleName?: string) => {
+  if (role === ProjectMembershipRole.Custom) return customRoleName;
+  if (role === ProjectMembershipRole.Member) return "Developer";
+  if (role === ProjectMembershipRole.NoAccess) return "No access";
+  return role;
+};
+
+type Props = {
+  popUp: UsePopUpState<["updateRole"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeMember", "updateRole", "upgradePlan"]>,
+    data?: {}
+  ) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["updateRole"]>, state?: boolean) => void;
+};
+
+export const MembersTable = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const [searchMemberFilter, setSearchMemberFilter] = useState("");
+
+  const { currentWorkspace } = useWorkspace();
+  const { user } = useUser();
+
+  const userId = user?.id || "";
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
+
+  const filterdUsers = useMemo(
+    () =>
+      members?.filter(
+        ({ user: u, inviteEmail }) =>
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
+      ),
+    [members, searchMemberFilter]
+  );
+
+  return (
+    <div>
+      <Input
+        value={searchMemberFilter}
+        onChange={(e) => setSearchMemberFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search members..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Username</Th>
+              <Th>Role</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isMembersLoading && <TableSkeleton columns={4} innerKey="project-members" />}
+            {!isMembersLoading &&
+              filterdUsers?.map((projectMember, index) => {
+                const { user: u, inviteEmail, id: membershipId, roles } = projectMember;
+                const name = u ? `${u.firstName} ${u.lastName}` : "-";
+                const email = u?.email || inviteEmail;
+
+                return (
+                  <Tr key={`membership-${membershipId}`} className="group w-full">
+                    <Td>{name}</Td>
+                    <Td>{email}</Td>
+                    <Td>
+                      <div className="flex items-center space-x-2">
+                        {roles
+                          .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+                          .map(
+                            ({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+                              const isExpired =
+                                new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                              return (
+                                <Tag key={id}>
+                                  <div className="flex items-center space-x-2">
+                                    <div className="capitalize">
+                                      {formatRoleName(role, customRoleName)}
+                                    </div>
+                                    {isTemporary && (
+                                      <div>
+                                        <Tooltip
+                                          content={
+                                            isExpired ? "Timed role expired" : "Timed role access"
+                                          }
+                                        >
+                                          <FontAwesomeIcon
+                                            icon={faClock}
+                                            className={twMerge(isExpired && "text-red-600")}
+                                          />
+                                        </Tooltip>
+                                      </div>
+                                    )}
+                                  </div>
+                                </Tag>
+                              );
+                            }
+                          )}
+                        {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+                          <HoverCard>
+                            <HoverCardTrigger>
+                              <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
+                            </HoverCardTrigger>
+                            <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+                              {roles
+                                .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+                                .map(
+                                  ({
+                                    role,
+                                    customRoleName,
+                                    id,
+                                    isTemporary,
+                                    temporaryAccessEndTime
+                                  }) => {
+                                    const isExpired =
+                                      new Date() >
+                                      new Date(temporaryAccessEndTime || ("" as string));
+                                    return (
+                                      <Tag key={id} className="capitalize">
+                                        <div className="flex items-center space-x-2">
+                                          <div>{formatRoleName(role, customRoleName)}</div>
+                                          {isTemporary && (
+                                            <div>
+                                              <Tooltip
+                                                content={
+                                                  isExpired ? "Access expired" : "Temporary access"
+                                                }
+                                              >
+                                                <FontAwesomeIcon
+                                                  icon={faClock}
+                                                  className={twMerge(
+                                                    new Date() >
+                                                      new Date(temporaryAccessEndTime as string) &&
+                                                      "text-red-600"
+                                                  )}
+                                                />
+                                              </Tooltip>
+                                            </div>
+                                          )}
+                                        </div>
+                                      </Tag>
+                                    );
+                                  }
+                                )}
+                            </HoverCardContent>
+                          </HoverCard>
+                        )}
+                        {userId !== u?.id && (
+                          <Tooltip content="Edit permission">
+                            <IconButton
+                              size="sm"
+                              variant="plain"
+                              ariaLabel="update-role"
+                              onClick={() =>
+                                handlePopUpOpen("updateRole", { ...projectMember, index })
+                              }
+                            >
+                              <FontAwesomeIcon icon={faEdit} />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </div>
+                    </Td>
+                    <Td>
+                      {userId !== u?.id && (
+                        <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Member}
+                          >
+                            {(isAllowed) => (
+                              <IconButton
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                                className="ml-4"
+                                isDisabled={userId === u?.id || !isAllowed}
+                                onClick={() =>
+                                  handlePopUpOpen("removeMember", { username: u.username })
+                                }
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </IconButton>
+                            )}
+                          </ProjectPermissionCan>
+                        </div>
+                      )}
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isMembersLoading && filterdUsers?.length === 0 && (
+          <EmptyState title="No project members found" icon={faUsers} />
+        )}
+      </TableContainer>
+      <Modal
+        isOpen={popUp.updateRole.isOpen}
+        onOpenChange={(state) => handlePopUpToggle("updateRole", state)}
+      >
+        <ModalContent
+          className="max-w-4xl"
+          title={`Manage Access for ${(popUp.updateRole.data as TWorkspaceUser)?.user?.email}`}
+          subTitle={`
+          Configure role-based access control by assigning Infisical users a mix of roles and specific privileges. A user will gain access to all actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
+          `}
+        >
+          <MemberRoleForm
+            onOpenUpgradeModal={(description) => handlePopUpOpen("upgradePlan", { description })}
+            projectMember={
+              filterdUsers?.[
+                (popUp.updateRole?.data as TWorkspaceUser & { index: number })?.index
+              ] as TWorkspaceUser
+            }
+          />
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};

frontend/src/views/Project/MembersPage/components/MembersTab/components/index.tsx

@@ -0,0 +1 @@
+export { MembersSection } from "./MembersSection";

frontend/src/views/Project/MembersPage/components/MembersTab/index.tsx

@@ -0,0 +1 @@
+export { MembersTab } from "./MembersTab";

frontend/src/views/Project/MembersPage/components/index.tsx

@@ -1,5 +1,5 @@
 export { GroupsTab } from "./GroupsTab";
 export { IdentityTab } from "./IdentityTab";
-export { MemberListTab } from "./MemberListTab";
+export { MembersTab } from "./MembersTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";
 export { ServiceTokenTab } from "./ServiceTokenTab";

frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, ModalContent } from "@app/components/v2";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-import { SpecificPrivilegeSecretForm } from "@app/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection";
+import { SpecificPrivilegeSecretForm } from "@app/views/Project/MembersPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection";
 
 export const RequestAccessModal = ({
   isOpen,

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -77,7 +77,7 @@ export const ShareSecretPublicPage = ({ isNewSession }: { isNewSession: boolean
           </div>
           <div className="w-full flex justify-center">
             <h1 className={`${id ? "max-w-sm mb-4": "max-w-md mt-4 mb-6"} bg-gradient-to-b from-white to-bunker-200 bg-clip-text px-4 text-center text-3xl font-medium text-transparent`}>
-              {id ? "Someone shared a secret on Infisical with you" : "Share a secret with Infisical"}
+              {id ? "Someone shared a secret via Infisical with you" : "Share a secret via Infisical"}
             </h1>
           </div>
           <div className="m-auto mt-4 flex w-full max-w-2xl justify-center px-6">

frontend/src/views/admin/DashboardPage/UserPanel.tsx

@@ -16,9 +16,10 @@ import {
   Td,
   Th,
   THead,
-  Tr
+  Tr,
+  UpgradePlanModal
 } from "@app/components/v2";
-import { useUser } from "@app/context";
+import { useSubscription, useUser } from "@app/context";
 import { useDebounce, usePopUp } from "@app/hooks";
 import { useAdminDeleteUser, useAdminGetUsers } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -27,8 +28,8 @@ const UserPanelTable = ({
   handlePopUpOpen
 }: {
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["removeUser"]>,
+    popUpName: keyof UsePopUpState<["removeUser", "upgradePlan"]>,
-    data: {
+    data?: {
       username: string;
       id: string;
     }
@@ -38,6 +39,7 @@ const UserPanelTable = ({
   const { user } = useUser();
   const userId = user?.id || "";
   const debounedSearchTerm = useDebounce(searchUserFilter, 500);
+  const { subscription } = useSubscription();
 
   const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetUsers({
     limit: 20,
@@ -83,7 +85,13 @@ const UserPanelTable = ({
                                 variant="plain"
                                 ariaLabel="update"
                                 isDisabled={userId === id}
-                                onClick={() => handlePopUpOpen("removeUser", { username, id })}
+                                onClick={() => {
+                                  if (!subscription?.instanceUserManagement) {
+                                    handlePopUpOpen("upgradePlan");
+                                    return;
+                                  }
+                                  handlePopUpOpen("removeUser", { username, id });
+                                }}
                               >
                                 <FontAwesomeIcon icon={faXmark} />
                               </IconButton>
@@ -117,7 +125,8 @@ const UserPanelTable = ({
 
 export const UserPanel = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "removeUser"
+    "removeUser",
+    "upgradePlan"
   ] as const);
 
   const { mutateAsync: deleteUser } = useAdminDeleteUser();
@@ -156,6 +165,11 @@ export const UserPanel = () => {
         onChange={(isOpen) => handlePopUpToggle("removeUser", isOpen)}
         onDeleteApproved={handleRemoveUser}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="Deleting users via Admin UI is only available on Infisical's Pro plan and above."
+      />
     </div>
   );
 };