Skip to content

Commit 067f414

Browse files
authored
Merge pull request Expensify#77799 from Expensify/jsenyitko-release-4-reportid-longreportid
Add reportID and longReportID to custom columns
2 parents 904a154 + aa1a6d5 commit 067f414

8 files changed

Lines changed: 83 additions & 9 deletions

File tree

src/CONST/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6696,6 +6696,8 @@ const CONST = {
66966696
TO: this.TABLE_COLUMNS.TO,
66976697
CATEGORY: this.TABLE_COLUMNS.CATEGORY,
66986698
TAG: this.TABLE_COLUMNS.TAG,
6699+
REPORT_ID: this.TABLE_COLUMNS.REPORT_ID,
6700+
BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID,
66996701
REIMBURSABLE: this.TABLE_COLUMNS.REIMBURSABLE,
67006702
BILLABLE: this.TABLE_COLUMNS.BILLABLE,
67016703
STATUS: this.TABLE_COLUMNS.STATUS,
@@ -6710,6 +6712,8 @@ const CONST = {
67106712
TITLE: this.TABLE_COLUMNS.TITLE,
67116713
FROM: this.TABLE_COLUMNS.FROM,
67126714
TO: this.TABLE_COLUMNS.TO,
6715+
REPORT_ID: this.TABLE_COLUMNS.REPORT_ID,
6716+
BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID,
67136717
ACTION: this.TABLE_COLUMNS.ACTION,
67146718
},
67156719
INVOICE: {},
@@ -6807,6 +6811,8 @@ const CONST = {
68076811
WITHDRAWAL_ID: 'withdrawalID',
68086812
AVATAR: 'avatar',
68096813
STATUS: 'status',
6814+
REPORT_ID: 'reportID',
6815+
BASE_62_REPORT_ID: 'base62ReportID',
68106816
TAX: 'tax',
68116817
},
68126818
SYNTAX_OPERATORS: {

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
1212
import useStyleUtils from '@hooks/useStyleUtils';
1313
import useTheme from '@hooks/useTheme';
1414
import useThemeStyles from '@hooks/useThemeStyles';
15+
import getBase62ReportID from '@libs/getBase62ReportID';
1516
import variables from '@styles/variables';
1617
import CONST from '@src/CONST';
1718
import type {Policy} from '@src/types/onyx';
1819
import ActionCell from './ActionCell';
1920
import DateCell from './DateCell';
2021
import StatusCell from './StatusCell';
21-
import TitleCell from './TitleCell';
22+
import TextCell from './TextCell';
2223
import TotalCell from './TotalCell';
2324
import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow';
2425
import UserInfoCell from './UserInfoCell';
@@ -116,7 +117,7 @@ function ExpenseReportListItemRow({
116117
),
117118
[CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
118119
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
119-
<TitleCell
120+
<TextCell
120121
text={item.reportName ?? ''}
121122
isLargeScreenWidth={isLargeScreenWidth}
122123
/>
@@ -152,6 +153,16 @@ function ExpenseReportListItemRow({
152153
/>
153154
</View>
154155
),
156+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: (
157+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.REPORT_ID)]}>
158+
<TextCell text={item.reportID === CONST.REPORT.UNREPORTED_REPORT_ID ? '' : item.reportID} />
159+
</View>
160+
),
161+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: (
162+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID)]}>
163+
<TextCell text={item.reportID === CONST.REPORT.UNREPORTED_REPORT_ID ? '' : getBase62ReportID(Number(item.reportID))} />
164+
</View>
165+
),
155166
[CONST.SEARCH.TABLE_COLUMNS.ACTION]: (
156167
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
157168
<ActionCell

src/components/SelectionListWithSections/Search/TitleCell.tsx renamed to src/components/SelectionListWithSections/Search/TextCell.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React from 'react';
22
import TextWithTooltip from '@components/TextWithTooltip';
33
import useThemeStyles from '@hooks/useThemeStyles';
44

5-
type TitleCellProps = {
6-
text: string;
7-
isLargeScreenWidth: boolean;
5+
type TextCellProps = {
6+
text?: string;
7+
isLargeScreenWidth?: boolean;
88
};
99

10-
function TitleCell({text, isLargeScreenWidth}: TitleCellProps) {
10+
function TextCell({text = '', isLargeScreenWidth = true}: TextCellProps) {
1111
const styles = useThemeStyles();
1212

1313
return (
@@ -19,4 +19,4 @@ function TitleCell({text, isLargeScreenWidth}: TitleCellProps) {
1919
);
2020
}
2121

22-
export default TitleCell;
22+
export default TextCell;

src/components/SelectionListWithSections/SearchTableHeader.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,14 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
104104
columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
105105
translationKey: groupBy ? 'common.total' : 'iou.amount',
106106
},
107+
{
108+
columnName: CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID,
109+
translationKey: 'common.reportID',
110+
},
111+
{
112+
columnName: CONST.SEARCH.TABLE_COLUMNS.REPORT_ID,
113+
translationKey: 'common.longID',
114+
},
107115
{
108116
columnName: CONST.SEARCH.TABLE_COLUMNS.TITLE,
109117
translationKey: 'common.title',
@@ -200,6 +208,14 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
200208
columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL,
201209
translationKey: 'common.total',
202210
},
211+
{
212+
columnName: CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID,
213+
translationKey: 'common.reportID',
214+
},
215+
{
216+
columnName: CONST.SEARCH.TABLE_COLUMNS.REPORT_ID,
217+
translationKey: 'common.longID',
218+
},
203219
{
204220
columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
205221
translationKey: 'common.action',

src/components/TransactionItemRow/index.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
1010
import ActionCell from '@components/SelectionListWithSections/Search/ActionCell';
1111
import DateCell from '@components/SelectionListWithSections/Search/DateCell';
1212
import StatusCell from '@components/SelectionListWithSections/Search/StatusCell';
13-
import TitleCell from '@components/SelectionListWithSections/Search/TitleCell';
13+
import TextCell from '@components/SelectionListWithSections/Search/TextCell';
1414
import UserInfoCell from '@components/SelectionListWithSections/Search/UserInfoCell';
1515
import Text from '@components/Text';
1616
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -20,6 +20,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
2020
import useTheme from '@hooks/useTheme';
2121
import useThemeStyles from '@hooks/useThemeStyles';
2222
import {isCategoryMissing} from '@libs/CategoryUtils';
23+
import getBase62ReportID from '@libs/getBase62ReportID';
2324
import {isSettled} from '@libs/ReportUtils';
2425
import StringUtils from '@libs/StringUtils';
2526
import {
@@ -429,6 +430,16 @@ function TransactionItemRow({
429430
/>
430431
</View>
431432
),
433+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: (
434+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.REPORT_ID)]}>
435+
<TextCell text={transactionItem.reportID === CONST.REPORT.UNREPORTED_REPORT_ID ? '' : transactionItem.reportID} />
436+
</View>
437+
),
438+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: (
439+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID)]}>
440+
<TextCell text={transactionItem.reportID === CONST.REPORT.UNREPORTED_REPORT_ID ? '' : getBase62ReportID(Number(transactionItem.reportID))} />
441+
</View>
442+
),
432443
[CONST.SEARCH.TABLE_COLUMNS.TAX]: (
433444
<View
434445
key={CONST.SEARCH.TABLE_COLUMNS.TAX}
@@ -442,7 +453,7 @@ function TransactionItemRow({
442453
),
443454
[CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
444455
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
445-
<TitleCell
456+
<TextCell
446457
text={transactionItem.report?.reportName ?? ''}
447458
isLargeScreenWidth={isLargeScreenWidth}
448459
/>

src/libs/SearchUIUtils.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2040,6 +2040,14 @@ function getSortedTransactionData(
20402040
return data;
20412041
}
20422042

2043+
if (sortBy === CONST.SEARCH.TABLE_COLUMNS.REPORT_ID || sortBy === CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID) {
2044+
return data.sort((a, b) => {
2045+
const aValue = a.reportID;
2046+
const bValue = b.reportID;
2047+
return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare, true);
2048+
});
2049+
}
2050+
20432051
const sortingProperty = transactionColumnNamesToSortingProperty[sortBy];
20442052

20452053
if (sortBy === CONST.SEARCH.TABLE_COLUMNS.TITLE) {
@@ -2134,6 +2142,14 @@ function getSortedReportData(
21342142
});
21352143
}
21362144

2145+
if (sortBy === CONST.SEARCH.TABLE_COLUMNS.REPORT_ID || sortBy === CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID) {
2146+
return data.sort((a, b) => {
2147+
const aValue = a.reportID;
2148+
const bValue = b.reportID;
2149+
return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare, true);
2150+
});
2151+
}
2152+
21372153
const sortingProperty = expenseReportColumnNamesToSortingProperty[sortBy];
21382154

21392155
if (!sortingProperty) {
@@ -2297,6 +2313,10 @@ function getSearchColumnTranslationKey(columnId: SearchCustomColumnIds): Transla
22972313
return 'common.title';
22982314
case CONST.SEARCH.TABLE_COLUMNS.STATUS:
22992315
return 'common.status';
2316+
case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID:
2317+
return 'common.longID';
2318+
case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID:
2319+
return 'common.reportID';
23002320
}
23012321
}
23022322

@@ -2684,6 +2704,8 @@ function getColumnsToShow(
26842704
[CONST.SEARCH.TABLE_COLUMNS.FROM]: true,
26852705
[CONST.SEARCH.TABLE_COLUMNS.TO]: true,
26862706
[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,
2707+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false,
2708+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false,
26872709
[CONST.SEARCH.TABLE_COLUMNS.ACTION]: true,
26882710
};
26892711

@@ -2760,6 +2782,8 @@ function getColumnsToShow(
27602782
[CONST.SEARCH.TABLE_COLUMNS.BILLABLE]: false,
27612783
[CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: false,
27622784
[CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: true,
2785+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false,
2786+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false,
27632787
[CONST.SEARCH.TABLE_COLUMNS.TITLE]: false,
27642788
[CONST.SEARCH.TABLE_COLUMNS.STATUS]: false,
27652789
[CONST.SEARCH.TABLE_COLUMNS.ACTION]: true,

src/styles/utils/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1778,6 +1778,8 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
17781778
case CONST.SEARCH.TABLE_COLUMNS.ACTION:
17791779
columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
17801780
break;
1781+
case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID:
1782+
case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID:
17811783
case CONST.SEARCH.TABLE_COLUMNS.MERCHANT:
17821784
case CONST.SEARCH.TABLE_COLUMNS.FROM:
17831785
case CONST.SEARCH.TABLE_COLUMNS.TO:

tests/unit/Search/SearchUIUtilsTest.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2770,6 +2770,8 @@ describe('SearchUIUtils', () => {
27702770
[CONST.SEARCH.TABLE_COLUMNS.TO]: true,
27712771
[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,
27722772
[CONST.SEARCH.TABLE_COLUMNS.ACTION]: true,
2773+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false,
2774+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false,
27732775
});
27742776
});
27752777

@@ -2789,6 +2791,8 @@ describe('SearchUIUtils', () => {
27892791
// Total should always be visible
27902792
[CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,
27912793
[CONST.SEARCH.TABLE_COLUMNS.ACTION]: false,
2794+
[CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false,
2795+
[CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false,
27922796
});
27932797
});
27942798

0 commit comments

Comments
 (0)