Merge pull request #786 from agagancarczyk/session-dropdown

sessions: added sessions type dropdown

src/sessions/SessionsSection.css

@@ -0,0 +1,3 @@
+.filter-session-type-select {
+  margin-right: 10px;
+}

src/sessions/SessionsSection.tsx

@@ -1,12 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { PageSection } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import {
+  PageSection,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core";
 import moment from "moment";
 import type UserSessionRepresentation from "keycloak-admin/lib/defs/userSessionRepresentation";
 
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { useAdminClient } from "../context/auth/AdminClient";
+import { FilterIcon } from "@patternfly/react-icons";
+import "./SessionsSection.css";
 
 const Clients = (row: UserSessionRepresentation) => {
   return (
@@ -21,7 +29,17 @@ const Clients = (row: UserSessionRepresentation) => {
 };
 
 export const SessionsSection = () => {
+  const { t } = useTranslation("sessions");
   const adminClient = useAdminClient();
+  const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
+  const [filterType, setFilterType] = useState(
+    t("sessionsType.allSessions").toString()
+  );
+  const [key, setKey] = useState(0);
+
+  const refresh = () => {
+    setKey(new Date().getTime());
+  };
 
   const loader = async () => {
     const activeClients = await adminClient.sessions.find();
@@ -50,9 +68,54 @@ export const SessionsSection = () => {
       <ViewHeader titleKey="sessions:title" subKey="sessions:sessionExplain" />
       <PageSection variant="light" className="pf-u-p-0">
         <KeycloakDataTable
+          key={key}
           loader={loader}
           ariaLabelKey="session:title"
           searchPlaceholderKey="sessions:searchForSession"
+          searchTypeComponent={
+            <Select
+              width={200}
+              data-testid="filter-session-type-select"
+              isOpen={filterDropdownOpen}
+              className="filter-session-type-select"
+              variant={SelectVariant.single}
+              onToggle={(isExpanded) => setFilterDropdownOpen(isExpanded)}
+              toggleIcon={<FilterIcon />}
+              onSelect={(_, value) => {
+                setFilterType(value.toString());
+                refresh();
+                setFilterDropdownOpen(false);
+              }}
+              selections={filterType}
+            >
+              <SelectOption
+                key={0}
+                data-testid="all-sessions-option"
+                value={t("sessionsType.allSessions")}
+                isPlaceholder
+              />
+              <SelectOption
+                key={1}
+                data-testid="regular-sso-option"
+                value={t("sessionsType.regularSSO")}
+              />
+              <SelectOption
+                key={2}
+                data-testid="offline-option"
+                value={t("sessionsType.offline")}
+              />
+              <SelectOption
+                key={3}
+                data-testid="direct-grant-option"
+                value={t("sessionsType.directGrant")}
+              />
+              <SelectOption
+                key={4}
+                data-testid="service-account-option"
+                value={t("sessionsType.serviceAccount")}
+              />
+            </Select>
+          }
           columns={[
             {
               name: "username",

src/sessions/messages.json

@@ -6,6 +6,13 @@
     "subject": "Subject",
     "lastAccess": "Last access",
     "startDate": "Start date",
-    "accessedClients": "Accessed clients"
+    "accessedClients": "Accessed clients",
+    "sessionsType": {
+      "allSessions": "All session types",
+      "regularSSO": "Regular SSO",
+      "offline": "Offline",
+      "directGrant": "Direct grant",
+      "serviceAccount": "Service account"
+    }
   }
 }