libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 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"> <BreadcrumbItem key="home">
<Link to={`/${realm}/groups`}>{t("groups")}</Link> <Link to={`/${realm}/groups`}>{t("groups")}</Link>
</BreadcrumbItem> </BreadcrumbItem>
{subGroups.map((group, i) => ( {subGroups.map((group, i) => {
<BreadcrumbItem key={i} isActive={subGroups.length - 1 === i}> const isLastGroup = i === subGroups.length - 1;
{subGroups.length - 1 !== i && ( return (
<Link <BreadcrumbItem key={group.id} isActive={isLastGroup}>
to={location.pathname.substr( {!isLastGroup && (
0, <Link
location.pathname.indexOf(group.id!) + group.id!.length to={location.pathname.substr(
)} 0,
onClick={() => remove(group)} location.pathname.indexOf(group.id!) + group.id!.length
> )}
{group.name} onClick={() => remove(group)}
</Link> >
)} {group.name}
{subGroups.length - 1 === i && <>{t("groups:groupDetails")}</>} </Link>
</BreadcrumbItem> )}
))} {isLastGroup &&
(group.id === "search"
? group.name
: t("groups:groupDetails"))}
</BreadcrumbItem>
);
})}
</Breadcrumb> </Breadcrumb>
)} )}
</> </>

125
src/groups/SearchGroups.tsx
View file

@ -6,13 +6,13 @@ import {
ButtonVariant, ButtonVariant,
Chip, Chip,
ChipGroup, ChipGroup,
Form,
InputGroup, InputGroup,
PageSection, PageSection,
PageSectionVariants, PageSectionVariants,
Text, Stack,
TextContent, StackItem,
TextInput, TextInput,
ToolbarItem,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons"; 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 { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { GroupPath } from "../components/group/GroupPath"; import { GroupPath } from "../components/group/GroupPath";
import { useSubGroups } from "./SubGroupsContext"; import { useSubGroups } from "./SubGroupsContext";
import { ViewHeader } from "../components/view-header/ViewHeader";
type SearchGroup = GroupRepresentation & { type SearchGroup = GroupRepresentation & {
link?: string; link?: string;
@ -40,7 +41,10 @@ export const SearchGroups = () => {
const refresh = () => setKey(new Date().getTime()); const refresh = () => setKey(new Date().getTime());
const { setSubGroups } = useSubGroups(); const { setSubGroups } = useSubGroups();
useEffect(() => setSubGroups([{ name: t("searchGroups") }]), []); useEffect(
() => setSubGroups([{ name: t("searchGroups"), id: "search" }]),
[]
);
const deleteTerm = (id: string) => { const deleteTerm = (id: string) => {
const index = searchTerms.indexOf(id); const index = searchTerms.indexOf(id);
@ -50,21 +54,26 @@ export const SearchGroups = () => {
}; };
const addTerm = () => { const addTerm = () => {
setSearchTerms([...searchTerms, searchTerm]); if (searchTerm !== "") {
setSearchTerm(""); setSearchTerms([...searchTerms, searchTerm]);
refresh(); setSearchTerm("");
refresh();
}
}; };
const GroupNameCell = (group: SearchGroup) => { const GroupNameCell = (group: SearchGroup) => (
setSubGroups([{ name: t("searchGroups"), id: "search" }, group]); <>
return ( <Link
<> key={group.id}
<Link key={group.id} to={`/${realm}/groups/search/${group.link}`}> to={`/${realm}/groups/search/${group.link}`}
{group.name} onClick={() =>
</Link> setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
</> }
); >
}; {group.name}
</Link>
</>
);
const flatten = ( const flatten = (
groups: GroupRepresentation[], groups: GroupRepresentation[],
@ -106,46 +115,52 @@ export const SearchGroups = () => {
return ( return (
<> <>
<PageSection variant={PageSectionVariants.light}> <ViewHeader titleKey="groups:searchGroups" />
<TextContent className="pf-u-mr-sm"> <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
<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>
<KeycloakDataTable <KeycloakDataTable
key={key} 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" ariaLabelKey="groups:groups"
isPaginated isPaginated
loader={loader} loader={loader}