From 2ebea847c129a4772d0164384104035c6f7a62af Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Mon, 3 Jul 2023 18:52:04 +0100
Subject: [PATCH] :recycle: (select) removing 2x usages of the Select component
(#1259)
---
.../e2e/page-models/account-page.js | 5 +-
.../e2e/page-models/close-account-modal.js | 6 +-
.../src/components/modals/CloseAccount.js | 96 +++++++------------
.../src/components/reports/Header.js | 48 +++++-----
upcoming-release-notes/1259.md | 6 ++
5 files changed, 69 insertions(+), 92 deletions(-)
create mode 100644 upcoming-release-notes/1259.md
diff --git a/packages/desktop-client/e2e/page-models/account-page.js b/packages/desktop-client/e2e/page-models/account-page.js
index 37398971a..a4c98e813 100644
--- a/packages/desktop-client/e2e/page-models/account-page.js
+++ b/packages/desktop-client/e2e/page-models/account-page.js
@@ -88,7 +88,10 @@ export class AccountPage {
async clickCloseAccount() {
await this.menuButton.click();
await this.page.getByRole('button', { name: 'Close Account' }).click();
- return new CloseAccountModal(this.page.locator('css=[aria-modal]'));
+ return new CloseAccountModal(
+ this.page.locator('css=[aria-modal]'),
+ this.page,
+ );
}
async _fillTransactionFields(transactionRow, transaction) {
diff --git a/packages/desktop-client/e2e/page-models/close-account-modal.js b/packages/desktop-client/e2e/page-models/close-account-modal.js
index 9b9236026..7cd689732 100644
--- a/packages/desktop-client/e2e/page-models/close-account-modal.js
+++ b/packages/desktop-client/e2e/page-models/close-account-modal.js
@@ -1,10 +1,12 @@
export class CloseAccountModal {
- constructor(page) {
+ constructor(page, rootPage) {
this.page = page;
+ this.rootPage = rootPage;
}
async selectTransferAccount(accountName) {
- await this.page.getByRole('combobox').selectOption({ label: accountName });
+ await this.page.getByPlaceholder('Select account...').fill(accountName);
+ await this.rootPage.keyboard.press('Enter');
}
async closeAccount() {
diff --git a/packages/desktop-client/src/components/modals/CloseAccount.js b/packages/desktop-client/src/components/modals/CloseAccount.js
index b6e5ddddf..8b75d6226 100644
--- a/packages/desktop-client/src/components/modals/CloseAccount.js
+++ b/packages/desktop-client/src/components/modals/CloseAccount.js
@@ -3,16 +3,14 @@ import React, { useState } from 'react';
import { integerToCurrency } from 'loot-core/src/shared/util';
import { colors } from '../../style';
-import {
- View,
- Text,
- Modal,
- Button,
- P,
- Select,
- FormError,
- LinkButton,
-} from '../common';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
+import { P, LinkButton } from '../common';
+import Button from '../common/Button';
+import FormError from '../common/FormError';
+import Modal from '../common/Modal';
+import Text from '../common/Text';
+import View from '../common/View';
function needsCategory(account, currentTransfer, accounts) {
const acct = accounts.find(a => a.id === currentTransfer);
@@ -23,23 +21,6 @@ function needsCategory(account, currentTransfer, accounts) {
return account.offbudget === 0 && isOffBudget;
}
-function CategorySelect({ categoryGroups, ...nativeProps }) {
- return (
- <Select {...nativeProps}>
- <option value="">Select category...</option>
- {categoryGroups.map(group => (
- <optgroup key={group.id} label={group.name}>
- {group.categories.map(category => (
- <option key={category.id} value={category.id}>
- {category.name}
- </option>
- ))}
- </optgroup>
- ))}
- </Select>
- );
-}
-
function CloseAccount({
account,
accounts,
@@ -56,10 +37,6 @@ function CloseAccount({
let [transferError, setTransferError] = useState(false);
let [categoryError, setCategoryError] = useState(false);
- let filtered = accounts.filter(a => a.id !== account.id);
- let onbudget = filtered.filter(a => a.offbudget === 0);
- let offbudget = filtered.filter(a => a.offbudget === 1);
-
return (
<Modal
title="Close Account"
@@ -113,33 +90,23 @@ function CloseAccount({
to:
</P>
- <Select
- value={transfer}
- onChange={event => {
- setTransfer(event.target.value);
- if (transferError && event.target.value) {
- setTransferError(false);
- }
- }}
- style={{ width: 200, marginBottom: 15 }}
- >
- <option value="">Select account...</option>
- <optgroup label="For Budget">
- {onbudget.map(acct => (
- <option key={acct.id} value={acct.id}>
- {acct.name}
- </option>
- ))}
- </optgroup>
-
- <optgroup label="Off Budget">
- {offbudget.map(acct => (
- <option key={acct.id} value={acct.id}>
- {acct.name}
- </option>
- ))}
- </optgroup>
- </Select>
+ <View style={{ marginBottom: 15 }}>
+ <AccountAutocomplete
+ includeClosedAccounts={false}
+ value={transfer}
+ accounts={accounts}
+ inputProps={{
+ placeholder: 'Select account...',
+ }}
+ onSelect={acc => {
+ setTransfer(acc);
+ if (transferError && acc) {
+ setTransferError(false);
+ }
+ }}
+ />
+ </View>
+
{transferError && (
<FormError style={{ marginBottom: 15 }}>
Transfer is required
@@ -154,17 +121,20 @@ function CloseAccount({
categorized. Select a category:
</P>
- <CategorySelect
+ <CategoryAutocomplete
categoryGroups={categoryGroups}
value={category}
- onChange={event => {
- setCategory(event.target.value);
- if (categoryError && event.target.value) {
+ inputProps={{
+ placeholder: 'Select category...',
+ }}
+ onSelect={newValue => {
+ setCategory(newValue);
+ if (categoryError && newValue) {
setCategoryError(false);
}
}}
- style={{ width: 200 }}
/>
+
{categoryError && (
<FormError>Category is required</FormError>
)}
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index 3c77d5ce8..dd566622e 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -2,7 +2,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import ArrowLeft from '../../icons/v1/ArrowLeft';
import { styles } from '../../style';
-import { View, Select, Button, ButtonLink } from '../common';
+import { View, Button, ButtonLink, CustomSelect } from '../common';
import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
function validateStart(allMonths, start, end) {
@@ -83,35 +83,31 @@ function Header({
gap: 15,
}}
>
- <div>
- <Select
- style={{ flex: 0, backgroundColor: 'white' }}
- onChange={e =>
- onChangeDates(...validateStart(allMonths, e.target.value, end))
+ <View
+ style={{
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 5,
+ }}
+ >
+ <CustomSelect
+ style={{ backgroundColor: 'white', width: 130 }}
+ onChange={newValue =>
+ onChangeDates(...validateStart(allMonths, newValue, end))
}
value={start}
- >
- {allMonths.map(month => (
- <option key={month.name} value={month.name}>
- {month.pretty}
- </option>
- ))}
- </Select>{' '}
- to{' '}
- <Select
- style={{ flex: 0, backgroundColor: 'white' }}
- onChange={e =>
- onChangeDates(...validateEnd(allMonths, start, e.target.value))
+ options={allMonths.map(({ name, pretty }) => [name, pretty])}
+ />
+ <View>to</View>
+ <CustomSelect
+ style={{ backgroundColor: 'white', width: 130 }}
+ onChange={newValue =>
+ onChangeDates(...validateEnd(allMonths, start, newValue))
}
value={end}
- >
- {allMonths.map(month => (
- <option key={month.name} value={month.name}>
- {month.pretty}
- </option>
- ))}
- </Select>
- </div>
+ options={allMonths.map(({ name, pretty }) => [name, pretty])}
+ />
+ </View>
<FilterButton onApply={onApply} />
diff --git a/upcoming-release-notes/1259.md b/upcoming-release-notes/1259.md
new file mode 100644
index 000000000..31693745f
--- /dev/null
+++ b/upcoming-release-notes/1259.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Refactoring some usages of legacy `Select` component to autocompletes or `CustomSelect`
--
GitLab