From 94a6b53f4abf6694cc42f4d09dc4e445539a5645 Mon Sep 17 00:00:00 2001
From: Sean Tsai <aleetsaiya@gmail.com>
Date: Mon, 24 Jul 2023 00:36:42 +0800
Subject: [PATCH] Delete table navigator from rules page (#1342)
---
.../src/components/ManageRules.js | 225 +++++++-----------
upcoming-release-notes/1342.md | 5 +
2 files changed, 95 insertions(+), 135 deletions(-)
create mode 100644 upcoming-release-notes/1342.md
diff --git a/packages/desktop-client/src/components/ManageRules.js b/packages/desktop-client/src/components/ManageRules.js
index 5f724971e..30d21b5cf 100644
--- a/packages/desktop-client/src/components/ManageRules.js
+++ b/packages/desktop-client/src/components/ManageRules.js
@@ -40,15 +40,7 @@ import {
Input,
LinkButton,
} from './common';
-import {
- SelectCell,
- Row,
- Field,
- Cell,
- CellButton,
- TableHeader,
- useTableNavigator,
-} from './table';
+import { SelectCell, Row, Field, Cell, CellButton, TableHeader } from './table';
let SchedulesQuery = liveQueryContext(q('schedules').select('*'));
@@ -298,130 +290,105 @@ function ActionExpression({ field, op, value, options, style }) {
);
}
-let Rule = memo(
- ({
- rule,
- hovered,
- selected,
- editing,
- focusedField,
- onHover,
- onEdit,
- onEditRule,
- }) => {
- let dispatchSelected = useSelectedDispatch();
- let borderColor = selected ? colors.b8 : colors.border;
- let backgroundFocus = hovered || focusedField === 'select';
+let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
+ let dispatchSelected = useSelectedDispatch();
+ let borderColor = selected ? colors.b8 : colors.border;
+ let backgroundFocus = hovered;
- return (
- <Row
- height="auto"
- borderColor={borderColor}
- backgroundColor={
- selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
- }
- style={{ fontSize: 13, zIndex: editing || selected ? 101 : 'auto' }}
- collapsed="true"
- onMouseEnter={() => onHover && onHover(rule.id)}
- onMouseLeave={() => onHover && onHover(null)}
- >
- <SelectCell
- exposed={hovered || selected || editing}
- focused={focusedField === 'select'}
- onSelect={e => {
- dispatchSelected({ type: 'select', id: rule.id, event: e });
- }}
- onEdit={() => onEdit(rule.id, 'select')}
- selected={selected}
- />
-
- <Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
- {rule.stage && (
- <View
- style={{
- alignSelf: 'flex-start',
- margin: 5,
- backgroundColor: colors.b10,
- color: colors.b1,
- borderRadius: 4,
- padding: '3px 5px',
- }}
- >
- {rule.stage}
- </View>
- )}
- </Cell>
-
- <Field width="flex" style={{ padding: '15px 0' }} truncate={false}>
- <Stack direction="row" align="center">
- <View
- style={{ flex: 1, alignItems: 'flex-start' }}
- data-testid="conditions"
- >
- {rule.conditions.map((cond, i) => (
- <ConditionExpression
- key={i}
- field={cond.field}
- op={cond.op}
- inline={true}
- value={cond.value}
- options={cond.options}
- prefix={i > 0 ? friendlyOp(rule.conditionsOp) : null}
- style={i !== 0 && { marginTop: 3 }}
- />
- ))}
- </View>
+ return (
+ <Row
+ height="auto"
+ borderColor={borderColor}
+ backgroundColor={
+ selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
+ }
+ style={{ fontSize: 13, zIndex: selected ? 101 : 'auto' }}
+ collapsed="true"
+ onMouseEnter={() => onHover && onHover(rule.id)}
+ onMouseLeave={() => onHover && onHover(null)}
+ >
+ <SelectCell
+ exposed={hovered || selected}
+ focused={true}
+ onSelect={e => {
+ dispatchSelected({ type: 'select', id: rule.id, event: e });
+ }}
+ selected={selected}
+ />
- <Text>
- <ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
- </Text>
+ <Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
+ {rule.stage && (
+ <View
+ style={{
+ alignSelf: 'flex-start',
+ margin: 5,
+ backgroundColor: colors.b10,
+ color: colors.b1,
+ borderRadius: 4,
+ padding: '3px 5px',
+ }}
+ >
+ {rule.stage}
+ </View>
+ )}
+ </Cell>
- <View
- style={{ flex: 1, alignItems: 'flex-start' }}
- data-testid="actions"
- >
- {rule.actions.map((action, i) => (
- <ActionExpression
- key={i}
- field={action.field}
- op={action.op}
- value={action.value}
- options={action.options}
- style={i !== 0 && { marginTop: 3 }}
- />
- ))}
- </View>
- </Stack>
- </Field>
+ <Field width="flex" style={{ padding: '15px 0' }} truncate={false}>
+ <Stack direction="row" align="center">
+ <View
+ style={{ flex: 1, alignItems: 'flex-start' }}
+ data-testid="conditions"
+ >
+ {rule.conditions.map((cond, i) => (
+ <ConditionExpression
+ key={i}
+ field={cond.field}
+ op={cond.op}
+ inline={true}
+ value={cond.value}
+ options={cond.options}
+ prefix={i > 0 ? friendlyOp(rule.conditionsOp) : null}
+ style={i !== 0 && { marginTop: 3 }}
+ />
+ ))}
+ </View>
- <Cell
- name="edit"
- focused={focusedField === 'edit'}
- plain
- style={{ padding: '0 15px', paddingLeft: 5 }}
- >
- <Button
- as={CellButton}
- onSelect={() => onEditRule(rule)}
- onEdit={() => onEdit(rule.id, 'edit')}
+ <Text>
+ <ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
+ </Text>
+
+ <View
+ style={{ flex: 1, alignItems: 'flex-start' }}
+ data-testid="actions"
>
- Edit
- </Button>
- </Cell>
- </Row>
- );
- },
-);
+ {rule.actions.map((action, i) => (
+ <ActionExpression
+ key={i}
+ field={action.field}
+ op={action.op}
+ value={action.value}
+ options={action.options}
+ style={i !== 0 && { marginTop: 3 }}
+ />
+ ))}
+ </View>
+ </Stack>
+ </Field>
+
+ <Cell name="edit" plain style={{ padding: '0 15px', paddingLeft: 5 }}>
+ <Button as={CellButton} onSelect={() => onEditRule(rule)}>
+ Edit
+ </Button>
+ </Cell>
+ </Row>
+ );
+});
let SimpleTable = forwardRef(
- (
- { data, navigator, loadMore, style, onHoverLeave, children, ...props },
- ref,
- ) => {
+ ({ data, loadMore, style, onHoverLeave, children, ...props }, ref) => {
let contentRef = useRef();
let contentHeight = useRef();
let scrollRef = useRef();
- let { getNavigatorProps } = navigator;
function onScroll(e) {
if (contentHeight.current != null) {
@@ -452,7 +419,6 @@ let SimpleTable = forwardRef(
]}
tabIndex="1"
data-testid="table"
- {...getNavigatorProps(props)}
>
<View
innerRef={scrollRef}
@@ -489,7 +455,6 @@ function RulesHeader() {
function RulesList({
rules,
selectedItems,
- navigator,
hoveredRule,
collapsed: borderCollapsed,
onHover,
@@ -505,7 +470,6 @@ function RulesList({
{rules.map(rule => {
let hovered = hoveredRule === rule.id;
let selected = selectedItems.has(rule.id);
- let editing = navigator.editingId === rule.id;
return (
<Rule
@@ -513,10 +477,7 @@ function RulesList({
rule={rule}
hovered={hovered}
selected={selected}
- editing={editing}
- focusedField={editing && navigator.focusedField}
onHover={onHover}
- onEdit={navigator.onEdit}
onEditRule={onEditRule}
/>
);
@@ -583,7 +544,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
let [rules, setRules] = useState(null);
let [filter, setFilter] = useState('');
let dispatch = useDispatch();
- let navigator = useTableNavigator(rules, ['select', 'edit']);
let { data: schedules } = SchedulesQuery.useQuery();
let filterData = useSelector(state => ({
@@ -715,8 +675,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
onSave: async newRule => {
let newRules = await loadRules();
- navigator.onEdit(newRule.id, 'edit');
-
setRules(rules => {
let newIdx = newRules.findIndex(rule => rule.id === newRule.id);
return newRules.slice(0, newIdx + 75);
@@ -771,7 +729,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
value={filter}
onChange={e => {
setFilter(e.target.value);
- navigator.onEdit(null);
}}
style={{
width: 350,
@@ -791,7 +748,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
<SimpleTable
ref={tableRef}
data={filteredRules}
- navigator={navigator}
loadMore={loadMore}
// Hide the last border of the item in the table
style={{ marginBottom: -1 }}
@@ -799,7 +755,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
<RulesList
rules={filteredRules}
selectedItems={selectedInst.items}
- navigator={navigator}
hoveredRule={hoveredRule}
onHover={onHover}
onEditRule={onEditRule}
diff --git a/upcoming-release-notes/1342.md b/upcoming-release-notes/1342.md
new file mode 100644
index 000000000..c13f30f97
--- /dev/null
+++ b/upcoming-release-notes/1342.md
@@ -0,0 +1,5 @@
+---
+category: Maintenance
+authors: [aleetsaiya]
+---
+Remove table navigator from rules page
\ No newline at end of file
--
GitLab