Combine tree view and list for groups (#3401)
This commit is contained in:
parent
daf8d6c3f0
commit
11d8461620
13 changed files with 295 additions and 376 deletions
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
"global": "Global",
|
||||
"local": "Local",
|
||||
"searchGroups": "Search groups",
|
||||
"filterGroups": "Filter groups",
|
||||
"searchGroup": "Search group",
|
||||
"renameGroup": "Rename group",
|
||||
"deleteGroup": "Delete group",
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -54,7 +54,7 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
|
|||
<ToolbarContent>
|
||||
{inputGroupName && (
|
||||
<ToolbarItem>
|
||||
<InputGroup>
|
||||
<InputGroup data-testid={inputGroupName}>
|
||||
{searchTypeComponent}
|
||||
{inputGroupPlaceholder && (
|
||||
<SearchInput
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue