Migrate domain members list to the new Table component

src/CONST/index.ts

@@ -8860,6 +8860,9 @@ const CONST = {
                 CREATE_GROUP_BUTTON: 'DomainGroups-CreateGroupButton',
                 ROW: 'DomainGroups-Row',
             },
+            MEMBERS: {
+                ROW: 'DomainMembers-Row',
+            },
         },
     },
 

src/components/Table/TableHeader.tsx

@@ -89,7 +89,7 @@ function TableHeader<DataType extends TableData, ColumnKey extends string = stri
         <View
             style={[
                 styles.pv2,
-                styles.ph3,
+                shouldUseNarrowTableLayout && !isSelectionCheckboxVisible ? styles.ph4 : styles.ph3,
                 styles.mh5,
                 styles.highlightBG,
                 styles.borderBottom,

src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import ReportActionAvatars from '@components/ReportActionAvatars';
+import Table from '@components/Table';
+import TextWithTooltip from '@components/TextWithTooltip';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type {DomainMemberRowData} from '.';
+
+type DomainMembersTableRowProps = {
+    /** Data about the domain member */
+    item: DomainMemberRowData;
+
+    /** The index of the row relative to all other rows */
+    rowIndex: number;
+
+    /** Whether to use narrow table row layout */
+    shouldUseNarrowTableLayout: boolean;
+
+    /** Whether the group column should be shown */
+    shouldShowGroupColumn: boolean;
+};
+
+export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTableLayout, shouldShowGroupColumn}: DomainMembersTableRowProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const styleUtils = useStyleUtils();
+    const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
+
+    const avatarSize = shouldUseNarrowTableLayout ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.SMALL;
+    const shouldShowGroupInColumn = shouldShowGroupColumn && !shouldUseNarrowTableLayout;
+    let memberSubtitle = item.email;
+    if (shouldUseNarrowTableLayout && shouldShowGroupColumn) {
+        memberSubtitle = `${item.groupName} • ${item.email}`;
+    }
+    const accessibilityLabel = [item.name, shouldShowGroupColumn ? item.groupName : null, item.email].filter(Boolean).join(', ');
+
+    const getSecondaryAvatarContainerStyle = (hovered: boolean) => [
+        styleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+        hovered ? styleUtils.getBackgroundAndBorderStyle(styles.sidebarLinkHover?.backgroundColor ?? theme.sidebar) : undefined,
+    ];
+
+    return (
+        <Table.Row
+            interactive
+            rowIndex={rowIndex}
+            disabled={item.disabled}
+            accessibilityLabel={accessibilityLabel}
+            skeletonReasonAttributes={{context: 'domainMembersTableRow'}}
+            sentryLabel={CONST.SENTRY_LABEL.DOMAIN.MEMBERS.ROW}
+            offlineWithFeedback={{
+                errors: item.errors,
+                pendingAction: item.pendingAction,
+                onClose: item.dismissError,
+            }}
+            onPress={item.action}
+        >
+            {({hovered}) => (
+                <>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                        <ReportActionAvatars
+                            size={avatarSize}
+                            accountIDs={[item.accountID]}
+                            fallbackDisplayName={item.name}
+                            shouldShowTooltip
+                            secondaryAvatarContainerStyle={getSecondaryAvatarContainerStyle(!!hovered)}
+                        />
+                        <View style={[shouldUseNarrowTableLayout && styles.gap1, styles.flex1]}>
+                            <TextWithTooltip
+                                shouldShowTooltip
+                                text={item.name}
+                                style={[styles.optionDisplayName, styles.pre]}
+                                numberOfLines={1}
+                            />
+                            <TextWithTooltip
+                                shouldShowTooltip
+                                text={memberSubtitle}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                numberOfLines={1}
+                            />
+                        </View>
+                    </View>
+
+                    {shouldShowGroupInColumn && (
+                        <View style={[styles.justifyContentCenter, styles.flex1]}>
+                            <TextWithTooltip
+                                shouldShowTooltip
+                                numberOfLines={1}
+                                text={item.groupName}
+                                style={[styles.lh16, styles.optionDisplayName, styles.pre]}
+                            />
+                        </View>
+                    )}
+
+                    <Icon
+                        src={icons.ArrowRight}
+                        fill={theme.icon}
+                        additionalStyles={[styles.justifyContentCenter, styles.alignItemsCenter, (!hovered || item.disabled) && styles.opacitySemiTransparent]}
+                        width={variables.iconSizeNormal}
+                        height={variables.iconSizeNormal}
+                    />
+                </>
+            )}
+        </Table.Row>
+    );
+}

src/components/Tables/DomainMembersTable/index.tsx

@@ -0,0 +1,174 @@
+import type {ListRenderItemInfo} from '@shopify/flash-list';
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import type {CompareItemsCallback, FilterConfig, IsItemInFilterCallback, IsItemInSearchCallback, TableColumn, TableData} from '@components/Table';
+import Table from '@components/Table';
+import {useTableContext} from '@components/Table/TableContext';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import tokenizedSearch from '@libs/tokenizedSearch';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
+import DomainMembersTableRow from './DomainMembersTableRow';
+
+type DomainMembersTableColumnKey = 'member' | 'group' | 'actions';
+type DomainMembersTableFilterKey = 'group';
+
+type DomainMemberRowData = TableData & {
+    accountID: number;
+    login: string;
+    name: string;
+    email: string;
+    groupName: string;
+    errors?: OnyxCommon.Errors;
+    pendingAction?: OnyxCommon.PendingAction;
+    action: () => void;
+    dismissError: () => void;
+};
+
+type DomainMembersTableProps = {
+    members: DomainMemberRowData[];
+    selectionEnabled: boolean;
+    selectedKeys: string[];
+    onRowSelectionChange: (selectedRowKeys: string[]) => void;
+    shouldShowGroupColumn: boolean;
+    filterConfig?: FilterConfig<DomainMembersTableFilterKey>;
+    isItemInFilter?: IsItemInFilterCallback<DomainMemberRowData>;
+    EmptyStateComponent: React.ReactElement;
+};
+
+const ALL_MEMBERS_VALUE = 'all';
+
+/**
+ * Clears stale group filter values when the filter is hidden or the selected group disappears from Onyx.
+ */
+function DomainMembersGroupFilterSync({shouldShowGroupFilter, groupOptionValuesKey}: {shouldShowGroupFilter: boolean; groupOptionValuesKey: string}) {
+    const {activeFilters, tableMethods} = useTableContext<DomainMemberRowData, DomainMembersTableColumnKey>();
+    const groupFilterValue = activeFilters.group;
+
+    useEffect(() => {
+        const activeGroupFilter = typeof groupFilterValue === 'string' ? groupFilterValue : undefined;
+        const groupOptionValues = groupOptionValuesKey ? groupOptionValuesKey.split(',') : [];
+
+        if (!shouldShowGroupFilter) {
+            if (activeGroupFilter && activeGroupFilter !== ALL_MEMBERS_VALUE) {
+                tableMethods.updateFilter({key: 'group', value: ALL_MEMBERS_VALUE});
+            }
+            return;
+        }
+
+        if (activeGroupFilter && activeGroupFilter !== ALL_MEMBERS_VALUE && !groupOptionValues.includes(activeGroupFilter)) {
+            tableMethods.updateFilter({key: 'group', value: ALL_MEMBERS_VALUE});
+        }
+    }, [shouldShowGroupFilter, groupOptionValuesKey, groupFilterValue, tableMethods]);
+
+    return null;
+}
+
+export default function DomainMembersTable({
+    members,
+    selectionEnabled,
+    selectedKeys,
+    onRowSelectionChange,
+    shouldShowGroupColumn,
+    filterConfig,
+    isItemInFilter,
+    EmptyStateComponent,
+}: DomainMembersTableProps) {
+    const styles = useThemeStyles();
+    const {translate, localeCompare} = useLocalize();
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+
+    const shouldUseNarrowTableLayout = shouldUseNarrowLayout || isMediumScreenWidth;
+    const shouldShowSearchBar = members.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
+    const shouldShowGroupFilter = !!filterConfig;
+    const groupOptionValuesKey = filterConfig?.group.options.map((option) => option.value).join(',') ?? '';
+    const isEmpty = members.length === 0;
+
+    const domainMembersTableColumns: Array<TableColumn<DomainMembersTableColumnKey>> = [
+        {
+            key: 'member',
+            label: translate('domain.members.title'),
+            sortable: true,
+        },
+        ...(shouldShowGroupColumn
+            ? [
+                  {
+                      key: 'group' as const,
+                      label: translate('common.group'),
+                      sortable: true,
+                  },
+              ]
+            : []),
+        {
+            key: 'actions',
+            label: '',
+            sortable: false,
+            width: variables.tableCaretColumnWidth,
+        },
+    ];
+
+    const compareTableItems: CompareItemsCallback<DomainMemberRowData> = (item1, item2, activeSorting) => {
+        const orderMultiplier = activeSorting.order === 'asc' ? 1 : -1;
+
+        if (activeSorting.columnKey === 'group') {
+            return localeCompare(item1.groupName, item2.groupName) * orderMultiplier;
+        }
+
+        return localeCompare(item1.name, item2.name) * orderMultiplier;
+    };
+
+    const isTableItemInSearch: IsItemInSearchCallback<DomainMemberRowData> = (item, searchValue) => {
+        const results = tokenizedSearch([item], searchValue, (option) => [option.name, option.email]);
+        return results.length > 0;
+    };
+
+    const renderTableItem = ({item, index}: ListRenderItemInfo<DomainMemberRowData>) => (
+        <DomainMembersTableRow
+            item={item}
+            rowIndex={index}
+            shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
+            shouldShowGroupColumn={shouldShowGroupColumn}
+        />
+    );
+
+    return (
+        <Table
+            data={members}
+            columns={domainMembersTableColumns}
+            renderItem={renderTableItem}
+            compareItems={compareTableItems}
+            isItemInSearch={isTableItemInSearch}
+            initialSortColumn="member"
+            title={translate('domain.members.title')}
+            keyExtractor={(item) => item.keyForList}
+            selectionEnabled={selectionEnabled}
+            selectedKeys={selectedKeys}
+            onRowSelectionChange={onRowSelectionChange}
+            filters={filterConfig}
+            isItemInFilter={isItemInFilter}
+        >
+            {isEmpty && EmptyStateComponent}
+            {!isEmpty && (
+                <>
+                    <DomainMembersGroupFilterSync
+                        shouldShowGroupFilter={shouldShowGroupFilter}
+                        groupOptionValuesKey={groupOptionValuesKey}
+                    />
+                    {shouldShowGroupFilter && (
+                        <View style={[styles.mh5, styles.mb3]}>
+                            <Table.FilterButtons />
+                        </View>
+                    )}
+                    {shouldShowSearchBar && <Table.SearchBar label={translate('domain.members.findMember')} />}
+                    <Table.Header />
+                    <Table.Body />
+                </>
+            )}
+        </Table>
+    );
+}
+
+export type {DomainMemberRowData, DomainMembersTableColumnKey, DomainMembersTableFilterKey};