Show jwks, certificate or publicKey for the key information

Closes #44284

Signed-off-by: rmartinc <rmartinc@redhat.com>

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -1941,6 +1941,7 @@ fullSyncPeriod=Full sync period
 clientsExplain=Clients are applications and services that can request authentication of a user.
 addNode=Add node
 jwksUrl=JWKS URL
+jwks=JSON Web Key Set
 policy-description=A description for this policy.
 defaultPasswordLabel=My password
 mapperUserAttributeName=User Attribute Name
@@ -3712,4 +3713,4 @@ eventTypes.USER_SESSION_DELETED.description=User session deleted
 eventTypes.USER_SESSION_DELETED_ERROR.name=User session deleted error
 eventTypes.USER_SESSION_DELETED_ERROR.description=User session deleted error
 hideOnLoginWhenOrgNotResolved=Hide on login page when organization not resolved
-hideOnLoginWhenOrgNotResolvedHelp=If enabled, the identity provider will be hidden on the login page when the organization cannot be resolved based on the user's email domain. Otherwise, the identity provider will be shown on the login page regardless of whether the organization is resolved or not. If 'Hide on login page' is also enabled, the identity provider will always be hidden on the login page.
+hideOnLoginWhenOrgNotResolvedHelp=If enabled, the identity provider will be hidden on the login page when the organization cannot be resolved based on the user's email domain. Otherwise, the identity provider will be shown on the login page regardless of whether the organization is resolved or not. If 'Hide on login page' is also enabled, the identity provider will always be hidden on the login page.

js/apps/admin-ui/src/clients/keys/Certificate.tsx

@@ -11,25 +11,31 @@ type CertificateProps = Omit<CertificateDisplayProps, "id"> & {
 type CertificateDisplayProps = {
   id: string;
   helpTextKey?: string;
+  type?: "jwks" | "certificate" | "publicKey";
   keyInfo?: CertificateRepresentation;
 };
 
-const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => {
+const CertificateDisplay = ({
+  id,
+  type = "certificate",
+  keyInfo,
+}: CertificateDisplayProps) => {
   const { t } = useTranslation();
   return (
     <TextArea
       readOnly
       rows={5}
       id={id}
-      data-testid="certificate"
-      value={keyInfo?.certificate}
-      aria-label={t("certificate")}
+      data-testid={type}
+      value={keyInfo?.[type]}
+      aria-label={t(type)}
     />
   );
 };
 
 export const Certificate = ({
-  helpTextKey = "certificateHelp",
+  helpTextKey,
+  type = "certificate",
   keyInfo,
   plain = false,
 }: CertificateProps) => {
@@ -37,14 +43,29 @@ export const Certificate = ({
   const id = useId();
 
   return plain ? (
-    <CertificateDisplay id={id} keyInfo={keyInfo} />
+    <CertificateDisplay id={id} type={type} keyInfo={keyInfo} />
   ) : (
     <FormGroup
-      label={t("certificate")}
+      label={t(type)}
       fieldId={id}
-      labelIcon={<HelpItem helpText={t(helpTextKey)} fieldLabelId={id} />}
+      labelIcon={
+        helpTextKey ? (
+          <HelpItem helpText={t(helpTextKey)} fieldLabelId={id} />
+        ) : undefined
+      }
     >
-      <CertificateDisplay id={id} keyInfo={keyInfo} />
+      <CertificateDisplay id={id} type={type} keyInfo={keyInfo} />
     </FormGroup>
   );
 };
+
+export const KeyInfoArea = ({ type, keyInfo, ...rest }: CertificateProps) => {
+  const myType = type
+    ? type
+    : keyInfo?.jwks
+      ? "jwks"
+      : keyInfo?.certificate
+        ? "certificate"
+        : "publicKey";
+  return <Certificate type={myType} keyInfo={keyInfo} {...rest} />;
+};

js/apps/admin-ui/src/clients/keys/Keys.tsx

@@ -23,7 +23,7 @@ import { DefaultSwitchControl } from "../../components/SwitchControl";
 import { convertAttributeNameToForm } from "../../util";
 import useToggle from "../../utils/useToggle";
 import { FormFields } from "../ClientDetails";
-import { Certificate } from "./Certificate";
+import { KeyInfoArea } from "./Certificate";
 import { GenerateKeyDialog, getFileExtension } from "./GenerateKeyDialog";
 import { ImportFile, ImportKeyDialog } from "./ImportKeyDialog";
 
@@ -157,9 +157,9 @@ export const Keys = ({
             />
             {useJwksUrl !== "true" &&
               (keyInfo ? (
-                <Certificate plain keyInfo={keyInfo} />
+                <KeyInfoArea keyInfo={keyInfo} />
               ) : (
-                "No client certificate configured"
+                "No public key configured"
               ))}
             {useJwksUrl === "true" && (
               <TextControl