-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Foundations for the budget automations UI #4308
Foundations for the budget automations UI #4308
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey 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
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller
Unchanged
|
Bundle Stats — loot-coreHey 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
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
Looks good so far. One thing that maybe you could keep in mind is that it would be nice to have a central place to view and edit templates. So this new modal to make templates should be ready to be used both from the budget page and a goals list page. |
Do you have thoughts on gracefully migrating from the notes to the UI? Would it end up being a all at once thing once the UI is in a good state? |
Curious, what is the intended use-cases for an overall goals list? I'm not necessarily opposed, but I do worry that it's yet-another-page and that it would have a lot of visual noise |
Good question! Here was my overall framing for the rollout:
My thinking for partial migrations is to show a pop-up when you open the UI in a category that currently has note-based templates, asking the user if they'd like to switch that category to the UI instead. The downside of course is it's a bit toilsome to do for all categories—maybe that pop-up can have a "do for all" checkbox or something. Wdyt? |
The idea would be that it's a way to plan out your budget. You could see the total expected budget amount, see the order of the templates if you have many priority levels, add/adjust templates while being able to see the big picture, etc. |
It'd make it a lot easier to see at a glance, and make priorities significantly easier to plan out - either by being able to sort by priority, or drag and drop. See totals per category, per group, budget overall, that sort of budget nerdy stuff. A separate feature to this PR. Regarding migrating, how about a multi-stage approach? Initially as the UI is still being built, rather than ask if the user wants to switch the category over to the UI, which would be annoying indeed, instead have a warning at the top of the UI advising that note templates are disabled for the category while UI automations are in use. You'd have to tweak the UI slightly to not start with an automation box. Once the UI can handle all templates the check and apply template menus pops up a notification that text based templates are still in use and we recommend converting them to UI templates as text based will be removed in the future. Finally, several months after the UI is complete, remove the text based templates so there's less to maintain. Suggest a ? or help link within the UI to explain what budget automations are, or link to the docs page. |
My primary concern with the migration is that it will be hard to have both notes and UI templates living together. What if someone tries the UI and then goes back to notes? We have to account for a lot of edge cases. I guess we could have a more involved roll out compared to other experimental features where we have preferences for each category for a while, then remove the prefs when the feature is mainlined. |
👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review. |
b91c630
to
5dc498a
Compare
I would love to see the Templates/Goals feature moved from Experimental to Main. Keep up the great work! |
6a202c5
to
aea27c9
Compare
@youngcw @Teprifer finally got around to addressing the previous comments. For a rollout plan, here's what I have in mind—let me know your thoughts:
Assuming the above plan is ok with y'all, I've moved most changes to a separate PR #4398 and will un-mark this PR as draft! Looking to see if the overall approach addresses your comments (note that I haven't implemented priorities or visualizing templates yet, but the structure is there—the idea for the latter is you'll have some way of temporarily overriding your "Available funds" value for the month and can visualize goals from there). Preview link here |
aea27c9
to
713f5f4
Compare
This comment was marked as resolved.
This comment was marked as resolved.
713f5f4
to
4d1b63f
Compare
@@ -60,7 +60,7 @@ interface AverageTemplate extends BaseTemplate { | |||
} | |||
|
|||
interface GoalTemplate extends BaseTemplate { | |||
type: 'simple'; | |||
type: 'goal'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed since I'm pretty sure it's a typo, will matter later once we implement goal-type templates
@@ -1,5 +1,6 @@ | |||
export type FeatureFlag = | |||
| 'goalTemplatesEnabled' | |||
| 'goalTemplatesUIEnabled' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Calling this goalTemplatesUIEnabled
rather than budgetAutomationsUIEnabled
so the flags are consistent (and a search in the codebase for goalTemplates
in the future will find all usages)
editorPill: { | ||
color: theme.pillText, | ||
backgroundColor: theme.pillBackground, | ||
borderRadius: 4, | ||
padding: '3px 5px', | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is unused in the current PR, but the next PR will use the same styles in a different component so I extracted it here
a53c187
to
56a23a8
Compare
That process seems good to me. Could we have the feature be available when in development mode instead of having to set a variable every time we want to test? Similar to the theme toggle button that is only visible in dev builds. |
Good idea |
I think the only issue with that approach is that the demo builds won't work that way and would still need the dev variable via the console or something. |
One other thought is that if we do dev mode then anyone with a local install will see the option, no? Maybe we need to just do it on preview URLs :/ |
I guess the manual setting works for now. We can change it later to something else if we want. |
Would you consider keeping the text functionality too in the background? Moving it out of notes would be good, but maybe the automations modal could have a toggle between editing it in graphical/text format with graphical as the default of course. |
Hmm, what would the motivation for keeping the text format be? I'm a little wary of keeping it because some options I'm planning on adding won't translate 1:1 to text (simple example: you're only allowed to have one 'up to' in a category, but you can add that as a text like as much as you want. Another example: I was considering automatically setting #goal templates for certain save-up style templates) |
I was thinking that they'd work together, so the text wouldn't be saved but built from the DB, then it should map 1:1 with the UI data (I might have this wrong though). My idea was that it would make debugging easier if people had issues with templates, we could ask them to grab the text and send it. Is the idea to drop the text formatting stuff entirely once the UI is in place after the migration phase? |
It could be nice to be able to add via text in the UI, at least at first. I would like to ultimately move away from the text templates as the text parsing limits potential flexibility of the templates. |
That's fair enough, if it becomes limiting we should drop them. |
One example of text being limiting is that the schedule templates need extra special characters to parse the new percent adjustments properly. Since the schedule name can be anything its hard to parse with extra flags. |
I noticed that, I didn't spot the PR in time but I was going to suggest dropping those and quoting the schedule name instead (if that's possible) #template schedule "Long Schedule name with increase keyword in the title" increase 10% |
One other observation: the UI I'm proposing already has a textual representation of the templates (templates are summarized when outside of the editor). So maybe we can rely on that instead? |
* 🐛 Fix Initializing the connection to the local database hang (actualbudget#4375) * fix initializing to the local db * release notes * Add percentage adjustments to schedule templates (actualbudget#4098) (actualbudget#4257) * add percentage adjustments to schedule templates * update release note * remove unecessary parentheses * Update packages/loot-core/src/server/budget/goalsSchedule.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * PR comments addressed * Linting fixes * Updated error handling, added tests * Linting fixes --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: youngcw <[email protected]> * Custom mapping and import settings for bank sync providers (actualbudget#4253) * barebones UI * add saving and prefs * add last sync functionality * use mapping for synced transactions * note * jest -u * Update VRT * Coderabbit Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * add new fields * rename migration, newer in master * lint * coderabbit * update snapshots * GoCardless handlers fallback and notes * expose new fields from SimpleFIN * update tests * update instructions on GoCardless handlers * lint * feedback * Update VRT --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: youngcw <[email protected]> * Add fallback value for payeename: 'undefined' - CBC Bank (actualbudget#4384) * Add fallback value for payename: 'undefined' * docs: add release note * Add fallback value for payename: 'undefined' (for negative amounts) * [TypeScript] Convert test page models to TS (actualbudget#4218) * Dummy commit * Delete js snapshots * Move extended expect and test to fixtures * Fix wrong commit * Update VRT * Dummy commit to run GH actions * Convert test page models to TS * Release notes * Fix typecheck errors * New page models to TS * Fix typecheck error * Fix page name * Put awaits on getTableTotals --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * rename two migrations to realign with convention (actualbudget#4343) * Updating sync server package name to @actual-app/sync-server (actualbudget#4370) * updating sync server to have a consistent package name * release notes * Add today button on mobile budget page (actualbudget#4380) * feat: today button on mobile budget page Jumps to the current month * add release note * cleaner onCurrentMonth * Update VRT * use SvgCalendar from icons/v2 Co-authored-by: Matt Fiddaman <[email protected]> * Update VRT --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Matt Fiddaman <[email protected]> * Development mode for sync server (React Fast Refresh on port 5006) (actualbudget#4372) * devmode for sync server * removed pluggy from this version * md * code review * changed how open browser * missed this * linter * trigger actions * 🐛 Fix: Error rate limit at user directory page (actualbudget#4397) * Error rate limit * md * 🐛 Fix new proxy middleware dependency missing on prod build (actualbudget#4400) * fix new proxy middleware not installed on prod build * release notes * Remove deprecated imports for several components (actualbudget#4385) * don't unbudget goals * lint * Fixes actualbudget#4069 : Ignore CSV inOutMode during OFX imports (actualbudget#4382) * Ignore inOutMode during OFX imports * Add release notes --------- Co-authored-by: youngcw <[email protected]> * fix tooltip translation (actualbudget#4402) * [TypeScript] Make `db.runQuery` generic to make it easy to type DB query results (actualbudget#4247) * Make runQuery generic to make it easy to type DB query results. * Release notes * typo * update mapping data for existing synced transactions and always show direction dropdown (actualbudget#4403) * update sync mapping data for existing transactions on sync * show payment direction dropdown regardless of sample data * note * ignore changes in raw_synced_data * Fix top-level types of `send` function (actualbudget#4145) * Add release notes * Fix types of `send` function * Fix `send` types in a number of places * PR feedback * Foundations for the budget automations UI (actualbudget#4308) * Foundations for the budget automations UI * Coderabbit * Fix react-hooks/exhaustive-deps error on useSelected.tsx (actualbudget#4258) * Fix react-hooks/exhaustive-deps error on useSelected.tsx * Release notes * Fix react-hooks/exhaustive-deps error on usePayees.ts (actualbudget#4260) * Fix react-hooks/exhaustive-deps error on usePayees.ts * Rename * Release notes * Fix react-hooks/exhaustive-deps error on useAccounts.ts (actualbudget#4262) * Fix react-hooks/exhaustive-deps error on useAccounts.ts * Release notes * Fix react-hooks/exhaustive-deps error on Titlebar.tsx (actualbudget#4273) * Fix react-hooks/exhaustive-deps error on Titlebar.tsx * Release notes * [WIP] BANKS_WITH_LIMITED_HISTORY constant update (actualbudget#4388) * Fix react-hooks/exhaustive-deps error on useProperFocus.tsx (actualbudget#4259) * Fix react-hooks/exhaustive-deps error on useProperFocus.tsx * Remove comment in eslint config * Release notes * Fix react-hooks/exhaustive-deps error on TransactionsTable.jsx (actualbudget#4268) * Fix react-hooks/exhaustive-deps error on TransactionsTable.jsx * Release notes * Fix lint * Fix react-hooks/exhaustive-deps error on table.tsx (actualbudget#4274) * Fix react-hooks/exhaustive-deps error on table.tsx * Release notes * Fix react-hooks/exhaustive-deps error on useCategories.ts (actualbudget#4261) * Fix react-hooks/exhaustive-deps error on useCategories.ts * Release notes * 👷 Typescript: Improving typing of asyncStorage (global-store.json) (actualbudget#4369) * typing globalprefs * adding release notes * unneeded partial * removing prop that crept in * 📚 Translation batch #1 (actualbudget#4408) * Translation batch * md * Update packages/desktop-client/src/components/settings/Export.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix code review from coderabbit * code review --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Fix currencyToAmount incorrectly converting input (actualbudget#4383) * fix: ensure currencyToAmount works regardless of the configured number format * chore: linting * docs: add release note * test: ensure correct amount is entered for debit when adding split transactions * chore: rename variable thousandsSep to thousandsSeparator Co-authored-by: Joel Jeremy Marquez <[email protected]> * chore: rename variable decimalSep to decimalSeparator Co-authored-by: Joel Jeremy Marquez <[email protected]> * chore: rename decimalSep and thousandsSep variables to decimalSeparator and thousandsSeparator --------- Co-authored-by: Joel Jeremy Marquez <[email protected]> * useDisplayPayee hook to unify payee names in mobile and desktop. (actualbudget#4213) * useDisplayPayee hook to unify payee logic in mobile and desktop * Release notes * Fix typecheck errors * Fix test * Update test * Revert (No payee) color * Fix tests * VRT * Fix category transactions * Fix lint and VRT * Update VRT * Translate --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Extract transaction related server handlers from `main.ts` to `server/transactions/app.ts` (actualbudget#4221) * Move transaction related handlers to server/transactions folder and use the new convention * Fix lint and typecheck * Release notes * Update handler names * Move get-earliest-transaction * Update release notes * Fix tests * Fix types * Fix lint * Update snapshot * Remove duplicate parse-file.ts * Fix lint * 🐛 Fix `On budget` / `Off budget` underline with translated languages (actualbudget#4417) * Fix `On budget` / `Off budget` underline * md * ajuste para o merge --------- Co-authored-by: Michael Clark <[email protected]> Co-authored-by: Matt Farrell <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: youngcw <[email protected]> Co-authored-by: Matt Fiddaman <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Martin Michotte <[email protected]> Co-authored-by: Joel Jeremy Marquez <[email protected]> Co-authored-by: Adam Stück <[email protected]> Co-authored-by: Alberto Cortina Eduarte <[email protected]> Co-authored-by: Gabriel J. Michael <[email protected]> Co-authored-by: Julian Dominguez-Schatz <[email protected]> Co-authored-by: Michał Gołąb <[email protected]> Co-authored-by: Antoine Taillard <[email protected]>
Round 2 of prototyping a goal template UI (the previous PR can't be reopened sadly). Addressed a bit of feedback from that PR.