sessions: added sessions type dropdown

src/sessions/SessionSection.css

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

src/sessions/SessionsSection.tsx

@@ -1,12 +1,15 @@
-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 "./SessionSection.css";
 
 const Clients = (row: UserSessionRepresentation) => {
   return (
@@ -21,7 +24,15 @@ const Clients = (row: UserSessionRepresentation) => {
 };
 
 export const SessionsSection = () => {
+  const { t } = useTranslation("sessions");
   const adminClient = useAdminClient();
+  const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
+  const [filterType, setFilterType] = useState("All session types");
+  const [key, setKey] = useState(0);
+
+  const refresh = () => {
+    setKey(new Date().getTime());
+  };
 
   const loader = async () => {
     const activeClients = await adminClient.sessions.find();
@@ -44,6 +55,35 @@ export const SessionsSection = () => {
 
     return userSessions;
   };
+  
+  const options = [
+    <SelectOption
+      key={1}
+      data-testid="all-sessions-option"
+      value={t("sessions:All session types")}
+      isPlaceholder
+    />,
+    <SelectOption
+      data-testid="regular-sso-option"
+      key={2}
+      value={t("sessions:Regular SSO")}
+    />,
+    <SelectOption
+      data-testid="offline-option"
+      key={3}
+      value={t("sessions:Offline")}
+    />,
+    <SelectOption
+      data-testid="direct-grant-option"
+      key={4}
+      value={t("sessions:Direct grant")}
+    />,
+    <SelectOption
+      data-testid="service-account-option"
+      key={5}
+      value={t("sessions:Service account")}
+    />,
+  ];
 
   return (
     <>
@@ -53,6 +93,25 @@ export const SessionsSection = () => {
           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={() => setFilterDropdownOpen(!filterDropdownOpen)}
+              toggleIcon={<FilterIcon />}
+              onSelect={(_, value) => {
+                setFilterType(value as string);
+                refresh();
+                setFilterDropdownOpen(false);
+              }}
+              selections={filterType}
+            >
+              {options}
+            </Select>
+          }
           columns={[
             {
               name: "username",