small fix that adds collapse icon based on count (#29996)

* small fix that adds collapse icon based on count

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* fixed test

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/cypress/e2e/group_test.spec.ts

@@ -50,7 +50,13 @@ describe("Group test", () => {
     );
   });
 
-  after(() => adminClient.deleteGroups());
+  after(
+    async () =>
+      await Promise.all([
+        adminClient.deleteGroups(),
+        ...range(5).map((index) => adminClient.deleteUser(username + index)),
+      ]),
+  );
 
   beforeEach(() => {
     loginPage.logIn();
@@ -154,7 +160,6 @@ describe("Group test", () => {
             createdGroups[index % 3].id,
           );
         }),
-        adminClient.createUser({ username: "new", enabled: true }),
       ]);
     });
 
@@ -198,13 +203,6 @@ describe("Group test", () => {
           .goToGroupChildGroupsTab(predefinedGroups[0])
           .assertGroupItemExist(predefinedGroups[1], true);
       });
-
-      it("Navigate to sub-group details", () => {
-        searchGroupPage
-          .searchGlobal(predefinedGroups[1])
-          .goToGroupChildGroupsFromTree(predefinedGroups[1])
-          .assertGroupItemExist(predefinedGroups[2], true);
-      });
     });
 
     it("Rename group", () => {
@@ -321,9 +319,12 @@ describe("Group test", () => {
           );
         }),
         adminClient.createGroup(emptyGroup),
+        adminClient.createUser({ username: "new", enabled: true }),
       ]);
     });
 
+    after(() => adminClient.deleteUser("new"));
+
     beforeEach(() => {
       groupPage.goToGroupChildGroupsTab(predefinedGroups[0]);
       childGroupsTab.goToMembersTab();

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/SearchGroupPage.ts

@@ -1,10 +1,8 @@
-import SidebarPage from "../../SidebarPage";
 import GroupPage from "./GroupPage";
 
 export class SearchGroupPage extends GroupPage {
   #groupSearchField = "group-search";
   #searchButton = "[data-testid='group-search'] button[type='submit']";
-  #sidebarPage = new SidebarPage();
 
   public searchGroup(groupName: string) {
     this.typeSearchInput(groupName);
@@ -18,12 +16,6 @@ export class SearchGroupPage extends GroupPage {
     return this;
   }
 
-  public goToGroupChildGroupsFromTree(item: string) {
-    cy.get(".pf-v5-c-tree-view__content").contains(item).click();
-    this.#sidebarPage.waitForPageLoad();
-    return this;
-  }
-
   public typeSearchInput(value: string) {
     cy.findByTestId(this.#groupSearchField).type(value);
     return this;

js/apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -5,6 +5,7 @@ import {
   Checkbox,
   InputGroup,
   InputGroupItem,
+  Spinner,
   Tooltip,
   TreeView,
   TreeViewDataItem,
@@ -190,10 +191,17 @@ export const GroupTree = ({
         </Tooltip>
       ),
       access: group.access || {},
-      children:
-        group.subGroups && group.subGroups.length > 0
-          ? group.subGroups.map((g) => mapGroup(g, refresh))
-          : undefined,
+      children: group.subGroupCount
+        ? [
+            {
+              name: (
+                <>
+                  <Spinner size="sm" /> {t("spinnerLoading")}
+                </>
+              ),
+            },
+          ]
+        : undefined,
       action: (hasAccess("manage-users") || group.access?.manage) && (
         <GroupTreeContextMenu group={group} refresh={refresh} />
       ),
@@ -296,6 +304,29 @@ export const GroupTree = ({
     return path;
   };
 
+  const nav = (item: TreeViewDataItem, data: ExtendedTreeViewDataItem[]) => {
+    if (item.id === "next") return;
+    setActiveItem(item);
+
+    const path = findGroup(data, item.id!, []);
+    if (!subGroups.every(({ id }) => path.find((t) => t.id === id))) clear();
+    if (
+      canViewDetails ||
+      path.at(-1)?.access?.view ||
+      subGroups.at(-1)?.access?.view
+    ) {
+      navigate(
+        toGroups({
+          realm,
+          id: path.map((g) => g.id).join("/"),
+        }),
+      );
+    } else {
+      addAlert(t("noViewRights"), AlertVariant.warning);
+      navigate(toGroups({ realm }));
+    }
+  };
+
   return data ? (
     <PaginatingTableToolbar
       count={count}
@@ -337,28 +368,11 @@ export const GroupTree = ({
           hasGuides
           hasSelectableNodes
           className="keycloak_groups_treeview"
+          onExpand={(_, item) => {
+            nav(item, data);
+          }}
           onSelect={(_, item) => {
-            if (item.id === "next") return;
-            setActiveItem(item);
-
-            const path = findGroup(data, item.id!, []);
-            if (!subGroups.every(({ id }) => path.find((t) => t.id === id)))
-              clear();
-            if (
-              canViewDetails ||
-              path.at(-1)?.access?.view ||
-              subGroups.at(-1)?.access?.view
-            ) {
-              navigate(
-                toGroups({
-                  realm,
-                  id: path.map((g) => g.id).join("/"),
-                }),
-              );
-            } else {
-              addAlert(t("noViewRights"), AlertVariant.warning);
-              navigate(toGroups({ realm }));
-            }
+            nav(item, data);
           }}
         />
       )}