Migrate domain members list to the new Table component by Krishna2323 · Pull Request #94445 · Expensify/App

Krishna2323 · 2026-06-24T09:56:34Z

Explanation of Change

Fixed Issues

$ #86216
PROPOSAL:

Tests

Open a validated domain with 12+ members and multiple groups → Domain members tab loads the new table (not the verify-domain screen).
Confirm each row shows avatar, name, email, group (if groups exist), and a caret.
Tap a row → member details opens; go back → list is unchanged.
With 12+ members, confirm search (name/email) and column sorting (Member, Group) work.
With 2+ groups, use the group filter dropdown → list filters correctly; All Members restores the full list.
Wide layout: select multiple members → bulk menu appears → test Move to group and Close account flows.
Narrow/mobile: long-press to enter selection mode → select members → back clears selection / exits selection mode in one press.
Confirm Add member, More → Settings, and More → Download CSV still work; pending-delete / optimistic members are not selectable.

Verify that no errors appear in the JS console

Offline tests

Same as tests

QA Steps

Same as tests
Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android_hybrid.mp4

Android: mWeb Chrome

android_mWeb.mp4

iOS: Native

ios_hybrid.mp4

iOS: mWeb Safari

android_mWeb.mp4

MacOS: Chrome / Safari

web_chrome.mp4

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

codecov · 2026-06-24T10:01:40Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`94.11% <ø> (ø)`
src/components/Table/TableHeader.tsx	`95.52% <100.00%> (ø)`
src/hooks/useDomainGroupFilter.ts	`100.00% <100.00%> (ø)`
src/libs/DomainUtils.ts	`100.00% <100.00%> (ø)`
src/pages/domain/BaseDomainMembersPage.tsx	`0.00% <0.00%> (ø)`
src/pages/domain/Members/DomainMembersPage.tsx	`0.00% <0.00%> (ø)`
...ables/DomainMembersTable/DomainMembersTableRow.tsx	`0.00% <0.00%> (ø)`
src/components/Tables/DomainMembersTable/index.tsx	`0.00% <0.00%> (ø)`
... and 15 files with indirect coverage changes

melvin-bot · 2026-06-24T10:24:27Z

@situchan Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1212fc6c52

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-06-24T10:29:09Z

+        if (!shouldShowGroupFilter) {
+            return undefined;


Clear stale group filter when groups disappear

When a user has selected a specific group and Onyx temporarily removes that group (for example during a rollback/refresh or after group edits), returning no filter config here hides the dropdown but does not clear the Table middleware's currentFilters. If the same group ID appears again, the old value is still stored and the members list is silently filtered back to that group; the previous hook explicitly cleared selectedGroup in this scenario to avoid reactivating stale filters.

Useful? React with 👍 / 👎.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

github-actions · 2026-06-24T13:30:58Z

🚧 shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

shawnborton · 2026-06-24T13:49:48Z

Small nit but the mobile header doesn't use 16px of horizontal padding like the mobile rows do:

We should make sure all tables get that update, in case it's a global change we can make.

shawnborton · 2026-06-24T13:51:04Z

I also think we should use the same pattern as Members where we put the Role before the login instead of having two columns:

Basically this:

shawnborton · 2026-06-24T13:51:25Z

Otherwise looks good to me!

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2026-06-24T15:39:02Z

Styles updated:

Krishna2323 · 2026-06-24T15:39:22Z

@situchan this is ready for your review.

luacmartins · 2026-06-24T15:40:33Z

+    shouldShowGroupColumn: boolean;
+};
+
+export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTableLayout, shouldShowGroupColumn}: DomainMembersTableRowProps) {


I think we're missing the brickRoadIndicator on each row, right?

Good catch. I think we should keep the behavior consistent here.

On main, we currently have two ways to surface member errors:

Inline error row — a full error message below the row (e.g., billing owner errors).

Brick road dot — just a red dot on the row, with the actual error shown on the detail page (e.g., vacation delegate / 2FA exempt errors).

I think we should unify this and have all member errors use the table's inline error row, similar to Categories. That way, there's a single, consistent error pattern across the table instead of mixing inline errors and brick road indicators.

What do you think? Should we keep everything consistent with inline error rows, or do you think we should keep the brick road dot for detail-only errors?

cc: @Expensify/design

I'd probably go with however we do it on the main Members table, which I would imagine would be the same as Categories? Curious for others' thoughts too.

Agree with that. I think if we can consistently pull this off:

a full error message below the row

That would be ideal. It's consistent with Spend page too.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

situchan · 2026-06-25T12:36:05Z

+    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;


Bug: The illustrated empty state is gone when a group filter matches no members

production:

Also search input is now on next line. Not same line as group filter dropdown.
Is this approved design?

@Expensify/design, should we show the illustration here, or should we match the other tables and simply display "No results found"?

cc @JS00001 I forget what we decided to do here... I think maybe we decided to do something like:

if table has truly no data, we show a generic empty state encouraging you to create something

if search input returns no data from your search, we use that illustrated empty state above?

JS00001 · 2026-06-25T13:07:57Z

The illustrated empty state is gone when a group filter matches no members

@Krishna2323 @shawnborton can we just keep the 'no results found' changes for now? In this issue: #94059, we're going to standardize the empty states for the tables

shawnborton · 2026-06-25T13:10:28Z

That works for me!

situchan · 2026-06-25T16:31:13Z

Any outstanding comment left? typecheck failing

…table

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2026-06-25T16:44:36Z

Any outstanding comment left? typecheck failing

No outstanding comments, typecheck fixed

luacmartins

LGTM

situchan · 2026-06-25T19:28:54Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

android.mov

Android: mWeb Chrome

iOS: HybridApp

ios.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

web.mov

luacmartins · 2026-06-25T20:15:41Z

@JS00001 all yours

github-actions · 2026-06-26T12:48:46Z

🚧 JS00001 has triggered a test Expensify/App build. You can view the workflow run here.

OSBotify · 2026-06-26T12:53:31Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-06-26T12:54:25Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #94445.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-24de93e424b-27a47d6-06048e2c665b2703fba72549cab52a8fe26622c0/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-24de93e-27a47d6-ee4d785f142bddcbfd4fe470126bb5db5e50b773/index.html

Web 🕸️
https://94445.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-06-26T20:00:57Z

🚀 Deployed to staging by https://github.com/JS00001 in version: 9.4.21-2 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2026-06-29T12:37:43Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.4.21-9 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android

Migrate domain members list to the new Table component

1212fc6

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

melvin-bot Bot assigned Krishna2323 Jun 24, 2026

Krishna2323 marked this pull request as ready for review June 24, 2026 10:24

Krishna2323 requested review from a team as code owners June 24, 2026 10:24

melvin-bot Bot requested review from flaviadefaria and situchan and removed request for a team June 24, 2026 10:24

melvin-bot Bot removed the request for review from a team June 24, 2026 10:24

Krishna2323 mentioned this pull request Jun 24, 2026

[Due for payment 2026-07-06] [$250] [Update Table Styles] Update the domain members table #86216

Closed

chatgpt-codex-connector Bot reviewed Jun 24, 2026

View reviewed changes

github-actions Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread src/hooks/useDomainGroupFilter.ts Outdated

github-actions Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread src/hooks/useDomainGroupFilter.ts Outdated

github-actions Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread src/pages/domain/Members/DomainMembersPage.tsx Outdated

github-actions Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread src/pages/domain/Members/DomainMembersPage.tsx Outdated

Krishna2323 added 3 commits June 24, 2026 16:04

Fix domain members table search bar layout

c8cff09

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Address PR review feedback for domain members table

0bf5ffb

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Restore domain members mobile selection and search back behavior

9a0bda4

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

This comment has been minimized.

Sign in to view

luacmartins self-requested a review June 24, 2026 15:00

Krishna2323 added 2 commits June 24, 2026 20:42

Address domain members table review feedback

c8d9ea8

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix padding when selection mode is active.

a5c4c17

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

luacmartins reviewed Jun 24, 2026

View reviewed changes

Show all domain member errors inline in the table

aae3003

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

situchan reviewed Jun 25, 2026

View reviewed changes

Krishna2323 added 2 commits June 25, 2026 22:07

Merge branch 'Expensify:main' into krishna2323-update-domain-members-…

ce8c04c

…table

fix eslint.

721c011

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

luacmartins approved these changes Jun 25, 2026

View reviewed changes

situchan approved these changes Jun 25, 2026

View reviewed changes

melvin-bot Bot requested review from JS00001 and luacmartins June 25, 2026 20:02

luacmartins approved these changes Jun 25, 2026

View reviewed changes

JS00001 approved these changes Jun 26, 2026

View reviewed changes

JS00001 merged commit 24de93e into Expensify:main Jun 26, 2026
35 of 36 checks passed

OSBotify mentioned this pull request Jun 26, 2026

Deploy Checklist: New Expensify 2026-06-26 #94730

Closed

55 tasks

nyomanjyotisa mentioned this pull request Jul 15, 2026

[$250] Domains - Selection mode from previous group filter persists after applying new group filter #93972

Open

7 tasks

Uh oh!

Conversation

Krishna2323 commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Jun 24, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Jun 24, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 24, 2026

Uh oh!

This comment has been minimized.

shawnborton commented Jun 24, 2026

Uh oh!

shawnborton commented Jun 24, 2026

Uh oh!

shawnborton commented Jun 24, 2026

Uh oh!

Krishna2323 commented Jun 24, 2026

Uh oh!

Krishna2323 commented Jun 24, 2026

Uh oh!

luacmartins Jun 24, 2026

Choose a reason for hiding this comment

Uh oh!

Krishna2323 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

dannymcclain Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shawnborton Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

situchan Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

situchan Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

Krishna2323 Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

shawnborton Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

JS00001 commented Jun 25, 2026

Uh oh!

shawnborton commented Jun 25, 2026

Uh oh!

situchan commented Jun 25, 2026

Uh oh!

Krishna2323 commented Jun 25, 2026

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

situchan commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Krishna2323 commented Jun 24, 2026 •

edited

Loading

codecov Bot commented Jun 24, 2026 •

edited by github-actions Bot

Loading

dannymcclain Jun 25, 2026 •

edited

Loading

situchan commented Jun 25, 2026 •

edited

Loading