fix: display username intead of name

Author: dcoa

src/authz-module/libraries-manager/components/TeamTable.test.tsx

@@ -23,13 +23,11 @@ jest.mock('../context', () => ({
 describe('TeamTable', () => {
   const mockTeamMembers = [
     {
-      displayName: 'Alice',
       email: 'alice@example.com',
       roles: ['Admin', 'Editor'],
       username: 'alice',
     },
     {
-      displayName: 'Bob',
       email: 'bob@example.com',
       roles: ['Viewer'],
       username: 'bob',
@@ -68,12 +66,12 @@ describe('TeamTable', () => {
 
     renderWrapper(<TeamTable />);
 
-    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('alice')).toBeInTheDocument();
     expect(screen.getByText('alice@example.com')).toBeInTheDocument();
     expect(screen.getByText('Admin')).toBeInTheDocument();
     expect(screen.getByText('Editor')).toBeInTheDocument();
 
-    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('bob')).toBeInTheDocument();
     expect(screen.getByText('bob@example.com')).toBeInTheDocument();
     expect(screen.getByText('Viewer')).toBeInTheDocument();
   });

src/authz-module/libraries-manager/components/TeamTable.tsx

@@ -25,11 +25,24 @@ const EmailCell = ({ row }: CellProps) => (row.original?.username === SKELETON_R
   row.original.email
 ));
 
-const NameCell = ({ row }: CellProps) => (row.original.username === SKELETON_ROWS[0].username ? (
-  <Skeleton width="180px" />
-) : (
-  row.original.displayName
-));
+const NameCell = ({ row }: CellProps) => {
+  const intl = useIntl();
+  const { username } = useLibraryAuthZ();
+
+  if (row.original.username === SKELETON_ROWS[0].username) {
+    return <Skeleton width="180px" />;
+  }
+
+  if (row.original.username === username) {
+    return (
+      <span>
+        {username}
+        <span className="text-gray-500">{intl.formatMessage(messages['library.authz.team.table.username.current'])}</span>
+      </span>
+    );
+  }
+  return row.original.username;
+};
 
 const RolesCell = ({ row }: CellProps) => (row.original.username === SKELETON_ROWS[0].username ? (
   <Skeleton width="80px" />
@@ -82,8 +95,8 @@ const TeamTable = () => {
       columns={
         [
           {
-            Header: intl.formatMessage(messages['library.authz.team.table.display.name']),
-            accessor: 'displayName',
+            Header: intl.formatMessage(messages['library.authz.team.table.username']),
+            accessor: 'username',
             Cell: NameCell,
           },
           {

src/authz-module/libraries-manager/components/messages.ts

@@ -1,10 +1,15 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'library.authz.team.table.display.name': {
-    id: 'library.authz.team.table.display.name',
-    defaultMessage: 'Name',
-    description: 'Libraries team management table name column header',
+  'library.authz.team.table.username': {
+    id: 'library.authz.team.table.username',
+    defaultMessage: 'Username',
+    description: 'Libraries team management table username column header',
+  },
+  'library.authz.team.table.username.current': {
+    id: 'library.authz.team.table.username.current',
+    defaultMessage: ' (Me)',
+    description: 'Libraries team management table indicative of current user',
   },
   'library.authz.team.table.email': {
     id: 'library.team.table.email',

src/types.ts

@@ -10,7 +10,6 @@ export interface PermissionValidationResponse extends PermissionValidationReques
 
 // Libraries AuthZ types
 export interface TeamMember {
-  displayName: string;
   username: string;
   email: string;
   roles: string[];