fix(admin-ui): resolve data inconsistency issues in My Profile

[faisalsiddique4400]

fix(admin-ui): resolve data inconsistency issues in My Profile (#2599)

Summary

This PR fixes multiple data consistency and usability issues in My Profile sections of the Admin UI.

Issues Addressed

My Profile

• Profile details were not being rendered correctly.
• Fixed data binding and rendering logic so user profile information is displayed as expected.

🔗 Ticket

Closes: #2599

Summary by CodeRabbit

• New Features

  • Added/expanded translations for user profile fields (Given Name, Last Name, Email, Status) in English, Spanish, French and Portuguese.

• Improvements

  • Updated profile page layout and styling for more consistent badges, skeletons and field presentation.
  • Optimized profile rendering for better performance and stable theme-driven colors.

• Improvements (Navigation)

  • Streamlined post-create/edit navigation to return users to the user management view.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds missing locale entries for user fields, refactors ProfilePage (memoization, rendering helpers, theme and skeleton constants, userInum resolution and API gating), extends profile types, and changes post-action navigation in user-management pages from navigateToRoute to navigateBack.

Changes

Cohort / File(s)	Summary
Translation Updates admin-ui/app/locales/en/translation.json, admin-ui/app/locales/es/translation.json, admin-ui/app/locales/fr/translation.json, admin-ui/app/locales/pt/translation.json	Added localized keys for user fields (givenName, sn/surname, mail/email). French file also removed a duplicate status entry and added normalized field keys.
Type Definitions admin-ui/app/routes/Apps/Profile/types.ts	Added optional sn/surname, index signature [key: string]: unknown to ProfileDetails, and `userInum?: string
Profile Component Refactor admin-ui/app/routes/Apps/Profile/ProfilePage.tsx	Replaced default export with memo(ProfileDetails), introduced memoized buttonColor and roleBadges, consolidated rendering into renderField, renderDisplayName, renderUserRolesField, added skeleton/layout constants, switched API call gating to canMakeApiCall, and added userInum resolution fallback.
Navigation Pattern Updates admin-ui/plugins/user-management/components/UserAddPage.tsx, admin-ui/plugins/user-management/components/UserEditPage.tsx	Use navigateBack(ROUTES.USER_MANAGEMENT) from useAppNavigation instead of navigateToRoute(...) after successful create/update; consumer usage updated to expect navigateBack.

Sequence Diagram(s)

sequenceDiagram
  participant UI as "ProfilePage (UI)"
  participant Auth as "AuthState / Session"
  participant API as "Userinfo API"
  participant Renderer as "Render Helpers"

  UI->>Auth: read session / apiAccessToken / userInum
  Auth-->>UI: returns hasSession / apiAccessToken / stateUserInum
  UI->>API: fetch profile (if canMakeApiCall)
  API-->>UI: profile data (givenName, sn, mail, attrs...)
  UI->>Renderer: renderField / renderDisplayName / renderUserRolesField
  Renderer-->>UI: composed UI elements (badges, skeletons, fields)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• flex#2446: Modifies user-attribute handling (adds/uses sn, mail, givenName) and shares attribute lookup changes.
• flex#2418: Related navigation refactor that changes how useAppNavigation is used across components.
• flex#2545: Touches UserEditPage.tsx and shares navigation/submit-flow modifications.

Suggested reviewers

• duttarnab
• syntrydy

Poem

🐰 I hopped through keys and fields so bright,
Added names and emails to set things right.
UserInum whispered to find its place,
Badges gleam with a memoized grace.
Back we navigate — a soft, swift pace. 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	Navigation changes in UserAddPage and UserEditPage (navigateToRoute to navigateBack) appear unrelated to the core objective of fixing profile data display inconsistencies.	Separate navigation refactoring changes into a distinct PR or clarify how they relate to resolving the My Profile data inconsistency issue.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing data inconsistency issues in the My Profile feature of the admin UI.
Linked Issues check	✅ Passed	The PR addresses the primary objective of issue #2599 by fixing data binding and rendering logic to display profile details correctly in My Profile.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@admin-ui/app/routes/Apps/Profile/ProfilePage.tsx`:
- Around line 171-181: The surname currently renders from userinfo
(renderField('fields.sn', userinfo?.family_name, loading)) which can be missing;
update the call to prefer profileDetails (e.g., profileDetails?.sn or
profileDetails?.surname) and fall back to userinfo?.family_name if needed so it
aligns with other fields. Modify the renderField invocation for 'fields.sn' to
use profileDetails first and only use userinfo as a fallback, keeping the same
loading argument and leaving renderField, profileDetails and userinfo
identifiers intact.

[sonarqubecloud]

Quality Gate failed for 'Gluu Admin UI'

Failed conditions
2 Security Hotspots

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

admin-ui/app/routes/Apps/Profile/types.ts (1)

36-40: Add hasSession?: boolean to AuthState to avoid unsafe casts.

ProfilePage currently type-asserts authState just to access hasSession. Adding it here keeps type safety and removes the need for assertions.

♻️ Proposed update

 export interface AuthState {
   userinfo?: UserInfo
   token?: AuthToken | null
   issuer?: string | null
   userInum?: string | null
+  hasSession?: boolean
 }

♻️ Duplicate comments (1)

admin-ui/app/routes/Apps/Profile/ProfilePage.tsx (1)

175-180: Prefer profileDetails.sn/surname before customAttributes for last name.

If the API returns sn/surname as top-level fields (now in the type), the current lookup can still render -. Prefer the direct fields and keep the customAttributes lookup as a fallback.

🔧 Suggested adjustment

 {renderField(
   'fields.sn',
-  profileDetails?.customAttributes?.find(
-    (att: CustomAttribute) => att?.name === 'sn',
-  )?.values?.[0],
+  profileDetails?.sn ??
+    profileDetails?.surname ??
+    profileDetails?.customAttributes?.find(
+      (att: CustomAttribute) => att?.name === 'sn',
+    )?.values?.[0],
   loading,
 )}