Merge branch 'master' into jfdoming/strict-binding-types-part-1

actualbudget · Aug 1, 2024 · 0d6297b · 0d6297b
2 parents c94a5ce + 8de0f6a
commit 0d6297b
Show file tree

Hide file tree

Showing 41 changed files with 470 additions and 141 deletions.
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-1-chromium-linux.png
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-2-chromium-linux.png
diff --git a/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png b/.../e2e/accounts.test.js-snapshots/Accounts-closes-an-account-3-chromium-linux.png
diff --git a/packages/desktop-client/playwright.config.js b/packages/desktop-client/playwright.config.js
@@ -57,6 +57,9 @@ export default defineConfig({
   timeout: 20000, // 20 seconds
   retries: 1,
   testDir: 'e2e/',
+  reporter: !process.env.CI
+    ? [['html', { open: 'never', outputFolder: 'test-results/html' }]]
+    : undefined,
   use: {
     userAgent: 'playwright',
     screenshot: 'on',

diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
@@ -39,7 +39,15 @@ function getErrorMessage(type, code) {
       return 'Your SimpleFIN Access Token is no longer valid. Please reset and generate a new token.';
 
     case 'ACCOUNT_NEEDS_ATTENTION':
-      return 'The account needs your attention at [SimpleFIN](https://beta-bridge.simplefin.org/auth/login).';
+      return (
+        <>
+          The account needs your attention at{' '}
+          <Link variant="external" to="https://bridge.simplefin.org/auth/login">
+            SimpleFIN
+          </Link>
+          .
+        </>
+      );
 
     default:
   }

diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -3,10 +3,12 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
-import { type CSSProperties } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
+import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
 import { type Binding } from '../spreadsheet';
 import { CellValue } from '../spreadsheet/CellValue';
+import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
 
 import { makeBalanceAmountStyle } from './util';
@@ -50,6 +52,21 @@ export function DefaultCarryoverIndicator({ style }: CarryoverIndicatorProps) {
   );
 }
 
+function GoalTooltipRow({ children }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 10,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 export function BalanceWithCarryover({
   carryover,
   balance,
@@ -71,6 +88,34 @@ export function BalanceWithCarryover({
     isGoalTemplatesEnabled ? goalValue : null,
     longGoalValue === 1 ? balanceValue : budgetedValue,
   );
+  const format = useFormat();
+
+  const differenceToGoal =
+    longGoalValue === 1 ? balanceValue - goalValue : budgetedValue - goalValue;
+
+  const balanceCellValue = (
+    <CellValue
+      {...props}
+      binding={balance}
+      type="financial"
+      getStyle={value =>
+        makeBalanceAmountStyle(
+          value,
+          isGoalTemplatesEnabled ? goalValue : null,
+          longGoalValue === 1 ? balanceValue : budgetedValue,
+        )
+      }
+      style={{
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'right',
+        ...(!disabled && {
+          cursor: 'pointer',
+        }),
+        ...props.style,
+      }}
+    />
+  );
 
   return (
     <span
@@ -81,27 +126,55 @@ export function BalanceWithCarryover({
         maxWidth: '100%',
       }}
     >
-      <CellValue
-        {...props}
-        binding={balance}
-        type="financial"
-        getStyle={value =>
-          makeBalanceAmountStyle(
-            value,
-            isGoalTemplatesEnabled ? goalValue : null,
-            longGoalValue === 1 ? balanceValue : budgetedValue,
-          )
-        }
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textAlign: 'right',
-          ...(!disabled && {
-            cursor: 'pointer',
-          }),
-          ...props.style,
-        }}
-      />
+      {isGoalTemplatesEnabled && goalValue !== null ? (
+        <Tooltip
+          content={
+            <View style={{ padding: 10 }}>
+              <span style={{ fontWeight: 'bold' }}>
+                {differenceToGoal === 0 ? (
+                  <span style={{ color: theme.noticeText }}>Fully funded</span>
+                ) : differenceToGoal > 0 ? (
+                  <span style={{ color: theme.noticeText }}>
+                    Overfunded ({format(differenceToGoal, 'financial')})
+                  </span>
+                ) : (
+                  <span style={{ color: theme.errorText }}>
+                    Underfunded ({format(differenceToGoal, 'financial')})
+                  </span>
+                )}
+              </span>
+              <GoalTooltipRow>
+                <div>Goal Type:</div>
+                <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
+              </GoalTooltipRow>
+              <GoalTooltipRow>
+                <div>Goal:</div>
+                <div>{format(goalValue, 'financial')}</div>
+              </GoalTooltipRow>
+              <GoalTooltipRow>
+                {longGoalValue !== 1 ? (
+                  <>
+                    <div>Budgeted:</div>
+                    <div>{format(budgetedValue, 'financial')}</div>
+                  </>
+                ) : (
+                  <>
+                    <div>Balance:</div>
+                    <div>{format(balanceValue, 'financial')}</div>
+                  </>
+                )}
+              </GoalTooltipRow>
+            </View>
+          }
+          style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+          placement="bottom"
+          triggerProps={{ delay: 750 }}
+        >
+          {balanceCellValue}
+        </Tooltip>
+      ) : (
+        balanceCellValue
+      )}
       {carryoverValue && carryoverIndicator({ style: valueStyle })}
     </span>
   );

diff --git a/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx b/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx
@@ -44,11 +44,7 @@ export function CoverMenu({
             onSelect={(id: string | undefined) => setCategoryId(id || null)}
             inputProps={{
               inputRef: node,
-              onKeyDown: e => {
-                if (e.key === 'Enter') {
-                  submit();
-                }
-              },
+              onEnter: event => !event.defaultPrevented && submit(),
               placeholder: '(none)',
             }}
             showHiddenCategories={false}

diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
@@ -171,7 +171,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     });
 
     return (
-      <ReactAriaButton ref={ref} style={buttonStyle} {...restProps}>
+      <ReactAriaButton
+        ref={ref}
+        isDisabled={isDisabled}
+        style={buttonStyle}
+        {...restProps}
+      >
         {children}
       </ReactAriaButton>
     );

diff --git a/packages/desktop-client/src/components/common/Modal2.tsx b/packages/desktop-client/src/components/common/Modal2.tsx
@@ -80,13 +80,19 @@ export const Modal = ({
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: 14,
+        backdropFilter: 'blur(1px) brightness(0.9)',
         ...style,
       }}
       {...props}
     >
       <ReactAriaModal>
         {modalProps => (
-          <Dialog aria-label="Modal dialog">
+          <Dialog
+            aria-label="Modal dialog"
+            style={{
+              outline: 'none', // remove focus outline
+            }}
+          >
             <ModalContentContainer
               noAnimation={noAnimation}
               isActive={isActive(name)}

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -342,7 +342,11 @@ const ChildTransactionEdit = forwardRef(
               value={amountToInteger(transaction.amount)}
               zeroSign={amountSign}
               style={{ marginRight: 8 }}
-              inputStyle={{ ...styles.smallText, textAlign: 'right' }}
+              inputStyle={{
+                ...styles.smallText,
+                textAlign: 'right',
+                minWidth: 0,
+              }}
               onFocus={() =>
                 onRequestActiveEdit(getFieldName(transaction.id, 'amount'))
               }

diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
@@ -43,7 +43,7 @@ export function CreateEncryptionKeyModal({
 
   const isRecreating = options.recreate;
 
-  async function onCreateKey() {
+  async function onCreateKey(close: () => void) {
     if (password !== '' && !loading) {
       setLoading(true);
       setError(null);
@@ -60,6 +60,7 @@ export function CreateEncryptionKeyModal({
       dispatch(sync());
 
       setLoading(false);
+      close();
     }
   }
 
@@ -151,8 +152,7 @@ export function CreateEncryptionKeyModal({
           <Form
             onSubmit={e => {
               e.preventDefault();
-              onCreateKey();
-              close();
+              onCreateKey(close);
             }}
           >
             <View style={{ alignItems: 'center' }}>

diff --git a/packages/desktop-client/src/components/modals/EditRule.jsx b/packages/desktop-client/src/components/modals/EditRule.jsx
@@ -861,7 +861,7 @@ export function EditRule({ defaultRule, onSave: originalOnSave }) {
     });
   }
 
-  async function onSave() {
+  async function onSave(close) {
     const rule = {
       ...defaultRule,
       stage,
@@ -879,7 +879,16 @@ export function EditRule({ defaultRule, onSave: originalOnSave }) {
       }
 
       if (error.actionErrors) {
-        setActionSplits(applyErrors(actionSplits, error.actionErrors));
+        let usedErrorIdx = 0;
+        setActionSplits(
+          actionSplits.map(item => ({
+            ...item,
+            actions: item.actions.map(action => ({
+              ...action,
+              error: error.actionErrors[usedErrorIdx++] ?? null,
+            })),
+          })),
+        );
       }
     } else {
       // If adding a rule, we got back an id
@@ -888,6 +897,7 @@ export function EditRule({ defaultRule, onSave: originalOnSave }) {
       }
 
       originalOnSave?.(rule);
+      close();
     }
   }
 
@@ -1145,13 +1155,7 @@ export function EditRule({ defaultRule, onSave: originalOnSave }) {
                   style={{ marginTop: 20 }}
                 >
                   <Button onClick={close}>Cancel</Button>
-                  <Button
-                    variant="primary"
-                    onPress={() => {
-                      onSave();
-                      close();
-                    }}
-                  >
+                  <Button variant="primary" onPress={() => onSave(close)}>
                     Save
                   </Button>
                 </Stack>

diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx
@@ -37,7 +37,7 @@ export function FixEncryptionKeyModal({
   const [showPassword, setShowPassword] = useState(false);
   const { isNarrowWidth } = useResponsive();
 
-  async function onUpdateKey() {
+  async function onUpdateKey(close: () => void) {
     if (password !== '' && !loading) {
       setLoading(true);
       setError(null);
@@ -53,6 +53,7 @@ export function FixEncryptionKeyModal({
       }
 
       onSuccess?.();
+      close();
     }
   }
 
@@ -104,8 +105,7 @@ export function FixEncryptionKeyModal({
           <Form
             onSubmit={e => {
               e.preventDefault();
-              onUpdateKey();
-              close();
+              onUpdateKey(close);
             }}
           >
             <View

diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
@@ -29,7 +29,7 @@ export const GoCardlessInitialise = ({
   const [isValid, setIsValid] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
 
-  const onSubmit = async () => {
+  const onSubmit = async (close: () => void) => {
     if (!secretId || !secretKey) {
       setIsValid(false);
       return;
@@ -50,6 +50,7 @@ export const GoCardlessInitialise = ({
 
     onSuccess();
     setIsLoading(false);
+    close();
   };
 
   return (
@@ -113,8 +114,7 @@ export const GoCardlessInitialise = ({
               variant="primary"
               isLoading={isLoading}
               onPress={() => {
-                onSubmit();
-                close();
+                onSubmit(close);
               }}
             >
               Save and continue

diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.jsx b/packages/desktop-client/src/components/modals/ImportTransactions.jsx
@@ -1089,7 +1089,7 @@ export function ImportTransactions({ options }) {
     setTransactions(newTransactions);
   }
 
-  async function onImport() {
+  async function onImport(close) {
     setLoadingState('importing');
 
     const finalTransactions = [];
@@ -1206,6 +1206,7 @@ export function ImportTransactions({ options }) {
     if (onImported) {
       onImported(didChange);
     }
+    close();
   }
 
   const runImportPreviewCallback = useCallback(async () => {
@@ -1682,8 +1683,7 @@ export function ImportTransactions({ options }) {
                 }
                 isLoading={loadingState === 'importing'}
                 onPress={() => {
-                  onImport();
-                  close();
+                  onImport(close);
                 }}
               >
                 Import{' '}