Rename fallbackUsername to fallbackDisplayName

Author: JakubKorytko

src/components/ReportActionAvatars/ReportActionAvatar.tsx

@@ -107,7 +107,7 @@ function ReportActionAvatarSingle({
     fallbackIcon,
     isInReportAction,
     useProfileNavigationWrapper,
-    fallbackUsername,
+    fallbackDisplayName,
 }: {
     avatar: IconType | undefined;
     size: ValueOf<typeof CONST.AVATAR_SIZE>;
@@ -118,7 +118,7 @@ function ReportActionAvatarSingle({
     fallbackIcon?: AvatarSource;
     isInReportAction?: boolean;
     useProfileNavigationWrapper?: boolean;
-    fallbackUsername?: string;
+    fallbackDisplayName?: string;
 }) {
     const StyleUtils = useStyleUtils();
     const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
@@ -130,7 +130,7 @@ function ReportActionAvatarSingle({
             icon={avatar}
             fallbackUserDetails={{
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                displayName: fallbackUsername || avatar?.name,
+                displayName: fallbackDisplayName || avatar?.name,
             }}
             shouldRender={shouldShowTooltip}
         >
@@ -160,7 +160,7 @@ function ReportActionAvatarSubscript({
     noRightMarginOnContainer,
     subscriptAvatarBorderColor,
     subscriptCardFeed,
-    fallbackUsername,
+    fallbackDisplayName,
     useProfileNavigationWrapper,
 }: {
     primaryAvatar: IconType;
@@ -170,7 +170,7 @@ function ReportActionAvatarSubscript({
     noRightMarginOnContainer?: boolean;
     subscriptAvatarBorderColor?: ColorValue;
     subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
-    fallbackUsername?: string;
+    fallbackDisplayName?: string;
     useProfileNavigationWrapper?: boolean;
 }) {
     const theme = useTheme();
@@ -210,7 +210,7 @@ function ReportActionAvatarSubscript({
                 icon={primaryAvatar}
                 fallbackUserDetails={{
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    displayName: fallbackUsername || primaryAvatar.name,
+                    displayName: fallbackDisplayName || primaryAvatar.name,
                 }}
             >
                 <View>
@@ -316,13 +316,13 @@ function ReportActionAvatarMultipleHorizontal({
     isInReportAction,
     sort: sortAvatars,
     useProfileNavigationWrapper,
-    fallbackUsername,
+    fallbackDisplayName,
 }: HorizontalStacking & {
     size: ValueOf<typeof CONST.AVATAR_SIZE>;
     shouldShowTooltip: boolean;
     icons: IconType[];
     isInReportAction: boolean;
-    fallbackUsername?: string;
+    fallbackDisplayName?: string;
     useProfileNavigationWrapper?: boolean;
 }) {
     const theme = useTheme();
@@ -384,7 +384,7 @@ function ReportActionAvatarMultipleHorizontal({
                     icon={icon}
                     fallbackUserDetails={{
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                        displayName: fallbackUsername || icon.name,
+                        displayName: fallbackDisplayName || icon.name,
                     }}
                     shouldRender={shouldShowTooltip}
                 >
@@ -460,7 +460,7 @@ function ReportActionAvatarMultipleDiagonal({
     secondaryAvatarContainerStyle,
     isHovered = false,
     useProfileNavigationWrapper,
-    fallbackUsername,
+    fallbackDisplayName,
 }: {
     size: ValueOf<typeof CONST.AVATAR_SIZE>;
     shouldShowTooltip: boolean;
@@ -470,7 +470,7 @@ function ReportActionAvatarMultipleDiagonal({
     secondaryAvatarContainerStyle?: StyleProp<ViewStyle>;
     isHovered?: boolean;
     useProfileNavigationWrapper?: boolean;
-    fallbackUsername?: string;
+    fallbackDisplayName?: string;
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -532,7 +532,7 @@ function ReportActionAvatarMultipleDiagonal({
                     icon={icons.at(0)}
                     fallbackUserDetails={{
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                        displayName: fallbackUsername || icons.at(0)?.name,
+                        displayName: fallbackDisplayName || icons.at(0)?.name,
                     }}
                     shouldRender={shouldShowTooltip}
                 >
@@ -564,7 +564,7 @@ function ReportActionAvatarMultipleDiagonal({
                             icon={icons.at(1)}
                             fallbackUserDetails={{
                                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                                displayName: fallbackUsername || icons.at(1)?.name,
+                                displayName: fallbackDisplayName || icons.at(1)?.name,
                             }}
                             shouldRender={shouldShowTooltip}
                         >

src/components/ReportActionAvatars/index.tsx

@@ -55,8 +55,8 @@ type ReportActionAvatarsProps = {
     /** Whether we want to be redirected to profile on avatars click */
     useProfileNavigationWrapper?: boolean;
 
-    /** Username used as a fallback for avatar tooltip */
-    fallbackUsername?: string;
+    /** Display name used as a fallback for avatar tooltip */
+    fallbackDisplayName?: string;
 };
 
 /**
@@ -84,7 +84,7 @@ function ReportActionAvatars({
     useMidSubscriptSizeForMultipleAvatars = false,
     isInReportAction = false,
     useProfileNavigationWrapper,
-    fallbackUsername,
+    fallbackDisplayName,
 }: ReportActionAvatarsProps) {
     const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID);
 
@@ -135,7 +135,7 @@ function ReportActionAvatars({
                 subscriptAvatarBorderColor={subscriptAvatarBorderColor}
                 subscriptCardFeed={subscriptCardFeed}
                 useProfileNavigationWrapper={useProfileNavigationWrapper}
-                fallbackUsername={fallbackUsername}
+                fallbackDisplayName={fallbackDisplayName}
             />
         );
     }
@@ -150,7 +150,7 @@ function ReportActionAvatars({
                 isInReportAction={isInReportAction}
                 shouldShowTooltip={shouldShowTooltip}
                 useProfileNavigationWrapper={useProfileNavigationWrapper}
-                fallbackUsername={fallbackUsername}
+                fallbackDisplayName={fallbackDisplayName}
             />
         );
     }
@@ -165,7 +165,7 @@ function ReportActionAvatars({
                 useMidSubscriptSize={useMidSubscriptSizeForMultipleAvatars}
                 secondaryAvatarContainerStyle={secondaryAvatarContainerStyle}
                 isHovered={isHovered}
-                fallbackUsername={fallbackUsername}
+                fallbackDisplayName={fallbackDisplayName}
                 useProfileNavigationWrapper={useProfileNavigationWrapper}
             />
         );
@@ -180,7 +180,7 @@ function ReportActionAvatars({
             accountID={Number(delegateAccountID ?? primaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
             delegateAccountID={source.action?.delegateAccountID}
             fallbackIcon={primaryAvatar.fallbackIcon}
-            fallbackUsername={fallbackUsername}
+            fallbackDisplayName={fallbackDisplayName}
             useProfileNavigationWrapper={useProfileNavigationWrapper}
         />
     );

src/components/SelectionList/UserListItem.tsx

@@ -112,7 +112,7 @@ function UserListItem<TItem extends ListItem>({
                             accountIDs={[Number(item.accountID)]}
                             policyID={!item.reportID && !item.accountID ? item.policyID : undefined}
                             singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
-                            fallbackUsername={item.text ?? item.alternateText ?? undefined}
+                            fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
                         />
                     )}
                     <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>