Fix username display on user group dashboard table

Author: puranban

community-dashboard/app/components/MemberItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, generatePath } from 'react-router-dom';
-import { isDefined } from '@togglecorp/fujs';
+import { isDefined, isFalsyString, isNotDefined } from '@togglecorp/fujs';
 
 import NumberOutput from '#components/NumberOutput';
 import routes from '#base/configs/routes';
@@ -27,14 +27,17 @@ function MemberItem(props: Props) {
         { userId: member.userId },
     );
 
+    // NOTE: OSM user does not have username stored
+    const memberName = isFalsyString(member.username) ? member.userId : member.username;
+
     return (
         <div className={styles.member}>
             <div className={styles.memberName}>
                 <Link
                     className={styles.link}
                     to={path}
                 >
-                    {member.username}
+                    {memberName}
                 </Link>
                 {!member.isActive && (
                     <div className={styles.inactive}>

community-dashboard/app/views/UserGroupDashboard/index.tsx

@@ -137,7 +137,7 @@ const USER_MEMBERSHIPS_EXPORT = gql`
 type UserGroupMember = NonNullable<NonNullable<NonNullable<UserGroupStatsQuery['userGroup']>['userMemberships']>['items']>[number];
 
 function memberKeySelector(member: UserGroupMember) {
-    return member.username;
+    return member.userId;
 }
 
 interface DateRangeValue {