Merge branch 'master' into ci/update-vrt

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

@@ -204,6 +204,13 @@ export function ManageRules({
     setLoading(false);
   }
 
+  async function onDeleteRule(id: string) {
+    setLoading(true);
+    await send('rule-delete', id);
+    await loadRules();
+    setLoading(false);
+  }
+
   const onEditRule = useCallback(rule => {
     dispatch(
       pushModal('edit-rule', {
@@ -306,6 +313,7 @@ export function ManageRules({
                 hoveredRule={hoveredRule}
                 onHover={onHover}
                 onEditRule={onEditRule}
+                onDeleteRule={rule => onDeleteRule(rule.id)}
               />
             )}
           </SimpleTable>

packages/desktop-client/src/components/accounts/Account.tsx

@@ -1803,6 +1803,15 @@ class AccountInternal extends PureComponent<
                   sortField={this.state.sort?.field}
                   ascDesc={this.state.sort?.ascDesc}
                   onChange={this.onTransactionsChange}
+                  onBatchDelete={this.onBatchDelete}
+                  onBatchDuplicate={this.onBatchDuplicate}
+                  onBatchLinkSchedule={this.onBatchLinkSchedule}
+                  onBatchUnlinkSchedule={this.onBatchUnlinkSchedule}
+                  onCreateRule={this.onCreateRule}
+                  onScheduleAction={this.onScheduleAction}
+                  onMakeAsNonSplitTransactions={
+                    this.onMakeAsNonSplitTransactions
+                  }
                   onRefetch={this.refetchTransactions}
                   onCloseAddTransaction={() =>
                     this.setState({ isAdding: false })

packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx → packages/desktop-client/src/components/accounts/AccountSyncCheck.tsx

@@ -1,11 +1,12 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 
 import { t } from 'i18next';
 
 import { unlinkAccount } from 'loot-core/client/actions';
+import { type AccountEntity } from 'loot-core/types/models';
 
 import { authorizeBank } from '../../gocardless';
 import { useAccounts } from '../../hooks/useAccounts';
@@ -16,7 +17,7 @@ import { Link } from '../common/Link';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
 
-function getErrorMessage(type, code) {
+function getErrorMessage(type: string, code: string) {
   switch (type.toUpperCase()) {
     case 'ITEM_ERROR':
       switch (code.toUpperCase()) {
@@ -81,7 +82,29 @@ export function AccountSyncCheck() {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
 
-  if (!failedAccounts) {
+  const reauth = useCallback(
+    (acc: AccountEntity) => {
+      setOpen(false);
+
+      if (acc.account_id) {
+        authorizeBank(dispatch, { upgradingAccountId: acc.account_id });
+      }
+    },
+    [dispatch],
+  );
+
+  const unlink = useCallback(
+    (acc: AccountEntity) => {
+      if (acc.id) {
+        dispatch(unlinkAccount(acc.id));
+      }
+
+      setOpen(false);
+    },
+    [dispatch],
+  );
+
+  if (!failedAccounts || !id) {
     return null;
   }
 
@@ -91,22 +114,15 @@ export function AccountSyncCheck() {
   }
 
   const account = accounts.find(account => account.id === id);
+  if (!account) {
+    return null;
+  }
+
   const { type, code } = error;
   const showAuth =
     (type === 'ITEM_ERROR' && code === 'ITEM_LOGIN_REQUIRED') ||
     (type === 'INVALID_INPUT' && code === 'INVALID_ACCESS_TOKEN');
 
-  function reauth() {
-    setOpen(false);
-
-    authorizeBank(dispatch, { upgradingAccountId: account.account_id });
-  }
-
-  async function unlink() {
-    dispatch(unlinkAccount(account.id));
-    setOpen(false);
-  }
-
   return (
     <View>
       <Button
@@ -148,20 +164,20 @@ export function AccountSyncCheck() {
         <View style={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
           {showAuth ? (
             <>
-              <Button onPress={unlink}>
+              <Button onPress={() => unlink(account)}>
                 <Trans>Unlink</Trans>
               </Button>
               <Button
                 variant="primary"
                 autoFocus
-                onPress={reauth}
+                onPress={() => reauth(account)}
                 style={{ marginLeft: 5 }}
               >
                 <Trans>Reauthorize</Trans>
               </Button>
             </>
           ) : (
-            <Button onPress={unlink}>
+            <Button onPress={() => unlink(account)}>
               <Trans>Unlink account</Trans>
             </Button>
           )}

packages/desktop-client/src/components/budget/SidebarCategory.tsx

@@ -7,6 +7,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -51,6 +52,7 @@ export function SidebarCategory({
   const temporary = category.id === 'new';
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -61,6 +63,13 @@ export function SidebarCategory({
         WebkitUserSelect: 'none',
         opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined,
         backgroundColor: 'transparent',
+        height: 20,
+      }}
+      ref={triggerRef}
+      onContextMenu={e => {
+        if (!contextMenusEnabled) return;
+        e.preventDefault();
+        setMenuOpen(true);
       }}
     >
       <div
@@ -74,7 +83,7 @@ export function SidebarCategory({
       >
         {category.name}
       </div>
-      <View style={{ flexShrink: 0, marginLeft: 5 }} ref={triggerRef}>
+      <View style={{ flexShrink: 0, marginLeft: 5 }}>
         <Button
           variant="bare"
           className="hover-visible"
@@ -94,6 +103,7 @@ export function SidebarCategory({
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
           style={{ width: 200 }}
+          isNonModal
         >
           <Menu
             onMenuSelect={type => {

packages/desktop-client/src/components/budget/SidebarGroup.tsx

@@ -3,6 +3,7 @@ import React, { type CSSProperties, useRef, useState } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
@@ -56,6 +57,7 @@ export function SidebarGroup({
   const temporary = group.id === 'new';
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -64,10 +66,17 @@ export function SidebarGroup({
         alignItems: 'center',
         userSelect: 'none',
         WebkitUserSelect: 'none',
+        height: 20,
       }}
+      ref={triggerRef}
       onClick={() => {
         onToggleCollapse(group.id);
       }}
+      onContextMenu={e => {
+        if (!contextMenusEnabled) return;
+        e.preventDefault();
+        setMenuOpen(true);
+      }}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -95,7 +104,7 @@ export function SidebarGroup({
       </div>
       {!dragPreview && (
         <>
-          <View style={{ marginLeft: 5, flexShrink: 0 }} ref={triggerRef}>
+          <View style={{ marginLeft: 5, flexShrink: 0 }}>
             <Button
               variant="bare"
               className="hover-visible"
@@ -111,6 +120,7 @@ export function SidebarGroup({
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
               style={{ width: 200 }}
+              isNonModal
             >
               <Menu
                 onMenuSelect={type => {

packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
@@ -23,10 +23,20 @@ export function BalanceMovementMenu({
   const catBalance = useEnvelopeSheetValue(
     envelopeBudget.catBalance(categoryId),
   );
-  const [menu, setMenu] = useState('menu');
+  const [menu, _setMenu] = useState('menu');
+
+  const ref = useRef<HTMLSpanElement>(null);
+  // Keep focus inside the popover on menu change
+  const setMenu = useCallback(
+    (menu: string) => {
+      ref.current?.focus();
+      _setMenu(menu);
+    },
+    [ref],
+  );
 
   return (
-    <>
+    <span tabIndex={-1} ref={ref}>
       {menu === 'menu' && (
         <BalanceMenu
           categoryId={categoryId}
@@ -70,6 +80,6 @@ export function BalanceMovementMenu({
           }}
         />
       )}
-    </>
+    </span>
   );
 }

packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx

@@ -14,6 +14,7 @@ import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
+import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
@@ -215,6 +216,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   };
 
   const { showUndoNotification } = useUndo();
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <View
@@ -238,6 +240,12 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           flex: 1,
           flexDirection: 'row',
         }}
+        onContextMenu={e => {
+          if (!contextMenusEnabled) return;
+          if (editing) return;
+          e.preventDefault();
+          setBudgetMenuOpen(true);
+        }}
       >
         {!editing && (
           <View
@@ -274,6 +282,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
               isOpen={budgetMenuOpen}
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
+              isNonModal
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -390,6 +399,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         <span
           ref={balanceMenuTriggerRef}
           onClick={() => setBalanceMenuOpen(true)}
+          onContextMenu={e => {
+            if (!contextMenusEnabled) return;
+            e.preventDefault();
+            setBalanceMenuOpen(true);
+          }}
         >
           <BalanceWithCarryover
             carryover={envelopeBudget.catCarryover(category.id)}
@@ -406,6 +420,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           isOpen={balanceMenuOpen}
           onOpenChange={() => setBalanceMenuOpen(false)}
           style={{ width: 200 }}
+          isNonModal
         >
           <BalanceMovementMenu
             categoryId={category.id}