fix: differentiate icons for custom and standard export formats#88157
fix: differentiate icons for custom and standard export formats#88157samranahm wants to merge 5 commits intoExpensify:mainfrom
Conversation
|
@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Updates export-related UI to visually distinguish standard export templates from custom templates by using a dedicated “table-pencil” icon for custom templates across search filters, bulk actions, and report export menus.
Changes:
- Added a new
TablePencilSVG asset and wired it into the lazy expensify icon chunk. - Updated export template pickers/menus (search filters, bulk actions, report header) to choose
TablevsTablePencilbased on whether the template is standard. - Updated the “Exported to” search list cell to render the new icon for template-based exports.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx | Chooses Table vs TablePencil for export template filter items. |
| src/hooks/useSelectedTransactionsActions.ts | Differentiates icon per export template in selected-transactions export options. |
| src/hooks/useSearchBulkActions.ts | Differentiates icon per export template in bulk export options. |
| src/components/Search/SearchList/ListItem/ExportedIconCell.tsx | Adds rendering for custom-template export icon in the “Exported to” column. |
| src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx | Chooses Table vs TablePencil in exported-to multi-select popup items. |
| src/components/MoneyReportHeader.tsx | Differentiates icon per export template in report header export menu. |
| src/components/Icon/chunks/expensify-icons.chunk.ts | Registers TablePencil in the expensify icon bundle. |
| assets/images/table-pencil.svg | New icon asset used for custom export templates. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| let isExportedToCsv = false; | ||
| let isExportedToCustomTemplate = false; |
There was a problem hiding this comment.
isExportedToCsv is no longer updated from report actions, which can break any later logic that depends on it (including displaying the standard "table" icon). Also, isExportedToCustomTemplate is set for any CONST.EXPORT_TEMPLATE action, but doesn’t distinguish standard vs custom templates, so standard exports may be misclassified. Consider deriving standard-vs-custom from a stable field on the original message (e.g., template name/id) and set separate flags (e.g., isExportedToStandardTemplate vs isExportedToCustomTemplate), or restore updating isExportedToCsv if that’s the intended “standard export” signal.
| 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; | ||
| } |
There was a problem hiding this comment.
isExportedToCsv is no longer updated from report actions, which can break any later logic that depends on it (including displaying the standard "table" icon). Also, isExportedToCustomTemplate is set for any CONST.EXPORT_TEMPLATE action, but doesn’t distinguish standard vs custom templates, so standard exports may be misclassified. Consider deriving standard-vs-custom from a stable field on the original message (e.g., template name/id) and set separate flags (e.g., isExportedToStandardTemplate vs isExportedToCustomTemplate), or restore updating isExportedToCsv if that’s the intended “standard export” signal.
| 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, |
There was a problem hiding this comment.
Standard-template detection logic is now duplicated (and implemented slightly differently) across multiple call sites (here, MoneyReportHeader, and useSelectedTransactionsActions, while the search filter pages use STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL). To reduce drift and ensure new “standard” templates don’t get missed, consider centralizing this into a shared helper (e.g., isStandardExportTemplate(templateName)), or reusing a single source of truth consistently.
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
|
Videos are looking good to me 👍 |
|
Is there a reason why we're not making this change in the Export menu in other parts of the product -- such as the bulk actions menu? Am I missing something? 
|
|
Are all of those default templates? |
|
We should be updating it everywhere any of these options show up. |
@flaviadefaria we implemented this change in bulk action as well. screen_1776444830931.mp4 |
Explanation of Change
Fixed Issues
$ #88096
Tests
Exported to: Valuebutton next to search inputOffline tests
Same as test
QA Steps
Same as test
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android.Native.mp4
Android: mWeb Chrome
Android.mWeb.Chrome.mp4
iOS: Native
IOS.Native.mp4
iOS: mWeb Safari
IOS.mWeb.Safari.mp4
MacOS: Chrome / Safari
macOS.Chrome.mp4