feature: oidc group membership mapping

frontend/src/pages/organization/GroupDetailsByIDPage/components/AddGroupMemberModal.tsx

@@ -82,9 +82,9 @@ export const AddGroupMembersModal = ({ popUp, handlePopUpToggle }: Props) => {
         text: "Successfully assigned user to the group",
         type: "success"
       });
-    } catch {
+    } catch (error) {
       createNotification({
-        text: "Failed to assign user to the group",
+        text: (error as Error)?.message ?? "Failed to assign user to the group",
         type: "error"
       });
     }

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

@@ -2,8 +2,10 @@ 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 { OrgPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useOidcManageGroupMembershipsEnabled, useRemoveUserFromGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddGroupMembersModal } from "../AddGroupMemberModal";
@@ -20,6 +22,11 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
     "removeMemberFromGroup"
   ] as const);
 
+  const { currentOrg } = useOrganization();
+
+  const { data: isOidcManageGroupMembershipsEnabled = false } =
+    useOidcManageGroupMembershipsEnabled(currentOrg.id);
+
   const { mutateAsync: removeUserFromGroupMutateAsync } = useRemoveUserFromGroup();
   const handleRemoveUserFromGroup = async (username: string) => {
     try {
@@ -47,19 +54,35 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
     <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>
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
+          {(isAllowed) => (
+            <Tooltip
+              className="text-center"
+              content={
+                isOidcManageGroupMembershipsEnabled
+                  ? "OIDC Group Membership Mapping Enabled. Disable to manually manage user groups."
+                  : undefined
+              }
+            >
+              <div className="mb-4 flex items-center justify-center">
+                <IconButton
+                  isDisabled={isOidcManageGroupMembershipsEnabled || !isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() => {
+                    handlePopUpOpen("addGroupMembers", {
+                      groupId,
+                      slug: groupSlug
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPlus} />
+                </IconButton>
+              </div>
+            </Tooltip>
+          )}
+        </OrgPermissionCan>
       </div>
       <div className="py-4">
         <GroupMembersTable

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

@@ -21,11 +21,12 @@ import {
   TBody,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
-import { useListGroupUsers } from "@app/hooks/api";
+import { useListGroupUsers, useOidcManageGroupMembershipsEnabled } 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";
@@ -58,6 +59,11 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
     toggleOrderDirection
   } = usePagination(GroupMembersOrderBy.Name, { initPerPage: 10 });
 
+  const { currentOrg } = useOrganization();
+
+  const { data: isOidcManageGroupMembershipsEnabled = false } =
+    useOidcManageGroupMembershipsEnabled(currentOrg.id);
+
   const { data: groupMemberships, isPending } = useListGroupUsers({
     id: groupId,
     groupSlug,
@@ -173,19 +179,30 @@ export const GroupMembersTable = ({ groupId, groupSlug, handlePopUpOpen }: Props
         {!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>
+              <Tooltip
+                className="text-center"
+                content={
+                  isOidcManageGroupMembershipsEnabled
+                    ? "OIDC Group Membership Mapping Enabled. Disable to manually manage user groups."
+                    : undefined
+                }
+              >
+                <div className="mb-4 flex items-center justify-center">
+                  <Button
+                    variant="solid"
+                    colorSchema="secondary"
+                    isDisabled={isOidcManageGroupMembershipsEnabled || !isAllowed}
+                    onClick={() => {
+                      handlePopUpOpen("addGroupMembers", {
+                        groupId,
+                        slug: groupSlug
+                      });
+                    }}
+                  >
+                    Add members
+                  </Button>
+                </div>
+              </Tooltip>
             )}
           </OrgPermissionCan>
         )}

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

@@ -3,7 +3,8 @@ 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 { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useOidcManageGroupMembershipsEnabled } from "@app/hooks/api";
 import { TGroupUser } from "@app/hooks/api/groups/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -19,6 +20,11 @@ export const GroupMembershipRow = ({
   user: { firstName, lastName, username, joinedGroupAt, email, id },
   handlePopUpOpen
 }: Props) => {
+  const { currentOrg } = useOrganization();
+
+  const { data: isOidcManageGroupMembershipsEnabled = false } =
+    useOidcManageGroupMembershipsEnabled(currentOrg.id);
+
   return (
     <Tr className="items-center" key={`group-user-${id}`}>
       <Td>
@@ -36,15 +42,21 @@ export const GroupMembershipRow = ({
         <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => {
             return (
-              <Tooltip content="Remove user from group">
+              <Tooltip
+                content={
+                  isOidcManageGroupMembershipsEnabled
+                    ? "OIDC Group Membership Mapping Enabled. Disable to manually manage user groups."
+                    : "Remove user from group"
+                }
+              >
                 <IconButton
-                  isDisabled={!isAllowed}
+                  isDisabled={!isAllowed || isOidcManageGroupMembershipsEnabled}
                   ariaLabel="Remove user from group"
                   onClick={() => handlePopUpOpen("removeMemberFromGroup", { username })}
                   variant="plain"
                   colorSchema="danger"
                 >
-                  <FontAwesomeIcon icon={faUserMinus} className="cursor-pointer" />
+                  <FontAwesomeIcon icon={faUserMinus} />
                 </IconButton>
               </Tooltip>
             );