Merge branch 'master' into matiss/eslint-warn

.github/workflows/stale.yml

@@ -0,0 +1,16 @@
+name: 'Close stale PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
+          days-before-stale: 30
+          days-before-close: 5
+          days-before-issue-stale: -1

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

@@ -20,9 +20,11 @@ export class AccountPage {
       name: 'Menu',
     });
 
-    this.transactionTableRow = this.page
-      .getByTestId('table')
-      .getByTestId('row');
+    this.transactionTable = this.page.getByTestId('transaction-table');
+    this.transactionTableRow = this.transactionTable.getByTestId('row');
+
+    this.filterButton = this.page.getByRole('button', { name: 'Filter' });
+    this.filterSelectTooltip = this.page.getByTestId('filters-select-tooltip');
   }
 
   /**
@@ -94,6 +96,26 @@ export class AccountPage {
     );
   }
 
+  /**
+   * Open the filtering popover.
+   */
+  async filterBy(field) {
+    await this.filterButton.click();
+    await this.filterSelectTooltip.getByRole('button', { name: field }).click();
+
+    return new FilterTooltip(this.page.getByTestId('filters-menu-tooltip'));
+  }
+
+  /**
+   * Remove the nth filter
+   */
+  async removeFilter(idx) {
+    await this.page
+      .getByRole('button', { name: 'Delete filter' })
+      .nth(idx)
+      .click();
+  }
+
   async _fillTransactionFields(transactionRow, transaction) {
     if (transaction.payee) {
       await transactionRow.getByTestId('payee').click();
@@ -131,3 +153,10 @@ export class AccountPage {
     }
   }
 }
+
+class FilterTooltip {
+  constructor(page) {
+    this.page = page;
+    this.applyButton = page.getByRole('button', { name: 'Apply' });
+  }
+}

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

@@ -31,6 +31,31 @@ test.describe('Transactions', () => {
     await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 
+  test.describe('filters transactions', () => {
+    // Reset filters
+    test.afterEach(async () => {
+      await accountPage.removeFilter(0);
+    });
+
+    test('by date', async () => {
+      const filterTooltip = await accountPage.filterBy('Date');
+      await expect(filterTooltip.page).toHaveScreenshot(screenshotConfig(page));
+
+      // Open datepicker
+      await page.keyboard.press('Space');
+      const datepicker = page.getByTestId('date-select-tooltip');
+      await expect(datepicker).toHaveScreenshot(screenshotConfig(page));
+
+      // Select "is xxxxx"
+      await datepicker.getByRole('button', { name: '20' }).click();
+      await filterTooltip.applyButton.click();
+
+      // Assert that there are no transactions
+      await expect(accountPage.transactionTable).toHaveText('No transactions');
+      await expect(page).toHaveScreenshot(screenshotConfig(page));
+    });
+  });
+
   test('creates a test transaction', async () => {
     await accountPage.createSingleTransaction({
       payee: 'Home Depot',

packages/desktop-client/playwright.config.js

@@ -26,14 +26,4 @@ export default defineConfig({
     trace: 'on-first-retry',
     ignoreHTTPSErrors: true,
   },
-  expect: {
-    toHaveScreenshot: {
-      // Approx. 2% difference (1000 pixels)
-      maxDiffPixels: 1000,
-    },
-    toMatchSnapshot: {
-      // 2% difference is acceptable
-      maxDiffPixelRatio: 0.02,
-    },
-  },
 });

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -1081,7 +1081,6 @@ function BudgetHeader({
             // zIndex: -1
           },
         ]}
-        data-vrt-mask
       >
         {/* eslint-disable-next-line rulesdir/typography */}
         {monthUtils.format(currentMonth, "MMMM ''yy")}

packages/desktop-client/src/components/budget/MobileTable.js → packages/desktop-client/src/components/budget/MobileTable.tsx

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, {
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
 
 import { colors } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
 
-export const ListItem = ({ children, style, ...props }) => {
+type ListItemProps = ComponentProps<typeof View> & {
+  children?: ReactNode;
+  style: CSSProperties;
+};
+
+export const ListItem = ({ children, style, ...props }: ListItemProps) => {
   return (
     <View
       style={[

packages/desktop-client/src/components/budget/MonthPicker.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-import * as Platform from 'loot-core/src/client/platform';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import useResizeObserver from '../../hooks/useResizeObserver';
@@ -141,10 +140,9 @@ export const MonthPicker = ({
               onClick={() => onSelect(month)}
               onMouseEnter={() => setHoverId(idx)}
               onMouseLeave={() => setHoverId(null)}
-              data-vrt-mask
             >
               {size === 'small' ? monthName[0] : monthName}
-              {!Platform.isPlaywright && showYearHeader && (
+              {showYearHeader && (
                 <View
                   style={[
                     {

packages/desktop-client/src/components/budget/report/BudgetSummary.tsx

@@ -374,7 +374,6 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               },
               currentMonth === month && { textDecoration: 'underline' },
             ])}
-            data-vrt-mask
           >
             {monthUtils.format(month, 'MMMM')}
           </div>

packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx

@@ -134,7 +134,7 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
 
       <View>
         <Block>Available Funds</Block>
-        <Block data-vrt-mask>Overspent in {prevMonthName}</Block>
+        <Block>Overspent in {prevMonthName}</Block>
         <Block>Budgeted</Block>
         <Block>For Next Month</Block>
       </View>
@@ -347,7 +347,6 @@ export function BudgetSummary({
               },
               currentMonth === month && { fontWeight: 'bold' },
             ])}
-            data-vrt-mask
           >
             {monthUtils.format(month, 'MMMM')}
           </div>

packages/desktop-client/src/components/filters/FiltersMenu.js

@@ -176,6 +176,7 @@ function ConfigureField({
       style={{ padding: 15, color: theme.altmenuItemTextHeader }}
       width={275}
       onClose={() => dispatch({ type: 'close' })}
+      data-testid="filters-menu-tooltip"
     >
       <FocusScope>
         <View style={{ marginBottom: 10 }}>
@@ -427,6 +428,7 @@ export function FilterButton({ onApply }) {
           position="bottom-left"
           style={{ padding: 0 }}
           onClose={() => dispatch({ type: 'close' })}
+          data-testid="filters-select-tooltip"
         >
           <Menu
             onMenuSelect={name => {
@@ -536,7 +538,7 @@ function FilterExpression({
           )}
         </div>
       </Button>
-      <Button type="bare" onClick={onDelete}>
+      <Button type="bare" onClick={onDelete} aria-label="Delete filter">
         <DeleteIcon
           style={{
             width: 8,

packages/desktop-client/src/components/reports/DateRange.js

@@ -26,11 +26,7 @@ function DateRange({ start, end }) {
     content = d.format(end, 'MMMM yyyy');
   }
 
-  return (
-    <Block style={{ color: colors.n6 }} data-vrt-mask>
-      {content}
-    </Block>
-  );
+  return <Block style={{ color: colors.n6 }}>{content}</Block>;
 }
 
 export default DateRange;

packages/desktop-client/src/components/schedules/SchedulesTable.js

@@ -14,6 +14,7 @@ import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Text from '../common/Text';
 import View from '../common/View';
+import PrivacyFilter from '../PrivacyFilter';
 import { Table, TableHeader, Row, Field, Cell } from '../table';
 import { Tooltip } from '../tooltips';
 import DisplayId from '../util/DisplayId';
@@ -112,7 +113,7 @@ export function ScheduleAmountCell({ amount, op }) {
         }}
         title={(isApprox ? 'Approximately ' : '') + str}
       >
-        {num > 0 ? `+${str}` : `${str}`}
+        <PrivacyFilter>{num > 0 ? `+${str}` : `${str}`}</PrivacyFilter>
       </Text>
     </Cell>
   );
@@ -214,7 +215,7 @@ export function SchedulesTable({
         <Field width="flex" name="account">
           <DisplayId type="accounts" id={item._account} />
         </Field>
-        <Field width={110} name="date" data-vrt-mask>
+        <Field width={110} name="date">
           {item.next_date
             ? monthUtils.format(item.next_date, dateFormat)
             : null}

packages/desktop-client/src/components/select/DateSelect.js

@@ -19,6 +19,7 @@ import {
   getDayMonthRegex,
   getShortYearFormat,
   getShortYearRegex,
+  currentDate,
 } from 'loot-core/src/shared/months';
 import { stringToInteger } from 'loot-core/src/shared/util';
 
@@ -115,8 +116,8 @@ let DatePicker = forwardRef(
         keyboardInput: false,
         firstDay: stringToInteger(firstDayOfWeekIdx),
         defaultDate: value
-          ? d.parse(value, dateFormat, new Date())
-          : new Date(),
+          ? d.parse(value, dateFormat, currentDate())
+          : currentDate(),
         setDefaultDate: true,
         toString(date) {
           return d.format(date, dateFormat);
@@ -293,6 +294,7 @@ export default function DateSelect({
         position="bottom-left"
         offset={2}
         style={[{ padding: 0, minWidth: 225 }, tooltipStyle]}
+        data-testid="date-select-tooltip"
       >
         {content}
       </Tooltip>
@@ -306,6 +308,11 @@ export default function DateSelect({
         {...inputProps}
         inputRef={inputRef}
         value={value}
+        onPointerUp={e => {
+          if (!embedded) {
+            setOpen(true);
+          }
+        }}
         onKeyDown={onKeyDown}
         onChange={onChange}
         onFocus={e => {

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

@@ -45,6 +45,7 @@ export class Tooltip extends Component {
         // kind of things can be click that shouldn't close a tooltip?
         if (
           node.dataset.testid === 'tooltip' ||
+          node.dataset.testid === this.props['data-testid'] ||
           node.dataset.reachPopover != null
         ) {
           break;
@@ -318,7 +319,7 @@ export class Tooltip extends Component {
           <div
             {...css(contentStyle, style, styles.darkScrollbar)}
             ref={this.contentRef}
-            data-testid="tooltip"
+            data-testid={this.props['data-testid'] || 'tooltip'}
             onClick={e => {
               // Click events inside a tooltip (e.g. when selecting a menu item) will bubble up
               // through the portal to parents in the React tree (as opposed to DOM parents).

packages/desktop-client/src/components/transactions/MobileTransaction.js

@@ -553,7 +553,6 @@ class TransactionEditInner extends PureComponent {
                       ),
                     )
                   }
-                  data-vrt-mask
                 />
               </View>
 
@@ -1075,7 +1074,7 @@ export class TransactionList extends Component {
             return (
               <Section
                 title={
-                  <span data-vrt-mask>
+                  <span>
                     {monthUtils.format(section.date, 'MMMM dd, yyyy')}
                   </span>
                 }

packages/desktop-client/src/components/transactions/TransactionsTable.js

@@ -925,7 +925,6 @@ const Transaction = memo(function Transaction(props) {
           onUpdate={value => {
             onUpdate('date', value);
           }}
-          data-vrt-mask
         >
           {({
             onBlur,