Added dynamic properties to custom provider (#3042)

src/components/dynamic/PasswordComponent.tsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { useFormContext } from "react-hook-form";
+import { FormGroup } from "@patternfly/react-core";
+
+import type { ComponentProps } from "./components";
+import { HelpItem } from "../help-enabler/HelpItem";
+import { PasswordInput } from "../password-input/PasswordInput";
+
+export const PasswordComponent = ({
+  name,
+  label,
+  helpText,
+  defaultValue,
+  isDisabled = false,
+}: ComponentProps) => {
+  const { t } = useTranslation("dynamic");
+  const { register } = useFormContext();
+
+  return (
+    <FormGroup
+      label={t(label!)}
+      labelIcon={
+        <HelpItem helpText={t(helpText!)} fieldLabelId={`dynamic:${label}`} />
+      }
+      fieldId={name!}
+    >
+      <PasswordInput
+        id={name!}
+        data-testid={name}
+        isDisabled={isDisabled}
+        ref={register()}
+        name={`config.${name}`}
+        defaultValue={defaultValue?.toString()}
+      />
+    </FormGroup>
+  );
+};

src/components/dynamic/components.ts

@@ -12,6 +12,7 @@ import { MultiValuedStringComponent } from "./MultivaluedStringComponent";
 import { MultiValuedListComponent } from "./MultivaluedListComponent";
 import { GroupComponent } from "./GroupComponent";
 import { FileComponent } from "./FileComponent";
+import { PasswordComponent } from "./PasswordComponent";
 
 export type ComponentProps = Omit<ConfigPropertyRepresentation, "type"> & {
   isDisabled?: boolean;
@@ -29,6 +30,7 @@ const ComponentTypes = [
   "ClientList",
   "MultivaluedString",
   "File",
+  "Password",
 ] as const;
 
 export type Components = typeof ComponentTypes[number];
@@ -47,6 +49,7 @@ export const COMPONENTS: {
   MultivaluedList: MultiValuedListComponent,
   MultivaluedString: MultiValuedStringComponent,
   File: FileComponent,
+  Password: PasswordComponent,
 } as const;
 
 export const isValidComponentType = (value: string): value is Components =>

src/user-federation/custom/CustomProviderSettings.tsx

@@ -21,6 +21,8 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
 import { SettingsCache } from "../shared/SettingsCache";
 import { ExtendedHeader } from "../shared/ExtendedHeader";
+import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
+import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 
 import "./custom-provider-settings.css";
 
@@ -44,6 +46,12 @@ export default function CustomProviderSettings() {
   const { realm: realmName } = useRealm();
   const [parentId, setParentId] = useState("");
 
+  const provider = (
+    useServerInfo().componentTypes?.[
+      "org.keycloak.storage.UserStorageProvider"
+    ] || []
+  ).find((p) => p.id === providerId);
+
   useFetch(
     async () => {
       if (id) {
@@ -126,6 +134,9 @@ export default function CustomProviderSettings() {
               validated={errors.name ? "error" : "default"}
             />
           </FormGroup>
+          <FormProvider {...form}>
+            <DynamicComponents properties={provider?.properties || []} />
+          </FormProvider>
           <SettingsCache form={form} unWrap />
           <ActionGroup>
             <Button