From b0ce0bb181dea52f920999d306ad80afc8acb36c Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 8 Dec 2022 06:24:59 -0500
Subject: [PATCH] Use id instead of name to disable (#3959)

---
 .../src/clients/authorization/policy/Group.tsx         |  2 +-
 .../admin-ui/src/components/dynamic/GroupComponent.tsx |  5 ++++-
 .../src/components/group/GroupPickerDialog.tsx         | 10 +++++-----
 apps/admin-ui/src/groups/components/MoveDialog.tsx     |  2 +-
 apps/admin-ui/src/user/UserForm.tsx                    |  2 +-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/admin-ui/src/clients/authorization/policy/Group.tsx b/apps/admin-ui/src/clients/authorization/policy/Group.tsx
index bea58ee2cc..2050b7b429 100644
--- a/apps/admin-ui/src/clients/authorization/policy/Group.tsx
+++ b/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
diff --git a/apps/admin-ui/src/components/dynamic/GroupComponent.tsx b/apps/admin-ui/src/components/dynamic/GroupComponent.tsx
index 21d45a8503..82498280b9 100644
--- a/apps/admin-ui/src/components/dynamic/GroupComponent.tsx
+++ b/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}
             />
           )}
 
diff --git a/apps/admin-ui/src/components/group/GroupPickerDialog.tsx b/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
index 41b942ca80..db04a537a0 100644
--- a/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
+++ b/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
diff --git a/apps/admin-ui/src/groups/components/MoveDialog.tsx b/apps/admin-ui/src/groups/components/MoveDialog.tsx
index 46810066b3..9260b8dc2b 100644
--- a/apps/admin-ui/src/groups/components/MoveDialog.tsx
+++ b/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",
diff --git a/apps/admin-ui/src/user/UserForm.tsx b/apps/admin-ui/src/user/UserForm.tsx
index 92f5a47fb3..6b97288a90 100644
--- a/apps/admin-ui/src/user/UserForm.tsx
+++ b/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 && (