Add workspace column to expense and reports

src/CONST/index.ts

@@ -6701,6 +6701,7 @@ const CONST = {
                     MERCHANT: this.TABLE_COLUMNS.MERCHANT,
                     FROM: this.TABLE_COLUMNS.FROM,
                     TO: this.TABLE_COLUMNS.TO,
+                    POLICY_NAME: this.TABLE_COLUMNS.POLICY_NAME,
                     CARD: this.TABLE_COLUMNS.CARD,
                     CATEGORY: this.TABLE_COLUMNS.CATEGORY,
                     TAG: this.TABLE_COLUMNS.TAG,
@@ -6723,6 +6724,7 @@ const CONST = {
                     TITLE: this.TABLE_COLUMNS.TITLE,
                     FROM: this.TABLE_COLUMNS.FROM,
                     TO: this.TABLE_COLUMNS.TO,
+                    POLICY_NAME: this.TABLE_COLUMNS.POLICY_NAME,
                     REIMBURSABLE_TOTAL: this.TABLE_COLUMNS.REIMBURSABLE_TOTAL,
                     NON_REIMBURSABLE_TOTAL: this.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL,
                     REPORT_ID: this.TABLE_COLUMNS.REPORT_ID,
@@ -6823,6 +6825,7 @@ const CONST = {
             IN: 'in',
             COMMENTS: 'comments',
             CARD: 'card',
+            POLICY_NAME: 'policyname',
             WITHDRAWAL_ID: 'withdrawalID',
             AVATAR: 'avatar',
             STATUS: 'status',

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

@@ -23,6 +23,7 @@ import TextCell from './TextCell';
 import TotalCell from './TotalCell';
 import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow';
 import UserInfoCell from './UserInfoCell';
+import WorkspaceCell from './WorkspaceCell';
 
 type ExpenseReportListItemRowProps = {
     item: ExpenseReportListItemType;
@@ -196,6 +197,14 @@ function ExpenseReportListItemRow({
                 />
             </View>
         ),
+        [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: (
+            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME)]}>
+                <WorkspaceCell
+                    policyID={item.policyID}
+                    report={item}
+                />
+            </View>
+        ),
     };
 
     const thereIsFromAndTo = !!item?.from && !!item?.to;

src/components/SelectionListWithSections/Search/WorkspaceCell.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {View} from 'react-native';
+import Avatar from '@components/Avatar';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getPolicyName, getWorkspaceIcon} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import type {Report} from '@src/types/onyx';
+
+type WorkspaceCellProps = {
+    policyID?: string;
+    report?: Report;
+};
+
+function WorkspaceCell({policyID, report}: WorkspaceCellProps) {
+    const styles = useThemeStyles();
+    const icon = getWorkspaceIcon(report);
+    const name = getPolicyName({report});
+
+    if (report?.type !== CONST.REPORT.TYPE.EXPENSE && report?.type !== CONST.REPORT.TYPE.INVOICE) {
+        return null;
+    }
+
+    if (!icon || !name) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.gap3, styles.flex1, styles.alignItemsCenter]}>
+            <Avatar
+                imageStyles={[styles.alignSelfCenter]}
+                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                source={icon.source}
+                avatarID={policyID}
+                name={name ?? ''}
+                type={CONST.ICON_TYPE_WORKSPACE}
+            />
+            <TextWithTooltip
+                text={name ?? ''}
+                shouldShowTooltip
+                style={[styles.flex1, styles.flexGrow1]}
+            />
+        </View>
+    );
+}
+
+WorkspaceCell.displayName = 'ReportInfoCell';
+
+export default WorkspaceCell;

src/components/SelectionListWithSections/SearchTableHeader.tsx

@@ -66,6 +66,10 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
         translationKey: 'common.to',
         canBeMissing: true,
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME,
+        translationKey: 'workspace.common.workspace',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.CARD,
         translationKey: 'common.card',
@@ -212,6 +216,10 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
         columnName: CONST.SEARCH.TABLE_COLUMNS.TO,
         translationKey: 'common.to',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME,
+        translationKey: 'workspace.common.workspace',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL,
         translationKey: 'common.reimbursableTotal',

src/components/TransactionItemRow/index.tsx

@@ -13,6 +13,7 @@ import StatusCell from '@components/SelectionListWithSections/Search/StatusCell'
 import TextCell from '@components/SelectionListWithSections/Search/TextCell';
 import AmountCell from '@components/SelectionListWithSections/Search/TotalCell';
 import UserInfoCell from '@components/SelectionListWithSections/Search/UserInfoCell';
+import WorkspaceCell from '@components/SelectionListWithSections/Search/WorkspaceCell';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -499,6 +500,14 @@ function TransactionItemRow({
                     />
                 </View>
             ),
+            [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: (
+                <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME)]}>
+                    <WorkspaceCell
+                        policyID={transactionItem.report?.policyID}
+                        report={transactionItem.report}
+                    />
+                </View>
+            ),
             [CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
                 <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
                     <TextCell

src/libs/SearchUIUtils.ts

@@ -93,6 +93,7 @@ import {
     generateReportID,
     getIcons,
     getPersonalDetailsForAccountID,
+    getPolicyName,
     getReportName,
     getReportOrDraftReport,
     getReportStatusTranslation,
@@ -2053,6 +2054,17 @@ function getSortedTransactionData(
 
     const sortingProperty = transactionColumnNamesToSortingProperty[sortBy];
 
+    if (sortBy === CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME) {
+        return data.sort((a, b) => {
+            const aIsUnreported = a.report?.type !== CONST.REPORT.TYPE.EXPENSE && a.report?.type !== CONST.REPORT.TYPE.INVOICE;
+            const bIsUnreported = b.report?.type !== CONST.REPORT.TYPE.EXPENSE && b.report?.type !== CONST.REPORT.TYPE.INVOICE;
+
+            const aValue = !aIsUnreported ? getPolicyName({report: a.report}) : '';
+            const bValue = !bIsUnreported ? getPolicyName({report: b.report}) : '';
+            return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare);
+        });
+    }
+
     if (sortBy === CONST.SEARCH.TABLE_COLUMNS.TITLE) {
         return data.sort((a, b) => {
             const aValue = a.report?.reportName ?? '';
@@ -2161,6 +2173,14 @@ function getSortedReportData(
         });
     }
 
+    if (sortBy === CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME) {
+        return data.sort((a, b) => {
+            const aValue = getPolicyName({report: a});
+            const bValue = getPolicyName({report: b});
+            return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare);
+        });
+    }
+
     if (sortBy === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL) {
         return data.sort((a, b) => {
             const aTotal = a.total;
@@ -2360,6 +2380,8 @@ function getSearchColumnTranslationKey(columnId: SearchCustomColumnIds): Transla
             return 'common.title';
         case CONST.SEARCH.TABLE_COLUMNS.STATUS:
             return 'common.status';
+        case CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME:
+            return 'workspace.common.workspace';
         case CONST.SEARCH.TABLE_COLUMNS.CARD:
             return 'common.card';
         case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL:
@@ -2760,6 +2782,7 @@ function getColumnsToShow(
             [CONST.SEARCH.TABLE_COLUMNS.TITLE]: true,
             [CONST.SEARCH.TABLE_COLUMNS.FROM]: true,
             [CONST.SEARCH.TABLE_COLUMNS.TO]: true,
+            [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: false,
             [CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL]: false,
             [CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL]: false,
             [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,
@@ -2777,12 +2800,13 @@ function getColumnsToShow(
         // columns hidden by default
         const columns: ColumnVisibility = {};
         const requiredColumns = new Set<keyof ColumnVisibility>([CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.TOTAL]);
+        const columnsToShow = visibleColumns.length ? visibleColumns : CONST.SEARCH.DEFAULT_COLUMNS.EXPENSE_REPORT;
 
         for (const columnId of Object.keys(reportColumns) as SearchColumnType[]) {
             columns[columnId] = requiredColumns.has(columnId);
         }
 
-        for (const column of visibleColumns) {
+        for (const column of columnsToShow) {
             columns[column as keyof ColumnVisibility] = true;
         }
 
@@ -2835,6 +2859,7 @@ function getColumnsToShow(
               [CONST.SEARCH.TABLE_COLUMNS.FROM]: false,
               [CONST.SEARCH.TABLE_COLUMNS.TO]: false,
               [CONST.SEARCH.TABLE_COLUMNS.CARD]: false,
+              [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: false,
               [CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: false,
               [CONST.SEARCH.TABLE_COLUMNS.TAG]: false,
               [CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE]: false,

src/styles/utils/index.ts

@@ -1784,6 +1784,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             case CONST.SEARCH.TABLE_COLUMNS.ACTION:
                 columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
                 break;
+            case CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME:
             case CONST.SEARCH.TABLE_COLUMNS.CARD:
             case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID:
             case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID:

src/styles/variables.ts

@@ -341,6 +341,7 @@ export default {
     w130: 130,
     w184: 184,
     w191: 191,
+    w200: 200,
     // Transaction item row heights based on layout types
     // Wide screen (desktop) layout
     optionRowWideItemHeight: 64,

tests/unit/Search/SearchUIUtilsTest.ts

@@ -2758,7 +2758,7 @@ describe('SearchUIUtils', () => {
     });
 
     describe('Test getColumnsToShow', () => {
-        test('Should show all columns when no custom columns are saved & viewing expense reports', () => {
+        test('Should show all default columns when no custom columns are saved & viewing expense reports', () => {
             expect(SearchUIUtils.getColumnsToShow(1, [], [], false, CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT)).toEqual({
                 [CONST.SEARCH.TABLE_COLUMNS.AVATAR]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.DATE]: true,
@@ -2767,6 +2767,7 @@ describe('SearchUIUtils', () => {
                 [CONST.SEARCH.TABLE_COLUMNS.STATUS]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.TITLE]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.FROM]: true,
+                [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: false,
                 [CONST.SEARCH.TABLE_COLUMNS.TO]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.ACTION]: true,
@@ -2789,6 +2790,7 @@ describe('SearchUIUtils', () => {
                 [CONST.SEARCH.TABLE_COLUMNS.STATUS]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.TITLE]: true,
                 [CONST.SEARCH.TABLE_COLUMNS.FROM]: false,
+                [CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME]: false,
                 [CONST.SEARCH.TABLE_COLUMNS.TO]: false,
                 // Total should always be visible
                 [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true,