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

some small fixes to the realm selector (#74)

Browse source
This commit is contained in:
Erik Jan de Wit 2020-09-08 19:20:29 +02:00 committed by GitHub
parent 082682e6d3
commit 8fa720438e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 644 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/PageNav.tsx
View file

@ -1,14 +1,26 @@
import React from "react"; import React, { useContext } from "react";
import { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core"; import { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core";
import { RealmSelector } from "./components/realm-selector/RealmSelector"; import { RealmSelector } from "./components/realm-selector/RealmSelector";
import { DataLoader } from "./components/data-loader/DataLoader";
import { HttpClientContext } from "./http-service/HttpClientContext";
import { Realm } from "./models/Realm";
export const PageNav: React.FunctionComponent = () => { export const PageNav: React.FunctionComponent = () => {
const httpClient = useContext(HttpClientContext)!;
const realmLoader = async () => {
const response = await httpClient.doGet<Realm[]>("/admin/realms");
return response.data;
};
return ( return (
<PageSidebar <PageSidebar
nav={ nav={
<Nav> <Nav>
<NavList> <NavList>
<RealmSelector /> <DataLoader loader={realmLoader}>
{(realmList) => (
<RealmSelector realm="Master" realmList={realmList || []} />
)}
</DataLoader>
<NavItem id="default-link1" to="/default-link1" itemId={0}> <NavItem id="default-link1" to="/default-link1" itemId={0}>
Link 1 Link 1
</NavItem> </NavItem>

29
src/components/realm-selector/RealmSelector.test.tsx
View file

@ -1,36 +1,23 @@
import React from "react"; import React from "react";
import { Button, AlertVariant } from "@patternfly/react-core";
import { mount } from "enzyme"; import { mount } from "enzyme";
import EnzymeToJson from "enzyme-to-json"; import { act } from "@testing-library/react";
import { act } from "react-dom/test-utils";
import { AlertPanel } from "../alert/AlertPanel"; import { AlertPanel } from "../alert/AlertPanel";
import { useAlerts } from "../alert/Alerts"; import { useAlerts } from "../alert/Alerts";
import { RealmSelector } from "./RealmSelector"; import { RealmSelector } from "./RealmSelector";
const WithButton = () => { it("renders realm selector", async () => {
const [add, alerts, hide] = useAlerts(); const wrapper = mount(
return ( <RealmSelector realm="test" realmList={[{ id: "321", realm: "another" }]} />
<>
<AlertPanel alerts={alerts} onCloseAlert={hide} />
<Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
</>
); );
};
it("renders realm selector", () => { expect(wrapper.text()).toBe("test");
const tree = mount(<RealmSelector />);
const button = tree.find("button");
expect(button).not.toBeNull();
const expandButton = wrapper.find("button");
act(() => { act(() => {
button!.simulate("click"); expandButton!.simulate("click");
}); });
expect(EnzymeToJson(tree)).toMatchSnapshot();
act(() => { expect(wrapper.html()).toMatchSnapshot();
jest.runAllTimers();
});
expect(EnzymeToJson(tree)).toMatchSnapshot();
}); });

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

@ -11,33 +11,24 @@ import {
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import style from "./realm-selector.module.css"; import style from "./realm-selector.module.css";
import { HttpClientContext } from "../../http-service/HttpClientContext";
export const RealmSelector = () => { type RealmSelectorProps = {
realm: string;
realmList: Realm[];
};
export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const history = useHistory(); const history = useHistory();
const httpClient = useContext(HttpClientContext); const [currentRealm, setCurrentRealm] = useState(realm);
const [realms, setRealms] = useState([] as Realm[]);
const [currentRealm, setCurrentRealm] = useState("Master");
const getRealms = async () => { const dropdownItems = realmList.map((r) => (
return await httpClient
?.doGet("/admin/realms")
.then((r) => r.data as Realm[]);
};
useEffect(() => {
getRealms().then((result) => {
setRealms(result || []);
});
}, []);
const dropdownItems = realms.map((r) => (
<DropdownItem <DropdownItem
component="a"
href={"/#/realms/" + r.id}
key={r.id} key={r.id}
onClick={() => setCurrentRealm(r.realm)} onClick={() => {
setCurrentRealm(r.realm);
setOpen(!open);
}}
> >
{r.realm.charAt(0).toUpperCase() + r.realm.slice(1)} {r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
</DropdownItem> </DropdownItem>

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

@ -1,587 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders realm selector 1`] = ` exports[`renders realm selector 1`] = `"<div id=\\"realm-select\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"1\\"><button id=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">test</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\"></path></svg></span></button><ul aria-labelledby=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"menuitem\\"><a tabindex=\\"-1\\" aria-disabled=\\"false\\" class=\\"pf-c-dropdown__menu-item\\">Another</a></li><hr class=\\"pf-c-divider\\" index=\\"1\\"><li role=\\"menuitem\\"><div tabindex=\\"-1\\" class=\\"pf-c-dropdown__menu-item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary pf-m-block\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"2\\">Create Realm</button></div></li></ul></div>"`;
<RealmSelector>
<Dropdown
dropdownItems={
Array [
<Divider />,
<DropdownItem
component="div"
>
<Button
isBlock={true}
onClick={[Function]}
>
Create Realm
</Button>
</DropdownItem>,
]
}
id="realm-select"
isOpen={false}
toggle={
<DropdownToggle
id="realm-select-toggle"
onToggle={[Function]}
>
Master
</DropdownToggle>
}
>
<DropdownWithContext
autoFocus={true}
className=""
direction="down"
dropdownItems={
Array [
<Divider />,
<DropdownItem
component="div"
>
<Button
isBlock={true}
onClick={[Function]}
>
Create Realm
</Button>
</DropdownItem>,
]
}
id="realm-select"
isGrouped={false}
isOpen={false}
isPlain={false}
menuAppendTo="inline"
onSelect={[Function]}
position="left"
toggle={
<DropdownToggle
id="realm-select-toggle"
onToggle={[Function]}
>
Master
</DropdownToggle>
}
>
<div
className="pf-c-dropdown"
data-ouia-component-id={0}
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe={true}
id="realm-select"
>
<DropdownToggle
aria-haspopup={true}
getMenuRef={[Function]}
id="realm-select-toggle"
isOpen={false}
isPlain={false}
key=".0"
onEnter={[Function]}
onToggle={[Function]}
parentRef={
Object {
"current": <div
class="pf-c-dropdown pf-m-expanded"
data-ouia-component-id="1"
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe="true"
id="realm-select"
>
<button
aria-expanded="true"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="realm-select-toggle"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
class="pf-c-dropdown__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</span>
</button>
<ul
aria-labelledby="realm-select-toggle"
class="pf-c-dropdown__menu"
role="menu"
>
<hr
class="pf-c-divider"
index="0"
/>
<li
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary pf-m-block"
data-ouia-component-id="2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
Create Realm
</button>
</div>
</li>
</ul>
</div>,
}
}
>
<Toggle
aria-haspopup={true}
bubbleEvent={false}
className=""
getMenuRef={[Function]}
id="realm-select-toggle"
isActive={false}
isDisabled={false}
isOpen={false}
isPlain={false}
isPrimary={false}
isSplitButton={false}
onEnter={[Function]}
onToggle={[Function]}
parentRef={
Object {
"current": <div
class="pf-c-dropdown pf-m-expanded"
data-ouia-component-id="1"
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe="true"
id="realm-select"
>
<button
aria-expanded="true"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="realm-select-toggle"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
class="pf-c-dropdown__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</span>
</button>
<ul
aria-labelledby="realm-select-toggle"
class="pf-c-dropdown__menu"
role="menu"
>
<hr
class="pf-c-divider"
index="0"
/>
<li
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary pf-m-block"
data-ouia-component-id="2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
Create Realm
</button>
</div>
</li>
</ul>
</div>,
}
}
>
<button
aria-expanded={false}
aria-haspopup={true}
className="pf-c-dropdown__toggle"
disabled={false}
id="realm-select-toggle"
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
className="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
className="pf-c-dropdown__toggle-icon"
>
<CaretDownIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</CaretDownIcon>
</span>
</button>
</Toggle>
</DropdownToggle>
</div>
</DropdownWithContext>
</Dropdown>
</RealmSelector>
`;
exports[`renders realm selector 2`] = `
<RealmSelector>
<Dropdown
dropdownItems={
Array [
<Divider />,
<DropdownItem
component="div"
>
<Button
isBlock={true}
onClick={[Function]}
>
Create Realm
</Button>
</DropdownItem>,
]
}
id="realm-select"
isOpen={false}
toggle={
<DropdownToggle
id="realm-select-toggle"
onToggle={[Function]}
>
Master
</DropdownToggle>
}
>
<DropdownWithContext
autoFocus={true}
className=""
direction="down"
dropdownItems={
Array [
<Divider />,
<DropdownItem
component="div"
>
<Button
isBlock={true}
onClick={[Function]}
>
Create Realm
</Button>
</DropdownItem>,
]
}
id="realm-select"
isGrouped={false}
isOpen={false}
isPlain={false}
menuAppendTo="inline"
onSelect={[Function]}
position="left"
toggle={
<DropdownToggle
id="realm-select-toggle"
onToggle={[Function]}
>
Master
</DropdownToggle>
}
>
<div
className="pf-c-dropdown"
data-ouia-component-id={0}
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe={true}
id="realm-select"
>
<DropdownToggle
aria-haspopup={true}
getMenuRef={[Function]}
id="realm-select-toggle"
isOpen={false}
isPlain={false}
key=".0"
onEnter={[Function]}
onToggle={[Function]}
parentRef={
Object {
"current": <div
class="pf-c-dropdown pf-m-expanded"
data-ouia-component-id="1"
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe="true"
id="realm-select"
>
<button
aria-expanded="true"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="realm-select-toggle"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
class="pf-c-dropdown__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</span>
</button>
<ul
aria-labelledby="realm-select-toggle"
class="pf-c-dropdown__menu"
role="menu"
>
<hr
class="pf-c-divider"
index="0"
/>
<li
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary pf-m-block"
data-ouia-component-id="2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
Create Realm
</button>
</div>
</li>
</ul>
</div>,
}
}
>
<Toggle
aria-haspopup={true}
bubbleEvent={false}
className=""
getMenuRef={[Function]}
id="realm-select-toggle"
isActive={false}
isDisabled={false}
isOpen={false}
isPlain={false}
isPrimary={false}
isSplitButton={false}
onEnter={[Function]}
onToggle={[Function]}
parentRef={
Object {
"current": <div
class="pf-c-dropdown pf-m-expanded"
data-ouia-component-id="1"
data-ouia-component-type="PF4/Dropdown"
data-ouia-safe="true"
id="realm-select"
>
<button
aria-expanded="true"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="realm-select-toggle"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
class="pf-c-dropdown__toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</span>
</button>
<ul
aria-labelledby="realm-select-toggle"
class="pf-c-dropdown__menu"
role="menu"
>
<hr
class="pf-c-divider"
index="0"
/>
<li
role="menuitem"
>
<div
class="pf-c-dropdown__menu-item"
tabindex="-1"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary pf-m-block"
data-ouia-component-id="2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
Create Realm
</button>
</div>
</li>
</ul>
</div>,
}
}
>
<button
aria-expanded={false}
aria-haspopup={true}
className="pf-c-dropdown__toggle"
disabled={false}
id="realm-select-toggle"
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
className="pf-c-dropdown__toggle-text"
>
Master
</span>
<span
className="pf-c-dropdown__toggle-icon"
>
<CaretDownIcon
color="currentColor"
noVerticalAlign={false}
size="sm"
>
<svg
aria-hidden={true}
aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</CaretDownIcon>
</span>
</button>
</Toggle>
</DropdownToggle>
</div>
</DropdownWithContext>
</Dropdown>
</RealmSelector>
`;

30
src/components/scroll-form/ScrollForm.tsx
View file

@ -10,29 +10,29 @@ type ScrollFormProps = {
}; };
export const ScrollForm = ({ sections, children }: ScrollFormProps) => { export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
const getCurrentSection = () => {
for (let sectionName of sections) {
const section = document.getElementById(sectionName)!;
const startAt = section.offsetTop;
const endAt = startAt + section.offsetHeight;
const currentPosition =
document.documentElement.scrollTop || document.body.scrollTop;
const isInView = currentPosition >= startAt && currentPosition < endAt;
if (isInView) {
return sectionName;
}
}
};
const [active, setActive] = useState(sections[0]); const [active, setActive] = useState(sections[0]);
useEffect(() => { useEffect(() => {
const getCurrentSection = () => {
for (let sectionName of sections) {
const section = document.getElementById(sectionName)!;
const startAt = section.offsetTop;
const endAt = startAt + section.offsetHeight;
const currentPosition =
document.documentElement.scrollTop || document.body.scrollTop;
const isInView = currentPosition >= startAt && currentPosition < endAt;
if (isInView) {
return sectionName;
}
}
};
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
const active = getCurrentSection(); const active = getCurrentSection();
if (active) { if (active) {
setActive(active); setActive(active);
} }
}); });
}, [active]); }, [active, sections]);
const Nav = () => ( const Nav = () => (
<div className={style.sticky}> <div className={style.sticky}>