-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
[TS migration] Migrate 'ReportActionItemImage' component to TypeScript #34605
[TS migration] Migrate 'ReportActionItemImage' component to TypeScript #34605
Conversation
@@ -19,6 +19,7 @@ const ORIGIN_PATTERN = new RegExp(`^(${ORIGINS_TO_REPLACE.join('|')})`); | |||
*/ | |||
function tryResolveUrlFromApiRoot(url: string): string; | |||
function tryResolveUrlFromApiRoot(url: number): number; | |||
function tryResolveUrlFromApiRoot(url: string | number): string | number; |
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 shouldn't be necessary 🤔 This is already defined under:
function tryResolveUrlFromApiRoot(url: string | number): string | number {
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.
Do you have a better solution to
The call would have succeeded against this implementation, but implementation signatures of overloads are not externally visible.
remove it and you will see it in ReportActionItemImage.tsx
looks like implementation signatures are not visible externally
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 this is our best bet:
/**
* When possible this function resolve URLs relative to API ROOT
* - Absolute URLs like `/{path}`, become: `https://{API_ROOT}/{path}`
* - Similarly for prod or staging URLs we replace the `https://www.expensify`
* or `https://staging.expensify` part, with `https://{API_ROOT}`
* - Unmatched URLs (non expensify) are returned with no modifications
*/
function tryResolveUrlFromApiRoot(url: string | number): string | number {
// in native, when we import an image asset, it will have a number representation which can be used in `source` of Image
// in this case we can skip the url resolving
if (typeof url === 'number') {
return url;
}
const apiRoot = ApiUtils.getApiRoot({shouldUseSecure: false} as Request);
return url.replace(ORIGIN_PATTERN, apiRoot);
}
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.
You suggesting removing the overload signatures?? I mean there is an advantage to the overloads as it will enforce number
return when the argument type is number
and same for string
too
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.
What is the point of overloading if you need to add this? 😅
function tryResolveUrlFromApiRoot(url: string | number): string | number;
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.
When the parameter is number
we will know that the return will be number
(same for string
) but when it is string | number
we will have string | number
return type that's the point! 👍
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.
Thank you for explanation, I thought it worked a bit differently 👍
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.
LGTM
Reviewer Checklist
Screenshots/VideosAndroid: NativereportActionImageAndroidNative.movAndroid: mWeb ChromereportActionImageAndroidChrome-compressed.mp4iOS: NativereportActionImageiOSNative.mp4iOS: mWeb SafarireportActionImageiOSSafari.mp4MacOS: Chrome / SafarireportActionImageChrome.mp4MacOS: DesktopreportActionImageDesktop.mp4 |
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.
LGTM
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/cristipaval in version: 1.4.29-0 🚀
|
🚀 Deployed to staging by https://github.com/cristipaval in version: 1.4.29-0 🚀
|
🚀 Deployed to production by https://github.com/thienlnam in version: 1.4.29-1 🚀
|
Details
once #25130 is merged we should remove the typescript suppress comment
Fixed Issues
$ #31969
PROPOSAL:
Tests
Offline tests
same
QA Steps
same
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label 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
andr.web.mp4
iOS: Native
ios.native.mp4
iOS: mWeb Safari
ios.web.mp4
MacOS: Chrome / Safari
web.mp4
MacOS: Desktop
des.mp4