added dynamic components to client authenticator (#34259)

fixes: #33729

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/clients/credentials/Credentials.tsx

@@ -16,17 +16,20 @@ import {
   CardBody,
   ClipboardCopy,
   Divider,
+  Form,
   FormGroup,
   PageSection,
   Split,
   SplitItem,
 } from "@patternfly/react-core";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useAdminClient } from "../../admin-client";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
+import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../components/form/FormAccess";
+import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { FormFields } from "../ClientDetails";
 import { ClientSecret } from "./ClientSecret";
 import { SignedJWT } from "./SignedJWT";
@@ -72,6 +75,15 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
     (provider) => provider.id === clientAuthenticatorType,
   );
 
+  const { componentTypes } = useServerInfo();
+  const providerProperties = useMemo(
+    () =>
+      componentTypes?.["org.keycloak.authentication.ClientAuthenticator"]?.find(
+        (p) => p.id === clientAuthenticatorType,
+      )?.properties,
+    [clientAuthenticatorType, componentTypes],
+  );
+
   useFetch(
     () =>
       Promise.all([
@@ -170,6 +182,11 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
               </FormGroup>
             )}
             {clientAuthenticatorType === "client-x509" && <X509 />}
+            {providerProperties && (
+              <Form>
+                <DynamicComponents properties={providerProperties} />
+              </Form>
+            )}
             <ActionGroup>
               <Button variant="primary" type="submit" isDisabled={!isDirty}>
                 {t("save")}