Add types to QueryState

* add copy template

* note, lint

* note

.eslintignore

@@ -14,6 +14,7 @@ packages/desktop-client/**/node_modules/*
 packages/desktop-client/node_modules/
 packages/desktop-client/src/icons/**/*
 packages/desktop-client/test-results/
+packages/desktop-client/playwright-report/
 
 packages/desktop-electron/client-build/
 packages/desktop-electron/dist/

.eslintrc.js

@@ -526,8 +526,8 @@ module.exports = {
         './packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx',
         './packages/desktop-client/src/components/budget/index.tsx',
         './packages/desktop-client/src/components/budget/MobileBudget.tsx',
-        './packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx',
-        './packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx',
+        './packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx',
+        './packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx',
         './packages/desktop-client/src/components/common/Menu.tsx',
         './packages/desktop-client/src/components/FinancesApp.tsx',
         './packages/desktop-client/src/components/GlobalKeys.ts',

.github/workflows/electron-master.yml

@@ -40,6 +40,7 @@ jobs:
           python3 -m pip install setuptools
       - if: ${{ startsWith(matrix.os, 'ubuntu') }}
         run: |
+          sudo apt-get update
           sudo apt-get install flatpak -y
           sudo apt-get install flatpak-builder -y
           sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
@@ -48,13 +49,17 @@ jobs:
           sudo flatpak install org.electronjs.Electron2.BaseApp/x86_64/23.08 -y
       - name: Set up environment
         uses: ./.github/actions/setup
-      - name: Build Electron
+      - name: Build Electron for Mac
+        if: ${{ startsWith(matrix.os, 'macos') }}
         run: ./bin/package-electron
         env:
-          # CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-          # CSC_LINK: ${{ secrets.CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+      - name: Build Electron
+        if: ${{ ! startsWith(matrix.os, 'macos') }}
+        run: ./bin/package-electron
       - name: Upload Build
         uses: actions/upload-artifact@v4
         with:

.github/workflows/electron-pr.yml

@@ -35,6 +35,7 @@ jobs:
           python3 -m pip install setuptools
       - if: ${{ startsWith(matrix.os, 'ubuntu') }}
         run: |
+          sudo apt-get update
           sudo apt-get install flatpak -y
           sudo apt-get install flatpak-builder -y
           sudo flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo

.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

.gitignore

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

README.md

@@ -74,6 +74,6 @@ Make Actual Budget accessible to more people by helping with the [Internationali
 
 ## Sponsors
 
-Thanks to our wonderful sponsors who make Actual budget possible!
+Thanks to our wonderful sponsors who make Actual Budget possible!
 
 <a href="https://www.netlify.com"> <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a>

bin/run-vrt

@@ -28,5 +28,5 @@ echo "Running VRT tests with the following parameters:"
 echo "E2E_START_URL: $E2E_START_URL"
 echo "VRT_ARGS: $VRT_ARGS"
 
-docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
+MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash \
   -c "E2E_START_URL=$E2E_START_URL yarn vrt $VRT_ARGS"

packages/api/package.json

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

packages/desktop-client/.gitignore

@@ -6,6 +6,7 @@ node_modules
 # testing
 coverage
 test-results
+playwright-report
 
 # production
 build

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

@@ -0,0 +1,57 @@
+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();
+
+    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();
+    const accountPage = await accountsPage.openNthAccount(0);
+
+    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.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();
   });
 
@@ -99,4 +101,60 @@ 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,
+      });
+    });
+
+    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();
+      });
+    }
+  });
+});