Merge remote-tracking branch 'origin/main' into feat/azureDevopsSecretSync

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

@@ -5,6 +5,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
+import { OrgPermissionGuardBanner } from "@app/components/permissions/OrgPermissionCan";
 import { Button, PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -72,6 +73,8 @@ export const AccessManagementPage = () => {
     }
   ];
 
+  const hasNoAccess = tabSections.every((tab) => tab.isHidden);
+
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <Helmet>
@@ -126,6 +129,7 @@ export const AccessManagementPage = () => {
             ))}
         </Tabs>
       </div>
+      {hasNoAccess && <OrgPermissionGuardBanner />}
     </div>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -33,20 +33,26 @@ import {
   useGetIdentityKubernetesAuth,
   useUpdateIdentityKubernetesAuth
 } from "@app/hooks/api";
-import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import {
+  IdentityKubernetesAuthTokenReviewMode,
+  IdentityTrustedIp
+} from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityFormTab } from "./types";
 
 const schema = z
   .object({
-    kubernetesHost: z.string().min(1),
+    tokenReviewMode: z
+      .nativeEnum(IdentityKubernetesAuthTokenReviewMode)
+      .default(IdentityKubernetesAuthTokenReviewMode.Api),
+    kubernetesHost: z.string().optional().nullable(),
     tokenReviewerJwt: z.string().optional(),
     gatewayId: z.string().optional().nullable(),
     allowedNames: z.string(),
     allowedNamespaces: z.string(),
     allowedAudience: z.string(),
-    caCert: z.string(),
+    caCert: z.string().optional(),
     accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
       message: "Access Token TTL cannot be greater than 315360000"
     }),
@@ -62,7 +68,26 @@ const schema = z
       )
       .min(1)
   })
-  .required();
+  .superRefine((data, ctx) => {
+    if (
+      data.tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api &&
+      !data.kubernetesHost?.length
+    ) {
+      ctx.addIssue({
+        path: ["kubernetesHost"],
+        code: z.ZodIssueCode.custom,
+        message: "When token review mode is set to API, a Kubernetes host must be provided"
+      });
+    }
+
+    if (data.tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Gateway && !data.gatewayId) {
+      ctx.addIssue({
+        path: ["gatewayId"],
+        code: z.ZodIssueCode.custom,
+        message: "When token review mode is set to Gateway, a gateway must be selected"
+      });
+    }
+  });
 
 export type FormData = z.infer<typeof schema>;
 
@@ -100,11 +125,14 @@ export const IdentityKubernetesAuthForm = ({
     control,
     handleSubmit,
     reset,
+    watch,
+    setValue,
 
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
+      tokenReviewMode: IdentityKubernetesAuthTokenReviewMode.Api,
       kubernetesHost: "",
       tokenReviewerJwt: "",
       allowedNames: "",
@@ -128,6 +156,7 @@ export const IdentityKubernetesAuthForm = ({
   useEffect(() => {
     if (data) {
       reset({
+        tokenReviewMode: data.tokenReviewMode,
         kubernetesHost: data.kubernetesHost,
         tokenReviewerJwt: data.tokenReviewerJwt,
         allowedNames: data.allowedNames,
@@ -148,6 +177,7 @@ export const IdentityKubernetesAuthForm = ({
       });
     } else {
       reset({
+        tokenReviewMode: IdentityKubernetesAuthTokenReviewMode.Api,
         kubernetesHost: "",
         tokenReviewerJwt: "",
         allowedNames: "",
@@ -173,6 +203,7 @@ export const IdentityKubernetesAuthForm = ({
     accessTokenMaxTTL,
     accessTokenNumUsesLimit,
     gatewayId,
+    tokenReviewMode,
     accessTokenTrustedIps
   }: FormData) => {
     try {
@@ -181,7 +212,13 @@ export const IdentityKubernetesAuthForm = ({
       if (data) {
         await updateMutateAsync({
           organizationId: orgId,
-          kubernetesHost,
+          ...(tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api
+            ? {
+                kubernetesHost: kubernetesHost || ""
+              }
+            : {
+                kubernetesHost: null
+              }),
           tokenReviewerJwt: tokenReviewerJwt || null,
           allowedNames,
           allowedNamespaces,
@@ -189,6 +226,7 @@ export const IdentityKubernetesAuthForm = ({
           caCert,
           identityId,
           gatewayId: gatewayId || null,
+          tokenReviewMode,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -198,13 +236,20 @@ export const IdentityKubernetesAuthForm = ({
         await addMutateAsync({
           organizationId: orgId,
           identityId,
-          kubernetesHost: kubernetesHost || "",
+          ...(tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api
+            ? {
+                kubernetesHost: kubernetesHost || ""
+              }
+            : {
+                kubernetesHost: null
+              }),
           tokenReviewerJwt: tokenReviewerJwt || undefined,
           allowedNames: allowedNames || "",
           allowedNamespaces: allowedNamespaces || "",
           allowedAudience: allowedAudience || "",
           gatewayId: gatewayId || null,
           caCert: caCert || "",
+          tokenReviewMode,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -228,6 +273,8 @@ export const IdentityKubernetesAuthForm = ({
     }
   };
 
+  const tokenReviewMode = watch("tokenReviewMode");
+
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit, (fields) => {
@@ -235,6 +282,7 @@ export const IdentityKubernetesAuthForm = ({
           [
             "kubernetesHost",
             "tokenReviewerJwt",
+            "tokenReviewMode",
             "gatewayId",
             "accessTokenTTL",
             "accessTokenMaxTTL",
@@ -253,37 +301,135 @@ export const IdentityKubernetesAuthForm = ({
           <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
         </TabList>
         <TabPanel value={IdentityFormTab.Configuration}>
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="kubernetesHost"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Kubernetes Host / Base Kubernetes API URL "
-                isError={Boolean(error)}
-                errorText={error?.message}
-                tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
-                isRequired
+          <div className="flex w-full items-center gap-2">
+            <div className="w-full flex-1">
+              <OrgPermissionCan
+                I={OrgGatewayPermissionActions.AttachGateways}
+                a={OrgPermissionSubjects.Gateway}
               >
-                <Input {...field} placeholder="https://my-example-k8s-api-host.com" type="text" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="tokenReviewerJwt"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                tooltipClassName="max-w-md"
-                label="Token Reviewer JWT"
-                isError={Boolean(error)}
-                errorText={error?.message}
-                tooltipText="Optional JWT token for accessing Kubernetes TokenReview API. If provided, this long-lived token will be used to validate service account tokens during authentication. If omitted, the client's own JWT will be used instead, which requires the client to have the system:auth-delegator ClusterRole binding."
-              >
-                <Input {...field} placeholder="" type="password" />
-              </FormControl>
-            )}
-          />
+                {(isAllowed) => (
+                  <Controller
+                    control={control}
+                    name="gatewayId"
+                    defaultValue=""
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        label="Gateway"
+                        isOptional
+                      >
+                        <Tooltip
+                          isDisabled={isAllowed}
+                          content="Restricted access. You don't have permission to attach gateways to resources."
+                        >
+                          <div>
+                            <Select
+                              isDisabled={!isAllowed}
+                              value={value as string}
+                              onValueChange={(v) => {
+                                if (v !== "") {
+                                  onChange(v);
+                                }
+
+                                if (v === null) {
+                                  setValue(
+                                    "tokenReviewMode",
+                                    IdentityKubernetesAuthTokenReviewMode.Api,
+                                    {
+                                      shouldDirty: true,
+                                      shouldTouch: true
+                                    }
+                                  );
+                                }
+                              }}
+                              className="w-full border border-mineshaft-500"
+                              dropdownContainerClassName="max-w-none"
+                              isLoading={isGatewayLoading}
+                              placeholder="Default: Internet Gateway"
+                              position="popper"
+                            >
+                              <SelectItem
+                                value={null as unknown as string}
+                                onClick={() => {
+                                  onChange(null);
+                                }}
+                              >
+                                Internet Gateway
+                              </SelectItem>
+                              {gateways?.map((el) => (
+                                <SelectItem value={el.id} key={el.id}>
+                                  {el.name}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          </div>
+                        </Tooltip>
+                      </FormControl>
+                    )}
+                  />
+                )}
+              </OrgPermissionCan>
+            </div>
+
+            <Controller
+              control={control}
+              name="tokenReviewMode"
+              render={({ field }) => (
+                <FormControl
+                  tooltipClassName="max-w-md"
+                  tooltipText="The method of which tokens are reviewed. If you select Gateway as Reviewer, the selected gateway will be used to review tokens with. If this option is enabled, the gateway must be deployed in Kubernetes, and the gateway must have the system:auth-delegator ClusterRole binding."
+                  label="Review Mode"
+                >
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectItem value="gateway">Gateway as Reviewer</SelectItem>
+                    <SelectItem value="api">Manual Token Reviewer JWT (API)</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
+          </div>
+          {tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api && (
+            <Controller
+              control={control}
+              defaultValue="2592000"
+              name="kubernetesHost"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Kubernetes Host / Base Kubernetes API URL "
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
+                  isRequired
+                >
+                  <Input
+                    {...field}
+                    placeholder="https://my-example-k8s-api-host.com"
+                    type="text"
+                    value={field.value || ""}
+                  />
+                </FormControl>
+              )}
+            />
+          )}
+
+          {tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api && (
+            <Controller
+              control={control}
+              name="tokenReviewerJwt"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  tooltipClassName="max-w-md"
+                  label="Token Reviewer JWT"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                  tooltipText="Optional JWT token for accessing Kubernetes TokenReview API. If provided, this long-lived token will be used to validate service account tokens during authentication. If omitted, the client's own JWT will be used instead, which requires the client to have the system:auth-delegator ClusterRole binding."
+                >
+                  <Input {...field} placeholder="" type="password" />
+                </FormControl>
+              )}
+            />
+          )}
           <Controller
             control={control}
             defaultValue=""
@@ -300,61 +446,6 @@ export const IdentityKubernetesAuthForm = ({
             )}
           />
 
-          <OrgPermissionCan
-            I={OrgGatewayPermissionActions.AttachGateways}
-            a={OrgPermissionSubjects.Gateway}
-          >
-            {(isAllowed) => (
-              <Controller
-                control={control}
-                name="gatewayId"
-                defaultValue=""
-                render={({ field: { value, onChange }, fieldState: { error } }) => (
-                  <FormControl
-                    isError={Boolean(error?.message)}
-                    errorText={error?.message}
-                    label="Gateway"
-                    isOptional
-                  >
-                    <Tooltip
-                      isDisabled={isAllowed}
-                      content="Restricted access. You don't have permission to attach gateways to resources."
-                    >
-                      <div>
-                        <Select
-                          isDisabled={!isAllowed}
-                          value={value as string}
-                          onValueChange={(v) => {
-                            if (v !== "") {
-                              onChange(v);
-                            }
-                          }}
-                          className="w-full border border-mineshaft-500"
-                          dropdownContainerClassName="max-w-none"
-                          isLoading={isGatewayLoading}
-                          placeholder="Default: Internet Gateway"
-                          position="popper"
-                        >
-                          <SelectItem
-                            value={null as unknown as string}
-                            onClick={() => onChange(null)}
-                          >
-                            Internet Gateway
-                          </SelectItem>
-                          {gateways?.map((el) => (
-                            <SelectItem value={el.id} key={el.id}>
-                              {el.name}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                      </div>
-                    </Tooltip>
-                  </FormControl>
-                )}
-              />
-            )}
-          </OrgPermissionCan>
-
           <Controller
             control={control}
             name="allowedNames"
@@ -431,20 +522,22 @@ export const IdentityKubernetesAuthForm = ({
               </FormControl>
             )}
           />
-          <Controller
-            control={control}
-            name="caCert"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="CA Certificate"
-                errorText={error?.message}
-                isError={Boolean(error)}
-                tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
-              >
-                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-              </FormControl>
-            )}
-          />
+          {tokenReviewMode === IdentityKubernetesAuthTokenReviewMode.Api && (
+            <Controller
+              control={control}
+              name="caCert"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="CA Certificate"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
+                >
+                  <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+                </FormControl>
+              )}
+            />
+          )}
           {accessTokenTrustedIpsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -159,6 +159,7 @@ export const AddOrgMemberModal = ({
         text: "Failed to invite user to org",
         type: "error"
       });
+      return;
     }
 
     if (serverDetails?.emailConfigured) {

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -1,8 +1,11 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
+  faCheckCircle,
+  faChevronRight,
   faEllipsis,
+  faFilter,
   faMagnifyingGlass,
   faSearch,
   faUsers
@@ -19,7 +22,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuTrigger,
+  DropdownSubMenu,
+  DropdownSubMenuContent,
+  DropdownSubMenuTrigger,
   EmptyState,
   IconButton,
   Input,
@@ -75,6 +82,10 @@ enum OrgMembersOrderBy {
   Email = "email"
 }
 
+type Filter = {
+  roles: string[];
+};
+
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Props) => {
   const navigate = useNavigate();
   const { subscription } = useSubscription();
@@ -184,17 +195,29 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
     setUserTablePreference("orgMembersTable", PreferenceKey.PerPage, newPerPage);
   };
 
+  const [filter, setFilter] = useState<Filter>({
+    roles: []
+  });
+
   const filteredUsers = useMemo(
     () =>
       members
-        ?.filter(
-          ({ user: u, inviteEmail }) =>
+        ?.filter(({ user: u, inviteEmail, role, roleId }) => {
+          if (
+            filter.roles.length &&
+            !filter.roles.includes(role === "custom" ? findRoleFromId(roleId)!.slug : role)
+          ) {
+            return false;
+          }
+
+          return (
             u?.firstName?.toLowerCase().includes(search.toLowerCase()) ||
             u?.lastName?.toLowerCase().includes(search.toLowerCase()) ||
             u?.username?.toLowerCase().includes(search.toLowerCase()) ||
             u?.email?.toLowerCase().includes(search.toLowerCase()) ||
             inviteEmail?.toLowerCase().includes(search.toLowerCase())
-        )
+          );
+        })
         .sort((a, b) => {
           const [memberOne, memberTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
 
@@ -217,7 +240,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
 
           return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
         }),
-    [members, search, orderDirection, orderBy]
+    [members, search, orderDirection, orderBy, filter]
   );
 
   const handleSort = (column: OrgMembersOrderBy) => {
@@ -236,14 +259,81 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
     setPage
   });
 
+  const handleRoleToggle = useCallback(
+    (roleSlug: string) =>
+      setFilter((state) => {
+        const currentRoles = state.roles || [];
+
+        if (currentRoles.includes(roleSlug)) {
+          return { ...state, roles: currentRoles.filter((role) => role !== roleSlug) };
+        }
+        return { ...state, roles: [...currentRoles, roleSlug] };
+      }),
+    []
+  );
+
+  const isTableFiltered = Boolean(filter.roles.length);
+
   return (
     <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
-      />
+      <div className="flex gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Users"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownSubMenu>
+              <DropdownSubMenuTrigger
+                iconPos="right"
+                icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+              >
+                Roles
+              </DropdownSubMenuTrigger>
+              <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                  Apply Roles to Filter Users
+                </DropdownMenuLabel>
+                {roles?.map(({ id, slug, name }) => (
+                  <DropdownMenuItem
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      handleRoleToggle(slug);
+                    }}
+                    key={id}
+                    icon={filter.roles.includes(slug) && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className="mr-2 h-2 w-2 rounded-full"
+                        style={{ background: "#bec2c8" }}
+                      />
+                      {name}
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownSubMenuContent>
+            </DropdownSubMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search members..."
+        />
+      </div>
       <TableContainer className="mt-4">
         <Table>
           <THead>

frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx

@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet";
 import {
   faArrowUpRightFromSquare,
   faBookOpen,
+  faCopy,
   faEdit,
   faEllipsisV,
   faInfoCircle,
@@ -169,6 +170,12 @@ export const GatewayListPage = withPermission(
                                   </IconButton>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    icon={<FontAwesomeIcon icon={faCopy} />}
+                                    onClick={() => navigator.clipboard.writeText(el.id)}
+                                  >
+                                    Copy ID
+                                  </DropdownMenuItem>
                                   <OrgPermissionCan
                                     I={OrgGatewayPermissionActions.EditGateways}
                                     a={OrgPermissionSubjects.Gateway}

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>
   );