LF-3622 finances dashboard report #2942

antsgar · 2023-11-02T22:26:18Z

Description

Added feature to export report of all transactions from finances dashboard.

Jira link:

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have added "MISSING" for all new language tags to languages I don't speak
I have added the GNU General Public License to all new files

…-to-filter-export-report-data

kathyavini

It looks good (and you can remove the original interim "Download report" button now!), and it seems like a solid organization for the code structure! Thank you for including the logic needed for the other report type!

I left a few inline comments from my read-through. I didn't spot a cause from reading, but in testing it seemed that that dateRange state handling is not quite correct; could you confirm these issues occur for you too?

Export once with default date (Year to Date). If you then select a different time period than year to date in the dashboard filters and then open the report modal, the dropdown reflects the new selection but the data (both the config and the transactions are still set with year-to-date. You need to refresh the dashboard once picking a new selection to get the update in the modal.
If you load up the main dashboard and change the date filter directly (before opening the report modal), the dropdown on the report modal will not match what shown on the dashboard
If you have a custom range set in the dashboard, it's possible to clear the custom range in the report filters and still export. However, you get a weird date object like this
If there is no custom date range set in the dashboard and you set a custom range in the component, you get this:

Are those errors reproducible for you?

packages/webapp/src/containers/Finances/index.jsx

packages/webapp/src/containers/Filter/Transactions/index.jsx

kathyavini · 2023-11-06T16:56:31Z

packages/webapp/src/containers/Finances/Report/index.jsx

+  const filterRef = useRef({});
+  const transactions = useTransactions({
+    dateFilter,
+    expenseTypeFilter: filterRef.current[EXPENSE_TYPE],


Oooooh this is the first ever bug I suspected before I loaded up the app to test!! 😁 I'm having fun with the reading first review method!

As a ref, I think this isn't going to trigger the useMemo dependency array of useTransactions. The transaction list will always be the same regardless of which filters are applied in the modal. Do these filters need to go into state like dateRange (or does useTransactions have to be called in some other way/at a different point)?

Reading first is the way! 😅 In testing this I do see the filters being applied correctly -- I think if the ref value changes, that new value will still get passed to the transactions hook and trigger the memo. Can you let me know though if you are seeing any problems with the filters?

That being said, we should be using state variables instead of refs in filters altogether. I've also seen the same with dropdowns, where we're passing a ref instead of a state variable. In general we shouldn't be using refs unless absolutely necessary for something that needs to happen outside of the normal React flow, but since it's a broad issue we'll have to tackle it as a refactor.

Interesting! No I definitely double-checked the behaviour (I don't trust my reading skills that much yet 😂) and saw the update issue in testing as well. Is this different than what you see? I am logging in the saga:

filters-persistence-bug.mov

For me, the data sent 1) doesn't update based on edits made in the modal after loading it, 2) but are applied after the modal is reloaded (minor bug is that the visual filter state appears to be reset to what the dashboard shows but the data is using the filter setting from the last modal edit!)

@antsgar sorry I realized I didn't tag you on the above comments and these threads don't create notifications!

packages/webapp/src/components/Filter/FilterGroup/index.jsx

packages/webapp/src/containers/Finances/useTransactions.js

packages/webapp/src/containers/Finances/index.jsx

packages/webapp/src/containers/Finances/constants.js

…-to-filter-export-report-data

antsgar · 2023-11-07T16:23:59Z

@kathyavini @SayakaOno I think I addressed all the comments/issues! Please take another look when you can

kathyavini · 2023-11-07T18:12:28Z

@antsgar of the 4 date-related bugs I mentioned, I don't see the top two anymore! However, I'm still seeing these two:

If I have a custom range set in the dashboard, it's possible to clear the custom range in the report filters and still export. However, I get a Moment object for both the start and end date. I think maybe the correct behaviour is that the export button should be disabled when custom date range is selected and nothing is picked?
If there is no custom date range set in the dashboard and I set a custom range in the modal component, it doesn't apply and no transactions are returned. Here is a video:

date-undefined-moment.mov

antsgar · 2023-11-07T18:54:50Z

@antsgar of the 4 date-related bugs I mentioned, I don't see the top two anymore! However, I'm still seeing these two:

If I have a custom range set in the dashboard, it's possible to clear the custom range in the report filters and still export. However, I get a Moment object for both the start and end date. I think maybe the correct behaviour is that the export button should be disabled when custom date range is selected and nothing is picked?

If there is no custom date range set in the dashboard and I set a custom range in the modal component, it doesn't apply and no transactions are returned. Here is a video:

date-undefined-moment.mov

The button should definitely be disabled if the range is not correctly set, I'll fix that!
For the second one, it's sort of related, because currently the date isn't actually set until the custom date range picker is closed. This works well for the transactions list but not for this use case, I suppose we should actually set it as soon as possible regardless of whether the custom picker is closed or not?

antsgar · 2023-11-07T20:28:00Z

@kathyavini thank you for testing thoroughly, dates are hard! 😥 took a second stab at fixing the issues, can you take another look? 🙏

kathyavini · 2023-11-07T20:55:26Z

@antsgar the dates look good!

I still don't think the filters are being updated at the right time, but I realized belatedly you might not have seen that comment and video because it was in a thread, sorry!

antsgar · 2023-11-08T13:07:13Z

~~@kathyavini can you show me what you mean with the filters? I wasn't able to repro that one!~~

Never mind, I could repro now! Will fix 🙂

antsgar · 2023-11-08T15:12:33Z

@kathyavini I think I fixed the filters bug, can you re-check please? 🙏 sorry about all the back and forth!

kathyavini

Looks good to me!!

SayakaOno

I would like you to remove one more line, but everything else looks good to me!

packages/webapp/src/containers/Finances/useTransactions.js

SayakaOno · 2023-11-08T19:42:48Z

Since Joyce had been approved, I merged!

antsgar added 5 commits November 2, 2023 19:25

LF-3622 finances dashboard report

ba1a1a4

Merge branch 'integration' into LF-3622-Build-container-and-component…

c09452f

…-to-filter-export-report-data

LF-3622 add filters and fix styling

a71a477

LF-3622 fix styling

fe6a1e5

LF-3622 fix test

483d53e

antsgar marked this pull request as ready for review November 3, 2023 20:24

antsgar requested review from a team as code owners November 3, 2023 20:24

antsgar requested review from SayakaOno and kathyavini and removed request for a team November 3, 2023 20:24

LF-3622 add license

07d30c8

kathyavini requested changes Nov 6, 2023

View reviewed changes

SayakaOno reviewed Nov 6, 2023

View reviewed changes

packages/webapp/src/containers/Finances/useTransactions.js Show resolved Hide resolved

packages/webapp/src/containers/Finances/index.jsx Show resolved Hide resolved

packages/webapp/src/containers/Finances/constants.js Outdated Show resolved Hide resolved

antsgar added 2 commits November 7, 2023 12:55

LF-3622 address PR feedback

2121690

Merge branch 'integration' into LF-3622-Build-container-and-component…

dee3305

…-to-filter-export-report-data

antsgar requested review from SayakaOno and kathyavini November 7, 2023 16:24

LF-3622 address PR feedback

3bc7387

antsgar force-pushed the LF-3622-Build-container-and-component-to-filter-export-report-data branch from a187e67 to 3bc7387 Compare November 7, 2023 20:40

LF-3622 fix filters bug

f6c6396

kathyavini previously approved these changes Nov 8, 2023

View reviewed changes

SayakaOno reviewed Nov 8, 2023

View reviewed changes

packages/webapp/src/containers/Finances/useTransactions.js Show resolved Hide resolved

LF-3622 address PR feedback

5674a5c

antsgar dismissed kathyavini’s stale review via 5674a5c November 8, 2023 19:39

antsgar requested review from SayakaOno and kathyavini November 8, 2023 19:39

SayakaOno approved these changes Nov 8, 2023

View reviewed changes

SayakaOno merged commit ce76fa0 into integration Nov 8, 2023
2 checks passed

kathyavini mentioned this pull request Nov 9, 2023

LF-3755 Style xlsx finance report with ExcelJS API #2958

Merged

16 tasks

antsgar deleted the LF-3622-Build-container-and-component-to-filter-export-report-data branch January 11, 2024 17:10

kathyavini mentioned this pull request Feb 29, 2024

LF-4138 Convert current filter implementation to TypeScript #3145

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LF-3622 finances dashboard report #2942

LF-3622 finances dashboard report #2942

antsgar commented Nov 2, 2023 •

edited

Loading

kathyavini left a comment •

edited

Loading

kathyavini Nov 6, 2023 •

edited

Loading

antsgar Nov 7, 2023

kathyavini Nov 7, 2023

kathyavini Nov 7, 2023

antsgar commented Nov 7, 2023

kathyavini commented Nov 7, 2023

antsgar commented Nov 7, 2023 •

edited

Loading

antsgar commented Nov 7, 2023

kathyavini commented Nov 7, 2023

antsgar commented Nov 8, 2023 •

edited

Loading

antsgar commented Nov 8, 2023

kathyavini left a comment

SayakaOno left a comment

SayakaOno commented Nov 8, 2023

LF-3622 finances dashboard report #2942

LF-3622 finances dashboard report #2942

Conversation

antsgar commented Nov 2, 2023 • edited Loading

kathyavini left a comment • edited Loading

Choose a reason for hiding this comment

kathyavini Nov 6, 2023 • edited Loading

Choose a reason for hiding this comment

antsgar Nov 7, 2023

Choose a reason for hiding this comment

kathyavini Nov 7, 2023

Choose a reason for hiding this comment

kathyavini Nov 7, 2023

Choose a reason for hiding this comment

antsgar commented Nov 7, 2023

kathyavini commented Nov 7, 2023

antsgar commented Nov 7, 2023 • edited Loading

antsgar commented Nov 7, 2023

kathyavini commented Nov 7, 2023

antsgar commented Nov 8, 2023 • edited Loading

antsgar commented Nov 8, 2023

kathyavini left a comment

Choose a reason for hiding this comment

SayakaOno left a comment

Choose a reason for hiding this comment

SayakaOno commented Nov 8, 2023

antsgar commented Nov 2, 2023 •

edited

Loading

kathyavini left a comment •

edited

Loading

kathyavini Nov 6, 2023 •

edited

Loading

antsgar commented Nov 7, 2023 •

edited

Loading

antsgar commented Nov 8, 2023 •

edited

Loading