Release notes

* Optimize useSheetValue

* Fix lint

* Fix mock bind

* Reduce re-renders

* Update useSheetValue

* Update

* Make QueryState immutable

* Release notes

.eslintrc.js

@@ -161,7 +161,12 @@ module.exports = {
     ],
     'no-with': 'warn',
     'no-whitespace-before-property': 'warn',
-    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: '(useQuery)',
+      },
+    ],
     'require-yield': 'warn',
     'rest-spread-spacing': ['warn', 'never'],
     strict: ['warn', 'never'],

.github/workflows/size-compare.yml

@@ -25,7 +25,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Wait for ${{github.base_ref}} build to succeed
-        uses: fountainhead/action-wait-for-check@v1.1.0
+        uses: fountainhead/action-wait-for-check@v1.2.0
         id: master-build
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -33,7 +33,7 @@ jobs:
           ref: ${{github.base_ref}}
 
       - name: Wait for PR build to succeed
-        uses: fountainhead/action-wait-for-check@v1.1.0
+        uses: fountainhead/action-wait-for-check@v1.2.0
         id: wait-for-build
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
@@ -46,7 +46,7 @@ jobs:
           echo "Build failed on PR branch or ${{github.base_ref}}"
           exit 1
       - name: Download build artifact from ${{github.base_ref}}
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v6
         id: pr-build
         with:
           branch: ${{github.base_ref}}
@@ -55,12 +55,13 @@ jobs:
           path: base
 
       - name: Download build artifact from PR
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v6
         with:
           pr: ${{github.event.pull_request.number}}
           workflow: build.yml
           name: build-stats
           path: head
+          allow_forks: true
 
       - name: Strip content hashes from stats files
         run: |
@@ -70,14 +71,14 @@ jobs:
           sed -i -E 's/index\.[0-9a-zA-Z_-]{8,}\./index./g' ./base/web-stats.json
           sed -i -E 's/\.[0-9a-zA-Z_-]{8,}\.chunk\././g' ./base/web-stats.json
           sed -i -E 's/\.[0-9a-f]{8,}\././g' ./base/*.json
-      - uses: twk3/rollup-size-compare-action@v1.0.0
+      - uses: twk3/rollup-size-compare-action@v1.1.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           current-stats-json-path: ./head/web-stats.json
           base-stats-json-path: ./base/web-stats.json
           title: desktop-client
 
-      - uses: github/webpack-bundlesize-compare-action@v1.8.2
+      - uses: github/webpack-bundlesize-compare-action@v2.1.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           current-stats-json-path: ./head/loot-core-stats.json

.github/workflows/update-vrt.yml

@@ -0,0 +1,113 @@
+name: /update-vrt
+on:
+  issue_comment:
+    types: [ created ]
+
+permissions:
+  pull-requests: read
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number }}-${{ contains(github.event.comment.body, '/update-vrt') }}
+  cancel-in-progress: true
+
+jobs:
+  update-vrt:
+    name: Update VRT
+    runs-on: ubuntu-latest
+    if: |
+      github.event.issue.pull_request &&
+      contains(github.event.comment.body, '/update-vrt')
+    container:
+      image: mcr.microsoft.com/playwright:v1.41.1-jammy
+    steps:
+      - name: Get PR branch
+#        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
+        uses: gotson/pull-request-comment-branch@head-repo-owner-dist
+        id: comment-branch
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{ steps.comment-branch.outputs.head_owner }}/${{ steps.comment-branch.outputs.head_repo }}
+          ref: ${{ steps.comment-branch.outputs.head_ref }}
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Wait for Netlify build to finish
+        id: netlify
+        env:
+          COMMIT_SHA: ${{ steps.comment-branch.outputs.head_sha }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: ./.github/actions/netlify-wait-for-build
+      - name: Run VRT Tests on Netlify URL
+        run: yarn vrt --update-snapshots
+        env:
+          E2E_START_URL: ${{ steps.netlify.outputs.url }}
+      - name: Create patch
+        run: |
+          git config --system --add safe.directory "*"
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git reset
+          git add "**/*.png"
+          if git diff --staged --quiet; then
+            echo "No changes to commit"
+            exit 0
+          fi
+          git commit -m "Update VRT"
+          git format-patch -1 HEAD --stdout > Update-VRT.patch
+      - uses: actions/upload-artifact@v4
+        with:
+          name: patch
+          path: Update-VRT.patch
+
+  push-patch:
+    runs-on: ubuntu-latest
+    needs: update-vrt
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Get PR branch
+        #        Until https://github.com/xt0rted/pull-request-comment-branch/issues/322 is resolved we use the forked version
+        uses: gotson/pull-request-comment-branch@head-repo-owner-dist
+        id: comment-branch
+      - uses: actions/checkout@v4
+        with:
+          repository: ${{ steps.comment-branch.outputs.head_owner }}/${{ steps.comment-branch.outputs.head_repo }}
+          ref: ${{ steps.comment-branch.outputs.head_ref }}
+      - uses: actions/download-artifact@v4
+        continue-on-error: true
+        with:
+          name: patch
+      - name: Apply patch and push
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git apply Update-VRT.patch
+          git add "**/*.png"
+          if git diff --staged --quiet; then
+            echo "No changes to commit"
+            exit 0
+          fi
+          git commit -m "Update VRT"
+          git push origin HEAD:${{ steps.comment-branch.outputs.head_ref }}
+      - name: Add finished reaction
+        uses: dkershner6/reaction-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commentId: ${{ github.event.comment.id }}
+          reaction: "rocket"
+
+  add-starting-reaction:
+    runs-on: ubuntu-latest
+    if: |
+      github.event.issue.pull_request &&
+      contains(github.event.comment.body, '/update-vrt')
+    permissions:
+      pull-requests: write
+    steps:
+      - name: React to comment
+        uses: dkershner6/reaction-action@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commentId: ${{ github.event.comment.id }}
+          reaction: "+1"

.gitignore

@@ -50,3 +50,6 @@ bundle.mobile.js.map
 
 # Local Netlify folder
 .netlify
+
+# build output
+package.tgz

bin/package-electron

@@ -36,7 +36,7 @@ fi
 
 yarn workspace loot-core build:node
 
-yarn workspace @actual-app/web build --mode=desktop
+yarn workspace @actual-app/web build --mode=desktop # electron specific build
 
 yarn workspace desktop-electron update-client
 

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "6.10.0",
+  "version": "24.12.0",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {

packages/desktop-client/.gitignore

@@ -10,6 +10,7 @@ playwright-report
 
 # production
 build
+build-electron
 build-stats
 stats.json
 

packages/desktop-client/e2e/accounts.mobile.test.js

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+import { ConfigurationPage } from './page-models/configuration-page';
+import { MobileNavigation } from './page-models/mobile-navigation';
+
+test.describe('Mobile Accounts', () => {
+  let page;
+  let navigation;
+  let configurationPage;
+
+  test.beforeEach(async ({ browser }) => {
+    page = await browser.newPage();
+    navigation = new MobileNavigation(page);
+    configurationPage = new ConfigurationPage(page);
+
+    await page.setViewportSize({
+      width: 350,
+      height: 600,
+    });
+    await page.goto('/');
+    await configurationPage.createTestFile();
+  });
+
+  test.afterEach(async () => {
+    await page.close();
+  });
+
+  test('opens the accounts page and asserts on balances', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    await accountsPage.waitFor();
+
+    const account = await accountsPage.getNthAccount(1);
+
+    await expect(account.name).toHaveText('Ally Savings');
+    await expect(account.balance).toHaveText('7,653.00');
+    await expect(page).toMatchThemeScreenshots();
+  });
+
+  test('opens individual account page and checks that filtering is working', async () => {
+    const accountsPage = await navigation.goToAccountsPage();
+    await accountsPage.waitFor();
+
+    const accountPage = await accountsPage.openNthAccount(0);
+    await accountPage.waitFor();
+
+    await expect(accountPage.heading).toHaveText('Bank of America');
+    await expect(accountPage.transactionList).toBeVisible();
+    await expect(await accountPage.getBalance()).toBeGreaterThan(0);
+    await expect(accountPage.noTransactionsMessage).not.toBeVisible();
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.searchByText('nothing should be found');
+    await expect(accountPage.noTransactionsMessage).toBeVisible();
+    await expect(accountPage.transactions).toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+
+    await accountPage.clearSearch();
+    await expect(accountPage.transactions).not.toHaveCount(0);
+
+    await accountPage.searchByText('Kroger');
+    await expect(accountPage.transactions).not.toHaveCount(0);
+    await expect(page).toMatchThemeScreenshots();
+  });
+});

packages/desktop-client/e2e/accounts.test.js

@@ -1,3 +1,5 @@
+import { join } from 'path';
+
 import { test, expect } from '@playwright/test';
 
 import { ConfigurationPage } from './page-models/configuration-page';
@@ -9,7 +11,7 @@ test.describe('Accounts', () => {
   let configurationPage;
   let accountPage;
 
-  test.beforeAll(async ({ browser }) => {
+  test.beforeEach(async ({ browser }) => {
     page = await browser.newPage();
     navigation = new Navigation(page);
     configurationPage = new ConfigurationPage(page);
@@ -18,7 +20,7 @@ test.describe('Accounts', () => {
     await configurationPage.createTestFile();
   });
 
-  test.afterAll(async () => {
+  test.afterEach(async () => {
     await page.close();
   });
 
@@ -60,6 +62,8 @@ test.describe('Accounts', () => {
 
     test('creates a transfer from two existing transactions', async () => {
       accountPage = await navigation.goToAccountPage('For budget');
+      await accountPage.waitFor();
+
       await expect(accountPage.accountName).toHaveText('Budgeted Accounts');
 
       await accountPage.filterByNote('Test Acc Transfer');
@@ -99,4 +103,61 @@ test.describe('Accounts', () => {
       await expect(transaction.account).toHaveText('Ally Savings');
     });
   });
+
+  test.describe('Import Transactions', () => {
+    test.beforeEach(async () => {
+      accountPage = await navigation.createAccount({
+        name: 'CSV import',
+        offBudget: false,
+        balance: 0,
+      });
+      await accountPage.waitFor();
+    });
+
+    async function importCsv(screenshot = false) {
+      const fileChooserPromise = page.waitForEvent('filechooser');
+      await accountPage.page.getByRole('button', { name: 'Import' }).click();
+
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(join(__dirname, 'data/test.csv'));
+
+      if (screenshot) await expect(page).toMatchThemeScreenshots();
+
+      const importButton = accountPage.page.getByRole('button', {
+        name: /Import \d+ transactions/,
+      });
+      await importButton.click();
+
+      await expect(importButton).not.toBeVisible();
+    }
+
+    test('imports transactions from a CSV file', async () => {
+      await importCsv(true);
+    });
+
+    test('import csv file twice', async () => {
+      await importCsv(false);
+
+      const fileChooserPromise = page.waitForEvent('filechooser');
+      await accountPage.page.getByRole('button', { name: 'Import' }).click();
+
+      const fileChooser = await fileChooserPromise;
+      await fileChooser.setFiles(join(__dirname, 'data/test.csv'));
+
+      await expect(page).toMatchThemeScreenshots();
+
+      const importButton = accountPage.page.getByRole('button', {
+        name: /Import \d+ transactions/,
+      });
+
+      await expect(importButton).toBeDisabled();
+      await expect(await importButton.innerText()).toMatch(
+        /Import 0 transactions/,
+      );
+
+      await accountPage.page.getByRole('button', { name: 'Close' }).click();
+
+      await expect(importButton).not.toBeVisible();
+    });
+  });
 });

packages/desktop-client/e2e/budget.mobile.test.js

@@ -0,0 +1,281 @@
+import { test, expect } from '@playwright/test';
+
+import * as monthUtils from 'loot-core/src/shared/months';
+
+import { ConfigurationPage } from './page-models/configuration-page';
+import { MobileNavigation } from './page-models/mobile-navigation';
+
+const budgetTypes = ['Envelope', 'Tracking'];
+
+budgetTypes.forEach(budgetType => {
+  test.describe(`Mobile Budget [${budgetType}]`, () => {
+    let page;
+    let navigation;
+    let configurationPage;
+    let previousGlobalIsTesting;
+
+    test.beforeAll(() => {
+      // TODO: Hack, properly mock the currentMonth function
+      previousGlobalIsTesting = global.IS_TESTING;
+      global.IS_TESTING = true;
+    });
+
+    test.afterAll(() => {
+      // TODO: Hack, properly mock the currentMonth function
+      global.IS_TESTING = previousGlobalIsTesting;
+    });
+
+    test.beforeEach(async ({ browser }) => {
+      page = await browser.newPage();
+      navigation = new MobileNavigation(page);
+      configurationPage = new ConfigurationPage(page);
+
+      await page.setViewportSize({
+        width: 350,
+        height: 600,
+      });
+      await page.goto('/');
+      await configurationPage.createTestFile();
+
+      if (budgetType === 'Tracking') {
+        // Set budget type to tracking
+        const settingsPage = await navigation.goToSettingsPage();
+        await settingsPage.useBudgetType('tracking');
+      }
+    });
+
+    test.afterEach(async () => {
+      await page.close();
+    });
+
+    test('loads the budget page with budgeted amounts', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      await expect(budgetPage.categoryNames).toHaveText([
+        'Food',
+        'Restaurants',
+        'Entertainment',
+        'Clothing',
+        'General',
+        'Gift',
+        'Medical',
+        'Savings',
+        'Cell',
+        'Internet',
+        'Mortgage',
+        'Water',
+        'Power',
+        'Starting Balances',
+        'Misc',
+        'Income',
+      ]);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    // Page Header Tests
+
+    test('checks that clicking the Actual logo in the page header opens the budget page menu', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      await budgetPage.openBudgetPageMenu();
+
+      const budgetPageMenuModal = page.getByRole('dialog');
+
+      await expect(budgetPageMenuModal).toBeVisible();
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test("checks that clicking the left arrow in the page header shows the previous month's budget", async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const selectedMonth = await budgetPage.getSelectedMonth();
+      const displayMonth = monthUtils.format(
+        selectedMonth,
+        budgetPage.MONTH_HEADER_DATE_FORMAT,
+      );
+
+      await expect(budgetPage.heading).toHaveText(displayMonth);
+
+      const previousMonth = await budgetPage.goToPreviousMonth();
+      const previousDisplayMonth = monthUtils.format(
+        previousMonth,
+        budgetPage.MONTH_HEADER_DATE_FORMAT,
+      );
+
+      await expect(budgetPage.heading).toHaveText(previousDisplayMonth);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('checks that clicking the month in the page header opens the month menu modal', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const selectedMonth = await budgetPage.getSelectedMonth();
+
+      await budgetPage.openMonthMenu();
+
+      const monthMenuModal = page.getByRole('dialog');
+      const monthMenuModalHeading = monthMenuModal.getByRole('heading');
+
+      const displayMonth = monthUtils.format(
+        selectedMonth,
+        budgetPage.MONTH_HEADER_DATE_FORMAT,
+      );
+      await expect(monthMenuModalHeading).toHaveText(displayMonth);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test("checks that clicking the right arrow in the page header shows the next month's budget", async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const selectedMonth = await budgetPage.getSelectedMonth();
+      const displayMonth = monthUtils.format(
+        selectedMonth,
+        budgetPage.MONTH_HEADER_DATE_FORMAT,
+      );
+
+      await expect(budgetPage.heading).toHaveText(displayMonth);
+
+      const nextMonth = await budgetPage.goToNextMonth();
+      const nextDisplayMonth = monthUtils.format(
+        nextMonth,
+        budgetPage.MONTH_HEADER_DATE_FORMAT,
+      );
+
+      await expect(budgetPage.heading).toHaveText(nextDisplayMonth);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    // Category / Category Group Menu Tests
+
+    test('checks that clicking the category group name opens the category group menu modal', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryGroupName = await budgetPage.getCategoryGroupNameForRow(0);
+      await budgetPage.openCategoryGroupMenu(categoryGroupName);
+
+      const categoryMenuModalHeading = page
+        .getByRole('dialog')
+        .getByRole('heading');
+
+      await expect(categoryMenuModalHeading).toHaveText(categoryGroupName);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('checks that clicking the category name opens the category menu modal', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryName = await budgetPage.getCategoryNameForRow(0);
+      await budgetPage.openCategoryMenu(categoryName);
+
+      const categoryMenuModalHeading = page
+        .getByRole('dialog')
+        .getByRole('heading');
+
+      await expect(categoryMenuModalHeading).toHaveText(categoryName);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    // Budgeted Cell Tests
+
+    test('checks that clicking the budgeted cell opens the budget menu modal', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryName = await budgetPage.getCategoryNameForRow(0);
+      await budgetPage.openBudgetMenu(categoryName);
+
+      const budgetMenuModalHeading = page
+        .getByRole('dialog')
+        .getByRole('heading');
+
+      await expect(budgetMenuModalHeading).toHaveText(categoryName);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    test('updates the budgeted amount', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryName = await budgetPage.getCategoryNameForRow(0);
+
+      // Set to 100.00
+      await budgetPage.setBudget(categoryName, 10000);
+
+      const budgetedButton =
+        await budgetPage.getButtonForBudgeted(categoryName);
+
+      await expect(budgetedButton).toHaveText('100.00');
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    // Spent Cell Tests
+
+    test('checks that clicking spent cell redirects to the category transactions page', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryName = await budgetPage.getCategoryNameForRow(0);
+      const accountPage = await budgetPage.openSpentPage(categoryName);
+
+      await expect(accountPage.heading).toContainText(categoryName);
+      await expect(accountPage.transactionList).toBeVisible();
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    // Balance Cell Tests
+
+    test('checks that clicking the balance cell opens the balance menu modal', async () => {
+      const budgetPage = await navigation.goToBudgetPage();
+      await budgetPage.waitForBudgetTable();
+
+      const categoryName = await budgetPage.getCategoryNameForRow(0);
+      await budgetPage.openBalanceMenu(categoryName);
+
+      const balanceMenuModalHeading = page
+        .getByRole('dialog')
+        .getByRole('heading');
+
+      await expect(balanceMenuModalHeading).toHaveText(categoryName);
+      await expect(page).toMatchThemeScreenshots();
+    });
+
+    if (budgetType === 'Envelope') {
+      test('checks that clicking the To Budget/Overbudgeted amount opens the budget summary menu modal', async () => {
+        const budgetPage = await navigation.goToBudgetPage();
+        await budgetPage.waitForBudgetTable();
+
+        await budgetPage.openEnvelopeBudgetSummaryMenu();
+
+        const summaryModalHeading = page
+          .getByRole('dialog')
+          .getByRole('heading');
+
+        await expect(summaryModalHeading).toHaveText('Budget Summary');
+        await expect(page).toMatchThemeScreenshots();
+      });
+    }
+
+    if (budgetType === 'Tracking') {
+      test('checks that clicking the Saved/Projected Savings/Overspent amount opens the budget summary menu modal', async () => {
+        const budgetPage = await navigation.goToBudgetPage();
+        await budgetPage.waitForBudgetTable();
+
+        await budgetPage.openTrackingBudgetSummaryMenu();
+
+        const summaryModalHeading = page
+          .getByRole('dialog')
+          .getByRole('heading');
+
+        await expect(summaryModalHeading).toHaveText('Budget Summary');
+        await expect(page).toMatchThemeScreenshots();
+      });
+    }
+  });
+});