From 02217b03315bc4d17448f6e041230c3e26bb828a Mon Sep 17 00:00:00 2001
From: npriebe <npriebe@avides.com>
Date: Wed, 26 Jun 2024 08:47:16 +0200
Subject: [PATCH] Display disabled information from user in group assignment

Closes #30682

Signed-off-by: npriebe <npriebe@avides.com>
---
 js/apps/admin-ui/src/groups/Members.tsx      | 11 +++++++++--
 js/apps/admin-ui/src/groups/MembersModal.tsx | 19 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/js/apps/admin-ui/src/groups/Members.tsx b/js/apps/admin-ui/src/groups/Members.tsx
index ec9c97de0f..f7e05c865f 100644
--- a/js/apps/admin-ui/src/groups/Members.tsx
+++ b/js/apps/admin-ui/src/groups/Members.tsx
@@ -9,8 +9,9 @@ import {
   DropdownList,
   MenuToggle,
   ToolbarItem,
+  Label,
 } from "@patternfly/react-core";
-import { EllipsisVIcon } from "@patternfly/react-icons";
+import { EllipsisVIcon, InfoCircleIcon } from "@patternfly/react-icons";
 import { uniqBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -52,9 +53,15 @@ const MemberOfRenderer = (member: MembersOf) => {
 
 const UserDetailLink = (user: MembersOf) => {
   const { realm } = useRealm();
+  const { t } = useTranslation();
   return (
     <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
-      {user.username}
+      {user.username}{" "}
+      {!user.enabled && (
+        <Label color="red" icon={<InfoCircleIcon />}>
+          {t("disabled")}
+        </Label>
+      )}
     </Link>
   );
 };
diff --git a/js/apps/admin-ui/src/groups/MembersModal.tsx b/js/apps/admin-ui/src/groups/MembersModal.tsx
index 2c53c7c813..0337a8023a 100644
--- a/js/apps/admin-ui/src/groups/MembersModal.tsx
+++ b/js/apps/admin-ui/src/groups/MembersModal.tsx
@@ -1,5 +1,6 @@
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
-import { Button, Modal, ModalVariant } from "@patternfly/react-core";
+import { Button, Modal, ModalVariant, Label } from "@patternfly/react-core";
+import { InfoCircleIcon } from "@patternfly/react-icons";
 import { differenceBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +16,20 @@ type MemberModalProps = {
   onClose: () => void;
 };
 
+const UserDetail = (user: UserRepresentation) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {user.username}{" "}
+      {!user.enabled && (
+        <Label color="red" icon={<InfoCircleIcon />}>
+          {t("disabled")}
+        </Label>
+      )}
+    </>
+  );
+};
+
 export const MemberModal = ({
   membersQuery,
   onAdd,
@@ -88,10 +103,12 @@ export const MemberModal = ({
           {
             name: "username",
             displayKey: "username",
+            cellRenderer: UserDetail,
           },
           {
             name: "email",
             displayKey: "email",
+            cellFormatters: [emptyFormatter()],
           },
           {
             name: "lastName",