-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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.
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
[No QA][Search v1] Create ReportListItem #42410
[No QA][Search v1] Create ReportListItem #42410
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In general the code looks good and it was easy to read. Good job 👍
I left you comments but most of them are minor codestyle comments, and 1 bigger thing to see whether we can use existing Checkbox
component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the changes look good. Great job 👍
Is this ready for review? |
@abdulrahuman5196 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] |
Nvm, just went ahead and marked it as ready given that it was already approved by @Kicu and the screenshots looked good. @abdulrahuman5196 please review this once you get a chance |
Also I ran a test build but I have a feeling we can't view these styles via a test build because it requires commenting out some code... any other way to easily test? |
Hi @luacmartins I already have couple of overdue issues to look at, don't want to cause delay here. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good. Left a few comments though.
@DylanDylann are you actively working on reviewing this one as a priority? Thanks! |
@trjExpensify I am requesting the access to docs #39878 (comment) |
Access granted |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / SafariMacOS: Desktop |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
@@ -93,7 +100,9 @@ function Search({query, policyIDs}: SearchProps) { | |||
ListItem={ListItem} | |||
sections={[{data, isDisabled: false}]} | |||
onSelectRow={(item) => { | |||
openReport(item.transactionThreadReportID); | |||
const reportID = isReportListItemType(item) ? item.reportID : item.transactionThreadReportID; | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove this empty line
@@ -93,7 +100,9 @@ function Search({query, policyIDs}: SearchProps) { | |||
ListItem={ListItem} | |||
sections={[{data, isDisabled: false}]} | |||
onSelectRow={(item) => { | |||
openReport(item.transactionThreadReportID); | |||
const reportID = isReportListItemType(item) ? item.reportID : item.transactionThreadReportID; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we use SearchUtils.getSearchType(searchResults?.search);
instead of introducing a new function
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This type guard allows to check the type of the item, and then we can use a specific item field to open the report. SearchUtils.getSearchType(searchResults?.search);
won't determine an exact type of the item.
|
||
const actionCell = ( | ||
<Button | ||
text={translate('common.view')} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For now the only option is view
, but I agree that we should be getting that from the API results.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have started to work on this a while ago and was explicitly told to wait, and the task is on HOLD
so it should stay View
for now.
We can fix buttons in a dedicated PR - I have a WIP draft open
<ExpenseItemHeaderNarrow | ||
participantFrom={participantFrom} | ||
participantTo={participantTo} | ||
buttonText={translate('common.view')} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same above
@@ -21,8 +21,8 @@ type SearchPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SC | |||
function SearchPage({route}: SearchPageProps) { | |||
const {translate} = useLocalize(); | |||
const {isSmallScreenWidth} = useWindowDimensions(); | |||
const currentQuery = route?.params && 'query' in route.params ? route?.params?.query : ''; | |||
const policyIDs = route?.params && 'policyIDs' in route.params ? route?.params?.policyIDs : undefined; | |||
const currentQuery = route?.params?.query; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
route?.params?.query ?? ''
|
||
const openReportInRHP = (transactionItem: TransactionListItemType) => { | ||
const searchParams = getSearchParams(); | ||
const currentQuery = searchParams && `query` in searchParams ? (searchParams?.query as string) : CONST.TAB_SEARCH.ALL; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should use optional chaining instead of query in searchParams
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should pass query
props from src/components/Search.tsx instead of using a new function getSearchParams
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getSearchParams
has been added to avoid prop drilling, this change would require passing the same value to all items in the list and would introduce many changes.
@WojtekBoman There are some comments. Should we address these comments in a new PR? cc @luacmartins |
I will complete the checklist in new PR |
🚀 Deployed to staging by https://github.com/luacmartins in version: 1.4.77-0 🚀
|
Thanks @DylanDylann! @WojtekBoman let's address the comments above while we work on #42720. I added links to that issue. |
🚀 Deployed to production by https://github.com/puneetlath in version: 1.4.77-11 🚀
|
🚀 Deployed to production by https://github.com/puneetlath in version: 1.4.77-11 🚀
|
Details
This PR introduces a new component: ReportListItem. It was implemented according to the description in the design doc: https://docs.google.com/document/d/1ldZ85fyQO4662hLZRNFfm0_IxaP7-PWvaqc8Z33jsLQ/edit#bookmark=kix.oynw4hp8cwx5
Fixed Issues
$ #39878
PROPOSAL:
Tests
data
variable with:in
src/components/Search.tsx
.3. Return
'report';
in thegetSearchType
function in thesrc/libs/SearchUtils.ts
file.4. Open and log in to the app.
5. Open the Account Settings.
6. Open the Troubleshoot tab.
7. Navigate to the Search Page.
8. Verify that the
ReportListItem
is displayed correctly.Offline tests
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop