libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

fix issue by introducing toolbar for fedrated user (#1417)

Browse source 
* fix issue by introducing toolbar for fedrated user

fixes: #1416

* code review
This commit is contained in:
Erik Jan de Wit 2021-10-27 11:19:13 +02:00 committed by GitHub
parent 56eb774dd3
commit d0c6bc4cc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 102 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
src/user/UsersSection.tsx
View file

@ -4,23 +4,29 @@ import {
ButtonVariant,
Dropdown,
DropdownItem,
EmptyState,
InputGroup,
KebabToggle,
Label,
PageSection,
Text,
TextContent,
TextInput,
Toolbar,
ToolbarContent,
ToolbarItem,
Tooltip,
} from "@patternfly/react-core";
import {
ExclamationCircleIcon,
InfoCircleIcon,
SearchIcon,
WarningTriangleIcon,
} from "@patternfly/react-icons";
import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHistory, useRouteMatch } from "react-router-dom";
import { Link, useHistory } from "react-router-dom";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@ -32,6 +38,7 @@ import { emptyFormatter } from "../util";
import { toUser } from "./routes/User";
import "./user-section.css";
import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
import { toAddUser } from "./routes/AddUser";
type BruteUser = UserRepresentation & {
brute?: Record<string, object>;
@ -43,8 +50,8 @@ export const UsersSection = () => {
const { addAlert, addError } = useAlerts();
const { realm: realmName } = useRealm();
const history = useHistory();
const { url } = useRouteMatch();
const [listUsers, setListUsers] = useState(false);
const [searchUser, setSearchUser] = useState<string>();
const [realm, setRealm] = useState<RealmRepresentation>();
const [kebabOpen, setKebabOpen] = useState(false);
const [selectedRows, setSelectedRows] = useState<UserRepresentation[]>([]);
@ -87,7 +94,7 @@ export const UsersSection = () => {
max: max!,
};
const searchParam = search || "";
const searchParam = search || searchUser || "";
if (searchParam) {
params.search = searchParam;
}
@ -186,7 +193,60 @@ export const UsersSection = () => {
);
};
const goToCreate = () => history.push(`${url}/add-user`);
const goToCreate = () => history.push(toAddUser({ realm: realmName }));
const toolbar = (
<>
<ToolbarItem>
<Button data-testid="add-user" onClick={goToCreate}>
{t("addUser")}
</Button>
</ToolbarItem>
{!realm?.bruteForceProtected ? (
<ToolbarItem>
<Button
variant={ButtonVariant.plain}
onClick={toggleDeleteDialog}
isDisabled={selectedRows.length === 0}
>
{t("deleteUser")}
</Button>
</ToolbarItem>
) : (
<ToolbarItem>
<Dropdown
toggle={<KebabToggle onToggle={(open) => setKebabOpen(open)} />}
isOpen={kebabOpen}
isPlain
dropdownItems={[
<DropdownItem
key="deleteUser"
component="button"
isDisabled={selectedRows.length === 0}
onClick={() => {
toggleDeleteDialog();
setKebabOpen(false);
}}
>
{t("deleteUser")}
</DropdownItem>,
<DropdownItem
key="unlock"
component="button"
onClick={() => {
toggleUnlockUsersDialog();
setKebabOpen(false);
}}
>
{t("unlockAllUsers")}
</DropdownItem>,
]}
/>
</ToolbarItem>
)}
</>
);
return (
<>
@ -208,9 +268,43 @@ export const UsersSection = () => {
onSelect={(rows) => setSelectedRows([...rows])}
emptyState={
!listUsers ? (
<TextContent className="kc-search-users-text">
<Text>{t("searchForUserDescription")}</Text>
</TextContent>
<>
<Toolbar>
<ToolbarContent>
<ToolbarItem>
<InputGroup>
<TextInput
name="search-input"
type="search"
aria-label={t("search")}
placeholder={t("users:searchForUser")}
onChange={(value) => {
setSearchUser(value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
refresh();
}
}}
/>
<Button
variant={ButtonVariant.control}
aria-label={t("common:search")}
onClick={refresh}
>
<SearchIcon />
</Button>
</InputGroup>
</ToolbarItem>
{toolbar}
</ToolbarContent>
</Toolbar>
<EmptyState data-testid="empty-state" variant="large">
<TextContent className="kc-search-users-text">
<Text>{t("searchForUserDescription")}</Text>
</TextContent>
</EmptyState>
</>
) : (
<ListEmptyState
message={t("noUsersFound")}
@ -220,61 +314,7 @@ export const UsersSection = () => {
/>
)
}
toolbarItem={
<>
<ToolbarItem>
<Button data-testid="add-user" onClick={goToCreate}>
{t("addUser")}
</Button>
</ToolbarItem>
{!realm?.bruteForceProtected && (
<ToolbarItem>
<Button
variant={ButtonVariant.plain}
onClick={toggleDeleteDialog}
isDisabled={selectedRows.length === 0}
>
{t("deleteUser")}
</Button>
</ToolbarItem>
)}
{realm?.bruteForceProtected && (
<ToolbarItem>
<Dropdown
toggle={
<KebabToggle onToggle={() => setKebabOpen(!kebabOpen)} />
}
isOpen={kebabOpen}
isPlain
dropdownItems={[
<DropdownItem
key="deleteUser"
component="button"
isDisabled={selectedRows.length === 0}
onClick={() => {
toggleDeleteDialog();
setKebabOpen(false);
}}
>
{t("deleteUser")}
</DropdownItem>,
<DropdownItem
key="unlock"
component="button"
onClick={() => {
toggleUnlockUsersDialog();
setKebabOpen(false);
}}
>
{t("unlockAllUsers")}
</DropdownItem>,
]}
/>
</ToolbarItem>
)}
</>
}
toolbarItem={toolbar}
actions={[
{
title: t("common:delete"),