feat: add getMappedUserProfileValue utility for improved user profile attribute mapping

Author: brionmario

packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.tsx

@@ -22,6 +22,7 @@ import clsx from 'clsx';
 import {useTheme} from '../../../theme/useTheme';
 import {Avatar} from '../../primitives/Avatar/Avatar';
 import {Popover} from '../../primitives/Popover/Popover';
+import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 const useStyles = () => {
   const {theme} = useTheme();
@@ -148,11 +149,11 @@ export interface BaseUserDropdownProps {
    * Allows customizing which user profile fields should be used for each attribute.
    */
   attributeMapping?: {
-    picture?: string;
-    firstName?: string;
-    lastName?: string;
-    username?: string;
-    [key: string]: string | undefined;
+    picture?: string | string[];
+    firstName?: string | string[];
+    lastName?: string | string[];
+    username?: string | string[];
+    [key: string]: string | string[] | undefined;
   };
 }
 
@@ -176,7 +177,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const defaultAttributeMappings = {
-    picture: 'profile',
+    picture: ['profile', 'profileUrl'],
     firstName: 'givenName',
     lastName: 'familyName',
   };
@@ -218,7 +219,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
         onClick={() => setIsOpen(!isOpen)}
       >
         <Avatar
-          imageUrl={getMappedValue('picture')}
+          imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
           name={getDisplayName()}
           size={avatarSize}
           alt={`${getDisplayName()}'s avatar`}
@@ -232,7 +233,7 @@ export const BaseUserDropdown: FC<BaseUserDropdownProps> = ({
             {showDropdownHeader && (
               <div className={withVendorCSSClassPrefix('user-dropdown-header')} style={styles.dropdownHeader}>
                 <Avatar
-                  imageUrl={getMappedValue('picture')}
+                  imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
                   name={getDisplayName()}
                   size={avatarSize * 1.25}
                   alt={`${getDisplayName()}'s avatar`}

packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx

@@ -25,6 +25,7 @@ import {Avatar} from '../../primitives/Avatar/Avatar';
 import {useTheme} from '../../../theme/useTheme';
 import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
+import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 interface Schema {
   caseExact?: boolean;
@@ -212,44 +213,15 @@ export const BaseUserProfile: FC<BaseUserProfileProps> = ({
 
   const mergedMappings = {...defaultAttributeMappings, ...attributeMapping};
 
-  const getMappedValue = (key: string) => {
-    const mappedKey = mergedMappings[key];
-
-    if (Array.isArray(user)) {
-      // If user is an array, find the first matching schema attribute
-      if (Array.isArray(mappedKey)) {
-        // Try each possible field name in order
-        for (const field of mappedKey) {
-          const found = user.find(u => u.name === field);
-          if (found?.value !== undefined) {
-            return found.value;
-          }
-        }
-      } else {
-        // Look for single mapped key
-        const found = user.find(u => u.name === mappedKey);
-        if (found?.value !== undefined) {
-          return found.value;
-        }
-      }
-      // Fallback to original key if no mapped fields exist
-      const found = user.find(u => u.name === key);
-      return found?.value;
-    }
-
-    // For single user object, return the mapped key or original key
-    return mappedKey ? user[mappedKey] : user[key];
-  };
-
   const getDisplayName = () => {
-    const firstName = getMappedValue('firstName');
-    const lastName = getMappedValue('lastName');
+    const firstName = getMappedUserProfileValue('firstName', mergedMappings, user);
+    const lastName = getMappedUserProfileValue('lastName', mergedMappings, user);
 
     if (firstName && lastName) {
       return `${firstName} ${lastName}`;
     }
 
-    return getMappedValue('username') || '';
+    return getMappedUserProfileValue('username', mergedMappings, user) || '';
   };
 
   if (!user) {
@@ -356,7 +328,7 @@ export const BaseUserProfile: FC<BaseUserProfileProps> = ({
     <div style={containerStyle} className={clsx(withVendorCSSClassPrefix('user-profile'), className)}>
       <div style={styles.header}>
         <Avatar
-          imageUrl={getMappedValue('picture')}
+          imageUrl={getMappedUserProfileValue('picture', mergedMappings, user)}
           name={getDisplayName()}
           size={80}
           alt={`${getDisplayName()}'s avatar`}

packages/react/src/utils/getMappedUserProfileValue.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const getMappedUserProfileValue = (key: string, mappings, user) => {
+  const mappedKey = mappings[key];
+
+  if (Array.isArray(user)) {
+    if (Array.isArray(mappedKey)) {
+      for (const field of mappedKey) {
+        const found = user.find(u => u.name === field);
+        if (found?.value !== undefined) {
+          return found.value;
+        }
+      }
+    } else {
+      const found = user.find(u => u.name === mappedKey);
+      if (found?.value !== undefined) {
+        return found.value;
+      }
+    }
+
+    const found = user.find(u => u.name === key);
+
+    return found?.value;
+  }
+
+  return mappedKey ? user[mappedKey] : user[key];
+};
+
+export default getMappedUserProfileValue;