mirrors/keycloak
1
0
Fork 0
mirror of https://github.com/keycloak/keycloak.git synced 2026-01-25 16:42:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
1 changed files with 42 additions and 21 deletions
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 { RevocationModal } from "./RevocationModal";
import SessionsTable from "./SessionsTable";
import useToggle from "../utils/useToggle";
import "./SessionsSection.css";
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() {
const { t } = useTranslation("sessions");
@@ -32,7 +69,6 @@ export default function SessionsSection() {
const { realm } = useRealm();
const [revocationModalOpen, setRevocationModalOpen] = useState(false);
const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
const [filterType, setFilterType] = useState<FilterType>("ALL");
const [noSessions, setNoSessions] = useState(false);
@@ -111,28 +147,13 @@ export default function SessionsSection() {
loader={loader}
isSearching={filterType !== "ALL"}
filter={
<Select
data-testid="filter-session-type-select"
isOpen={filterDropdownOpen}
onToggle={(value) => setFilterDropdownOpen(value)}
toggleIcon={<FilterIcon />}
onSelect={(_, value) => {
setFilterType(value as FilterType);
setFilterDropdownOpen(false);
<SessionFilter
filterType={filterType}
onChange={(type) => {
setFilterType(type);
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>