Merge pull request #3744 from Infisical/project-group-users-page

feature(group-projects): Add project group details page

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

@@ -42,6 +42,10 @@ export type TListGroupUsersDTO = {
   filter?: EFilterReturnedUsers;
 } & TGenericPermission;
 
+export type TListProjectGroupUsersDTO = TListGroupUsersDTO & {
+  projectId: string;
+};
+
 export type TAddUserToGroupDTO = {
   id: string;
   username: string;

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

@@ -89,6 +89,7 @@ export const GROUPS = {
     limit: "The number of users to return.",
     username: "The username to search for.",
     search: "The text string that user email or name will be filtered by.",
+    projectId: "The ID of the project the group belongs to.",
     filterUsers:
       "Whether to filter the list of returned users. 'existingMembers' will only return existing users in the group, 'nonMembers' will only return users not in the group, undefined will return all users in the organization."
   },
@@ -2276,7 +2277,8 @@ export const SecretSyncs = {
     },
     GCP: {
       scope: "The Google project scope that secrets should be synced to.",
-      projectId: "The ID of the Google project secrets should be synced to."
+      projectId: "The ID of the Google project secrets should be synced to.",
+      locationId: 'The ID of the Google project location secrets should be synced to (ie "us-west4").'
     },
     DATABRICKS: {
       scope: "The Databricks secret scope that secrets should be synced to."

backend/src/server/routes/v1/app-connection-routers/gcp-connection-router.ts

@@ -45,4 +45,37 @@ export const registerGcpConnectionRouter = async (server: FastifyZodProvider) =>
       return projects;
     }
   });
+
+  server.route({
+    method: "GET",
+    url: `/:connectionId/secret-manager-project-locations`,
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      params: z.object({
+        connectionId: z.string().uuid()
+      }),
+      querystring: z.object({
+        projectId: z.string()
+      }),
+      response: {
+        200: z.object({ displayName: z.string(), locationId: z.string() }).array()
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      const {
+        params: { connectionId },
+        query: { projectId }
+      } = req;
+
+      const locations = await server.services.appConnection.gcp.listSecretManagerProjectLocations(
+        { connectionId, projectId },
+        req.permission
+      );
+
+      return locations;
+    }
+  });
 };

backend/src/server/routes/v2/group-project-router.ts

@@ -4,9 +4,11 @@ import {
   GroupProjectMembershipsSchema,
   GroupsSchema,
   ProjectMembershipRole,
-  ProjectUserMembershipRolesSchema
+  ProjectUserMembershipRolesSchema,
+  UsersSchema
 } from "@app/db/schemas";
-import { ApiDocsTags, PROJECTS } from "@app/lib/api-docs";
+import { EFilterReturnedUsers } from "@app/ee/services/group/group-types";
+import { ApiDocsTags, GROUPS, PROJECTS } from "@app/lib/api-docs";
 import { ms } from "@app/lib/ms";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
@@ -301,4 +303,61 @@ export const registerGroupProjectRouter = async (server: FastifyZodProvider) =>
       return { groupMembership };
     }
   });
+
+  server.route({
+    method: "GET",
+    url: "/:projectId/groups/:groupId/users",
+    onRequest: verifyAuth([AuthMode.JWT, AuthMode.IDENTITY_ACCESS_TOKEN]),
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      hide: false,
+      tags: [ApiDocsTags.ProjectGroups],
+      description: "Return project group users",
+      params: z.object({
+        projectId: z.string().trim().describe(GROUPS.LIST_USERS.projectId),
+        groupId: z.string().trim().describe(GROUPS.LIST_USERS.id)
+      }),
+      querystring: z.object({
+        offset: z.coerce.number().min(0).max(100).default(0).describe(GROUPS.LIST_USERS.offset),
+        limit: z.coerce.number().min(1).max(100).default(10).describe(GROUPS.LIST_USERS.limit),
+        username: z.string().trim().optional().describe(GROUPS.LIST_USERS.username),
+        search: z.string().trim().optional().describe(GROUPS.LIST_USERS.search),
+        filter: z.nativeEnum(EFilterReturnedUsers).optional().describe(GROUPS.LIST_USERS.filterUsers)
+      }),
+      response: {
+        200: z.object({
+          users: UsersSchema.pick({
+            email: true,
+            username: true,
+            firstName: true,
+            lastName: true,
+            id: true
+          })
+            .merge(
+              z.object({
+                isPartOfGroup: z.boolean(),
+                joinedGroupAt: z.date().nullable()
+              })
+            )
+            .array(),
+          totalCount: z.number()
+        })
+      }
+    },
+    handler: async (req) => {
+      const { users, totalCount } = await server.services.groupProject.listProjectGroupUsers({
+        id: req.params.groupId,
+        projectId: req.params.projectId,
+        actor: req.permission.type,
+        actorId: req.permission.id,
+        actorAuthMethod: req.permission.authMethod,
+        actorOrgId: req.permission.orgId,
+        ...req.query
+      });
+
+      return { users, totalCount };
+    }
+  });
 };

backend/src/services/app-connection/gcp/gcp-connection-fns.ts

@@ -11,8 +11,10 @@ import { AppConnection } from "../app-connection-enums";
 import { GcpConnectionMethod } from "./gcp-connection-enums";
 import {
   GCPApp,
+  GCPGetProjectLocationsRes,
   GCPGetProjectsRes,
   GCPGetServiceRes,
+  GCPLocation,
   TGcpConnection,
   TGcpConnectionConfig
 } from "./gcp-connection-types";
@@ -145,6 +147,45 @@ export const getGcpSecretManagerProjects = async (appConnection: TGcpConnection)
   return projects;
 };
 
+export const getGcpSecretManagerProjectLocations = async (projectId: string, appConnection: TGcpConnection) => {
+  const accessToken = await getGcpConnectionAuthToken(appConnection);
+
+  let gcpLocations: GCPLocation[] = [];
+
+  const pageSize = 100;
+  let pageToken: string | undefined;
+  let hasMorePages = true;
+
+  while (hasMorePages) {
+    const params = new URLSearchParams({
+      pageSize: String(pageSize),
+      ...(pageToken ? { pageToken } : {})
+    });
+
+    // eslint-disable-next-line no-await-in-loop
+    const { data } = await request.get<GCPGetProjectLocationsRes>(
+      `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${projectId}/locations`,
+      {
+        params,
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Accept-Encoding": "application/json"
+        }
+      }
+    );
+
+    gcpLocations = gcpLocations.concat(data.locations);
+
+    if (!data.nextPageToken) {
+      hasMorePages = false;
+    }
+
+    pageToken = data.nextPageToken;
+  }
+
+  return gcpLocations.sort((a, b) => a.displayName.localeCompare(b.displayName));
+};
+
 export const validateGcpConnectionCredentials = async (appConnection: TGcpConnectionConfig) => {
   // Check if provided service account email suffix matches organization ID.
   // We do this to mitigate confused deputy attacks in multi-tenant instances

backend/src/services/app-connection/gcp/gcp-connection-service.ts

@@ -1,8 +1,8 @@
 import { OrgServiceActor } from "@app/lib/types";
 
 import { AppConnection } from "../app-connection-enums";
-import { getGcpSecretManagerProjects } from "./gcp-connection-fns";
-import { TGcpConnection } from "./gcp-connection-types";
+import { getGcpSecretManagerProjectLocations, getGcpSecretManagerProjects } from "./gcp-connection-fns";
+import { TGcpConnection, TGetGCPProjectLocationsDTO } from "./gcp-connection-types";
 
 type TGetAppConnectionFunc = (
   app: AppConnection,
@@ -23,7 +23,23 @@ export const gcpConnectionService = (getAppConnection: TGetAppConnectionFunc) =>
     }
   };
 
+  const listSecretManagerProjectLocations = async (
+    { connectionId, projectId }: TGetGCPProjectLocationsDTO,
+    actor: OrgServiceActor
+  ) => {
+    const appConnection = await getAppConnection(AppConnection.GCP, connectionId, actor);
+
+    try {
+      const locations = await getGcpSecretManagerProjectLocations(projectId, appConnection);
+
+      return locations;
+    } catch (error) {
+      return [];
+    }
+  };
+
   return {
-    listSecretManagerProjects
+    listSecretManagerProjects,
+    listSecretManagerProjectLocations
   };
 };

backend/src/services/app-connection/gcp/gcp-connection-types.ts

@@ -38,6 +38,22 @@ export type GCPGetProjectsRes = {
   nextPageToken?: string;
 };
 
+export type GCPLocation = {
+  name: string;
+  locationId: string;
+  displayName: string;
+};
+
+export type GCPGetProjectLocationsRes = {
+  locations: GCPLocation[];
+  nextPageToken?: string;
+};
+
+export type TGetGCPProjectLocationsDTO = {
+  projectId: string;
+  connectionId: string;
+};
+
 export type GCPGetServiceRes = {
   name: string;
   parent: string;

backend/src/services/group-project/group-project-service.ts

@@ -1,6 +1,7 @@
 import { ForbiddenError } from "@casl/ability";
 
 import { ActionProjectType, ProjectMembershipRole, SecretKeyEncoding, TGroups } from "@app/db/schemas";
+import { TListProjectGroupUsersDTO } from "@app/ee/services/group/group-types";
 import {
   constructPermissionErrorMessage,
   validatePrivilegeChangeOperation
@@ -42,7 +43,7 @@ type TGroupProjectServiceFactoryDep = {
   projectKeyDAL: Pick<TProjectKeyDALFactory, "findLatestProjectKey" | "delete" | "insertMany" | "transaction">;
   projectRoleDAL: Pick<TProjectRoleDALFactory, "find">;
   projectBotDAL: TProjectBotDALFactory;
-  groupDAL: Pick<TGroupDALFactory, "findOne">;
+  groupDAL: Pick<TGroupDALFactory, "findOne" | "findAllGroupPossibleMembers">;
   permissionService: Pick<TPermissionServiceFactory, "getProjectPermission" | "getProjectPermissionByRole">;
 };
 
@@ -471,11 +472,54 @@ export const groupProjectServiceFactory = ({
     return groupMembership;
   };
 
+  const listProjectGroupUsers = async ({
+    id,
+    projectId,
+    offset,
+    limit,
+    username,
+    actor,
+    actorId,
+    actorAuthMethod,
+    actorOrgId,
+    search,
+    filter
+  }: TListProjectGroupUsersDTO) => {
+    const project = await projectDAL.findById(projectId);
+
+    if (!project) {
+      throw new NotFoundError({ message: `Failed to find project with ID ${projectId}` });
+    }
+
+    const { permission } = await permissionService.getProjectPermission({
+      actor,
+      actorId,
+      projectId,
+      actorAuthMethod,
+      actorOrgId,
+      actionProjectType: ActionProjectType.Any
+    });
+    ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionGroupActions.Read, ProjectPermissionSub.Groups);
+
+    const { members, totalCount } = await groupDAL.findAllGroupPossibleMembers({
+      orgId: project.orgId,
+      groupId: id,
+      offset,
+      limit,
+      username,
+      search,
+      filter
+    });
+
+    return { users: members, totalCount };
+  };
+
   return {
     addGroupToProject,
     updateGroupInProject,
     removeGroupFromProject,
     listGroupsInProject,
-    getGroupInProject
+    getGroupInProject,
+    listProjectGroupUsers
   };
 };

backend/src/services/secret-sync/gcp/gcp-sync-enums.ts

@@ -1,3 +1,63 @@
 export enum GcpSyncScope {
-  Global = "global"
+  Global = "global",
+  Region = "region"
+}
+
+export enum GCPSecretManagerLocation {
+  // Asia Pacific
+  ASIA_SOUTHEAST3 = "asia-southeast3", // Bangkok
+  ASIA_SOUTH2 = "asia-south2", // Delhi
+  ASIA_EAST2 = "asia-east2", // Hong Kong
+  ASIA_SOUTHEAST2 = "asia-southeast2", // Jakarta
+  AUSTRALIA_SOUTHEAST2 = "australia-southeast2", // Melbourne
+  ASIA_SOUTH1 = "asia-south1", // Mumbai
+  ASIA_NORTHEAST2 = "asia-northeast2", // Osaka
+  ASIA_NORTHEAST3 = "asia-northeast3", // Seoul
+  ASIA_SOUTHEAST1 = "asia-southeast1", // Singapore
+  AUSTRALIA_SOUTHEAST1 = "australia-southeast1", // Sydney
+  ASIA_EAST1 = "asia-east1", // Taiwan
+  ASIA_NORTHEAST1 = "asia-northeast1", // Tokyo
+
+  // Europe
+  EUROPE_WEST1 = "europe-west1", // Belgium
+  EUROPE_WEST10 = "europe-west10", // Berlin
+  EUROPE_NORTH1 = "europe-north1", // Finland
+  EUROPE_NORTH2 = "europe-north2", // Stockholm
+  EUROPE_WEST3 = "europe-west3", // Frankfurt
+  EUROPE_WEST2 = "europe-west2", // London
+  EUROPE_SOUTHWEST1 = "europe-southwest1", // Madrid
+  EUROPE_WEST8 = "europe-west8", // Milan
+  EUROPE_WEST4 = "europe-west4", // Netherlands
+  EUROPE_WEST12 = "europe-west12", // Turin
+  EUROPE_WEST9 = "europe-west9", // Paris
+  EUROPE_CENTRAL2 = "europe-central2", // Warsaw
+  EUROPE_WEST6 = "europe-west6", // Zurich
+
+  // North America
+  US_CENTRAL1 = "us-central1", // Iowa
+  US_WEST4 = "us-west4", // Las Vegas
+  US_WEST2 = "us-west2", // Los Angeles
+  NORTHAMERICA_SOUTH1 = "northamerica-south1", // Mexico
+  NORTHAMERICA_NORTHEAST1 = "northamerica-northeast1", // Montréal
+  US_EAST4 = "us-east4", // Northern Virginia
+  US_CENTRAL2 = "us-central2", // Oklahoma
+  US_WEST1 = "us-west1", // Oregon
+  US_WEST3 = "us-west3", // Salt Lake City
+  US_EAST1 = "us-east1", // South Carolina
+  NORTHAMERICA_NORTHEAST2 = "northamerica-northeast2", // Toronto
+  US_EAST5 = "us-east5", // Columbus
+  US_SOUTH1 = "us-south1", // Dallas
+  US_WEST8 = "us-west8", // Phoenix
+
+  // South America
+  SOUTHAMERICA_EAST1 = "southamerica-east1", // São Paulo
+  SOUTHAMERICA_WEST1 = "southamerica-west1", // Santiago
+
+  // Middle East
+  ME_CENTRAL2 = "me-central2", // Dammam
+  ME_CENTRAL1 = "me-central1", // Doha
+  ME_WEST1 = "me-west1", // Tel Aviv
+
+  // Africa
+  AFRICA_SOUTH1 = "africa-south1" // Johannesburg
 }

backend/src/services/secret-sync/gcp/gcp-sync-fns.ts

@@ -4,6 +4,7 @@ import { request } from "@app/lib/config/request";
 import { logger } from "@app/lib/logger";
 import { getGcpConnectionAuthToken } from "@app/services/app-connection/gcp";
 import { IntegrationUrls } from "@app/services/integration-auth/integration-list";
+import { GcpSyncScope } from "@app/services/secret-sync/gcp/gcp-sync-enums";
 import { matchesSchema } from "@app/services/secret-sync/secret-sync-fns";
 
 import { SecretSyncError } from "../secret-sync-errors";
@@ -15,9 +16,17 @@ import {
   TGcpSyncWithCredentials
 } from "./gcp-sync-types";
 
-const getGcpSecrets = async (accessToken: string, secretSync: TGcpSyncWithCredentials) => {
+const getProjectUrl = (secretSync: TGcpSyncWithCredentials) => {
   const { destinationConfig } = secretSync;
 
+  if (destinationConfig.scope === GcpSyncScope.Global) {
+    return `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}`;
+  }
+
+  return `https://secretmanager.${destinationConfig.locationId}.rep.googleapis.com/v1/projects/${destinationConfig.projectId}/locations/${destinationConfig.locationId}`;
+};
+
+const getGcpSecrets = async (accessToken: string, secretSync: TGcpSyncWithCredentials) => {
   let gcpSecrets: GCPSecret[] = [];
 
   const pageSize = 100;
@@ -31,16 +40,13 @@ const getGcpSecrets = async (accessToken: string, secretSync: TGcpSyncWithCreden
     });
 
     // eslint-disable-next-line no-await-in-loop
-    const { data: secretsRes } = await request.get<GCPSMListSecretsRes>(
-      `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${secretSync.destinationConfig.projectId}/secrets`,
-      {
-        params,
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Accept-Encoding": "application/json"
-        }
+    const { data: secretsRes } = await request.get<GCPSMListSecretsRes>(`${getProjectUrl(secretSync)}/secrets`, {
+      params,
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Accept-Encoding": "application/json"
       }
-    );
+    });
 
     if (secretsRes.secrets) {
       gcpSecrets = gcpSecrets.concat(secretsRes.secrets);
@@ -61,7 +67,7 @@ const getGcpSecrets = async (accessToken: string, secretSync: TGcpSyncWithCreden
 
     try {
       const { data: secretLatest } = await request.get<GCPLatestSecretVersionAccess>(
-        `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets/${key}/versions/latest:access`,
+        `${getProjectUrl(secretSync)}/secrets/${key}/versions/latest:access`,
         {
           headers: {
             Authorization: `Bearer ${accessToken}`,
@@ -113,11 +119,14 @@ export const GcpSyncFns = {
         if (!(key in gcpSecrets)) {
           // case: create secret
           await request.post(
-            `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets`,
+            `${getProjectUrl(secretSync)}/secrets`,
             {
-              replication: {
-                automatic: {}
-              }
+              replication:
+                destinationConfig.scope === GcpSyncScope.Global
+                  ? {
+                      automatic: {}
+                    }
+                  : undefined
             },
             {
               params: {
@@ -131,7 +140,7 @@ export const GcpSyncFns = {
           );
 
           await request.post(
-            `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets/${key}:addVersion`,
+            `${getProjectUrl(secretSync)}/secrets/${key}:addVersion`,
             {
               payload: {
                 data: Buffer.from(secretMap[key].value).toString("base64")
@@ -163,15 +172,12 @@ export const GcpSyncFns = {
           if (secretSync.syncOptions.disableSecretDeletion) continue;
 
           // case: delete secret
-          await request.delete(
-            `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets/${key}`,
-            {
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-                "Accept-Encoding": "application/json"
-              }
+          await request.delete(`${getProjectUrl(secretSync)}/secrets/${key}`, {
+            headers: {
+              Authorization: `Bearer ${accessToken}`,
+              "Accept-Encoding": "application/json"
             }
-          );
+          });
         } else if (secretMap[key].value !== gcpSecrets[key]) {
           if (!secretMap[key].value) {
             logger.warn(
@@ -180,7 +186,7 @@ export const GcpSyncFns = {
           }
 
           await request.post(
-            `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets/${key}:addVersion`,
+            `${getProjectUrl(secretSync)}/secrets/${key}:addVersion`,
             {
               payload: {
                 data: Buffer.from(secretMap[key].value).toString("base64")
@@ -212,21 +218,18 @@ export const GcpSyncFns = {
   },
 
   removeSecrets: async (secretSync: TGcpSyncWithCredentials, secretMap: TSecretMap) => {
-    const { destinationConfig, connection } = secretSync;
+    const { connection } = secretSync;
     const accessToken = await getGcpConnectionAuthToken(connection);
 
     const gcpSecrets = await getGcpSecrets(accessToken, secretSync);
     for await (const [key] of Object.entries(gcpSecrets)) {
       if (key in secretMap) {
-        await request.delete(
-          `${IntegrationUrls.GCP_SECRET_MANAGER_URL}/v1/projects/${destinationConfig.projectId}/secrets/${key}`,
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-              "Accept-Encoding": "application/json"
-            }
+        await request.delete(`${getProjectUrl(secretSync)}/secrets/${key}`, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Accept-Encoding": "application/json"
           }
-        );
+        });
       }
     }
   }

backend/src/services/secret-sync/gcp/gcp-sync-schemas.ts

@@ -10,14 +10,33 @@ import {
 import { TSyncOptionsConfig } from "@app/services/secret-sync/secret-sync-types";
 
 import { SecretSync } from "../secret-sync-enums";
-import { GcpSyncScope } from "./gcp-sync-enums";
+import { GCPSecretManagerLocation, GcpSyncScope } from "./gcp-sync-enums";
 
 const GcpSyncOptionsConfig: TSyncOptionsConfig = { canImportSecrets: true };
 
-const GcpSyncDestinationConfigSchema = z.object({
-  scope: z.literal(GcpSyncScope.Global).describe(SecretSyncs.DESTINATION_CONFIG.GCP.scope),
-  projectId: z.string().min(1, "Project ID is required").describe(SecretSyncs.DESTINATION_CONFIG.GCP.projectId)
-});
+const GcpSyncDestinationConfigSchema = z.discriminatedUnion("scope", [
+  z
+    .object({
+      scope: z.literal(GcpSyncScope.Global).describe(SecretSyncs.DESTINATION_CONFIG.GCP.scope),
+      projectId: z.string().min(1, "Project ID is required").describe(SecretSyncs.DESTINATION_CONFIG.GCP.projectId)
+    })
+    .describe(
+      JSON.stringify({
+        title: "Global"
+      })
+    ),
+  z
+    .object({
+      scope: z.literal(GcpSyncScope.Region).describe(SecretSyncs.DESTINATION_CONFIG.GCP.scope),
+      projectId: z.string().min(1, "Project ID is required").describe(SecretSyncs.DESTINATION_CONFIG.GCP.projectId),
+      locationId: z.nativeEnum(GCPSecretManagerLocation).describe(SecretSyncs.DESTINATION_CONFIG.GCP.locationId)
+    })
+    .describe(
+      JSON.stringify({
+        title: "Region"
+      })
+    )
+]);
 
 export const GcpSyncSchema = BaseSecretSyncSchema(SecretSync.GCPSecretManager, GcpSyncOptionsConfig).extend({
   destination: z.literal(SecretSync.GCPSecretManager),

docs/integrations/secret-syncs/gcp-secret-manager.mdx

@@ -34,6 +34,9 @@ description: "Learn how to configure a GCP Secret Manager Sync for Infisical."
 
             - **GCP Connection**: The GCP Connection to authenticate with.
             - **Project**: The GCP project to sync with.
+            - **Scope**: The GCP project scope that secrets should be synced to:
+                - **Global**: Secrets will be synced globally; available to all project regions.
+                - **Region**: Secrets will be synced to the specified region.
 
         5. Configure the **Sync Options** to specify how secrets should be synced, then click **Next**.
         ![Configure Options](/images/secret-syncs/gcp-secret-manager/gcp-secret-manager-options.png)

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/GcpSyncFields.tsx

@@ -5,27 +5,56 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
-import { useGcpConnectionListProjects } from "@app/hooks/api/appConnections/gcp/queries";
-import { TGitHubConnectionEnvironment } from "@app/hooks/api/appConnections/github";
+import {
+  Badge,
+  FilterableSelect,
+  FormControl,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import { GCP_SYNC_SCOPES } from "@app/helpers/secretSyncs";
+import {
+  useGcpConnectionListProjectLocations,
+  useGcpConnectionListProjects
+} from "@app/hooks/api/appConnections/gcp/queries";
+import { TGcpLocation, TGcpProject } from "@app/hooks/api/appConnections/gcp/types";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 import { TSecretSyncForm } from "../schemas";
 
+const formatOptionLabel = ({ displayName, locationId }: TGcpLocation) => (
+  <div className="flex w-full flex-row items-center gap-1">
+    <span>{displayName}</span>{" "}
+    <Badge className="h-5 leading-5" variant="success">
+      {locationId}
+    </Badge>
+  </div>
+);
+
 export const GcpSyncFields = () => {
   const { control, setValue } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.GCPSecretManager }
   >();
 
   const connectionId = useWatch({ name: "connection.id", control });
+  const projectId = useWatch({ name: "destinationConfig.projectId", control });
+  const selectedScope = useWatch({ name: "destinationConfig.scope", control });
 
   const { data: projects, isPending } = useGcpConnectionListProjects(connectionId, {
     enabled: Boolean(connectionId)
   });
 
+  const { data: locations, isPending: areLocationsPending } = useGcpConnectionListProjectLocations(
+    { connectionId, projectId },
+    {
+      enabled: Boolean(connectionId) && Boolean(projectId)
+    }
+  );
+
   useEffect(() => {
-    setValue("destinationConfig.scope", GcpSyncScope.Global);
+    if (!selectedScope) setValue("destinationConfig.scope", GcpSyncScope.Global);
   }, []);
 
   return (
@@ -33,6 +62,7 @@ export const GcpSyncFields = () => {
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.projectId", "");
+          setValue("destinationConfig.locationId", "");
         }}
       />
       <Controller
@@ -60,9 +90,10 @@ export const GcpSyncFields = () => {
               isLoading={isPending && Boolean(connectionId)}
               isDisabled={!connectionId}
               value={projects?.find((project) => project.id === value) ?? null}
-              onChange={(option) =>
-                onChange((option as SingleValue<TGitHubConnectionEnvironment>)?.id ?? null)
-              }
+              onChange={(option) => {
+                setValue("destinationConfig.locationId", "");
+                onChange((option as SingleValue<TGcpProject>)?.id ?? null);
+              }}
               options={projects}
               placeholder="Select a GCP project..."
               getOptionLabel={(option) => option.name}
@@ -71,6 +102,76 @@ export const GcpSyncFields = () => {
           </FormControl>
         )}
       />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error?.message)}
+            tooltipText={
+              <div className="flex flex-col gap-3">
+                <p>
+                  Specify how Infisical should sync secrets to GCP. The following options are
+                  available:
+                </p>
+                <ul className="flex list-disc flex-col gap-3 pl-4">
+                  {Object.values(GCP_SYNC_SCOPES).map(({ name, description }) => {
+                    return (
+                      <li key={name}>
+                        <p className="text-mineshaft-300">
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            }
+            tooltipClassName="max-w-lg"
+            label="Scope"
+          >
+            <Select
+              value={value}
+              onValueChange={(val) => onChange(val)}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              dropdownContainerClassName="max-w-none"
+              isDisabled={!projectId}
+            >
+              {Object.values(GcpSyncScope).map((scope) => {
+                return (
+                  <SelectItem className="capitalize" value={scope} key={scope}>
+                    {scope}
+                  </SelectItem>
+                );
+              })}
+            </Select>
+          </FormControl>
+        )}
+      />
+      {selectedScope === GcpSyncScope.Region && (
+        <Controller
+          name="destinationConfig.locationId"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Region">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={areLocationsPending && Boolean(projectId)}
+                isDisabled={!projectId}
+                value={locations?.find((option) => option.locationId === value) ?? null}
+                onChange={(option) =>
+                  onChange((option as SingleValue<TGcpLocation>)?.locationId ?? null)
+                }
+                options={locations}
+                placeholder="Select a region..."
+                getOptionValue={(option) => option.locationId}
+                formatOptionLabel={formatOptionLabel}
+              />
+            </FormControl>
+          )}
+        />
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/GcpSyncReviewFields.tsx

@@ -3,12 +3,23 @@ import { useFormContext } from "react-hook-form";
 import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 export const GcpSyncReviewFields = () => {
   const { watch } = useFormContext<
     TSecretSyncForm & { destination: SecretSync.GCPSecretManager }
   >();
-  const projectId = watch("destinationConfig.projectId");
+  const destinationConfig = watch("destinationConfig");
 
-  return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Project ID">{destinationConfig.projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Scope" className="capitalize">
+        {destinationConfig.scope}
+      </GenericFieldLabel>
+      {destinationConfig.scope === GcpSyncScope.Region && (
+        <GenericFieldLabel label="Region">{destinationConfig.locationId}</GenericFieldLabel>
+      )}
+    </>
+  );
 };

frontend/src/components/secret-syncs/forms/schemas/gcp-sync-destination-schema.ts

@@ -7,9 +7,16 @@ import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 export const GcpSyncDestinationSchema = BaseSecretSyncSchema().merge(
   z.object({
     destination: z.literal(SecretSync.GCPSecretManager),
-    destinationConfig: z.object({
-      scope: z.literal(GcpSyncScope.Global),
-      projectId: z.string().min(1, "Project ID required")
-    })
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(GcpSyncScope.Global),
+        projectId: z.string().min(1, "Project ID required")
+      }),
+      z.object({
+        scope: z.literal(GcpSyncScope.Region),
+        projectId: z.string().min(1, "Project ID required"),
+        locationId: z.string().min(1, "Region required")
+      })
+    ])
   })
 );

frontend/src/helpers/secretSyncs.ts

@@ -4,6 +4,7 @@ import {
   SecretSyncImportBehavior,
   SecretSyncInitialSyncBehavior
 } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }> = {
@@ -124,3 +125,14 @@ export const HUMANITEC_SYNC_SCOPES: Record<
       "Infisical will sync secrets as environment level shared values to the specified Humanitec application environment."
   }
 };
+
+export const GCP_SYNC_SCOPES: Record<GcpSyncScope, { name: string; description: string }> = {
+  [GcpSyncScope.Global]: {
+    name: "Global",
+    description: "Secrets will be synced globally; being available in all project regions."
+  },
+  [GcpSyncScope.Region]: {
+    name: "Region",
+    description: "Secrets will be synced to the specified region."
+  }
+};

frontend/src/hooks/api/appConnections/gcp/queries.tsx

@@ -3,12 +3,14 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { appConnectionKeys } from "../queries";
-import { TGcpProject } from "./types";
+import { TGcpLocation, TGcpProject, TListProjectLocations } from "./types";
 
 const gcpConnectionKeys = {
   all: [...appConnectionKeys.all, "gcp"] as const,
   listProjects: (connectionId: string) =>
-    [...gcpConnectionKeys.all, "projects", connectionId] as const
+    [...gcpConnectionKeys.all, "projects", connectionId] as const,
+  listProjectLocations: ({ projectId, connectionId }: TListProjectLocations) =>
+    [...gcpConnectionKeys.all, "project-locations", connectionId, projectId] as const
 };
 
 export const useGcpConnectionListProjects = (
@@ -35,3 +37,29 @@ export const useGcpConnectionListProjects = (
     ...options
   });
 };
+
+export const useGcpConnectionListProjectLocations = (
+  { connectionId, projectId }: TListProjectLocations,
+  options?: Omit<
+    UseQueryOptions<
+      TGcpLocation[],
+      unknown,
+      TGcpLocation[],
+      ReturnType<typeof gcpConnectionKeys.listProjectLocations>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: gcpConnectionKeys.listProjectLocations({ connectionId, projectId }),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGcpLocation[]>(
+        `/api/v1/app-connections/gcp/${connectionId}/secret-manager-project-locations`,
+        { params: { projectId } }
+      );
+
+      return data;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/gcp/types.ts

@@ -2,3 +2,13 @@ export type TGcpProject = {
   id: string;
   name: string;
 };
+
+export type TListProjectLocations = {
+  connectionId: string;
+  projectId: string;
+};
+
+export type TGcpLocation = {
+  displayName: string;
+  locationId: string;
+};

frontend/src/hooks/api/groups/queries.tsx

@@ -21,7 +21,27 @@ export const groupKeys = {
     limit: number;
     search: string;
     filter?: EFilterReturnedUsers;
-  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search, filter }] as const
+  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search, filter }] as const,
+  specificProjectGroupUserMemberships: ({
+    projectId,
+    slug,
+    offset,
+    limit,
+    search,
+    filter
+  }: {
+    slug: string;
+    projectId: string;
+    offset: number;
+    limit: number;
+    search: string;
+    filter?: EFilterReturnedUsers;
+  }) =>
+    [
+      ...groupKeys.forGroupUserMemberships(slug),
+      projectId,
+      { offset, limit, search, filter }
+    ] as const
 };
 
 export const useGetGroupById = (groupId: string) => {
@@ -80,3 +100,51 @@ export const useListGroupUsers = ({
     }
   });
 };
+
+export const useListProjectGroupUsers = ({
+  id,
+  projectId,
+  groupSlug,
+  offset = 0,
+  limit = 10,
+  search,
+  filter
+}: {
+  id: string;
+  groupSlug: string;
+  projectId: string;
+  offset: number;
+  limit: number;
+  search: string;
+  filter?: EFilterReturnedUsers;
+}) => {
+  return useQuery({
+    queryKey: groupKeys.specificProjectGroupUserMemberships({
+      slug: groupSlug,
+      projectId,
+      offset,
+      limit,
+      search,
+      filter
+    }),
+    enabled: Boolean(groupSlug),
+    placeholderData: (previousData) => previousData,
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        offset: String(offset),
+        limit: String(limit),
+        search,
+        ...(filter && { filter })
+      });
+
+      const { data } = await apiRequest.get<{ users: TGroupUser[]; totalCount: number }>(
+        `/api/v2/workspace/${projectId}/groups/${id}/users`,
+        {
+          params
+        }
+      );
+
+      return data;
+    }
+  });
+};

frontend/src/hooks/api/secretSyncs/types/gcp-sync.ts

@@ -3,15 +3,22 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
 
 export enum GcpSyncScope {
-  Global = "global"
+  Global = "global",
+  Region = "region"
 }
 
 export type TGcpSync = TRootSecretSync & {
   destination: SecretSync.GCPSecretManager;
-  destinationConfig: {
-    scope: GcpSyncScope.Global;
-    projectId: string;
-  };
+  destinationConfig:
+    | {
+        scope: GcpSyncScope.Global;
+        projectId: string;
+      }
+    | {
+        scope: GcpSyncScope.Region;
+        projectId: string;
+        locationId: string;
+      };
   connection: {
     app: AppConnection.GCP;
     name: string;

frontend/src/hooks/api/workspace/mutations.tsx

@@ -50,10 +50,13 @@ export const useUpdateGroupWorkspaceRole = () => {
 
       return groupMembership;
     },
-    onSuccess: (_, { projectId }) => {
+    onSuccess: (_, { projectId, groupId }) => {
       queryClient.invalidateQueries({
         queryKey: workspaceKeys.getWorkspaceGroupMemberships(projectId)
       });
+      queryClient.invalidateQueries({
+        queryKey: workspaceKeys.getWorkspaceGroupMembershipDetails(projectId, groupId)
+      });
     }
   });
 };

frontend/src/hooks/api/workspace/queries.tsx

@@ -691,6 +691,21 @@ export const useGetWorkspaceIdentityMembershipDetails = (projectId: string, iden
   });
 };
 
+export const useGetWorkspaceGroupMembershipDetails = (projectId: string, groupId: string) => {
+  return useQuery({
+    enabled: Boolean(projectId && groupId),
+    queryKey: workspaceKeys.getWorkspaceGroupMembershipDetails(projectId, groupId),
+    queryFn: async () => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.get<{ groupMembership: TGroupMembership }>(
+        `/api/v2/workspace/${projectId}/groups/${groupId}`
+      );
+      return groupMembership;
+    }
+  });
+};
+
 export const useListWorkspaceGroups = (projectId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceGroupMemberships(projectId),

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -36,6 +36,8 @@ export const workspaceKeys = {
   searchWorkspace: (dto: TSearchProjectsDTO) => ["search-projects", dto] as const,
   getWorkspaceGroupMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-groups"] as const,
+  getWorkspaceGroupMembershipDetails: (workspaceId: string, groupId: string) =>
+    [{ workspaceId, groupId }, "workspace-group-membership-details"] as const,
   getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>
     [{ projectSlug }, "workspace-cas"] as const,
   specificWorkspaceCas: ({ projectSlug, status }: { projectSlug: string; status?: CaStatus }) =>

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx

@@ -152,7 +152,7 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
               </Th>
               <Th>Email</Th>
               <Th>Added On</Th>
-              <Th />
+              <Th className="w-5" />
             </Tr>
           </THead>
           <TBody>

frontend/src/pages/organization/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembershipRow.tsx

@@ -1,8 +1,17 @@
-import { faUserMinus } from "@fortawesome/free-solid-svg-icons";
+import { faEllipsisV, faUserMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { OrgPermissionCan } from "@app/components/permissions";
-import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
 import { OrgPermissionGroupActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
 import { TGroupUser } from "@app/hooks/api/groups/types";
@@ -38,30 +47,47 @@ export const GroupMembershipRow = ({
           <p>{new Date(joinedGroupAt).toLocaleDateString()}</p>
         </Tooltip>
       </Td>
-      <Td className="justify-end">
-        <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
-          {(isAllowed) => {
-            return (
-              <Tooltip
-                content={
-                  isOidcManageGroupMembershipsEnabled
-                    ? "OIDC Group Membership Mapping Enabled. Remove user from this group in your OIDC provider."
-                    : "Remove user from group"
-                }
+      <Td>
+        <Tooltip className="max-w-sm text-center" content="Options">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="Options"
+                colorSchema="secondary"
+                className="w-6"
+                variant="plain"
               >
-                <IconButton
-                  isDisabled={!isAllowed || isOidcManageGroupMembershipsEnabled}
-                  ariaLabel="Remove user from group"
-                  onClick={() => handlePopUpOpen("removeMemberFromGroup", { username })}
-                  variant="plain"
-                  colorSchema="danger"
-                >
-                  <FontAwesomeIcon icon={faUserMinus} />
-                </IconButton>
-              </Tooltip>
-            );
-          }}
-        </OrgPermissionCan>
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent sideOffset={2} align="end">
+              <OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
+                {(isAllowed) => {
+                  return (
+                    <Tooltip
+                      content={
+                        isOidcManageGroupMembershipsEnabled
+                          ? "OIDC Group Membership Mapping Enabled. Remove user from this group in your OIDC provider."
+                          : undefined
+                      }
+                      position="left"
+                    >
+                      <div>
+                        <DropdownMenuItem
+                          icon={<FontAwesomeIcon icon={faUserMinus} />}
+                          onClick={() => handlePopUpOpen("removeMemberFromGroup", { username })}
+                          isDisabled={!isAllowed || isOidcManageGroupMembershipsEnabled}
+                        >
+                          Remove User From Group
+                        </DropdownMenuItem>
+                      </div>
+                    </Tooltip>
+                  );
+                }}
+              </OrgPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Tooltip>
       </Td>
     </Tr>
   );

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

@@ -3,6 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { faCheck, faClock, faEdit, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { PopperContentProps } from "@radix-ui/react-popper";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
@@ -28,6 +29,7 @@ import { formatProjectRoleName } from "@app/helpers/roles";
 import { usePopUp } from "@app/hooks";
 import { useGetProjectRoles, useUpdateGroupWorkspaceRole } from "@app/hooks/api";
 import { TGroupMembership } from "@app/hooks/api/groups/types";
+import { TProjectRole } from "@app/hooks/api/roles/types";
 import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
 import { groupBy } from "@app/lib/fn/array";
 
@@ -196,33 +198,38 @@ type TForm = z.infer<typeof formSchema>;
 export type TMemberRolesProp = {
   disableEdit?: boolean;
   groupId: string;
+  className?: string;
   roles: TGroupMembership["roles"];
+  popperContentProps?: PopperContentProps;
 };
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
-export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMemberRolesProp) => {
+type FormProps = {
+  projectRoles: Omit<TProjectRole, "permissions">[] | undefined;
+  roles: TGroupMembership["roles"];
+  groupId: string;
+  onClose: VoidFunction;
+};
+
+const GroupRolesForm = ({ projectRoles, roles, groupId, onClose }: FormProps) => {
   const { currentWorkspace } = useWorkspace();
-  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+
   const [searchRoles, setSearchRoles] = useState("");
 
+  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
+
+  const updateGroupWorkspaceRole = useUpdateGroupWorkspaceRole();
+
   const {
     handleSubmit,
     control,
-    reset,
     setValue,
     formState: { isSubmitting, isDirty }
   } = useForm<TForm>({
     resolver: zodResolver(formSchema)
   });
 
-  const { data: projectRoles, isPending: isRolesLoading } = useGetProjectRoles(
-    currentWorkspace?.id ?? ""
-  );
-  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
-
-  const updateGroupWorkspaceRole = useUpdateGroupWorkspaceRole();
-
   const handleRoleUpdate = async (data: TForm) => {
     const selectedRoles = Object.keys(data)
       .filter((el) => Boolean(data[el].isChecked))
@@ -253,7 +260,7 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
         roles: selectedRoles
       });
       createNotification({ text: "Successfully updated group role", type: "success" });
-      handlePopUpToggle("editRole");
+      onClose();
       setSearchRoles("");
     } catch {
       createNotification({ text: "Failed to update group role", type: "error" });
@@ -261,7 +268,120 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
   };
 
   return (
-    <div className="flex items-center space-x-2">
+    <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
+      <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+        {projectRoles
+          ?.filter(
+            ({ name, slug }) =>
+              name.toLowerCase().includes(searchRoles.toLowerCase()) ||
+              slug.toLowerCase().includes(searchRoles.toLowerCase())
+          )
+          ?.map(({ id, name, slug }) => {
+            const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
+
+            return (
+              <div key={id} className="flex items-center space-x-4">
+                <div className="flex-grow">
+                  <Controller
+                    control={control}
+                    defaultValue={Boolean(userProjectRoleDetails?.id)}
+                    name={`${slug}.isChecked`}
+                    render={({ field }) => (
+                      <Checkbox
+                        id={slug}
+                        isChecked={field.value}
+                        onCheckedChange={(isChecked) => {
+                          field.onChange(isChecked);
+                          setValue(`${slug}.temporaryAccess`, false);
+                        }}
+                      >
+                        {name}
+                      </Checkbox>
+                    )}
+                  />
+                </div>
+                <div>
+                  <Controller
+                    control={control}
+                    name={`${slug}.temporaryAccess`}
+                    defaultValue={
+                      userProjectRoleDetails?.isTemporary
+                        ? {
+                            isTemporary: true,
+                            temporaryAccessStartTime:
+                              userProjectRoleDetails.temporaryAccessStartTime as string,
+                            temporaryRange: userProjectRoleDetails.temporaryRange as string,
+                            temporaryAccessEndTime: userProjectRoleDetails.temporaryAccessEndTime
+                          }
+                        : false
+                    }
+                    render={({ field }) => (
+                      <IdentityTemporaryRoleForm
+                        temporaryConfig={
+                          typeof field.value === "boolean"
+                            ? { isTemporary: field.value }
+                            : field.value
+                        }
+                        onSetTemporary={(data) => {
+                          setValue(`${slug}.isChecked`, true, { shouldDirty: true });
+                          field.onChange({ isTemporary: true, ...data });
+                        }}
+                        onRemoveTemporary={() => {
+                          setValue(`${slug}.isChecked`, false, { shouldDirty: true });
+                          field.onChange(false);
+                        }}
+                      />
+                    )}
+                  />
+                </div>
+              </div>
+            );
+          })}
+      </div>
+      <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
+        <div>
+          <Input
+            className="w-full p-1.5 pl-8"
+            size="xs"
+            value={searchRoles}
+            onChange={(el) => setSearchRoles(el.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faSearch} />}
+            placeholder="Search roles.."
+          />
+        </div>
+        <div>
+          <Button
+            size="xs"
+            type="submit"
+            form="role-update-form"
+            leftIcon={<FontAwesomeIcon icon={faCheck} />}
+            isDisabled={!isDirty || isSubmitting}
+            isLoading={isSubmitting}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export const GroupRoles = ({
+  roles = [],
+  disableEdit = false,
+  groupId,
+  className,
+  popperContentProps
+}: TMemberRolesProp) => {
+  const { currentWorkspace } = useWorkspace();
+  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+
+  const { data: projectRoles, isPending: isRolesLoading } = useGetProjectRoles(
+    currentWorkspace?.id ?? ""
+  );
+
+  return (
+    <div className={twMerge("flex items-center space-x-1", className)}>
       {roles
         .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
         .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
@@ -325,119 +445,32 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMember
           open={popUp.editRole.isOpen}
           onOpenChange={(isOpen) => {
             handlePopUpToggle("editRole", isOpen);
-            reset();
           }}
         >
           {!disableEdit && (
-            <PopoverTrigger>
+            <PopoverTrigger onClick={(e) => e.stopPropagation()}>
               <IconButton size="sm" variant="plain" ariaLabel="update">
                 <FontAwesomeIcon icon={faEdit} />
               </IconButton>
             </PopoverTrigger>
           )}
-          <PopoverContent hideCloseBtn className="pt-4">
+          <PopoverContent
+            {...popperContentProps}
+            onClick={(e) => e.stopPropagation()}
+            hideCloseBtn
+            className="pt-4"
+          >
             {isRolesLoading ? (
               <div className="flex h-8 w-full items-center justify-center">
                 <Spinner />
               </div>
             ) : (
-              <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
-                <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
-                  {projectRoles
-                    ?.filter(
-                      ({ name, slug }) =>
-                        name.toLowerCase().includes(searchRoles.toLowerCase()) ||
-                        slug.toLowerCase().includes(searchRoles.toLowerCase())
-                    )
-                    ?.map(({ id, name, slug }) => {
-                      const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
-
-                      return (
-                        <div key={id} className="flex items-center space-x-4">
-                          <div className="flex-grow">
-                            <Controller
-                              control={control}
-                              defaultValue={Boolean(userProjectRoleDetails?.id)}
-                              name={`${slug}.isChecked`}
-                              render={({ field }) => (
-                                <Checkbox
-                                  id={slug}
-                                  isChecked={field.value}
-                                  onCheckedChange={(isChecked) => {
-                                    field.onChange(isChecked);
-                                    setValue(`${slug}.temporaryAccess`, false);
-                                  }}
-                                >
-                                  {name}
-                                </Checkbox>
-                              )}
-                            />
-                          </div>
-                          <div>
-                            <Controller
-                              control={control}
-                              name={`${slug}.temporaryAccess`}
-                              defaultValue={
-                                userProjectRoleDetails?.isTemporary
-                                  ? {
-                                      isTemporary: true,
-                                      temporaryAccessStartTime:
-                                        userProjectRoleDetails.temporaryAccessStartTime as string,
-                                      temporaryRange:
-                                        userProjectRoleDetails.temporaryRange as string,
-                                      temporaryAccessEndTime:
-                                        userProjectRoleDetails.temporaryAccessEndTime
-                                    }
-                                  : false
-                              }
-                              render={({ field }) => (
-                                <IdentityTemporaryRoleForm
-                                  temporaryConfig={
-                                    typeof field.value === "boolean"
-                                      ? { isTemporary: field.value }
-                                      : field.value
-                                  }
-                                  onSetTemporary={(data) => {
-                                    setValue(`${slug}.isChecked`, true, { shouldDirty: true });
-                                    field.onChange({ isTemporary: true, ...data });
-                                  }}
-                                  onRemoveTemporary={() => {
-                                    setValue(`${slug}.isChecked`, false, { shouldDirty: true });
-                                    field.onChange(false);
-                                  }}
-                                />
-                              )}
-                            />
-                          </div>
-                        </div>
-                      );
-                    })}
-                </div>
-                <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
-                  <div>
-                    <Input
-                      className="w-full p-1.5 pl-8"
-                      size="xs"
-                      value={searchRoles}
-                      onChange={(el) => setSearchRoles(el.target.value)}
-                      leftIcon={<FontAwesomeIcon icon={faSearch} />}
-                      placeholder="Search roles.."
-                    />
-                  </div>
-                  <div>
-                    <Button
-                      size="xs"
-                      type="submit"
-                      form="role-update-form"
-                      leftIcon={<FontAwesomeIcon icon={faCheck} />}
-                      isDisabled={!isDirty || isSubmitting}
-                      isLoading={isSubmitting}
-                    >
-                      Save
-                    </Button>
-                  </div>
-                </div>
-              </form>
+              <GroupRolesForm
+                projectRoles={projectRoles}
+                groupId={groupId}
+                roles={roles}
+                onClose={() => handlePopUpToggle("editRole")}
+              />
             )}
           </PopoverContent>
         </Popover>

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

@@ -8,6 +8,7 @@ import {
   faUsers
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -55,6 +56,7 @@ enum GroupsOrderBy {
 
 export const GroupTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate();
 
   const {
     search,
@@ -143,7 +145,32 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                 .slice(offset, perPage * page)
                 .map(({ group: { id, name }, roles, createdAt }) => {
                   return (
-                    <Tr className="group h-10" key={`st-v3-${id}`}>
+                    <Tr
+                      className="group h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      key={`st-v3-${id}`}
+                      role="button"
+                      tabIndex={0}
+                      onKeyDown={(evt) => {
+                        if (evt.key === "Enter") {
+                          navigate({
+                            to: `/${currentWorkspace.type}/$projectId/groups/$groupId` as const,
+                            params: {
+                              projectId: currentWorkspace.id,
+                              groupId: id
+                            }
+                          });
+                        }
+                      }}
+                      onClick={() =>
+                        navigate({
+                          to: `/${currentWorkspace.type}/$projectId/groups/$groupId` as const,
+                          params: {
+                            projectId: currentWorkspace.id,
+                            groupId: id
+                          }
+                        })
+                      }
+                    >
                       <Td>{name}</Td>
                       <Td>
                         <ProjectPermissionCan
@@ -165,7 +192,8 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                               <Tooltip content="Remove">
                                 <IconButton
-                                  onClick={() => {
+                                  onClick={(e) => {
+                                    e.stopPropagation();
                                     handlePopUpOpen("deleteGroup", {
                                       id,
                                       name

frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx

@@ -0,0 +1,70 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { useParams } from "@tanstack/react-router";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { EmptyState, PageHeader, Spinner } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useGetWorkspaceGroupMembershipDetails } from "@app/hooks/api/workspace/queries";
+
+import { GroupDetailsSection } from "./components/GroupDetailsSection";
+import { GroupMembersSection } from "./components/GroupMembersSection";
+
+const Page = () => {
+  const groupId = useParams({
+    strict: false,
+    select: (el) => el.groupId as string
+  });
+
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: groupMembership, isPending } = useGetWorkspaceGroupMembershipDetails(
+    currentWorkspace.id,
+    groupId
+  );
+
+  if (isPending)
+    return (
+      <div className="flex w-full items-center justify-center p-24">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      {groupMembership ? (
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={groupMembership.group.name} />
+          <div className="flex">
+            <div className="mr-4 w-96">
+              <GroupDetailsSection groupMembership={groupMembership} />
+            </div>
+            <GroupMembersSection groupMembership={groupMembership} />
+          </div>
+        </div>
+      ) : (
+        <EmptyState title="Error: Unable to find the group." className="py-12" />
+      )}
+    </div>
+  );
+};
+
+export const GroupDetailsByIDPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Helmet>
+        <title>{t("common.head-title", { title: "Project Group" })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <ProjectPermissionCan
+        I={ProjectPermissionActions.Read}
+        a={ProjectPermissionSub.Groups}
+        passThrough={false}
+        renderGuardBanner
+      >
+        <Page />
+      </ProjectPermissionCan>
+    </>
+  );
+};

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupDetailsSection.tsx

@@ -0,0 +1,152 @@
+import { faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { format } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton
+} from "@app/components/v2";
+import { CopyButton } from "@app/components/v2/CopyButton";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
+import { TGroupMembership } from "@app/hooks/api/groups/types";
+import { GroupRoles } from "@app/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupRoles";
+
+type Props = {
+  groupMembership: TGroupMembership;
+};
+
+export const GroupDetailsSection = ({ groupMembership }: Props) => {
+  const { handlePopUpToggle, popUp, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    "deleteGroup"
+  ] as const);
+
+  const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
+  const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate();
+
+  const onRemoveGroupSubmit = async () => {
+    try {
+      await deleteMutateAsync({
+        groupId: groupMembership.group.id,
+        projectId: currentWorkspace.id
+      });
+
+      createNotification({
+        text: "Successfully removed group from project",
+        type: "success"
+      });
+
+      navigate({
+        to: `/${currentWorkspace.type}/${currentWorkspace.id}/access-management?selectedTab=groups`
+      });
+
+      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="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Group Details</h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton ariaLabel="Options" colorSchema="secondary" className="w-6" variant="plain">
+              <FontAwesomeIcon icon={faEllipsisV} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent sideOffset={2} align="end">
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.Groups}
+            >
+              {(isAllowed) => {
+                return (
+                  <DropdownMenuItem
+                    icon={<FontAwesomeIcon icon={faTrash} />}
+                    onClick={() => handlePopUpOpen("deleteGroup")}
+                    isDisabled={!isAllowed}
+                  >
+                    Remove Group From Project
+                  </DropdownMenuItem>
+                );
+              }}
+            </ProjectPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Group ID</p>
+          <div className="group flex items-center gap-2">
+            <p className="text-sm text-mineshaft-300">{groupMembership.group.id}</p>
+            <CopyButton
+              value={groupMembership.group.id}
+              name="Group ID"
+              size="xs"
+              variant="plain"
+            />
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{groupMembership.group.name}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Slug</p>
+          <div className="group flex items-center gap-2">
+            <p className="text-sm text-mineshaft-300">{groupMembership.group.slug}</p>
+            <CopyButton value={groupMembership.group.slug} name="Slug" size="xs" variant="plain" />
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Project Role</p>
+          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Groups}>
+            {(isAllowed) => (
+              <GroupRoles
+                className="mt-1"
+                popperContentProps={{ side: "right" }}
+                roles={groupMembership.roles}
+                groupId={groupMembership.group.id}
+                disableEdit={!isAllowed}
+              />
+            )}
+          </ProjectPermissionCan>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Assigned to Project</p>
+          <p className="text-sm text-mineshaft-300">
+            {format(groupMembership.createdAt, "M/d/yyyy")}
+          </p>
+        </div>
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.deleteGroup.isOpen}
+        title={`Are you sure you want to remove the group ${
+          groupMembership.group.name
+        } from the project?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+        deleteKey="confirm"
+        buttonText="Remove"
+        onDeleteApproved={onRemoveGroupSubmit}
+      />
+    </div>
+  );
+};

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersSection.tsx

@@ -0,0 +1,20 @@
+import { TGroupMembership } from "@app/hooks/api/groups/types";
+
+import { GroupMembersTable } from "./GroupMembersTable";
+
+type Props = {
+  groupMembership: TGroupMembership;
+};
+
+export const GroupMembersSection = ({ groupMembership }: Props) => {
+  return (
+    <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Group Members</h3>
+      </div>
+      <div className="py-4">
+        <GroupMembersTable groupMembership={groupMembership} />
+      </div>
+    </div>
+  );
+};

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembersTable.tsx

@@ -0,0 +1,235 @@
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolder,
+  faMagnifyingGlass,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  ConfirmActionModal,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+  getUserTablePreference,
+  PreferenceKey,
+  setUserTablePreference
+} from "@app/helpers/userTablePreferences";
+import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import { useAssumeProjectPrivileges } from "@app/hooks/api";
+import { ActorType } from "@app/hooks/api/auditLogs/enums";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useListProjectGroupUsers } from "@app/hooks/api/groups/queries";
+import { EFilterReturnedUsers, TGroupMembership } from "@app/hooks/api/groups/types";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { GroupMembershipRow } from "./GroupMembershipRow";
+
+type Props = {
+  groupMembership: TGroupMembership;
+};
+
+enum GroupMembersOrderBy {
+  Name = "name"
+}
+
+export const GroupMembersTable = ({ groupMembership }: Props) => {
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection
+  } = usePagination(GroupMembersOrderBy.Name, {
+    initPerPage: getUserTablePreference("projectGroupMembersTable", PreferenceKey.PerPage, 20)
+  });
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["assumePrivileges"] as const);
+
+  const handlePerPageChange = (newPerPage: number) => {
+    setPerPage(newPerPage);
+    setUserTablePreference("projectGroupMembersTable", PreferenceKey.PerPage, newPerPage);
+  };
+
+  const { currentWorkspace } = useWorkspace();
+
+  const { data: groupMemberships, isPending } = useListProjectGroupUsers({
+    id: groupMembership.group.id,
+    groupSlug: groupMembership.group.slug,
+    projectId: currentWorkspace.id,
+    offset,
+    limit: perPage,
+    search,
+    filter: EFilterReturnedUsers.EXISTING_MEMBERS
+  });
+
+  const filteredGroupMemberships = useMemo(() => {
+    return groupMemberships && groupMemberships?.users
+      ? groupMemberships?.users
+          ?.filter((membership) => {
+            const userSearchString = `${membership.firstName && membership.firstName} ${
+              membership.lastName && membership.lastName
+            } ${membership.email && membership.email} ${
+              membership.username && membership.username
+            }`;
+            return userSearchString.toLowerCase().includes(search.trim().toLowerCase());
+          })
+          .sort((a, b) => {
+            const [membershipOne, membershipTwo] =
+              orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+            const membershipOneComparisonString = membershipOne.firstName
+              ? membershipOne.firstName
+              : membershipOne.email;
+
+            const membershipTwoComparisonString = membershipTwo.firstName
+              ? membershipTwo.firstName
+              : membershipTwo.email;
+
+            const comparison = membershipOneComparisonString
+              .toLowerCase()
+              .localeCompare(membershipTwoComparisonString.toLowerCase());
+
+            return comparison;
+          })
+      : [];
+  }, [groupMemberships, orderDirection, search]);
+
+  useResetPageHelper({
+    totalCount: filteredGroupMemberships?.length,
+    offset,
+    setPage
+  });
+
+  const assumePrivileges = useAssumeProjectPrivileges();
+
+  const handleAssumePrivileges = async () => {
+    const { userId } = popUp?.assumePrivileges?.data as { userId: string };
+    assumePrivileges.mutate(
+      {
+        actorId: userId,
+        actorType: ActorType.USER,
+        projectId: currentWorkspace.id
+      },
+      {
+        onSuccess: () => {
+          createNotification({
+            type: "success",
+            text: "User privilege assumption has started"
+          });
+
+          let overviewPage: string;
+
+          switch (currentWorkspace.type) {
+            case ProjectType.SecretScanning:
+              overviewPage = "data-sources";
+              break;
+            case ProjectType.CertificateManager:
+              overviewPage = "subscribers";
+              break;
+            default:
+              overviewPage = "overview";
+          }
+
+          window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/${overviewPage}`;
+        }
+      }
+    );
+  };
+
+  return (
+    <div>
+      <Input
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search users..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th className="w-1/3">
+                <div className="flex items-center">
+                  Name
+                  <IconButton
+                    variant="plain"
+                    className="ml-2"
+                    ariaLabel="sort"
+                    onClick={toggleOrderDirection}
+                  >
+                    <FontAwesomeIcon
+                      icon={orderDirection === OrderByDirection.DESC ? faArrowUp : faArrowDown}
+                    />
+                  </IconButton>
+                </div>
+              </Th>
+              <Th>Email</Th>
+              <Th>Added On</Th>
+              <Th className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={4} innerKey="group-user-memberships" />}
+            {!isPending &&
+              filteredGroupMemberships.slice(offset, perPage * page).map((userGroupMembership) => {
+                return (
+                  <GroupMembershipRow
+                    key={`user-group-membership-${userGroupMembership.id}`}
+                    user={userGroupMembership}
+                    onAssumePrivileges={(userId) => handlePopUpOpen("assumePrivileges", { userId })}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        {Boolean(filteredGroupMemberships.length) && (
+          <Pagination
+            count={filteredGroupMemberships.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={handlePerPageChange}
+          />
+        )}
+        {!isPending && !filteredGroupMemberships?.length && (
+          <EmptyState
+            title={
+              groupMemberships?.users.length
+                ? "No users match this search..."
+                : "This group does not have any members yet"
+            }
+            icon={groupMemberships?.users.length ? faSearch : faFolder}
+          />
+        )}
+      </TableContainer>
+      <ConfirmActionModal
+        isOpen={popUp.assumePrivileges.isOpen}
+        confirmKey="assume"
+        title="Do you want to assume privileges of this user?"
+        subTitle="This will set your privileges to those of the user for the next hour."
+        onChange={(isOpen) => handlePopUpToggle("assumePrivileges", isOpen)}
+        onConfirmed={handleAssumePrivileges}
+        buttonText="Confirm"
+      />
+    </div>
+  );
+};

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/GroupMembershipRow.tsx

@@ -0,0 +1,76 @@
+import { faEllipsisV, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Td,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionMemberActions, ProjectPermissionSub } from "@app/context";
+import { TGroupUser } from "@app/hooks/api/groups/types";
+
+type Props = {
+  user: TGroupUser;
+  onAssumePrivileges: (userId: string) => void;
+};
+
+export const GroupMembershipRow = ({
+  user: { firstName, lastName, joinedGroupAt, email, id },
+  onAssumePrivileges
+}: Props) => {
+  return (
+    <Tr className="items-center" key={`group-user-${id}`}>
+      <Td>
+        <p>{`${firstName ?? "-"} ${lastName ?? ""}`}</p>
+      </Td>
+      <Td>
+        <p>{email}</p>
+      </Td>
+      <Td>
+        <Tooltip content={new Date(joinedGroupAt).toLocaleString()}>
+          <p>{new Date(joinedGroupAt).toLocaleDateString()}</p>
+        </Tooltip>
+      </Td>
+      <Td>
+        <Tooltip className="max-w-sm text-center" content="Options">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton
+                ariaLabel="Options"
+                colorSchema="secondary"
+                className="w-6"
+                variant="plain"
+              >
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent sideOffset={2} align="end">
+              <ProjectPermissionCan
+                I={ProjectPermissionMemberActions.AssumePrivileges}
+                a={ProjectPermissionSub.Member}
+              >
+                {(isAllowed) => {
+                  return (
+                    <DropdownMenuItem
+                      icon={<FontAwesomeIcon icon={faUser} />}
+                      onClick={() => onAssumePrivileges(id)}
+                      isDisabled={!isAllowed}
+                    >
+                      Assume Privileges
+                    </DropdownMenuItem>
+                  );
+                }}
+              </ProjectPermissionCan>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Tooltip>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/pages/project/GroupDetailsByIDPage/components/GroupMembersSection/index.tsx

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

frontend/src/pages/project/GroupDetailsByIDPage/components/index.tsx

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

frontend/src/pages/project/GroupDetailsByIDPage/route-cert-manager.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Groups"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/GroupDetailsByIDPage/route-kms.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Groups"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/GroupDetailsByIDPage/route-secret-manager.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Groups"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/GroupDetailsByIDPage/route-secret-scanning.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-scanning/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Groups"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/GroupDetailsByIDPage/route-ssh.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Groups"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/project/GroupDetailsByIDPage/route.tsx

@@ -0,0 +1,27 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId"
+)({
+  component: GroupDetailsByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "groups"
+      }
+    ]
+  })
+});

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -1,5 +1,6 @@
 import { TerraformCloudSyncScope } from "@app/hooks/api/appConnections/terraform-cloud";
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
+import { GcpSyncScope } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 import {
   GitHubSyncScope,
   GitHubSyncVisibility
@@ -47,7 +48,8 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
       break;
     case SecretSync.GCPSecretManager:
       primaryText = destinationConfig.projectId;
-      secondaryText = "Global";
+      secondaryText =
+        destinationConfig.scope === GcpSyncScope.Global ? "Global" : destinationConfig.locationId;
       break;
     case SecretSync.AzureKeyVault:
       primaryText = destinationConfig.vaultBaseUrl;

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GcpSyncDestinationSection.tsx

@@ -1,14 +1,22 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { TGcpSync } from "@app/hooks/api/secretSyncs/types/gcp-sync";
+import { GcpSyncScope, TGcpSync } from "@app/hooks/api/secretSyncs/types/gcp-sync";
 
 type Props = {
   secretSync: TGcpSync;
 };
 
 export const GcpSyncDestinationSection = ({ secretSync }: Props) => {
-  const {
-    destinationConfig: { projectId }
-  } = secretSync;
+  const { destinationConfig } = secretSync;
 
-  return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Project ID">{destinationConfig.projectId}</GenericFieldLabel>
+      <GenericFieldLabel label="Scope" className="capitalize">
+        {destinationConfig.scope}
+      </GenericFieldLabel>
+      {destinationConfig.scope === GcpSyncScope.Region && (
+        <GenericFieldLabel label="Region">{destinationConfig.locationId}</GenericFieldLabel>
+      )}
+    </>
+  );
 };

frontend/src/routeTree.gen.ts

@@ -115,19 +115,24 @@ import { Route as certManagerAlertingPageRouteImport } from './pages/cert-manage
 import { Route as projectRoleDetailsBySlugPageRouteSshImport } from './pages/project/RoleDetailsBySlugPage/route-ssh'
 import { Route as projectMemberDetailsByIDPageRouteSshImport } from './pages/project/MemberDetailsByIDPage/route-ssh'
 import { Route as projectIdentityDetailsByIDPageRouteSshImport } from './pages/project/IdentityDetailsByIDPage/route-ssh'
+import { Route as projectGroupDetailsByIDPageRouteSshImport } from './pages/project/GroupDetailsByIDPage/route-ssh'
 import { Route as projectRoleDetailsBySlugPageRouteSecretScanningImport } from './pages/project/RoleDetailsBySlugPage/route-secret-scanning'
 import { Route as projectMemberDetailsByIDPageRouteSecretScanningImport } from './pages/project/MemberDetailsByIDPage/route-secret-scanning'
 import { Route as projectIdentityDetailsByIDPageRouteSecretScanningImport } from './pages/project/IdentityDetailsByIDPage/route-secret-scanning'
+import { Route as projectGroupDetailsByIDPageRouteSecretScanningImport } from './pages/project/GroupDetailsByIDPage/route-secret-scanning'
 import { Route as projectRoleDetailsBySlugPageRouteSecretManagerImport } from './pages/project/RoleDetailsBySlugPage/route-secret-manager'
 import { Route as projectMemberDetailsByIDPageRouteSecretManagerImport } from './pages/project/MemberDetailsByIDPage/route-secret-manager'
 import { Route as projectIdentityDetailsByIDPageRouteSecretManagerImport } from './pages/project/IdentityDetailsByIDPage/route-secret-manager'
+import { Route as projectGroupDetailsByIDPageRouteSecretManagerImport } from './pages/project/GroupDetailsByIDPage/route-secret-manager'
 import { Route as projectRoleDetailsBySlugPageRouteKmsImport } from './pages/project/RoleDetailsBySlugPage/route-kms'
 import { Route as projectMemberDetailsByIDPageRouteKmsImport } from './pages/project/MemberDetailsByIDPage/route-kms'
 import { Route as projectIdentityDetailsByIDPageRouteKmsImport } from './pages/project/IdentityDetailsByIDPage/route-kms'
+import { Route as projectGroupDetailsByIDPageRouteKmsImport } from './pages/project/GroupDetailsByIDPage/route-kms'
 import { Route as projectRoleDetailsBySlugPageRouteCertManagerImport } from './pages/project/RoleDetailsBySlugPage/route-cert-manager'
 import { Route as certManagerPkiCollectionDetailsByIDPageRoutesImport } from './pages/cert-manager/PkiCollectionDetailsByIDPage/routes'
 import { Route as projectMemberDetailsByIDPageRouteCertManagerImport } from './pages/project/MemberDetailsByIDPage/route-cert-manager'
 import { Route as projectIdentityDetailsByIDPageRouteCertManagerImport } from './pages/project/IdentityDetailsByIDPage/route-cert-manager'
+import { Route as projectGroupDetailsByIDPageRouteCertManagerImport } from './pages/project/GroupDetailsByIDPage/route-cert-manager'
 import { Route as sshSshHostGroupDetailsByIDPageRouteImport } from './pages/ssh/SshHostGroupDetailsByIDPage/route'
 import { Route as sshSshCaByIDPageRouteImport } from './pages/ssh/SshCaByIDPage/route'
 import { Route as secretManagerSecretDashboardPageRouteImport } from './pages/secret-manager/SecretDashboardPage/route'
@@ -1149,6 +1154,13 @@ const projectIdentityDetailsByIDPageRouteSshRoute =
     getParentRoute: () => sshLayoutRoute,
   } as any)
 
+const projectGroupDetailsByIDPageRouteSshRoute =
+  projectGroupDetailsByIDPageRouteSshImport.update({
+    id: '/groups/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => sshLayoutRoute,
+  } as any)
+
 const projectRoleDetailsBySlugPageRouteSecretScanningRoute =
   projectRoleDetailsBySlugPageRouteSecretScanningImport.update({
     id: '/roles/$roleSlug',
@@ -1170,6 +1182,13 @@ const projectIdentityDetailsByIDPageRouteSecretScanningRoute =
     getParentRoute: () => secretScanningLayoutRoute,
   } as any)
 
+const projectGroupDetailsByIDPageRouteSecretScanningRoute =
+  projectGroupDetailsByIDPageRouteSecretScanningImport.update({
+    id: '/groups/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => secretScanningLayoutRoute,
+  } as any)
+
 const projectRoleDetailsBySlugPageRouteSecretManagerRoute =
   projectRoleDetailsBySlugPageRouteSecretManagerImport.update({
     id: '/roles/$roleSlug',
@@ -1191,6 +1210,13 @@ const projectIdentityDetailsByIDPageRouteSecretManagerRoute =
     getParentRoute: () => secretManagerLayoutRoute,
   } as any)
 
+const projectGroupDetailsByIDPageRouteSecretManagerRoute =
+  projectGroupDetailsByIDPageRouteSecretManagerImport.update({
+    id: '/groups/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => secretManagerLayoutRoute,
+  } as any)
+
 const projectRoleDetailsBySlugPageRouteKmsRoute =
   projectRoleDetailsBySlugPageRouteKmsImport.update({
     id: '/roles/$roleSlug',
@@ -1212,6 +1238,13 @@ const projectIdentityDetailsByIDPageRouteKmsRoute =
     getParentRoute: () => kmsLayoutRoute,
   } as any)
 
+const projectGroupDetailsByIDPageRouteKmsRoute =
+  projectGroupDetailsByIDPageRouteKmsImport.update({
+    id: '/groups/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => kmsLayoutRoute,
+  } as any)
+
 const projectRoleDetailsBySlugPageRouteCertManagerRoute =
   projectRoleDetailsBySlugPageRouteCertManagerImport.update({
     id: '/roles/$roleSlug',
@@ -1240,6 +1273,13 @@ const projectIdentityDetailsByIDPageRouteCertManagerRoute =
     getParentRoute: () => certManagerLayoutRoute,
   } as any)
 
+const projectGroupDetailsByIDPageRouteCertManagerRoute =
+  projectGroupDetailsByIDPageRouteCertManagerImport.update({
+    id: '/groups/$groupId',
+    path: '/groups/$groupId',
+    getParentRoute: () => certManagerLayoutRoute,
+  } as any)
+
 const sshSshHostGroupDetailsByIDPageRouteRoute =
   sshSshHostGroupDetailsByIDPageRouteImport.update({
     id: '/ssh-host-groups/$sshHostGroupId',
@@ -2861,6 +2901,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof sshSshHostGroupDetailsByIDPageRouteImport
       parentRoute: typeof sshLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/cert-manager/$projectId/groups/$groupId'
+      preLoaderRoute: typeof projectGroupDetailsByIDPageRouteCertManagerImport
+      parentRoute: typeof certManagerLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId': {
       id: '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId'
       path: '/identities/$identityId'
@@ -2889,6 +2936,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof projectRoleDetailsBySlugPageRouteCertManagerImport
       parentRoute: typeof certManagerLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/kms/$projectId/groups/$groupId'
+      preLoaderRoute: typeof projectGroupDetailsByIDPageRouteKmsImport
+      parentRoute: typeof kmsLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId': {
       id: '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId'
       path: '/identities/$identityId'
@@ -2910,6 +2964,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof projectRoleDetailsBySlugPageRouteKmsImport
       parentRoute: typeof kmsLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/secret-manager/$projectId/groups/$groupId'
+      preLoaderRoute: typeof projectGroupDetailsByIDPageRouteSecretManagerImport
+      parentRoute: typeof secretManagerLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId': {
       id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId'
       path: '/identities/$identityId'
@@ -2931,6 +2992,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof projectRoleDetailsBySlugPageRouteSecretManagerImport
       parentRoute: typeof secretManagerLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/secret-scanning/$projectId/groups/$groupId'
+      preLoaderRoute: typeof projectGroupDetailsByIDPageRouteSecretScanningImport
+      parentRoute: typeof secretScanningLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId': {
       id: '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId'
       path: '/identities/$identityId'
@@ -2952,6 +3020,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof projectRoleDetailsBySlugPageRouteSecretScanningImport
       parentRoute: typeof secretScanningLayoutImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId'
+      path: '/groups/$groupId'
+      fullPath: '/ssh/$projectId/groups/$groupId'
+      preLoaderRoute: typeof projectGroupDetailsByIDPageRouteSshImport
+      parentRoute: typeof sshLayoutImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId': {
       id: '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId'
       path: '/identities/$identityId'
@@ -3735,6 +3810,7 @@ interface certManagerLayoutRouteChildren {
   AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdCertManagerLayoutCertificateTemplatesRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdCertManagerLayoutCertificateTemplatesRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdCertManagerLayoutSubscribersRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdCertManagerLayoutSubscribersRouteWithChildren
   certManagerCertAuthDetailsByIDPageRouteRoute: typeof certManagerCertAuthDetailsByIDPageRouteRoute
+  projectGroupDetailsByIDPageRouteCertManagerRoute: typeof projectGroupDetailsByIDPageRouteCertManagerRoute
   projectIdentityDetailsByIDPageRouteCertManagerRoute: typeof projectIdentityDetailsByIDPageRouteCertManagerRoute
   projectMemberDetailsByIDPageRouteCertManagerRoute: typeof projectMemberDetailsByIDPageRouteCertManagerRoute
   certManagerPkiCollectionDetailsByIDPageRoutesRoute: typeof certManagerPkiCollectionDetailsByIDPageRoutesRoute
@@ -3755,6 +3831,8 @@ const certManagerLayoutRouteChildren: certManagerLayoutRouteChildren = {
     AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdCertManagerLayoutSubscribersRouteWithChildren,
   certManagerCertAuthDetailsByIDPageRouteRoute:
     certManagerCertAuthDetailsByIDPageRouteRoute,
+  projectGroupDetailsByIDPageRouteCertManagerRoute:
+    projectGroupDetailsByIDPageRouteCertManagerRoute,
   projectIdentityDetailsByIDPageRouteCertManagerRoute:
     projectIdentityDetailsByIDPageRouteCertManagerRoute,
   projectMemberDetailsByIDPageRouteCertManagerRoute:
@@ -3787,6 +3865,7 @@ interface kmsLayoutRouteChildren {
   kmsOverviewPageRouteRoute: typeof kmsOverviewPageRouteRoute
   kmsSettingsPageRouteRoute: typeof kmsSettingsPageRouteRoute
   projectAccessControlPageRouteKmsRoute: typeof projectAccessControlPageRouteKmsRoute
+  projectGroupDetailsByIDPageRouteKmsRoute: typeof projectGroupDetailsByIDPageRouteKmsRoute
   projectIdentityDetailsByIDPageRouteKmsRoute: typeof projectIdentityDetailsByIDPageRouteKmsRoute
   projectMemberDetailsByIDPageRouteKmsRoute: typeof projectMemberDetailsByIDPageRouteKmsRoute
   projectRoleDetailsBySlugPageRouteKmsRoute: typeof projectRoleDetailsBySlugPageRouteKmsRoute
@@ -3797,6 +3876,8 @@ const kmsLayoutRouteChildren: kmsLayoutRouteChildren = {
   kmsOverviewPageRouteRoute: kmsOverviewPageRouteRoute,
   kmsSettingsPageRouteRoute: kmsSettingsPageRouteRoute,
   projectAccessControlPageRouteKmsRoute: projectAccessControlPageRouteKmsRoute,
+  projectGroupDetailsByIDPageRouteKmsRoute:
+    projectGroupDetailsByIDPageRouteKmsRoute,
   projectIdentityDetailsByIDPageRouteKmsRoute:
     projectIdentityDetailsByIDPageRouteKmsRoute,
   projectMemberDetailsByIDPageRouteKmsRoute:
@@ -4078,6 +4159,7 @@ interface secretManagerLayoutRouteChildren {
   projectAccessControlPageRouteSecretManagerRoute: typeof projectAccessControlPageRouteSecretManagerRoute
   AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRouteWithChildren
   secretManagerSecretDashboardPageRouteRoute: typeof secretManagerSecretDashboardPageRouteRoute
+  projectGroupDetailsByIDPageRouteSecretManagerRoute: typeof projectGroupDetailsByIDPageRouteSecretManagerRoute
   projectIdentityDetailsByIDPageRouteSecretManagerRoute: typeof projectIdentityDetailsByIDPageRouteSecretManagerRoute
   projectMemberDetailsByIDPageRouteSecretManagerRoute: typeof projectMemberDetailsByIDPageRouteSecretManagerRoute
   projectRoleDetailsBySlugPageRouteSecretManagerRoute: typeof projectRoleDetailsBySlugPageRouteSecretManagerRoute
@@ -4098,6 +4180,8 @@ const secretManagerLayoutRouteChildren: secretManagerLayoutRouteChildren = {
     AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRouteWithChildren,
   secretManagerSecretDashboardPageRouteRoute:
     secretManagerSecretDashboardPageRouteRoute,
+  projectGroupDetailsByIDPageRouteSecretManagerRoute:
+    projectGroupDetailsByIDPageRouteSecretManagerRoute,
   projectIdentityDetailsByIDPageRouteSecretManagerRoute:
     projectIdentityDetailsByIDPageRouteSecretManagerRoute,
   projectMemberDetailsByIDPageRouteSecretManagerRoute:
@@ -4146,6 +4230,7 @@ interface secretScanningLayoutRouteChildren {
   secretScanningSettingsPageRouteRoute: typeof secretScanningSettingsPageRouteRoute
   projectAccessControlPageRouteSecretScanningRoute: typeof projectAccessControlPageRouteSecretScanningRoute
   AuthenticateInjectOrgDetailsOrgLayoutSecretScanningProjectIdSecretScanningLayoutDataSourcesRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretScanningProjectIdSecretScanningLayoutDataSourcesRouteWithChildren
+  projectGroupDetailsByIDPageRouteSecretScanningRoute: typeof projectGroupDetailsByIDPageRouteSecretScanningRoute
   projectIdentityDetailsByIDPageRouteSecretScanningRoute: typeof projectIdentityDetailsByIDPageRouteSecretScanningRoute
   projectMemberDetailsByIDPageRouteSecretScanningRoute: typeof projectMemberDetailsByIDPageRouteSecretScanningRoute
   projectRoleDetailsBySlugPageRouteSecretScanningRoute: typeof projectRoleDetailsBySlugPageRouteSecretScanningRoute
@@ -4159,6 +4244,8 @@ const secretScanningLayoutRouteChildren: secretScanningLayoutRouteChildren = {
     projectAccessControlPageRouteSecretScanningRoute,
   AuthenticateInjectOrgDetailsOrgLayoutSecretScanningProjectIdSecretScanningLayoutDataSourcesRoute:
     AuthenticateInjectOrgDetailsOrgLayoutSecretScanningProjectIdSecretScanningLayoutDataSourcesRouteWithChildren,
+  projectGroupDetailsByIDPageRouteSecretScanningRoute:
+    projectGroupDetailsByIDPageRouteSecretScanningRoute,
   projectIdentityDetailsByIDPageRouteSecretScanningRoute:
     projectIdentityDetailsByIDPageRouteSecretScanningRoute,
   projectMemberDetailsByIDPageRouteSecretScanningRoute:
@@ -4192,6 +4279,7 @@ interface sshLayoutRouteChildren {
   projectAccessControlPageRouteSshRoute: typeof projectAccessControlPageRouteSshRoute
   sshSshCaByIDPageRouteRoute: typeof sshSshCaByIDPageRouteRoute
   sshSshHostGroupDetailsByIDPageRouteRoute: typeof sshSshHostGroupDetailsByIDPageRouteRoute
+  projectGroupDetailsByIDPageRouteSshRoute: typeof projectGroupDetailsByIDPageRouteSshRoute
   projectIdentityDetailsByIDPageRouteSshRoute: typeof projectIdentityDetailsByIDPageRouteSshRoute
   projectMemberDetailsByIDPageRouteSshRoute: typeof projectMemberDetailsByIDPageRouteSshRoute
   projectRoleDetailsBySlugPageRouteSshRoute: typeof projectRoleDetailsBySlugPageRouteSshRoute
@@ -4206,6 +4294,8 @@ const sshLayoutRouteChildren: sshLayoutRouteChildren = {
   sshSshCaByIDPageRouteRoute: sshSshCaByIDPageRouteRoute,
   sshSshHostGroupDetailsByIDPageRouteRoute:
     sshSshHostGroupDetailsByIDPageRouteRoute,
+  projectGroupDetailsByIDPageRouteSshRoute:
+    projectGroupDetailsByIDPageRouteSshRoute,
   projectIdentityDetailsByIDPageRouteSshRoute:
     projectIdentityDetailsByIDPageRouteSshRoute,
   projectMemberDetailsByIDPageRouteSshRoute:
@@ -4561,19 +4651,24 @@ export interface FileRoutesByFullPath {
   '/secret-manager/$projectId/secrets/$envSlug': typeof secretManagerSecretDashboardPageRouteRoute
   '/ssh/$projectId/ca/$caId': typeof sshSshCaByIDPageRouteRoute
   '/ssh/$projectId/ssh-host-groups/$sshHostGroupId': typeof sshSshHostGroupDetailsByIDPageRouteRoute
+  '/cert-manager/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/pki-collections/$collectionId': typeof certManagerPkiCollectionDetailsByIDPageRoutesRoute
   '/cert-manager/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteCertManagerRoute
+  '/kms/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteKmsRoute
+  '/secret-manager/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretManagerRoute
+  '/secret-scanning/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretScanningRoute
+  '/ssh/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSshRoute
@@ -4764,19 +4859,24 @@ export interface FileRoutesByTo {
   '/secret-manager/$projectId/secrets/$envSlug': typeof secretManagerSecretDashboardPageRouteRoute
   '/ssh/$projectId/ca/$caId': typeof sshSshCaByIDPageRouteRoute
   '/ssh/$projectId/ssh-host-groups/$sshHostGroupId': typeof sshSshHostGroupDetailsByIDPageRouteRoute
+  '/cert-manager/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteCertManagerRoute
   '/cert-manager/$projectId/pki-collections/$collectionId': typeof certManagerPkiCollectionDetailsByIDPageRoutesRoute
   '/cert-manager/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteCertManagerRoute
+  '/kms/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteKmsRoute
   '/kms/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteKmsRoute
+  '/secret-manager/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretManagerRoute
   '/secret-manager/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretManagerRoute
+  '/secret-scanning/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretScanningRoute
   '/secret-scanning/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretScanningRoute
+  '/ssh/$projectId/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSshRoute
   '/ssh/$projectId/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSshRoute
@@ -4990,19 +5090,24 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug': typeof secretManagerSecretDashboardPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ca/$caId': typeof sshSshCaByIDPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId': typeof sshSshHostGroupDetailsByIDPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId': typeof projectGroupDetailsByIDPageRouteCertManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteCertManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/members/$membershipId': typeof projectMemberDetailsByIDPageRouteCertManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId': typeof certManagerPkiCollectionDetailsByIDPageRoutesRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteCertManagerRoute
+  '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId': typeof projectGroupDetailsByIDPageRouteKmsRoute
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteKmsRoute
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/members/$membershipId': typeof projectMemberDetailsByIDPageRouteKmsRoute
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteKmsRoute
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretManagerRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretManagerRoute
+  '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSecretScanningRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSecretScanningRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSecretScanningRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSecretScanningRoute
+  '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId': typeof projectGroupDetailsByIDPageRouteSshRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId': typeof projectIdentityDetailsByIDPageRouteSshRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/members/$membershipId': typeof projectMemberDetailsByIDPageRouteSshRoute
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/roles/$roleSlug': typeof projectRoleDetailsBySlugPageRouteSshRoute
@@ -5207,19 +5312,24 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/secrets/$envSlug'
     | '/ssh/$projectId/ca/$caId'
     | '/ssh/$projectId/ssh-host-groups/$sshHostGroupId'
+    | '/cert-manager/$projectId/groups/$groupId'
     | '/cert-manager/$projectId/identities/$identityId'
     | '/cert-manager/$projectId/members/$membershipId'
     | '/cert-manager/$projectId/pki-collections/$collectionId'
     | '/cert-manager/$projectId/roles/$roleSlug'
+    | '/kms/$projectId/groups/$groupId'
     | '/kms/$projectId/identities/$identityId'
     | '/kms/$projectId/members/$membershipId'
     | '/kms/$projectId/roles/$roleSlug'
+    | '/secret-manager/$projectId/groups/$groupId'
     | '/secret-manager/$projectId/identities/$identityId'
     | '/secret-manager/$projectId/members/$membershipId'
     | '/secret-manager/$projectId/roles/$roleSlug'
+    | '/secret-scanning/$projectId/groups/$groupId'
     | '/secret-scanning/$projectId/identities/$identityId'
     | '/secret-scanning/$projectId/members/$membershipId'
     | '/secret-scanning/$projectId/roles/$roleSlug'
+    | '/ssh/$projectId/groups/$groupId'
     | '/ssh/$projectId/identities/$identityId'
     | '/ssh/$projectId/members/$membershipId'
     | '/ssh/$projectId/roles/$roleSlug'
@@ -5409,19 +5519,24 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/secrets/$envSlug'
     | '/ssh/$projectId/ca/$caId'
     | '/ssh/$projectId/ssh-host-groups/$sshHostGroupId'
+    | '/cert-manager/$projectId/groups/$groupId'
     | '/cert-manager/$projectId/identities/$identityId'
     | '/cert-manager/$projectId/members/$membershipId'
     | '/cert-manager/$projectId/pki-collections/$collectionId'
     | '/cert-manager/$projectId/roles/$roleSlug'
+    | '/kms/$projectId/groups/$groupId'
     | '/kms/$projectId/identities/$identityId'
     | '/kms/$projectId/members/$membershipId'
     | '/kms/$projectId/roles/$roleSlug'
+    | '/secret-manager/$projectId/groups/$groupId'
     | '/secret-manager/$projectId/identities/$identityId'
     | '/secret-manager/$projectId/members/$membershipId'
     | '/secret-manager/$projectId/roles/$roleSlug'
+    | '/secret-scanning/$projectId/groups/$groupId'
     | '/secret-scanning/$projectId/identities/$identityId'
     | '/secret-scanning/$projectId/members/$membershipId'
     | '/secret-scanning/$projectId/roles/$roleSlug'
+    | '/ssh/$projectId/groups/$groupId'
     | '/ssh/$projectId/identities/$identityId'
     | '/ssh/$projectId/members/$membershipId'
     | '/ssh/$projectId/roles/$roleSlug'
@@ -5633,19 +5748,24 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ca/$caId'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId'
+    | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/roles/$roleSlug'
+    | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/roles/$roleSlug'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/roles/$roleSlug'
+    | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/roles/$roleSlug'
@@ -6206,6 +6326,7 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/certificate-templates",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/subscribers",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/ca/$caName",
+        "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/members/$membershipId",
         "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId",
@@ -6220,6 +6341,7 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview",
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/settings",
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/access-management",
+        "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/members/$membershipId",
         "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/roles/$roleSlug"
@@ -6237,6 +6359,7 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/access-management",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug",
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/members/$membershipId",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug"
@@ -6250,6 +6373,7 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/settings",
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/access-management",
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/data-sources",
+        "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/members/$membershipId",
         "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/roles/$roleSlug"
@@ -6266,6 +6390,7 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/access-management",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ca/$caId",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/ssh-host-groups/$sshHostGroupId",
+        "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/members/$membershipId",
         "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/roles/$roleSlug"
@@ -6558,6 +6683,10 @@ export const routeTree = rootRoute
       "filePath": "ssh/SshHostGroupDetailsByIDPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/groups/$groupId": {
+      "filePath": "project/GroupDetailsByIDPage/route-cert-manager.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/identities/$identityId": {
       "filePath": "project/IdentityDetailsByIDPage/route-cert-manager.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
@@ -6574,6 +6703,10 @@ export const routeTree = rootRoute
       "filePath": "project/RoleDetailsBySlugPage/route-cert-manager.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/groups/$groupId": {
+      "filePath": "project/GroupDetailsByIDPage/route-kms.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/identities/$identityId": {
       "filePath": "project/IdentityDetailsByIDPage/route-kms.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
@@ -6586,6 +6719,10 @@ export const routeTree = rootRoute
       "filePath": "project/RoleDetailsBySlugPage/route-kms.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/groups/$groupId": {
+      "filePath": "project/GroupDetailsByIDPage/route-secret-manager.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId": {
       "filePath": "project/IdentityDetailsByIDPage/route-secret-manager.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout"
@@ -6598,6 +6735,10 @@ export const routeTree = rootRoute
       "filePath": "project/RoleDetailsBySlugPage/route-secret-manager.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/groups/$groupId": {
+      "filePath": "project/GroupDetailsByIDPage/route-secret-scanning.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout/identities/$identityId": {
       "filePath": "project/IdentityDetailsByIDPage/route-secret-scanning.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout"
@@ -6610,6 +6751,10 @@ export const routeTree = rootRoute
       "filePath": "project/RoleDetailsBySlugPage/route-secret-scanning.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-scanning/$projectId/_secret-scanning-layout"
     },
+    "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/groups/$groupId": {
+      "filePath": "project/GroupDetailsByIDPage/route-ssh.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout"
+    },
     "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout/identities/$identityId": {
       "filePath": "project/IdentityDetailsByIDPage/route-ssh.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout"

frontend/src/routes.ts

@@ -270,7 +270,8 @@ const secretManagerRoutes = route("/secret-manager/$projectId", [
     route("/access-management", "project/AccessControlPage/route-secret-manager.tsx"),
     route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-secret-manager.tsx"),
     route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-secret-manager.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-manager.tsx")
+    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-manager.tsx"),
+    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-secret-manager.tsx")
   ])
 ]);
 
@@ -314,7 +315,8 @@ const certManagerRoutes = route("/cert-manager/$projectId", [
     route("/access-management", "project/AccessControlPage/route-cert-manager.tsx"),
     route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-cert-manager.tsx"),
     route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-cert-manager.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-cert-manager.tsx")
+    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-cert-manager.tsx"),
+    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-cert-manager.tsx")
   ])
 ]);
 
@@ -326,7 +328,8 @@ const kmsRoutes = route("/kms/$projectId", [
     route("/access-management", "project/AccessControlPage/route-kms.tsx"),
     route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-kms.tsx"),
     route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-kms.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-kms.tsx")
+    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-kms.tsx"),
+    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-kms.tsx")
   ])
 ]);
 
@@ -341,7 +344,8 @@ const sshRoutes = route("/ssh/$projectId", [
     route("/access-management", "project/AccessControlPage/route-ssh.tsx"),
     route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-ssh.tsx"),
     route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-ssh.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-ssh.tsx")
+    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-ssh.tsx"),
+    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-ssh.tsx")
   ])
 ]);
 
@@ -356,7 +360,8 @@ const secretScanningRoutes = route("/secret-scanning/$projectId", [
     route("/access-management", "project/AccessControlPage/route-secret-scanning.tsx"),
     route("/roles/$roleSlug", "project/RoleDetailsBySlugPage/route-secret-scanning.tsx"),
     route("/identities/$identityId", "project/IdentityDetailsByIDPage/route-secret-scanning.tsx"),
-    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-scanning.tsx")
+    route("/members/$membershipId", "project/MemberDetailsByIDPage/route-secret-scanning.tsx"),
+    route("/groups/$groupId", "project/GroupDetailsByIDPage/route-secret-scanning.tsx")
   ])
 ]);