Merge pull request Expensify#94208 from Expensify/cmartins-taxTable

rlinoz · web-flow · commit 619d88505f4b · 2026-06-24T10:11:20.000-03:00
Update the policy taxes table to the new style
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -8545,6 +8545,7 @@ const CONST = {
                 BULK_ACTIONS_DROPDOWN: 'WorkspaceTags-BulkActionsDropdown',
             },
             TAXES: {
+                ROW: 'WorkspaceTaxes-Row',
                 ADD_BUTTON: 'WorkspaceTaxes-AddButton',
                 MORE_DROPDOWN: 'WorkspaceTaxes-MoreDropdown',
                 BULK_ACTIONS_DROPDOWN: 'WorkspaceTaxes-BulkActionsDropdown',
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -10,6 +10,7 @@ import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Text from './Text';
 import TextInput from './TextInput';
+import type {BaseTextInputRef} from './TextInput/BaseTextInput/types';
 
 type SearchBarProps = {
     label: string;
@@ -20,9 +21,10 @@ type SearchBarProps = {
     style?: StyleProp<ViewStyle>;
     shouldShowEmptyState?: boolean;
     emptyStateContainerStyle?: StyleProp<ViewStyle>;
+    ref?: React.Ref<BaseTextInputRef>;
 };
 
-function SearchBar({label, style, icon, inputValue, onChangeText, onSubmitEditing, shouldShowEmptyState, emptyStateContainerStyle}: SearchBarProps) {
+function SearchBar({ref, label, style, icon, inputValue, onChangeText, onSubmitEditing, shouldShowEmptyState, emptyStateContainerStyle}: SearchBarProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
     const {translate} = useLocalize();
@@ -36,6 +38,7 @@ function SearchBar({label, style, icon, inputValue, onChangeText, onSubmitEditin
         <>
             <View style={[styles.searchBarMargin, styles.searchBarWidth(shouldUseNarrowLayout && !isInLandscapeMode), style]}>
                 <TextInput
+                    ref={ref}
                     label={label}
                     accessibilityLabel={label}
                     role={CONST.ROLE.PRESENTATION}
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
@@ -26,14 +26,17 @@ type SwitchProps = {
 
     /** Callback to fire when the switch is toggled in disabled state */
     disabledAction?: () => void | Promise<void>;
+
+    /** Whether the switch is nested inside another pressable */
+    isNested?: boolean;
 };
 
 const OFFSET_X = {
     OFF: 0,
     ON: 20,
 };
 
-function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, disabledAction}: SwitchProps) {
+function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, disabledAction, isNested}: SwitchProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const offsetX = useSharedValue(isOn ? OFFSET_X.ON : OFFSET_X.OFF);
@@ -99,7 +102,16 @@ function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, dis
     return (
         <PressableWithFeedback
             disabled={!disabledAction && disabled}
+            isNested={isNested}
             onPress={handleSwitchPress}
+            onMouseDown={(e) => {
+                if (!isNested) {
+                    return;
+                }
+
+                e.preventDefault();
+                e.stopPropagation();
+            }}
             onLongPress={handleSwitchPress}
             role={CONST.ROLE.SWITCH}
             aria-checked={isOn}
diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
@@ -72,8 +72,9 @@ function TableHeader<DataType extends TableData, ColumnKey extends string = stri
     }
 
     const selectableRows = processedData.filter((row) => !row.disabled);
+    const hasSelectableRows = selectableRows.length > 0;
     let isSelectionIndeterminate = false;
-    let isEverySelectableRowSelected = selectableRows.length > 0;
+    let isEverySelectableRowSelected = hasSelectableRows;
 
     // We exclude disabled rows from the 'select all' behavior, so if a disabled row is not selected, we still
     // consider all active rows to be selected
@@ -110,6 +111,7 @@ function TableHeader<DataType extends TableData, ColumnKey extends string = stri
                     {!!isSelectionCheckboxVisible && (
                         <Checkbox
                             containerStyle={styles.m0}
+                            disabled={!hasSelectableRows}
                             isChecked={isEverySelectableRowSelected}
                             isIndeterminate={isSelectionIndeterminate && !isEverySelectableRowSelected}
                             onPress={tableMethods.handleSelectAll}
@@ -132,6 +134,7 @@ function TableHeader<DataType extends TableData, ColumnKey extends string = stri
                 <>
                     {!!selectionEnabled && (
                         <Checkbox
+                            disabled={!hasSelectableRows}
                             isChecked={isEverySelectableRowSelected}
                             isIndeterminate={isSelectionIndeterminate && !isEverySelectableRowSelected}
                             onPress={tableMethods.handleSelectAll}
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
@@ -162,6 +162,10 @@ export default function TableRow({
         }
 
         if (shouldUseNarrowLayout && isMobileSelectionEnabled && selectionEnabled) {
+            if (item.disabled) {
+                return;
+            }
+
             handleCheckboxPress(event);
             return;
         }
@@ -192,6 +196,25 @@ export default function TableRow({
                 hoverStyle={tableRowPressableHoverStyle}
                 pressDimmingValue={!interactive ? undefined : 1}
                 role={interactive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
+                onMouseDown={(e) => {
+                    const target = e?.target;
+
+                    if (!(target instanceof HTMLElement)) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    if (target.tagName === CONST.ELEMENT_NAME.INPUT) {
+                        return;
+                    }
+
+                    if (target.closest('[role="switch"]') || target.closest('[role="checkbox"]')) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    e.preventDefault();
+                }}
                 onPress={(event) => handleRowPress(event)}
                 onLongPress={handleRowLongPress}
                 {...props}
diff --git a/src/components/Table/TableSearchBar.tsx b/src/components/Table/TableSearchBar.tsx
@@ -1,6 +1,8 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useLayoutEffect, useRef} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import SearchBar from '@components/SearchBar';
+import isTextInputFocused from '@components/TextInput/BaseTextInput/isTextInputFocused';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import {useTableContext} from './TableContext';
 
@@ -41,11 +43,23 @@ type TableSearchBarProps = {
 
 function TableSearchBar({label, style}: TableSearchBarProps) {
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);
+    const inputRef = useRef<BaseTextInputRef>(null);
     const {
         activeSearchString,
+        processedData,
         tableMethods: {updateSearchString},
     } = useTableContext();
 
+    const hasActiveSearchString = activeSearchString.length > 0;
+
+    useLayoutEffect(() => {
+        if (!hasActiveSearchString || isTextInputFocused(inputRef)) {
+            return;
+        }
+
+        inputRef.current?.focus?.();
+    }, [hasActiveSearchString, processedData]);
+
     useEffect(() => {
         return () => updateSearchString('');
         // We only want the cleanup to run on unmount to reset the search state
@@ -54,6 +68,7 @@ function TableSearchBar({label, style}: TableSearchBarProps) {
 
     return (
         <SearchBar
+            ref={inputRef}
             label={label}
             style={style}
             inputValue={activeSearchString}
diff --git a/src/components/Table/middlewares/selection.ts b/src/components/Table/middlewares/selection.ts
@@ -117,6 +117,10 @@ export default function useSelection<DataType extends TableData>({
      * on or off
      */
     const handleSingleRowSelection = (keyForList: string) => {
+        if (!selectableKeys.includes(keyForList)) {
+            return;
+        }
+
         const keyIndex = selectedKeys.indexOf(keyForList);
         const isCurrentlySelected = keyIndex !== -1;
 
diff --git a/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx b/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import Switch from '@components/Switch';
+import Table from '@components/Table';
+import type {TableData} from '@components/Table';
+import TextWithTooltip from '@components/TextWithTooltip';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
+
+type WorkspaceTaxTableRowData = TableData & {
+    name: string;
+    alternateText: string;
+    enabled: boolean;
+    isLocked: boolean;
+    isSwitchDisabled?: boolean;
+    errors?: OnyxCommon.Errors;
+    pendingAction?: OnyxCommon.PendingAction;
+    action: () => void;
+    onToggleEnabled: (enabled: boolean) => void;
+    onDisabledSwitchPress?: () => void;
+    onClose: () => void;
+};
+
+type WorkspaceTaxesTableRowProps = {
+    /** Data about the tax rate */
+    item: WorkspaceTaxTableRowData;
+
+    /** The index of the row relative to all other rows */
+    rowIndex: number;
+
+    /** Whether to use narrow table row layout */
+    shouldUseNarrowTableLayout: boolean;
+};
+
+function WorkspaceTaxesTableRow({item, rowIndex, shouldUseNarrowTableLayout}: WorkspaceTaxesTableRowProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
+
+    const isDeleting = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const enabledStatusLabel = item.enabled ? translate('common.enabled') : translate('common.disabled');
+
+    const accessibilityLabel = [item.name, item.alternateText, enabledStatusLabel].filter(Boolean).join(', ');
+
+    return (
+        <Table.Row
+            interactive
+            rowIndex={rowIndex}
+            disabled={isDeleting}
+            accessibilityLabel={accessibilityLabel}
+            skeletonReasonAttributes={{context: 'workspaceTaxesTableRow'}}
+            sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.TAXES.ROW}
+            onPress={item.action}
+            offlineWithFeedback={{
+                errors: item.errors,
+                pendingAction: item.pendingAction,
+                onClose: item.onClose,
+            }}
+        >
+            {({hovered}) => (
+                <>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, shouldUseNarrowTableLayout && styles.gap1]}>
+                        <View style={[styles.flex1, styles.gap1]}>
+                            <TextWithTooltip
+                                shouldShowTooltip
+                                numberOfLines={1}
+                                text={item.name}
+                                style={styles.optionDisplayName}
+                            />
+                            {!!item.alternateText && (
+                                <TextWithTooltip
+                                    shouldShowTooltip
+                                    numberOfLines={1}
+                                    text={item.alternateText}
+                                    style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                />
+                            )}
+                        </View>
+                    </View>
+
+                    <View style={[styles.justifyContentCenter, styles.alignItemsEnd]}>
+                        <Switch
+                            isOn={item.enabled}
+                            showLockIcon={item.isLocked}
+                            disabled={item.isSwitchDisabled}
+                            disabledAction={item.onDisabledSwitchPress}
+                            accessibilityLabel={translate('workspace.taxes.actions.enable')}
+                            onToggle={item.onToggleEnabled}
+                            isNested
+                        />
+                    </View>
+
+                    <Icon
+                        src={icons.ArrowRight}
+                        fill={theme.icon}
+                        additionalStyles={[styles.justifyContentCenter, styles.alignItemsCenter, (!hovered || isDeleting) && styles.opacitySemiTransparent]}
+                        width={variables.iconSizeNormal}
+                        height={variables.iconSizeNormal}
+                    />
+                </>
+            )}
+        </Table.Row>
+    );
+}
+
+export default WorkspaceTaxesTableRow;
+export type {WorkspaceTaxTableRowData};
diff --git a/src/components/Tables/WorkspaceTaxesTable/index.tsx b/src/components/Tables/WorkspaceTaxesTable/index.tsx
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
