-
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
display the not found page when attachment is deleted. #23143
Conversation
@mananjadhav 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] |
@@ -310,7 +325,7 @@ function AttachmentModal(props) { | |||
<HeaderWithBackButton | |||
title={props.headerTitle || props.translate('common.attachment')} | |||
shouldShowBorderBottom | |||
shouldShowDownloadButton={props.allowDownload} | |||
shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton} |
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 am wondering if this can be just replaced with state
, and props.allowDownload
can be used in the useCallback?
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 using props.allowDownload
in useCallback
dependencies will trigger change definition for method setDownloadButtonVisibility
not shouldShowDownloadButton
value.
but we can use it in useEffect.
const [shouldShowDownloadButton, setShouldShowDownloadButton] = React.useState(props.allowDownload);
useEffect(() => {
if (shouldShowDownloadButton === props.allowDownload) {
return;
}
setShouldShowDownloadButton(props.allowDownload);
}, [props.allowDownload]);
what do you think? @mananjadhav
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 can ignore this change.
@ahmedGaber93 I've raised comment on the method name and about the prop usage. |
@mananjadhav I've pushed a commit that change the method name, and I replied about "the prop usage" and waiting your decision. |
@ahmedGaber93 Two quick things:
ios-link-crash.mov |
@ahmedGaber93 Also for a valid attachment I can see the blocking view page on mobile web and apps. ios-error-page.mov |
I test it in main branch and I found deeplink attachment also not work in main branch and the app crashed, so it seems not related to this fix. i think we may need to open new issue for it "attachment deep link not work in native" the issue is when we try getting the current page in AttachmentCarousel we get it by matching attachment source.
the attachment source is different between native (with domain) and web (without domain), and when we use deeplink we pass web link which not work in native (see the explanation below) the function
this is the logs for prop.source
after following the Line 23 in 041d640
the fixmy proposal is to apply
we need to add it to // const page = _.findIndex(attachments, (a) => a.source === this.props.source);
const source = tryResolveUrlFromApiRoot(this.props.source);
const page = _.findIndex(attachments, (a) => a.source === source); result Screen.Recording.2023-07-21.at.5.37.59.PM.mov |
@marcochavezf Should we create a new issue here? or double the bounty here and resolve it here? |
Reviewer Checklist
Screenshots/VideosWebweb-deleted-attachment.movweb-deep-link-attachment.movMobile Web - Chromemweb-chrome-deleted-attachment.movmweb-chrome-deep-link-attachment.movMobile Web - Safarimweb-safari-deleted-attachment.movmweb-safari-deep-link-attachment.movDesktopdesktop-deleted-attachment.movdesktop-deep-link-attachment.moviOSios-deleted-attachment.movios-deep-link-attachment.movAndroidandroid-deleted-attachment.movandroid-deep-link-attachment.mov |
I've completed the checklist just in case we plan to create a separate issue, but considering it's broken and we have the likely fix, I think we should just resolve in this issue. |
@marcochavezf Quick bump on the previous comments. |
@mananjadhav @ahmedGaber93 let's resolve the deep link problem in this issue please |
@mananjadhav are you accept this fix #23143 (comment)? |
@ahmedGaber93 Yes about adding the |
yes, right. |
@mananjadhav I've pushed the commit and update Tests step and videos. |
Thanks give me a day I'll go through this and do the QA. |
@marcochavezf I've updated the checklist with the new screenshots in the same #23143 (comment) 🎀 👀 🎀 C+ reviewed |
Hi @mananjadhav, let me know when the tests are done for a final review 👍🏽 |
I had some struggle with my Android builds, but it got working yesterday. I'll be done for sure today. @marcochavezf I see you've requested changes, is there anything pending on the changes front? I don't see any comments pending. |
Nope, nothing pending, all the changes I requested were already addressed |
Reviewer Checklist
Screenshots/VideosWebweb-deleted-attachment.movMobile Web - Chromemweb-chrome-deleted-attachment.movMobile Web - Safarimweb-safari-deleted-attachment.movDesktopdesktop-deleted-attachment.moviOSios-deleted-attachment.movAndroidandroid-deleted-attachment.mov |
@marcochavezf I've updated the checklist with the new screencasts. @ahmedGaber93 Can you confirm if we keep continuously opening the deep links back to back does it result into any error? |
@mananjadhav sorry, I did not understand clearly what you are asking. |
@ahmedGaber93 Here's the test case.
Ensure it opens the valid state in the modal every time. |
@mananjadhav This just a short video as GitHub file's size limitation Screen.Recording.2023-08-16.at.11.11.58.PM.mov |
Okay apologies, I should've corrected myself. I am done from my end. I've also tested the back to back screens, but one of my chat results into Maximum JS depth. It does on the main as well, wanted to check if you face the same. @marcochavezf All yours. 🎀 👀 🎀 C+ Reviewed. |
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.
Thanks guys, 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. |
@marcochavezf "Hmm... it's not here" displayed when attempting to open an image using its URL https://expensify.slack.com/archives/C049HHMV9SM/p1692302960249539 screen-recording-2023-08-18-at-10333-am_kVGRsPUb.mp4 |
@ayazhussain79 Could you help us with the reproduction steps? Because I can't reproduce this. I had explicitly tested this case, attaching the video here again. @ahmedGaber93 Are you able to reproduce the above bug? web-attachment-link-click.mov |
@mananjadhav // not complete link open in the same tab when click the attachment link
http://localhost:8082/r/592589459564169/attachment
// the complete link should be
http://localhost:8082/r/592589459564169/attachment?source=/chat-attachments/2323255261707990908/w_27c02e267d4a31ceb507e27614174b78309fd003.png |
@mananjadhav Idk why i can still reproduce it:
|
@mananjadhav App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js Lines 54 to 57 in a6fa52d
|
Thanks for finding the PR @ahmedGaber93. Can you comment it on the PR? |
@mananjadhav yes, I will do. |
@mananjadhav @ahmedGaber93 when clicking on deleted image url "notFound.goBackHome" is not showing in correct way it should be "Go back to Home page" is this issue caused by this PR? its was not displaying before |
@ayazhussain79 it is not related to this PR, but it related to #25164 |
@ahmedGaber93 Ok thank you |
🚀 Deployed to staging by https://github.com/marcochavezf in version: 1.3.56-0 🚀
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀
|
@@ -342,9 +354,10 @@ function AttachmentModal(props) { | |||
<AttachmentCarousel | |||
report={props.report} | |||
onNavigate={onNavigate} | |||
source={props.source} | |||
source={tryResolveUrlFromApiRoot(props.source)} |
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.
@ahmedGaber93 Can you please help explain why do we need to use tryResolveUrlFromApiRoot here? Thanks
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.
@tienifr
We decide here #23143 (comment) to used it, and here #23143 (comment) to move it in this place.
Details
Fixed Issues
$ #22261
PROPOSAL: #22261 (comment), #23143 (comment), #22261 (comment)
Tests
1- Open the app and login with user A and user B from different browsers.
2- Start chat between user A and user B.
3- From user A send an attachment in the chat.
4- From user B open the attachment in preview, and copy the URL.
5- From user A delete the attachment and Verify the user B attachment preview is dissmised.
6- Open the URL and Verify that the app displays 'Hmm its not here' page and doesn't crash.
Offline tests
N/A.
QA Steps
Same as Tests step.
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)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)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
Web
Screen.Recording.2023-08-05.at.10.20.34.PM.mov
Screen.Recording.2023-07-19.at.12.03.13.AM.mov
Screen.Recording.2023-07-25.at.5.16.12.PM.mov
Mobile Web - Chrome
Screen.Recording.2023-08-05.at.9.53.00.PM.mov
Screen.Recording.2023-07-19.at.1.07.42.AM.mov
Screen.Recording.2023-07-25.at.5.15.01.PM.mov
Mobile Web - Safari
Screen.Recording.2023-08-05.at.9.47.52.PM.mov
Screen.Recording.2023-07-19.at.12.28.49.AM.mov
Screen.Recording.2023-07-25.at.5.10.46.PM.mov
Desktop
Screen.Recording.2023-08-05.at.2.10.35.AM.mov
Screen.Recording.2023-07-21.at.10.40.41.PM.mov
Screen.Recording.2023-07-25.at.5.05.53.PM.mov
iOS
Screen.Recording.2023-08-04.at.7.23.05.PM.mov
Screen.Recording.2023-07-21.at.10.20.33.PM.mov
Screen.Recording.2023-07-25.at.3.41.34.PM.mov
Android
Screen.Recording.2023-08-05.at.6.30.43.PM.mov
Screen.Recording.2023-07-21.at.10.35.54.PM.mov
Screen.Recording.2023-07-25.at.4.48.56.PM.mov