[CP Staging] Fix text input label in SelectionScreen#79484
[CP Staging] Fix text input label in SelectionScreen#79484grgia merged 2 commits intoExpensify:mainfrom
SelectionScreen#79484Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
melvin-bot
bot
requested review from
abzokhattab and
heyjennahay
and removed request for
a team
|
@abzokhattab 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] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| textInputLabel={translate('common.search')} | ||
| textInputValue={searchText} | ||
| onChangeText={setSearchText} | ||
| textInputOptions={{ |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The textInputOptions object is created inline on every render. Since WorkspaceCompanyCardAccountSelectCardPage is not optimized by React Compiler and SelectionScreen is optimized, this new object reference prevents React from skipping re-renders of SelectionScreen.
Suggested fix:
const textInputOptions = useMemo(
() => ({
label: translate('common.search'),
value: searchText,
onChangeText: setSearchText,
}),
[translate, searchText],
);
| /> | ||
| ), | ||
| [translate, currentConnectionName, styles, illustrations.Telescope], | ||
| const listEmptyContent = ( |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The listEmptyContent JSX element should remain memoized with useMemo. Since WorkspaceCompanyCardAccountSelectCardPage is not optimized by React Compiler and SelectionScreen is optimized, creating a new JSX element reference on every render prevents React from skipping re-renders of SelectionScreen.
Suggested fix:
Revert this change and keep the useMemo wrapper:
const listEmptyContent = useMemo(
() => (
<BlockingView
icon={illustrations.Telescope}
iconWidth={variables.emptyListIconWidth}
iconHeight={variables.emptyListIconHeight}
title={translate('workspace.moreFeatures.companyCards.noAccountsFound')}
subtitle={currentConnectionName ? translate('workspace.moreFeatures.companyCards.noAccountsFoundDescription', currentConnectionName) : undefined}
containerStyle={styles.pb10}
/>
),
[translate, currentConnectionName, styles, illustrations.Telescope],
);
| const isDefaultSelected = value === defaultCard || value === defaultVendor; | ||
| const exportValue = isDefaultSelected ? CONST.COMPANY_CARDS.DEFAULT_EXPORT_TYPE : value; | ||
| setCompanyCardExportAccount(policyID, domainOrWorkspaceAccountID, cardID, exportMenuItem.exportType, exportValue, getCompanyCardFeed(feed)); | ||
| const updateExportAccount = ({value}: SelectorType) => { |
There was a problem hiding this comment.
❌ PERF-4 (docs)
The updateExportAccount function should remain wrapped in useCallback. Since WorkspaceCompanyCardAccountSelectCardPage is not optimized by React Compiler and SelectionScreen is optimized, creating a new function reference on every render prevents React from skipping re-renders of SelectionScreen.
Suggested fix:
Revert this change and keep the useCallback wrapper:
const updateExportAccount = useCallback(
({value}: SelectorType) => {
if (\!exportMenuItem?.exportType) {
return;
}
const isDefaultSelected = value === defaultCard || value === defaultVendor;
const exportValue = isDefaultSelected ? CONST.COMPANY_CARDS.DEFAULT_EXPORT_TYPE : value;
setCompanyCardExportAccount(policyID, domainOrWorkspaceAccountID, cardID, exportMenuItem.exportType, exportValue, getCompanyCardFeed(feed));
Navigation.goBack(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feed, cardID, backTo));
},
[exportMenuItem?.exportType, domainOrWorkspaceAccountID, cardID, policyID, feed, defaultCard, defaultVendor, backTo],
);
|
should i review this one ? cc @grgia |
grgia
left a comment
grgia
left a comment
There was a problem hiding this comment.
Running test build.
I'll have QA test @abzokhattab, thanks!
|
🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here. |
grgia
changed the title
SelectionScreenSelectionScreen
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
…rch-label [CP Staging] Fix text input label in `SelectionScreen` (cherry picked from commit 3f3ab3c) (cherry-picked to staging by francoisl)
|
🚀 Cherry-picked to staging by https://github.com/francoisl in version: 9.3.0-3 🚀
|
|
🚀 Deployed to production by https://github.com/francoisl in version: 9.3.0-8 🚀
|
|
🚀 Cherry-picked to staging by https://github.com/francoisl in version: 9.3.1-0 🚀
|
|
🚀 Deployed to production by https://github.com/francoisl in version: 9.3.1-1 🚀
|
4 participants
Explanation of Change
Fixed Issues
$ #79458
PROPOSAL:
Tests
Precondition:
Offline tests
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari