Fix token auth ref

Fix Token Auth Ref in Access Token DAL

backend/src/lib/api-docs/constants.ts

@@ -70,13 +70,13 @@ export const UNIVERSAL_AUTH = {
       "The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
   },
   RETRIEVE: {
-    identityId: "The ID of the identity to retrieve."
+    identityId: "The ID of the identity to retrieve the auth method for."
   },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
   },
   UPDATE: {
-    identityId: "The ID of the identity to update.",
+    identityId: "The ID of the identity to update the auth method for.",
     clientSecretTrustedIps: "The new list of IPs or CIDR ranges that the Client Secret can be used from.",
     accessTokenTrustedIps: "The new list of IPs or CIDR ranges that access tokens can be used from.",
     accessTokenTTL: "The new lifetime for an access token in seconds.",
@@ -119,32 +119,228 @@ export const AWS_AUTH = {
       "The base64-encoded body of the signed request. Most likely, the base64-encoding of Action=GetCallerIdentity&Version=2011-06-15.",
     iamRequestHeaders: "The base64-encoded headers of the sts:GetCallerIdentity signed request."
   },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    allowedPrincipalArns:
+      "The comma-separated list of trusted IAM principal ARNs that are allowed to authenticate with Infisical.",
+    allowedAccountIds:
+      "The comma-separated list of trusted AWS account IDs that are allowed to authenticate with Infisical.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    stsEndpoint: "The endpoint URL for the AWS STS API.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    allowedPrincipalArns:
+      "The new comma-separated list of trusted IAM principal ARNs that are allowed to authenticate with Infisical.",
+    allowedAccountIds:
+      "The new comma-separated list of trusted AWS account IDs that are allowed to authenticate with Infisical.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    stsEndpoint: "The new endpoint URL for the AWS STS API.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
   }
 } as const;
 
 export const AZURE_AUTH = {
+  LOGIN: {
+    identityId: "The ID of the identity to login."
+  },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    tenantId: "The tenant ID for the Azure AD organization.",
+    resource: "The resource URL for the application registered in Azure AD.",
+    allowedServicePrincipalIds:
+      "The comma-separated list of Azure AD service principal IDs that are allowed to authenticate with Infisical.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    tenantId: "The new tenant ID for the Azure AD organization.",
+    resource: "The new resource URL for the application registered in Azure AD.",
+    allowedServicePrincipalIds:
+      "The new comma-separated list of Azure AD service principal IDs that are allowed to authenticate with Infisical.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
   }
 } as const;
 
 export const GCP_AUTH = {
+  LOGIN: {
+    identityId: "The ID of the identity to login."
+  },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    allowedServiceAccounts:
+      "The comma-separated list of trusted service account emails corresponding to the GCE resource(s) allowed to authenticate with Infisical.",
+    allowedProjects:
+      "The comma-separated list of trusted GCP projects that the GCE instance must belong to authenticate with Infisical.",
+    allowedZones:
+      "The comma-separated list of trusted zones that the GCE instances must belong to authenticate with Infisical.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    allowedServiceAccounts:
+      "The new comma-separated list of trusted service account emails corresponding to the GCE resource(s) allowed to authenticate with Infisical.",
+    allowedProjects:
+      "The new comma-separated list of trusted GCP projects that the GCE instance must belong to authenticate with Infisical.",
+    allowedZones:
+      "The new comma-separated list of trusted zones that the GCE instances must belong to authenticate with Infisical.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
   }
 } as const;
 
 export const KUBERNETES_AUTH = {
+  LOGIN: {
+    identityId: "The ID of the identity to login."
+  },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    kubernetesHost: "The host string, host:port pair, or URL to the base of the Kubernetes API server.",
+    caCert: "The PEM-encoded CA cert for the Kubernetes API server.",
+    tokenReviewerJwt:
+      "The long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods.",
+    allowedNamespaces:
+      "The comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical.",
+    allowedNames: "The comma-separated list of trusted service account names that can authenticate with Infisical.",
+    allowedAudience:
+      "The optional audience claim that the service account JWT token must have to authenticate with Infisical.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    kubernetesHost: "The new host string, host:port pair, or URL to the base of the Kubernetes API server.",
+    caCert: "The new PEM-encoded CA cert for the Kubernetes API server.",
+    tokenReviewerJwt:
+      "The new long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods.",
+    allowedNamespaces:
+      "The new comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical.",
+    allowedNames: "The new comma-separated list of trusted service account names that can authenticate with Infisical.",
+    allowedAudience:
+      "The new optional audience claim that the service account JWT token must have to authenticate with Infisical.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
+  }
+} as const;
+
+export const TOKEN_AUTH = {
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
+  REVOKE: {
+    identityId: "The ID of the identity to revoke the auth method for."
+  },
+  GET_TOKENS: {
+    identityId: "The ID of the identity to list token metadata for.",
+    offset: "The offset to start from. If you enter 10, it will start from the 10th token.",
+    limit: "The number of tokens to return"
+  },
+  CREATE_TOKEN: {
+    identityId: "The ID of the identity to create the token for.",
+    name: "The name of the token to create"
+  },
+  UPDATE_TOKEN: {
+    tokenId: "The ID of the token to update metadata for",
+    name: "The name of the token to update to"
+  },
+  REVOKE_TOKEN: {
+    tokenId: "The ID of the token to revoke"
   }
 } as const;
 
 export const OIDC_AUTH = {
+  LOGIN: {
+    identityId: "The ID of the identity to login."
+  },
+  ATTACH: {
+    identityId: "The ID of the identity to attach the configuration onto.",
+    oidcDiscoveryUrl: "The URL used to retrieve the OpenID Connect configuration from the identity provider.",
+    caCert: "The PEM-encoded CA cert for establishing secure communication with the Identity Provider endpoints.",
+    boundIssuer: "The unique identifier of the identity provider issuing the JWT.",
+    boundAudiences: "The list of intended recipients.",
+    boundClaims: "The attributes that should be present in the JWT for it to be valid.",
+    boundSubject: "The expected principal that is the subject of the JWT.",
+    accessTokenTrustedIps: "The IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The maximum number of times that an access token can be used."
+  },
+  UPDATE: {
+    identityId: "The ID of the identity to update the auth method for.",
+    oidcDiscoveryUrl: "The new URL used to retrieve the OpenID Connect configuration from the identity provider.",
+    caCert: "The new PEM-encoded CA cert for establishing secure communication with the Identity Provider endpoints.",
+    boundIssuer: "The new unique identifier of the identity provider issuing the JWT.",
+    boundAudiences: "The new list of intended recipients.",
+    boundClaims: "The new attributes that should be present in the JWT for it to be valid.",
+    boundSubject: "The new expected principal that is the subject of the JWT.",
+    accessTokenTrustedIps: "The new IPs or CIDR ranges that access tokens can be used from.",
+    accessTokenTTL: "The new lifetime for an acccess token in seconds.",
+    accessTokenMaxTTL: "The new maximum lifetime for an acccess token in seconds.",
+    accessTokenNumUsesLimit: "The new maximum number of times that an access token can be used."
+  },
+  RETRIEVE: {
+    identityId: "The ID of the identity to retrieve the auth method for."
+  },
   REVOKE: {
-    identityId: "The ID of the identity to revoke."
+    identityId: "The ID of the identity to revoke the auth method for."
   }
 } as const;
 

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

@@ -77,19 +77,25 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(AWS_AUTH.ATTACH.identityId)
       }),
       body: z.object({
-        stsEndpoint: z.string().trim().min(1).default("https://sts.amazonaws.com/"),
-        allowedPrincipalArns: validatePrincipalArns,
-        allowedAccountIds: validateAccountIds,
+        stsEndpoint: z
+          .string()
+          .trim()
+          .min(1)
+          .default("https://sts.amazonaws.com/")
+          .describe(AWS_AUTH.ATTACH.stsEndpoint),
+        allowedPrincipalArns: validatePrincipalArns.describe(AWS_AUTH.ATTACH.allowedPrincipalArns),
+        allowedAccountIds: validateAccountIds.describe(AWS_AUTH.ATTACH.allowedAccountIds),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(AWS_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -97,15 +103,17 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(AWS_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0)
+          .default(2592000)
+          .describe(AWS_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(AWS_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -160,21 +168,22 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(AWS_AUTH.UPDATE.identityId)
       }),
       body: z.object({
-        stsEndpoint: z.string().trim().min(1).optional(),
-        allowedPrincipalArns: validatePrincipalArns,
-        allowedAccountIds: validateAccountIds,
+        stsEndpoint: z.string().trim().min(1).optional().describe(AWS_AUTH.UPDATE.stsEndpoint),
+        allowedPrincipalArns: validatePrincipalArns.describe(AWS_AUTH.UPDATE.allowedPrincipalArns),
+        allowedAccountIds: validateAccountIds.describe(AWS_AUTH.UPDATE.allowedAccountIds),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .optional(),
-        accessTokenTTL: z.number().int().min(0).optional(),
-        accessTokenNumUsesLimit: z.number().int().min(0).optional(),
+          .optional()
+          .describe(AWS_AUTH.UPDATE.accessTokenTrustedIps),
+        accessTokenTTL: z.number().int().min(0).optional().describe(AWS_AUTH.UPDATE.accessTokenTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(AWS_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
@@ -182,6 +191,7 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
             message: "accessTokenMaxTTL must have a non zero number"
           })
           .optional()
+          .describe(AWS_AUTH.UPDATE.accessTokenMaxTTL)
       }),
       response: {
         200: z.object({
@@ -236,7 +246,7 @@ export const registerIdentityAwsAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(AWS_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({

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

@@ -19,7 +19,7 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
     schema: {
       description: "Login with Azure Auth",
       body: z.object({
-        identityId: z.string(),
+        identityId: z.string().describe(AZURE_AUTH.LOGIN.identityId),
         jwt: z.string()
       }),
       response: {
@@ -72,19 +72,20 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(AZURE_AUTH.LOGIN.identityId)
       }),
       body: z.object({
-        tenantId: z.string().trim(),
-        resource: z.string().trim(),
-        allowedServicePrincipalIds: validateAzureAuthField,
+        tenantId: z.string().trim().describe(AZURE_AUTH.ATTACH.tenantId),
+        resource: z.string().trim().describe(AZURE_AUTH.ATTACH.resource),
+        allowedServicePrincipalIds: validateAzureAuthField.describe(AZURE_AUTH.ATTACH.allowedServicePrincipalIds),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(AZURE_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -92,15 +93,17 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(AZURE_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0)
+          .default(2592000)
+          .describe(AZURE_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(AZURE_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -154,21 +157,24 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(AZURE_AUTH.UPDATE.identityId)
       }),
       body: z.object({
-        tenantId: z.string().trim().optional(),
-        resource: z.string().trim().optional(),
-        allowedServicePrincipalIds: validateAzureAuthField.optional(),
+        tenantId: z.string().trim().optional().describe(AZURE_AUTH.UPDATE.tenantId),
+        resource: z.string().trim().optional().describe(AZURE_AUTH.UPDATE.resource),
+        allowedServicePrincipalIds: validateAzureAuthField
+          .optional()
+          .describe(AZURE_AUTH.UPDATE.allowedServicePrincipalIds),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .optional(),
-        accessTokenTTL: z.number().int().min(0).optional(),
-        accessTokenNumUsesLimit: z.number().int().min(0).optional(),
+          .optional()
+          .describe(AZURE_AUTH.UPDATE.accessTokenTrustedIps),
+        accessTokenTTL: z.number().int().min(0).optional().describe(AZURE_AUTH.UPDATE.accessTokenTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(AZURE_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
@@ -176,6 +182,7 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
             message: "accessTokenMaxTTL must have a non zero number"
           })
           .optional()
+          .describe(AZURE_AUTH.UPDATE.accessTokenMaxTTL)
       }),
       response: {
         200: z.object({
@@ -229,7 +236,7 @@ export const registerIdentityAzureAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(AZURE_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({

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

@@ -19,7 +19,7 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
     schema: {
       description: "Login with GCP Auth",
       body: z.object({
-        identityId: z.string(),
+        identityId: z.string().describe(GCP_AUTH.LOGIN.identityId),
         jwt: z.string()
       }),
       response: {
@@ -72,20 +72,21 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(GCP_AUTH.ATTACH.identityId)
       }),
       body: z.object({
         type: z.enum(["iam", "gce"]),
-        allowedServiceAccounts: validateGcpAuthField,
-        allowedProjects: validateGcpAuthField,
-        allowedZones: validateGcpAuthField,
+        allowedServiceAccounts: validateGcpAuthField.describe(GCP_AUTH.ATTACH.allowedServiceAccounts),
+        allowedProjects: validateGcpAuthField.describe(GCP_AUTH.ATTACH.allowedProjects),
+        allowedZones: validateGcpAuthField.describe(GCP_AUTH.ATTACH.allowedZones),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(GCP_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -93,15 +94,17 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(GCP_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0)
+          .default(2592000)
+          .describe(GCP_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(GCP_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -157,22 +160,23 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(GCP_AUTH.UPDATE.identityId)
       }),
       body: z.object({
         type: z.enum(["iam", "gce"]).optional(),
-        allowedServiceAccounts: validateGcpAuthField.optional(),
-        allowedProjects: validateGcpAuthField.optional(),
-        allowedZones: validateGcpAuthField.optional(),
+        allowedServiceAccounts: validateGcpAuthField.optional().describe(GCP_AUTH.UPDATE.allowedServiceAccounts),
+        allowedProjects: validateGcpAuthField.optional().describe(GCP_AUTH.UPDATE.allowedProjects),
+        allowedZones: validateGcpAuthField.optional().describe(GCP_AUTH.UPDATE.allowedZones),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .optional(),
-        accessTokenTTL: z.number().int().min(0).optional(),
-        accessTokenNumUsesLimit: z.number().int().min(0).optional(),
+          .optional()
+          .describe(GCP_AUTH.UPDATE.accessTokenTrustedIps),
+        accessTokenTTL: z.number().int().min(0).optional().describe(GCP_AUTH.UPDATE.accessTokenTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(GCP_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
@@ -180,6 +184,7 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
             message: "accessTokenMaxTTL must have a non zero number"
           })
           .optional()
+          .describe(GCP_AUTH.UPDATE.accessTokenMaxTTL)
       }),
       response: {
         200: z.object({
@@ -235,7 +240,7 @@ export const registerIdentityGcpAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(GCP_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({

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

@@ -30,7 +30,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
     schema: {
       description: "Login with Kubernetes Auth",
       body: z.object({
-        identityId: z.string().trim(),
+        identityId: z.string().trim().describe(KUBERNETES_AUTH.LOGIN.identityId),
         jwt: z.string().trim()
       }),
       response: {
@@ -85,22 +85,23 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(KUBERNETES_AUTH.ATTACH.identityId)
       }),
       body: z.object({
-        kubernetesHost: z.string().trim().min(1),
-        caCert: z.string().trim().default(""),
-        tokenReviewerJwt: z.string().trim().min(1),
-        allowedNamespaces: z.string(), // TODO: validation
-        allowedNames: z.string(),
-        allowedAudience: z.string(),
+        kubernetesHost: z.string().trim().min(1).describe(KUBERNETES_AUTH.ATTACH.kubernetesHost),
+        caCert: z.string().trim().default("").describe(KUBERNETES_AUTH.ATTACH.caCert),
+        tokenReviewerJwt: z.string().trim().min(1).describe(KUBERNETES_AUTH.ATTACH.tokenReviewerJwt),
+        allowedNamespaces: z.string().describe(KUBERNETES_AUTH.ATTACH.allowedNamespaces), // TODO: validation
+        allowedNames: z.string().describe(KUBERNETES_AUTH.ATTACH.allowedNames),
+        allowedAudience: z.string().describe(KUBERNETES_AUTH.ATTACH.allowedAudience),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(KUBERNETES_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -108,15 +109,22 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(KUBERNETES_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0)
+          .default(2592000)
+          .describe(KUBERNETES_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z
+          .number()
+          .int()
+          .min(0)
+          .default(0)
+          .describe(KUBERNETES_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -171,24 +179,30 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(KUBERNETES_AUTH.UPDATE.identityId)
       }),
       body: z.object({
-        kubernetesHost: z.string().trim().min(1).optional(),
-        caCert: z.string().trim().optional(),
-        tokenReviewerJwt: z.string().trim().min(1).optional(),
-        allowedNamespaces: z.string().optional(), // TODO: validation
-        allowedNames: z.string().optional(),
-        allowedAudience: z.string().optional(),
+        kubernetesHost: z.string().trim().min(1).optional().describe(KUBERNETES_AUTH.UPDATE.kubernetesHost),
+        caCert: z.string().trim().optional().describe(KUBERNETES_AUTH.UPDATE.caCert),
+        tokenReviewerJwt: z.string().trim().min(1).optional().describe(KUBERNETES_AUTH.UPDATE.tokenReviewerJwt),
+        allowedNamespaces: z.string().optional().describe(KUBERNETES_AUTH.UPDATE.allowedNamespaces), // TODO: validation
+        allowedNames: z.string().optional().describe(KUBERNETES_AUTH.UPDATE.allowedNames),
+        allowedAudience: z.string().optional().describe(KUBERNETES_AUTH.UPDATE.allowedAudience),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .optional(),
-        accessTokenTTL: z.number().int().min(0).optional(),
-        accessTokenNumUsesLimit: z.number().int().min(0).optional(),
+          .optional()
+          .describe(KUBERNETES_AUTH.UPDATE.accessTokenTrustedIps),
+        accessTokenTTL: z.number().int().min(0).optional().describe(KUBERNETES_AUTH.UPDATE.accessTokenTTL),
+        accessTokenNumUsesLimit: z
+          .number()
+          .int()
+          .min(0)
+          .optional()
+          .describe(KUBERNETES_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
@@ -196,6 +210,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
             message: "accessTokenMaxTTL must have a non zero number"
           })
           .optional()
+          .describe(KUBERNETES_AUTH.UPDATE.accessTokenMaxTTL)
       }),
       response: {
         200: z.object({
@@ -250,7 +265,7 @@ export const registerIdentityKubernetesRouter = async (server: FastifyZodProvide
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(KUBERNETES_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({

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

@@ -30,7 +30,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
     schema: {
       description: "Login with OIDC Auth",
       body: z.object({
-        identityId: z.string().trim(),
+        identityId: z.string().trim().describe(OIDC_AUTH.LOGIN.identityId),
         jwt: z.string().trim()
       }),
       response: {
@@ -85,16 +85,23 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(OIDC_AUTH.ATTACH.identityId)
       }),
       body: z.object({
+        oidcDiscoveryUrl: z.string().url().min(1).describe(OIDC_AUTH.ATTACH.oidcDiscoveryUrl),
+        caCert: z.string().trim().default("").describe(OIDC_AUTH.ATTACH.caCert),
+        boundIssuer: z.string().min(1).describe(OIDC_AUTH.ATTACH.boundIssuer),
+        boundAudiences: validateOidcAuthAudiencesField.describe(OIDC_AUTH.ATTACH.boundAudiences),
+        boundClaims: validateOidcBoundClaimsField.describe(OIDC_AUTH.ATTACH.boundClaims),
+        boundSubject: z.string().optional().default("").describe(OIDC_AUTH.ATTACH.boundSubject),
         accessTokenTrustedIps: z
           .object({
             ipAddress: z.string().trim()
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(OIDC_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -102,21 +109,17 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(OIDC_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0),
-        oidcDiscoveryUrl: z.string().url().min(1),
-        caCert: z.string().trim().default(""),
-        boundIssuer: z.string().min(1),
-        boundAudiences: validateOidcAuthAudiencesField,
-        boundClaims: validateOidcBoundClaimsField,
-        boundSubject: z.string().optional().default("")
+          .default(2592000)
+          .describe(OIDC_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(OIDC_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -176,17 +179,24 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(OIDC_AUTH.UPDATE.identityId)
       }),
       body: z
         .object({
+          oidcDiscoveryUrl: z.string().url().min(1).describe(OIDC_AUTH.UPDATE.oidcDiscoveryUrl),
+          caCert: z.string().trim().default("").describe(OIDC_AUTH.UPDATE.caCert),
+          boundIssuer: z.string().min(1).describe(OIDC_AUTH.UPDATE.boundIssuer),
+          boundAudiences: validateOidcAuthAudiencesField.describe(OIDC_AUTH.UPDATE.boundAudiences),
+          boundClaims: validateOidcBoundClaimsField.describe(OIDC_AUTH.UPDATE.boundClaims),
+          boundSubject: z.string().optional().default("").describe(OIDC_AUTH.UPDATE.boundSubject),
           accessTokenTrustedIps: z
             .object({
               ipAddress: z.string().trim()
             })
             .array()
             .min(1)
-            .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+            .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+            .describe(OIDC_AUTH.UPDATE.accessTokenTrustedIps),
           accessTokenTTL: z
             .number()
             .int()
@@ -194,21 +204,18 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
             .refine((value) => value !== 0, {
               message: "accessTokenTTL must have a non zero number"
             })
-            .default(2592000),
+            .default(2592000)
+            .describe(OIDC_AUTH.UPDATE.accessTokenTTL),
           accessTokenMaxTTL: z
             .number()
             .int()
             .refine((value) => value !== 0, {
               message: "accessTokenMaxTTL must have a non zero number"
             })
-            .default(2592000),
-          accessTokenNumUsesLimit: z.number().int().min(0).default(0),
-          oidcDiscoveryUrl: z.string().url().min(1),
-          caCert: z.string().trim().default(""),
-          boundIssuer: z.string().min(1),
-          boundAudiences: validateOidcAuthAudiencesField,
-          boundClaims: validateOidcBoundClaimsField,
-          boundSubject: z.string().optional().default("")
+            .default(2592000)
+            .describe(OIDC_AUTH.UPDATE.accessTokenMaxTTL),
+
+          accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(OIDC_AUTH.UPDATE.accessTokenNumUsesLimit)
         })
         .partial(),
       response: {
@@ -267,7 +274,7 @@ export const registerIdentityOidcAuthRouter = async (server: FastifyZodProvider)
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(OIDC_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({

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

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 import { IdentityAccessTokensSchema, IdentityTokenAuthsSchema } from "@app/db/schemas";
 import { EventType } from "@app/ee/services/audit-log/audit-log-types";
+import { TOKEN_AUTH } from "@app/lib/api-docs";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
@@ -23,7 +24,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(TOKEN_AUTH.ATTACH.identityId)
       }),
       body: z.object({
         accessTokenTrustedIps: z
@@ -32,7 +33,8 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           })
           .array()
           .min(1)
-          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]),
+          .default([{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }])
+          .describe(TOKEN_AUTH.ATTACH.accessTokenTrustedIps),
         accessTokenTTL: z
           .number()
           .int()
@@ -40,15 +42,17 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           .refine((value) => value !== 0, {
             message: "accessTokenTTL must have a non zero number"
           })
-          .default(2592000),
+          .default(2592000)
+          .describe(TOKEN_AUTH.ATTACH.accessTokenTTL),
         accessTokenMaxTTL: z
           .number()
           .int()
           .refine((value) => value !== 0, {
             message: "accessTokenMaxTTL must have a non zero number"
           })
-          .default(2592000),
-        accessTokenNumUsesLimit: z.number().int().min(0).default(0)
+          .default(2592000)
+          .describe(TOKEN_AUTH.ATTACH.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).default(0).describe(TOKEN_AUTH.ATTACH.accessTokenNumUsesLimit)
       }),
       response: {
         200: z.object({
@@ -102,7 +106,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string().trim()
+        identityId: z.string().trim().describe(TOKEN_AUTH.UPDATE.identityId)
       }),
       body: z.object({
         accessTokenTrustedIps: z
@@ -111,9 +115,10 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
           })
           .array()
           .min(1)
-          .optional(),
-        accessTokenTTL: z.number().int().min(0).optional(),
-        accessTokenNumUsesLimit: z.number().int().min(0).optional(),
+          .optional()
+          .describe(TOKEN_AUTH.UPDATE.accessTokenTrustedIps),
+        accessTokenTTL: z.number().int().min(0).optional().describe(TOKEN_AUTH.UPDATE.accessTokenTTL),
+        accessTokenNumUsesLimit: z.number().int().min(0).optional().describe(TOKEN_AUTH.UPDATE.accessTokenNumUsesLimit),
         accessTokenMaxTTL: z
           .number()
           .int()
@@ -121,6 +126,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
             message: "accessTokenMaxTTL must have a non zero number"
           })
           .optional()
+          .describe(TOKEN_AUTH.UPDATE.accessTokenMaxTTL)
       }),
       response: {
         200: z.object({
@@ -174,7 +180,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(TOKEN_AUTH.RETRIEVE.identityId)
       }),
       response: {
         200: z.object({
@@ -221,7 +227,7 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(TOKEN_AUTH.REVOKE.identityId)
       }),
       response: {
         200: z.object({
@@ -253,15 +259,6 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
     }
   });
 
-  // proposed
-  // update token by id: PATCH /token-auth/tokens/:tokenId
-  // revoke token by id: POST /token-auth/tokens/:tokenId/revoke
-
-  // current
-  // revoke token by id: POST /token/revoke-by-id
-
-  // token-auth/identities/:identityId/tokens
-
   server.route({
     method: "POST",
     url: "/token-auth/identities/:identityId/tokens",
@@ -270,17 +267,17 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
     },
     onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     schema: {
-      description: "Create token for identity with Token Auth configured",
+      description: "Create token for identity with Token Auth",
       security: [
         {
           bearerAuth: []
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(TOKEN_AUTH.CREATE_TOKEN.identityId)
       }),
       body: z.object({
-        name: z.string().optional()
+        name: z.string().optional().describe(TOKEN_AUTH.CREATE_TOKEN.name)
       }),
       response: {
         200: z.object({
@@ -331,18 +328,18 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
     },
     onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     schema: {
-      description: "Get tokens for identity with Token Auth configured",
+      description: "Get tokens for identity with Token Auth",
       security: [
         {
           bearerAuth: []
         }
       ],
       params: z.object({
-        identityId: z.string()
+        identityId: z.string().describe(TOKEN_AUTH.GET_TOKENS.identityId)
       }),
       querystring: z.object({
-        offset: z.coerce.number().min(0).max(100).default(0),
-        limit: z.coerce.number().min(1).max(100).default(20)
+        offset: z.coerce.number().min(0).max(100).default(0).describe(TOKEN_AUTH.GET_TOKENS.offset),
+        limit: z.coerce.number().min(1).max(100).default(20).describe(TOKEN_AUTH.GET_TOKENS.limit)
       }),
       response: {
         200: z.object({
@@ -383,17 +380,17 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
     },
     onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     schema: {
-      description: "Update token for identity with Token Auth configured",
+      description: "Update token for identity with Token Auth",
       security: [
         {
           bearerAuth: []
         }
       ],
       params: z.object({
-        tokenId: z.string()
+        tokenId: z.string().describe(TOKEN_AUTH.UPDATE_TOKEN.tokenId)
       }),
       body: z.object({
-        name: z.string().optional()
+        name: z.string().optional().describe(TOKEN_AUTH.UPDATE_TOKEN.name)
       }),
       response: {
         200: z.object({
@@ -436,14 +433,14 @@ export const registerIdentityTokenAuthRouter = async (server: FastifyZodProvider
     },
     onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
     schema: {
-      description: "Revoke token for identity with Token Auth configured",
+      description: "Revoke token for identity with Token Auth",
       security: [
         {
           bearerAuth: []
         }
       ],
       params: z.object({
-        tokenId: z.string()
+        tokenId: z.string().describe(TOKEN_AUTH.REVOKE_TOKEN.tokenId)
       }),
       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/identity-azure-auth/identity-azure-auth-fns.ts

@@ -17,7 +17,6 @@ export const validateAzureIdentity = async ({
   const jwksUri = `https://login.microsoftonline.com/${tenantId}/discovery/keys`;
 
   const decodedJwt = jwt.decode(azureJwt, { complete: true }) as TDecodedAzureAuthJwt;
-
   const { kid } = decodedJwt.header;
 
   const { data }: { data: TAzureJwksUriResponse } = await axios.get(jwksUri);
@@ -28,13 +27,6 @@ export const validateAzureIdentity = async ({
 
   const publicKey = `-----BEGIN CERTIFICATE-----\n${signingKey.x5c[0]}\n-----END CERTIFICATE-----`;
 
-  // Case: This can happen when the user uses a custom resource (such as https://management.azure.com&client_id=value).
-  // In this case, the audience in the decoded JWT will not have a trailing slash, but the resource will.
-  if (!decodedJwt.payload.aud.endsWith("/") && resource.endsWith("/")) {
-    // eslint-disable-next-line no-param-reassign
-    resource = resource.slice(0, -1);
-  }
-
   return jwt.verify(azureJwt, publicKey, {
     audience: resource,
     issuer: `https://sts.windows.net/${tenantId}/`

docs/api-reference/endpoints/aws-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/aws-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/aws-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/aws-auth/login"
+---

docs/api-reference/endpoints/aws-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/aws-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/aws-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/aws-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/aws-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/aws-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/azure-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/azure-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/azure-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/azure-auth/login"
+---

docs/api-reference/endpoints/azure-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/azure-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/azure-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/azure-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/azure-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/azure-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/gcp-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/gcp-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/gcp-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/gcp-auth/login"
+---

docs/api-reference/endpoints/gcp-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/gcp-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/gcp-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/gcp-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/gcp-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/gcp-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/kubernetes-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/kubernetes-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/kubernetes-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/kubernetes-auth/login"
+---

docs/api-reference/endpoints/kubernetes-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/kubernetes-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/kubernetes-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/kubernetes-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/kubernetes-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/kubernetes-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/oidc-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/oidc-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/oidc-auth/login.mdx

@@ -0,0 +1,4 @@
+---
+title: "Login"
+openapi: "POST /api/v1/auth/oidc-auth/login"
+---

docs/api-reference/endpoints/oidc-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/oidc-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/oidc-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/oidc-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/oidc-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/oidc-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/token-auth/attach.mdx

@@ -0,0 +1,4 @@
+---
+title: "Attach"
+openapi: "POST /api/v1/auth/token-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/token-auth/create-token.mdx

@@ -0,0 +1,4 @@
+---
+title: "Create Token"
+openapi: "POST /api/v1/auth/token-auth/identities/{identityId}/tokens"
+---

docs/api-reference/endpoints/token-auth/get-tokens.mdx

@@ -0,0 +1,4 @@
+---
+title: "Get Tokens"
+openapi: "GET /api/v1/auth/token-auth/identities/{identityId}/tokens"
+---

docs/api-reference/endpoints/token-auth/retrieve.mdx

@@ -0,0 +1,4 @@
+---
+title: "Retrieve"
+openapi: "GET /api/v1/auth/token-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/token-auth/revoke-token.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke Token"
+openapi: "POST /api/v1/auth/token-auth/tokens/{tokenId}/revoke"
+---

docs/api-reference/endpoints/token-auth/revoke.mdx

@@ -0,0 +1,4 @@
+---
+title: "Revoke"
+openapi: "DELETE /api/v1/auth/token-auth/identities/{identityId}"
+---

docs/api-reference/endpoints/token-auth/update-token.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update Token"
+openapi: "PATCH /api/v1/auth/token-auth/tokens/{tokenId}"
+---

docs/api-reference/endpoints/token-auth/update.mdx

@@ -0,0 +1,4 @@
+---
+title: "Update"
+openapi: "PATCH /api/v1/auth/token-auth/identities/{identityId}"
+---

docs/mint.json

@@ -428,6 +428,19 @@
             "api-reference/endpoints/identities/list"
           ]
         },
+        {
+          "group": "Token Auth",
+          "pages": [
+            "api-reference/endpoints/token-auth/attach",
+            "api-reference/endpoints/token-auth/retrieve",
+            "api-reference/endpoints/token-auth/update",
+            "api-reference/endpoints/token-auth/revoke",
+            "api-reference/endpoints/token-auth/get-tokens",
+            "api-reference/endpoints/token-auth/create-token",
+            "api-reference/endpoints/token-auth/update-token",
+            "api-reference/endpoints/token-auth/revoke-token"
+          ]
+        },
         {
           "group": "Universal Auth",
           "pages": [
@@ -444,6 +457,56 @@
             "api-reference/endpoints/universal-auth/revoke-access-token"
           ]
         },
+        {
+          "group": "GCP Auth",
+          "pages": [
+            "api-reference/endpoints/gcp-auth/login",
+            "api-reference/endpoints/gcp-auth/attach",
+            "api-reference/endpoints/gcp-auth/retrieve",
+            "api-reference/endpoints/gcp-auth/update",
+            "api-reference/endpoints/gcp-auth/revoke"
+          ]
+        },
+        {
+          "group": "AWS Auth",
+          "pages": [
+            "api-reference/endpoints/aws-auth/login",
+            "api-reference/endpoints/aws-auth/attach",
+            "api-reference/endpoints/aws-auth/retrieve",
+            "api-reference/endpoints/aws-auth/update",
+            "api-reference/endpoints/aws-auth/revoke"
+          ]
+        },
+        {
+          "group": "Azure Auth",
+          "pages": [
+            "api-reference/endpoints/azure-auth/login",
+            "api-reference/endpoints/azure-auth/attach",
+            "api-reference/endpoints/azure-auth/retrieve",
+            "api-reference/endpoints/azure-auth/update",
+            "api-reference/endpoints/azure-auth/revoke"
+          ]
+        },
+        {
+          "group": "Kubernetes Auth",
+          "pages": [
+            "api-reference/endpoints/kubernetes-auth/login",
+            "api-reference/endpoints/kubernetes-auth/attach",
+            "api-reference/endpoints/kubernetes-auth/retrieve",
+            "api-reference/endpoints/kubernetes-auth/update",
+            "api-reference/endpoints/kubernetes-auth/revoke"
+          ]
+        },
+        {
+          "group": "OIDC Auth",
+          "pages": [
+            "api-reference/endpoints/oidc-auth/login",
+            "api-reference/endpoints/oidc-auth/attach",
+            "api-reference/endpoints/oidc-auth/retrieve",
+            "api-reference/endpoints/oidc-auth/update",
+            "api-reference/endpoints/oidc-auth/revoke"
+          ]
+        },
         {
           "group": "Organizations",
           "pages": [

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">
-          <Tooltip content="Remove">
-            <IconButton
-              ariaLabel="copy icon"
-              variant="plain"
-              className="group relative"
-              onClick={(e) => {
-                e.stopPropagation();
-                handlePopUpOpen("removeIdentityFromProject", {
-                  identityId: identity.id,
-                  identityName: identity.name,
-                  projectId: project.id,
-                  projectName: project.name
-                });
-              }}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </IconButton>
-          </Tooltip>
-        </div>
+        {isAccessible && (
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Tooltip content="Remove">
+              <IconButton
+                colorSchema="danger"
+                ariaLabel="copy icon"
+                variant="plain"
+                className="group relative"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePopUpOpen("removeIdentityFromProject", {
+                    identityId: identity.id,
+                    identityName: identity.name,
+                    projectId: project.id,
+                    projectName: project.name
+                  });
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </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 { 
-  OrgGroupsTab,
-  OrgIdentityTab, 
-  OrgMembersTab,
-  OrgRoleTabSection 
-} from "./components";
+import { 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.Groups}>Groups</Tab>
+              <Tab value={TabSections.Member}>Users</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 {
-    Button,
-    DeleteActionModal,
-    UpgradePlanModal
-} from "@app/components/v2";
-import {
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useSubscription
-} from "@app/context";
+import { Button, 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 { mutateAsync: deleteMutateAsync } = useDeleteGroup();
-        
-    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-        "group",
-        "groupMembers",
-        "deleteGroup",
-        "upgradePlan"
-    ] as const);
-    
-    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 { subscription } = useSubscription();
+  const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "group",
+    "groupMembers",
+    "deleteGroup",
+    "upgradePlan"
+  ] as const);
+
+  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 onDeleteGroupSubmit = async ({
-        name,
+  };
+
+  const onDeleteGroupSubmit = async ({ name, slug }: { name: string; slug: string }) => {
+    try {
+      await deleteMutateAsync({
         slug
-    }: {
-        name: string;
-        slug: string;
-    }) => {
-        try {
-            await deleteMutateAsync({
-                slug
-            });
-            createNotification({
-                text: `Successfully deleted the group named ${name}`,
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to delete the group named ${name}`,
-                type: "error"
-            });
-        }
-        
-        handlePopUpClose("deleteGroup");
+      });
+      createNotification({
+        text: `Successfully deleted the group named ${name}`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to delete the group named ${name}`,
+        type: "error"
+      });
     }
-    
-    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">Groups</p>
-                <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
-                {(isAllowed) => (
-                    <Button
-                        colorSchema="primary"
-                        type="submit"
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        onClick={() => handleAddGroupModal()}
-                        isDisabled={!isAllowed}
-                    >
-                        Create Group
-                    </Button>
-                )}
-                </OrgPermissionCan>
-            </div>
-            <OrgGroupsTable 
-                handlePopUpOpen={handlePopUpOpen}
-            />
-            <OrgGroupModal
-                popUp={popUp}
-                handlePopUpClose={handlePopUpClose}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <OrgGroupMembersModal
-                popUp={popUp}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <DeleteActionModal
-                isOpen={popUp.deleteGroup.isOpen}
-                title={`Are you sure want to delete the group named ${
-                    (popUp?.deleteGroup?.data as { name: string })?.name || ""
-                }?`}
-                onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
-                deleteKey="confirm"
-                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}
-            />
-        </div>
-    );
-}
+
+    handlePopUpClose("deleteGroup");
+  };
+
+  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">User Groups</p>
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handleAddGroupModal()}
+              isDisabled={!isAllowed}
+            >
+              Create Group
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <OrgGroupsTable handlePopUpOpen={handlePopUpOpen} />
+      <OrgGroupModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <OrgGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteGroup.isOpen}
+        title={`Are you sure want to delete the group named ${
+          (popUp?.deleteGroup?.data as { name: string })?.name || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+        deleteKey="confirm"
+        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}
+      />
+    </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 {
-    OrgPermissionActions,
-    OrgPermissionSubjects,
-    useOrganization} from "@app/context";
-import { 
-    useGetOrganizationGroups, 
-    useGetOrgRoles,
-    useUpdateGroup
-} from "@app/hooks/api";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useGetOrganizationGroups, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<
-        ["group", "deleteGroup", "groupMembers"]
-      >,
-      data?: {
-        groupId?: string;
-        name?: string;
-        slug?: string;
-        role?: string;
-        customRole?: {
-            name: string;
-            slug: string;
-        }
-      }
-    ) => void;
-  };
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["group", "deleteGroup", "groupMembers"]>,
+    data?: {
+      groupId?: string;
+      name?: string;
+      slug?: string;
+      role?: string;
+      customRole?: {
+        name: string;
+        slug: string;
+      };
+    }
+  ) => void;
+};
 
-export const OrgGroupsTable = ({
-    handlePopUpOpen
-}: Props) => {
-    const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
-    const { currentOrg } = useOrganization();
-    const orgId = currentOrg?.id || "";
-    const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
-    const { mutateAsync: updateMutateAsync } = useUpdateGroup();
-    
-    const { data: roles } = useGetOrgRoles(orgId);
-    
-    const handleChangeRole = async ({
+export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
+  const [searchGroupsFilter, setSearchGroupsFilter] = useState("");
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { isLoading, data: groups } = useGetOrganizationGroups(orgId);
+  const { mutateAsync: updateMutateAsync } = useUpdateGroup();
+
+  const { data: roles } = useGetOrgRoles(orgId);
+
+  const handleChangeRole = async ({ currentSlug, role }: { currentSlug: string; role: string }) => {
+    try {
+      await updateMutateAsync({
         currentSlug,
         role
-    }: {
-        currentSlug: string;
-        role: string;
-    }) => {
-        try {
-            await updateMutateAsync({
-                currentSlug,
-                role
-            });
-            
-            createNotification({
-                text: "Successfully updated group role",
-                type: "success"
-            });
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to update group role",
-                type: "error"
-            });
-        }
+      });
+
+      createNotification({
+        text: "Successfully updated group role",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update group role",
+        type: "error"
+      });
     }
-    
-    return (
-        <div>
-            <Input
-                value={searchGroupsFilter}
-                onChange={(e) => setSearchGroupsFilter(e.target.value)}
-                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-                placeholder="Search groups..."
-            />
-            <TableContainer className="mt-4">
-                <Table>
-                    <THead>
-                        <Tr>
-                            <Th>Name</Th>
-                            <Th>Slug</Th>
-                            <Th>Role</Th>
-                            <Th className="w-5" />
-                        </Tr>
-                    </THead>
-                    <TBody>
-                        {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
-                        {!isLoading && groups?.map(({ id, name, slug, role, customRole }) => {
-                            return (
-                                <Tr className="h-10" key={`org-group-${id}`}>
-                                    <Td>{name}</Td>
-                                    <Td>{slug}</Td>
-                                    <Td>
-                                    <OrgPermissionCan
-                                        I={OrgPermissionActions.Edit}
-                                        a={OrgPermissionSubjects.Groups}
-                                    >
-                                        {(isAllowed) => {
-                                            return (
-                                                <Select
-                                                    value={role === "custom" ? (customRole?.slug as string) : role}
-                                                    isDisabled={!isAllowed}
-                                                    className="w-40 bg-mineshaft-600"
-                                                    dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                                    onValueChange={(selectedRole) =>
-                                                        handleChangeRole({
-                                                            currentSlug: slug,
-                                                            role: selectedRole
-                                                        })
-                                                    }
-                                                >
-                                                    {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
-                                                    <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
-                                                        {roleName}
-                                                    </SelectItem>
-                                                    ))}
-                                                </Select>
-                                            );
-                                        }}
-                                    </OrgPermissionCan>
-                                    </Td>
-                                    <Td>
-                                        <div className="flex items-center justify-end">
-                                            <OrgPermissionCan
-                                                I={OrgPermissionActions.Edit}
-                                                a={OrgPermissionSubjects.Groups}
-                                            >
-                                                {(isAllowed) => (
-                                                    <Tooltip content="Manage group members">
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                handlePopUpOpen("groupMembers", {
-                                                                    slug
-                                                                });
-                                                            }}
-                                                            size="lg"
-                                                            colorSchema="primary"
-                                                            variant="plain"
-                                                            ariaLabel="update"
-                                                            isDisabled={!isAllowed}
-                                                        >
-                                                            <FontAwesomeIcon icon={faUsers} />
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                )}
-                                            </OrgPermissionCan>
-                                            <OrgPermissionCan
-                                                I={OrgPermissionActions.Edit}
-                                                a={OrgPermissionSubjects.Groups}
-                                            >
-                                                {(isAllowed) => (
-                                                    <Tooltip content="Edit group">
-                                                        <IconButton
-                                                            onClick={async () => {
-                                                                handlePopUpOpen("group", {
-                                                                    groupId: id,
-                                                                    name,
-                                                                    slug,
-                                                                    role,
-                                                                    customRole
-                                                                });
-                                                            }}
-                                                            size="lg"
-                                                            colorSchema="primary"
-                                                            variant="plain"
-                                                            ariaLabel="update"
-                                                            className="ml-4"
-                                                            isDisabled={!isAllowed}
-                                                        >
-                                                            <FontAwesomeIcon icon={faPencil} />
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                )}
-                                            </OrgPermissionCan>
-                                            <OrgPermissionCan
-                                                I={OrgPermissionActions.Delete}
-                                                a={OrgPermissionSubjects.Groups}
-                                            >
-                                                {(isAllowed) => (
-                                                    <Tooltip content="Delete group">
-                                                        <IconButton
-                                                            onClick={() => {
-                                                                handlePopUpOpen("deleteGroup", {
-                                                                    slug,
-                                                                    name
-                                                                });
-                                                            }}
-                                                            size="lg"
-                                                            colorSchema="danger"
-                                                            variant="plain"
-                                                            ariaLabel="update"
-                                                            className="ml-4"
-                                                            isDisabled={!isAllowed}
-                                                        >
-                                                            <FontAwesomeIcon icon={faXmark} />
-                                                        </IconButton>
-                                                    </Tooltip>
-                                                )}
-                                            </OrgPermissionCan>
-                                        </div>
-                                    </Td>
-                                </Tr>
-                            );
-                        })}
-                    </TBody>
-                </Table>
-                {groups?.length === 0 && (
-                    <EmptyState title="No groups found" icon={faUsers} />
-                )}
-            </TableContainer>
-        </div>
-    );
-}
+  };
+
+  return (
+    <div>
+      <Input
+        value={searchGroupsFilter}
+        onChange={(e) => setSearchGroupsFilter(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search groups..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th>Role</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="org-groups" />}
+            {!isLoading &&
+              groups?.map(({ id, name, slug, role, customRole }) => {
+                return (
+                  <Tr className="h-10" key={`org-group-${id}`}>
+                    <Td>{name}</Td>
+                    <Td>{slug}</Td>
+                    <Td>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Groups}
+                      >
+                        {(isAllowed) => {
+                          return (
+                            <Select
+                              value={role === "custom" ? (customRole?.slug as string) : role}
+                              isDisabled={!isAllowed}
+                              className="w-40 bg-mineshaft-600"
+                              dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+                              onValueChange={(selectedRole) =>
+                                handleChangeRole({
+                                  currentSlug: slug,
+                                  role: selectedRole
+                                })
+                              }
+                            >
+                              {(roles || []).map(({ slug: roleSlug, name: roleName }) => (
+                                <SelectItem value={roleSlug} key={`role-option-${roleSlug}`}>
+                                  {roleName}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          );
+                        }}
+                      </OrgPermissionCan>
+                    </Td>
+                    <Td>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("groupMembers", {
+                                    slug
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Manage Users
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("group", {
+                                    groupId: id,
+                                    name,
+                                    slug,
+                                    role,
+                                    customRole
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Edit Group
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Groups}
+                          >
+                            {(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("deleteGroup", {
+                                    slug,
+                                    name
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Group
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {groups?.length === 0 && <EmptyState title="No groups found" icon={faUsers} />}
+      </TableContainer>
+    </div>
+  );
+};

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>
-                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
-                  </Td>
+                  <Td>{name}</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">
-                      <IconButton
-                        ariaLabel="copy icon"
-                        variant="plain"
-                        className="group relative"
-                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
-                      >
-                        <FontAwesomeIcon icon={faEllipsis} />
-                      </IconButton>
-                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          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/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"
-        transition={{ duration: 0.15 }}
-        initial={{ opacity: 0, translateX: 30 }}
-        animate={{ opacity: 1, translateX: 0 }}
-        exit={{ opacity: 0, translateX: 30 }}
+      key="panel-org-members"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      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 {
-  GroupsTab,
-  IdentityTab,
-  MemberListTab,
-  ProjectRoleListTab,
-  ServiceTokenTab
-} from "./components";
+import { IdentityTab, MembersTab,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>
-              {currentWorkspace?.version && currentWorkspace.version > 1 && (
-                <Tab value={TabSections.Groups}>Groups</Tab>
-              )}
+              <Tab value={TabSections.Member}>Users</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,
-    DeleteActionModal,
-    UpgradePlanModal
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useSubscription,useWorkspace } from "@app/context";
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useSubscription,
+  useWorkspace
+} 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 { currentWorkspace } = useWorkspace();
+  const { subscription } = useSubscription();
+  const { currentWorkspace } = useWorkspace();
 
-    const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
-    
-    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-        "group",
-        "deleteGroup",
-        "upgradePlan"
-    ] as const);
+  const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
 
-    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 { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "group",
+    "deleteGroup",
+    "upgradePlan"
+  ] as const);
+
+  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) => {
-        try {
-            await deleteMutateAsync({
-                groupSlug,
-                projectSlug: currentWorkspace?.slug || ""
-            });
-  
-            createNotification({
-                text: "Successfully removed identity from project",
-                type: "success"
-            });
-  
-          handlePopUpClose("deleteGroup");
-        } catch (err) {
-            console.error(err);
-            const error = err as any;
-            const text = error?.response?.data?.message ?? "Failed to remove group from project";
-    
-            createNotification({
-                text,
-                type: "error"
-            });
+  const onRemoveGroupSubmit = async (groupSlug: string) => {
+    try {
+      await deleteMutateAsync({
+        groupSlug,
+        projectSlug: currentWorkspace?.slug || ""
+      });
+
+      createNotification({
+        text: "Successfully removed identity from project",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteGroup");
+    } catch (err) {
+      console.error(err);
+      const error = err as any;
+      const text = error?.response?.data?.message ?? "Failed to remove group from project";
+
+      createNotification({
+        text,
+        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)
         }
-    };
-      
-    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">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
-                isOpen={popUp.upgradePlan.isOpen}
-                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                text={(popUp.upgradePlan?.data as { description: string })?.description}
-            />
-        </div>
-    );
-}
+      />
+      <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>
-            <THead>
-            <Tr>
-                <Th>Name</Th>
-                <Th>Role</Th>
-                <Th>Added on</Th>
-                <Th className="w-5" />
-            </Tr>
-            </THead>
-            <TBody>
-            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
-            {!isLoading &&
-                data &&
-                data.length > 0 &&
-                data.map(({ group: { id, name, slug }, roles, createdAt }) => {
-                    return (
-                        <Tr className="h-10" key={`st-v3-${id}`}>
-                        <Td>{name}</Td>
-                        <Td>
-                            <ProjectPermissionCan
-                                I={ProjectPermissionActions.Edit}
-                                a={ProjectPermissionSub.Groups}
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Role</Th>
+            <Th>Added on</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+          {!isLoading &&
+            data &&
+            data.length > 0 &&
+            data.map(({ group: { id, name, slug }, roles, createdAt }) => {
+              return (
+                <Tr className="group h-10" key={`st-v3-${id}`}>
+                  <Td>{name}</Td>
+                  <Td>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      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) => (
-                                    <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) => (
-                                <IconButton
-                                onClick={() => {
-                                    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} />
-        )}
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      )}
+                    </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,