Combine tree view and list for groups (#3401)

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

@@ -117,6 +117,7 @@ describe("Group test", () => {
         .searchGroup(groupNames[0], true)
         .deleteGroupItem(groupNames[0])
         .assertNotificationGroupDeleted()
+        .searchGroup(groupNames[0], true)
         .assertNoSearchResultsMessageExist(true);
     });
 
@@ -199,8 +200,8 @@ describe("Group test", () => {
 
       it("Navigate to sub-group details", () => {
         searchGroupPage
-          .searchGroup(predefinedGroups[1])
+          .searchGlobal(predefinedGroups[1])
-          .goToGroupChildGroupsTab(predefinedGroups[1])
+          .goToGroupChildGroupsFromTree(predefinedGroups[1])
           .assertGroupItemExist(predefinedGroups[2], true);
       });
     });
@@ -462,12 +463,12 @@ describe("Group test", () => {
 
     it("Assign roles from empty state", () => {
       roleMappingTab.assignRole();
-      groupDetailPage.createRoleMappingSearch();
+      groupDetailPage.createRoleMapping();
       roleMappingTab.assign();
     });
 
     it("Show and search roles", () => {
-      groupDetailPage.checkRoles();
+      groupDetailPage.checkDefaultRole();
     });
 
     it("Check hide inherited roles option", () => {
@@ -476,7 +477,7 @@ describe("Group test", () => {
     });
 
     it("Remove roles", () => {
-      roleMappingTab.selectRow("offline_access");
+      roleMappingTab.selectRow("default-roles");
       roleMappingTab.unAssign();
       groupDetailPage.deleteRole();
     });

apps/admin-ui/cypress/support/pages/admin_console/manage/groups/GroupPage.ts

@@ -15,7 +15,7 @@ export default class GroupPage extends PageObject {
   protected createGroupEmptyStateBtn = "no-groups-in-this-realm-empty-action";
   private createGroupBtn = "openCreateGroupModal";
   protected actionDrpDwnButton = "action-dropdown";
-  private actionDrpDwnItemSearchGroup = "searchGroup";
+  private searchField = "[data-testid='group-search']";
 
   public openCreateGroupModal(emptyState: boolean) {
     if (emptyState) {
@@ -36,11 +36,32 @@ export default class GroupPage extends PageObject {
     return this;
   }
 
-  public searchGroup(groupName: string, wait: boolean = false) {
+  public searchGroup(searchValue: string, wait: boolean = false) {
-    listingPage.searchItem(groupName, wait);
+    this.search(this.searchField, searchValue, wait);
+
     return this;
   }
 
+  protected search(searchField: string, searchValue: string, wait: boolean) {
+    if (wait) {
+      const searchUrl = `/admin/realms/master/*${searchValue}*`;
+      cy.intercept(searchUrl).as("search");
+    }
+
+    cy.get(searchField + " input").clear();
+    if (searchValue) {
+      cy.get(searchField + " input").type(searchValue);
+      cy.get(searchField + " button[type='submit']").click({ force: true });
+    } else {
+      // TODO: Remove else and move clickSearchButton outside of the if
+      cy.get(searchField).type("{enter}");
+    }
+
+    if (wait) {
+      cy.wait(["@search"]);
+    }
+  }
+
   public goToGroupChildGroupsTab(groupName: string) {
     listingPage.goToItemDetails(groupName);
     cy.intercept("GET", "*/admin/realms/master/groups/*").as("get");

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

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

apps/admin-ui/cypress/support/pages/admin_console/manage/groups/group_details/GroupDetailPage.ts

@@ -154,15 +154,19 @@ export default class GroupDetailPage extends GroupPage {
     listingPage.clickItemCheckbox("default-roles-");
   }
 
+  checkDefaultRole() {
+    listingPage.itemExist("default-roles");
+  }
+
   createRoleMappingSearch() {
     listingPage.searchItemInModal("offline_access");
     listingPage.clickItemCheckbox("offline_access");
   }
 
-  checkRoles() {
+  checkRoles(roleName: string | undefined = "offline_access") {
-    listingPage.itemExist("offline_access");
+    listingPage.itemExist(roleName);
-    listingPage.searchItem("offline_access", false);
+    listingPage.searchItem(roleName, false);
-    listingPage.itemExist("offline_access");
+    listingPage.itemExist(roleName);
     listingPage.searchItem("non-existant-role", false);
     groupPage.assertNoSearchResultsMessageExist(true);
   }

apps/admin-ui/public/resources/en/groups.json

@@ -9,6 +9,7 @@
   "global": "Global",
   "local": "Local",
   "searchGroups": "Search groups",
+  "filterGroups": "Filter groups",
   "searchGroup": "Search group",
   "renameGroup": "Rename group",
   "deleteGroup": "Delete group",

apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -10,7 +10,6 @@ import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { routes } from "../../route-config";
-import { GroupBreadCrumbs } from "./GroupBreadCrumbs";
 
 export const PageBreadCrumbs = () => {
   const { t } = useTranslation();
@@ -30,19 +29,17 @@ export const PageBreadCrumbs = () => {
     }),
     elementText
   );
-  return (
+  return crumbs.length > 1 ? (
-    <>
+    <Breadcrumb>
-      {crumbs.length > 1 && (
+      {crumbs.map(({ match, breadcrumb: crumb }, i) => (
-        <Breadcrumb>
+        <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
-          {crumbs.map(({ match, breadcrumb: crumb }, i) => (
+          {crumbs.length - 1 !== i ? (
-            <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
+            <Link to={match.url}>{crumb}</Link>
-              {crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
+          ) : (
-              {crumbs.length - 1 === i && crumb}
+            crumb
-            </BreadcrumbItem>
+          )}
-          ))}
+        </BreadcrumbItem>
-        </Breadcrumb>
+      ))}
-      )}
+    </Breadcrumb>
-      <GroupBreadCrumbs />
+  ) : null;
-    </>
-  );
 };

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

@@ -108,9 +108,8 @@ export const GroupPickerDialog = ({
     ].some((group) => group === row?.name);
   };
 
-  const hasSubgroups = (group: GroupRepresentation) => {
+  const hasSubgroups = (group: GroupRepresentation) =>
-    return group.subGroups!.length !== 0;
+    group.subGroups?.length !== 0;
-  };
 
   const findSubGroup = (
     group: GroupRepresentation,

apps/admin-ui/src/components/table-toolbar/TableToolbar.tsx

@@ -54,7 +54,7 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
         <ToolbarContent>
           {inputGroupName && (
             <ToolbarItem>
-              <InputGroup>
+              <InputGroup data-testid={inputGroupName}>
                 {searchTypeComponent}
                 {inputGroupPlaceholder && (
                   <SearchInput

apps/admin-ui/src/context/auth/admin-ui-endpoint.ts

@@ -3,11 +3,11 @@ import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
 import { getAuthorizationHeaders } from "../../utils/getAuthorizationHeaders";
 import { joinPath } from "../../utils/joinPath";
 
-export async function fetchAdminUI(
+export async function fetchAdminUI<T>(
   adminClient: KeycloakAdminClient,
   endpoint: string,
   query?: Record<string, string>
-) {
+): Promise<T> {
   const accessToken = await adminClient.getAccessToken();
   const baseUrl = adminClient.baseUrl;
 

apps/admin-ui/src/groups/GroupTable.tsx

@@ -2,13 +2,7 @@ import { useState } from "react";
 import { Link } from "react-router-dom-v5-compat";
 import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
-import {
+import { SearchInput, ToolbarItem } from "@patternfly/react-core";
-  Radio,
-  SearchInput,
-  Split,
-  SplitItem,
-  ToolbarItem,
-} from "@patternfly/react-core";
 
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { useAdminClient } from "../context/auth/AdminClient";
@@ -23,33 +17,14 @@ import { toGroups } from "./routes/Groups";
 import { useAccess } from "../context/access/Access";
 import useToggle from "../utils/useToggle";
 import { DeleteGroup } from "./components/DeleteGroup";
-import { GroupToolbar, ViewType } from "./components/GroupToolbar";
+import { GroupToolbar } from "./components/GroupToolbar";
 import { MoveDialog } from "./components/MoveDialog";
-import { GroupPath } from "../components/group/GroupPath";
 
 type GroupTableProps = {
-  toggleView?: (viewType: ViewType) => void;
+  refresh: () => void;
 };
 
-type SearchType = "global" | "local";
+export const GroupTable = ({ refresh: viewRefresh }: GroupTableProps) => {
-
-type SearchGroup = GroupRepresentation & {
-  link?: string;
-};
-
-const flatten = (groups: GroupRepresentation[], id?: string): SearchGroup[] => {
-  let result: SearchGroup[] = [];
-  for (const group of groups) {
-    const link = `${id || ""}${id ? "/" : ""}${group.id}`;
-    result.push({ ...group, link });
-    if (group.subGroups) {
-      result = [...result, ...flatten(group.subGroups, link)];
-    }
-  }
-  return result;
-};
-
-export const GroupTable = ({ toggleView }: GroupTableProps) => {
   const { t } = useTranslation("groups");
 
   const { adminClient } = useAdminClient();
@@ -68,9 +43,6 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
   const navigate = useNavigate();
   const location = useLocation();
   const id = getLastId(location.pathname);
-  const [searchType, setSearchType] = useState<SearchType>(
-    id ? "local" : "global"
-  );
 
   const { hasAccess } = useAccess();
   const isManager = hasAccess("manage-users") || currentGroup()?.access?.manage;
@@ -78,19 +50,12 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
     hasAccess("query-groups", "view-users") ||
     hasAccess("manage-users", "query-groups");
 
-  const loader = async (
+  const loader = async (first?: number, max?: number) => {
-    first?: number,
-    max?: number
-  ): Promise<SearchGroup[]> => {
     const params: Record<string, string> = {
       search: search || "",
       first: first?.toString() || "",
       max: max?.toString() || "",
     };
-    if (searchType === "global" && search) {
-      const result = await fetchAdminUI(adminClient, "admin-ui-groups", params);
-      return flatten(result);
-    }
 
     let groupsData = undefined;
     if (id) {
@@ -103,10 +68,14 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
         ? group.subGroups
         : group.subGroups?.filter((g) => g.name?.includes(search));
     } else {
-      groupsData = await fetchAdminUI(adminClient, "admin-ui-groups", {
+      groupsData = await fetchAdminUI<GroupRepresentation[]>(
-        ...params,
+        adminClient,
-        global: "false",
+        "admin-ui-groups",
-      });
+        {
+          ...params,
+          global: "false",
+        }
+      );
     }
 
     if (!groupsData) {
@@ -123,12 +92,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
       <Link
         key={group.id}
         to={`${location.pathname}/${group.id}`}
-        onClick={async () => {
+        onClick={() => setSubGroups([...subGroups, group])}
-          const loadedGroup = await adminClient.groups.findOne({
-            id: group.id!,
-          });
-          setSubGroups([...subGroups, loadedGroup!]);
-        }}
       >
         {group.name}
       </Link>
@@ -139,9 +103,6 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
     setIsCreateModalOpen(!isCreateModalOpen);
   };
 
-  const Path = (group: SearchGroup) =>
-    group.link ? <GroupPath group={group} /> : undefined;
-
   return (
     <>
       <DeleteGroup
@@ -150,6 +111,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
         selectedRows={selectedRows}
         refresh={() => {
           refresh();
+          viewRefresh();
           setSelectedRows([]);
         }}
       />
@@ -166,7 +128,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
             <ToolbarItem>
               <SearchInput
                 data-testid="group-search"
-                placeholder={t("searchForGroups")}
+                placeholder={t("filterGroups")}
                 value={search}
                 onChange={setSearch}
                 onSearch={refresh}
@@ -177,48 +139,12 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
               />
             </ToolbarItem>
             <GroupToolbar
-              currentView={ViewType.Table}
-              toggleView={toggleView}
               toggleCreate={handleModalToggle}
               toggleDelete={toggleShowDelete}
               kebabDisabled={selectedRows!.length === 0}
             />
           </>
         }
-        subToolbar={
-          !!search &&
-          !id && (
-            <ToolbarItem>
-              <Split hasGutter>
-                <SplitItem>{t("searchFor")}</SplitItem>
-                <SplitItem>
-                  <Radio
-                    id="global"
-                    isChecked={searchType === "global"}
-                    onChange={() => {
-                      setSearchType("global");
-                      refresh();
-                    }}
-                    name="searchType"
-                    label={t("global")}
-                  />
-                </SplitItem>
-                <SplitItem>
-                  <Radio
-                    id="local"
-                    isChecked={searchType === "local"}
-                    onChange={() => {
-                      setSearchType("local");
-                      refresh();
-                    }}
-                    name="searchType"
-                    label={t("local")}
-                  />
-                </SplitItem>
-              </Split>
-            </ToolbarItem>
-          )
-        }
         actions={
           !isManager
             ? []
@@ -246,11 +172,6 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
             displayKey: "groups:groupName",
             cellRenderer: GroupNameCell,
           },
-          {
-            name: "path",
-            displayKey: "groups:path",
-            cellRenderer: Path,
-          },
         ]}
         emptyState={
           <ListEmptyState
@@ -268,7 +189,10 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
         <GroupsModal
           id={id}
           handleModalToggle={handleModalToggle}
-          refresh={refresh}
+          refresh={() => {
+            refresh();
+            viewRefresh();
+          }}
         />
       )}
       {move && (
@@ -277,6 +201,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
           refresh={() => {
             setMove(undefined);
             refresh();
+            viewRefresh();
           }}
           onClose={() => setMove(undefined)}
         />

apps/admin-ui/src/groups/GroupsSection.tsx

@@ -8,6 +8,11 @@ import {
   Tab,
   TabTitleText,
   Tabs,
+  Drawer,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelContent,
+  DrawerHead,
 } from "@patternfly/react-core";
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 
@@ -27,9 +32,9 @@ import helpUrls from "../help-urls";
 import { PermissionsTab } from "../components/permission-tab/PermissionTab";
 import { useAccess } from "../context/access/Access";
 import { GroupTree } from "./components/GroupTree";
-import { ViewType } from "./components/GroupToolbar";
 import { DeleteGroup } from "./components/DeleteGroup";
 import useToggle from "../utils/useToggle";
+import { GroupBreadCrumbs } from "../components/bread-crumb/GroupBreadCrumbs";
 
 import "./GroupsSection.css";
 
@@ -42,13 +47,15 @@ export default function GroupsSection() {
   const { realm } = useRealm();
 
   const [rename, setRename] = useState<string>();
-  const [viewType, setViewType] = useState<ViewType>(ViewType.Table);
   const [deleteOpen, toggleDeleteOpen] = useToggle();
 
   const navigate = useNavigate();
   const location = useLocation();
   const id = getLastId(location.pathname);
 
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(key + 1);
+
   const { hasAccess } = useAccess();
   const canViewPermissions = hasAccess(
     "manage-authorization",
@@ -93,108 +100,129 @@ export default function GroupsSection() {
         show={deleteOpen}
         toggleDialog={toggleDeleteOpen}
         selectedRows={[currentGroup()!]}
-        refresh={() => navigate(toGroups({ realm }))}
+        refresh={() => {
+          navigate(toGroups({ realm }));
+          refresh();
+        }}
       />
       {rename && (
         <GroupsModal
           id={id}
           rename={rename}
-          refresh={(group) =>
+          refresh={(group) => {
-            setSubGroups([...subGroups.slice(0, subGroups.length - 1), group!])
+            refresh();
-          }
+            setSubGroups([...subGroups.slice(0, subGroups.length - 1), group!]);
+          }}
           handleModalToggle={() => setRename(undefined)}
         />
       )}
-      <ViewHeader
-        titleKey={!id ? "groups:groups" : currentGroup()?.name!}
-        subKey={!id ? "groups:groupsDescription" : ""}
-        helpUrl={!id ? helpUrls.groupsUrl : ""}
-        divider={!id}
-        dropdownItems={
-          id && canManageGroup
-            ? [
-                <DropdownItem
-                  data-testid="renameGroupAction"
-                  key="renameGroup"
-                  onClick={() => setRename(currentGroup()?.name)}
-                >
-                  {t("renameGroup")}
-                </DropdownItem>,
-                <DropdownItem
-                  data-testid="deleteGroup"
-                  key="deleteGroup"
-                  onClick={toggleDeleteOpen}
-                >
-                  {t("deleteGroup")}
-                </DropdownItem>,
-              ]
-            : undefined
-        }
-      />
       <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
-        {subGroups.length > 0 && (
+        <Drawer isInline isExpanded key={key}>
-          <Tabs
+          <DrawerContent
-            inset={{
+            panelContent={
-              default: "insetNone",
+              <DrawerPanelContent isResizable defaultSize="80%" minSize="500px">
-              md: "insetSm",
+                <DrawerHead>
-              xl: "insetLg",
+                  <GroupBreadCrumbs />
-              "2xl": "inset2xl",
+                  <ViewHeader
-            }}
+                    titleKey={!id ? "groups:groups" : currentGroup()?.name!}
-            activeKey={activeTab}
+                    subKey={!id ? "groups:groupsDescription" : ""}
-            onSelect={(_, key) => setActiveTab(key as number)}
+                    helpUrl={!id ? helpUrls.groupsUrl : ""}
-            isBox
+                    divider={!id}
+                    dropdownItems={
+                      id && canManageGroup
+                        ? [
+                            <DropdownItem
+                              data-testid="renameGroupAction"
+                              key="renameGroup"
+                              onClick={() => setRename(currentGroup()?.name)}
+                            >
+                              {t("renameGroup")}
+                            </DropdownItem>,
+                            <DropdownItem
+                              data-testid="deleteGroup"
+                              key="deleteGroup"
+                              onClick={toggleDeleteOpen}
+                            >
+                              {t("deleteGroup")}
+                            </DropdownItem>,
+                          ]
+                        : undefined
+                    }
+                  />
+                  {subGroups.length > 0 && (
+                    <Tabs
+                      inset={{
+                        default: "insetNone",
+                        md: "insetSm",
+                        xl: "insetLg",
+                        "2xl": "inset2xl",
+                      }}
+                      activeKey={activeTab}
+                      onSelect={(_, key) => setActiveTab(key as number)}
+                      isBox
+                    >
+                      <Tab
+                        data-testid="groups"
+                        eventKey={0}
+                        title={<TabTitleText>{t("childGroups")}</TabTitleText>}
+                      >
+                        <GroupTable refresh={refresh} />
+                      </Tab>
+                      <Tab
+                        data-testid="members"
+                        eventKey={1}
+                        title={<TabTitleText>{t("members")}</TabTitleText>}
+                      >
+                        <Members />
+                      </Tab>
+                      <Tab
+                        data-testid="attributes"
+                        eventKey={2}
+                        title={
+                          <TabTitleText>{t("common:attributes")}</TabTitleText>
+                        }
+                      >
+                        <GroupAttributes />
+                      </Tab>
+                      {canManageRoles && (
+                        <Tab
+                          eventKey={3}
+                          data-testid="role-mapping-tab"
+                          title={
+                            <TabTitleText>{t("roleMapping")}</TabTitleText>
+                          }
+                        >
+                          <GroupRoleMapping
+                            id={id!}
+                            name={currentGroup()?.name!}
+                          />
+                        </Tab>
+                      )}
+                      {canViewPermissions && (
+                        <Tab
+                          eventKey={4}
+                          data-testid="permissionsTab"
+                          title={
+                            <TabTitleText>
+                              {t("common:permissions")}
+                            </TabTitleText>
+                          }
+                        >
+                          <PermissionsTab id={id} type="groups" />
+                        </Tab>
+                      )}
+                    </Tabs>
+                  )}
+                  {subGroups.length === 0 && <GroupTable refresh={refresh} />}
+                </DrawerHead>
+              </DrawerPanelContent>
+            }
           >
-            <Tab
+            <DrawerContentBody>
-              data-testid="groups"
+              <GroupTree refresh={refresh} />
-              eventKey={0}
+            </DrawerContentBody>
-              title={<TabTitleText>{t("childGroups")}</TabTitleText>}
+          </DrawerContent>
-            >
+        </Drawer>
-              <GroupTable />
-            </Tab>
-            <Tab
-              data-testid="members"
-              eventKey={1}
-              title={<TabTitleText>{t("members")}</TabTitleText>}
-            >
-              <Members />
-            </Tab>
-            <Tab
-              data-testid="attributes"
-              eventKey={2}
-              title={<TabTitleText>{t("common:attributes")}</TabTitleText>}
-            >
-              <GroupAttributes />
-            </Tab>
-            {canManageRoles && (
-              <Tab
-                eventKey={3}
-                data-testid="role-mapping-tab"
-                title={<TabTitleText>{t("roleMapping")}</TabTitleText>}
-              >
-                <GroupRoleMapping id={id!} name={currentGroup()?.name!} />
-              </Tab>
-            )}
-            {canViewPermissions && (
-              <Tab
-                eventKey={4}
-                data-testid="permissionsTab"
-                title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
-              >
-                <PermissionsTab id={id} type="groups" />
-              </Tab>
-            )}
-          </Tabs>
-        )}
-        {subGroups.length === 0 && (
-          <>
-            {viewType === ViewType.Table && (
-              <GroupTable toggleView={setViewType} />
-            )}
-            {viewType === ViewType.Tree && (
-              <GroupTree toggleView={setViewType} />
-            )}
-          </>
-        )}
       </PageSection>
     </>
   );

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

@@ -4,34 +4,22 @@ import {
   Dropdown,
   DropdownItem,
   KebabToggle,
-  ToggleGroup,
-  ToggleGroupItem,
   ToolbarItem,
 } from "@patternfly/react-core";
-import { TableIcon, DomainIcon } from "@patternfly/react-icons";
 
 import { useSubGroups } from "../SubGroupsContext";
 import { useAccess } from "../../context/access/Access";
 import useToggle from "../../utils/useToggle";
 
-export enum ViewType {
-  Table,
-  Tree,
-}
-
 type GroupToolbarProps = {
   toggleCreate: () => void;
   toggleDelete: () => void;
-  currentView?: ViewType;
-  toggleView?: (type: ViewType) => void;
   kebabDisabled: boolean;
 };
 
 export const GroupToolbar = ({
   toggleCreate,
   toggleDelete,
-  currentView,
-  toggleView,
   kebabDisabled,
 }: GroupToolbarProps) => {
   const { t } = useTranslation("groups");
@@ -45,26 +33,6 @@ export const GroupToolbar = ({
 
   return (
     <>
-      {toggleView && (
-        <ToolbarItem>
-          <ToggleGroup>
-            <ToggleGroupItem
-              icon={<TableIcon />}
-              aria-label={t("tableView")}
-              buttonId="tableView"
-              isSelected={currentView === ViewType.Table}
-              onChange={() => toggleView(ViewType.Table)}
-            />
-            <ToggleGroupItem
-              icon={<DomainIcon />}
-              aria-label={t("diagramView")}
-              buttonId="diagramView"
-              isSelected={currentView === ViewType.Tree}
-              onChange={() => toggleView(ViewType.Tree)}
-            />
-          </ToggleGroup>
-        </ToolbarItem>
-      )}
       <ToolbarItem>
         <Button
           data-testid="openCreateGroupModal"

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

@@ -1,24 +1,27 @@
 import { useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Dropdown,
   DropdownItem,
   DropdownPosition,
   KebabToggle,
+  TreeView,
   TreeViewDataItem,
 } from "@patternfly/react-core";
 
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
-import { TableToolbar } from "../../components/table-toolbar/TableToolbar";
 import useToggle from "../../utils/useToggle";
-import { CheckableTreeView } from "./CheckableTreeView";
 import { DeleteGroup } from "./DeleteGroup";
-import { GroupToolbar, ViewType } from "./GroupToolbar";
 import { GroupsModal } from "../GroupsModal";
 import { MoveDialog } from "./MoveDialog";
+import { PaginatingTableToolbar } from "../../components/table-toolbar/PaginatingTableToolbar";
+import { useSubGroups } from "../SubGroupsContext";
+import { fetchAdminUI } from "../../context/auth/admin-ui-endpoint";
+import { useRealm } from "../../context/realm-context/RealmContext";
+import { joinPath } from "../../utils/joinPath";
 
 type GroupTreeContextMenuProps = {
   group: GroupRepresentation;
@@ -31,9 +34,6 @@ const GroupTreeContextMenu = ({
 }: GroupTreeContextMenuProps) => {
   const { t } = useTranslation("groups");
 
-  const location = useLocation();
-  const navigate = useNavigate();
-
   const [isOpen, toggleOpen] = useToggle();
   const [createOpen, toggleCreateOpen] = useToggle();
   const [moveOpen, toggleMoveOpen] = useToggle();
@@ -69,12 +69,6 @@ const GroupTreeContextMenu = ({
           <DropdownItem key="move" onClick={toggleMoveOpen}>
             {t("moveTo")}
           </DropdownItem>,
-          <DropdownItem
-            key="edit"
-            onClick={() => navigate(`${location.pathname}/${group.id}`)}
-          >
-            {t("common:edit")}
-          </DropdownItem>,
           <DropdownItem key="delete" onClick={toggleDeleteOpen}>
             {t("common:delete")}
           </DropdownItem>,
@@ -84,124 +78,91 @@ const GroupTreeContextMenu = ({
   );
 };
 
-const mapGroup = (
-  group: GroupRepresentation,
-  refresh: () => void
-): TreeViewDataItem => ({
-  id: group.id,
-  name: group.name,
-  checkProps: { checked: false },
-  children:
-    group.subGroups && group.subGroups.length > 0
-      ? group.subGroups.map((g) => mapGroup(g, refresh))
-      : undefined,
-  action: <GroupTreeContextMenu group={group} refresh={refresh} />,
-});
-
-const filterGroup = (
-  group: TreeViewDataItem,
-  search: string
-): TreeViewDataItem | null => {
-  const name = group.name as string;
-  if (name.toLowerCase().includes(search)) {
-    return { ...group, defaultExpanded: true, children: undefined };
-  }
-
-  const children: TreeViewDataItem[] = [];
-  if (group.children) {
-    for (const g of group.children) {
-      const found = filterGroup(g, search);
-      if (found) children.push(found);
-    }
-    if (children.length > 0) {
-      return { ...group, defaultExpanded: true, children };
-    }
-  }
-  return null;
-};
-
-const filterGroups = (
-  groups: TreeViewDataItem[],
-  search: string
-): TreeViewDataItem[] => {
-  const result: TreeViewDataItem[] = [];
-  groups
-    .map((g) => filterGroup(g, search))
-    .forEach((g) => {
-      if (g !== null) result.push(g);
-    });
-
-  return result;
-};
-
 type GroupTreeProps = {
-  toggleView?: (viewType: ViewType) => void;
+  refresh: () => void;
 };
 
-export const GroupTree = ({ toggleView }: GroupTreeProps) => {
+export const GroupTree = ({ refresh: viewRefresh }: GroupTreeProps) => {
   const { t } = useTranslation("groups");
   const { adminClient } = useAdminClient();
+  const { realm } = useRealm();
 
   const [data, setData] = useState<TreeViewDataItem[]>();
-  const [filteredData, setFilteredData] = useState<TreeViewDataItem[]>();
+  const { subGroups, setSubGroups } = useSubGroups();
-  const [selectedRows, setSelectedRows] = useState<GroupRepresentation[]>([]);
+
-  const [showDelete, toggleShowDelete] = useToggle();
+  const [search, setSearch] = useState("");
-  const [showCreate, toggleShowCreate] = useToggle();
+  const [max, setMax] = useState(20);
+  const [first, setFirst] = useState(0);
+
   const [key, setKey] = useState(0);
-  const refresh = () => setKey(key + 1);
+  const refresh = () => {
+    setKey(key + 1);
+    viewRefresh();
+  };
+
+  const mapGroup = (
+    group: GroupRepresentation,
+    parents: GroupRepresentation[],
+    refresh: () => void
+  ): TreeViewDataItem => {
+    const groups = [...parents, group];
+    return {
+      id: group.id,
+      name: (
+        <Link
+          key={group.id}
+          to={`/${realm}/groups/${joinPath(...groups.map((g) => g.id!))}`}
+          onClick={() => setSubGroups(groups)}
+        >
+          {group.name}
+        </Link>
+      ),
+      children:
+        group.subGroups && group.subGroups.length > 0
+          ? group.subGroups.map((g) => mapGroup(g, groups, refresh))
+          : undefined,
+      action: <GroupTreeContextMenu group={group} refresh={refresh} />,
+      defaultExpanded: subGroups.map((g) => g.id).includes(group.id),
+    };
+  };
 
   useFetch(
     () =>
-      adminClient.groups.find({
+      fetchAdminUI<GroupRepresentation[]>(
-        briefRepresentation: false,
+        adminClient,
-      }),
+        "admin-ui-groups",
-    (groups) => setData(groups.map((g) => mapGroup(g, refresh))),
+        Object.assign(
-    [key]
+          {
+            first: `${first}`,
+            max: `${max + 1}`,
+          },
+          search === "" ? null : { search }
+        )
+      ),
+    (groups) => setData(groups.map((g) => mapGroup(g, [], refresh))),
+    [key, first, max, search]
   );
 
-  return (
+  return data ? (
-    <>
+    <PaginatingTableToolbar
-      <DeleteGroup
+      count={data.length || 0}
-        show={showDelete}
+      first={first}
-        toggleDialog={toggleShowDelete}
+      max={max}
-        selectedRows={selectedRows}
+      onNextClick={setFirst}
-        refresh={refresh}
+      onPreviousClick={setFirst}
-      />
+      onPerPageSelect={(first, max) => {
-      {showCreate && (
+        setFirst(first);
-        <GroupsModal handleModalToggle={toggleShowCreate} refresh={refresh} />
+        setMax(max);
+      }}
+      inputGroupName="searchForGroups"
+      inputGroupPlaceholder={t("groups:searchForGroups")}
+      inputGroupOnEnter={setSearch}
+    >
+      {data.length > 0 && (
+        <TreeView data={data} allExpanded={search.length > 0} />
       )}
-      {data ? (
+    </PaginatingTableToolbar>
-        <>
+  ) : (
-          <TableToolbar
+    <KeycloakSpinner />
-            inputGroupName="searchForGroups"
-            inputGroupPlaceholder={t("groups:searchForGroups")}
-            inputGroupOnEnter={(search) => {
-              if (search === "") {
-                setFilteredData(undefined);
-              } else {
-                setFilteredData(filterGroups(data, search));
-              }
-            }}
-            toolbarItem={
-              <GroupToolbar
-                currentView={ViewType.Tree}
-                toggleView={toggleView}
-                toggleDelete={toggleShowDelete}
-                toggleCreate={toggleShowCreate}
-                kebabDisabled={selectedRows.length === 0}
-              />
-            }
-          />
-          <CheckableTreeView
-            data={filteredData || data}
-            onSelect={(items) =>
-              setSelectedRows(items.reverse() as GroupRepresentation[])
-            }
-          />
-        </>
-      ) : (
-        <KeycloakSpinner />
-      )}
-    </>
   );
 };