Concierge HTML tables: make the whole row clickable and align styling with other tables

Author: dukenv0307

src/CONST/index.ts

@@ -8430,6 +8430,7 @@ const CONST = {
             IMAGE: 'HTMLRenderer-Image',
             PRE: 'HTMLRenderer-Pre',
             VICTORY_CHART_EXPAND_BUTTON: 'HTMLRenderer-VictoryChartExpandButton',
+            TABLE_ROW: 'HTMLRenderer-TableRow',
         },
         RECEIPT: {
             IMAGE: 'Receipt-Image',

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -19,9 +19,12 @@ import type {StyleProp, TextStyle} from 'react-native';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
 
 import {Str} from 'expensify-common';
-import React, {useMemo} from 'react';
+import React, {useContext, useMemo} from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 
+import TableLinkColumnContext from './TableLinkColumnContext';
+import {getTextContent, isLinkColumnAnchor} from './TableRowLink';
+
 type AnchorRendererProps = CustomRendererProps<TText | TPhrasing> & {
     /** Key of the element */
     key?: string;
@@ -47,6 +50,7 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
 
     const isDeleted = HTMLEngineUtils.isDeletedNode(tnode);
     const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(tnode);
+    const linkColumnIndex = useContext(TableLinkColumnContext);
 
     const textDecorationLineStyle = isDeleted ? styles.lineThrough : {};
 
@@ -62,6 +66,12 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
         return undefined;
     }, [internalNewExpensifyPath, internalExpensifyPath, attrHref, environmentURL, isAttachment]);
 
+    // The table row already navigates to this link's destination, so the cell shows the link text as plain content
+    // rather than a second target styled as a link.
+    if (isLinkColumnAnchor(tnode, linkColumnIndex)) {
+        return <Text>{getTextContent(tnode)}</Text>;
+    }
+
     if (!HTMLEngineUtils.isChildOfComment(tnode) && !isChildOfTaskTitle) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
         // We don't have this behaviour in other links in NewDot

src/components/HTMLEngineProvider/HTMLRenderers/TableLinkColumnContext.ts

@@ -0,0 +1,10 @@
+import {createContext} from 'react';
+
+/**
+ * The column index whose links make each body row of the table currently being rendered navigable, or undefined when
+ * the table has no such column. `TableRenderer` derives it and shares it so the row renderer can navigate and the cell
+ * renderer can drop the now-redundant per-cell anchor.
+ */
+const TableLinkColumnContext = createContext<number | undefined>(undefined);
+
+export default TableLinkColumnContext;

src/components/HTMLEngineProvider/HTMLRenderers/TableRenderer.tsx

@@ -11,6 +11,8 @@ import HTMLTableScroll from './HTMLTableScroll';
 import TableChildrenRenderer, {getElementChildren} from './TableChildrenRenderer';
 import TableColumnAlignmentContext from './TableColumnAlignmentContext';
 import TableContentWidthContext from './TableContentWidthContext';
+import TableLinkColumnContext from './TableLinkColumnContext';
+import {getLinkColumnIndex} from './TableRowLink';
 
 /**
  * Derives the horizontal alignment for each column from the table body. Concierge expense tables put the amount in
@@ -31,23 +33,27 @@ function getColumnAlignments(tableNode: TNode): CellHorizontalAlignment[] {
 
 function TableRenderer({tnode}: CustomRendererProps<TBlock>) {
     const columnAlignments = useMemo(() => getColumnAlignments(tnode), [tnode]);
+    const linkColumnIndex = useMemo(() => getLinkColumnIndex(tnode), [tnode]);
 
     // The comment-level width fills the message exactly; fall back to the HTML content width when the table is rendered
     // outside a comment. A concrete number is required because the scroller needs a fixed viewport and content width.
     const measuredContentWidth = useContext(TableContentWidthContext);
     const fallbackContentWidth = useContentWidth();
     const viewportWidth = measuredContentWidth || fallbackContentWidth;
-    const columnsWidth = columnAlignments.length * variables.htmlTableColumnMaxWidth + 2 * variables.tableRowPaddingHorizontal;
+    const chevronWidth = linkColumnIndex === undefined ? 0 : variables.htmlTableChevronColumnWidth;
+    const columnsWidth = columnAlignments.length * variables.htmlTableColumnMaxWidth + 2 * variables.tableRowPaddingHorizontal + chevronWidth;
     const contentWidth = Math.max(viewportWidth, columnsWidth);
 
     return (
         <TableColumnAlignmentContext.Provider value={columnAlignments}>
-            <HTMLTableScroll
-                viewportWidth={viewportWidth}
-                contentWidth={contentWidth}
-            >
-                <TableChildrenRenderer tnode={tnode} />
-            </HTMLTableScroll>
+            <TableLinkColumnContext.Provider value={linkColumnIndex}>
+                <HTMLTableScroll
+                    viewportWidth={viewportWidth}
+                    contentWidth={contentWidth}
+                >
+                    <TableChildrenRenderer tnode={tnode} />
+                </HTMLTableScroll>
+            </TableLinkColumnContext.Provider>
         </TableColumnAlignmentContext.Provider>
     );
 }

src/components/HTMLEngineProvider/HTMLRenderers/TableRowLink.ts

@@ -0,0 +1,82 @@
+import type {TNode} from 'react-native-render-html';
+
+import {getElementChildren} from './TableChildrenRenderer';
+
+function getBodyRows(tableTnode: TNode): TNode[] {
+    return getElementChildren(tableTnode)
+        .filter((section) => section.tagName === 'tbody')
+        .flatMap((section) => getElementChildren(section));
+}
+
+function findAnchor(node: TNode): TNode | undefined {
+    if (node.tagName === 'a') {
+        return node;
+    }
+    return (node.children ?? []).reduce<TNode | undefined>((found, child) => found ?? findAnchor(child), undefined);
+}
+
+/**
+ * The single column whose cells hold links, or undefined when the table has no such column.
+ *
+ * Concierge expense tables link one cell per row — the merchant — and that link points at the row's transaction, so
+ * the row as a whole can navigate there. Requiring the links to sit in exactly one column leaves any other table
+ * (no links, or links spread across columns) rendering as a plain table with its own per-cell anchors.
+ */
+function getLinkColumnIndex(tableTnode: TNode): number | undefined {
+    const columnsWithLinks = new Set<number>();
+    for (const row of getBodyRows(tableTnode)) {
+        for (const [columnIndex, cell] of getElementChildren(row).entries()) {
+            if (findAnchor(cell)) {
+                columnsWithLinks.add(columnIndex);
+            }
+        }
+    }
+
+    return columnsWithLinks.size === 1 ? columnsWithLinks.values().next().value : undefined;
+}
+
+/**
+ * Whether an anchor sits in the column whose links make the row navigable, in which case it renders as plain text
+ * instead of a link. The anchor can be nested any number of levels below its cell.
+ */
+function isLinkColumnAnchor(anchorTnode: TNode, linkColumnIndex: number | undefined): boolean {
+    if (linkColumnIndex === undefined) {
+        return false;
+    }
+
+    let cell = anchorTnode.parent;
+    while (cell && cell.tagName !== 'td') {
+        // A cell is never nested in another row, so reaching one means this anchor is not inside a body cell.
+        if (cell.tagName === 'tr') {
+            return false;
+        }
+        cell = cell.parent;
+    }
+
+    const row = cell?.parent;
+    if (!cell || row?.parent?.tagName !== 'tbody') {
+        return false;
+    }
+
+    return getElementChildren(row).indexOf(cell) === linkColumnIndex;
+}
+
+/** The plain text of a node, used to render a link column's cell without any of the anchor's own styling. */
+function getTextContent(node: TNode): string {
+    if ('data' in node && typeof node.data === 'string') {
+        return node.data;
+    }
+    return (node.children ?? []).map(getTextContent).join('');
+}
+
+/** The URL a row navigates to: the href of the link in the table's link column. */
+function getRowLinkURL(rowTnode: TNode, linkColumnIndex: number | undefined): string | undefined {
+    if (linkColumnIndex === undefined || rowTnode.parent?.tagName !== 'tbody') {
+        return undefined;
+    }
+
+    const linkCell = getElementChildren(rowTnode).at(linkColumnIndex);
+    return linkCell ? findAnchor(linkCell)?.attributes?.href : undefined;
+}
+
+export {getLinkColumnIndex, getRowLinkURL, getTextContent, isLinkColumnAnchor};

src/components/HTMLEngineProvider/HTMLRenderers/TableRowRenderer.tsx

@@ -1,10 +1,25 @@
+import Icon from '@components/Icon';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import {showContextMenuForReport, useShowContextMenuActions, useShowContextMenuState} from '@components/ShowContextMenuContext';
+
+import useEnvironment from '@hooks/useEnvironment';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
+import {openLink} from '@libs/actions/Link';
+
+import CONST from '@src/CONST';
+
 import type {CustomRendererProps, TBlock, TNode} from 'react-native-render-html';
 
+import {useContext} from 'react';
 import {View} from 'react-native';
 
 import TableChildrenRenderer, {getElementChildren} from './TableChildrenRenderer';
+import TableLinkColumnContext from './TableLinkColumnContext';
+import {getRowLinkURL} from './TableRowLink';
 
 function isLastRowOfTable(tnode: TNode): boolean {
     const section = tnode.parent;
@@ -19,14 +34,59 @@ function isLastRowOfTable(tnode: TNode): boolean {
 
 function TableRowRenderer({tnode}: CustomRendererProps<TBlock>) {
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+    const {environmentURL} = useEnvironment();
+    const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
+    const {anchor, report, action, originalReportID} = useShowContextMenuState();
+    const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
 
     // Header rows (inside <thead>) use header padding; body rows use the compact min-height.
     const isHeaderRow = tnode.parent?.tagName === 'thead';
+    const linkColumnIndex = useContext(TableLinkColumnContext);
+    const rowLinkURL = getRowLinkURL(tnode, linkColumnIndex);
+
+    const rowStyle = [isHeaderRow ? styles.htmlTableHeaderRow : styles.htmlTableRow, isLastRowOfTable(tnode) && styles.htmlTableLastRow];
+
+    // Every row of a table with a link column reserves the chevron width so the columns stay aligned, but only a row
+    // that actually navigates shows the chevron.
+    const chevron =
+        linkColumnIndex === undefined ? null : (
+            <View style={styles.htmlTableChevronCell}>
+                {!!rowLinkURL && (
+                    <Icon
+                        src={icons.ArrowRight}
+                        fill={theme.icon}
+                        size={CONST.ICON_SIZE.SMALL}
+                    />
+                )}
+            </View>
+        );
+
+    if (!rowLinkURL) {
+        return (
+            <View style={rowStyle}>
+                <TableChildrenRenderer tnode={tnode} />
+                {chevron}
+            </View>
+        );
+    }
 
     return (
-        <View style={[isHeaderRow ? styles.htmlTableHeaderRow : styles.htmlTableRow, isLastRowOfTable(tnode) && styles.htmlTableLastRow]}>
+        <PressableWithoutFeedback
+            style={rowStyle}
+            hoverStyle={styles.htmlTableRowHovered}
+            onPress={() => openLink(rowLinkURL, environmentURL)}
+            onLongPress={(event) => onShowContextMenu(() => showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, originalReportID))}
+            role={CONST.ROLE.BUTTON}
+            accessibilityLabel={translate('iou.viewDetails')}
+            sentryLabel={CONST.SENTRY_LABEL.HTML_RENDERER.TABLE_ROW}
+            shouldUseHapticsOnLongPress
+            isNested
+        >
             <TableChildrenRenderer tnode={tnode} />
-        </View>
+            {chevron}
+        </PressableWithoutFeedback>
     );
 }
 

src/styles/index.ts

@@ -2724,6 +2724,17 @@ const staticStyles = (theme: ThemeColors) =>
             borderBottomWidth: 0,
         },
 
+        // A step past the hover background the surrounding comment uses, so a hovered row stays distinguishable
+        // while the whole comment is also highlighted.
+        htmlTableRowHovered: {
+            backgroundColor: theme.activeComponentBG,
+        },
+
+        htmlTableChevronCell: {
+            width: variables.htmlTableChevronColumnWidth,
+            alignItems: 'flex-end',
+        },
+
         htmlTableCell: {
             // A definite flexBasis with flexShrink: 0 gives every column a fixed width so a wide table keeps its size
             // and can be scrolled horizontally, and columns stay aligned across rows; flexGrow: 1 still lets columns

src/styles/variables.ts

@@ -141,6 +141,7 @@ export default {
     htmlTableHeaderRowMinHeight: 30,
     htmlTableColumnMinWidth: 120,
     htmlTableColumnMaxWidth: 240,
+    htmlTableChevronColumnWidth: 20,
     tableGroupRowPaddingVertical: 4,
     tableGroupRowHeight: 36,
     tableCheckboxColumnWidth: 20,