Show year as well in date column #43413

ShridharGoel · 2024-06-10T18:01:37Z

Details

Show year as well in date column.

Fixed Issues

$ #43209
PROPOSAL: #43209 (comment)

Tests

Ensure that you have some expenses from past years.
Go to the search page.
Check the width of date column.
Check that the year shows only for past year expenses.
Now, test without past year expenses - column width shouldn't be extended.

QA Steps

Ensure that you have some expenses from past years.
Go to the search page.
Check the width of date column.
Check that the year shows only for past year expenses.
Now, test without past year expenses - column width shouldn't be extended.

PR Author Checklist

I linked the correct issue in the ### Fixed Issues section above
I wrote clear testing steps that cover the changes made in this PR
- I added steps for local testing in the Tests section
- I added steps for the expected offline behavior in the Offline steps section
- I added steps for Staging and/or Production testing in the QA steps section
- I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
I included screenshots or videos for tests on all platforms
I ran the tests on all platforms & verified they passed on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I followed proper code patterns (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  - If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I followed the guidelines as stated in the Review Guidelines
I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
I verified that if a function's arguments changed that all usages have also been updated correctly
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

melvin-bot · 2024-06-10T18:01:42Z

@dukenv0307 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]

ShridharGoel · 2024-06-10T18:02:04Z

Adding images.

shawnborton · 2024-06-10T18:03:16Z

Is there a clean way to do this where we only increase the date column width if we know we have dates from a prior year? cc @luacmartins

ShridharGoel · 2024-06-10T18:06:32Z

Do we have to skip the year if it's from the ongoing year?

ShridharGoel · 2024-06-10T18:07:24Z

CC: @JmillsExpensify

luacmartins · 2024-06-10T18:10:07Z

Yea, that should be possible by comparing all dates we have and if any is from a previous year, we'd increase the column width. That being said, pagination could make the layout shift if a new expense from a previous year is returned

ShridharGoel · 2024-06-10T18:14:19Z

@shawnborton Can you confirm if that is what we expect?

shawnborton · 2024-06-10T18:15:59Z

We don't need to show the year if all expenses shown are from the current year. And if we don't show the year, then I like the idea of using the smaller column width to save space. Let me know if that makes sense!

ShridharGoel · 2024-06-10T18:19:37Z

@shawnborton Just to confirm: What would happen when few expenses are from 2024 and few from 2023? Should we show 2024 in the expenses that belong to 2024 since the width is anyways going to be larger?

shawnborton · 2024-06-10T18:21:46Z

We would have an increased column width, but the expenses from 2024 would not have the year in the column. This is how it works on OldDot, so I think we'd want to keep it the same for now.

mountiny · 2024-06-10T21:55:14Z

Lets use this thread to agree on the plan ahead. @ShridharGoel let us know if you have some issues with the proposed logic

dukenv0307 · 2024-06-11T03:36:52Z

Waiting for @ShridharGoel's update

ShridharGoel · 2024-06-11T19:04:59Z

@mountiny @shawnborton

shawnborton · 2024-06-11T19:58:52Z

Let me know when we have some updated screenshots to review!

dukenv0307 · 2024-06-12T03:34:04Z

src/libs/SearchUtils.ts

+                // If the item is a ReportListItemType, iterate over its transactions and check them
+                return item.transactions.some((transaction) => {
+                    const transactionYear = new Date(transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '').getFullYear();
+                    return transactionYear !== new Date().getFullYear();


we can define the currentYear = new Date().getFullYear() out of this block

dukenv0307 · 2024-06-12T03:38:09Z

src/libs/SearchUtils.ts

+            }
+
+            const createdYear = new Date(item?.modifiedCreated ? item.modifiedCreated : item?.created || '').getFullYear();
+            return createdYear !== new Date().getFullYear();


use currentYear ^

ShridharGoel · 2024-06-13T03:17:43Z

It's done, though I'm not sure how it is feasible to use sortedData in this.

mountiny · 2024-06-13T10:42:48Z

@dukenv0307 @ShridharGoel if anything is unclear please use the slack thread to discuss. Lets try to get this one merged today

mountiny

changes look good to me now, I hope it wont be too slow in large list of transactions

mountiny · 2024-06-13T11:08:42Z

src/components/SelectionList/types.ts

@@ -168,6 +168,9 @@ type TransactionListItemType = ListItem &

        /** Whether we should show the tax column */
        shouldShowTax: boolean;
+
+        /** Info about whether there's atleast one transaction that doesn't belong to the present year */


Suggested change

/** Info about whether there's atleast one transaction that doesn't belong to the present year */

/** Info about whether there's at least one transaction that doesn't belong to the present year */

mountiny · 2024-06-13T11:10:45Z

src/libs/TransactionUtils.ts

+function getCreatedDate(transaction: OnyxEntry<Transaction>): string {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '';
+}
+


NAB: Could we reuse it here

App/src/libs/TransactionUtils.ts

Line 467 in b12556b

const created = transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '';

TBH I think we should rename getCreatedDate to getCreated and the current getCreated to getFormattedCreated, but that's a NAB

@mountiny Isn't this already there in my changes? Can you check line 471 in this file?

luacmartins

Left a few comments

luacmartins · 2024-06-13T16:03:15Z

src/components/Search.tsx

@@ -122,6 +122,8 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {

    const isSortingAllowed = sortableSearchTabs.includes(query);

+    const doesAtleastOneExpenseBelongToAPastYear = SearchUtils.doesAtleastOneExpenseBelongToAPastYear(searchResults?.data);


Suggested change

const doesAtleastOneExpenseBelongToAPastYear = SearchUtils.doesAtleastOneExpenseBelongToAPastYear(searchResults?.data);

const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);

luacmartins · 2024-06-13T16:03:26Z

src/components/Search.tsx

@@ -122,6 +122,8 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {

    const isSortingAllowed = sortableSearchTabs.includes(query);

+    const doesAtleastOneExpenseBelongToAPastYear = SearchUtils.doesAtleastOneExpenseBelongToAPastYear(searchResults?.data);


src/components/Search.tsx

src/components/SelectionList/Search/TransactionListItemRow.tsx

src/components/SelectionList/SearchTableHeader.tsx

src/libs/SearchUtils.ts

luacmartins · 2024-06-13T16:16:10Z

src/libs/TransactionUtils.ts

+function getCreatedDate(transaction: OnyxEntry<Transaction>): string {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '';
+}
+


luacmartins · 2024-06-13T16:16:55Z

src/libs/TransactionUtils.ts

+function getCreatedDate(transaction: OnyxEntry<Transaction>): string {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '';
+}
+


TBH I think we should rename getCreatedDate to getCreated and the current getCreated to getFormattedCreated, but that's a NAB

src/styles/utils/index.ts

luacmartins · 2024-06-13T16:18:00Z

We also have conflicts now

luacmartins · 2024-06-13T19:23:52Z

@ShridharGoel we have lint and ts errors now

mountiny

One small commnet

src/components/SelectionList/types.ts

dukenv0307 · 2024-06-14T14:50:47Z

code looks good now

dukenv0307 · 2024-06-14T14:55:22Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android: Native
- Android: mWeb Chrome
- iOS: Native
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

dukenv0307 · 2024-06-14T14:55:52Z

@ShridharGoel Can you update the test steps please?

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

ShridharGoel · 2024-06-14T19:18:51Z

Updated.

mountiny

Thanks everyone!

OSBotify · 2024-06-14T22:01:50Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2024-06-14T23:17:00Z

🚀 Deployed to staging by https://github.com/mountiny in version: 1.4.84-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2024-06-17T23:49:13Z

🚀 Deployed to production by https://github.com/AndrewGable in version: 1.4.84-3 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

Show year as well in date column

c7aae0f

ShridharGoel requested review from a team as code owners June 10, 2024 18:01

melvin-bot bot requested review from dukenv0307 and removed request for a team June 10, 2024 18:01

mountiny self-requested a review June 10, 2024 21:54

mountiny assigned ShridharGoel Jun 10, 2024

Update

920f4dd

ShridharGoel marked this pull request as draft June 11, 2024 18:30

ShridharGoel added 2 commits June 12, 2024 00:09

Update

bf1b1a8

Update with type fixes

05def94

ShridharGoel force-pushed the 43209 branch from 8c6ec3e to 05def94 Compare June 11, 2024 18:40

ShridharGoel marked this pull request as ready for review June 11, 2024 18:40

Update with lint fixes

840c253

dukenv0307 reviewed Jun 12, 2024

View reviewed changes

mountiny previously approved these changes Jun 13, 2024

View reviewed changes

luacmartins requested changes Jun 13, 2024

View reviewed changes

Update

9322531

ShridharGoel dismissed mountiny’s stale review via 9322531 June 13, 2024 18:52

Update

6e6a02d

ShridharGoel added 3 commits June 14, 2024 01:56

Update to use type check

b1d44f4

Lint fix

f04ac39

Update TransactionUtils.ts

d85b418

ShridharGoel requested review from luacmartins, dukenv0307 and mountiny June 13, 2024 20:50

mountiny previously approved these changes Jun 14, 2024

View reviewed changes

src/components/SelectionList/types.ts Outdated Show resolved Hide resolved

Update src/components/SelectionList/types.ts

0ed2614

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>

ShridharGoel dismissed mountiny’s stale review via 0ed2614 June 14, 2024 19:18

luacmartins approved these changes Jun 14, 2024

View reviewed changes

mountiny approved these changes Jun 14, 2024

View reviewed changes

mountiny merged commit 39324d6 into Expensify:main Jun 14, 2024
17 checks passed

github-actions bot mentioned this pull request Jun 14, 2024

Deploy Checklist: New Expensify 2024-06-14 #43793

Closed

53 tasks

melvin-bot bot mentioned this pull request Jun 17, 2024

[HOLD for payment 2024-06-24] [$125] [Search v1] Search page: Show dates for prior year transactions #43209

Closed

	/** Info about whether there's atleast one transaction that doesn't belong to the present year */
	/** Info about whether there's at least one transaction that doesn't belong to the present year */

		@@ -122,6 +122,8 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {

		const isSortingAllowed = sortableSearchTabs.includes(query);

		const doesAtleastOneExpenseBelongToAPastYear = SearchUtils.doesAtleastOneExpenseBelongToAPastYear(searchResults?.data);

	const doesAtleastOneExpenseBelongToAPastYear = SearchUtils.doesAtleastOneExpenseBelongToAPastYear(searchResults?.data);
	const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);

Show year as well in date column #43413

Show year as well in date column #43413

Conversation

ShridharGoel commented Jun 10, 2024 • edited Loading

Details

Fixed Issues

Tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Jun 10, 2024

ShridharGoel commented Jun 10, 2024

shawnborton commented Jun 10, 2024

ShridharGoel commented Jun 10, 2024

ShridharGoel commented Jun 10, 2024

luacmartins commented Jun 10, 2024

ShridharGoel commented Jun 10, 2024

shawnborton commented Jun 10, 2024

ShridharGoel commented Jun 10, 2024

shawnborton commented Jun 10, 2024

mountiny commented Jun 10, 2024

dukenv0307 commented Jun 11, 2024

ShridharGoel commented Jun 11, 2024

shawnborton commented Jun 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShridharGoel commented Jun 13, 2024 via email • edited Loading

mountiny commented Jun 13, 2024

mountiny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShridharGoel Jun 13, 2024 • edited Loading

Choose a reason for hiding this comment

luacmartins left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luacmartins commented Jun 13, 2024

luacmartins commented Jun 13, 2024

mountiny left a comment

Choose a reason for hiding this comment

dukenv0307 commented Jun 14, 2024

dukenv0307 commented Jun 14, 2024 • edited Loading

Reviewer Checklist

Screenshots/Videos

dukenv0307 commented Jun 14, 2024

ShridharGoel commented Jun 14, 2024

mountiny left a comment

Choose a reason for hiding this comment

OSBotify commented Jun 14, 2024

OSBotify commented Jun 14, 2024

OSBotify commented Jun 17, 2024

ShridharGoel commented Jun 10, 2024 •

edited

Loading

ShridharGoel commented Jun 13, 2024 via email •

edited

Loading

ShridharGoel Jun 13, 2024 •

edited

Loading

dukenv0307 commented Jun 14, 2024 •

edited

Loading