Format transaction notes as clickable tags #2670

joel-jeremy · 2024-04-26T15:45:23Z

netlify · 2024-04-26T15:45:40Z

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	`a97de6c`
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6658cbf8f44a04000809a1ac
😎 Deploy Preview	https://deploy-preview-2670.demo.actualbudget.org
📱 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 · 2024-04-26T15:47:50Z

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
9	4.72 MB → 4.72 MB (+5.14 kB)	+0.11%

Changeset

File	Δ	Size
`node_modules/lodash/escapeRegExp.js`	🆕 +941 B	0 B → 941 B
`src/components/filters/ConditionsOpMenu.tsx`	🆕 +703 B	0 B → 703 B
`src/hooks/useFilters.ts`	📈 +158 B (+10.74%)	1.44 kB → 1.59 kB
`src/components/reports/graphs/tableGraph/ReportTableRow.tsx`	📈 +554 B (+8.30%)	6.52 kB → 7.06 kB
`src/components/transactions/TransactionList.jsx`	📈 +275 B (+6.54%)	4.11 kB → 4.37 kB
`src/components/filters/AppliedFilters.tsx`	📈 +37 B (+4.82%)	767 B → 804 B
`src/components/filters/updateFilterReducer.ts`	📈 +27 B (+3.76%)	719 B → 746 B
`src/components/transactions/TransactionsTable.jsx`	📈 +1.96 kB (+3.67%)	53.32 kB → 55.27 kB
`src/components/filters/FiltersStack.tsx`	📈 +23 B (+2.37%)	971 B → 994 B
`src/style/themes/development.ts`	📈 +116 B (+1.63%)	6.95 kB → 7.06 kB
`src/style/themes/dark.ts`	📈 +116 B (+1.62%)	7 kB → 7.11 kB
`src/style/themes/light.ts`	📈 +116 B (+1.60%)	7.08 kB → 7.19 kB
`src/style/themes/midnight.ts`	📈 +110 B (+1.59%)	6.76 kB → 6.86 kB
`home/runner/work/actual/actual/packages/loot-core/src/shared/rules.ts`	📈 +78 B (+1.32%)	5.77 kB → 5.85 kB
`src/components/accounts/Account.jsx`	📈 +513 B (+1.10%)	45.4 kB → 45.9 kB
`src/components/reports/reports/NetWorth.jsx`	📈 +33 B (+0.73%)	4.42 kB → 4.45 kB
`src/components/reports/Header.jsx`	📈 +24 B (+0.58%)	4.06 kB → 4.08 kB
`src/components/reports/reports/CashFlow.tsx`	📈 +33 B (+0.47%)	6.79 kB → 6.82 kB
`src/components/accounts/Header.jsx`	📈 +42 B (+0.27%)	15 kB → 15.04 kB
`src/components/reports/reports/Spending.tsx`	📈 +21 B (+0.24%)	8.53 kB → 8.55 kB
`src/components/table.tsx`	📈 +50 B (+0.20%)	24.26 kB → 24.31 kB
`src/components/reports/graphs/LineGraph.tsx`	📈 +12 B (+0.17%)	7.01 kB → 7.02 kB
`src/components/reports/reports/CustomReport.tsx`	📈 +33 B (+0.17%)	19.49 kB → 19.53 kB
`src/components/filters/FiltersMenu.jsx`	📈 +20 B (+0.16%)	12.41 kB → 12.43 kB
`src/components/reports/graphs/StackedBarGraph.tsx`	📈 +12 B (+0.15%)	7.75 kB → 7.76 kB
`src/components/reports/graphs/DonutGraph.tsx`	📈 +12 B (+0.14%)	8.29 kB → 8.31 kB
`src/components/reports/graphs/BarGraph.tsx`	📈 +12 B (+0.13%)	9.16 kB → 9.18 kB
`src/components/budget/index.tsx`	📈 +12 B (+0.13%)	9.17 kB → 9.18 kB
`src/components/modals/EditRule.jsx`	📈 +20 B (+0.06%)	34.5 kB → 34.52 kB
`src/components/filters/SavedFilterMenuButton.tsx`	📉 -8 B (-0.16%)	4.83 kB → 4.82 kB
`node_modules/lodash/_getRawTag.js`	📉 -4 B (-0.34%)	1.13 kB → 1.13 kB
`src/components/accounts/Balance.jsx`	📉 -25 B (-0.46%)	5.27 kB → 5.24 kB
`node_modules/lodash/_objectToString.js`	📉 -4 B (-0.69%)	578 B → 574 B
`node_modules/lodash/toString.js`	📉 -4 B (-0.70%)	570 B → 566 B
`node_modules/lodash/isSymbol.js`	📉 -12 B (-1.78%)	673 B → 661 B
`node_modules/lodash/_baseToString.js`	📉 -22 B (-1.93%)	1.12 kB → 1.09 kB
`src/components/filters/FilterExpression.tsx`	📉 -61 B (-2.04%)	2.92 kB → 2.86 kB
`node_modules/lodash/_Symbol.js`	📉 -4 B (-3.67%)	109 B → 105 B
`src/components/filters/CondOpMenu.tsx`	🔥 -700 B (-100%)	700 B → 0 B

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/AppliedFilters.js	20.41 kB → 27.39 kB (+6.97 kB)	+34.15%
static/js/wide.js	263.11 kB → 266.8 kB (+3.69 kB)	+1.40%
static/js/index.js	3 MB → 3 MB (+606 B)	+0.02%

Smaller

Asset	File Size	% Changed
static/js/ReportRouter.js	1.23 MB → 1.22 MB (-6.11 kB)	-0.49%

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/narrow.js	59.97 kB	0%

github-actions · 2024-04-26T15:47:51Z

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
1	1.2 MB → 1.2 MB (+242 B)	+0.02%

Changeset

File	Δ	Size
`packages/loot-core/src/platform/server/sqlite/index.web.ts`	📈 +91 B (+1.74%)	5.1 kB → 5.18 kB
`packages/loot-core/src/shared/rules.ts`	📈 +100 B (+1.23%)	7.92 kB → 8.02 kB
`packages/loot-core/src/server/accounts/transaction-rules.ts`	📈 +266 B (+0.95%)	27.29 kB → 27.55 kB
`packages/loot-core/src/server/aql/compiler.ts`	📈 +309 B (+0.86%)	34.91 kB → 35.21 kB
`packages/loot-core/src/server/accounts/rules.ts`	📈 +82 B (+0.28%)	28.79 kB → 28.87 kB
`packages/loot-core/src/server/db/index.ts`	📉 -117 B (-0.65%)	17.71 kB → 17.59 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
kcab.worker.js	1.2 MB → 1.2 MB (+242 B)	+0.02%

Smaller

No assets were smaller

Unchanged

No assets were unchanged

youngcw · 2024-04-26T16:10:21Z

The colors probably could use some work, but other than that this looks great

joel-jeremy · 2024-04-26T16:56:36Z

Any suggestions on the colors? Would it be better to apply primary colors to them? But that would make the tags stand out on the table.

youngcw · 2024-04-26T17:18:35Z

I don't think I have good recommendations for specific colors. What I was seeing is that the pill colors can be hard to see when the transaction is hovered and highlighted (the same color in midnight mode), and the pill hover color was usually really close to the normal color so it was like nothing happened when hovering.

youngcw · 2024-04-26T20:54:10Z

Those colors look good to me

Teprifer · 2024-04-27T01:16:45Z

If you're already on the All Accounts screen, clicking the tag doesn't apply the filtering.

joel-jeremy · 2024-04-27T02:54:18Z

If you're already on the All Accounts screen, clicking the tag doesn't apply the filtering.
Should be fixed now :)

Teprifer · 2024-04-27T13:13:38Z

Thanks! :)

I also like the new behaviour where it only filters the current account screen when clicked on, I think it's more intuitive.

MatissJanis · 2024-04-27T21:01:28Z

Maybe it's just me, but I dislike that the tags are in bold. Nothing else in the table is in bold.

Other than that: this is an amazing addition! Thanks for working on this!

MatissJanis · 2024-04-29T19:08:38Z

packages/desktop-client/src/components/transactions/TransactionList.jsx

+    const filterConditions = [
+      { field: 'notes', op: 'contains', value: noteTag, type: 'string' },
+    ];
+    onApplyFilters(filterConditions);


💭 thought: ‏currently the click on a tag REPLACES the existing filters. Would it be better to instead append a filter?

I can see a use case where I filter by category. And then click on a tag to narrow it down even further. Currently that would remove the category filter.

WDYT?

MatissJanis · 2024-04-29T19:10:10Z

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

+function notesTagFormatter(value, onNoteTagClick) {
+  const words = value.split(' ');
+  return (
+    <>


🥜 nitpick: ‏unnecessary wrapping fragment.

carkom

First of all this is amazing and I love the functionality. Any chance we could add an autocomplete list to the tags?

There's a lot going on in this PR.

I'm not sure why changing naming conventions for filters across the entire app is relevant for this PR, would be better as a separate PR.

I like the tag colors, they look good to me. Pill color changes are no good. They are used in 4 other pages and the proposed changes do not pass AA (eg they are harder to read). Might also be best in a different PR as the pill color doesn't really relate to the core functionality of this PR.

packages/desktop-client/src/style/themes/dark.ts

youngcw · 2024-04-29T22:51:35Z

If tags have overlap in their names then you get multiple tags in the filter. Example: make tags for #tag and #tag2 and then click on #tag and both show up in the filtered list

...actions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png

psybers · 2024-05-30T19:36:50Z

packages/desktop-client/src/components/modals/EditRule.jsx

@@ -104,10 +104,13 @@ export function OpSelect({
  onChange,
 }) {
  let line;
-  // We don't support the `contains` operator for the id type for
+  // We don't support the `contains, `doesNotContain` operator for the id type for


This should also mention matches:

Suggested change

// We don't support the `contains, `doesNotContain` operator for the id type for

// We don't support the `contains, `doesNotContain`, `matches` operators for the id type for

trafico-bot bot added the 🔍 Ready for Review Pull Request is not reviewed yet label Apr 26, 2024

github-actions bot changed the title ~~Format transaction notes as clickable tags~~ [WIP] Format transaction notes as clickable tags Apr 26, 2024

trafico-bot bot added 🚧 WIP Still work-in-progress, please don't review and don't merge and removed 🔍 Ready for Review Pull Request is not reviewed yet labels Apr 26, 2024

joel-jeremy changed the title ~~[WIP] Format transaction notes as clickable tags~~ Format transaction notes as clickable tags Apr 26, 2024

trafico-bot bot added 🔍 Ready for Review Pull Request is not reviewed yet and removed 🚧 WIP Still work-in-progress, please don't review and don't merge labels Apr 26, 2024

joel-jeremy force-pushed the transaction-notes-as-tags branch from 488b421 to eea961a Compare April 27, 2024 21:23

MatissJanis previously approved these changes Apr 29, 2024

View reviewed changes

trafico-bot bot added ✅ Approved Pull Request has been approved and can be merged and removed 🔍 Ready for Review Pull Request is not reviewed yet labels Apr 29, 2024

carkom requested changes Apr 29, 2024

View reviewed changes

packages/desktop-client/src/style/themes/dark.ts Outdated Show resolved Hide resolved

trafico-bot bot added ⚠️ Changes requested Pull Request needs changes before it can be reviewed again and removed ✅ Approved Pull Request has been approved and can be merged labels Apr 29, 2024

joel-jeremy dismissed MatissJanis’s stale review via 6f1b66f April 29, 2024 22:12

trafico-bot bot added 🔍 Ready for Review Pull Request is not reviewed yet and removed ⚠️ Changes requested Pull Request needs changes before it can be reviewed again labels Apr 29, 2024

youngcw reviewed Apr 30, 2024

View reviewed changes

...actions.test.js-snapshots/Transactions-filters-transactions-by-category-7-chromium-linux.png Outdated Show resolved Hide resolved

joel-jeremy added 25 commits May 30, 2024 10:17

Rename variables

d874063

Remove font weight

50171b2

Cleanup style

53a6970

Append note tag filters

9c00c6b

Fix overlapping UI

f0643b0

Revert pill colors

cedbf3e

Rename prop

6ba6e74

Rename notes

fef172f

Delete filter margin

c7b3442

Fix typecheck error

fe61fd3

VRT + typecheck fix

08510b7

VRT standard docker container

f89d647

Add matches op in rules + use it to match tags

3c2899b

Fix database types

3c91525

Fix typecheck error

ed9c427

Fix typecheck

2f7d286

Move create_function call

4774ebd

VRT

f19d9ec

Update tag regex

2f07df3

Escape regex input

3f4a5b9

Update tag regex

95bd91f

Use onApplyFilter

96cbb34

Update tag formatting

59eaefd

Fix tag formatting

c5670fd

Update regex

20e5099

joel-jeremy force-pushed the transaction-notes-as-tags branch from 48dbe39 to 20e5099 Compare May 30, 2024 17:19

VRT

a97de6c

psybers suggested changes May 30, 2024

View reviewed changes

trafico-bot bot added ⚠️ Changes requested Pull Request needs changes before it can be reviewed again and removed 🔍 Ready for Review Pull Request is not reviewed yet labels May 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Format transaction notes as clickable tags #2670

Format transaction notes as clickable tags #2670

joel-jeremy commented Apr 26, 2024

netlify bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

youngcw commented Apr 26, 2024

joel-jeremy commented Apr 26, 2024

youngcw commented Apr 26, 2024

youngcw commented Apr 26, 2024

Teprifer commented Apr 27, 2024

joel-jeremy commented Apr 27, 2024

Teprifer commented Apr 27, 2024

MatissJanis commented Apr 27, 2024

MatissJanis Apr 29, 2024

MatissJanis Apr 29, 2024

carkom left a comment •

edited

youngcw commented Apr 29, 2024 •

edited

psybers May 30, 2024

	// We don't support the `contains, `doesNotContain` operator for the id type for
	// We don't support the `contains, `doesNotContain`, `matches` operators for the id type for

Format transaction notes as clickable tags #2670

Are you sure you want to change the base?

Format transaction notes as clickable tags #2670

Conversation

joel-jeremy commented Apr 26, 2024

netlify bot commented Apr 26, 2024 • edited

✅ Deploy Preview for actualbudget ready!

github-actions bot commented Apr 26, 2024 • edited

Bundle Stats — desktop-client

github-actions bot commented Apr 26, 2024 • edited

Bundle Stats — loot-core

youngcw commented Apr 26, 2024

joel-jeremy commented Apr 26, 2024

youngcw commented Apr 26, 2024

youngcw commented Apr 26, 2024

Teprifer commented Apr 27, 2024

joel-jeremy commented Apr 27, 2024

Teprifer commented Apr 27, 2024

MatissJanis commented Apr 27, 2024

MatissJanis Apr 29, 2024

Choose a reason for hiding this comment

MatissJanis Apr 29, 2024

Choose a reason for hiding this comment

carkom left a comment • edited

Choose a reason for hiding this comment

youngcw commented Apr 29, 2024 • edited

psybers May 30, 2024

Choose a reason for hiding this comment

netlify bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

github-actions bot commented Apr 26, 2024 •

edited

carkom left a comment •

edited

youngcw commented Apr 29, 2024 •

edited