Issues/22729/bug fix avatar initial (#23499)

* fix(ui): fix avatar inital

* Add the fallback value

* Add support for unicode characters

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.test.ts

@@ -13,6 +13,7 @@
 
 import {
   filterSelectOptions,
+  getFirstAlphanumeric,
   getTableFQNFromColumnFQN,
   isLinearGradient,
 } from './CommonUtils';
@@ -120,4 +121,52 @@ describe('Tests for CommonUtils', () => {
       expect(isLinearGradient('')).toBe(false);
     });
   });
+
+  describe('getFirstAlphanumeric', () => {
+    it('should return the first alphabet from name containing only alphabets', () => {
+      const firstAlphabet = getFirstAlphanumeric('John Doe');
+
+      expect(firstAlphabet).toBe('j');
+    });
+
+    it('should return the first alphanumeric character from name containing both alphabets and numbers', () => {
+      let firstAlphabet = getFirstAlphanumeric('3John Doe');
+
+      expect(firstAlphabet).toBe('3');
+
+      firstAlphabet = getFirstAlphanumeric('John3 Doe');
+
+      expect(firstAlphabet).toBe('j');
+    });
+
+    it('should return the first alphanumeric character from name containing special characters', () => {
+      let firstAlphabet = getFirstAlphanumeric('[Software Engineer] John Doe');
+
+      expect(firstAlphabet).toBe('s');
+
+      firstAlphabet = getFirstAlphanumeric('(Product Manager] Jane Doe');
+
+      expect(firstAlphabet).toBe('p');
+    });
+
+    it('should fallback to the first character if there is no alphanumeric character found', () => {
+      const firstAlphabet = getFirstAlphanumeric('][/)([*');
+
+      expect(firstAlphabet).toBe(']');
+    });
+
+    it('should return the first alphabet from name when it is not in english language', () => {
+      let firstAlphabet = getFirstAlphanumeric('🚀Éclair');
+
+      expect(firstAlphabet).toBe('é');
+
+      firstAlphabet = getFirstAlphanumeric('ชานนท์');
+
+      expect(firstAlphabet).toBe('ช');
+
+      firstAlphabet = getFirstAlphanumeric('ño');
+
+      expect(firstAlphabet).toBe('ñ');
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -403,8 +403,19 @@ export const getNameFromFQN = (fqn: string): string => {
   return arr[arr.length - 1];
 };
 
+export const getFirstAlphanumeric = (name: string): string => {
+  /**
+   * \p{L} → matches any kind of letter from any language (Latin, Cyrillic, Chinese, etc.).
+   * \p{N} → matches any kind of numeric digit (Arabic-Indic, Roman numerals, etc.).
+   * u flag → required for Unicode property escapes to work.
+   */
+  const match = name.match(/[\p{L}\p{N}]/u);
+
+  return match ? match[0].toLowerCase() : name.charAt(0).toLowerCase();
+};
+
 export const getRandomColor = (name: string) => {
-  const firstAlphabet = name.charAt(0).toLowerCase();
+  const firstAlphabet = getFirstAlphanumeric(name);
   // Convert the user's name to a numeric value
   let nameValue = 0;
   for (let i = 0; i < name.length; i++) {