enable dot in attribute when user profile enabled (#25104)

fixes: #24918

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

js/apps/admin-ui/src/user/form-state.ts

@@ -4,6 +4,7 @@ import {
   arrayToKeyValue,
   keyValueToArray,
 } from "../components/key-value-form/key-value-convert";
+import { beerify, debeerify } from "../util";
 
 export type UserFormFields = Omit<
   UIUserRepresentation,
@@ -21,9 +22,15 @@ export function toUserFormFields(
   data: UIUserRepresentation,
   userProfileEnabled: boolean,
 ): UserFormFields {
-  const attributes = userProfileEnabled
-    ? data.attributes
-    : arrayToKeyValue(data.attributes);
+  let attributes: Record<string, string | string[]> = {};
+  if (userProfileEnabled) {
+    Object.entries(data.attributes || {}).forEach(
+      ([k, v]) => (attributes[beerify(k)] = v),
+    );
+  } else {
+    attributes = arrayToKeyValue(data.attributes);
+  }
+
   const unmanagedAttributes = arrayToKeyValue(data.unmanagedAttributes);
   return { ...data, attributes, unmanagedAttributes };
 }
@@ -34,7 +41,12 @@ export function toUserRepresentation(
   const username = data.username?.trim();
   const attributes = Array.isArray(data.attributes)
     ? keyValueToArray(data.attributes)
-    : data.attributes;
+    : Object.fromEntries(
+        Object.entries(data.attributes || {}).map(([k, v]) => [
+          debeerify(k),
+          v,
+        ]),
+      );
   const unmanagedAttributes = Array.isArray(data.unmanagedAttributes)
     ? keyValueToArray(data.unmanagedAttributes)
     : data.unmanagedAttributes;

js/apps/admin-ui/src/util.ts

@@ -63,13 +63,10 @@ export const exportClient = (client: ClientRepresentation): void => {
 export const toUpperCase = <T extends string>(name: T) =>
   (name.charAt(0).toUpperCase() + name.slice(1)) as Capitalize<T>;
 
-const isAttributesObject = (value: any) => {
-  return (
-    Object.values(value).filter(
-      (value) => Array.isArray(value) && value.length >= 1,
-    ).length !== 0
-  );
-};
+const isAttributesObject = (value: any) =>
+  Object.values(value).filter(
+    (value) => Array.isArray(value) && value.length >= 1,
+  ).length !== 0;
 
 const isAttributeArray = (value: any) => {
   if (!Array.isArray(value)) {
@@ -95,7 +92,7 @@ export function convertAttributeNameToForm<T>(
 export const beerify = <T extends string>(name: T) =>
   name.replaceAll(".", "🍺") as ReplaceString<T, ".", "🍺">;
 
-const debeerify = <T extends string>(name: T) =>
+export const debeerify = <T extends string>(name: T) =>
   name.replaceAll("🍺", ".") as ReplaceString<T, "🍺", ".">;
 
 export function convertToFormValues<T extends FieldValues>(

js/libs/ui-shared/src/user-profile/utils.ts

@@ -44,9 +44,10 @@ export const isRootAttribute = (attr?: string) =>
   attr && ROOT_ATTRIBUTES.includes(attr);
 
 export const fieldName = (name?: string) =>
-  `${
-    isRootAttribute(name) ? "" : "attributes."
-  }${name}` as FieldPath<UserFormFields>;
+  `${isRootAttribute(name) ? "" : "attributes."}${name?.replaceAll(
+    ".",
+    "🍺",
+  )}` as FieldPath<UserFormFields>;
 
 export function setUserProfileServerError<T>(
   error: UserProfileError,