Before reporting an issue

• I have searched existing issues
• I have reproduced the issue with the latest nightly release

Area

admin/ui

Describe the bug

The Custom User Provider UI doesn't displayed MULTIVALUED_STRING_TYPE setting correctly.

Same bug closed here: #17937

The problem is not present in version 21.0.1 but present in version 21.1.2 and 22.0.1.
After analysis, the major problem between these versions is the way the data of the MULTIVALUED_STRING_TYPE is fetched from the UI.

First of all, we have to know:

• In version 21.0.1, the data is saved in a String format:

"my-config": ["CONF1##CONF2##CONF3"]

• In version 21.1.2 and 22.0.1; the data is saved in a Array format:

"my-config": [
  "CONF1",
  "CONF2",
  "CONF3"
]

In all these versions, it's seems that the data is still fetched in a String format.

Steps of the analysis :

1. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
   When fetch of UserFederation's data is made from CustomProviderSettings.tsx, it uses the convertToFormValues function.

2. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/util.ts
   This convertToFormValues function enters in the if (key === "config" || key === "attributes") { condition and takes only the first list element (tested in browser debug mode):

const convertedValues = Object.entries(flattened).map(([key, value]) =>
  Array.isArray(value) ? [key, value[0]] : [key, value]
);

In our example, the convertedValues takes only the first element of our config: convertedValues = ["my-config", "CONF1"]. Only the first element is passed to setValue.

3. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
   The called component is DynamicComponents.

4. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/dynamic/DynamicComponents.tsx
   The next called is Component, which called the MultivaluedStringComponent because of the configuration.

5. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx
   The next one is MultiLineInput.

6. https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx
   In the MultiLineInput Component, stringify is set to false (because of the call hierarchy, verified in debug mode).
   The fields to set in the UI are taken from this fragment of code:

const fields = useMemo<string[]>(() => {
  let values = stringify ? stringToMultiline(value as string) : value;

  values =
    Array.isArray(values) && values.length !== 0
	  ? values
	  : defaultValue || [""];

  return values;
}, [value]);

Here is the function stringToMultiline:

function stringToMultiline(value?: string): string[] {
  return typeof value === "string" ? value.split("##") : [];
}

values takes value, which is "CONF1".
values is not an array, so values takes the defaultValue || [""].
In my configuration, defaultValue is displayed each time I try to go the configuration page of my UserFederation's config.

To correct this, in my opinion:

• It's necessary to change the convertToFormValues function to return an array instead of the first string of the array (step 2).
  or
• It's necessary to change the way the data is saved or returned by the API to return a String with the '##' separator and set the stringify boolean to true.

FYI, Here is the call hierarchy from the User Provider Form to the MultiLineInput:

• https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/user-federation/custom/CustomProviderSettings.tsx
• https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/util.ts
• https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/dynamic/DynamicComponents.tsx
• https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx
• https://github.com/keycloak/keycloak/blob/22.0.1/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx

Version

22.0.1

Expected behavior

The MULTIVALUED_STRING_TYPE value is correctly displayed

Actual behavior

The MULTIVALUED_STRING_TYPE value isn't correctly displayed

How to Reproduce?

Follow the bug report.

Anything else?

No response