Skip to content

Commit

Permalink
Clean up realm selector code (#4346)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonkoops
jonkoops authored Feb 7, 2023
1 parent e77b53d commit 6cb730c
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 116 deletions.
4 changes: 2 additions & 2 deletions apps/admin-ui/cypress/support/pages/admin-ui/SidebarPage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ export default class SidebarPage extends CommonElements {

goToCreateRealm() {
this.waitForPageLoad();
cy.findByTestId(this.realmsDrpDwn).click({ force: true });
cy.findByTestId(this.createRealmBtn).click({ force: true });
cy.findByTestId(this.realmsDrpDwn).click();
cy.findByTestId(this.createRealmBtn).click();
this.waitForPageLoad();

return this;
Expand Down
226 changes: 112 additions & 114 deletions apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,60 @@ import {
SplitItem,
} from "@patternfly/react-core";
import { CheckIcon } from "@patternfly/react-icons";
import { Fragment, ReactElement, useMemo, useState } from "react";
import { Fragment, ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { Link, useLocation, useNavigate } from "react-router-dom";

import { useRealm } from "../../context/realm-context/RealmContext";
import { useRealms } from "../../context/RealmsContext";
import { useWhoAmI } from "../../context/whoami/WhoAmI";
import { toDashboard } from "../../dashboard/routes/Dashboard";
import { toAddRealm } from "../../realm/routes/AddRealm";
import { useUpdateEffect } from "../../utils/useUpdateEffect";
import { RecentUsed } from "./recent-used";

import "./realm-selector.css";

const AddRealm = () => {
const { realm } = useRealm();
const { t } = useTranslation("common");

return (
<Button
data-testid="add-realm"
component={(props) => <Link {...props} to={toAddRealm({ realm })} />}
isBlock
>
{t("createRealm")}
</Button>
);
};

type RealmTextProps = {
value: string;
};

const RealmText = ({ value }: RealmTextProps) => {
const { realm } = useRealm();

return (
<Split className="keycloak__realm_selector__list-item-split">
<SplitItem isFilled>{value}</SplitItem>
<SplitItem>{value === realm && <CheckIcon />}</SplitItem>
</Split>
);
};

export const RealmSelector = () => {
const { realm } = useRealm();
const { realms, refresh } = useRealms();
const { whoAmI } = useWhoAmI();
const [open, setOpen] = useState(false);
const [search, setSearch] = useState("");
const navigate = useNavigate();
const location = useLocation();
const { t } = useTranslation("common");

const recentUsed = new RecentUsed();
const all = recentUsed.used
.filter((r) => r !== realm)
Expand All @@ -47,134 +80,99 @@ export const RealmSelector = () => {
})
);

const filteredItems = useMemo(() => {
if (search === "") {
return undefined;
}
const filteredItems =
search === ""
? undefined
: all.filter((r) => r.name.toLowerCase().includes(search.toLowerCase()));

return all.filter((r) =>
r.name.toLowerCase().includes(search.toLowerCase())
);
}, [search, all]);

const RealmText = ({ value }: { value: string }) => (
<Split className="keycloak__realm_selector__list-item-split">
<SplitItem isFilled>{value}</SplitItem>
<SplitItem>{value === realm && <CheckIcon />}</SplitItem>
</Split>
);

const AddRealm = () => (
<Button
data-testid="add-realm"
component="div"
isBlock
onClick={() => {
navigate(toAddRealm({ realm }));
setOpen(!open);
}}
>
{t("createRealm")}
</Button>
);

const selectRealm = (realm: string) => {
setOpen(!open);
navigate(toDashboard({ realm }));
};
useUpdateEffect(() => setOpen(false), [location]);

const dropdownItems =
realms.length !== 0
? realms.map((r) => (
<DropdownItem
key={`realm-dropdown-item-${r.realm}`}
onClick={() => {
selectRealm(r.realm!);
}}
>
<RealmText value={r.realm!} />
</DropdownItem>
component={
<Link to={toDashboard({ realm: r.realm! })}>
<RealmText value={r.realm!} />
</Link>
}
/>
))
: [
<DropdownItem key="load">
Loading <Spinner size="sm" />
</DropdownItem>,
];

const addRealmComponent = (
<Fragment key="Add Realm">
{whoAmI.canCreateRealm() && (
<>
<Divider key="divider" />
<DropdownItem key="add">
return realms.length > 5 ? (
<ContextSelector
data-testid="realmSelector"
toggleText={realm}
isOpen={open}
screenReaderLabel={realm}
onToggle={() => setOpen(!open)}
onSelect={(_, r) => {
let element: ReactElement;
if (Array.isArray(r)) {
element = (r as ReactElement[])[0];
} else {
element = r as ReactElement;
}
const value = element.props.value;
if (value) {
navigate(toDashboard({ realm: value }));
}
}}
searchInputValue={search}
onSearchInputChange={(value) => setSearch(value)}
className="keycloak__realm_selector__context_selector"
footer={
whoAmI.canCreateRealm() && (
<ContextSelectorItem key="add">
<AddRealm />
</DropdownItem>
</>
)}
</Fragment>
);

return (
<>
{realms.length > 5 && (
<ContextSelector
data-testid="realmSelector"
toggleText={realm}
isOpen={open}
screenReaderLabel={realm}
onToggle={() => setOpen(!open)}
onSelect={(_, r) => {
let element: ReactElement;
if (Array.isArray(r)) {
element = (r as ReactElement[])[0];
} else {
element = r as ReactElement;
}
const value = element.props.value;
if (value) {
selectRealm(value);
}
</ContextSelectorItem>
)
}
>
{(filteredItems || all).map((item) => (
<ContextSelectorItem key={item.name}>
<RealmText value={item.name} />{" "}
{item.used && <Label>{t("recent")}</Label>}
</ContextSelectorItem>
))}
</ContextSelector>
) : (
<Dropdown
id="realm-select"
data-testid="realmSelector"
className="keycloak__realm_selector__dropdown"
isOpen={open}
toggle={
<DropdownToggle
data-testid="realmSelectorToggle"
onToggle={() => {
if (realms.length === 0) refresh();
setOpen(!open);
}}
searchInputValue={search}
onSearchInputChange={(value) => setSearch(value)}
className="keycloak__realm_selector__context_selector"
footer={
whoAmI.canCreateRealm() && (
<ContextSelectorItem key="add">
<AddRealm />
</ContextSelectorItem>
)
}
className="keycloak__realm_selector_dropdown__toggle"
>
{(filteredItems || all).map((item) => (
<ContextSelectorItem key={item.name}>
<RealmText value={item.name} />{" "}
{item.used && <Label>{t("recent")}</Label>}
</ContextSelectorItem>
))}
</ContextSelector>
)}
{realms.length <= 5 && (
<Dropdown
id="realm-select"
data-testid="realmSelector"
className="keycloak__realm_selector__dropdown"
isOpen={open}
toggle={
<DropdownToggle
data-testid="realmSelectorToggle"
onToggle={() => {
if (realms.length === 0) refresh();
setOpen(!open);
}}
className="keycloak__realm_selector_dropdown__toggle"
>
{realm}
</DropdownToggle>
}
dropdownItems={[...dropdownItems, addRealmComponent]}
/>
)}
</>
{realm}
</DropdownToggle>
}
dropdownItems={[
...dropdownItems,
<Fragment key="add-realm">
{whoAmI.canCreateRealm() && (
<>
<Divider key="divider" />
<DropdownItem key="add">
<AddRealm />
</DropdownItem>
</>
)}
</Fragment>,
]}
/>
);
};

0 comments on commit 6cb730c

Please sign in to comment.