libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Combine tree view and list for groups (#3401)

Browse source
This commit is contained in:
Erik Jan de Wit 2022-10-10 17:03:27 +02:00 committed by GitHub
parent daf8d6c3f0
commit 11d8461620
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 295 additions and 376 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/admin-ui/cypress/e2e/group_test.spec.ts
View file

@ -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])
.goToGroupChildGroupsTab(predefinedGroups[1])
.searchGlobal(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();
});

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

@ -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) {
listingPage.searchItem(groupName, wait);
public searchGroup(searchValue: string, wait: boolean = false) {
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");

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

@ -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;
}

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

@ -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() {
listingPage.itemExist("offline_access");
listingPage.searchItem("offline_access", false);
listingPage.itemExist("offline_access");
checkRoles(roleName: string | undefined = "offline_access") {
listingPage.itemExist(roleName);
listingPage.searchItem(roleName, false);
listingPage.itemExist(roleName);
listingPage.searchItem("non-existant-role", false);
groupPage.assertNoSearchResultsMessageExist(true);
}

1
apps/admin-ui/public/resources/en/groups.json
View file

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

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

@ -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 (
<>
{crumbs.length > 1 && (
return crumbs.length > 1 ? (
<Breadcrumb>
{crumbs.map(({ match, breadcrumb: crumb }, i) => (
<BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
{crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
{crumbs.length - 1 === i && crumb}
{crumbs.length - 1 !== i ? (
<Link to={match.url}>{crumb}</Link>
) : (
crumb
)}
</BreadcrumbItem>
))}
</Breadcrumb>
)}
<GroupBreadCrumbs />
</>
);
) : null;
};

5
apps/admin-ui/src/components/group/GroupPickerDialog.tsx
View file

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

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

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

4
apps/admin-ui/src/context/auth/admin-ui-endpoint.ts
View file

@ -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;

113
apps/admin-ui/src/groups/GroupTable.tsx
View file

@ -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 {
Radio,
SearchInput,
Split,
SplitItem,
ToolbarItem,
} from "@patternfly/react-core";
import { SearchInput, 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";
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) => {
export const GroupTable = ({ refresh: viewRefresh }: 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 (
first?: number,
max?: number
): Promise<SearchGroup[]> => {
const loader = async (first?: number, max?: number) => {
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[]>(
adminClient,
"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 () => {
const loadedGroup = await adminClient.groups.findOne({
id: group.id!,
});
setSubGroups([...subGroups, loadedGroup!]);
}}
onClick={() => setSubGroups([...subGroups, group])}
>
{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)}
/>

72
apps/admin-ui/src/groups/GroupsSection.tsx
View file

@ -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,18 +100,29 @@ 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) =>
setSubGroups([...subGroups.slice(0, subGroups.length - 1), group!])
}
refresh={(group) => {
refresh();
setSubGroups([...subGroups.slice(0, subGroups.length - 1), group!]);
}}
handleModalToggle={() => setRename(undefined)}
/>
)}
<PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
<Drawer isInline isExpanded key={key}>
<DrawerContent
panelContent={
<DrawerPanelContent isResizable defaultSize="80%" minSize="500px">
<DrawerHead>
<GroupBreadCrumbs />
<ViewHeader
titleKey={!id ? "groups:groups" : currentGroup()?.name!}
subKey={!id ? "groups:groupsDescription" : ""}
@ -131,7 +149,6 @@ export default function GroupsSection() {
: undefined
}
/>
<PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
{subGroups.length > 0 && (
<Tabs
inset={{
@ -149,7 +166,7 @@ export default function GroupsSection() {
eventKey={0}
title={<TabTitleText>{t("childGroups")}</TabTitleText>}
>
<GroupTable />
<GroupTable refresh={refresh} />
</Tab>
<Tab
data-testid="members"
@ -161,7 +178,9 @@ export default function GroupsSection() {
<Tab
data-testid="attributes"
eventKey={2}
title={<TabTitleText>{t("common:attributes")}</TabTitleText>}
title={
<TabTitleText>{t("common:attributes")}</TabTitleText>
}
>
<GroupAttributes />
</Tab>
@ -169,32 +188,41 @@ export default function GroupsSection() {
<Tab
eventKey={3}
data-testid="role-mapping-tab"
title={<TabTitleText>{t("roleMapping")}</TabTitleText>}
title={
<TabTitleText>{t("roleMapping")}</TabTitleText>
}
>
<GroupRoleMapping id={id!} name={currentGroup()?.name!} />
<GroupRoleMapping
id={id!}
name={currentGroup()?.name!}
/>
</Tab>
)}
{canViewPermissions && (
<Tab
eventKey={4}
data-testid="permissionsTab"
title={<TabTitleText>{t("common:permissions")}</TabTitleText>}
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} />
)}
</>
)}
{subGroups.length === 0 && <GroupTable refresh={refresh} />}
</DrawerHead>
</DrawerPanelContent>
}
>
<DrawerContentBody>
<GroupTree refresh={refresh} />
</DrawerContentBody>
</DrawerContent>
</Drawer>
</PageSection>
</>
);

32
apps/admin-ui/src/groups/components/GroupToolbar.tsx
View file

@ -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"

191
apps/admin-ui/src/groups/components/GroupTree.tsx
View file

@ -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 [selectedRows, setSelectedRows] = useState<GroupRepresentation[]>([]);
const [showDelete, toggleShowDelete] = useToggle();
const [showCreate, toggleShowCreate] = useToggle();
const { subGroups, setSubGroups } = useSubGroups();
const [search, setSearch] = useState("");
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({
briefRepresentation: false,
}),
(groups) => setData(groups.map((g) => mapGroup(g, refresh))),
[key]
fetchAdminUI<GroupRepresentation[]>(
adminClient,
"admin-ui-groups",
Object.assign(
{
first: `${first}`,
max: `${max + 1}`,
},
search === "" ? null : { search }
)
),
(groups) => setData(groups.map((g) => mapGroup(g, [], refresh))),
[key, first, max, search]
);
return (
<>
<DeleteGroup
show={showDelete}
toggleDialog={toggleShowDelete}
selectedRows={selectedRows}
refresh={refresh}
/>
{showCreate && (
<GroupsModal handleModalToggle={toggleShowCreate} refresh={refresh} />
)}
{data ? (
<>
<TableToolbar
return data ? (
<PaginatingTableToolbar
count={data.length || 0}
first={first}
max={max}
onNextClick={setFirst}
onPreviousClick={setFirst}
onPerPageSelect={(first, max) => {
setFirst(first);
setMax(max);
}}
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[])
}
/>
</>
inputGroupOnEnter={setSearch}
>
{data.length > 0 && (
<TreeView data={data} allExpanded={search.length > 0} />
)}
</PaginatingTableToolbar>
) : (
<KeycloakSpinner />
)}
</>
);
};