fix(groups): display user full name in role edit user dropdown (#39942)

Co-authored-by: Đỗ Trọng Hải <41283691+hainenber@users.noreply.github.com>

superset-frontend/src/features/groups/GroupListModal.tsx

@@ -28,6 +28,7 @@ import {
   Select,
   AsyncSelect,
 } from '@superset-ui/core/components';
+import { getUserDisplayLabel } from 'src/features/users/utils';
 import { FormValues, GroupModalProps } from './types';
 import { createGroup, fetchUserOptions, updateGroup } from './utils';
 
@@ -94,7 +95,7 @@ function GroupListModal({
     users:
       group?.users?.map(user => ({
         value: user.id,
-        label: user.username,
+        label: getUserDisplayLabel(user),
       })) || [],
   };
 

superset-frontend/src/features/groups/utils.ts

@@ -19,6 +19,7 @@
 import { t } from '@apache-superset/core/translation';
 import { SupersetClient } from '@superset-ui/core';
 import rison from 'rison';
+import { getUserDisplayLabel } from 'src/features/users/utils';
 import { FormValues } from './types';
 
 export const createGroup = async (values: FormValues) => {
@@ -64,7 +65,7 @@ export const fetchUserOptions = async (
     return {
       data: results.map((user: any) => ({
         value: user.id,
-        label: user.username,
+        label: getUserDisplayLabel(user),
       })),
       totalCount: response.json?.count ?? 0,
     };

superset-frontend/src/features/roles/RoleListEditModal.test.tsx

@@ -157,8 +157,8 @@ describe('RoleListEditModal', () => {
 
     // Wait for user hydration to complete so setFieldsValue has populated
     // the form with the fetched users before submitting.
-    await screen.findByText('johndoe');
-    await screen.findByText('janesmith');
+    await screen.findByText('John Doe');
+    await screen.findByText('Jane Smith');
 
     fireEvent.change(screen.getByTestId('role-name-input'), {
       target: { value: 'Updated Role' },

superset-frontend/src/features/roles/RoleListEditModal.tsx

@@ -51,6 +51,7 @@ import {
   updateRoleUsers,
   formatPermissionLabel,
 } from './utils';
+import { getUserDisplayLabel } from 'src/features/users/utils';
 
 export interface RoleListEditModalProps extends BaseModalProps {
   role: RoleObject;
@@ -232,7 +233,7 @@ function RoleListEditModal({
     if (!loadingRoleUsers && formRef.current) {
       const userOptions = roleUsers.map(user => ({
         value: user.id,
-        label: user.username,
+        label: getUserDisplayLabel(user),
       }));
       formRef.current.setFieldsValue({
         roleUsers: userOptions,
@@ -321,7 +322,7 @@ function RoleListEditModal({
     roleUsers:
       roleUsers?.map(user => ({
         value: user.id,
-        label: user.username,
+        label: getUserDisplayLabel(user),
       })) || [],
     roleGroups: group_ids.map(groupId => ({
       value: groupId,

superset-frontend/src/features/users/utils.ts

@@ -44,6 +44,15 @@ export const deleteUser = async (userId: number) =>
     endpoint: `/api/v1/security/users/${userId}`,
   });
 
+export const getUserDisplayLabel = (user: {
+  first_name?: string;
+  last_name?: string;
+  username?: string;
+}): string =>
+  [user.first_name, user.last_name].filter(Boolean).join(' ') ||
+  user.username ||
+  t('N/A');
+
 export const atLeastOneRoleOrGroup =
   (fieldToCheck: 'roles' | 'groups') =>
   ({