From b3b3a34c5a3dd9c729e3b1875606f3aec45e19d7 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 7 May 2024 17:23:13 +0100 Subject: [PATCH 01/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(tooltip)=20refactor?= =?UTF-8?q?ing=20to=20react-aria=20(vol.4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/budget/BudgetTotals.tsx | 78 ++++++------- .../src/components/budget/SidebarCategory.tsx | 66 +++++------ .../src/components/budget/SidebarGroup.tsx | 70 ++++++------ .../budget/rollover/BalanceTooltip.tsx | 47 +++----- .../budget/rollover/CoverTooltip.tsx | 37 +----- .../budget/rollover/HoldTooltip.tsx | 22 +--- .../budget/rollover/RolloverComponents.tsx | 105 ++++++++++-------- .../budget/rollover/TransferTooltip.tsx | 47 ++------ .../rollover/budgetsummary/BudgetSummary.tsx | 1 - .../rollover/budgetsummary/ToBudget.tsx | 95 +++++++--------- .../rollover/budgetsummary/ToBudgetAmount.tsx | 34 +++--- .../transactions/TransactionsTable.test.jsx | 3 +- upcoming-release-notes/2603.md | 6 + 13 files changed, 265 insertions(+), 346 deletions(-) create mode 100644 upcoming-release-notes/2603.md diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx index 005e2afa93..7126ff4d6a 100644 --- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx +++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx @@ -1,11 +1,11 @@ -import React, { type ComponentProps, memo, useState } from 'react'; +import React, { type ComponentProps, memo, useRef, useState } from 'react'; import { SvgDotsHorizontalTriple } from '../../icons/v1'; import { theme, styles } from '../../style'; import { Button } from '../common/Button'; import { Menu } from '../common/Menu'; +import { Popover } from '../common/Popover'; import { View } from '../common/View'; -import { Tooltip } from '../tooltips'; import { RenderMonths } from './RenderMonths'; import { getScrollbarWidth } from './util'; @@ -24,6 +24,8 @@ export const BudgetTotals = memo(function BudgetTotals({ collapseAllCategories, }: BudgetTotalsProps) { const [menuOpen, setMenuOpen] = useState(false); + const triggerRef = useRef(null); + return ( Category + + setMenuOpen(false)} + style={{ width: 200 }} + > + { + if (type === 'toggle-visibility') { + toggleHiddenCategories(); + } else if (type === 'expandAllCategories') { + expandAllCategories(); + } else if (type === 'collapseAllCategories') { + collapseAllCategories(); + } + setMenuOpen(false); + }} + items={[ + { + name: 'toggle-visibility', + text: 'Toggle hidden categories', + }, + { + name: 'expandAllCategories', + text: 'Expand all', + }, + { + name: 'collapseAllCategories', + text: 'Collapse all', + }, + ]} + /> + diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx index f62255cf91..00eb77836a 100644 --- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx +++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx @@ -1,5 +1,5 @@ // @ts-strict-ignore -import React, { type CSSProperties, type Ref, useState } from 'react'; +import React, { type CSSProperties, type Ref, useRef, useState } from 'react'; import { type CategoryGroupEntity, @@ -10,10 +10,10 @@ import { SvgCheveronDown } from '../../icons/v1'; import { theme } from '../../style'; import { Button } from '../common/Button'; import { Menu } from '../common/Menu'; +import { Popover } from '../common/Popover'; import { View } from '../common/View'; import { NotesButton } from '../NotesButton'; import { InputCell } from '../table'; -import { Tooltip } from '../tooltips'; type SidebarCategoryProps = { innerRef: Ref; @@ -26,7 +26,7 @@ type SidebarCategoryProps = { borderColor?: string; isLast?: boolean; onEditName: (id: string) => void; - onSave: (group) => void; + onSave: (category: CategoryEntity) => void; onDelete: (id: string) => Promise; onHideNewCategory?: () => void; }; @@ -47,6 +47,7 @@ export function SidebarCategory({ }: SidebarCategoryProps) { const temporary = category.id === 'new'; const [menuOpen, setMenuOpen] = useState(false); + const triggerRef = useRef(null); const displayed = ( - {menuOpen && ( - setMenuOpen(false)} - > - { - if (type === 'rename') { - onEditName(category.id); - } else if (type === 'delete') { - onDelete(category.id); - } else if (type === 'toggle-visibility') { - onSave({ ...category, hidden: !category.hidden }); - } - setMenuOpen(false); - }} - items={[ - !categoryGroup?.hidden && { - name: 'toggle-visibility', - text: category.hidden ? 'Show' : 'Hide', - }, - { name: 'rename', text: 'Rename' }, - { name: 'delete', text: 'Delete' }, - ]} - /> - - )} + + setMenuOpen(false)} + style={{ width: 200 }} + > + { + if (type === 'rename') { + onEditName(category.id); + } else if (type === 'delete') { + onDelete(category.id); + } else if (type === 'toggle-visibility') { + onSave({ ...category, hidden: !category.hidden }); + } + setMenuOpen(false); + }} + items={[ + !categoryGroup?.hidden && { + name: 'toggle-visibility', + text: category.hidden ? 'Show' : 'Hide', + }, + { name: 'rename', text: 'Rename' }, + { name: 'delete', text: 'Delete' }, + ]} + /> + - {menuOpen && ( - setMenuOpen(false)} - > - { - if (type === 'rename') { - onEdit(group.id); - } else if (type === 'add-category') { - onShowNewCategory(group.id); - } else if (type === 'delete') { - onDelete(group.id); - } else if (type === 'toggle-visibility') { - onSave({ ...group, hidden: !group.hidden }); - } - setMenuOpen(false); - }} - items={[ - { name: 'add-category', text: 'Add category' }, - !group.is_income && { - name: 'toggle-visibility', - text: group.hidden ? 'Show' : 'Hide', - }, - { name: 'rename', text: 'Rename' }, - onDelete && { name: 'delete', text: 'Delete' }, - ]} - /> - - )} + + setMenuOpen(false)} + style={{ width: 200 }} + > + { + if (type === 'rename') { + onEdit(group.id); + } else if (type === 'add-category') { + onShowNewCategory(group.id); + } else if (type === 'delete') { + onDelete(group.id); + } else if (type === 'toggle-visibility') { + onSave({ ...group, hidden: !group.hidden }); + } + setMenuOpen(false); + }} + items={[ + { name: 'add-category', text: 'Add category' }, + !group.is_income && { + name: 'toggle-visibility', + text: group.hidden ? 'Show' : 'Hide', + }, + { name: 'rename', text: 'Rename' }, + onDelete && { name: 'delete', text: 'Delete' }, + ]} + /> + void }; month: string; onBudgetAction: (month: string, action: string, arg?: unknown) => void; onClose?: () => void; @@ -19,50 +17,35 @@ type BalanceTooltipProps = { export function BalanceTooltip({ categoryId, - tooltip, month, onBudgetAction, - onClose, - ...tooltipProps + onClose = () => {}, }: BalanceTooltipProps) { const catBalance = useSheetValue(rolloverBudget.catBalance(categoryId)); const [menu, setMenu] = useState('menu'); - const _onClose = () => { - tooltip.close(); - onClose?.(); - }; - return ( <> {menu === 'menu' && ( - - { - onBudgetAction(month, 'carryover', { - category: categoryId, - flag: carryover, - }); - _onClose(); - }} - onTransfer={() => setMenu('transfer')} - onCover={() => setMenu('cover')} - /> - + { + onBudgetAction(month, 'carryover', { + category: categoryId, + flag: carryover, + }); + onClose(); + }} + onTransfer={() => setMenu('transfer')} + onCover={() => setMenu('cover')} + /> )} {menu === 'transfer' && ( { onBudgetAction(month, 'transfer-category', { amount, @@ -75,7 +58,7 @@ export function BalanceTooltip({ {menu === 'cover' && ( { onBudgetAction(month, 'cover', { to: categoryId, diff --git a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx index 60458e71e8..76d4972c51 100644 --- a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx @@ -1,46 +1,18 @@ -import React, { type ComponentProps, useState } from 'react'; +import React, { useState } from 'react'; import { useCategories } from '../../../hooks/useCategories'; import { CategoryAutocomplete } from '../../autocomplete/CategoryAutocomplete'; import { Button } from '../../common/Button'; import { InitialFocus } from '../../common/InitialFocus'; import { View } from '../../common/View'; -import { Tooltip } from '../../tooltips'; import { addToBeBudgetedGroup } from '../util'; type CoverTooltipProps = { - tooltipProps?: ComponentProps; onSubmit: (categoryId: string) => void; onClose: () => void; }; -export function CoverTooltip({ - tooltipProps, - onSubmit, - onClose, -}: CoverTooltipProps) { - const _onSubmit = (categoryId: string) => { - onSubmit?.(categoryId); - onClose?.(); - }; - return ( - - - - ); -} - -type CoverProps = { - onSubmit: (categoryId: string) => void; -}; - -function Cover({ onSubmit }: CoverProps) { +export function CoverTooltip({ onSubmit, onClose }: CoverTooltipProps) { const { grouped: originalCategoryGroups } = useCategories(); const categoryGroups = addToBeBudgetedGroup( originalCategoryGroups.filter(g => !g.is_income), @@ -51,9 +23,10 @@ function Cover({ onSubmit }: CoverProps) { if (categoryId) { onSubmit(categoryId); } + onClose(); } return ( - <> + Cover from category: @@ -94,6 +67,6 @@ function Cover({ onSubmit }: CoverProps) { Transfer - + ); } diff --git a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx index a2a4e69025..0a4946672d 100644 --- a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx @@ -3,7 +3,6 @@ import React, { useContext, useEffect, type ChangeEvent, - type ComponentPropsWithoutRef, } from 'react'; import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider'; @@ -15,17 +14,12 @@ import { InitialFocus } from '../../common/InitialFocus'; import { Input } from '../../common/Input'; import { View } from '../../common/View'; import { NamespaceContext } from '../../spreadsheet/NamespaceContext'; -import { Tooltip } from '../../tooltips'; -type HoldTooltipProps = ComponentPropsWithoutRef & { +type HoldTooltipProps = { onSubmit: (amount: number) => void; + onClose: () => void; }; -export function HoldTooltip({ - onSubmit, - onClose, - position = 'bottom-right', - ...props -}: HoldTooltipProps) { +export function HoldTooltip({ onSubmit, onClose }: HoldTooltipProps) { const spreadsheet = useSpreadsheet(); const sheetName = useContext(NamespaceContext); @@ -52,13 +46,7 @@ export function HoldTooltip({ } return ( - + Hold this amount: @@ -89,6 +77,6 @@ export function HoldTooltip({ Hold - + ); } diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx index b1ba0ff719..06ea867d29 100644 --- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx +++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx @@ -1,5 +1,5 @@ import type React from 'react'; -import { memo, useState } from 'react'; +import { memo, useRef, useState } from 'react'; import { rolloverBudget } from 'loot-core/src/client/queries'; import { evalArithmetic } from 'loot-core/src/shared/arithmetic'; @@ -8,12 +8,12 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util'; import { SvgCheveronDown } from '../../../icons/v1'; import { styles, theme, type CSSProperties } from '../../../style'; import { Button } from '../../common/Button'; +import { Popover } from '../../common/Popover'; import { Text } from '../../common/Text'; import { View } from '../../common/View'; import { CellValue } from '../../spreadsheet/CellValue'; import { useFormat } from '../../spreadsheet/useFormat'; import { Row, Field, SheetCell } from '../../table'; -import { Tooltip, useTooltip } from '../../tooltips'; import { BalanceWithCarryover } from '../BalanceWithCarryover'; import { makeAmountGrey } from '../util'; @@ -152,8 +152,10 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({ onBudgetAction, onShowActivity, }: ExpenseCategoryMonthProps) { - const balanceTooltip = useTooltip(); - const [menuOpen, setMenuOpen] = useState(false); + const budgetMenuTriggerRef = useRef(null); + const balanceMenuTriggerRef = useRef(null); + const [budgetMenuOpen, setBudgetMenuOpen] = useState(false); + const [balanceMenuOpen, setBalanceMenuOpen] = useState(false); const [hover, setHover] = useState(false); return ( @@ -180,7 +182,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({ setHover(false); }} > - {!editing && (hover || menuOpen) ? ( + {!editing && (hover || budgetMenuOpen) ? ( - {menuOpen && ( - setMenuOpen(false)} - > - { - onBudgetAction?.(month, 'copy-single-last', { - category: category.id, - }); - }} - onSetMonthsAverage={numberOfMonths => { - if ( - numberOfMonths !== 3 && - numberOfMonths !== 6 && - numberOfMonths !== 12 - ) { - return; - } - onBudgetAction?.( - month, - `set-single-${numberOfMonths}-avg`, - { - category: category.id, - }, - ); - }} - onApplyBudgetTemplate={() => { - onBudgetAction?.(month, 'apply-single-category-template', { - category: category.id, - }); - }} - /> - - )} + setBudgetMenuOpen(false)} + style={{ width: 200 }} + > + { + onBudgetAction?.(month, 'copy-single-last', { + category: category.id, + }); + }} + onSetMonthsAverage={numberOfMonths => { + if ( + numberOfMonths !== 3 && + numberOfMonths !== 6 && + numberOfMonths !== 12 + ) { + return; + } + + onBudgetAction?.(month, `set-single-${numberOfMonths}-avg`, { + category: category.id, + }); + }} + onApplyBudgetTemplate={() => { + onBudgetAction?.(month, 'apply-single-category-template', { + category: category.id, + }); + }} + /> + ) : null} - + setBalanceMenuOpen(true)} + > - {balanceTooltip.isOpen && ( + + setBalanceMenuOpen(false)} + style={{ width: 200 }} + > setBalanceMenuOpen(false)} /> - )} + ); diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx index f23e53ca5f..e4758bfab3 100644 --- a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx @@ -1,5 +1,4 @@ -import type React from 'react'; -import { useState, type ComponentPropsWithoutRef } from 'react'; +import React, { useState } from 'react'; import { evalArithmetic } from 'loot-core/src/shared/arithmetic'; import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util'; @@ -10,13 +9,13 @@ import { Button } from '../../common/Button'; import { InitialFocus } from '../../common/InitialFocus'; import { Input } from '../../common/Input'; import { View } from '../../common/View'; -import { Tooltip } from '../../tooltips'; import { addToBeBudgetedGroup } from '../util'; -type TransferTooltipProps = ComponentPropsWithoutRef & { +type TransferTooltipProps = { initialAmount?: number; showToBeBudgeted?: boolean; onSubmit: (amount: number, categoryId: string) => void; + onClose: () => void; }; export function TransferTooltip({ @@ -24,38 +23,7 @@ export function TransferTooltip({ showToBeBudgeted, onSubmit, onClose, - position = 'bottom-right', - ...props }: TransferTooltipProps) { - const _onSubmit = (amount: number, categoryId: string) => { - onSubmit?.(amount, categoryId); - onClose?.(); - }; - - return ( - - - - ); -} - -type TransferProps = { - amount: number; - showToBeBudgeted: boolean; - onSubmit: (amount: number, categoryId: string) => void; -}; - -function Transfer({ - amount: initialAmount, - showToBeBudgeted, - onSubmit, -}: TransferProps) { const { grouped: originalCategoryGroups } = useCategories(); let categoryGroups = originalCategoryGroups.filter(g => !g.is_income); if (showToBeBudgeted) { @@ -71,10 +39,12 @@ function Transfer({ if (parsedAmount && categoryId) { onSubmit?.(amountToInteger(parsedAmount), categoryId); } + + onClose(); }; return ( - <> + Transfer this amount: @@ -93,7 +63,8 @@ function Transfer({ openOnFocus={true} onSelect={(id: string | undefined) => setCategoryId(id || null)} inputProps={{ - onEnter: () => _onSubmit(amount, categoryId), + onEnter: event => + !event.defaultPrevented && _onSubmit(amount, categoryId), placeholder: '(none)', }} showHiddenCategories={true} @@ -117,6 +88,6 @@ function Transfer({ Transfer - + ); } diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx index a63e573fbd..b1f65c7f9c 100644 --- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx +++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx @@ -192,7 +192,6 @@ export function BudgetSummary({ month }: BudgetSummaryProps) { }} > void; prevMonthName: string; - showTotalsTooltipOnHover?: boolean; style?: CSSProperties; amountStyle?: CSSProperties; - menuTooltipProps?: ComponentPropsWithoutRef; - totalsTooltipProps?: ComponentPropsWithoutRef; - holdTooltipProps?: ComponentPropsWithoutRef; - transferTooltipProps?: ComponentPropsWithoutRef; }; export function ToBudget({ month, prevMonthName, - showTotalsTooltipOnHover, onBudgetAction, style, amountStyle, - menuTooltipProps, - totalsTooltipProps, - holdTooltipProps, - transferTooltipProps, }: ToBudgetProps) { const [menuOpen, setMenuOpen] = useState(null); + const triggerRef = useRef(null); const sheetValue = useSheetValue({ name: rolloverBudget.toBudget, value: 0, @@ -44,22 +36,23 @@ export function ToBudget({ return ( <> - setMenuOpen('actions')} - prevMonthName={prevMonthName} - showTotalsTooltipOnHover={showTotalsTooltipOnHover} - totalsTooltipProps={totalsTooltipProps} - style={style} - amountStyle={amountStyle} - /> - {menuOpen === 'actions' && ( - setMenuOpen(null)} - {...menuTooltipProps} - > + + setMenuOpen('actions')} + prevMonthName={prevMonthName} + style={style} + amountStyle={amountStyle} + /> + + + setMenuOpen(null)} + style={{ width: 200 }} + > + {menuOpen === 'actions' && ( setMenuOpen('transfer')} onHoldBuffer={() => setMenuOpen('buffer')} @@ -68,30 +61,28 @@ export function ToBudget({ setMenuOpen(null); }} /> - - )} - {menuOpen === 'buffer' && ( - setMenuOpen(null)} - onSubmit={amount => { - onBudgetAction(month, 'hold', { amount }); - }} - {...holdTooltipProps} - /> - )} - {menuOpen === 'transfer' && ( - setMenuOpen(null)} - onSubmit={(amount, category) => { - onBudgetAction(month, 'transfer-available', { - amount, - category, - }); - }} - {...transferTooltipProps} - /> - )} + )} + {menuOpen === 'buffer' && ( + setMenuOpen(null)} + onSubmit={amount => { + onBudgetAction(month, 'hold', { amount }); + }} + /> + )} + {menuOpen === 'transfer' && ( + setMenuOpen(null)} + onSubmit={(amount, category) => { + onBudgetAction(month, 'transfer-available', { + amount, + category, + }); + }} + /> + )} + ); } diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx index 4764903c74..693fb3a57f 100644 --- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx +++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx @@ -1,4 +1,4 @@ -import React, { type ComponentPropsWithoutRef } from 'react'; +import React from 'react'; import { css } from 'glamor'; @@ -6,20 +6,17 @@ import { rolloverBudget } from 'loot-core/src/client/queries'; import { theme, styles, type CSSProperties } from '../../../../style'; import { Block } from '../../../common/Block'; -import { HoverTarget } from '../../../common/HoverTarget'; +import { Tooltip } from '../../../common/Tooltip'; import { View } from '../../../common/View'; import { PrivacyFilter } from '../../../PrivacyFilter'; import { useFormat } from '../../../spreadsheet/useFormat'; import { useSheetName } from '../../../spreadsheet/useSheetName'; import { useSheetValue } from '../../../spreadsheet/useSheetValue'; -import { Tooltip } from '../../../tooltips'; import { TotalsList } from './TotalsList'; type ToBudgetAmountProps = { prevMonthName: string; - showTotalsTooltipOnHover?: boolean; - totalsTooltipProps?: ComponentPropsWithoutRef; style?: CSSProperties; amountStyle?: CSSProperties; onClick: () => void; @@ -27,8 +24,6 @@ type ToBudgetAmountProps = { export function ToBudgetAmount({ prevMonthName, - showTotalsTooltipOnHover, - totalsTooltipProps, style, amountStyle, onClick, @@ -47,18 +42,17 @@ export function ToBudgetAmount({ {isNegative ? 'Overbudgeted:' : 'To Budget:'} - ( - - - - )} + + } + placement="bottom" + triggerProps={{ delay: 0 }} > - + ); diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx index 8df4a8c76d..6e049b9756 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx @@ -440,6 +440,7 @@ describe('Transactions', () => { const categories = categoryGroups.flatMap(group => group.categories); const input = await editField(container, 'category', 2); + expect( [ ...screen @@ -506,7 +507,7 @@ describe('Transactions', () => { // The category field should still be editing expectToBeEditingField(container, 'category', 2); // No dropdown should be open - expect(container.querySelector('[data-testid="autocomplete"]')).toBe(null); + expect(screen.queryByTestId('autocomplete')).toBe(null); // Pressing enter should now move down await userEvent.type(input, '[Enter]'); diff --git a/upcoming-release-notes/2603.md b/upcoming-release-notes/2603.md new file mode 100644 index 0000000000..bb664186d6 --- /dev/null +++ b/upcoming-release-notes/2603.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Migrating native `Tooltip` component to react-aria Tooltip/Popover (vol.3) From 3b5eb5e81ebb513d9100874e8fcf5c99b72f63f2 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 7 May 2024 17:31:17 +0100 Subject: [PATCH 02/10] Release notes --- .../src/components/transactions/TransactionsTable.test.jsx | 1 - upcoming-release-notes/2724.md | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 upcoming-release-notes/2724.md diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx index 6e049b9756..1a2f3b06c1 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx @@ -440,7 +440,6 @@ describe('Transactions', () => { const categories = categoryGroups.flatMap(group => group.categories); const input = await editField(container, 'category', 2); - expect( [ ...screen diff --git a/upcoming-release-notes/2724.md b/upcoming-release-notes/2724.md new file mode 100644 index 0000000000..8c6ed88381 --- /dev/null +++ b/upcoming-release-notes/2724.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [MatissJanis] +--- + +Migrating native `Tooltip` component to react-aria Tooltip/Popover (vol.4) From e17376532f06f8fb12dae5f487c4ef21b170c481 Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 7 May 2024 18:13:48 +0100 Subject: [PATCH 03/10] Feedback: rename some files --- .eslintrc.js | 4 ++-- .../src/components/budget/rollover/BalanceTooltip.tsx | 8 ++++---- .../budget/rollover/{CoverTooltip.tsx => CoverMenu.tsx} | 4 ++-- .../budget/rollover/{HoldTooltip.tsx => HoldMenu.tsx} | 6 +++--- .../rollover/{TransferTooltip.tsx => TransferMenu.tsx} | 6 +++--- .../components/budget/rollover/budgetsummary/ToBudget.tsx | 8 ++++---- 6 files changed, 18 insertions(+), 18 deletions(-) rename packages/desktop-client/src/components/budget/rollover/{CoverTooltip.tsx => CoverMenu.tsx} (94%) rename packages/desktop-client/src/components/budget/rollover/{HoldTooltip.tsx => HoldMenu.tsx} (92%) rename packages/desktop-client/src/components/budget/rollover/{TransferTooltip.tsx => TransferMenu.tsx} (96%) diff --git a/.eslintrc.js b/.eslintrc.js index 9653190ca8..95078706ff 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -281,8 +281,8 @@ module.exports = { './packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx', './packages/desktop-client/src/components/budget/index.tsx', './packages/desktop-client/src/components/budget/MobileBudget.tsx', - './packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx', - './packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx', + './packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx', + './packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx', './packages/desktop-client/src/components/common/Menu.tsx', './packages/desktop-client/src/components/FinancesApp.tsx', './packages/desktop-client/src/components/GlobalKeys.ts', diff --git a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx index 6b8b765806..b2bcd45699 100644 --- a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx @@ -5,8 +5,8 @@ import { rolloverBudget } from 'loot-core/src/client/queries'; import { useSheetValue } from '../../spreadsheet/useSheetValue'; import { BalanceMenu } from './BalanceMenu'; -import { CoverTooltip } from './CoverTooltip'; -import { TransferTooltip } from './TransferTooltip'; +import { CoverMenu } from './CoverMenu'; +import { TransferMenu } from './TransferMenu'; type BalanceTooltipProps = { categoryId: string; @@ -42,7 +42,7 @@ export function BalanceTooltip({ )} {menu === 'transfer' && ( - { onBudgetAction(month, 'cover', { diff --git a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx similarity index 94% rename from packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx rename to packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx index 76d4972c51..d321357adf 100644 --- a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/CoverMenu.tsx @@ -7,12 +7,12 @@ import { InitialFocus } from '../../common/InitialFocus'; import { View } from '../../common/View'; import { addToBeBudgetedGroup } from '../util'; -type CoverTooltipProps = { +type CoverMenuProps = { onSubmit: (categoryId: string) => void; onClose: () => void; }; -export function CoverTooltip({ onSubmit, onClose }: CoverTooltipProps) { +export function CoverMenu({ onSubmit, onClose }: CoverMenuProps) { const { grouped: originalCategoryGroups } = useCategories(); const categoryGroups = addToBeBudgetedGroup( originalCategoryGroups.filter(g => !g.is_income), diff --git a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx similarity index 92% rename from packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx rename to packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx index 0a4946672d..c935e7f10b 100644 --- a/packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/HoldMenu.tsx @@ -15,11 +15,11 @@ import { Input } from '../../common/Input'; import { View } from '../../common/View'; import { NamespaceContext } from '../../spreadsheet/NamespaceContext'; -type HoldTooltipProps = { +type HoldMenuProps = { onSubmit: (amount: number) => void; onClose: () => void; }; -export function HoldTooltip({ onSubmit, onClose }: HoldTooltipProps) { +export function HoldMenu({ onSubmit, onClose }: HoldMenuProps) { const spreadsheet = useSpreadsheet(); const sheetName = useContext(NamespaceContext); @@ -41,7 +41,7 @@ export function HoldTooltip({ onSubmit, onClose }: HoldTooltipProps) { } if (amount === null) { - // See `TransferTooltip` for more info about this + // See `TransferMenu` for more info about this return null; } diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx similarity index 96% rename from packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx rename to packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx index e4758bfab3..544504ab48 100644 --- a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/TransferMenu.tsx @@ -11,19 +11,19 @@ import { Input } from '../../common/Input'; import { View } from '../../common/View'; import { addToBeBudgetedGroup } from '../util'; -type TransferTooltipProps = { +type TransferMenuProps = { initialAmount?: number; showToBeBudgeted?: boolean; onSubmit: (amount: number, categoryId: string) => void; onClose: () => void; }; -export function TransferTooltip({ +export function TransferMenu({ initialAmount = 0, showToBeBudgeted, onSubmit, onClose, -}: TransferTooltipProps) { +}: TransferMenuProps) { const { grouped: originalCategoryGroups } = useCategories(); let categoryGroups = originalCategoryGroups.filter(g => !g.is_income); if (showToBeBudgeted) { diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx index b1fe567ed1..8d5234b1c5 100644 --- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx +++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/ToBudget.tsx @@ -6,8 +6,8 @@ import { type CSSProperties } from '../../../../style'; import { Popover } from '../../../common/Popover'; import { View } from '../../../common/View'; import { useSheetValue } from '../../../spreadsheet/useSheetValue'; -import { HoldTooltip } from '../HoldTooltip'; -import { TransferTooltip } from '../TransferTooltip'; +import { HoldMenu } from '../HoldMenu'; +import { TransferMenu } from '../TransferMenu'; import { ToBudgetAmount } from './ToBudgetAmount'; import { ToBudgetMenu } from './ToBudgetMenu'; @@ -63,7 +63,7 @@ export function ToBudget({ /> )} {menuOpen === 'buffer' && ( - setMenuOpen(null)} onSubmit={amount => { onBudgetAction(month, 'hold', { amount }); @@ -71,7 +71,7 @@ export function ToBudget({ /> )} {menuOpen === 'transfer' && ( - setMenuOpen(null)} onSubmit={(amount, category) => { From 79642a2f6fdcfa21ff254f8c295b6d1d08453a2f Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 7 May 2024 18:14:58 +0100 Subject: [PATCH 04/10] More file renames --- .../src/components/budget/rollover/BalanceTooltip.tsx | 6 +++--- .../src/components/budget/rollover/RolloverComponents.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx index b2bcd45699..033b327a65 100644 --- a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx @@ -8,19 +8,19 @@ import { BalanceMenu } from './BalanceMenu'; import { CoverMenu } from './CoverMenu'; import { TransferMenu } from './TransferMenu'; -type BalanceTooltipProps = { +type BalanceMenuProps = { categoryId: string; month: string; onBudgetAction: (month: string, action: string, arg?: unknown) => void; onClose?: () => void; }; -export function BalanceTooltip({ +export function BalanceMenu({ categoryId, month, onBudgetAction, onClose = () => {}, -}: BalanceTooltipProps) { +}: BalanceMenuProps) { const catBalance = useSheetValue(rolloverBudget.catBalance(categoryId)); const [menu, setMenu] = useState('menu'); diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx index 06ea867d29..0341396b6c 100644 --- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx +++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx @@ -17,7 +17,7 @@ import { Row, Field, SheetCell } from '../../table'; import { BalanceWithCarryover } from '../BalanceWithCarryover'; import { makeAmountGrey } from '../util'; -import { BalanceTooltip } from './BalanceTooltip'; +import { BalanceMenu } from './BalanceMenu'; import { BudgetMenu } from './BudgetMenu'; const headerLabelStyle: CSSProperties = { @@ -333,7 +333,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({ onOpenChange={() => setBalanceMenuOpen(false)} style={{ width: 200 }} > - Date: Tue, 7 May 2024 19:03:19 +0100 Subject: [PATCH 05/10] Rename BalanceTooltip to BalancePopoverContent --- .../{BalanceTooltip.tsx => BalancePopoverContent.tsx} | 6 +++--- .../src/components/budget/rollover/RolloverComponents.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename packages/desktop-client/src/components/budget/rollover/{BalanceTooltip.tsx => BalancePopoverContent.tsx} (94%) diff --git a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx similarity index 94% rename from packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx rename to packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx index 033b327a65..2a86c30c13 100644 --- a/packages/desktop-client/src/components/budget/rollover/BalanceTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx @@ -8,19 +8,19 @@ import { BalanceMenu } from './BalanceMenu'; import { CoverMenu } from './CoverMenu'; import { TransferMenu } from './TransferMenu'; -type BalanceMenuProps = { +type BalancePopoverContentProps = { categoryId: string; month: string; onBudgetAction: (month: string, action: string, arg?: unknown) => void; onClose?: () => void; }; -export function BalanceMenu({ +export function BalancePopoverContent({ categoryId, month, onBudgetAction, onClose = () => {}, -}: BalanceMenuProps) { +}: BalancePopoverContentProps) { const catBalance = useSheetValue(rolloverBudget.catBalance(categoryId)); const [menu, setMenu] = useState('menu'); diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx index 0341396b6c..a1111e7486 100644 --- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx +++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx @@ -17,7 +17,7 @@ import { Row, Field, SheetCell } from '../../table'; import { BalanceWithCarryover } from '../BalanceWithCarryover'; import { makeAmountGrey } from '../util'; -import { BalanceMenu } from './BalanceMenu'; +import { BalancePopoverContent } from './BalancePopoverContent'; import { BudgetMenu } from './BudgetMenu'; const headerLabelStyle: CSSProperties = { @@ -333,7 +333,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({ onOpenChange={() => setBalanceMenuOpen(false)} style={{ width: 200 }} > - Date: Tue, 7 May 2024 19:07:19 +0100 Subject: [PATCH 06/10] Delete unnecessary release notes file --- upcoming-release-notes/2603.md | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 upcoming-release-notes/2603.md diff --git a/upcoming-release-notes/2603.md b/upcoming-release-notes/2603.md deleted file mode 100644 index bb664186d6..0000000000 --- a/upcoming-release-notes/2603.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -category: Maintenance -authors: [MatissJanis] ---- - -Migrating native `Tooltip` component to react-aria Tooltip/Popover (vol.3) From d0291ac175fbee88627a05f1ad6aebcd5251680f Mon Sep 17 00:00:00 2001 From: Matiss Janis Aboltins Date: Tue, 7 May 2024 21:51:36 +0100 Subject: [PATCH 07/10] BalanceMovementMenu --- .../{BalancePopoverContent.tsx => BalanceMovementMenu.tsx} | 6 +++--- .../src/components/budget/rollover/RolloverComponents.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename packages/desktop-client/src/components/budget/rollover/{BalancePopoverContent.tsx => BalanceMovementMenu.tsx} (94%) diff --git a/packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx b/packages/desktop-client/src/components/budget/rollover/BalanceMovementMenu.tsx similarity index 94% rename from packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx rename to packages/desktop-client/src/components/budget/rollover/BalanceMovementMenu.tsx index 2a86c30c13..0957b7bc82 100644 --- a/packages/desktop-client/src/components/budget/rollover/BalancePopoverContent.tsx +++ b/packages/desktop-client/src/components/budget/rollover/BalanceMovementMenu.tsx @@ -8,19 +8,19 @@ import { BalanceMenu } from './BalanceMenu'; import { CoverMenu } from './CoverMenu'; import { TransferMenu } from './TransferMenu'; -type BalancePopoverContentProps = { +type BalanceMovementMenuProps = { categoryId: string; month: string; onBudgetAction: (month: string, action: string, arg?: unknown) => void; onClose?: () => void; }; -export function BalancePopoverContent({ +export function BalanceMovementMenu({ categoryId, month, onBudgetAction, onClose = () => {}, -}: BalancePopoverContentProps) { +}: BalanceMovementMenuProps) { const catBalance = useSheetValue(rolloverBudget.catBalance(categoryId)); const [menu, setMenu] = useState('menu'); diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx index a1111e7486..492fb5b1c5 100644 --- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx +++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx @@ -17,7 +17,7 @@ import { Row, Field, SheetCell } from '../../table'; import { BalanceWithCarryover } from '../BalanceWithCarryover'; import { makeAmountGrey } from '../util'; -import { BalancePopoverContent } from './BalancePopoverContent'; +import { BalanceMovementMenu } from './BalanceMovementMenu'; import { BudgetMenu } from './BudgetMenu'; const headerLabelStyle: CSSProperties = { @@ -333,7 +333,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({ onOpenChange={() => setBalanceMenuOpen(false)} style={{ width: 200 }} > - Date: Tue, 14 May 2024 19:21:33 +0100 Subject: [PATCH 08/10] Feedback: fix floating menu in chrome --- .../desktop-client/src/components/budget/SidebarCategory.tsx | 3 +-- packages/desktop-client/src/components/budget/SidebarGroup.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx index 00eb77836a..c8986725fe 100644 --- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx +++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx @@ -70,9 +70,8 @@ export function SidebarCategory({ > {category.name} - +