Add filter capability to keys section in realm settings (#666)

* rebase

* fix empty state text

cypress/integration/realm_settings_test.spec.ts

@@ -30,7 +30,17 @@ describe("Realm settings", () => {
     await new AdminClient().deleteRealm(realmName);
   });
 
-  it("Go to general tab", () => {
+  const goToKeys = () => {
+    const keysUrl = "/auth/admin/realms/master/keys";
+    cy.intercept(keysUrl).as("keysFetch");
+    cy.getId("rs-keys-tab").click();
+    cy.wait(10000);
+    cy.getId("rs-keys-list-tab").click();
+
+    return this;
+  };
+
+  it("Go to general tab", function () {
     sidebarPage.goToRealmSettings();
     realmSettingsPage.toggleSwitch(realmSettingsPage.managedAccessSwitch);
     realmSettingsPage.save(realmSettingsPage.generalSaveBtn);
@@ -134,21 +144,18 @@ describe("Realm settings", () => {
 
     cy.getId("option-aes-generated").click();
     realmSettingsPage.enterConsoleDisplayName("test_aes-generated");
-    cy.wait(200);
     realmSettingsPage.addProvider();
 
     realmSettingsPage.toggleAddProviderDropdown();
 
     cy.getId("option-ecdsa-generated").click();
     realmSettingsPage.enterConsoleDisplayName("test_ecdsa-generated");
-    cy.wait(200);
     realmSettingsPage.addProvider();
 
     realmSettingsPage.toggleAddProviderDropdown();
 
     cy.getId("option-hmac-generated").click();
     realmSettingsPage.enterConsoleDisplayName("test_hmac-generated");
-    cy.wait(200);
     realmSettingsPage.addProvider();
 
     realmSettingsPage.toggleAddProviderDropdown();
@@ -157,4 +164,11 @@ describe("Realm settings", () => {
     realmSettingsPage.enterConsoleDisplayName("test_rsa-generated");
     realmSettingsPage.addProvider();
   });
+
+  it("Test keys", function () {
+    sidebarPage.goToRealmSettings();
+    goToKeys();
+
+    realmSettingsPage.testSelectFilter();
+  });
 });

cypress/support/pages/admin_console/manage/realm_settings/RealmSettingsPage.ts

@@ -32,6 +32,9 @@ export default class RealmSettingsPage {
   enableEvents = "eventsEnabled";
   eventsUserSave = "save-user";
   eventTypeColumn = 'tbody > tr > [data-label="Event saved type"]';
+  filterSelectMenu = ".kc-filter-type-select";
+  passiveKeysOption = "passive-keys-option";
+  disabledKeysOption = "disabled-keys-option";
 
   selectLoginThemeType(themeType: string) {
     const themesUrl = "/auth/admin/realms/master/themes";
@@ -89,6 +92,13 @@ export default class RealmSettingsPage {
     return this;
   }
 
+  testSelectFilter() {
+    cy.get(this.filterSelectMenu).first().click();
+    cy.getId(this.passiveKeysOption).click();
+    cy.get(this.filterSelectMenu).first().click();
+    cy.getId(this.disabledKeysOption).click();
+  }
+
   toggleSwitch(switchName: string) {
     cy.getId(switchName).click({ force: true });
 

src/realm-settings/KeysListTab.tsx

@@ -1,7 +1,14 @@
 import React, { useState } from "react";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, ButtonVariant, PageSection } from "@patternfly/react-core";
+import {
+  Button,
+  ButtonVariant,
+  PageSection,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core";
 import { cellWidth } from "@patternfly/react-table";
 
 import type { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
@@ -14,6 +21,7 @@ import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 
 import "./RealmSettingsSection.css";
+import { FilterIcon } from "@patternfly/react-icons";
 
 type KeyData = KeyMetadataRepresentation & {
   provider?: string;
@@ -28,8 +36,15 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
   const history = useHistory();
   const { url } = useRouteMatch();
 
+  const [key, setKey] = useState(0);
   const [publicKey, setPublicKey] = useState("");
   const [certificate, setCertificate] = useState("");
+  const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
+  const [filterType, setFilterType] = useState("Active keys");
+
+  const refresh = () => {
+    setKey(new Date().getTime());
+  };
 
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
@@ -38,6 +53,7 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
     const keysMetaData = await adminClient.realms.getKeys({
       realm: realmName,
     });
+
     const keys = keysMetaData.keys;
 
     return keys?.map((key) => {
@@ -48,6 +64,54 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
     })!;
   };
 
+  const activeKeysLoader = async () => {
+    const keysMetaData = await adminClient.realms.getKeys({
+      realm: realmName,
+    });
+    const keys = keysMetaData.keys;
+
+    const activeKeysCopy = keys!.filter((i) => i.status === "ACTIVE");
+
+    return activeKeysCopy?.map((key) => {
+      const provider = realmComponents!.find(
+        (component: ComponentRepresentation) => component.id === key.providerId
+      );
+      return { ...key, provider: provider?.name } as KeyData;
+    })!;
+  };
+
+  const passiveKeysLoader = async () => {
+    const keysMetaData = await adminClient.realms.getKeys({
+      realm: realmName,
+    });
+    const keys = keysMetaData.keys;
+
+    const passiveKeys = keys!.filter((i) => i.status === "PASSIVE");
+
+    return passiveKeys?.map((key) => {
+      const provider = realmComponents!.find(
+        (component: ComponentRepresentation) => component.id === key.providerId
+      );
+      return { ...key, provider: provider?.name } as KeyData;
+    })!;
+  };
+
+  const disabledKeysLoader = async () => {
+    const keysMetaData = await adminClient.realms.getKeys({
+      realm: realmName,
+    });
+    const keys = keysMetaData.keys;
+
+    const disabledKeys = keys!.filter((i) => i.status === "DISABLED");
+
+    return disabledKeys?.map((key) => {
+      const provider = realmComponents!.find(
+        (component: ComponentRepresentation) => component.id === key.providerId
+      );
+      return { ...key, provider: provider?.name } as KeyData;
+    })!;
+  };
+
   const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
     titleKey: t("realm-settings:publicKeys").slice(0, -1),
     messageKey: publicKey,
@@ -116,6 +180,25 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
     }
   };
 
+  const options = [
+    <SelectOption
+      key={1}
+      data-testid="active-keys-option"
+      value={t("realm-settings:activeKeys")}
+      isPlaceholder
+    />,
+    <SelectOption
+      data-testid="passive-keys-option"
+      key={2}
+      value={t("realm-settings:passiveKeys")}
+    />,
+    <SelectOption
+      data-testid="disabled-keys-option"
+      key={3}
+      value={t("realm-settings:disabledKeys")}
+    />,
+  ];
+
   return (
     <>
       <PageSection variant="light" padding={{ default: "noPadding" }}>
@@ -123,9 +206,37 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
         <CertificateDialog />
         <KeycloakDataTable
           isNotCompact={true}
-          loader={loader}
+          key={key}
+          loader={
+            filterType === "Active keys"
+              ? activeKeysLoader
+              : filterType === "Passive keys"
+              ? passiveKeysLoader
+              : filterType === "Disabled keys"
+              ? disabledKeysLoader
+              : loader
+          }
           ariaLabelKey="realm-settings:keysList"
           searchPlaceholderKey="realm-settings:searchKey"
+          searchTypeComponent={
+            <Select
+              width={300}
+              data-testid="filter-type-select"
+              isOpen={filterDropdownOpen}
+              className="kc-filter-type-select"
+              variant={SelectVariant.single}
+              onToggle={() => setFilterDropdownOpen(!filterDropdownOpen)}
+              toggleIcon={<FilterIcon />}
+              onSelect={(_, value) => {
+                setFilterType(value as string);
+                refresh();
+                setFilterDropdownOpen(false);
+              }}
+              selections={filterType}
+            >
+              {options}
+            </Select>
+          }
           canSelectAll
           columns={[
             {
@@ -144,25 +255,31 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
               name: "kid",
               displayKey: "realm-settings:kid",
               cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(10)],
             },
             {
               name: "provider",
               displayKey: "realm-settings:provider",
               cellRenderer: ProviderRenderer,
               cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(10)],
             },
             {
               name: "publicKeys",
               displayKey: "realm-settings:publicKeys",
               cellRenderer: ButtonRenderer,
               cellFormatters: [],
+              transforms: [cellWidth(20)],
             },
           ]}
           emptyState={
             <ListEmptyState
               hasIcon={true}
-              message={t("noRoles")}
+              message={t("realm-settings:noKeys")}
-              instructions={t("noRolesInstructions")}
+              instructions={
+                t(`realm-settings:noKeysDescription`) +
+                `${filterType.toLocaleLowerCase()}.`
+              }
               primaryActionText={t("createRole")}
               onPrimaryAction={goToCreate}
             />

src/realm-settings/RealmSettingsSection.tsx

@@ -279,6 +279,7 @@ export const RealmSettingsSection = () => {
                   <Tab
                     id="keysList"
                     eventKey={0}
+                    data-testid="rs-keys-list-tab"
                     title={<TabTitleText>{t("keysList")}</TabTitleText>}
                   >
                     <KeysListTab realmComponents={realmComponents} />

src/realm-settings/messages.json

@@ -75,6 +75,11 @@
     "providerDescription": "Provider description",
     "addProvider": "Add provider",
     "publicKeys": "Public keys",
+    "activeKeys": "Active keys",
+    "passiveKeys": "Passive keys",
+    "disabledKeys": "Disabled keys",
+    "noKeys": "No keys",
+    "noKeysDescription": "You haven't created any ",
     "certificate": "Certificate",
     "userRegistration": "User registration",
     "userRegistrationHelpText": "Enable/disable the registration page. A link for registration will show on login page too.",