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

Open
luacmartins wants to merge 4 commits into
base: main
Choose a base branch
from
+263 −92
Open

Update the domain groups table to the new style #93756

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
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
146 changes: 146 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,146 @@
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,
}}
onPress={item.action}

@Krishna2323 Krishna2323 Jun 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sentryLabel is missing. Otherwise, this PR is straightforward and clean.

>
{({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}
/>
<Text
numberOfLines={1}
style={styles.textLabelSupporting}
>
{memberCountSubtitle}
</Text>
</View>
{item.isDefault && (
<Badge
text={translate('common.default')}
badgeStyles={styles.ml0}
isCondensed
/>
)}
<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.alignItemsCenter]}>
<TextWithTooltip
shouldShowTooltip
text={item.name}
style={[styles.optionDisplayName, styles.flexShrink1]}
/>
</View>

<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.gap3]}>
<Text numberOfLines={1}>{memberCountSubtitle}</Text>
{item.isDefault && (
<Badge
text={translate('common.default')}
badgeStyles={styles.ml0}
/>
)}
</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};
90 changes: 90 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,90 @@
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 useThemeStyles from '@hooks/useThemeStyles';
import tokenizedSearch from '@libs/tokenizedSearch';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import DomainGroupsTableRow, {type DomainGroupRowData} from './DomainGroupsTableRow';

Check failure on line 11 in src/components/Tables/DomainGroupsTable/index.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

Prefer using a top-level type-only import instead of inline type specifiers

Check failure on line 11 in src/components/Tables/DomainGroupsTable/index.tsx

View workflow job for this annotation

GitHub Actions / ESLint check 

Prefer using a top-level type-only import instead of inline type specifiers

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

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

export default function DomainGroupsTable({groups}: DomainGroupsTableProps) {
const styles = useThemeStyles();
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,
styling: {
containerStyles: [styles.justifyContentEnd, styles.pr3],
},
},
];

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