Fix anchor renderer for links in report messages & clean up by parasharrajat · Pull Request #10144 · Expensify/App

parasharrajat · 2022-07-27T21:24:28Z

Details

Fixed Issues

$ #9739

Tests

Open the app.
Send a message with the following links.
Confirm that all of those show tooltips.
Check that if you are on the staging app, a URL with an address matching with staging opens internally. Old Expensify links open in a new tab but you are directly logged into the old Expensify app if the URL is valid.
Open the Storybook server.
Got Banner with Link and check that it renders both internal and public links.
There should be no tooltips for the links.

Note: Clicking on the internal links does not open them internally on storyBook. This is known and not a bug.

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

The Contributor+ will copy/paste it into a new comment and complete it after the author checklist is completed

QA Steps

Open the app.
Send a message with the following links.
Send a few more valid links.

 new.expensify.com/settings/profile
 staging.new.expensify.com/settings
 https://www.expensify.com/inbox

Confirm that all of those show tooltips.
Check that if you are on the staging app, a URL with an address matching with staging opens internally. Url should be a valid app URL. For eg (/settings)
Old Expensify links open in a new tab but you are directly logged into the old Expensify app if the URL is valid.
Public links open in a new tab.
Open the Storybook server.
Go to Banner with Link and check that it renders both internal and public links.
There should be no tooltips for the links.

Note: Clicking on the internal links does not open them internally on the storyBook server. This is known and not a bug.

Verify that no errors appear in the JS console

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav · 2022-08-10T17:13:33Z

@puneetlath @parasharrajat Reviewed and I also tested this, it works fine. Good amount of refactor also a part of the changes.

I had only one issue that I wasn't able to reproduce this issue on production.

🎀 👀 🎀
C+ reviewed

PR Reviewer Checklist

The Contributor+ will copy/paste it into a new comment and complete it after the author checklist is completed

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- Any functional components have the displayName property
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

puneetlath · 2022-08-10T20:48:44Z

I had only one issue that I wasn't able to reproduce this issue on production.

@mananjadhav mind clarifying what you mean by this?

puneetlath · 2022-08-10T20:49:12Z

@parasharrajat merge conflicts.

…inks

parasharrajat · 2022-08-10T20:53:32Z

Resolved

mananjadhav · 2022-08-10T22:17:57Z

I had only one issue that I wasn't able to reproduce this issue on production.

@mananjadhav mind clarifying what you mean by this?

One the issues we're solving in the PR is that the URL doesn't show tooltip (atleast based on the video in the GH body issue), but I can see the tooltip for the URL in production without the change.

parasharrajat · 2022-08-10T22:34:09Z

@mananjadhav I mentioned in my tests and QA steps that the following URLs need to be tested.

So if you do those, you will see that the URLs that are not underlined have no tooltips in prod.
So this PR is fixing two issues at one.

Underline
tooltip.

mananjadhav · 2022-08-10T22:38:55Z

Yeah @parasharrajat I checked all the URLs and a few more after your PR. Don't worry those worked fine.

I was testing the same in Prod before your PR fix. I found the issue, I was trying https://expensify.com/inbox instead of https://www.expensify.com/inbox. @puneetlath You can ignore my comment.

puneetlath

Two very small comments about propType comments. Otherwise, this looks great to me.

puneetlath · 2022-08-11T22:16:14Z

src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js

+    /** The URL of the attachment */
+    source: PropTypes.string,
+
+    /** Filename in case of attachments, anchor text in case of URLs or emails. */


If this is for attachments only, why would there be URLs or emails?

puneetlath · 2022-08-11T22:21:03Z

src/components/AnchorForCommentsOnly.js

+    /** Any children to display */
+    children: PropTypes.node,
+
+    /** Filename in case of attachments, anchor text in case of URLs or emails. */


This is for comments only, so I would think attachments don't apply.

parasharrajat · 2022-08-12T15:37:15Z

PR updated. There are two issues that I have found during working on this PR which I will report on slack when this is merged.

OSBotify · 2022-08-12T16:04:12Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

hungvu193 · 2025-01-20T08:01:15Z

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js

+    }
+
+    render() {
+        const source = addEncryptedAuthTokenToURL(this.props.source);


~~We shouldn't add encyptToken for local file, it will cause error console.~~
~~More details: #54640~~

@hungvu193 Seriously. This PR is 3 years old. At that time w me didn't have local file. Also, this PR only does refactoring.

Can you please find a proper PR which surfaced the issue?

Yes, you're correct. My bad, just found the offending PR.

parasharrajat added 7 commits July 27, 2022 17:24

Fix anchor renderer

0525413

Add the link press handler to the AnchorRenderer

9a92a2b

Cleanup and refactor

8c89340

more refactor and cleanup of props

7b2d0d9

Fix the imports

8e9e020

Add story for Banner with link

b434079

remove extra prop

a04ab01

parasharrajat marked this pull request as ready for review July 27, 2022 22:35

parasharrajat requested a review from a team as a code owner July 27, 2022 22:35

melvin-bot bot requested review from mananjadhav and puneetlath and removed request for a team July 27, 2022 22:35

Fix formatting issues

601dd5a

Merge branch 'main' of github.com:Expensify/Expensify.cash into fix-l…

1787a78

…inks

puneetlath requested changes Aug 11, 2022

View reviewed changes

Fix comments

1f7845a

puneetlath approved these changes Aug 12, 2022

View reviewed changes

puneetlath merged commit e2eef7a into Expensify:main Aug 12, 2022

OSBotify mentioned this pull request Aug 15, 2022

Deploy Checklist: New Expensify 2022-08-04 #10253

Closed

parasharrajat deleted the fix-links branch August 16, 2022 19:27

kbecciv mentioned this pull request Aug 17, 2022

[Bug] IOS/Android - Unable to open links via App. #10431

Closed

marcaaron mentioned this pull request Aug 17, 2022

[HOLD] Revert "Fix anchor renderer for links in report messages & clean up" #10433

Closed

arosiclair mentioned this pull request Aug 18, 2022

Exclude concierge links from OldDot link handling #10310

Merged

93 tasks

melvin-bot bot mentioned this pull request Aug 23, 2022

[HOLD for payment 2022-09-26] [$1000] When you send old :expensify: link and hover you will not see any tooltip and the link is without underline - reported by @Puneet-here #9739

Closed

parasharrajat mentioned this pull request Aug 23, 2022

Fix the native link renderer #10503

Merged

93 tasks

ishpaul777 mentioned this pull request Feb 4, 2024

[HOLD for payment 2024-02-07] [$500] Chat - When user goes offline, the download button do not disappear for other file types #35200

Closed

6 tasks

hungvu193 reviewed Jan 20, 2025

View reviewed changes

Conversation

parasharrajat commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

mananjadhav commented Aug 10, 2022

PR Reviewer Checklist

Uh oh!

puneetlath commented Aug 10, 2022

Uh oh!

puneetlath commented Aug 10, 2022

Uh oh!

parasharrajat commented Aug 10, 2022

Uh oh!

mananjadhav commented Aug 10, 2022

Uh oh!

parasharrajat commented Aug 10, 2022

Uh oh!

mananjadhav commented Aug 10, 2022

Uh oh!

puneetlath left a comment

Choose a reason for hiding this comment

Uh oh!

puneetlath Aug 11, 2022

Choose a reason for hiding this comment

Uh oh!

puneetlath Aug 11, 2022

Choose a reason for hiding this comment

Uh oh!

parasharrajat commented Aug 12, 2022

Uh oh!

OSBotify commented Aug 12, 2022

Uh oh!

hungvu193 Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

parasharrajat Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

hungvu193 Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

parasharrajat commented Jul 27, 2022 •

edited

Loading

hungvu193 Jan 20, 2025 •

edited

Loading

hungvu193 Jan 20, 2025 •

edited

Loading