Add onClick handlers to the schedule and transaction icons in the transaction list (#547) #1228

joel-jeremy · 2023-06-29T19:31:47Z

In addition to the arrow icon, I have also updated the recurring/calendar icon to open the edit schedule page.

netlify · 2023-06-29T19:32:01Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`25303d8`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/649ddc250d82850009e5ad99
😎 Deploy Preview	https://deploy-preview-1228--actualbudget.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-06-29T19:33:28Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`8255e1a`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/649f3c37defc5600086f3386
😎 Deploy Preview	https://deploy-preview-1228--actualbudget.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-06-29T19:34:28Z

Bundle Stats - desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
13	2.37 MB -> 2.38 MB (+1.03 KB)	+0.04%

Changeset

File	Δ	Size
`src/components/accounts/TransactionList.js`	📈 +366 B (+7.77%)	4.6 KB -> 4.96 KB
`src/components/accounts/TransactionsTable.js`	📈 +1.58 KB (+4.58%)	34.6 KB -> 36.18 KB
`src/components/accounts/Account.js`	📈 +40 B (+0.09%)	41.51 KB -> 41.55 KB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/main.js	1.07 MB -> 1.07 MB (+1.03 KB)	+0.09%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/457.chunk.js	387.21 KB	0%
static/media/Inter.var.woff2	317.25 KB	0%
static/media/Inter-italic.var.woff2	239.29 KB	0%
static/media/Inter-roman.var.woff2	221.86 KB	0%
static/media/bg.svg	116.73 KB	0%
static/js/reports.chunk.js	19.58 KB	0%
static/js/969.chunk.js	12.94 KB	0%
static/js/resize-observer-polyfill.chunk.js	8.12 KB	0%
static/css/main.css	6.08 KB	0%
index.html	1.68 KB	0%
asset-manifest.json	1.47 KB	0%
static/media/browser-server.js	963 B	0%

github-actions · 2023-06-29T19:34:29Z

Bundle Stats - loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
2	1.97 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1014.63 KB	0%
xfo.xfo.kcab.worker.js	1004.04 KB	0%

joel-jeremy · 2023-06-30T15:24:47Z

Trying to figure out why useCachedSchedules() is returning null when run in test (TransactionsTable.test.js).

j-f1 · 2023-06-30T17:20:02Z

Trying to figure out why useCachedSchedules() is returning null when run in test (TransactionsTable.test.js).

useCachedSchedules() is defined as useContext(SchedulesContext), so it’s likely the thing isn’t being rendered inside a <SchedulesProvider> — I think you’ll need to provide that in the test, or handle the schedule array being null, or maybe mock useCachedSchedules in tests.

packages/desktop-client/src/components/accounts/TransactionsTable.js

…nsaction list (actualbudget#547)

j-f1 · 2023-06-30T20:04:34Z

packages/desktop-client/src/components/accounts/TransactionsTable.js

+  let ScheduledIcon = () => (
+    <Button bare style={style} onClick={onScheduleIconClick}>
+      {recurring ? (
+        <ArrowsSynchronize style={colorStyle} />


The icons will need to have a width property set on their style or else they will size themselves to be too big and the buttons will appear blank.

Should I just pass the same style used in the button to the icons?

You’d need to pass in a smaller width/height since the button has padding defined on it that reduces the available space for the icon. With the size you’ve got now, the button content area is 13×13px.

Also fwiw the old arrow buttons were 10px wide

…and there wasn’t that 5px padding between the icon and the text (for transfers, schedules did have it. ugh not sure which one to pick here, the schedule icon does look bad™ without the spacing, transfer arrow looks fine but when you hover it is a bit odd)

Adjusted icon sizes to match the existing ones:

Hovered:

Existing:

I think having the same padding for the schedule and transfer icons resulting in the texts lining up looks better. But let me know if I should adjust it to retain the existing padding.

Having the text line up definitely looks better — good point.

MatissJanis · 2023-06-30T21:10:33Z

(I'll leave this to Jed to approve)

Really like this change! Especially jumping to the transfer account. That's super convenient.

youngcw · 2023-06-30T21:23:20Z

Schedule link is working well for me.

The transfer link makes the account page force scroll to the bottom of the ledger. If I navigate back to the original account it does the same thing. This state sticks around and the only way to get it to go away is to close the tab and re-open the page. This is happening on both chrome and firefox for me

j-f1

Great improvement!

joel-jeremy · 2023-06-30T22:39:22Z

I am encountering the issue @youngcw mentioned. I am thinking maybe it's due to the exposed flag in the <Cell exposed={true}>?

j-f1 · 2023-06-30T23:22:17Z

Oop, that comment must have come in between opening the page and approving. I didn’t see anything like that locally, but i only tested with the transfer being the first transaction. Maybe it has something to do with scrolling?

joel-jeremy · 2023-06-30T23:51:43Z

I don't encounter it locally as well but it happens in the netlify demo deployment.

* master: (34 commits) chore: add types to `crdt` package (actualbudget#1076) Fix layout of the management app with the demo bar in place (actualbudget#1267) ♻️ (select) removing 2x usages of the Select component (actualbudget#1259) Fix transaction list scrolling behavior (actualbudget#1260) 🐛 fix link-schedule option in transaction table (actualbudget#1250) cleared/uncleared background update (actualbudget#1265) Fix calculation of how many table rows to render (actualbudget#1262) ♻️ moving more components out of common.tsx (actualbudget#1257) ♻️ moving some components from common.tsx to separate files (actualbudget#1248) 🐛 fix toggling of balances in all-accounts view (actualbudget#1252) 🐛 (mobile) reduce the size of account cards (actualbudget#1247) Fix electron export issue (actualbudget#1242) Saved Filters Page (actualbudget#1122) 🔧 cancel previous CI runs if a new push is made (actualbudget#1251) .gitattributes Check line endings for tsx files (actualbudget#1246) Fix importing transfers from YNAB4/5 (actualbudget#1224) Auto-close the local/nordigen picker modal after creating an account (actualbudget#1219) Run “Handle completed feature requests” in pull_request_target (actualbudget#1243) Add electron options to bug-report.yml (actualbudget#1239) Add onClick handlers to the schedule and transaction icons in the transaction list (actualbudget#1228) ...

…nsaction list (actualbudget#1228) For actualbudget#547 In addition to the arrow icon, I have also updated the recurring/calendar icon to open the edit schedule page.

trafico-bot bot added the 🔍 Ready for Review label Jun 29, 2023

joel-jeremy force-pushed the transaction-schedule-transfer-icon-onclick branch from 805a97b to e0b62c5 Compare June 29, 2023 23:35

j-f1 linked an issue Jun 30, 2023 that may be closed by this pull request

[Feature] Clicking on arrow of transfer should take you to corresponding transaction in other account #547

Closed

joel-jeremy force-pushed the transaction-schedule-transfer-icon-onclick branch 2 times, most recently from d4aa225 to 816a871 Compare June 30, 2023 15:23

j-f1 reviewed Jun 30, 2023

View reviewed changes

packages/desktop-client/src/components/accounts/TransactionsTable.js Outdated Show resolved Hide resolved

joel-jeremy added 11 commits June 30, 2023 12:34

Add onClick handlers to the schedule and transaction icons in the tra…

678a52a

…nsaction list (actualbudget#547)

Cleanup

9e23632

Rename to PayeeIcons

181807d

Add upcoming release notes

75a7b0b

onNavigate props

b25f310

Update navigate callbacks

5f2b9dd

useCallback deps

24d623f

Use edit schedule modal

7b48062

Wrap icons in Button and handle null cached schedules

2090640

Remove margin

b81b6fd

Payee icon sizes

8255e1a

joel-jeremy force-pushed the transaction-schedule-transfer-icon-onclick branch from 4b68703 to b81b6fd Compare June 30, 2023 19:34

j-f1 reviewed Jun 30, 2023

View reviewed changes

j-f1 approved these changes Jun 30, 2023

View reviewed changes

trafico-bot bot added ✅ Approved and removed 🔍 Ready for Review labels Jun 30, 2023

j-f1 merged commit d325e6b into actualbudget:master Jun 30, 2023
15 checks passed

trafico-bot bot added ✨ Merged Pull Request has been merged successfully and removed ✅ Approved labels Jun 30, 2023

j-f1 mentioned this pull request Jul 1, 2023

[Feature] Clicking on arrow of transfer should take you to corresponding transaction in other account #547

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add onClick handlers to the schedule and transaction icons in the transaction list (#547) #1228

Add onClick handlers to the schedule and transaction icons in the transaction list (#547) #1228

joel-jeremy commented Jun 29, 2023 •

edited

Loading

netlify bot commented Jun 29, 2023 •

edited

Loading

netlify bot commented Jun 29, 2023 •

edited

Loading

github-actions bot commented Jun 29, 2023 •

edited

Loading

github-actions bot commented Jun 29, 2023

joel-jeremy commented Jun 30, 2023 •

edited

Loading

j-f1 commented Jun 30, 2023

j-f1 Jun 30, 2023

joel-jeremy Jun 30, 2023

j-f1 Jun 30, 2023

j-f1 Jun 30, 2023

j-f1 Jun 30, 2023

joel-jeremy Jun 30, 2023 •

edited

Loading

j-f1 Jun 30, 2023

MatissJanis commented Jun 30, 2023

youngcw commented Jun 30, 2023

j-f1 left a comment

joel-jeremy commented Jun 30, 2023 •

edited

Loading

j-f1 commented Jun 30, 2023

joel-jeremy commented Jun 30, 2023

Add onClick handlers to the schedule and transaction icons in the transaction list (#547) #1228

Add onClick handlers to the schedule and transaction icons in the transaction list (#547) #1228

Conversation

joel-jeremy commented Jun 29, 2023 • edited Loading

netlify bot commented Jun 29, 2023 • edited Loading

✅ Deploy Preview for actualbudget ready!

netlify bot commented Jun 29, 2023 • edited Loading

✅ Deploy Preview for actualbudget ready!

github-actions bot commented Jun 29, 2023 • edited Loading

Bundle Stats - desktop-client

github-actions bot commented Jun 29, 2023

Bundle Stats - loot-core

joel-jeremy commented Jun 30, 2023 • edited Loading

j-f1 commented Jun 30, 2023

j-f1 Jun 30, 2023

Choose a reason for hiding this comment

joel-jeremy Jun 30, 2023

Choose a reason for hiding this comment

j-f1 Jun 30, 2023

Choose a reason for hiding this comment

j-f1 Jun 30, 2023

Choose a reason for hiding this comment

j-f1 Jun 30, 2023

Choose a reason for hiding this comment

joel-jeremy Jun 30, 2023 • edited Loading

Choose a reason for hiding this comment

j-f1 Jun 30, 2023

Choose a reason for hiding this comment

MatissJanis commented Jun 30, 2023

youngcw commented Jun 30, 2023

j-f1 left a comment

Choose a reason for hiding this comment

joel-jeremy commented Jun 30, 2023 • edited Loading

j-f1 commented Jun 30, 2023

joel-jeremy commented Jun 30, 2023

joel-jeremy commented Jun 29, 2023 •

edited

Loading

netlify bot commented Jun 29, 2023 •

edited

Loading

netlify bot commented Jun 29, 2023 •

edited

Loading

github-actions bot commented Jun 29, 2023 •

edited

Loading

joel-jeremy commented Jun 30, 2023 •

edited

Loading

joel-jeremy Jun 30, 2023 •

edited

Loading

joel-jeremy commented Jun 30, 2023 •

edited

Loading