Skip to content

fix: differentiate icons for custom and standard export formats #88157

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

Open
samranahm wants to merge 8 commits into
base: main
Choose a base branch
from
Open

fix: differentiate icons for custom and standard export formats #88157

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a3ee977
Add TablePencil icon for custom export templates
samranahm Apr 16, 2026
8bd2b41
Implement different icons for custom vs standard export templates
samranahm Apr 16, 2026
2945128
Update export action hooks to use TablePencil for custom templates
samranahm Apr 16, 2026
536bcdd
compress svg
samranahm Apr 16, 2026
8e32b52
lint
samranahm Apr 16, 2026
46815e7
Merge remote-tracking branch 'upstream/main' into 88096/update-custom…
samranahm Apr 21, 2026
7d3a38b
add TablePencil in new useExportActions hook
samranahm Apr 21, 2026
4bedc6b
prettier
samranahm Apr 21, 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
1 change: 1 addition & 0 deletions assets/images/table-pencil.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/Icon/chunks/expensify-icons.chunk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ import Star from '@assets/images/Star.svg';
import Stopwatch from '@assets/images/stopwatch.svg';
import Suitcase from '@assets/images/suitcase.svg';
import Sync from '@assets/images/sync.svg';
import TablePencil from '@assets/images/table-pencil.svg';
import Table from '@assets/images/table.svg';
import Tag from '@assets/images/tag.svg';
import Task from '@assets/images/task.svg';
Expand Down Expand Up @@ -493,6 +494,7 @@ const Expensicons = {
UserPlus,
Feed,
Table,
TablePencil,
SpreadsheetComputer,
Bookmark,
Sparkles,
Expand Down
5 changes: 4 additions & 1 deletion src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ function MoneyReportHeaderContent({reportID: reportIDProp, shouldDisplayBackButt
'ArrowRight',
'ThumbsDown',
'Table',
'TablePencil',
'Info',
'Export',
'Download',
Expand Down Expand Up @@ -1063,9 +1064,11 @@ function MoneyReportHeaderContent({reportID: reportIDProp, shouldDisplayBackButt
};

for (const template of exportTemplates) {
const isStandardTemplate =
template.templateName === CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT || template.templateName === CONST.REPORT.EXPORT_OPTIONS.REPORT_LEVEL_EXPORT;
options[template.name] = {
text: template.name,
icon: expensifyIcons.Table,
icon: isStandardTemplate ? expensifyIcons.Table : expensifyIcons.TablePencil,
value: template.templateName,
description: template.description,
sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.EXPORT_FILE,
Expand Down
22 changes: 17 additions & 5 deletions src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import variables from '@styles/variables';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {SearchAdvancedFiltersForm} from '@src/types/form';
import type IconAsset from '@src/types/utils/IconAsset';
import type {MultiSelectItem} from './MultiSelectPopup';

type ExportedToSelectPopupProps = {
Expand All @@ -38,7 +39,17 @@ function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelec
const {translate} = useLocalize();
const StyleUtils = useStyleUtils();
const theme = useTheme();
const expensifyIcons = useMemoizedLazyExpensifyIcons(['XeroSquare', 'QBOSquare', 'NetSuiteSquare', 'IntacctSquare', 'QBDSquare', 'CertiniaSquare', 'GustoSquare', 'Table']);
const expensifyIcons = useMemoizedLazyExpensifyIcons([
'XeroSquare',
'QBOSquare',
'NetSuiteSquare',
'IntacctSquare',
'QBDSquare',
'CertiniaSquare',
'GustoSquare',
'Table',
'TablePencil',
]);
const [exportedTo] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterExportedToSelector});
const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
Expand All @@ -50,10 +61,10 @@ function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelec

const integrationConnectionNames = CONST.POLICY.CONNECTIONS.ACCOUNTING_CONNECTION_NAMES;

const tableIconForExportOption = (
const tableIconForExportOption = (tableIcon: IconAsset) => (
<View style={[styles.mr3, styles.alignItemsCenter, styles.justifyContentCenter, StyleUtils.getWidthAndHeightStyle(variables.w28, variables.h28)]}>
<Icon
src={expensifyIcons.Table}
src={tableIcon}
fill={theme.icon}
width={variables.iconSizeNormal}
height={variables.iconSizeNormal}
Expand All @@ -77,7 +88,7 @@ function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelec
/>
</View>
) : (
tableIconForExportOption
tableIconForExportOption(expensifyIcons.Table)
);
return {
text: CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName],
Expand Down Expand Up @@ -114,10 +125,11 @@ function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelec
}

usedPickerValueKeys.add(filterValue);
const isStandardTemplate = !!STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL[template.templateName];
standardAndIntegrationCustomTemplatePickerItems.push({
text: displayName,
value: filterValue,
leftElement: tableIconForExportOption,
leftElement: tableIconForExportOption(isStandardTemplate ? expensifyIcons.Table : expensifyIcons.TablePencil),
});
}

Expand Down
14 changes: 12 additions & 2 deletions src/components/Search/SearchList/ListItem/ExportedIconCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ function ExportedIconCell({reportActions}: ExportedIconCellProps) {
const styles = useThemeStyles();

const actions = reportActions ?? [];
const icons = useMemoizedLazyExpensifyIcons(['NetSuiteSquare', 'XeroSquare', 'IntacctSquare', 'QBOSquare', 'Table', 'ZenefitsSquare', 'BillComSquare', 'CertiniaSquare']);
const icons = useMemoizedLazyExpensifyIcons(['NetSuiteSquare', 'XeroSquare', 'IntacctSquare', 'QBOSquare', 'Table', 'TablePencil', 'ZenefitsSquare', 'BillComSquare', 'CertiniaSquare']);

let isExportedToCsv = false;
let isExportedToCustomTemplate = false;
Comment thread
samranahm marked this conversation as resolved.
let isExportedToNetsuite = false;
let isExportedToXero = false;
let isExportedToIntacct = false;
Expand All @@ -39,7 +40,9 @@ function ExportedIconCell({reportActions}: ExportedIconCellProps) {
const message = getOriginalMessage(action);
const label = message?.label;
const type = message?.type;
isExportedToCsv = isExportedToCsv || type === CONST.EXPORT_TEMPLATE;
if (type === CONST.EXPORT_TEMPLATE) {
isExportedToCustomTemplate = true;
}
Comment thread
samranahm marked this conversation as resolved.
isExportedToXero = isExportedToXero || label === CONST.EXPORT_LABELS.XERO;
isExportedToNetsuite = isExportedToNetsuite || label === CONST.EXPORT_LABELS.NETSUITE;
isExportedToQuickbooksOnline = isExportedToQuickbooksOnline || label === CONST.EXPORT_LABELS.QBO;
Expand All @@ -60,6 +63,13 @@ function ExportedIconCell({reportActions}: ExportedIconCellProps) {
small
/>
)}
{isExportedToCustomTemplate && (
<Icon
src={icons.TablePencil}
fill={theme.icon}
small
/>
)}
{isExportedToNetsuite && (
<Avatar
source={icons.NetSuiteSquare}
Expand Down
5 changes: 4 additions & 1 deletion src/hooks/useSearchBulkActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
const expensifyIcons = useMemoizedLazyExpensifyIcons([
'Export',
'Table',
'TablePencil',
'DocumentMerge',
'Send',
'Trashcan',
Expand Down Expand Up @@ -1019,9 +1020,11 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
});

for (const template of exportTemplates) {
const isStandardTemplate =
template.templateName === CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT || template.templateName === CONST.REPORT.EXPORT_OPTIONS.REPORT_LEVEL_EXPORT;
exportOptions.push({
text: template.name,
icon: expensifyIcons.Table,
icon: isStandardTemplate ? expensifyIcons.Table : expensifyIcons.TablePencil,
Comment thread
samranahm marked this conversation as resolved.
description: template.description,
onSelected: () => {
beginExportWithTemplate(template.templateName, template.type, template.policyID);
Expand Down
5 changes: 4 additions & 1 deletion src/hooks/useSelectedTransactionsActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ function useSelectedTransactionsActions({
'Trashcan',
'ArrowRight',
'Table',
'TablePencil',
'DocumentMerge',
'Export',
'ArrowCollapse',
Expand Down Expand Up @@ -389,10 +390,12 @@ function useSelectedTransactionsActions({

// If the user has any custom integration export templates, add them as export options
const exportTemplates = getExportTemplates(integrationsExportTemplates ?? [], csvExportLayouts ?? {}, translate, policy, includeReportLevelExport);
const standardTemplateNames = new Set<string>([CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT, CONST.REPORT.EXPORT_OPTIONS.REPORT_LEVEL_EXPORT]);
for (const template of exportTemplates) {
const isStandardTemplate = standardTemplateNames.has(template.templateName);
exportOptions.push({
text: template.name,
icon: expensifyIcons.Table,
icon: isStandardTemplate ? expensifyIcons.Table : expensifyIcons.TablePencil,
description: template.description,
onSelected: () => beginExportWithTemplate(template.templateName, template.type, selectedTransactionIDs, template.policyID),
});
Expand Down
24 changes: 18 additions & 6 deletions src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {getExportTemplates, updateAdvancedFilters} from '@userActions/Search';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type IconAsset from '@src/types/utils/IconAsset';
Comment thread
samranahm marked this conversation as resolved.
import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';

/** Maps standard export template IDs to the display label used in search query/filter */
Expand All @@ -34,7 +35,17 @@ function SearchFiltersExportedToPage() {
const {translate} = useLocalize();
const StyleUtils = useStyleUtils();
const theme = useTheme();
const expensifyIcons = useMemoizedLazyExpensifyIcons(['XeroSquare', 'QBOSquare', 'NetSuiteSquare', 'IntacctSquare', 'QBDSquare', 'CertiniaSquare', 'GustoSquare', 'Table']);
const expensifyIcons = useMemoizedLazyExpensifyIcons([
'XeroSquare',
'QBOSquare',
'NetSuiteSquare',
'IntacctSquare',
'QBDSquare',
'CertiniaSquare',
'GustoSquare',
'Table',
'TablePencil',
]);

const [searchAdvancedFiltersForm, searchAdvancedFiltersFormResult] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
Expand All @@ -46,10 +57,10 @@ function SearchFiltersExportedToPage() {
const selectedExportedToValues = searchAdvancedFiltersForm?.exportedTo ?? [];
const connectedIntegrationNames = getConnectedIntegrationNamesForPolicies(policies, policyIDs.length > 0 ? policyIDs : undefined);

const tableIconForExportOption = (
const tableIconForExportOption = (tableIcon: IconAsset) => (
<View style={[styles.mr3, styles.alignItemsCenter, styles.justifyContentCenter, StyleUtils.getWidthAndHeightStyle(variables.w28, variables.h28)]}>
<Icon
src={expensifyIcons.Table}
src={tableIcon}
fill={theme.icon}
width={variables.iconSizeNormal}
height={variables.iconSizeNormal}
Expand All @@ -74,7 +85,7 @@ function SearchFiltersExportedToPage() {
/>
</View>
) : (
tableIconForExportOption
tableIconForExportOption(expensifyIcons.Table)
);
return {
name: CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName],
Expand Down Expand Up @@ -111,10 +122,11 @@ function SearchFiltersExportedToPage() {
}

usedPickerValueKeys.add(filterValue);
const isStandardTemplate = !!STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL[template.templateName];
standardAndIntegrationCustomTemplatePickerItems.push({
name: displayName,
value: filterValue,
leftElement: tableIconForExportOption,
leftElement: tableIconForExportOption(isStandardTemplate ? expensifyIcons.Table : expensifyIcons.TablePencil),
});
}

Expand Down Expand Up @@ -142,7 +154,7 @@ function SearchFiltersExportedToPage() {
/>
</View>
) : (
tableIconForExportOption
tableIconForExportOption(expensifyIcons.Table)
);
return {
name: value,
Expand Down
Loading