-
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
fix: offline deleted heading styles and link padding #19545
fix: offline deleted heading styles and link padding #19545
Conversation
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
I have read the CLA Document and I hereby sign the CLA |
onPressIn={this.props.onPressIn} | ||
onLongPress={this.props.onSecondaryInteraction ? this.executeSecondaryInteraction : undefined} | ||
onPressOut={this.props.onPressOut} | ||
onPress={this.props.onPress} | ||
ref={(el) => (this.pressableRef = el)} | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
{...defaultPressableProps} | ||
style={StyleUtils.combineStyles(this.props.style, this.props.inline && styles.dInline)} |
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.
added this at the end, since defaultPressableProps
were overwriting the style
prop when it was in the first line as defaultPressableProps
have this.props.style
as one of the keys. Here, we add display inline to default props, if inline
is true.
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.
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.
@mollfpr both fixed. I was not handling function type style props. Updated the PR.
@@ -48,6 +48,7 @@ const BaseAnchorForCommentsOnly = (props) => { | |||
return ( | |||
<PressableWithSecondaryInteraction | |||
inline | |||
style={[styles.cursorDefault, {fontSize: props.style.fontSize}]} |
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.
not setting display
to inline
here as it will pass the style to the native component as well which doesn't support the inline
value.
// child elements to be block elements even when they have display inline added to them. | ||
// This will affect elements like <a> which are inline by default. | ||
style: [styles.dBlock, styles.userSelectText], | ||
style: [styles.userSelectText], |
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 see we are reverting to this change. But where are we fixing the original issue the change was fixing?
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.
By passing the cursorDefault
style in PressableWithSecondaryInteraction
in BaseAnchorForCommentsOnly
.
@@ -48,6 +48,7 @@ const BaseAnchorForCommentsOnly = (props) => { | |||
return ( | |||
<PressableWithSecondaryInteraction | |||
inline | |||
style={[styles.cursorDefault, {fontSize: props.style.fontSize}]} |
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 will not solve #16526 completely. It also creates bugs. You will find more details on the issue discussion. I don't remember.
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 tested all three issues and they were fixed on the respective platforms. I will go through the issue discussion on #16526 and check if there are any bugs.
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.
@parasharrajat I have read through your concerns on #16526 and tested out all kinds of message types - Attachments (with and without previews), and various markdown types like header, italic, bold, quote, code, code blocks, links, email comments etc. and it works as expected.
BaseAnchorForCommentsOnly
is used only for rendering messages. Feel free to let me know if I missed anything or if you want me to test any particular use case/issue more.
@Nikhil-Vats Sorry I didn't get the time to test this, but I'll try to complete the review in the morning. |
@Nikhil-Vats Is this expected in iOS to open the link when clicking on the space? Also, the emoji got cut out in this PR but not in the latest main. |
@mollfpr The links on iOS do open when we click on the space. This happens on the prod app and the main branch as well. The link padding/click issues that this PR is supposed to fix are only for the web environment so I think it is expected behaviour on iOS. Regarding, the emoji issue. It exists on the main branch and the prod app as well but the emoji should be part of the heading/code ( Try these messages on main branch/the app on your phone -
It is a known issue for emojis in markdown (italics, heading, code, etc.) - https://expensify.slack.com/archives/C01GTK53T8Q/p1677781537939829 |
Reviewer Checklist
Screenshots/VideosMobile Web - Chrome19545.mWeb.Chrome.mov19545.mWeb.Chrome.2.movMobile Web - Safari19545.mWeb.Safari.mp419545.mWeb.Safari.2.mp4iOSSimulator.Screen.Recording.-.iPhone.14.-.2023-05-30.at.22.29.23.mp4Simulator.Screen.Recording.-.iPhone.14.-.2023-05-30.at.22.33.01.mp4 |
@Nikhil-Vats The attachment text strikethrough is only for web, no? |
@mollfpr yes, the behaviour on phone for all attachments is just reduced opacity. |
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.
@Nikhil-Vats Really great test flow presentation 👍
All the objection I found is already address and seems the test step it's covered enough. I'll go a head approve this PR.
All yours @cristipaval @parasharrajat
@@ -48,6 +48,7 @@ const BaseAnchorForCommentsOnly = (props) => { | |||
return ( | |||
<PressableWithSecondaryInteraction | |||
inline | |||
style={[styles.cursorDefault, {fontSize: props.style.fontSize}]} |
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.
@mollfpr Should we move the inline styles from 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.
Hey @parasharrajat, can you please tell me what you mean by this? Do you mean moving the inline
prop or the style
prop?
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.
Please use Styleutils
here. Inline styles are not allowed. https://github.com/Expensify/App/blob/main/contributingGuides/STYLING.md#inline-styles
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.
@parasharrajat Thanks a lot. Updated.
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.
Hey @parasharrajat, friendly bump! 😄
Hey @mollfpr, do we need any more approvals or are we good to go? |
Hey @twisterdotcom @mollfpr @cristipaval, friendly bump! Can we merge this? |
I tend to wait for @parasharrajat final review. |
Bump @parasharrajat |
@cristipaval I think we can merge this. I see that all the concerns have already been addressed. |
Updated the PR after merge conflicts. New test proofs - WebFor this issue, link padding issue, multiline comment issue - Screen.Recording.2023-06-08.at.7.51.54.PM.movFor attachment issue (attachments are downloadable when we click on right of the button) - web2.movDesktopFor this issue, link padding issue, multiline comment issue - desktop4.movFor attachment issue (attachments are downloadable when we click on right of the button) - desktop2.movmWeb chrome androidFor link padding issue, multiline comment issue - mWeb.chrome.android.1.movFor this issue and attachment issue (attachments are downloadable when we click on right of the button) - mWeb.chrome.android.2.movmWeb safari iOSFor this issue - mWeb.safari.ios.2.movFor link padding issue, multiline comment issue and attachment issue (attachments are downloadable when we click on right of the button) - mWeb.safari.ios.1.movmWeb.safari.ios.3.movandroidFor this issue - For link padding issue, multiline comment issue and attachment issue (attachments are downloadable when we click on right of the button) - android.1.moviOSFor this issue - For link padding issue, multiline comment issue and attachment issue (attachments are downloadable when we click on right of the button) - ios1.mov |
@mollfpr @cristipaval There were merge conflicts since PR for #19717 was merged in main. This issue was also a regression from the same PR that caused this one so they were closely related. So, I talked with @bernhardoj who worked on the other issue and also added test proofs for their issue (attachments and images were clickable in empty space on right) in my latest comment. So my latest comment includes test proofs for -
|
@@ -60,7 +60,7 @@ const ImageRenderer = (props) => { | |||
> | |||
{({show}) => ( | |||
<PressableWithoutFocus | |||
style={styles.noOutline} | |||
styles={styles.noOutline} |
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.
Also, there was a typo here since the name of prop for PressableWithoutFocus
is styles
not style
.
styles: PropTypes.arrayOf(PropTypes.object), |
I noticed this while reviewing the PR for #19717 so I am fixing it 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.
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 is getting fixed in one of the PR.
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.
@parasharrajat can you link the PR if possible?
Because if that’s a big one and will take time to be merged, I can raise a PR and fix this sooner.
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.
@mollfpr @cristipaval
styles
has to be an array here and I passed an object.
I made this typo while fixing an issue created in a related PR. Shall I create a new PR for this so that it is fixed before QA testing? Otherwise if the other PR that @parasharrajat is talking about takes a lot of time then this PR will be blocked unnecessarily.
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.
Feel free to drop another PR to fix this. Please follow this https://github.com/Expensify/App/pull/20202/files#r1224269258
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 @Nikhil-Vats for keeping us updated and for the rigorous 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. |
🚀 Deployed to staging by https://github.com/cristipaval in version: 1.3.27-0 🚀
|
🚀 Deployed to staging by https://github.com/cristipaval in version: 1.3.27-0 🚀
|
@@ -53,6 +54,7 @@ const BaseAnchorForCommentsOnly = (props) => { | |||
return ( | |||
<PressableWithSecondaryInteraction | |||
inline | |||
style={[styles.cursorDefault, StyleUtils.getFontSizeStyle(props.style.fontSize)]} |
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.
Any reason why we added this? Removing this it fixes this issue.
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 is caused by this line but reverting it is not the solution because we were adding the pointer cursor not to the link but to its parent which showed the pointer at places around the link -
Screen.Recording.2023-06-13.at.9.46.29.PM.mov
The root cause for this issue is that for some reasons links like https://staging.new.expensify.com/random_text_here
are rendered in div
rather than a
which is wrong.
Screen.Recording.2023-06-13.at.9.48.01.PM.mov
So, we need to figure out why links are rendered in div
and change it to a
to fix it the right way.
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.
Internal links need special handling before opening them then they are opened via onPress
handlers. We don't want them to open immediately so a tag is disabled on them. Only when href
is passed AnchorRenderer are rendered as a
. THis was the issue I was mentioning #19545 (comment) when I said that this will not work for the #16526. For the same reason, I didn't select a cursor-based solution on that solution. You can see that it is presented as a proposal on that.
Unfortunately, this didn't come to my mind before.
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 for weighing in @parasharrajat. I think helps us further to figure out a fix?
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.
@mollfpr @cristipaval This PR was reverted because of the special handling of internal links explained by @parasharrajat above.
I found a solution -
basically for internal links since they are rendered as div
we can explicitly set cursor
to pointer
on line 71. For normal links it is added by default so the only behaviour we are changing is for internal links by adding pointer cursor -
(Text below uses div
for internal links and a
for other/normal links)
App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
Lines 68 to 71 in 6e8435e
<Tooltip text={props.href}> | |
<Text | |
ref={(el) => (linkRef = el)} | |
style={StyleSheet.flatten([props.style, defaultTextStyle])} |
Need to change line 71 to -
style={StyleSheet.flatten([props.style, defaultTextStyle, styles.cursorPointer])}
This would solve all the related issues without regression. I tested on local all issues that were related to my issue like #18658, #17488, #16526, are fixed.
Result -
Screen.Recording.2023-06-13.at.11.01.48.PM.mov
🚀 Deployed to production by https://github.com/AndrewGable in version: 1.3.27-7 🚀
|
Details
This PR fixes the following issues -
The first one was a regression from #16526, this PR fixes that issue using another way.
Fixed Issues
$ #18658
$ #17488
$ #18658 (comment)
Tests
For testing #17488 (padding above header links) -
You can also follow the same steps on the desktop app on MacOS to verify that it is working successfully there as well.
For testing #16526 (cursor shown in empty space for links that span multiple lines) -
e.g link : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare dignissim nunc, eleifend molestie dui tempus non. Proin semper eu metus sit amet feugiat. Sed turpis augue, pellentesque sed accumsan ornare, malesuada in ligula. Aliquam porta condimentum varius. Morbi id lorem felis.
Offline tests
Issue #18658 must be tested in offline mode. Follow the steps below -
Note -
Messages are separated by a new empty line.
a. After deleting attachments like images, PDFs, GIFs which have preview, their opacity should decrease and user should not be able to open them.
b. For attachments without previews like CSV, docs, etc. A strikethrough should be shown similar to text comments.
You can test this behaviour on a mobile browser, desktop browser, MacOS desktop app, iOS app, android app, etc using the same steps.
QA Steps
Follow the same steps listed in the section above. Expand this to see the same steps.
For testing #17488 (padding above header links) -
You can also follow the same steps on the desktop app on MacOS to verify that it is working successfully there as well.
For testing #16526 (cursor shown in empty space for links that span multiple lines) -
e.g link : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare dignissim nunc, eleifend molestie dui tempus non. Proin semper eu metus sit amet feugiat. Sed turpis augue, pellentesque sed accumsan ornare, malesuada in ligula. Aliquam porta condimentum varius. Morbi id lorem felis.
Offline tests
Issue #18658 must be tested in offline mode. Follow the steps below -
Note -
Messages are separated by a new empty line.
a. After deleting attachments like images, PDFs, GIFs which have preview, their opacity should decrease and user should not be able to open them.
b. For attachments without previews like CSV, docs, etc. A strikethrough should be shown similar to text comments.
You can test this behaviour on a mobile browser, desktop browser, MacOS desktop app, iOS app, android app, etc using the same steps.
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
Screenshot for #18658
Video for #16526 and #17488
Screen.Recording.2023-05-24.at.10.44.40.PM.mov
Mobile Web - Chrome
Screen.Recording.2023-05-25.at.1.30.24.AM.mov
Mobile Web - Safari
Screenshot for #18658
Video for #16526
Screen.Recording.2023-05-24.at.11.22.00.PM.mov
Desktop
Screenshot for #18658
Video for #16526 and #17488
Screen.Recording.2023-05-24.at.10.54.16.PM.mov
iOS
Screen.Recording.2023-05-25.at.12.57.59.AM.mov
Android
Screenshot for #18658
Video for #16526 and #17488
Screen.Recording.2023-05-25.at.10.54.42.AM.mov