Open old dot links with openOldDotLink() function#8769
Conversation
|
@mateusbra Kindly add screenshots for all platforms, thanks!! |
rushatgabhane
left a comment
There was a problem hiding this comment.
Looks good and tests well, just a few minor changes
| const attrHref = htmlAttribs.href || ''; | ||
| const internalExpensifyPath = (attrHref.startsWith(CONST.NEW_EXPENSIFY_URL) && attrHref.replace(CONST.NEW_EXPENSIFY_URL, '')) | ||
| || (attrHref.startsWith(CONST.STAGING_NEW_EXPENSIFY_URL) && attrHref.replace(CONST.STAGING_NEW_EXPENSIFY_URL, '')); | ||
| const oldDotPath = attrHref.startsWith(CONFIG.EXPENSIFY.EXPENSIFY_URL) && attrHref.replace(CONFIG.EXPENSIFY.EXPENSIFY_URL, ''); |
There was a problem hiding this comment.
@mateusbra we should also take care of staging path right?
There was a problem hiding this comment.
do we really need it? I mean, will we have staging url paths being used on the app?
We need the staging path for New expensify urls because when we are on staging we need to navigate over the app,but as we are talking about the old dot path, I think we won't need it at all.
If you think we need I can add it.
There was a problem hiding this comment.
you're right, it isn't needed because we aren't using staging url
There was a problem hiding this comment.
@iwiznia looks good, and test well!!
Edit: some changes required
There was a problem hiding this comment.
This part could be DRYed up too.
App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
Lines 42 to 53 in 3a41612
You could set the link for all 3 cases using some ifelse. And then return the component.
Please lemme know if you have any questions
|
Sorry, did't get you @rushatgabhane , you mean we should do something like? if (internalNewExpensifyPath || internalExpensifyPath || !HTMLEngineUtils.isInsideComment(props.tnode)) {
return (
<Text
style={styles.link}
onPress={() => (internalNewExpensifyPath ? Navigation.navigate(internalNewExpensifyPath) : internalExpensifyPath ? Link.openOldDotLink(internalExpensifyPath) : Linking.openURL(attrHref))}
>
<TNodeChildrenRenderer tnode={props.tnode} />
</Text>
);
} |
|
@mateusbra I meant something like Idk if it's better than what we already had. But we can always revert. |
|
I tryed doing something like this, but it doesn't assign the function to the variable let link;
if(internalNewExpensifyPath){
link = Navigation.navigate(internalNewExpensifyPath);
}
else if(internalExpensifyPath){
link = Link.openOldDotLink(internalExpensifyPath)
}
else if(!HTMLEngineUtils.isInsideComment(props.tnode)){
link = Linking.openURL(attrHref);
}am I doing something wrong? |
| // If we are handling a New Expensify link then we will assume this should be opened by the app internally. This ensures that the links are opened internally via react-navigation | ||
| // instead of in a new tab or with a page refresh (which is the default behavior of an anchor tag) | ||
| if (internalExpensifyPath) { | ||
| if (internalNewExpensifyPath || internalExpensifyPath) { |
There was a problem hiding this comment.
but it doesn't assign the function to the variable link, it execs the function instead.
@mateusbra my bad, we can't do that.
Let's move internalExpensifyPath to it's own branch statement for some readability.
There was a problem hiding this comment.
Let me know what you think of the comments I added
There was a problem hiding this comment.
@iwiznia Looks good!
#### PR Reviewer Checklist
- I verified the correct issue is linked in the
### Fixed Issuessection 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
Testssection - I verified the steps for Staging and/or Production testing are in the
QA stepssection - 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 verified the steps for local testing are in the
- 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.
toggleReportand notonIconClick). - 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
- 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.
- 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 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
displayNameproperty - 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
thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor) - Any internal methods bound to
thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick) - 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
Avataris modified, I verified thatAvataris 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.
In this case the "failure" scenarios would be:
Can you please add those tests? |
|
added! |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Cherry-picked to staging by @sketchydroide in version: 1.1.57-8 🚀
@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes. |
|
🚀 Deployed to production by @chiragsalian in version: 1.1.57-17 🚀
|
Details
We are going to use the
openOldDotLink()function when we have oldDot links, it will open the oldDot link with our account logged in.Fixed Issues
$ #7909
Tests
Old dot links:
4. It should open an old dot URL with the user logged in.
New dot links:
4. If link is a new dot link it should navigate to a screen within the app.
Other links:
4. Whatever other link(not new dot nor old dot) should open in a new tab.
PR Review Checklist
Contributor (PR Author) Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*filesSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)PR Reviewer Checklist
### Fixed Issuessection aboveTestssectionQA stepssectiontoggleReportand notonIconClick).src/languages/*filesSTYLE.md) were followed/** comment above it */displayNamepropertythisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)Avataris modified, I verified thatAvataris working as expected in all cases)QA Steps
Old dot links:
4. It should open an old dot URL with the user logged in.
New dot links:
4. If link is a new dot link it should navigate to a screen within the app.
Other links:
4. Whatever other link(not new dot nor old dot) should open in a new tab.
Screenshots
Web
Gravacao.de.Tela.2022-04-26.as.23.00.06.mov
Mobile Web
2022-04-25.17-31-12.mp4
Gravacao.de.Tela.2022-04-27.as.01.38.07.mov
Desktop
Gravacao.de.Tela.2022-04-27.as.00.54.15.mov
iOS
Ios.mov
Android
2022-04-25.17-26-39.mp4