From 2ea9dee1fac6902be86d731b2b43702ce65cce6e Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 9 Dec 2024 15:19:49 +0100
Subject: [PATCH] Fix(admin-ui): key status filtering issue in KeysListTab
 (#34721) (#35133)

Support customer reports that keys with 'Active' set to 'off' still appear in the Active keys list in the Admin console under Realms settings -> Keys -> Keys list. The root cause was identified as the filtering logic, which does not apply status-based filtering for the first item in FILTER_OPTIONS ('ACTIVE'). This commit corrects the filtering logic to properly exclude keys based on the 'Active' status selection.

Closes #34675


(cherry picked from commit 46f7fb529020dea911762602a7ed0c053e0bec6a)

Signed-off-by: Charley <charley.geoffroy@protonmail.com>
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
Co-authored-by: Charley <71822392+charley04310@users.noreply.github.com>
---
 .../src/realm-settings/keys/KeysListTab.tsx   | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx b/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
index 6ed910d7ecc..2c621b80175 100644
--- a/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
@@ -14,7 +14,7 @@ import {
 } from "@patternfly/react-core";
 import { FilterIcon } from "@patternfly/react-icons";
 import { cellWidth } from "@patternfly/react-table";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAdminClient } from "../../admin-client";
@@ -30,6 +30,7 @@ import { toKeysTab } from "../routes/KeysTab";
 import "../realm-settings-section.css";
 
 const FILTER_OPTIONS = ["ACTIVE", "PASSIVE", "DISABLED"] as const;
+
 type FilterType = (typeof FILTER_OPTIONS)[number];
 
 type KeyData = KeyMetadataRepresentation & {
@@ -94,8 +95,14 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
 
   const { realm } = useRealm();
 
-  const [keyData, setKeyData] = useState<KeyData[]>();
-  const [filteredKeyData, setFilteredKeyData] = useState<KeyData[]>();
+  const [keyData, setKeyData] = useState<KeyData[]>([]);
+
+  const [filter, setFilter] = useState<string>(FILTER_OPTIONS[0]);
+
+  const filteredKeyData = useMemo(
+    () => keyData?.filter(({ status }) => status === filter),
+    [keyData, filter],
+  );
 
   useFetch(
     async () => {
@@ -139,19 +146,11 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
       <KeycloakDataTable
         isNotCompact
         className="kc-keys-list"
-        loader={filteredKeyData || keyData}
+        loader={filteredKeyData}
         ariaLabelKey="keysList"
         searchPlaceholderKey="searchKey"
         searchTypeComponent={
-          <SelectFilter
-            onFilter={(filterType) =>
-              setFilteredKeyData(
-                filterType !== FILTER_OPTIONS[0]
-                  ? keyData!.filter(({ status }) => status === filterType)
-                  : undefined,
-              )
-            }
-          />
+          <SelectFilter onFilter={(filterType) => setFilter(filterType)} />
         }
         columns={[
           {