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

moved filter to it's own component (#20286)

Browse source 
fixes: #19999
This commit is contained in:
Erik Jan de Wit 2023-05-26 14:06:45 +02:00 committed by GitHub
parent a58a9a89d6
commit 00df57df3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
js/apps/admin-ui/src/sessions/SessionsSection.tsx
View file

@ -18,11 +18,48 @@ import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls"; import helpUrls from "../help-urls";
import { RevocationModal } from "./RevocationModal"; import { RevocationModal } from "./RevocationModal";
import SessionsTable from "./SessionsTable"; import SessionsTable from "./SessionsTable";
import useToggle from "../utils/useToggle";
import "./SessionsSection.css"; import "./SessionsSection.css";
type FilterType = "ALL" | "REGULAR" | "OFFLINE"; type FilterType = "ALL" | "REGULAR" | "OFFLINE";
type SessionFilterProps = {
filterType: FilterType;
onChange: (filterType: FilterType) => void;
};
const SessionFilter = ({ filterType, onChange }: SessionFilterProps) => {
const { t } = useTranslation("sessions");
const [open, toggle] = useToggle();
return (
<Select
data-testid="filter-session-type-select"
isOpen={open}
onToggle={toggle}
toggleIcon={<FilterIcon />}
onSelect={(_, value) => {
const filter = value as FilterType;
onChange(filter);
toggle();
}}
selections={filterType}
>
<SelectOption data-testid="all-sessions-option" value="ALL">
{t("sessionsType.allSessions")}
</SelectOption>
<SelectOption data-testid="regular-sso-option" value="REGULAR">
{t("sessionsType.regularSSO")}
</SelectOption>
<SelectOption data-testid="offline-option" value="OFFLINE">
{t("sessionsType.offline")}
</SelectOption>
</Select>
);
};
export default function SessionsSection() { export default function SessionsSection() {
const { t } = useTranslation("sessions"); const { t } = useTranslation("sessions");
@ -32,7 +69,6 @@ export default function SessionsSection() {
const { realm } = useRealm(); const { realm } = useRealm();
const [revocationModalOpen, setRevocationModalOpen] = useState(false); const [revocationModalOpen, setRevocationModalOpen] = useState(false);
const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
const [filterType, setFilterType] = useState<FilterType>("ALL"); const [filterType, setFilterType] = useState<FilterType>("ALL");
const [noSessions, setNoSessions] = useState(false); const [noSessions, setNoSessions] = useState(false);
@ -111,28 +147,13 @@ export default function SessionsSection() {
loader={loader} loader={loader}
isSearching={filterType !== "ALL"} isSearching={filterType !== "ALL"}
filter={ filter={
<Select <SessionFilter
data-testid="filter-session-type-select" filterType={filterType}
isOpen={filterDropdownOpen} onChange={(type) => {
onToggle={(value) => setFilterDropdownOpen(value)} setFilterType(type);
toggleIcon={<FilterIcon />}
onSelect={(_, value) => {
setFilterType(value as FilterType);
setFilterDropdownOpen(false);
refresh(); refresh();
}} }}
selections={filterType} />
>
<SelectOption data-testid="all-sessions-option" value="ALL">
{t("sessionsType.allSessions")}
</SelectOption>
<SelectOption data-testid="regular-sso-option" value="REGULAR">
{t("sessionsType.regularSSO")}
</SelectOption>
<SelectOption data-testid="offline-option" value="OFFLINE">
{t("sessionsType.offline")}
</SelectOption>
</Select>
} }
/> />
</PageSection> </PageSection>