Skip to content

added Avatar column to Report table column selector #89421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
inimaga merged 4 commits into from
May 8, 2026
Merged

added Avatar column to Report table column selector #89421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4609dc9
added Avatar column to report table column selector
mukhrr May 2, 2026
298b600
Remove de.ts avatar translation; keep only en/es
mukhrr May 2, 2026
57a7d5c
replaced hardcoded avatar column with dynamic one
mukhrr May 4, 2026
be75ecd
[TESTS] updated replaced hardcoded avatar column with dynamic one test
mukhrr May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/CONST/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7646,6 +7646,7 @@ const CONST = {
ACTION: this.TABLE_COLUMNS.ACTION,
},
EXPENSE_REPORT: {
AVATAR: this.TABLE_COLUMNS.AVATAR,
DATE: this.TABLE_COLUMNS.DATE,
SUBMITTED: this.TABLE_COLUMNS.SUBMITTED,
APPROVED: this.TABLE_COLUMNS.APPROVED,
Expand Down Expand Up @@ -7690,17 +7691,20 @@ const CONST = {
get GROUP_CUSTOM_COLUMNS() {
return {
FROM: {
AVATAR: this.TABLE_COLUMNS.AVATAR,
FROM: this.TABLE_COLUMNS.GROUP_FROM,
EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
},
CARD: {
AVATAR: this.TABLE_COLUMNS.AVATAR,
CARD: this.TABLE_COLUMNS.GROUP_CARD,
FEED: this.TABLE_COLUMNS.GROUP_FEED,
EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
},
WITHDRAWAL_ID: {
AVATAR: this.TABLE_COLUMNS.AVATAR,
WITHDRAWN: this.TABLE_COLUMNS.GROUP_WITHDRAWN,
WITHDRAWAL_STATUS: this.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS,
BANK_ACCOUNT: this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
Expand Down Expand Up @@ -7758,6 +7762,7 @@ const CONST = {
this.TABLE_COLUMNS.TOTAL_AMOUNT,
],
EXPENSE_REPORT: [
this.TABLE_COLUMNS.AVATAR,
this.TABLE_COLUMNS.DATE,
this.TABLE_COLUMNS.STATUS,
this.TABLE_COLUMNS.TITLE,
Expand All @@ -7774,9 +7779,10 @@ const CONST = {
},
get GROUP_DEFAULT_COLUMNS() {
return {
FROM: [this.TABLE_COLUMNS.GROUP_FROM, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
CARD: [this.TABLE_COLUMNS.GROUP_CARD, this.TABLE_COLUMNS.GROUP_FEED, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
FROM: [this.TABLE_COLUMNS.AVATAR, this.TABLE_COLUMNS.GROUP_FROM, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
CARD: [this.TABLE_COLUMNS.AVATAR, this.TABLE_COLUMNS.GROUP_CARD, this.TABLE_COLUMNS.GROUP_FEED, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
WITHDRAWAL_ID: [
this.TABLE_COLUMNS.AVATAR,
this.TABLE_COLUMNS.GROUP_WITHDRAWN,
this.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS,
this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
Expand Down
38 changes: 19 additions & 19 deletions src/components/Search/SearchList/ListItem/CardListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,24 @@ function CardListItemHeader<TItem extends ListItem>({
StyleUtils.getItemBackgroundColorStyle(!!cardItem.isSelected, !!isFocused, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ?? theme.highlightBG;

const columnComponents = {
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
>
<UserDetailsTooltip accountID={cardItem.accountID}>
<View>
<ReportActionAvatars
subscriptCardFeed={cardItem.bank as CompanyCardFeed}
subscriptAvatarBorderColor={backgroundColor}
noRightMarginOnSubscriptContainer
accountIDs={[cardItem.accountID]}
size={CONST.AVATAR_SIZE.SMALL}
/>
</View>
</UserDetailsTooltip>
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD}
Expand Down Expand Up @@ -155,25 +173,7 @@ function CardListItemHeader<TItem extends ListItem>({
</View>
</View>
)}
{isLargeScreenWidth && (
<>
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
<UserDetailsTooltip accountID={cardItem.accountID}>
<View>
<ReportActionAvatars
subscriptCardFeed={cardItem.bank as CompanyCardFeed}
subscriptAvatarBorderColor={backgroundColor}
noRightMarginOnSubscriptContainer
accountIDs={[cardItem.accountID]}
size={CONST.AVATAR_SIZE.SMALL}
/>
</View>
</UserDetailsTooltip>
</View>

{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</>
)}
{isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</View>
{!isLargeScreenWidth && (
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>
Expand Down
35 changes: 18 additions & 17 deletions src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,25 @@ function ExpenseReportListItemRow({
const currency = item.currency ?? CONST.CURRENCY.USD;
const {totalDisplaySpend = 0, nonReimbursableSpend = 0, reimbursableSpend = 0, isAllScanning: isScanning = false} = item;

// Calculate the correct border color for avatars based on hover and focus states
const finalAvatarBorderColor =
StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused || !!isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
theme.highlightBG;

const columnComponents = {
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>
<SearchReportAvatar
primaryAvatar={item.primaryAvatar}
secondaryAvatar={item.secondaryAvatar}
avatarType={item.avatarType}
shouldShowTooltip={showTooltip}
subscriptAvatarBorderColor={finalAvatarBorderColor}
reportID={item.reportID}
isLargeScreenWidth={isLargeScreenWidth}
/>
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.DATE]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear})]}>
<DateCell
Expand Down Expand Up @@ -230,11 +248,6 @@ function ExpenseReportListItemRow({
),
};

// Calculate the correct border color for avatars based on hover and focus states
const finalAvatarBorderColor =
StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused || !!isHovered, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
theme.highlightBG;

if (!isLargeScreenWidth) {
const filteredTransactions = item.transactions?.filter((t) => t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
const expenseCount = (filteredTransactions?.length ? filteredTransactions.length : undefined) ?? item.transactionCount ?? 0;
Expand Down Expand Up @@ -303,18 +316,6 @@ function ExpenseReportListItemRow({
sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPENSE_REPORT_CHECKBOX}
/>
)}
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR), styles.alignItemsStretch]}>
<SearchReportAvatar
primaryAvatar={item.primaryAvatar}
secondaryAvatar={item.secondaryAvatar}
avatarType={item.avatarType}
shouldShowTooltip={showTooltip}
subscriptAvatarBorderColor={finalAvatarBorderColor}
reportID={item.reportID}
isLargeScreenWidth={isLargeScreenWidth}
/>
</View>

{columns.map((column) => {
const CellComponent = columnComponents[column as keyof typeof columnComponents];
return <Fragment key={column}>{CellComponent}</Fragment>;
Expand Down
38 changes: 19 additions & 19 deletions src/components/Search/SearchList/ListItem/MemberListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,24 @@ function MemberListItemHeader<TItem extends ListItem>({
const formattedLogin = formatPhoneNumber(memberItem.login ?? '');

const columnComponents = {
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
>
<UserDetailsTooltip accountID={memberItem.accountID}>
<View>
<Avatar
source={memberItem.avatar}
type={CONST.ICON_TYPE_AVATAR}
name={formattedDisplayName}
avatarID={memberItem.accountID}
size={CONST.AVATAR_SIZE.SMALL}
/>
</View>
</UserDetailsTooltip>
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM}
Expand Down Expand Up @@ -143,25 +161,7 @@ function MemberListItemHeader<TItem extends ListItem>({
</View>
</View>
)}
{!!isLargeScreenWidth && (
<>
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
<UserDetailsTooltip accountID={memberItem.accountID}>
<View>
<Avatar
source={memberItem.avatar}
type={CONST.ICON_TYPE_AVATAR}
name={formattedDisplayName}
avatarID={memberItem.accountID}
size={CONST.AVATAR_SIZE.SMALL}
/>
</View>
</UserDetailsTooltip>
</View>

{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</>
)}
{!!isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</View>
{!isLargeScreenWidth && (
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>
Expand Down
28 changes: 14 additions & 14 deletions src/components/Search/SearchList/ListItem/WithdrawalIDListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,19 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
})();

const columnComponents = {
[CONST.SEARCH.TABLE_COLUMNS.AVATAR]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.AVATAR}
style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}
>
<Icon
src={icon}
width={iconSize}
height={iconSize}
additionalStyles={iconStyles}
/>
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.GROUP_BANK_ACCOUNT]: (
<View
key={CONST.SEARCH.TABLE_COLUMNS.BANK_ACCOUNT}
Expand Down Expand Up @@ -203,20 +216,7 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({
</View>
</View>
)}
{isLargeScreenWidth && (
<>
<View style={StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.AVATAR)}>
<Icon
src={icon}
width={iconSize}
height={iconSize}
additionalStyles={iconStyles}
/>
</View>

{columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</>
)}
{isLargeScreenWidth && columns?.map((column) => columnComponents[column as keyof typeof columnComponents])}
</View>
{!isLargeScreenWidth && (
<View style={[styles.flexShrink0, styles.flexRow, styles.alignItemsCenter]}>
Expand Down
1 change: 1 addition & 0 deletions src/languages/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'Nächster Monat',
previousYear: 'Vorheriges Jahr',
nextYear: 'Nächstes Jahr',
avatar: 'Avatar',
},
socials: {
podcast: 'Folgen Sie uns auf Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ const translations = {
members: 'Members',
invite: 'Invite',
here: 'here',
avatar: 'Avatar',
Comment thread
mukhrr marked this conversation as resolved.
date: 'Date',
dob: 'Date of birth',
currentYear: 'Current year',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const translations: TranslationDeepObject<typeof en> = {
members: 'Miembros',
invite: 'Invitar',
here: 'aquí',
avatar: 'Avatar',
date: 'Fecha',
dob: 'Fecha de nacimiento',
currentYear: 'Año actual',
Expand Down
1 change: 1 addition & 0 deletions src/languages/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'Le mois prochain',
previousYear: 'Année précédente',
nextYear: 'L’an prochain',
avatar: 'Avatar',
},
socials: {
podcast: 'Suivez-nous sur Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'Il prossimo mese',
previousYear: 'Anno precedente',
nextYear: "L'anno prossimo",
avatar: 'Avatar',
},
socials: {
podcast: 'Seguici su Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: '来月',
previousYear: '前年',
nextYear: '来年',
avatar: 'アバター',
},
socials: {
podcast: 'ポッドキャストでフォロー',
Expand Down
1 change: 1 addition & 0 deletions src/languages/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'Volgende maand',
previousYear: 'Vorig jaar',
nextYear: 'Volgend jaar',
avatar: 'Avatar',
},
socials: {
podcast: 'Volg ons op Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/pl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'W przyszłym miesiącu',
previousYear: 'Poprzedni rok',
nextYear: 'W przyszłym roku',
avatar: 'Avatar',
},
socials: {
podcast: 'Śledź nas na Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/pt-BR.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: 'Próximo mês',
previousYear: 'Ano anterior',
nextYear: 'Ano que vem',
avatar: 'Avatar',
},
socials: {
podcast: 'Siga-nos no Podcast',
Expand Down
1 change: 1 addition & 0 deletions src/languages/zh-hans.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,7 @@ const translations: TranslationDeepObject<typeof en> = {
nextMonth: '下个月',
previousYear: '上一年',
nextYear: '明年',
avatar: '头像',
},
socials: {
podcast: '在播客上关注我们',
Expand Down
14 changes: 7 additions & 7 deletions src/libs/SearchUIUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3501,9 +3501,9 @@ const groupBySortFunction: Record<SearchGroupBy, GroupBySortFunction> = {
};

const groupByRequiredColumns: Partial<Record<SearchGroupBy, SearchColumnType[]>> = {
[CONST.SEARCH.GROUP_BY.FROM]: [CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM],
[CONST.SEARCH.GROUP_BY.CARD]: [CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD],
[CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: [CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID],
[CONST.SEARCH.GROUP_BY.FROM]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM],
[CONST.SEARCH.GROUP_BY.CARD]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD],
[CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID],
[CONST.SEARCH.GROUP_BY.CATEGORY]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_CATEGORY],
[CONST.SEARCH.GROUP_BY.MERCHANT]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_MERCHANT],
[CONST.SEARCH.GROUP_BY.TAG]: [CONST.SEARCH.TABLE_COLUMNS.GROUP_TAG],
Expand Down Expand Up @@ -4010,6 +4010,8 @@ function getCustomColumnDefault(value?: SearchDataTypes | SearchGroupBy): Search

function getSearchColumnTranslationKey(column: SearchColumnType): TranslationPaths {
switch (column) {
case CONST.SEARCH.TABLE_COLUMNS.AVATAR:
return 'common.avatar';
case CONST.SEARCH.TABLE_COLUMNS.DATE:
return 'common.date';
case CONST.SEARCH.TABLE_COLUMNS.SUBMITTED:
Expand Down Expand Up @@ -5099,7 +5101,7 @@ function getColumnsToShow({
}

// If the user has set custom columns, use their order then add required columns
const requiredColumns = new Set<SearchColumnType>([CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.TOTAL]);
const requiredColumns = new Set<SearchColumnType>([CONST.SEARCH.TABLE_COLUMNS.TOTAL]);
const result: SearchColumnType[] = [];

for (const col of requiredColumns) {
Expand Down Expand Up @@ -5261,9 +5263,7 @@ function getColumnsToShow({
// Don't return early — fall through to updateColumns to detect empty columns
customResult = result;
} else {
// Search page: prepend AVATAR, TYPE
result.push(CONST.SEARCH.TABLE_COLUMNS.AVATAR);
addedColumns.add(CONST.SEARCH.TABLE_COLUMNS.AVATAR);
// Search page: prepend TYPE
result.push(CONST.SEARCH.TABLE_COLUMNS.TYPE);
addedColumns.add(CONST.SEARCH.TABLE_COLUMNS.TYPE);

Expand Down
Loading
Loading