Merge remote-tracking branch 'origin/main' into feat/sync-circle-ci-context

frontend/src/components/v2/projects/NewProjectModal.tsx

@@ -36,7 +36,8 @@ import {
   fetchOrgUsers,
   useAddUserToWsNonE2EE,
   useCreateWorkspace,
-  useGetExternalKmsList
+  useGetExternalKmsList,
+  useGetUserWorkspaces
 } from "@app/hooks/api";
 import { INTERNAL_KMS_KEY_ID } from "@app/hooks/api/kms/types";
 import { InfisicalProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
@@ -68,6 +69,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
   const { permission } = useOrgPermission();
   const { user } = useUser();
   const createWs = useCreateWorkspace();
+  const { refetch: refetchWorkspaces } = useGetUserWorkspaces();
   const addUsersToProject = useAddUserToWsNonE2EE();
   const { subscription } = useSubscription();
 
@@ -137,8 +139,8 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
           orgId: currentOrg.id
         });
       }
-      // eslint-disable-next-line no-promise-executor-return -- We do this because the function returns too fast, which sometimes causes an error when the user is redirected.
-      await new Promise((resolve) => setTimeout(resolve, 2_000));
+
+      await refetchWorkspaces();
 
       createNotification({ text: "Project created", type: "success" });
       reset();

frontend/src/helpers/parseEnvVar.ts

@@ -1,14 +1,31 @@
 /** Extracts the key and value from a passed in env string based on the provided delimiters. */
 export const getKeyValue = (pastedContent: string, delimiters: string[]) => {
-  const foundDelimiter = delimiters.find((delimiter) => pastedContent.includes(delimiter));
+  if (!pastedContent) {
+    return { key: "", value: "" };
+  }
 
-  if (!foundDelimiter) {
+  let firstDelimiterIndex = -1;
+  let foundDelimiter = "";
+
+  delimiters.forEach((delimiter) => {
+    const index = pastedContent.indexOf(delimiter);
+    if (index !== -1 && (firstDelimiterIndex === -1 || index < firstDelimiterIndex)) {
+      firstDelimiterIndex = index;
+      foundDelimiter = delimiter;
+    }
+  });
+
+  const hasValueAfterDelimiter = pastedContent.length > firstDelimiterIndex + foundDelimiter.length;
+
+  if (firstDelimiterIndex === -1 || !hasValueAfterDelimiter) {
     return { key: pastedContent.trim(), value: "" };
   }
 
-  const [key, value] = pastedContent.split(foundDelimiter);
+  const key = pastedContent.substring(0, firstDelimiterIndex);
+  const value = pastedContent.substring(firstDelimiterIndex + foundDelimiter.length);
+
   return {
     key: key.trim(),
-    value: (value ?? "").trim()
+    value: value.trim()
   };
 };

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

@@ -18,15 +18,15 @@ export type TAccessApprovalPolicy = {
   approvers?: Approver[];
 };
 
-export enum ApproverType{
+export enum ApproverType {
   User = "user",
   Group = "group"
 }
 
-export type Approver ={
+export type Approver = {
   id: string;
   type: ApproverType;
-}
+};
 
 export type TAccessApprovalRequest = {
   id: string;
@@ -70,6 +70,7 @@ export type TAccessApprovalRequest = {
     secretPath?: string | null;
     envId: string;
     enforcementLevel: EnforcementLevel;
+    deletedAt: Date | null;
   };
 
   reviewers: {

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -8,6 +8,7 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.DELETE_SECRET]: "Delete secret",
   [EventType.GET_WORKSPACE_KEY]: "Read project key",
   [EventType.AUTHORIZE_INTEGRATION]: "Authorize integration",
+  [EventType.UPDATE_INTEGRATION_AUTH]: "Update integration auth",
   [EventType.UNAUTHORIZE_INTEGRATION]: "Unauthorize integration",
   [EventType.CREATE_INTEGRATION]: "Create integration",
   [EventType.DELETE_INTEGRATION]: "Delete integration",

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -23,6 +23,7 @@ export enum EventType {
   DELETE_SECRET = "delete-secret",
   GET_WORKSPACE_KEY = "get-workspace-key",
   AUTHORIZE_INTEGRATION = "authorize-integration",
+  UPDATE_INTEGRATION_AUTH = "update-integration-auth",
   UNAUTHORIZE_INTEGRATION = "unauthorize-integration",
   CREATE_INTEGRATION = "create-integration",
   DELETE_INTEGRATION = "delete-integration",

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

@@ -1,9 +1,8 @@
 export {
-    useAddUserToGroup,
-    useCreateGroup,
-    useDeleteGroup,
-    useRemoveUserFromGroup,
-    useUpdateGroup} from "./mutations";
-export {
-    useListGroupUsers
-} from "./queries";
+  useAddUserToGroup,
+  useCreateGroup,
+  useDeleteGroup,
+  useRemoveUserFromGroup,
+  useUpdateGroup
+} from "./mutations";
+export { useGetGroupById, useListGroupUsers } from "./queries";

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

@@ -56,8 +56,9 @@ export const useUpdateGroup = () => {
 
       return group;
     },
-    onSuccess: ({ orgId }) => {
+    onSuccess: ({ orgId, id: groupId }) => {
       queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
+      queryClient.invalidateQueries(groupKeys.getGroupById(groupId));
     }
   });
 };
@@ -70,8 +71,9 @@ export const useDeleteGroup = () => {
 
       return group;
     },
-    onSuccess: ({ orgId }) => {
+    onSuccess: ({ orgId, id: groupId }) => {
       queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
+      queryClient.invalidateQueries(groupKeys.getGroupById(groupId));
     }
   });
 };

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

@@ -2,7 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { EFilterReturnedUsers, TGroup, TGroupUser } from "./types";
+
 export const groupKeys = {
+  getGroupById: (groupId: string) => [{ groupId }, "group"] as const,
   allGroupUserMemberships: () => ["group-user-memberships"] as const,
   forGroupUserMemberships: (slug: string) =>
     [...groupKeys.allGroupUserMemberships(), slug] as const,
@@ -10,22 +13,27 @@ export const groupKeys = {
     slug,
     offset,
     limit,
-    search
+    search,
+    filter
   }: {
     slug: string;
     offset: number;
     limit: number;
     search: string;
-  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search }] as const
+    filter?: EFilterReturnedUsers;
+  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search, filter }] as const
 };
 
-type TUser = {
-  id: string;
-  email: string;
-  username: string;
-  firstName: string;
-  lastName: string;
-  isPartOfGroup: boolean;
+export const useGetGroupById = (groupId: string) => {
+  return useQuery({
+    enabled: Boolean(groupId),
+    queryKey: groupKeys.getGroupById(groupId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGroup>(`/api/v1/groups/${groupId}`);
+
+      return { group: data };
+    }
+  });
 };
 
 export const useListGroupUsers = ({
@@ -33,20 +41,23 @@ export const useListGroupUsers = ({
   groupSlug,
   offset = 0,
   limit = 10,
-  search
+  search,
+  filter
 }: {
   id: string;
   groupSlug: string;
   offset: number;
   limit: number;
   search: string;
+  filter?: EFilterReturnedUsers;
 }) => {
   return useQuery({
     queryKey: groupKeys.specificGroupUserMemberships({
       slug: groupSlug,
       offset,
       limit,
-      search
+      search,
+      filter
     }),
     enabled: Boolean(groupSlug),
     keepPreviousData: true,
@@ -54,10 +65,11 @@ export const useListGroupUsers = ({
       const params = new URLSearchParams({
         offset: String(offset),
         limit: String(limit),
-        search
+        search,
+        ...(filter && { filter })
       });
 
-      const { data } = await apiRequest.get<{ users: TUser[]; totalCount: number }>(
+      const { data } = await apiRequest.get<{ users: TGroupUser[]; totalCount: number }>(
         `/api/v1/groups/${id}/users`,
         {
           params

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

@@ -11,7 +11,7 @@ export type TGroup = {
   name: string;
   slug: string;
   orgId: string;
-  createAt: string;
+  createdAt: string;
   updatedAt: string;
   role: string;
 };
@@ -41,3 +41,18 @@ export type TGroupWithProjectMemberships = {
   slug: string;
   orgId: string;
 };
+
+export type TGroupUser = {
+  id: string;
+  email: string;
+  username: string;
+  firstName: string;
+  lastName: string;
+  isPartOfGroup: boolean;
+  joinedGroupAt: Date;
+};
+
+export enum EFilterReturnedUsers {
+  EXISTING_MEMBERS = "existingMembers",
+  NON_MEMBERS = "nonMembers"
+}

frontend/src/hooks/api/identities/constants.tsx

@@ -7,5 +7,6 @@ export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
   [IdentityAuthMethod.GCP_AUTH]: "GCP Auth",
   [IdentityAuthMethod.AWS_AUTH]: "AWS Auth",
   [IdentityAuthMethod.AZURE_AUTH]: "Azure Auth",
-  [IdentityAuthMethod.OIDC_AUTH]: "OIDC Auth"
+  [IdentityAuthMethod.OIDC_AUTH]: "OIDC Auth",
+  [IdentityAuthMethod.JWT_AUTH]: "JWT Auth"
 };

frontend/src/hooks/api/identities/enums.tsx

@@ -5,5 +5,11 @@ export enum IdentityAuthMethod {
   GCP_AUTH = "gcp-auth",
   AWS_AUTH = "aws-auth",
   AZURE_AUTH = "azure-auth",
-  OIDC_AUTH = "oidc-auth"
+  OIDC_AUTH = "oidc-auth",
+  JWT_AUTH = "jwt-auth"
+}
+
+export enum IdentityJwtConfigurationType {
+  JWKS = "jwks",
+  STATIC = "static"
 }

frontend/src/hooks/api/identities/index.tsx

@@ -4,6 +4,7 @@ export {
   useAddIdentityAwsAuth,
   useAddIdentityAzureAuth,
   useAddIdentityGcpAuth,
+  useAddIdentityJwtAuth,
   useAddIdentityKubernetesAuth,
   useAddIdentityOidcAuth,
   useAddIdentityTokenAuth,
@@ -15,6 +16,7 @@ export {
   useDeleteIdentityAwsAuth,
   useDeleteIdentityAzureAuth,
   useDeleteIdentityGcpAuth,
+  useDeleteIdentityJwtAuth,
   useDeleteIdentityKubernetesAuth,
   useDeleteIdentityOidcAuth,
   useDeleteIdentityTokenAuth,
@@ -25,20 +27,24 @@ export {
   useUpdateIdentityAwsAuth,
   useUpdateIdentityAzureAuth,
   useUpdateIdentityGcpAuth,
+  useUpdateIdentityJwtAuth,
   useUpdateIdentityKubernetesAuth,
   useUpdateIdentityOidcAuth,
   useUpdateIdentityTokenAuth,
   useUpdateIdentityTokenAuthToken,
-  useUpdateIdentityUniversalAuth} from "./mutations";
+  useUpdateIdentityUniversalAuth
+} from "./mutations";
 export {
   useGetIdentityAwsAuth,
   useGetIdentityAzureAuth,
   useGetIdentityById,
   useGetIdentityGcpAuth,
+  useGetIdentityJwtAuth,
   useGetIdentityKubernetesAuth,
   useGetIdentityOidcAuth,
   useGetIdentityProjectMemberships,
   useGetIdentityTokenAuth,
   useGetIdentityTokensTokenAuth,
   useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets} from "./queries";
+  useGetIdentityUniversalAuthClientSecrets
+} from "./queries";

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

@@ -8,6 +8,7 @@ import {
   AddIdentityAwsAuthDTO,
   AddIdentityAzureAuthDTO,
   AddIdentityGcpAuthDTO,
+  AddIdentityJwtAuthDTO,
   AddIdentityKubernetesAuthDTO,
   AddIdentityOidcAuthDTO,
   AddIdentityTokenAuthDTO,
@@ -22,6 +23,7 @@ import {
   DeleteIdentityAzureAuthDTO,
   DeleteIdentityDTO,
   DeleteIdentityGcpAuthDTO,
+  DeleteIdentityJwtAuthDTO,
   DeleteIdentityKubernetesAuthDTO,
   DeleteIdentityOidcAuthDTO,
   DeleteIdentityTokenAuthDTO,
@@ -32,6 +34,7 @@ import {
   IdentityAwsAuth,
   IdentityAzureAuth,
   IdentityGcpAuth,
+  IdentityJwtAuth,
   IdentityKubernetesAuth,
   IdentityOidcAuth,
   IdentityTokenAuth,
@@ -42,6 +45,7 @@ import {
   UpdateIdentityAzureAuthDTO,
   UpdateIdentityDTO,
   UpdateIdentityGcpAuthDTO,
+  UpdateIdentityJwtAuthDTO,
   UpdateIdentityKubernetesAuthDTO,
   UpdateIdentityOidcAuthDTO,
   UpdateIdentityTokenAuthDTO,
@@ -518,6 +522,118 @@ export const useDeleteIdentityOidcAuth = () => {
     }
   });
 };
+export const useUpdateIdentityJwtAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityJwtAuth, {}, UpdateIdentityJwtAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      configurationType,
+      jwksUrl,
+      jwksCaCert,
+      publicKeys,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps,
+      boundIssuer,
+      boundAudiences,
+      boundClaims,
+      boundSubject
+    }) => {
+      const {
+        data: { identityJwtAuth }
+      } = await apiRequest.patch<{ identityJwtAuth: IdentityJwtAuth }>(
+        `/api/v1/auth/jwt-auth/identities/${identityId}`,
+        {
+          configurationType,
+          jwksUrl,
+          jwksCaCert,
+          publicKeys,
+          boundIssuer,
+          boundAudiences,
+          boundClaims,
+          boundSubject,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityJwtAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityJwtAuth(identityId));
+    }
+  });
+};
+
+export const useAddIdentityJwtAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityJwtAuth, {}, AddIdentityJwtAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      configurationType,
+      jwksUrl,
+      jwksCaCert,
+      publicKeys,
+      boundIssuer,
+      boundAudiences,
+      boundClaims,
+      boundSubject,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityJwtAuth }
+      } = await apiRequest.post<{ identityJwtAuth: IdentityJwtAuth }>(
+        `/api/v1/auth/jwt-auth/identities/${identityId}`,
+        {
+          configurationType,
+          jwksUrl,
+          jwksCaCert,
+          publicKeys,
+          boundIssuer,
+          boundAudiences,
+          boundClaims,
+          boundSubject,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityJwtAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityJwtAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityJwtAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTokenAuth, {}, DeleteIdentityJwtAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityJwtAuth }
+      } = await apiRequest.delete(`/api/v1/auth/jwt-auth/identities/${identityId}`);
+      return identityJwtAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityJwtAuth(identityId));
+    }
+  });
+};
 
 export const useAddIdentityAzureAuth = () => {
   const queryClient = useQueryClient();

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

@@ -8,6 +8,7 @@ import {
   IdentityAwsAuth,
   IdentityAzureAuth,
   IdentityGcpAuth,
+  IdentityJwtAuth,
   IdentityKubernetesAuth,
   IdentityMembership,
   IdentityMembershipOrg,
@@ -29,6 +30,7 @@ export const identitiesKeys = {
   getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const,
   getIdentityAzureAuth: (identityId: string) => [{ identityId }, "identity-azure-auth"] as const,
   getIdentityTokenAuth: (identityId: string) => [{ identityId }, "identity-token-auth"] as const,
+  getIdentityJwtAuth: (identityId: string) => [{ identityId }, "identity-jwt-auth"] as const,
   getIdentityTokensTokenAuth: (identityId: string) =>
     [{ identityId }, "identity-tokens-token-auth"] as const,
   getIdentityProjectMemberships: (identityId: string) =>
@@ -276,3 +278,30 @@ export const useGetIdentityOidcAuth = (
     enabled: Boolean(identityId) && (options?.enabled ?? true)
   });
 };
+
+export const useGetIdentityJwtAuth = (
+  identityId: string,
+  options?: UseQueryOptions<
+    IdentityJwtAuth,
+    unknown,
+    IdentityJwtAuth,
+    ReturnType<typeof identitiesKeys.getIdentityJwtAuth>
+  >
+) => {
+  return useQuery({
+    queryKey: identitiesKeys.getIdentityJwtAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityJwtAuth }
+      } = await apiRequest.get<{ identityJwtAuth: IdentityJwtAuth }>(
+        `/api/v1/auth/jwt-auth/identities/${identityId}`
+      );
+
+      return identityJwtAuth;
+    },
+    staleTime: 0,
+    cacheTime: 0,
+    ...options,
+    enabled: Boolean(identityId) && (options?.enabled ?? true)
+  });
+};

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

@@ -1,6 +1,6 @@
 import { TOrgRole } from "../roles/types";
 import { ProjectUserMembershipTemporaryMode, Workspace } from "../workspace/types";
-import { IdentityAuthMethod } from "./enums";
+import { IdentityAuthMethod, IdentityJwtConfigurationType } from "./enums";
 
 export type IdentityTrustedIp = {
   id: string;
@@ -446,6 +446,65 @@ export type DeleteIdentityTokenAuthDTO = {
   identityId: string;
 };
 
+export type IdentityJwtAuth = {
+  identityId: string;
+  configurationType: IdentityJwtConfigurationType;
+  jwksUrl: string;
+  jwksCaCert: string;
+  publicKeys: string[];
+  boundIssuer: string;
+  boundAudiences: string;
+  boundClaims: Record<string, string>;
+  boundSubject: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: IdentityTrustedIp[];
+};
+
+export type AddIdentityJwtAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  configurationType: string;
+  jwksUrl?: string;
+  jwksCaCert: string;
+  publicKeys?: string[];
+  boundIssuer: string;
+  boundAudiences: string;
+  boundClaims: Record<string, string>;
+  boundSubject: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: {
+    ipAddress: string;
+  }[];
+};
+
+export type UpdateIdentityJwtAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  configurationType?: string;
+  jwksUrl?: string;
+  jwksCaCert?: string;
+  publicKeys?: string[];
+  boundIssuer?: string;
+  boundAudiences?: string;
+  boundClaims?: Record<string, string>;
+  boundSubject?: string;
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: {
+    ipAddress: string;
+  }[];
+};
+
+export type DeleteIdentityJwtAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type CreateTokenIdentityTokenAuthDTO = {
   identityId: string;
   name: string;

frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx

@@ -65,7 +65,7 @@ export const WishForm = () => {
       <PopoverTrigger asChild>
         <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
           <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
-          Make a wish
+          Request a feature
         </div>
       </PopoverTrigger>
       <PopoverContent

frontend/src/pages/org/[id]/groups/[groupId]/index.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { GroupPage } from "@app/views/Org/GroupPage";
+
+export default function Group() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <GroupPage />
+    </>
+  );
+}
+
+Group.requireAuth = true;

frontend/src/views/Org/GroupPage/GroupPage.tsx

@@ -0,0 +1,175 @@
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Spinner,
+  Tooltip,
+  UpgradePlanModal
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
+import { useDeleteGroup } from "@app/hooks/api";
+import { useGetGroupById } from "@app/hooks/api/groups/queries";
+import { usePopUp } from "@app/hooks/usePopUp";
+import { TabSections } from "@app/views/Org/Types";
+
+import { GroupCreateUpdateModal } from "./components/GroupCreateUpdateModal";
+import { GroupMembersSection } from "./components/GroupMembersSection";
+import { GroupDetailsSection } from "./components";
+
+export const GroupPage = withPermission(
+  () => {
+    const router = useRouter();
+    const groupId = router.query.groupId as string;
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?.id || "";
+
+    const { data, isLoading } = useGetGroupById(groupId);
+
+    const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "groupCreateUpdate",
+      "deleteGroup",
+      "upgradePlan"
+    ] as const);
+
+    const onDeleteGroupSubmit = async ({ name, id }: { name: string; id: string }) => {
+      try {
+        await deleteMutateAsync({
+          id
+        });
+        createNotification({
+          text: `Successfully deleted the ${name} group`,
+          type: "success"
+        });
+        router.push(`/org/${orgId}/members?selectedTab=${TabSections.Groups}`);
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: `Failed to delete the ${name} group`,
+          type: "error"
+        });
+      }
+
+      handlePopUpClose("deleteGroup");
+    };
+
+    if (isLoading) return <Spinner size="sm" className="mt-2 ml-2" />;
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/org/${orgId}/members?selectedTab=${TabSections.Groups}`);
+              }}
+              className="mb-4"
+            >
+              Groups
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.group.name}</p>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <Tooltip content="More options">
+                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    </Tooltip>
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="p-1">
+                  <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={async () => {
+                          handlePopUpOpen("groupCreateUpdate", {
+                            groupId,
+                            name: data.group.name,
+                            slug: data.group.slug,
+                            role: data.group.role
+                          });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Edit Group
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Delete}
+                    a={OrgPermissionSubjects.Groups}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          isAllowed
+                            ? "hover:!bg-red-500 hover:!text-white"
+                            : "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={async () => {
+                          handlePopUpOpen("deleteGroup", {
+                            id: groupId,
+                            name: data.group.name
+                          });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Delete Group
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              <GroupMembersSection groupId={groupId} groupSlug={data.group.slug} />
+            </div>
+          </div>
+        )}
+        <GroupCreateUpdateModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteGroup.isOpen}
+          title={`Are you sure want to delete the group named ${
+            (popUp?.deleteGroup?.data as { name: string })?.name || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeleteGroupSubmit(popUp?.deleteGroup?.data as { name: string; id: string })
+          }
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Groups }
+);

frontend/src/views/Org/GroupPage/components/AddGroupMemberModal.tsx

@@ -22,21 +22,22 @@ import {
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useDebounce, useResetPageHelper } from "@app/hooks";
-import { useAddUserToGroup, useListGroupUsers, useRemoveUserFromGroup } from "@app/hooks/api";
+import { useAddUserToGroup, useListGroupUsers } from "@app/hooks/api";
+import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-  popUp: UsePopUpState<["groupMembers"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["groupMembers"]>, state?: boolean) => void;
+  popUp: UsePopUpState<["addGroupMembers"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addGroupMembers"]>, state?: boolean) => void;
 };
 
-export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
+export const AddGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
   const [debouncedSearch] = useDebounce(searchMemberFilter);
 
-  const popUpData = popUp?.groupMembers?.data as {
+  const popUpData = popUp?.addGroupMembers?.data as {
     groupId: string;
     slug: string;
   };
@@ -47,7 +48,8 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
     groupSlug: popUpData?.slug,
     offset,
     limit: perPage,
-    search: debouncedSearch
+    search: debouncedSearch,
+    filter: EFilterReturnedUsers.NON_MEMBERS
   });
 
   const { totalCount = 0 } = data ?? {};
@@ -58,36 +60,31 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
     setPage
   });
 
-  const { mutateAsync: assignMutateAsync } = useAddUserToGroup();
-  const { mutateAsync: unassignMutateAsync } = useRemoveUserFromGroup();
+  const { mutateAsync: addUserToGroupMutateAsync } = useAddUserToGroup();
 
-  const handleAssignment = async (username: string, assign: boolean) => {
+  const handleAddMember = async (username: string) => {
     try {
-      if (!popUpData?.slug) return;
-
-      if (assign) {
-        await assignMutateAsync({
-          groupId: popUpData.groupId,
-          username,
-          slug: popUpData.slug
-        });
-      } else {
-        await unassignMutateAsync({
-          groupId: popUpData.groupId,
-          username,
-          slug: popUpData.slug
+      if (!popUpData?.slug) {
+        createNotification({
+          text: "Some data is missing, please refresh the page and try again",
+          type: "error"
         });
+        return;
       }
 
+      await addUserToGroupMutateAsync({
+        groupId: popUpData.groupId,
+        username,
+        slug: popUpData.slug
+      });
+
       createNotification({
-        text: `Successfully ${assign ? "assigned" : "removed"} user ${
-          assign ? "to" : "from"
-        } group`,
+        text: "Successfully assigned user to the group",
         type: "success"
       });
     } catch (err) {
       createNotification({
-        text: `Failed to ${assign ? "assign" : "remove"} user ${assign ? "to" : "from"} group`,
+        text: "Failed to assign user to the group",
         type: "error"
       });
     }
@@ -95,12 +92,12 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
 
   return (
     <Modal
-      isOpen={popUp?.groupMembers?.isOpen}
+      isOpen={popUp?.addGroupMembers?.isOpen}
       onOpenChange={(isOpen) => {
-        handlePopUpToggle("groupMembers", isOpen);
+        handlePopUpToggle("addGroupMembers", isOpen);
       }}
     >
-      <ModalContent title="Manage Group Members">
+      <ModalContent title="Add Group Members">
         <Input
           value={searchMemberFilter}
           onChange={(e) => setSearchMemberFilter(e.target.value)}
@@ -118,7 +115,7 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
             <TBody>
               {isLoading && <TableSkeleton columns={2} innerKey="group-users" />}
               {!isLoading &&
-                data?.users?.map(({ id, firstName, lastName, username, isPartOfGroup }) => {
+                data?.users?.map(({ id, firstName, lastName, username }) => {
                   return (
                     <Tr className="items-center" key={`group-user-${id}`}>
                       <Td>
@@ -138,9 +135,9 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
                                 colorSchema="primary"
                                 variant="outline_bg"
                                 type="submit"
-                                onClick={() => handleAssignment(username, !isPartOfGroup)}
+                                onClick={() => handleAddMember(username)}
                               >
-                                {isPartOfGroup ? "Unassign" : "Assign"}
+                                Assign
                               </Button>
                             );
                           }}
@@ -162,7 +159,9 @@ export const OrgGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
           )}
           {!isLoading && !data?.users?.length && (
             <EmptyState
-              title={debouncedSearch ? "No users match search" : "No users found"}
+              title={
+                debouncedSearch ? "No users match search" : "All users are already in the group"
+              }
               icon={faUsers}
             />
           )}

frontend/src/views/Org/GroupPage/components/GroupCreateUpdateModal.tsx

@@ -0,0 +1,192 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { findOrgMembershipRole } from "@app/helpers/roles";
+import { useCreateGroup, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const GroupFormSchema = z.object({
+  name: z.string().min(1, "Name cannot be empty").max(50, "Name must be 50 characters or fewer"),
+  slug: z
+    .string()
+    .min(5, "Slug must be at least 5 characters long")
+    .max(36, "Slug must be 36 characters or fewer"),
+  role: z.object({ name: z.string(), slug: z.string() })
+});
+
+export type TGroupFormData = z.infer<typeof GroupFormSchema>;
+
+type Props = {
+  popUp: UsePopUpState<["groupCreateUpdate"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["groupCreateUpdate"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["groupCreateUpdate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const GroupCreateUpdateModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { data: roles } = useGetOrgRoles(currentOrg?.id || "");
+  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateGroup();
+  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateGroup();
+
+  const { control, handleSubmit, reset } = useForm<TGroupFormData>({
+    resolver: zodResolver(GroupFormSchema)
+  });
+
+  useEffect(() => {
+    const group = popUp?.groupCreateUpdate?.data as {
+      groupId: string;
+      name: string;
+      slug: string;
+      role: string;
+      customRole: {
+        name: string;
+        slug: string;
+      };
+    };
+
+    if (!roles?.length) return;
+
+    if (group) {
+      reset({
+        name: group.name,
+        slug: group.slug,
+        role: group?.customRole ?? findOrgMembershipRole(roles, group.role)
+      });
+    } else {
+      reset({
+        name: "",
+        slug: "",
+        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole)
+      });
+    }
+  }, [popUp?.groupCreateUpdate?.data, roles]);
+
+  const onGroupModalSubmit = async ({ name, slug, role }: TGroupFormData) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      const group = popUp?.groupCreateUpdate?.data as {
+        groupId: string;
+        name: string;
+        slug: string;
+      };
+
+      if (group) {
+        await updateMutateAsync({
+          id: group.groupId,
+          name,
+          slug,
+          role: role.slug || undefined
+        });
+      } else {
+        await createMutateAsync({
+          name,
+          slug,
+          organizationId: currentOrg.id,
+          role: role.slug || undefined
+        });
+      }
+      handlePopUpToggle("groupCreateUpdate", false);
+      reset();
+
+      createNotification({
+        text: `Successfully ${popUp?.groupCreateUpdate?.data ? "updated" : "created"} group`,
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: `Failed to ${popUp?.groupCreateUpdate?.data ? "updated" : "created"} group`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.groupCreateUpdate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("groupCreateUpdate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent
+        bodyClassName="overflow-visible"
+        title={`${popUp?.groupCreateUpdate?.data ? "Update" : "Create"} Group`}
+      >
+        <form onSubmit={handleSubmit(onGroupModalSubmit)}>
+          <Controller
+            control={control}
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Name" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="Engineering" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="slug"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Slug" errorText={error?.message} isError={Boolean(error)}>
+                <Input {...field} placeholder="engineering" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="role"
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <FormControl
+                label="Role"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+              >
+                <FilterableSelect
+                  options={roles}
+                  placeholder="Select role..."
+                  onChange={onChange}
+                  value={value}
+                  getOptionValue={(option) => option.slug}
+                  getOptionLabel={(option) => option.name}
+                />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={createIsLoading || updateIsLoading}
+            >
+              {!popUp?.groupCreateUpdate?.data ? "Create" : "Update"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("groupCreateUpdate")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/GroupPage/components/GroupDetailsSection.tsx

@@ -0,0 +1,88 @@
+import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Spinner, Tooltip } from "@app/components/v2";
+import { CopyButton } from "@app/components/v2/CopyButton";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetGroupById } from "@app/hooks/api/";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  groupId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["groupCreateUpdate"]>, data?: {}) => void;
+};
+
+export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
+  const { data, isLoading } = useGetGroupById(groupId);
+
+  if (isLoading) return <Spinner size="sm" className="mt-2 ml-2" />;
+
+  return data ? (
+    <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>
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Group">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="edit group button"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() => {
+                    handlePopUpOpen("groupCreateUpdate", {
+                      groupId,
+                      name: data.group.name,
+                      slug: data.group.slug,
+                      role: data.group.role
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </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">{data.group.id}</p>
+            <CopyButton value={data.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">{data.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">{data.group.slug}</p>
+            <CopyButton value={data.group.slug} name="Slug" size="xs" variant="plain" />
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
+          <p className="text-sm text-mineshaft-300">{data.group.role}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Created At</p>
+          <p className="text-sm text-mineshaft-300">
+            {new Date(data.group.createdAt).toLocaleString()}
+          </p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <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">
+        <p className="text-mineshaft-300">Group data not found</p>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Org/GroupPage/components/GroupMembersSection/GroupMembersSection.tsx

@@ -0,0 +1,90 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { useRemoveUserFromGroup } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddGroupMembersModal } from "../AddGroupMemberModal";
+import { GroupMembersTable } from "./GroupMembersTable";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+};
+
+export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "addGroupMembers",
+    "removeMemberFromGroup"
+  ] as const);
+
+  const { mutateAsync: removeUserFromGroupMutateAsync } = useRemoveUserFromGroup();
+  const handleRemoveUserFromGroup = async (username: string) => {
+    try {
+      await removeUserFromGroupMutateAsync({
+        groupId,
+        username,
+        slug: groupSlug
+      });
+
+      createNotification({
+        text: `Successfully removed user ${username} from the group`,
+        type: "success"
+      });
+
+      handlePopUpToggle("removeMemberFromGroup", false);
+    } catch (err) {
+      createNotification({
+        text: `Failed to remove user ${username} from the group`,
+        type: "error"
+      });
+    }
+  };
+
+  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>
+        <IconButton
+          ariaLabel="copy icon"
+          variant="plain"
+          className="group relative"
+          onClick={() => {
+            handlePopUpOpen("addGroupMembers", {
+              groupId,
+              slug: groupSlug
+            });
+          }}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </IconButton>
+      </div>
+      <div className="py-4">
+        <GroupMembersTable
+          groupId={groupId}
+          groupSlug={groupSlug}
+          handlePopUpOpen={handlePopUpOpen}
+        />
+      </div>
+      <AddGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.removeMemberFromGroup.isOpen}
+        title={`Are you sure want to remove ${
+          (popUp?.removeMemberFromGroup?.data as { username: string })?.username || ""
+        } from the group?`}
+        onChange={(isOpen) => handlePopUpToggle("removeMemberFromGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const userData = popUp?.removeMemberFromGroup?.data as {
+            username: string;
+            id: string;
+          };
+
+          return handleRemoveUserFromGroup(userData.username);
+        }}
+      />
+    </div>
+  );
+};

frontend/src/views/Org/GroupPage/components/GroupMembersSection/GroupMembersTable.tsx

@@ -0,0 +1,195 @@
+import { useMemo } from "react";
+import {
+  faArrowDown,
+  faArrowUp,
+  faFolder,
+  faMagnifyingGlass,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  EmptyState,
+  IconButton,
+  Input,
+  Pagination,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useListGroupUsers } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { EFilterReturnedUsers } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupMembershipRow } from "./GroupMembershipRow";
+
+type Props = {
+  groupId: string;
+  groupSlug: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["removeMemberFromGroup", "addGroupMembers"]>,
+    data?: {}
+  ) => void;
+};
+
+enum GroupMembersOrderBy {
+  Name = "name"
+}
+
+export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props) => {
+  const {
+    search,
+    setSearch,
+    setPage,
+    page,
+    perPage,
+    setPerPage,
+    offset,
+    orderDirection,
+    toggleOrderDirection
+  } = usePagination(GroupMembersOrderBy.Name, { initPerPage: 10 });
+
+  const { data: groupMemberships, isLoading } = useListGroupUsers({
+    id: groupId,
+    groupSlug,
+    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
+  });
+
+  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 />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="group-user-memberships" />}
+            {!isLoading &&
+              filteredGroupMemberships.slice(offset, perPage * page).map((userGroupMembership) => {
+                return (
+                  <GroupMembershipRow
+                    key={`user-group-membership-${userGroupMembership.id}`}
+                    user={userGroupMembership}
+                    handlePopUpOpen={handlePopUpOpen}
+                  />
+                );
+              })}
+          </TBody>
+        </Table>
+        {Boolean(filteredGroupMemberships.length) && (
+          <Pagination
+            count={filteredGroupMemberships.length}
+            page={page}
+            perPage={perPage}
+            onChangePage={setPage}
+            onChangePerPage={setPerPage}
+          />
+        )}
+        {!isLoading && !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}
+          />
+        )}
+        {!groupMemberships?.users.length && (
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+            {(isAllowed) => (
+              <div className="mb-4 flex items-center justify-center">
+                <Button
+                  isDisabled={!isAllowed}
+                  onClick={() => {
+                    handlePopUpOpen("addGroupMembers", {
+                      groupId,
+                      slug: groupSlug
+                    });
+                  }}
+                >
+                  Add members
+                </Button>
+              </div>
+            )}
+          </OrgPermissionCan>
+        )}
+      </TableContainer>
+    </div>
+  );
+};

frontend/src/views/Org/GroupPage/components/GroupMembersSection/GroupMembershipRow.tsx

@@ -0,0 +1,53 @@
+import { 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 { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { TGroupUser } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  user: TGroupUser;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeMemberFromGroup"]>, data?: {}) => void;
+};
+
+export const GroupMembershipRow = ({
+  user: { firstName, lastName, username, joinedGroupAt, email, id },
+  handlePopUpOpen
+}: 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 className="justify-end">
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Remove user from group">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="Remove user from group"
+                  onClick={() => handlePopUpOpen("removeMemberFromGroup", { username })}
+                  variant="plain"
+                  colorSchema="danger"
+                >
+                  <FontAwesomeIcon icon={faUserMinus} className="cursor-pointer" />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/Org/GroupPage/components/GroupMembersSection/index.tsx

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

frontend/src/views/Org/GroupPage/components/index.tsx

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

frontend/src/views/Org/GroupPage/index.tsx

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

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

@@ -8,7 +8,6 @@ import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@a
 import { useDeleteGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-import { OrgGroupMembersModal } from "./OrgGroupMembersModal";
 import { OrgGroupModal } from "./OrgGroupModal";
 import { OrgGroupsTable } from "./OrgGroupsTable";
 
@@ -78,7 +77,6 @@ export const OrgGroupsSection = () => {
         handlePopUpClose={handlePopUpClose}
         handlePopUpToggle={handlePopUpToggle}
       />
-      <OrgGroupMembersModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
       <DeleteActionModal
         isOpen={popUp.deleteGroup.isOpen}
         title={`Are you sure want to delete the group named ${

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

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useRouter } from "next/router";
 import {
   faArrowDown,
   faArrowUp,
@@ -61,6 +62,7 @@ enum GroupsOrderBy {
 }
 
 export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
+  const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { isLoading, data: groups = [] } = useGetOrganizationGroups(orgId);
@@ -223,7 +225,11 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                 .slice(offset, perPage * page)
                 .map(({ id, name, slug, role, customRole }) => {
                   return (
-                    <Tr className="h-10" key={`org-group-${id}`}>
+                    <Tr
+                      onClick={() => router.push(`/org/${orgId}/groups/${id}`)}
+                      className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                      key={`org-group-${id}`}
+                    >
                       <Td>{name}</Td>
                       <Td>{slug}</Td>
                       <Td>
@@ -277,30 +283,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                             </DropdownMenuItem>
                             <OrgPermissionCan
                               I={OrgPermissionActions.Edit}
-                              a={OrgPermissionSubjects.Identity}
-                            >
-                              {(isAllowed) => (
-                                <DropdownMenuItem
-                                  className={twMerge(
-                                    !isAllowed &&
-                                      "pointer-events-none cursor-not-allowed opacity-50"
-                                  )}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handlePopUpOpen("groupMembers", {
-                                      groupId: id,
-                                      slug
-                                    });
-                                  }}
-                                  disabled={!isAllowed}
-                                >
-                                  Manage Users
-                                </DropdownMenuItem>
-                              )}
-                            </OrgPermissionCan>
-                            <OrgPermissionCan
-                              I={OrgPermissionActions.Edit}
-                              a={OrgPermissionSubjects.Identity}
+                              a={OrgPermissionSubjects.Groups}
                             >
                               {(isAllowed) => (
                                 <DropdownMenuItem
@@ -324,6 +307,23 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
                                 </DropdownMenuItem>
                               )}
                             </OrgPermissionCan>
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Edit}
+                              a={OrgPermissionSubjects.Groups}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={() => router.push(`/org/${orgId}/groups/${id}`)}
+                                  disabled={!isAllowed}
+                                >
+                                  Manage Members
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
                             <OrgPermissionCan
                               I={OrgPermissionActions.Delete}
                               a={OrgPermissionSubjects.Groups}

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

@@ -23,12 +23,17 @@ import {
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
+import {
+  IdentityAuthMethod,
+  identityAuthToNameMap,
+  useDeleteIdentityJwtAuth
+} from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityAwsAuthForm } from "./IdentityAwsAuthForm";
 import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
+import { IdentityJwtAuthForm } from "./IdentityJwtAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
@@ -68,7 +73,11 @@ const identityAuthMethods = [
   { label: "GCP Auth", value: IdentityAuthMethod.GCP_AUTH },
   { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH },
   { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH },
-  { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH }
+  { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH },
+  {
+    label: "JWT Auth",
+    value: IdentityAuthMethod.JWT_AUTH
+  }
 ];
 
 const schema = yup
@@ -100,6 +109,7 @@ export const IdentityAuthMethodModalContent = ({
   const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
+  const { mutateAsync: revokeJwtAuth } = useDeleteIdentityJwtAuth();
 
   const { control, watch } = useForm<FormData>({
     resolver: yupResolver(schema),
@@ -216,6 +226,17 @@ export const IdentityAuthMethodModalContent = ({
           handlePopUpToggle={handlePopUpToggle}
         />
       )
+    },
+
+    [IdentityAuthMethod.JWT_AUTH]: {
+      revokeMethod: revokeJwtAuth,
+      render: () => (
+        <IdentityJwtAuthForm
+          identityAuthMethodData={identityAuthMethodData}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      )
     }
   };
 

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

@@ -0,0 +1,688 @@
+import { useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { useAddIdentityJwtAuth, useUpdateIdentityJwtAuth } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
+import { useGetIdentityJwtAuth } from "@app/hooks/api/identities/queries";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const commonSchema = z.object({
+  accessTokenTrustedIps: z
+    .array(
+      z.object({
+        ipAddress: z.string().max(50)
+      })
+    )
+    .min(1),
+  accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token TTL cannot be greater than 315360000"
+  }),
+  accessTokenMaxTTL: z.string().refine((val) => Number(val) <= 315360000, {
+    message: "Access Token Max TTL cannot be greater than 315360000"
+  }),
+  accessTokenNumUsesLimit: z.string(),
+  boundIssuer: z.string().trim().default(""),
+  boundAudiences: z.string().optional().default(""),
+  boundClaims: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string()
+    })
+  ),
+  boundSubject: z.string().optional().default("")
+});
+
+const schema = z.discriminatedUnion("configurationType", [
+  z
+    .object({
+      configurationType: z.literal(IdentityJwtConfigurationType.JWKS),
+      jwksUrl: z.string().trim().url(),
+      jwksCaCert: z.string().trim().default(""),
+      publicKeys: z
+        .object({
+          value: z.string()
+        })
+        .array()
+        .optional()
+    })
+    .merge(commonSchema),
+  z
+    .object({
+      configurationType: z.literal(IdentityJwtConfigurationType.STATIC),
+      jwksUrl: z.string().trim().optional(),
+      jwksCaCert: z.string().trim().optional().default(""),
+      publicKeys: z
+        .object({
+          value: z.string().min(1)
+        })
+        .array()
+        .min(1)
+    })
+    .merge(commonSchema)
+]);
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    configuredAuthMethods?: IdentityAuthMethod[];
+    authMethod?: IdentityAuthMethod;
+  };
+};
+
+export const IdentityJwtAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityAuthMethodData
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityJwtAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityJwtAuth();
+
+  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+    identityAuthMethodData.authMethod! || ""
+  );
+  const { data } = useGetIdentityJwtAuth(identityAuthMethodData?.identityId ?? "", {
+    enabled: isUpdate
+  });
+
+  const {
+    watch,
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+      configurationType: IdentityJwtConfigurationType.JWKS
+    }
+  });
+
+  const selectedConfigurationType = watch("configurationType") as IdentityJwtConfigurationType;
+
+  const {
+    fields: publicKeyFields,
+    append: appendPublicKeyFields,
+    remove: removePublicKeyFields
+  } = useFieldArray({
+    control,
+    name: "publicKeys"
+  });
+
+  const {
+    fields: boundClaimsFields,
+    append: appendBoundClaimField,
+    remove: removeBoundClaimField
+  } = useFieldArray({
+    control,
+    name: "boundClaims"
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        configurationType: data.configurationType,
+        jwksUrl: data.jwksUrl,
+        jwksCaCert: data.jwksCaCert,
+        publicKeys: data.publicKeys.map((pk) => ({
+          value: pk
+        })),
+        boundIssuer: data.boundIssuer,
+        boundAudiences: data.boundAudiences,
+        boundClaims: Object.entries(data.boundClaims).map(([key, value]) => ({
+          key,
+          value
+        })),
+        boundSubject: data.boundSubject,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        configurationType: IdentityJwtConfigurationType.JWKS,
+        jwksUrl: "",
+        jwksCaCert: "",
+        boundIssuer: "",
+        boundAudiences: "",
+        boundClaims: [],
+        boundSubject: "",
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    accessTokenTrustedIps,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    configurationType,
+    jwksUrl,
+    jwksCaCert,
+    publicKeys,
+    boundIssuer,
+    boundAudiences,
+    boundClaims,
+    boundSubject
+  }: FormData) => {
+    try {
+      if (!identityAuthMethodData) {
+        return;
+      }
+
+      if (data) {
+        await updateMutateAsync({
+          identityId: identityAuthMethodData.identityId,
+          organizationId: orgId,
+          configurationType,
+          jwksUrl,
+          jwksCaCert,
+          publicKeys: publicKeys?.map((field) => field.value).filter(Boolean),
+          boundIssuer,
+          boundAudiences,
+          boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          boundSubject,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          identityId: identityAuthMethodData.identityId,
+          configurationType,
+          jwksUrl,
+          jwksCaCert,
+          publicKeys: publicKeys?.map((field) => field.value).filter(Boolean),
+          boundIssuer,
+          boundAudiences,
+          boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          boundSubject,
+          organizationId: orgId,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${isUpdate ? "updated" : "configured"} auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      createNotification({
+        text: `Failed to ${isUpdate ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="configurationType"
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl
+            label="Configuration Type"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => {
+                if (e === IdentityJwtConfigurationType.JWKS) {
+                  setValue("publicKeys", []);
+                } else {
+                  setValue("publicKeys", [
+                    {
+                      value: ""
+                    }
+                  ]);
+                  setValue("jwksUrl", "");
+                  setValue("jwksCaCert", "");
+                }
+                onChange(e);
+              }}
+              className="w-full"
+            >
+              <SelectItem value={IdentityJwtConfigurationType.JWKS} key="jwks">
+                JWKS
+              </SelectItem>
+              <SelectItem value={IdentityJwtConfigurationType.STATIC} key="static">
+                Static
+              </SelectItem>
+            </Select>
+          </FormControl>
+        )}
+      />
+      {selectedConfigurationType === IdentityJwtConfigurationType.JWKS && (
+        <>
+          <Controller
+            control={control}
+            name="jwksUrl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                isRequired
+                label="JWKS URL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="jwksCaCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="JWKS CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+        </>
+      )}
+
+      {selectedConfigurationType === IdentityJwtConfigurationType.STATIC && (
+        <>
+          {publicKeyFields.map(({ id }, index) => (
+            <div key={id} className="flex gap-2">
+              <Controller
+                control={control}
+                name={`publicKeys.${index}.value`}
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    className="flex-grow"
+                    label={`Public Key ${index + 1}`}
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                    icon={
+                      <Tooltip
+                        className="text-center"
+                        content={<span>This field only accepts PEM-formatted public keys</span>}
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                      </Tooltip>
+                    }
+                  >
+                    <TextArea {...field} placeholder="-----BEGIN PUBLIC KEY----- ..." />
+                  </FormControl>
+                )}
+              />
+              <IconButton
+                onClick={() => {
+                  if (publicKeyFields.length === 1) {
+                    createNotification({
+                      type: "error",
+                      text: "A public key is required for static configurations"
+                    });
+                    return;
+                  }
+
+                  removePublicKeyFields(index);
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() =>
+                appendPublicKeyFields({
+                  value: ""
+                })
+              }
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add Public Key
+            </Button>
+          </div>
+        </>
+      )}
+
+      <Controller
+        control={control}
+        name="boundIssuer"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Issuer" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundSubject"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Subject"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
+            <Input {...field} type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundAudiences"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Audiences"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            icon={
+              <Tooltip
+                className="text-center"
+                content={<span>This field supports glob patterns</span>}
+              >
+                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+              </Tooltip>
+            }
+          >
+            <Input {...field} type="text" placeholder="service1, service2" />
+          </FormControl>
+        )}
+      />
+      {boundClaimsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.key`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Claims" : undefined}
+                  icon={
+                    index === 0 ? (
+                      <Tooltip
+                        className="text-center"
+                        content={<span>This field supports glob patterns</span>}
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                      </Tooltip>
+                    ) : undefined
+                  }
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="property"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.value`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="value1, value2"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+
+          <IconButton
+            onClick={() => removeBoundClaimField(index)}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() =>
+            appendBoundClaimField({
+              key: "",
+              value: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add Claims
+        </Button>
+      </div>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeAccessTokenTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {isUpdate ? "Update" : "Create"}
+          </Button>
+
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {isUpdate && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};

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

@@ -130,12 +130,14 @@ export const AccessApprovalRequest = ({
     if (statusFilter === "open")
       return requests?.filter(
         (request) =>
+          !request.policy.deletedAt &&
           !request.isApproved &&
           !request.reviewers.some((reviewer) => reviewer.status === ApprovalStatus.REJECTED)
       );
     if (statusFilter === "close")
       return requests?.filter(
         (request) =>
+          request.policy.deletedAt ||
           request.isApproved ||
           request.reviewers.some((reviewer) => reviewer.status === ApprovalStatus.REJECTED)
       );
@@ -144,8 +146,6 @@ export const AccessApprovalRequest = ({
   }, [requests, statusFilter, requestedByFilter, envFilter]);
 
   const generateRequestDetails = (request: TAccessApprovalRequest) => {
-    console.log(request);
-
     const isReviewedByUser = request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
     const isRejectedByAnyone = request.reviewers.some(
       ({ status }) => status === ApprovalStatus.REJECTED

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,4 +1,4 @@
-import { ClipboardEvent } from "react";
+import { ClipboardEvent, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -46,6 +46,7 @@ export const CreateSecretForm = ({
     control,
     reset,
     setValue,
+    watch,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
   const { closePopUp } = usePopUpAction();
@@ -59,6 +60,11 @@ export const CreateSecretForm = ({
     canReadTags ? workspaceId : ""
   );
 
+  const secretKeyInputRef = useRef<HTMLInputElement>(null);
+  const { ref: setSecretKeyHookRef, ...secretKeyRegisterRest } = register("key");
+
+  const secretKey = watch("key");
+
   const slugSchema = z.string().trim().toLowerCase().min(1);
   const createNewTag = async (slug: string) => {
     // TODO: Replace with slugSchema generic
@@ -108,13 +114,23 @@ export const CreateSecretForm = ({
   };
 
   const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
     const delimitters = [":", "="];
     const pastedContent = e.clipboardData.getData("text");
     const { key, value } = getKeyValue(pastedContent, delimitters);
 
-    setValue("key", key);
-    setValue("value", value);
+    const isWholeKeyHighlighted =
+      secretKeyInputRef.current &&
+      secretKeyInputRef.current.selectionStart === 0 &&
+      secretKeyInputRef.current.selectionEnd === secretKeyInputRef.current.value.length;
+
+    if (!secretKey || isWholeKeyHighlighted) {
+      e.preventDefault();
+
+      setValue("key", key);
+      if (value) {
+        setValue("value", value);
+      }
+    }
   };
 
   return (
@@ -126,7 +142,12 @@ export const CreateSecretForm = ({
         errorText={errors?.key?.message}
       >
         <Input
-          {...register("key")}
+          {...secretKeyRegisterRest}
+          ref={(e) => {
+            setSecretKeyHookRef(e);
+            // @ts-expect-error this is for multiple ref single component
+            secretKeyInputRef.current = e;
+          }}
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={autoCapitalize}

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -1,4 +1,4 @@
-import { ClipboardEvent } from "react";
+import { ClipboardEvent, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
@@ -46,6 +46,7 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
     control,
     reset,
     setValue,
+    watch,
     formState: { isSubmitting, errors }
   } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
 
@@ -61,6 +62,11 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
     canReadTags ? workspaceId : ""
   );
 
+  const secretKeyInputRef = useRef<HTMLInputElement>(null);
+  const { ref: setSecretKeyHookRef, ...secretKeyRegisterRest } = register("key");
+
+  const secretKey = watch("key");
+
   const handleFormSubmit = async ({ key, value, environments: selectedEnv, tags }: TFormSchema) => {
     const promises = selectedEnv.map(async (env) => {
       const environment = env.slug;
@@ -152,13 +158,23 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
   };
 
   const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
     const delimitters = [":", "="];
     const pastedContent = e.clipboardData.getData("text");
     const { key, value } = getKeyValue(pastedContent, delimitters);
 
-    setValue("key", key);
-    setValue("value", value);
+    const isWholeKeyHighlighted =
+      secretKeyInputRef.current &&
+      secretKeyInputRef.current.selectionStart === 0 &&
+      secretKeyInputRef.current.selectionEnd === secretKeyInputRef.current.value.length;
+
+    if (!secretKey || isWholeKeyHighlighted) {
+      e.preventDefault();
+
+      setValue("key", key);
+      if (value) {
+        setValue("value", value);
+      }
+    }
   };
 
   const createWsTag = useCreateWsTag();
@@ -189,7 +205,12 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
         errorText={errors?.key?.message}
       >
         <Input
-          {...register("key")}
+          {...secretKeyRegisterRest}
+          ref={(e) => {
+            setSecretKeyHookRef(e);
+            // @ts-expect-error this is for multiple ref single component
+            secretKeyInputRef.current = e;
+          }}
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={currentWorkspace?.autoCapitalization}

frontend/src/views/ShareSecretPage/components/AddShareSecretModal.tsx

@@ -20,7 +20,7 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
     >
       <ModalContent
         title="Share a Secret"
-        subTitle="Once you share a secret, the share link is only accessible once."
+        subTitle="Securely share one off secrets with your team."
       >
         <ShareSecretForm
           isPublic={false}