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

Added search bar (#3347)

Browse source
This commit is contained in:
Erik Jan de Wit 2022-09-19 11:09:16 +02:00 committed by GitHub
parent cba5b7c821
commit 6300f13aa0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/admin-ui/src/authentication/components/modals/AddStepModal.tsx
View file

@ -36,10 +36,8 @@ const AuthenticationProviderList = ({
label={provider.displayName} label={provider.displayName}
data-testid={provider.id} data-testid={provider.id}
description={provider.description} description={provider.description}
onChange={(_val, event) => { onChange={() => {
const { id } = event.currentTarget; setValue(provider);
const value = list.find((p) => p.id === id);
setValue(value);
}} }}
/> />
))} ))}
@ -65,6 +63,7 @@ export const AddStepModal = ({ name, type, onSelect }: AddStepModalProps) => {
useState<AuthenticationProviderRepresentation[]>(); useState<AuthenticationProviderRepresentation[]>();
const [max, setMax] = useState(10); const [max, setMax] = useState(10);
const [first, setFirst] = useState(0); const [first, setFirst] = useState(0);
const [search, setSearch] = useState("");
const localeSort = useLocaleSort(); const localeSort = useLocaleSort();
useFetch( useFetch(
@ -93,11 +92,13 @@ export const AddStepModal = ({ name, type, onSelect }: AddStepModalProps) => {
const page = useMemo( const page = useMemo(
() => () =>
localeSort(providers ?? [], mapByKey("displayName")).slice( localeSort(providers ?? [], mapByKey("displayName"))
first, .filter(
first + max + 1 (p) =>
), p.displayName?.includes(search) || p.description?.includes(search)
[providers, first, max] )
.slice(first, first + max + 1),
[providers, search, first, max]
); );
return ( return (
@ -139,6 +140,9 @@ export const AddStepModal = ({ name, type, onSelect }: AddStepModalProps) => {
setFirst(first); setFirst(first);
setMax(max); setMax(max);
}} }}
inputGroupName="search"
inputGroupPlaceholder={t("common:search")}
inputGroupOnEnter={setSearch}
> >
<AuthenticationProviderList list={page} setValue={setValue} /> <AuthenticationProviderList list={page} setValue={setValue} />
</PaginatingTableToolbar> </PaginatingTableToolbar>