Use id instead of name to disable (#3959)

apps/admin-ui/src/clients/authorization/policy/Group.tsx

@@ -119,7 +119,7 @@ export const Group = () => {
                   onClose={() => {
                     setOpen(false);
                   }}
-                  filterGroups={selectedGroups.map(({ name }) => name!)}
+                  filterGroups={selectedGroups}
                 />
               )}
               <Button

apps/admin-ui/src/components/dynamic/GroupComponent.tsx

@@ -13,10 +13,12 @@ import type { ComponentProps } from "./components";
 import { HelpItem } from "../help-enabler/HelpItem";
 import { GroupPickerDialog } from "../group/GroupPickerDialog";
 import { convertToName } from "./DynamicComponents";
+import GroupRepresentation from "libs/keycloak-admin-client/lib/defs/groupRepresentation";
 
 export const GroupComponent = ({ name, label, helpText }: ComponentProps) => {
   const { t } = useTranslation("dynamic");
   const [open, setOpen] = useState(false);
+  const [groups, setGroups] = useState<GroupRepresentation[]>();
   const { control } = useFormContext();
 
   return (
@@ -36,10 +38,11 @@ export const GroupComponent = ({ name, label, helpText }: ComponentProps) => {
               }}
               onConfirm={(groups) => {
                 onChange(groups?.[0].path);
+                setGroups(groups);
                 setOpen(false);
               }}
               onClose={() => setOpen(false)}
-              filterGroups={value}
+              filterGroups={groups}
             />
           )}
 

apps/admin-ui/src/components/group/GroupPickerDialog.tsx

@@ -25,7 +25,7 @@ import { GroupPath } from "./GroupPath";
 export type GroupPickerDialogProps = {
   id?: string;
   type: "selectOne" | "selectMany";
-  filterGroups?: string[];
+  filterGroups?: GroupRepresentation[];
   text: { title: string; ok: string };
   canBrowse?: boolean;
   onConfirm: (groups: GroupRepresentation[] | undefined) => void;
@@ -103,9 +103,9 @@ export const GroupPickerDialog = ({
 
   const isRowDisabled = (row?: GroupRepresentation) => {
     return [
-      ...joinedGroups.map((item) => item.name),
-      ...(filterGroups || []),
-    ].some((group) => group === row?.name);
+      ...joinedGroups.map((item) => item.id),
+      ...(filterGroups || []).map((group) => group.id),
+    ].some((group) => group === row?.id);
   };
 
   const hasSubgroups = (group: GroupRepresentation) =>
@@ -131,7 +131,7 @@ export const GroupPickerDialog = ({
     <Modal
       variant={ModalVariant.small}
       title={t(text.title, {
-        group1: filterGroups?.[0],
+        group1: filterGroups?.[0]?.name,
         group2: navigation.length ? currentGroup().name : t("root"),
       })}
       isOpen

apps/admin-ui/src/groups/components/MoveDialog.tsx

@@ -71,7 +71,7 @@ export const MoveDialog = ({ source, onClose, refresh }: MoveDialogProps) => {
   return (
     <GroupPickerDialog
       type="selectOne"
-      filterGroups={[source.name!]}
+      filterGroups={[source]}
       text={{
         title: "groups:moveToGroup",
         ok: "groups:moveHere",

apps/admin-ui/src/user/UserForm.tsx

@@ -168,7 +168,7 @@ export const UserForm = ({
             setOpen(false);
           }}
           onClose={() => setOpen(false)}
-          filterGroups={selectedGroups.map((group) => group.name!)}
+          filterGroups={selectedGroups}
         />
       )}
       {user?.id && (