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

always show realm add button and filter on keystroke (#105)

Browse source 
* always show realm add button and
filter on keystroke

* fixed formatting

* fixes within the realm selector dropdown

* format

* fixed test

Co-authored-by: Sarah Rambacher <srambach@redhat.com>
This commit is contained in:
Erik Jan de Wit 2020-09-23 10:19:46 +02:00 committed by GitHub
parent dfe3f31eb4
commit bb3598930f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/realm-selector/RealmSelector.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useContext } from "react";
import React, { useState, useContext, useEffect } from "react";
import { useHistory } from "react-router-dom";
import {
@ -34,14 +34,19 @@ export const RealmSelector = ({ realmList }: RealmSelectorProps) => {
realmName.charAt(0).toUpperCase() + realmName.slice(1);
const RealmText = ({ value }: { value: string }) => (
<Split>
<Split className="keycloak__realm_selector__list-item-split">
<SplitItem isFilled>{toUpperCase(value)}</SplitItem>
<SplitItem>{value === realm && <CheckIcon />}</SplitItem>
</Split>
);
const AddRealm = () => (
<Button component="div" isBlock onClick={() => history.push("/add-realm")}>
const AddRealm = ({ className }: { className?: string }) => (
<Button
component="div"
isBlock
onClick={() => history.push("/add-realm")}
className={className}
>
Create Realm
</Button>
);
@ -56,6 +61,10 @@ export const RealmSelector = ({ realmList }: RealmSelectorProps) => {
setFilteredItems(filtered || []);
};
useEffect(() => {
onFilter();
}, [search]);
const dropdownItems = realmList.map((r) => (
<DropdownItem
key={r.id}

4
src/components/realm-selector/__tests__/__snapshots__/RealmSelector.test.tsx.snap
View file

@ -147,7 +147,7 @@ exports[`renders realm selector 1`] = `
tabindex="-1"
>
<div
class="pf-l-split"
class="pf-l-split keycloak__realm_selector__list-item-split"
>
<div
class="pf-l-split__item pf-m-fill"
@ -255,7 +255,7 @@ exports[`renders realm selector 1`] = `
tabindex="-1"
>
<div
class="pf-l-split"
class="pf-l-split keycloak__realm_selector__list-item-split"
>
<div
class="pf-l-split__item pf-m-fill"

12
src/components/realm-selector/realm-selector.css
View file

@ -26,6 +26,18 @@
width: 100%;
}
.keycloak__realm_selector__list-item-split {
width: 100%;
text-align: left;
}
/* the last child is the realm selector button, and this is the only way to style the li around it */
.keycloak__realm_selector__context_selector li:last-child {
position: sticky;
bottom: 0;
background-color: var(--pf-c-context-selector__menu--BackgroundColor);
}
.keycloak__page_nav__nav_item__realm-selector {
margin-top: var(--pf-c-nav__link--PaddingTop);
padding-right: var(--pf-c-nav__link--PaddingRight);