Merge branch 'master' into master

.eslintrc.js

@@ -218,8 +218,6 @@ module.exports = {
     {
       //This is temporary. We will remove these as dark theme gets ported
       files: [
-        './packages/desktop-client/public/index.html',
-        './packages/desktop-client/src/components/BankSyncStatus.*',
         './packages/desktop-client/src/components/LoggedInUser.*',
         './packages/desktop-client/src/components/MobileWebMessage.*',
         './packages/desktop-client/src/components/NotesButton.*',
@@ -242,57 +240,18 @@ module.exports = {
         './packages/desktop-client/src/components/budget/SidebarCategory.*',
         './packages/desktop-client/src/components/budget/SidebarGroup.*',
         './packages/desktop-client/src/components/budget/constants.*',
+        './packages/desktop-client/src/components/budget/misc.*',
         './packages/desktop-client/src/components/budget/report/BudgetSummary.*',
         './packages/desktop-client/src/components/budget/report/components.*',
         './packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
         './packages/desktop-client/src/components/budget/rollover/rollover-components.*',
         './packages/desktop-client/src/components/budget/util.*',
-        './packages/desktop-client/src/components/common.*',
-        './packages/desktop-client/src/components/common/Card.*',
-        './packages/desktop-client/src/components/common/Label.*',
-        './packages/desktop-client/src/components/common/View.*',
         './packages/desktop-client/src/components/common/ExternalLink.*',
-        './packages/desktop-client/src/components/manager/BudgetList.*',
-        './packages/desktop-client/src/components/manager/ConfigServer.*',
-        './packages/desktop-client/src/components/manager/DeleteFile.*',
-        './packages/desktop-client/src/components/manager/Import.*',
-        './packages/desktop-client/src/components/manager/ImportActual.*',
-        './packages/desktop-client/src/components/manager/ImportYNAB4.*',
-        './packages/desktop-client/src/components/manager/ImportYNAB5.*',
-        './packages/desktop-client/src/components/manager/WelcomeScreen.*',
         './packages/desktop-client/src/components/modals/BudgetSummary.*',
-        './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*',
-        './packages/desktop-client/src/components/modals/CreateEncryptionKey.*',
-        './packages/desktop-client/src/components/modals/EditField.*',
-        './packages/desktop-client/src/components/modals/FixEncryptionKey.*',
-        './packages/desktop-client/src/components/modals/GoCardlessExternalMsg.*',
-        './packages/desktop-client/src/components/modals/ImportTransactions.*',
-        './packages/desktop-client/src/components/modals/LoadBackup.*',
-        './packages/desktop-client/src/components/modals/PlaidExternalMsg.*',
-        './packages/desktop-client/src/components/modals/SelectLinkedAccounts.*',
         './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/reports/CashFlow.*',
-        './packages/desktop-client/src/components/reports/Change.*',
-        './packages/desktop-client/src/components/reports/DateRange.*',
-        './packages/desktop-client/src/components/reports/Header.*',
-        './packages/desktop-client/src/components/reports/NetWorth.*',
-        './packages/desktop-client/src/components/reports/Overview.*',
-        './packages/desktop-client/src/components/reports/Tooltip.*',
-        './packages/desktop-client/src/components/reports/chart-theme.*',
-        './packages/desktop-client/src/components/reports/graphs/CashFlowGraph.*',
-        './packages/desktop-client/src/components/reports/graphs/NetWorthGraph.*',
-        './packages/desktop-client/src/components/settings/Encryption.*',
-        './packages/desktop-client/src/components/settings/Experimental.*',
-        './packages/desktop-client/src/components/settings/FixSplits.*',
-        './packages/desktop-client/src/components/settings/Format.*',
-        './packages/desktop-client/src/components/settings/Global.*',
-        './packages/desktop-client/src/components/settings/UI.*',
-        './packages/desktop-client/src/components/settings/index.*',
         './packages/desktop-client/src/components/transactions/MobileTransaction.*',
         './packages/desktop-client/src/components/transactions/TransactionsTable.*',
         './packages/desktop-client/src/components/util/AmountInput.*',
-        './packages/desktop-client/src/components/util/DisplayId.*',
-        './packages/desktop-client/src/components/util/LoadComponent.*',
         './packages/desktop-client/src/style/*',
       ],
       rules: {

.github/workflows/build.yml

@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   api:

.github/workflows/check.yml

@@ -8,7 +8,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   lint:

.github/workflows/codeql.yml

@@ -9,7 +9,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   analyze:

.github/workflows/electron.yml

@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   build:

packages/desktop-client/README.md

@@ -37,15 +37,20 @@ First start the dev server:
 ```sh
 HTTPS=true yarn start
 ```
-
-Next, run the standartised docker container and launch the visual regression tests from within it.
+Next, navigate to the root of your project folder, run the standartised docker container, and launch the visual regression tests from within it.
 
 ```sh
 # Run docker container
 docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
 
+    # If you recieve an error such as "docker: invalid reference format", please instead use the following command:
+    docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+
 # Run the VRT tests: important - they MUST be ran against a HTTPS server
 E2E_START_URL=https://192.168.0.178:3001 yarn vrt
+
+    # To update snapshots, use the following command:
+    E2E_START_URL=https://192.168.0.178:3001 yarn vrt --update-snapshots
 ```
 
 #### Running against a remote server

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

@@ -108,7 +108,7 @@ test.describe('Mobile', () => {
 
   test('creates a transaction from `/accounts/:id` page', async () => {
     const accountsPage = await navigation.goToAccountsPage();
-    const accountPage = await accountsPage.openNthAccount(1);
+    const accountPage = await accountsPage.openNthAccount(2);
     const transactionEntryPage = await accountPage.clickCreateTransaction();
 
     await expect(transactionEntryPage.header).toHaveText('New Transaction');

packages/desktop-client/e2e/page-models/rules-page.js

@@ -1,6 +1,7 @@
 export class RulesPage {
   constructor(page) {
     this.page = page;
+    this.searchBox = page.getByPlaceholder('Filter rules...');
   }
 
   /**
@@ -22,19 +23,19 @@ export class RulesPage {
    * Retrieve the data for the nth-rule.
    * 0-based index
    */
-  async getNthRule(index) {
+  getNthRule(index) {
     const row = this.page.getByTestId('table').getByTestId('row').nth(index);
 
     return {
-      conditions: await row
-        .getByTestId('conditions')
-        .evaluate(el => [...el.children].map(c => c.textContent)),
-      actions: await row
-        .getByTestId('actions')
-        .evaluate(el => [...el.children].map(c => c.textContent)),
+      conditions: row.getByTestId('conditions').locator(':scope > div'),
+      actions: row.getByTestId('actions').locator(':scope > div'),
     };
   }
 
+  async searchFor(text) {
+    await this.searchBox.fill(text);
+  }
+
   async _fillRuleFields(data) {
     if (data.conditionsOp) {
       await this.page

packages/desktop-client/e2e/page-models/schedules-page.js

@@ -31,15 +31,15 @@ export class SchedulesPage {
    * Retrieve the data for the nth-schedule.
    * 0-based index
    */
-  async getNthSchedule(index) {
+  getNthSchedule(index) {
     const row = this.getNthScheduleRow(index);
 
     return {
-      payee: await row.getByTestId('payee').textContent(),
-      account: await row.getByTestId('account').textContent(),
-      date: await row.getByTestId('date').textContent(),
-      status: await row.getByTestId('status').textContent(),
-      amount: await row.getByTestId('amount').textContent(),
+      payee: row.getByTestId('payee'),
+      account: row.getByTestId('account'),
+      date: row.getByTestId('date'),
+      status: row.getByTestId('status'),
+      amount: row.getByTestId('amount'),
     };
   }
 

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

@@ -28,6 +28,7 @@ test.describe('Rules', () => {
   });
 
   test('checks the page visuals', async () => {
+    await rulesPage.searchFor('Dominion');
     await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 
@@ -48,13 +49,13 @@ test.describe('Rules', () => {
       ],
     });
 
-    expect(await rulesPage.getNthRule(0)).toMatchObject({
-      conditions: ['payee is Fast Internet'],
-      actions: ['set category to General'],
-    });
+    await rulesPage.searchFor('Fast Internet');
+    const rule = rulesPage.getNthRule(0);
+    await expect(rule.conditions).toHaveText(['payee is Fast Internet']);
+    await expect(rule.actions).toHaveText(['set category to General']);
     await expect(page).toHaveScreenshot(screenshotConfig(page));
 
-    const accountPage = await navigation.goToAccountPage('Bank of America');
+    const accountPage = await navigation.goToAccountPage('HSBC');
 
     await accountPage.createSingleTransaction({
       payee: 'Fast Internet',

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

@@ -38,18 +38,15 @@ test.describe('Schedules', () => {
       amount: 25,
     });
 
-    expect(await schedulesPage.getNthSchedule(0)).toMatchObject({
-      payee: 'Home Depot',
-      account: 'HSBC',
-      amount: '~25.00',
-      status: 'Due',
-    });
+    const schedule = schedulesPage.getNthSchedule(2);
+    await expect(schedule.payee).toHaveText('Home Depot');
+    await expect(schedule.account).toHaveText('HSBC');
+    await expect(schedule.amount).toHaveText('~25.00');
+    await expect(schedule.status).toHaveText('Due');
     await expect(page).toHaveScreenshot(screenshotConfig(page));
 
-    await schedulesPage.postNthSchedule(0);
-    expect(await schedulesPage.getNthSchedule(0)).toMatchObject({
-      status: 'Paid',
-    });
+    await schedulesPage.postNthSchedule(2);
+    await expect(schedulesPage.getNthSchedule(2).status).toHaveText('Paid');
     await expect(page).toHaveScreenshot(screenshotConfig(page));
 
     // Go to transactions page
@@ -62,26 +59,24 @@ test.describe('Schedules', () => {
 
     // go to rules page
     const rulesPage = await navigation.goToRulesPage();
-    expect(await rulesPage.getNthRule(0)).toMatchObject({
-      // actions: ['link schedule Home Depot (2023-02-28)'],
-      actions: [
-        expect.stringMatching(
-          /^link schedule Home Depot \(\d{4}-\d{2}-\d{2}\)$/,
-        ),
-      ],
-      conditions: [
-        'payee is Home Depot',
-        'and account is HSBC',
-        expect.stringMatching(/^and date is approx Every month on the/),
-        'and amount is approx -25.00',
-      ],
-    });
+    await rulesPage.searchFor('Home Depot');
+    const rule = rulesPage.getNthRule(0);
+    await expect(rule.actions).toHaveText([
+      'link schedule Home Depot (2017-01-01)',
+    ]);
+    await expect(rule.conditions).toHaveText([
+      'payee is Home Depot',
+      'and account is HSBC',
+      'and date is approx Every month on the 1st',
+      'and amount is approx -25.00',
+    ]);
 
     // Go back to schedules page
     await navigation.goToSchedulesPage();
-    await schedulesPage.completeNthSchedule(0);
-    expect(await schedulesPage.getNthScheduleRow(0)).toHaveText(
+    await schedulesPage.completeNthSchedule(2);
+    await expect(schedulesPage.getNthScheduleRow(4)).toHaveText(
       'Show completed schedules',
     );
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 });

packages/desktop-client/src/components/BankSyncStatus.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import AnimatedRefresh from './AnimatedRefresh';
 import Text from './common/Text';
@@ -43,8 +43,8 @@ export default function BankSyncStatus() {
               <View
                 style={{
                   borderRadius: 4,
-                  backgroundColor: colors.b9,
-                  color: colors.b1,
+                  backgroundColor: theme.pillBackgroundSelected,
+                  color: theme.pillTextSelected,
                   padding: '5px 13px',
                   flexDirection: 'row',
                   alignItems: 'center',
@@ -53,7 +53,7 @@ export default function BankSyncStatus() {
               >
                 <AnimatedRefresh
                   animating={true}
-                  iconStyle={{ color: colors.b1 }}
+                  iconStyle={{ color: theme.pillTextSelected }}
                 />
                 <Text>Syncing {item}</Text>
               </View>

packages/desktop-client/src/components/ManageRules.js

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { pushModal } from 'loot-core/src/client/actions/modals';
@@ -116,7 +110,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
   );
   let selectedInst = useSelected('manage-rules', allRules, []);
   let [hoveredRule, setHoveredRule] = useState(null);
-  let tableRef = useRef(null);
 
   async function loadRules() {
     setLoading(true);
@@ -283,7 +276,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
         <View style={{ flex: 1 }}>
           <RulesHeader />
           <SimpleTable
-            ref={tableRef}
             data={filteredRules}
             loadMore={loadMore}
             // Hide the last border of the item in the table

packages/desktop-client/src/components/PrivacyFilter.tsx

@@ -8,7 +8,6 @@ import React, {
 
 import usePrivacyMode from 'loot-core/src/client/privacy';
 
-import useFeatureFlag from '../hooks/useFeatureFlag';
 import { useResponsive } from '../ResponsiveProvider';
 
 import View from './common/View';
@@ -53,7 +52,6 @@ export default function PrivacyFilter({
   children,
   ...props
 }: PrivacyFilterProps) {
-  let privacyModeFeatureFlag = useFeatureFlag('privacyMode');
   let privacyMode = usePrivacyMode();
   // Limit mobile support for now.
   let { isNarrowWidth } = useResponsive();
@@ -67,7 +65,7 @@ export default function PrivacyFilter({
 
   let blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px';
 
-  return !privacyModeFeatureFlag || !activate ? (
+  return !activate ? (
     <>{Children.toArray(children)}</>
   ) : (
     <BlurredOverlay blurIntensity={blurAmount} {...props}>

packages/desktop-client/src/components/Titlebar.tsx

@@ -296,7 +296,6 @@ export default function Titlebar({ style }) {
     state => state.prefs.global.floatingSidebar,
   );
 
-  let privacyModeFeatureFlag = useFeatureFlag('privacyMode');
   let themesFlag = useFeatureFlag('themes');
 
   return isNarrowWidth ? null : (
@@ -369,7 +368,7 @@ export default function Titlebar({ style }) {
       <View style={{ flex: 1 }} />
       <UncategorizedButton />
       {themesFlag && <ThemeSelector />}
-      {privacyModeFeatureFlag && <PrivacyButton />}
+      <PrivacyButton />
       {serverURL ? <SyncButton style={{ marginLeft: 10 }} /> : null}
       <LoggedInUser style={{ marginLeft: 10 }} />
     </View>