Convert config strings into string[] (#3365)

apps/admin-ui/src/components/dynamic/PasswordComponent.tsx

@@ -5,6 +5,7 @@ import { FormGroup } from "@patternfly/react-core";
 import type { ComponentProps } from "./components";
 import { HelpItem } from "../help-enabler/HelpItem";
 import { PasswordInput } from "../password-input/PasswordInput";
+import { convertToName } from "./DynamicComponents";
 
 export const PasswordComponent = ({
   name,
@@ -29,7 +30,7 @@ export const PasswordComponent = ({
         data-testid={name}
         isDisabled={isDisabled}
         ref={register()}
-        name={`config.${name}`}
+        name={convertToName(name!)}
         defaultValue={defaultValue?.toString()}
       />
     </FormGroup>

apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx

@@ -24,6 +24,7 @@ import { SettingsCache } from "../shared/SettingsCache";
 import { ExtendedHeader } from "../shared/ExtendedHeader";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
+import { convertFormValuesToObject, convertToFormValues } from "../../util";
 
 import "./custom-provider-settings.css";
 
@@ -38,6 +39,7 @@ export default function CustomProviderSettings() {
     register,
     errors,
     reset,
+    setValue,
     handleSubmit,
     formState: { isDirty },
   } = form;
@@ -62,7 +64,7 @@ export default function CustomProviderSettings() {
     },
     (fetchedComponent) => {
       if (fetchedComponent) {
-        reset({ ...fetchedComponent });
+        convertToFormValues(fetchedComponent, setValue);
       } else if (id) {
         throw new Error(t("common:notFound"));
       }
@@ -80,12 +82,19 @@ export default function CustomProviderSettings() {
   );
 
   const save = async (component: ComponentRepresentation) => {
-    const saveComponent = {
+    const saveComponent = convertFormValuesToObject({
       ...component,
+      config: Object.fromEntries(
+        Object.entries(component.config || {}).map(([key, value]) => [
+          key,
+          Array.isArray(value) ? value : [value],
+        ])
+      ),
       providerId,
       providerType: "org.keycloak.storage.UserStorageProvider",
       parentId,
-    };
+    });
+
     try {
       if (!id) {
         await adminClient.components.create(saveComponent);