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

fixed breadcrumb for search and seach box distance (#998)

Browse source 
Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
Erik Jan de Wit 2021-08-16 14:35:39 +02:00 committed by GitHub
parent 7865a2b0b1
commit b5e2fb802c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/bread-crumb/GroupBreadCrumbs.tsx
View file

@ -29,22 +29,28 @@ export const GroupBreadCrumbs = () => {
<BreadcrumbItem key="home">
<Link to={`/${realm}/groups`}>{t("groups")}</Link>
</BreadcrumbItem>
{subGroups.map((group, i) => (
<BreadcrumbItem key={i} isActive={subGroups.length - 1 === i}>
{subGroups.length - 1 !== i && (
<Link
to={location.pathname.substr(
0,
location.pathname.indexOf(group.id!) + group.id!.length
)}
onClick={() => remove(group)}
>
{group.name}
</Link>
)}
{subGroups.length - 1 === i && <>{t("groups:groupDetails")}</>}
</BreadcrumbItem>
))}
{subGroups.map((group, i) => {
const isLastGroup = i === subGroups.length - 1;
return (
<BreadcrumbItem key={group.id} isActive={isLastGroup}>
{!isLastGroup && (
<Link
to={location.pathname.substr(
0,
location.pathname.indexOf(group.id!) + group.id!.length
)}
onClick={() => remove(group)}
>
{group.name}
</Link>
)}
{isLastGroup &&
(group.id === "search"
? group.name
: t("groups:groupDetails"))}
</BreadcrumbItem>
);
})}
</Breadcrumb>
)}
</>

125
src/groups/SearchGroups.tsx
View file

@ -6,13 +6,13 @@ import {
ButtonVariant,
Chip,
ChipGroup,
Form,
InputGroup,
PageSection,
PageSectionVariants,
Text,
TextContent,
Stack,
StackItem,
TextInput,
ToolbarItem,
} from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons";
@ -23,6 +23,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { GroupPath } from "../components/group/GroupPath";
import { useSubGroups } from "./SubGroupsContext";
import { ViewHeader } from "../components/view-header/ViewHeader";
type SearchGroup = GroupRepresentation & {
link?: string;
@ -40,7 +41,10 @@ export const SearchGroups = () => {
const refresh = () => setKey(new Date().getTime());
const { setSubGroups } = useSubGroups();
useEffect(() => setSubGroups([{ name: t("searchGroups") }]), []);
useEffect(
() => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
[]
);
const deleteTerm = (id: string) => {
const index = searchTerms.indexOf(id);
@ -50,21 +54,26 @@ export const SearchGroups = () => {
};
const addTerm = () => {
setSearchTerms([...searchTerms, searchTerm]);
setSearchTerm("");
refresh();
if (searchTerm !== "") {
setSearchTerms([...searchTerms, searchTerm]);
setSearchTerm("");
refresh();
}
};
const GroupNameCell = (group: SearchGroup) => {
setSubGroups([{ name: t("searchGroups"), id: "search" }, group]);
return (
<>
<Link key={group.id} to={`/${realm}/groups/search/${group.link}`}>
{group.name}
</Link>
</>
);
};
const GroupNameCell = (group: SearchGroup) => (
<>
<Link
key={group.id}
to={`/${realm}/groups/search/${group.link}`}
onClick={() =>
setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
}
>
{group.name}
</Link>
</>
);
const flatten = (
groups: GroupRepresentation[],
@ -106,46 +115,52 @@ export const SearchGroups = () => {
return (
<>
<PageSection variant={PageSectionVariants.light}>
<TextContent className="pf-u-mr-sm">
<Text component="h1">{t("searchForGroups")}</Text>
</TextContent>
<Form
className="pf-u-mt-sm keycloak__form"
onSubmit={(e) => {
e.preventDefault();
addTerm();
}}
>
<InputGroup>
<TextInput
name="search"
data-testid="group-search"
type="search"
aria-label={t("search")}
placeholder={t("searchGroups")}
value={searchTerm}
onChange={(value) => setSearchTerm(value)}
/>
<Button
data-testid="search-button"
variant={ButtonVariant.control}
aria-label={t("search")}
onClick={addTerm}
>
<SearchIcon />
</Button>
</InputGroup>
<ChipGroup>
{searchTerms.map((term) => (
<Chip key={term} onClick={() => deleteTerm(term)}>
{term}
</Chip>
))}
</ChipGroup>
</Form>
<ViewHeader titleKey="groups:searchGroups" />
<PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
<KeycloakDataTable
key={key}
isSearching
toolbarItem={
<ToolbarItem>
<Stack>
<StackItem className="pf-u-mb-sm">
<InputGroup>
<TextInput
name="search"
data-testid="group-search"
type="search"
aria-label={t("search")}
placeholder={t("searchGroups")}
value={searchTerm}
onChange={(value) => setSearchTerm(value)}
onKeyDown={(event) => {
if (event.key === "Enter") {
addTerm();
}
}}
/>
<Button
data-testid="search-button"
variant={ButtonVariant.control}
aria-label={t("search")}
onClick={addTerm}
>
<SearchIcon />
</Button>
</InputGroup>
</StackItem>
<StackItem>
<ChipGroup>
{searchTerms.map((term) => (
<Chip key={term} onClick={() => deleteTerm(term)}>
{term}
</Chip>
))}
</ChipGroup>
</StackItem>
</Stack>
</ToolbarItem>
}
ariaLabelKey="groups:groups"
isPaginated
loader={loader}