Consolidate Link props

.eslintrc.js

@@ -146,10 +146,10 @@ module.exports = {
           'Using default React import is discouraged, please use named exports directly instead.',
       },
       {
-        // forbid <a> in favor of <LinkButton> or <ExternalLink>
+        // forbid <a> in favor of <Button type={'link'}> or <ExternalLink>
         selector: 'JSXOpeningElement[name.name="a"]',
         message:
-          'Using <a> is discouraged, please use <LinkButton> or <ExternalLink> instead.',
+          'Using <a> is discouraged, please use <Button type={link}> or <ExternalLink> instead.',
       },
     ],
     'no-restricted-imports': [

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

@@ -4,7 +4,6 @@ import React, { useState } from 'react';
 import { Block } from './common/Block';
 import { Button } from './common/Button';
 import { ExternalLink } from './common/ExternalLink';
-import { LinkButton } from './common/LinkButton';
 import { Modal } from './common/Modal';
 import { Paragraph } from './common/Paragraph';
 import { Stack } from './common/Stack';
@@ -146,9 +145,13 @@ function SharedArrayBufferOverride() {
       </Button>
     </>
   ) : (
-    <LinkButton onClick={() => setExpanded(true)} style={{ marginLeft: 5 }}>
+    <Button
+      type="link"
+      onClick={() => setExpanded(true)}
+      style={{ marginLeft: 5 }}
+    >
       Advanced options
-    </LinkButton>
+    </Button>
   );
 }
 
@@ -171,7 +174,9 @@ export function FatalError({ buttonText, error }: FatalErrorProps) {
           </Button>
         </Paragraph>
         <Paragraph isLast={true} style={{ fontSize: 11 }}>
-          <LinkButton onClick={() => setShowError(true)}>Show Error</LinkButton>
+          <Button type="link" onClick={() => setShowError(true)}>
+            Show Error
+          </Button>
           {showError && (
             <Block
               style={{

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

@@ -17,7 +17,6 @@ import { styles, theme, type CSSProperties } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button';
 import { ExternalLink } from './common/ExternalLink';
-import { LinkButton } from './common/LinkButton';
 import { Stack } from './common/Stack';
 import { Text } from './common/Text';
 import { View } from './common/View';
@@ -43,7 +42,8 @@ function compileMessage(
                 if (href[0] === '#') {
                   const actionName = href.slice(1);
                   return (
-                    <LinkButton
+                    <Button
+                      type="link"
                       key={idx}
                       onClick={async e => {
                         e.preventDefault();
@@ -55,7 +55,7 @@ function compileMessage(
                       }}
                     >
                       {text}
-                    </LinkButton>
+                    </Button>
                   );
                 }
 

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

@@ -8,7 +8,6 @@ import { SvgClose } from '../icons/v1';
 import { theme } from '../style';
 
 import { Button } from './common/Button';
-import { LinkButton } from './common/LinkButton';
 import { Text } from './common/Text';
 import { View } from './common/View';
 
@@ -45,17 +44,19 @@ export function UpdateNotification() {
           <View style={{ flex: 1 }} />
           <View style={{ marginTop: -1 }}>
             <Text>
-              <LinkButton
+              <Button
+                type="link"
                 onClick={updateApp}
                 style={{
                   color: theme.buttonPrimaryText,
                   textDecoration: 'underline',
                 }}
               >
                 Restart
-              </LinkButton>{' '}
+              </Button>{' '}
               (
-              <LinkButton
+              <Button
+                type="link"
                 style={{
                   color: theme.buttonPrimaryText,
                   textDecoration: 'underline',
@@ -67,7 +68,7 @@ export function UpdateNotification() {
                 }
               >
                 notes
-              </LinkButton>
+              </Button>
               )
               <Button
                 type="bare"

packages/desktop-client/src/components/common/Link.tsx

@@ -1,12 +1,10 @@
-import React, {
-  type ComponentProps,
-  type MouseEvent,
-  type ReactNode,
-} from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 
 import { css } from 'glamor';
 
+import { type CustomReportEntity } from 'loot-core/types/models/reports';
+
 import { useNavigate } from '../../hooks/useNavigate';
 import { type CSSProperties, styles } from '../../style';
 
@@ -22,23 +20,12 @@ type AnchorLinkProps = {
   style?: CSSProperties;
   activeStyle?: CSSProperties;
   children?: ReactNode;
+  report?: CustomReportEntity;
 };
 
-const ButtonLink = ({
-  to,
-  style,
-  activeStyle,
-  onClick,
-  ...props
-}: ButtonLinkProps) => {
+const ButtonLink = ({ to, style, activeStyle, ...props }: ButtonLinkProps) => {
   const navigate = useNavigate();
   const match = useMatch({ path: to });
-
-  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-    onClick?.(e);
-    navigate(to);
-  };
-
   return (
     <Button
       style={{
@@ -47,17 +34,27 @@ const ButtonLink = ({
       }}
       activeStyle={activeStyle}
       {...props}
-      onClick={handleClick}
+      onClick={e => {
+        props.onClick?.(e);
+        navigate(to);
+      }}
     />
   );
 };
 
-const AnchorLink = ({ to, style, activeStyle, children }: AnchorLinkProps) => {
+const AnchorLink = ({
+  to,
+  style,
+  activeStyle,
+  children,
+  report,
+}: AnchorLinkProps) => {
   const match = useMatch({ path: to });
 
   return (
     <NavLink
       to={to}
+      state={report ? { report } : {}}
       className={`${css([
         styles.smallText,
         style,

packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx

@@ -13,9 +13,9 @@ import { send } from 'loot-core/platform/client/fetch';
 import { SvgAdd } from '../../../icons/v1';
 import { SvgSearchAlternate } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
-import { ButtonLink } from '../../common/ButtonLink';
 import { InputWithContent } from '../../common/InputWithContent';
 import { Label } from '../../common/Label';
+import { Link } from '../../common/Link';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
 import { MobileBackButton } from '../../MobileBackButton';
@@ -174,7 +174,8 @@ export function AccountDetails({
       }
       headerLeftContent={<MobileBackButton />}
       headerRightContent={
-        <ButtonLink
+        <Link
+          variant="button"
           to="transactions/new"
           type="bare"
           aria-label="Add Transaction"
@@ -190,7 +191,7 @@ export function AccountDetails({
           activeStyle={{ background: 'transparent' }}
         >
           <SvgAdd width={20} height={20} />
-        </ButtonLink>
+        </Link>
       }
       padding={0}
       style={{

packages/desktop-client/src/components/modals/CloseAccountModal.tsx

@@ -18,7 +18,6 @@ import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
 import { Button } from '../common/Button';
 import { FormError } from '../common/FormError';
-import { LinkButton } from '../common/LinkButton';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { Text } from '../common/Text';
@@ -218,7 +217,8 @@ export function CloseAccountModal({
               <View style={{ marginBottom: 15 }}>
                 <Text style={{ fontSize: 12 }}>
                   You can also{' '}
-                  <LinkButton
+                  <Button
+                    type="link"
                     onClick={() => {
                       setLoading(true);
 
@@ -228,7 +228,7 @@ export function CloseAccountModal({
                     style={{ color: theme.errorText }}
                   >
                     force close
-                  </LinkButton>{' '}
+                  </Button>{' '}
                   the account which will delete it and all its transactions
                   permanently. Doing so may change your budget unexpectedly
                   since money in it may vanish.

packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx

@@ -17,7 +17,6 @@ import { Error, Warning } from '../alerts';
 import { Autocomplete } from '../autocomplete/Autocomplete';
 import { Button } from '../common/Button';
 import { ExternalLink } from '../common/ExternalLink';
-import { LinkButton } from '../common/LinkButton';
 import { Menu } from '../common/Menu';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
@@ -169,12 +168,13 @@ export function GoCardlessExternalMsg({
           <Error>
             Failed loading available banks: GoCardless access credentials might
             be misconfigured. Please{' '}
-            <LinkButton
+            <Button
+              type="link"
               onClick={onGoCardlessInit}
               style={{ color: theme.formLabelText, display: 'inline' }}
             >
               set them up
-            </LinkButton>{' '}
+            </Button>{' '}
             again.
           </Error>
         ) : (
@@ -297,9 +297,9 @@ export function GoCardlessExternalMsg({
               </View>
 
               {waiting === 'browser' && (
-                <LinkButton onClick={onJump} style={{ marginTop: 10 }}>
+                <Button type="link" onClick={onJump} style={{ marginTop: 10 }}>
                   (Account linking not opening in a new tab? Click here)
-                </LinkButton>
+                </Button>
               )}
             </View>
           ) : success ? (