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.*',
@@ -252,24 +250,7 @@ module.exports = {
         './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.*',
@@ -291,8 +272,6 @@ module.exports = {
         './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: {

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/alerts.tsx

@@ -2,7 +2,7 @@ import React, { type ComponentType, type ReactNode } from 'react';
 
 import ExclamationOutline from '../icons/v1/ExclamationOutline';
 import InformationOutline from '../icons/v1/InformationOutline';
-import { styles, colors, type CSSProperties } from '../style';
+import { styles, theme, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -33,7 +33,7 @@ const Alert = ({
         padding: 10,
         flexDirection: 'row',
         '& a, & a:active, & a:visited': {
-          color: colors.b3,
+          color: theme.altFormLabelText,
         },
         ...style,
       }}
@@ -63,7 +63,7 @@ export const Information = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={InformationOutline}
-      color={colors.n4}
+      color={theme.pageTextLight}
       backgroundColor="transparent"
       style={{
         ...style,
@@ -80,8 +80,8 @@ export const Warning = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.y2}
-      backgroundColor={colors.y10}
+      color={theme.warningText}
+      backgroundColor={theme.warningBackground}
       style={style}
     >
       {children}
@@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.r2}
-      backgroundColor={colors.r10}
+      color={theme.altErrorText}
+      backgroundColor={theme.altErrorBackground}
       style={style}
     >
       {children}