Realm settings(keys): Adds keys list to Realm settings keys tab (#555)

* wip keys

* keys

* keys

* adds keys table to realm settings

* rebase and fix conflicts

* rebase and fix conflicts

* remove unused declarations

* fix lint

* fix groups test locally

* address PR feedback from Stan

src/common-messages.json

@@ -11,6 +11,7 @@
     "revert": "Revert",
     "cancel": "Cancel",
     "continue": "Continue",
+    "close": "Close",
     "delete": "Delete",
     "remove": "Remove",
     "search": "Search",

src/components/confirm-dialog/ConfirmDialog.tsx

@@ -35,6 +35,7 @@ export interface ConfirmDialogModalProps extends ConfirmDialogProps {
 export type ConfirmDialogProps = {
   titleKey: string;
   messageKey?: string;
+  noCancelButton?: boolean;
   cancelButtonLabel?: string;
   continueButtonLabel?: string;
   continueButtonVariant?: ButtonVariant;
@@ -47,6 +48,7 @@ export type ConfirmDialogProps = {
 export const ConfirmDialogModal = ({
   titleKey,
   messageKey,
+  noCancelButton,
   cancelButtonLabel,
   continueButtonLabel,
   continueButtonVariant,
@@ -77,17 +79,19 @@ export const ConfirmDialogModal = ({
         >
           {t(continueButtonLabel || "common:continue")}
         </Button>,
-        <Button
+        !noCancelButton && (
-          id="modal-cancel"
+          <Button
-          key="cancel"
+            id="modal-cancel"
-          variant={ButtonVariant.link}
+            key="cancel"
-          onClick={() => {
+            variant={ButtonVariant.link}
-            if (onCancel) onCancel();
+            onClick={() => {
-            toggleDialog();
+              if (onCancel) onCancel();
-          }}
+              toggleDialog();
-        >
+            }}
-          {t(cancelButtonLabel || "common:cancel")}
+          >
-        </Button>,
+            {t(cancelButtonLabel || "common:cancel")}
+          </Button>
+        ),
       ]}
     >
       {!messageKey && children}

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -229,11 +229,13 @@ export function KeycloakDataTable<T>({
       return node.map(getNodeText).join("");
     }
     if (typeof node === "object" && node) {
-      return getNodeText(
+      if ((node as TitleCell).title) {
-        isValidElement((node as TitleCell).title)
+        return getNodeText(
-          ? (node as TitleCell).title.props.children
+          isValidElement((node as TitleCell).title)
-          : (node as JSX.Element).props.children
+            ? (node as TitleCell).title.props.children
-      );
+            : (node as JSX.Element).props.children
+        );
+      }
     }
     return "";
   };

src/groups/GroupTable.tsx

@@ -56,10 +56,21 @@ export const GroupTable = () => {
     return response ? response.length : 0;
   };
 
-  const loader = async () => {
+  const loader = async (first?: number, max?: number, search?: string) => {
+    const params: { [name: string]: string | number } = {
+      first: first!,
+      max: max!,
+    };
+
+    const searchParam = search || "";
+
+    if (searchParam) {
+      params.search = searchParam;
+    }
+
     const groupsData = id
-      ? (await adminClient.groups.findOne({ id })).subGroups
+      ? (await adminClient.groups.findOne({ id, ...params })).subGroups
-      : await adminClient.groups.find();
+      : await adminClient.groups.find(params);
 
     if (groupsData) {
       const memberPromises = groupsData.map((group) => getMembers(group.id!));
@@ -121,6 +132,7 @@ export const GroupTable = () => {
     <>
       <KeycloakDataTable
         key={key}
+        isPaginated
         onSelect={(rows) => setSelectedRows([...rows])}
         canSelectAll={false}
         loader={loader}

src/realm-settings/KeysListTab.tsx

@@ -0,0 +1,180 @@
+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 { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { emptyFormatter } from "../util";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+
+import "./RealmSettingsSection.css";
+import { cellWidth } from "@patternfly/react-table";
+
+type KeyData = KeyMetadataRepresentation & {
+  provider?: string;
+};
+
+type KeysTabInnerProps = {
+  keys: KeyData[];
+};
+
+export const KeysTabInner = ({ keys }: KeysTabInnerProps) => {
+  const { t } = useTranslation("roles");
+  const history = useHistory();
+  const { url } = useRouteMatch();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+
+  const [publicKey, setPublicKey] = useState("");
+  const [certificate, setCertificate] = useState("");
+
+  const loader = async () => {
+    return keys;
+  };
+
+  React.useEffect(() => {
+    refresh();
+  }, [keys]);
+
+  const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
+    titleKey: t("realm-settings:publicKeys").slice(0, -1),
+    messageKey: publicKey,
+    continueButtonLabel: "common:close",
+    continueButtonVariant: ButtonVariant.primary,
+    noCancelButton: true,
+    onConfirm: async () => {},
+  });
+
+  const [toggleCertificateDialog, CertificateDialog] = useConfirmDialog({
+    titleKey: t("realm-settings:certificate"),
+    messageKey: certificate,
+    continueButtonLabel: "common:close",
+    continueButtonVariant: ButtonVariant.primary,
+    noCancelButton: true,
+    onConfirm: async () => {},
+  });
+
+  const goToCreate = () => history.push(`${url}/add-role`);
+
+  const ProviderRenderer = ({ provider }: KeyData) => {
+    return <>{provider}</>;
+  };
+
+  const renderPublicKeyButton = (publicKey: string) => {
+    return (
+      <Button
+        onClick={() => {
+          togglePublicKeyDialog();
+          setPublicKey(publicKey!);
+        }}
+        variant="secondary"
+        id="kc-public-key"
+      >
+        {t("realm-settings:publicKeys").slice(0, -1)}
+      </Button>
+    );
+  };
+
+  const ButtonRenderer = ({ provider, publicKey, certificate }: KeyData) => {
+    if (provider === "ecdsa-generated") {
+      return <>{renderPublicKeyButton(publicKey!)}</>;
+    }
+    if (provider === "rsa-generated" || provider === "fallback-RS256") {
+      return (
+        <>
+          <div>
+            {renderPublicKeyButton(publicKey!)}
+            <Button
+              onClick={() => {
+                toggleCertificateDialog();
+                setCertificate(certificate!);
+              }}
+              variant="secondary"
+              id="kc-certificate"
+            >
+              {t("realm-settings:certificate")}
+            </Button>
+          </div>
+        </>
+      );
+    }
+  };
+
+  return (
+    <>
+      <PageSection variant="light" padding={{ default: "noPadding" }}>
+        <PublicKeyDialog />
+        <CertificateDialog />
+        <KeycloakDataTable
+          key={key}
+          loader={loader}
+          ariaLabelKey="realm-settings:keysList"
+          searchPlaceholderKey="realm-settings:searchKey"
+          canSelectAll
+          columns={[
+            {
+              name: "algorithm",
+              displayKey: "realm-settings:algorithm",
+              cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(15)],
+            },
+            {
+              name: "type",
+              displayKey: "realm-settings:type",
+              cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(10)],
+            },
+            {
+              name: "kid",
+              displayKey: "realm-settings:kid",
+              cellFormatters: [emptyFormatter()],
+            },
+            {
+              name: "provider",
+              displayKey: "realm-settings:provider",
+              cellRenderer: ProviderRenderer,
+              cellFormatters: [emptyFormatter()],
+            },
+            {
+              name: "publicKeys",
+              displayKey: "realm-settings:publicKeys",
+              cellRenderer: ButtonRenderer,
+              cellFormatters: [],
+            },
+          ]}
+          emptyState={
+            <ListEmptyState
+              hasIcon={true}
+              message={t("noRoles")}
+              instructions={t("noRolesInstructions")}
+              primaryActionText={t("createRole")}
+              onPrimaryAction={goToCreate}
+            />
+          }
+        />
+      </PageSection>
+    </>
+  );
+};
+
+type KeysProps = {
+  keys: KeyMetadataRepresentation[];
+  realmComponents: ComponentRepresentation[];
+};
+
+export const KeysListTab = ({ keys, realmComponents, ...props }: KeysProps) => {
+  return (
+    <KeysTabInner
+      keys={keys?.map((key) => {
+        const provider = realmComponents.find(
+          (component: ComponentRepresentation) =>
+            component.id === key.providerId
+        );
+        return { ...key, provider: provider?.name };
+      })}
+      {...props}
+    />
+  );
+};

src/realm-settings/KeysTab.tsx

@@ -0,0 +1,185 @@
+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 { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
+import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
+import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import { emptyFormatter } from "../util";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
+
+import "./RealmSettingsSection.css";
+import { cellWidth } from "@patternfly/react-table";
+
+type KeyData = KeyMetadataRepresentation & {
+  provider?: string;
+};
+
+type KeysTabInnerProps = {
+  keys: KeyData[];
+};
+
+export const KeysTabInner = ({ keys }: KeysTabInnerProps) => {
+  const { t } = useTranslation("roles");
+  const history = useHistory();
+  const { url } = useRouteMatch();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+
+  const [publicKey, setPublicKey] = useState("");
+  const [certificate, setCertificate] = useState("");
+
+  const loader = async () => {
+    return keys;
+  };
+
+  React.useEffect(() => {
+    refresh();
+  }, [keys]);
+
+  const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
+    titleKey: t("realm-settings:publicKeys").slice(0, -1),
+    messageKey: publicKey,
+    continueButtonLabel: "common:close",
+    continueButtonVariant: ButtonVariant.primary,
+    noCancelButton: true,
+    onConfirm: async () => {},
+  });
+
+  const [toggleCertificateDialog, CertificateDialog] = useConfirmDialog({
+    titleKey: t("realm-settings:certificate"),
+    messageKey: certificate,
+    continueButtonLabel: "common:close",
+    continueButtonVariant: ButtonVariant.primary,
+    noCancelButton: true,
+    onConfirm: async () => {},
+  });
+
+  const goToCreate = () => history.push(`${url}/add-role`);
+
+  const ProviderRenderer = ({ provider }: KeyData) => {
+    return <>{provider}</>;
+  };
+
+  const ButtonRenderer = ({ provider, publicKey, certificate }: KeyData) => {
+    if (provider === "ecdsa-generated") {
+      return (
+        <>
+          <Button
+            onClick={() => {
+              togglePublicKeyDialog();
+              setPublicKey(publicKey!);
+            }}
+            variant="secondary"
+            id="kc-public-key"
+          >
+            {t("realm-settings:publicKeys").slice(0, -1)}
+          </Button>
+        </>
+      );
+    }
+    if (provider === "rsa-generated" || provider === "fallback-RS256") {
+      return (
+        <>
+          <Button
+            onClick={() => {
+              togglePublicKeyDialog();
+              setPublicKey(publicKey!);
+            }}
+            variant="secondary"
+            id="kc-rsa-public-key"
+          >
+            {t("realm-settings:publicKeys").slice(0, -1)}
+          </Button>
+          <Button
+            onClick={() => {
+              toggleCertificateDialog();
+              setCertificate(certificate!);
+            }}
+            variant="secondary"
+            id="kc-certificate"
+          >
+            {t("realm-settings:certificate")}
+          </Button>
+        </>
+      );
+    }
+  };
+
+  return (
+    <>
+      <PageSection variant="light" padding={{ default: "noPadding" }}>
+        <PublicKeyDialog />
+        <CertificateDialog />
+        <KeycloakDataTable
+          key={key}
+          loader={loader}
+          ariaLabelKey="realm-settings:keysList"
+          searchPlaceholderKey="realm-settings:searchKey"
+          canSelectAll
+          columns={[
+            {
+              name: "algorithm",
+              displayKey: "realm-settings:algorithm",
+              cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(15)],
+            },
+            {
+              name: "type",
+              displayKey: "realm-settings:type",
+              cellFormatters: [emptyFormatter()],
+              transforms: [cellWidth(10)],
+            },
+            {
+              name: "kid",
+              displayKey: "realm-settings:kid",
+              cellFormatters: [emptyFormatter()],
+            },
+            {
+              name: "provider",
+              displayKey: "realm-settings:provider",
+              cellRenderer: ProviderRenderer,
+              cellFormatters: [emptyFormatter()],
+            },
+            {
+              name: "publicKeys",
+              displayKey: "realm-settings:publicKeys",
+              cellRenderer: ButtonRenderer,
+              cellFormatters: [],
+            },
+          ]}
+          emptyState={
+            <ListEmptyState
+              hasIcon={true}
+              message={t("noRoles")}
+              instructions={t("noRolesInstructions")}
+              primaryActionText={t("createRole")}
+              onPrimaryAction={goToCreate}
+            />
+          }
+        />
+      </PageSection>
+    </>
+  );
+};
+
+type KeysProps = {
+  keys: KeyMetadataRepresentation[];
+  realmComponents: ComponentRepresentation[];
+};
+
+export const KeysTab = ({ keys, realmComponents, ...props }: KeysProps) => {
+  return (
+    <KeysTabInner
+      keys={keys?.map((key) => {
+        const provider = realmComponents.find(
+          (component: ComponentRepresentation) =>
+            component.id === key.providerId
+        );
+        return { ...key, provider: provider?.providerId };
+      })}
+      {...props}
+    />
+  );
+};

src/realm-settings/RealmSettingsSection.css

@@ -16,3 +16,6 @@ div.pf-c-card__body.kc-form-panel__body {
   padding-left: 0px;
   padding-bottom: var(--pf-global--spacer--2xl);
 }
+button#kc-certificate.pf-c-button.pf-m-secondary {
+  margin-left: var(--pf-global--spacer--md);
+}

src/realm-settings/RealmSettingsSection.tsx

@@ -10,6 +10,7 @@ import {
   DropdownSeparator,
   PageSection,
   Tab,
+  Tabs,
   TabTitleText,
 } from "@patternfly/react-core";
 
@@ -26,6 +27,9 @@ import { RealmSettingsGeneralTab } from "./GeneralTab";
 import { PartialImportDialog } from "./PartialImport";
 import { RealmSettingsThemesTab } from "./ThemesTab";
 import { RealmSettingsEmailTab } from "./EmailTab";
+import { KeysListTab } from "./KeysListTab";
+import { KeyMetadataRepresentation } from "keycloak-admin/lib/defs/keyMetadataRepresentation";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 type RealmSettingsHeaderProps = {
   onChange: (value: boolean) => void;
@@ -126,6 +130,11 @@ export const RealmSettingsSection = () => {
   const form = useForm();
   const { control, getValues, setValue } = form;
   const [realm, setRealm] = useState<RealmRepresentation>();
+  const [activeTab2, setActiveTab2] = useState(0);
+  const [keys, setKeys] = useState<KeyMetadataRepresentation[]>([]);
+  const [realmComponents, setRealmComponents] = useState<
+    ComponentRepresentation[]
+  >([]);
 
   useEffect(() => {
     return asyncStateFetch(
@@ -138,6 +147,21 @@ export const RealmSettingsSection = () => {
     );
   }, []);
 
+  useEffect(() => {
+    const update = async () => {
+      const keysMetaData = await adminClient.realms.getKeys({
+        realm: realmName,
+      });
+      setKeys(keysMetaData.keys!);
+      const realmComponents = await adminClient.components.find({
+        type: "org.keycloak.keys.KeyProvider",
+        realm: realmName,
+      });
+      setRealmComponents(realmComponents);
+    };
+    setTimeout(update, 100);
+  }, []);
+
   const setupForm = (realm: RealmRepresentation) => {
     Object.entries(realm).map((entry) => setValue(entry[0], entry[1]));
   };
@@ -207,6 +231,24 @@ export const RealmSettingsSection = () => {
                 reset={() => setupForm(realm!)}
               />
             </Tab>
+            <Tab
+              eventKey="keys"
+              title={<TabTitleText>{t("realm-settings:keys")}</TabTitleText>}
+              data-testid="rs-keys-tab"
+            >
+              <Tabs
+                activeKey={activeTab2}
+                onSelect={(_, key) => setActiveTab2(key as number)}
+              >
+                <Tab
+                  id="setup"
+                  eventKey={0}
+                  title={<TabTitleText>{t("keysList")}</TabTitleText>}
+                >
+                  <KeysListTab keys={keys} realmComponents={realmComponents} />
+                </Tab>
+              </Tabs>
+            </Tab>
           </KeycloakTabs>
         </FormProvider>
       </PageSection>

src/realm-settings/messages.json

@@ -30,6 +30,16 @@
     "enableStartTLS": "Enable StartTLS",
     "username": "Username",
     "password": "Password",
+    "keys": "Keys",
+    "keysList": "Keys list",
+    "searchKey":"Search key",
+    "providers": "Providers",
+    "algorithm": "Algorithm",
+    "type": "Type",
+    "kid": "Kid",
+    "provider": "Provider",
+    "publicKeys": "Public keys",
+    "certificate": "Certificate",
     "userRegistration": "User registration",
     "userRegistrationHelpText": "Enable/disable the registration page. A link for registration will show on login page too.",
     "forgotPassword": "Forgot password",