Merge branch 'master' into optimise

actualbudget · Aug 19, 2024 · 03cec83 · 03cec83
2 parents b5ec7ce + d6afc85
commit 03cec83
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 96 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -101,12 +101,15 @@ function AllTransactions({
   showBalances,
   filtered,
   children,
+  collapseTransactions,
 }) {
   const accountId = account.id;
-  const prependTransactions = usePreviewTransactions().map(trans => ({
-    ...trans,
-    _inverse: accountId ? accountId !== trans.account : false,
-  }));
+  const prependTransactions = usePreviewTransactions(collapseTransactions).map(
+    trans => ({
+      ...trans,
+      _inverse: accountId ? accountId !== trans.account : false,
+    }),
+  );
 
   transactions ??= [];
 
@@ -1453,6 +1456,9 @@ class AccountInternal extends PureComponent {
         balances={balances}
         showBalances={showBalances}
         filtered={transactionsFiltered}
+        collapseTransactions={ids =>
+          this.props.splitsExpandedDispatch({ type: 'close-splits', ids })
+        }
       >
         {(allTransactions, allBalances) => (
           <SelectedProviderWithItems

diff --git a/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx b/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx
@@ -70,7 +70,6 @@ export const Transaction = memo(function Transaction({
     cleared,
     is_parent: isParent,
     is_child: isChild,
-    notes,
     schedule,
   } = transaction;
 
@@ -183,7 +182,7 @@ export const Transaction = memo(function Transaction({
               </TextOneLine>
             </View>
             {isPreview ? (
-              <Status status={notes} />
+              <Status status={categoryId} isSplit={isParent || isChild} />
             ) : (
               <View
                 style={{

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -132,7 +132,7 @@ export function lookupName(items, id) {
   return items.find(item => item.id === id)?.name;
 }
 
-export function Status({ status }) {
+export function Status({ status, isSplit }) {
   let color;
 
   switch (status) {
@@ -157,7 +157,7 @@ export function Status({ status }) {
         textAlign: 'left',
       }}
     >
-      {titleFirst(status)}
+      {titleFirst(status) + (isSplit ? ' (Split)' : '')}
     </Text>
   );
 }

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx
@@ -138,6 +138,10 @@ export function TransactionList({
               key={section.id}
             >
               {section.data.map((transaction, index, transactions) => {
+                if (isPreviewId(transaction.id) && transaction.is_child) {
+                  return null;
+                }
+
                 return (
                   <Item
                     key={transaction.id}

diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -1,4 +1,5 @@
 import { type ReactNode, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import type { FeatureFlag } from 'loot-core/src/types/prefs';
 
@@ -17,11 +18,13 @@ type FeatureToggleProps = {
   disableToggle?: boolean;
   error?: ReactNode;
   children: ReactNode;
+  feedbackLink?: string;
 };
 
 function FeatureToggle({
   flag: flagName,
   disableToggle = false,
+  feedbackLink,
   error,
   children,
 }: FeatureToggleProps) {
@@ -40,7 +43,15 @@ function FeatureToggle({
       <View
         style={{ color: disableToggle ? theme.pageTextSubdued : 'inherit' }}
       >
-        {children}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+          {children}
+          {feedbackLink && (
+            <Link variant="external" to={feedbackLink}>
+              <Trans>(give feedback)</Trans>
+            </Link>
+          )}
+        </View>
+
         {disableToggle && (
           <Text
             style={{
@@ -57,16 +68,18 @@ function FeatureToggle({
 }
 
 function ReportBudgetFeature() {
+  const { t } = useTranslation();
   const [budgetType = 'rollover'] = useSyncedPref('budgetType');
   const enabled = useFeatureFlag('reportBudget');
   const blockToggleOff = budgetType === 'report' && enabled;
   return (
     <FeatureToggle
       flag="reportBudget"
       disableToggle={blockToggleOff}
-      error="Switch to a rollover budget before turning off this feature"
+      error={t('Switch to a rollover budget before turning off this feature')}
+      feedbackLink="https://github.com/actualbudget/actual/issues/2999"
     >
-      Budget mode toggle
+      <Trans>Budget mode toggle</Trans>
     </FeatureToggle>
   );
 }
@@ -79,18 +92,29 @@ export function ExperimentalFeatures() {
       primaryAction={
         expanded ? (
           <View style={{ gap: '1em' }}>
-            <FeatureToggle flag="spendingReport">
-              Monthly spending report
+            <FeatureToggle
+              flag="spendingReport"
+              feedbackLink="https://github.com/actualbudget/actual/issues/2820"
+            >
+              <Trans>Monthly spending report</Trans>
             </FeatureToggle>
 
             <ReportBudgetFeature />
 
             <FeatureToggle flag="goalTemplatesEnabled">
-              Goal templates
+              <Trans>Goal templates</Trans>
+            </FeatureToggle>
+            <FeatureToggle
+              flag="simpleFinSync"
+              feedbackLink="https://github.com/actualbudget/actual/issues/2272"
+            >
+              <Trans>SimpleFIN sync</Trans>
             </FeatureToggle>
-            <FeatureToggle flag="simpleFinSync">SimpleFIN sync</FeatureToggle>
-            <FeatureToggle flag="dashboards">
-              Customizable reports page (dashboards)
+            <FeatureToggle
+              flag="dashboards"
+              feedbackLink="https://github.com/actualbudget/actual/issues/3282"
+            >
+              <Trans>Customizable reports page (dashboards)</Trans>
             </FeatureToggle>
           </View>
         ) : (
@@ -104,16 +128,18 @@ export function ExperimentalFeatures() {
               color: theme.pageTextPositive,
             }}
           >
-            I understand the risks, show experimental features
+            <Trans>I understand the risks, show experimental features</Trans>
           </Link>
         )
       }
     >
       <Text>
-        <strong>Experimental features.</strong> These features are not fully
-        tested and may not work as expected. THEY MAY CAUSE IRRECOVERABLE DATA
-        LOSS. They may do nothing at all. Only enable them if you know what you
-        are doing.
+        <Trans>
+          <strong>Experimental features.</strong> These features are not fully
+          tested and may not work as expected. THEY MAY CAUSE IRRECOVERABLE DATA
+          LOSS. They may do nothing at all. Only enable them if you know what
+          you are doing.
+        </Trans>
       </Text>
     </Setting>
   );

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -575,9 +575,11 @@ function PayeeCell({
           alignSelf: 'flex-start',
           borderRadius: 4,
           border: '1px solid transparent', // so it doesn't shift on hover
-          ':hover': {
-            border: '1px solid ' + theme.buttonNormalBorder,
-          },
+          ':hover': isPreview
+            ? {}
+            : {
+                border: '1px solid ' + theme.buttonNormalBorder,
+              },
         }}
         disabled={isPreview}
         onSelect={() =>
@@ -601,6 +603,12 @@ function PayeeCell({
             color: theme.pageTextSubdued,
           }}
         >
+          <PayeeIcons
+            transaction={transaction}
+            transferAccount={transferAccount}
+            onNavigateToTransferAccount={onNavigateToTransferAccount}
+            onNavigateToSchedule={onNavigateToSchedule}
+          />
           <SvgSplit
             style={{
               color: 'inherit',
@@ -1110,6 +1118,8 @@ const Transaction = memo(function Transaction({
         ) : (
           <Cell width={20} />
         )
+      ) : isPreview && isChild ? (
+        <Cell width={20} />
       ) : (
         <SelectCell
           /* Checkmark field for non-child transaction */
@@ -1246,45 +1256,52 @@ const Transaction = memo(function Transaction({
         />
       ))()}
 
-      {isPreview ? (
-        /* Notes field for all transactions */
-        <Cell name="notes" width="flex" />
-      ) : (
-        <InputCell
+      <InputCell
+        width="flex"
+        name="notes"
+        textAlign="flex"
+        exposed={focusedField === 'notes'}
+        focused={focusedField === 'notes'}
+        value={notes || ''}
+        valueStyle={valueStyle}
+        formatter={value => notesTagFormatter(value, onNotesTagClick)}
+        onExpose={name => !isPreview && onEdit(id, name)}
+        inputProps={{
+          value: notes || '',
+          onUpdate: onUpdate.bind(null, 'notes'),
+        }}
+      />
+
+      {(isPreview && !isChild) || isParent ? (
+        <Cell
+          /* Category field (Split button) for parent transactions */
+          name="category"
           width="flex"
-          name="notes"
-          textAlign="flex"
-          exposed={focusedField === 'notes'}
-          focused={focusedField === 'notes'}
-          value={notes || ''}
-          valueStyle={valueStyle}
-          formatter={value => notesTagFormatter(value, onNotesTagClick)}
-          onExpose={name => !isPreview && onEdit(id, name)}
-          inputProps={{
-            value: notes || '',
-            onUpdate: onUpdate.bind(null, 'notes'),
+          focused={focusedField === 'category'}
+          style={{
+            padding: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            height: '100%',
           }}
-        />
-      )}
-
-      {isPreview ? (
-        // Category field for preview transactions
-        <Cell width="flex" style={{ alignItems: 'flex-start' }} exposed={true}>
-          {() => (
+          plain
+        >
+          {isPreview && (
             <View
               style={{
                 color:
-                  notes === 'missed'
+                  categoryId === 'missed'
                     ? theme.errorText
-                    : notes === 'due'
+                    : categoryId === 'due'
                       ? theme.warningText
                       : selected
                         ? theme.formLabelText
                         : theme.upcomingText,
                 backgroundColor:
-                  notes === 'missed'
+                  categoryId === 'missed'
                     ? theme.errorBackground
-                    : notes === 'due'
+                    : categoryId === 'due'
                       ? theme.warningBackground
                       : selected
                         ? theme.formLabelBackground
@@ -1294,31 +1311,20 @@ const Transaction = memo(function Transaction({
                 borderRadius: 4,
               }}
             >
-              {titleFirst(notes)}
+              {titleFirst(categoryId)}
             </View>
           )}
-        </Cell>
-      ) : isParent ? (
-        <Cell
-          /* Category field (Split button) for parent transactions */
-          name="category"
-          width="flex"
-          focused={focusedField === 'category'}
-          style={{ padding: 0 }}
-          plain
-        >
           <CellButton
             bare
             style={{
-              alignSelf: 'flex-start',
               borderRadius: 4,
               border: '1px solid transparent', // so it doesn't shift on hover
               ':hover': {
                 border: '1px solid ' + theme.buttonNormalBorder,
               },
             }}
             disabled={isTemporaryId(transaction.id)}
-            onEdit={() => onEdit(id, 'category')}
+            onEdit={() => !isPreview && onEdit(id, 'category')}
             onSelect={() => onToggleSplit(id)}
           >
             <View
@@ -1343,15 +1349,17 @@ const Transaction = memo(function Transaction({
                   }}
                 />
               )}
-              <Text
-                style={{
-                  fontStyle: 'italic',
-                  fontWeight: 300,
-                  userSelect: 'none',
-                }}
-              >
-                Split
-              </Text>
+              {!isPreview && (
+                <Text
+                  style={{
+                    fontStyle: 'italic',
+                    fontWeight: 300,
+                    userSelect: 'none',
+                  }}
+                >
+                  Split
+                </Text>
+              )}
             </View>
           </CellButton>
         </Cell>
@@ -1402,7 +1410,7 @@ const Transaction = memo(function Transaction({
                 : ''
           }
           exposed={focusedField === 'category'}
-          onExpose={name => onEdit(id, name)}
+          onExpose={name => !isPreview && onEdit(id, name)}
           valueStyle={
             !categoryId
               ? {
@@ -1532,7 +1540,7 @@ const Transaction = memo(function Transaction({
           isPreview={isPreview}
           status={
             isPreview
-              ? notes
+              ? categoryId
               : reconciled
                 ? 'reconciled'
                 : cleared