Skip to content

Update the domain groups table to the new style #93756

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JS00001 merged 9 commits into from
Jun 19, 2026
Merged

Update the domain groups table to the new style #93756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bc114a3
Add DomainGroupsTableRow for the new table styles.
luacmartins Jun 16, 2026
bc59c52
Add DomainGroupsTable with search, sorting, and column layout.
luacmartins Jun 16, 2026
43b93bc
Migrate DomainGroupsPage to DomainGroupsTable.
luacmartins Jun 16, 2026
733cf5f
Show brick road indicator for domain group detail errors.
luacmartins Jun 16, 2026
fb6ab38
add sentry label
luacmartins Jun 17, 2026
caedff4
Merge branch 'main' into cmartins-domainGroupTable
luacmartins Jun 17, 2026
273d5e5
fix eslint
luacmartins Jun 17, 2026
9a344c8
fix labels
luacmartins Jun 17, 2026
d412d40
address comments
luacmartins Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/CONST/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8776,6 +8776,7 @@ const CONST = {
DOMAIN: {
GROUPS: {
CREATE_GROUP_BUTTON: 'DomainGroups-CreateGroupButton',
ROW: 'DomainGroups-Row',
},
},
},
Expand Down
151 changes: 151 additions & 0 deletions src/components/Tables/DomainGroupsTable/DomainGroupsTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import React from 'react';
import {View} from 'react-native';
import type {ValueOf} from 'type-fest';
import Badge from '@components/Badge';
import Icon from '@components/Icon';
import type {TableData} from '@components/Table';
import Table from '@components/Table';
import Text from '@components/Text';
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 DomainGroupRowData = TableData & {
groupID: string;
name: string;
memberCount: number;
isDefault: boolean;
errors?: OnyxCommon.Errors;
pendingAction?: OnyxCommon.PendingAction;
brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
action: () => void;
dismissError: () => void;
};

type DomainGroupsTableRowProps = {
/** Data about the domain group */
item: DomainGroupRowData;

/** The index of the row relative to all other rows */
rowIndex: number;

/** Whether to use narrow table row layout */
shouldUseNarrowTableLayout: boolean;
};

export default function DomainGroupsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: DomainGroupsTableRowProps) {
const theme = useTheme();
const styles = useThemeStyles();
const {translate} = useLocalize();
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'DotIndicator']);

const memberCountSubtitle = translate('domain.groups.memberCount', {count: item.memberCount});
const accessibilityLabel = [item.name, memberCountSubtitle, item.isDefault ? translate('common.default') : null].filter(Boolean).join(', ');

const brickRoadIndicator = !!item.brickRoadIndicator && (
<Icon
src={icons.DotIndicator}
fill={item.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR ? theme.danger : theme.iconSuccessFill}
/>
);

return (
<Table.Row
interactive
rowIndex={rowIndex}
disabled={item.disabled}
accessibilityLabel={accessibilityLabel}
skeletonReasonAttributes={{context: 'domainGroupsTableRow'}}
offlineWithFeedback={{
errors: item.errors,
pendingAction: item.pendingAction,
onClose: item.dismissError,
}}
sentryLabel={CONST.SENTRY_LABEL.DOMAIN.GROUPS.ROW}
onPress={item.action}
Comment thread
luacmartins marked this conversation as resolved.
Resolved
>
{({hovered}) => (
<>
{shouldUseNarrowTableLayout && (
<View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
<View style={[styles.flex1, styles.gap1]}>
<TextWithTooltip
shouldShowTooltip
text={item.name}
style={styles.optionDisplayName}
/>
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
{item.isDefault && (
<Badge
text={translate('common.default')}
textStyles={styles.textStrong}
badgeStyles={[styles.alignSelfCenter, styles.ml0]}
isCondensed
/>
)}
<Text
numberOfLines={1}
style={[styles.textLabelSupporting, styles.flex1]}
>
{memberCountSubtitle}
</Text>
</View>
</View>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
{brickRoadIndicator}
<Icon
src={icons.ArrowRight}
fill={theme.icon}
additionalStyles={[styles.alignSelfCenter, (!hovered || item.disabled) && styles.opacitySemiTransparent]}
width={variables.iconSizeNormal}
height={variables.iconSizeNormal}
/>
</View>
</View>
)}

{!shouldUseNarrowTableLayout && (
<>
<View style={[styles.flex1, styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
<TextWithTooltip
shouldShowTooltip
text={item.name}
style={[styles.optionDisplayName, styles.flexShrink1]}
/>
{item.isDefault && (
<Badge
text={translate('common.default')}
textStyles={styles.textStrong}
badgeStyles={[styles.alignSelfCenter, styles.ml0]}
/>
)}
</View>

<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text numberOfLines={1}>{memberCountSubtitle}</Text>
</View>

<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap2]}>
{brickRoadIndicator}
<Icon
src={icons.ArrowRight}
fill={theme.icon}
additionalStyles={[styles.alignSelfCenter, (!hovered || item.disabled) && styles.opacitySemiTransparent]}
width={variables.iconSizeNormal}
height={variables.iconSizeNormal}
/>
</View>
</>
)}
</>
)}
</Table.Row>
);
}

export type {DomainGroupRowData};
86 changes: 86 additions & 0 deletions src/components/Tables/DomainGroupsTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import type {ListRenderItemInfo} from '@shopify/flash-list';
import React from 'react';
import type {CompareItemsCallback, IsItemInSearchCallback, TableColumn} from '@components/Table';
import Table from '@components/Table';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import tokenizedSearch from '@libs/tokenizedSearch';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {DomainGroupRowData} from './DomainGroupsTableRow';
import DomainGroupsTableRow from './DomainGroupsTableRow';

type DomainGroupsTableColumnKey = 'name' | 'members' | 'actions';

type DomainGroupsTableProps = {
groups: DomainGroupRowData[];
};

export default function DomainGroupsTable({groups}: DomainGroupsTableProps) {
const {translate, localeCompare} = useLocalize();
const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();

const shouldUseNarrowTableLayout = shouldUseNarrowLayout || isMediumScreenWidth;

const domainGroupsTableColumns: Array<TableColumn<DomainGroupsTableColumnKey>> = [
{
key: 'name',
label: translate('common.name'),
sortable: true,
},
{
key: 'members',
label: translate('common.members'),
sortable: true,
width: variables.domainGroupsTableMembersColumnWidth,
},
{
key: 'actions',
label: '',
sortable: false,
width: variables.domainTableActionColumnWidth,
},
];

const compareTableItems: CompareItemsCallback<DomainGroupRowData, DomainGroupsTableColumnKey> = (item1, item2, activeSorting) => {
const orderMultiplier = activeSorting.order === 'asc' ? 1 : -1;

if (activeSorting.columnKey === 'members') {
return (item1.memberCount - item2.memberCount) * orderMultiplier;
}

return localeCompare(item1.name, item2.name) * orderMultiplier;
};

const isTableItemInSearch: IsItemInSearchCallback<DomainGroupRowData> = (item, searchValue) => {
const results = tokenizedSearch([item], searchValue, (option) => [option.name]);
return results.length > 0;
};

const renderTableItem = ({item, index}: ListRenderItemInfo<DomainGroupRowData>) => (
<DomainGroupsTableRow
item={item}
rowIndex={index}
shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
/>
);

return (
<Table
data={groups}
columns={domainGroupsTableColumns}
renderItem={renderTableItem}
compareItems={compareTableItems}
isItemInSearch={isTableItemInSearch}
initialSortColumn="name"
title={translate('domain.groups.title')}
keyExtractor={(item) => item.keyForList}
>
{groups.length >= CONST.STANDARD_LIST_ITEM_LIMIT && <Table.SearchBar label={translate('domain.groups.findGroup')} />}
<Table.Header />
<Table.Body />
</Table>
);
}

export type {DomainGroupRowData};
Loading
Loading