Skip to content
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

Copy email url #8195

Merged
merged 8 commits into from
Mar 23, 2022
Merged

Copy email url #8195

merged 8 commits into from
Mar 23, 2022

Conversation

mateusbra
Copy link
Contributor

Details

Right clicking email address shows pop up that says Copy URL to clipboard Copy e-mail to clipboard.

This PR will change the message we should show when right clicking e-mail to "Copy e-mail to clipboard".

Fixed Issues

$ #8006

Tests

  1. Log in on New Expensify.
  2. Open a report.
  3. Type an URL and an e-mail on chat.
  4. Verify that now e-mails shows "Copy e-mail to clipboard" when you try to copy it.

PR Review Checklist

Contributor (PR Author) Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover 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 included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed 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 followed proper code patterns (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 followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY
  • I verified any variables that can be defined as constants (ie. in CONST.js) 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
    • Any internal methods are bound to “this” properly so there are no scoping issues
    • Any internal methods bound to “this” are necessary to be bound
    • 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
  • 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)

PR Reviewer Checklist

  • 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 are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY
  • I verified any variables that can be defined as constants (ie. in CONST.js) 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
    • Any internal methods are bound to “this” properly so there are no scoping issues
    • Any internal methods bound to “this” are necessary to be bound
    • 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)

QA Steps

Web,Desktop:

  1. Log in on New Expensify.
  2. Open a report.
  3. Type an URL and an e-mail on chat.
  4. Right Click an e-mail.
  5. Verify that now e-mails shows "Copy e-mail to clipboard" when you try to copy it.
  6. Right Click an URL.
  7. Verify that URLs still shows "Copy URL to clipboard" when you try to copy it.

Android,iOS,Mobile Web:

  1. Log in on New Expensify.
  2. Open a report.
  3. Type an URL and an e-mail on chat.
  4. Long press an e-mail.
  5. Verify that now e-mails shows "Copy e-mail to clipboard" when you try to copy it.
  6. Long press an URL.
  7. Verify that URLs still shows "Copy URL to clipboard" when you try to copy it.

Screenshots

Web

Windows-Chrome.mp4
MacOs-Chrome.mov

Mobile Web

Android-Chrome.mp4
iOS-Safari.mp4

Desktop

MacOs-Desktop.mov

iOS

iOS-Native.mov

Android

Android-Native.mp4

@mateusbra mateusbra requested a review from a team as a code owner March 17, 2022 02:20
@MelvinBot MelvinBot requested review from marcochavezf and Santhosh-Sellavel and removed request for a team March 17, 2022 02:20
@mateusbra
Copy link
Contributor Author

mateusbra commented Mar 17, 2022

As @Santhosh-Sellavel said here, we still should rename fileName prop to fit all its purposes.
So @marcochavezf @Santhosh-Sellavel what name you think we should use to rename it?
Also, do you guys think it should be done in a separatelly PR or it could be made here?

@mateusbra
Copy link
Contributor Author

mateusbra commented Mar 17, 2022

On Mobile Web when we longpress the URL/e-mail it doesn't show the pop-up(I think it expect user to right click in order to show it, as expected on Web). I reported it on slack here.

@Santhosh-Sellavel
Copy link
Collaborator

@marcochavezf

My suggestions for prop name instead of fileName is anchorText or displayName or displayLabel. Please post your thoughts on this!

@Santhosh-Sellavel
Copy link
Collaborator

Santhosh-Sellavel commented Mar 17, 2022

@mateusbra
Add the new type here

* @param {string} type - context menu type [LINK, REPORT_ACTION]

and here
* @param {string} type - the context menu type to display [LINK, REPORT_ACTION]

@marcochavezf
Copy link
Contributor

@marcochavezf

My suggestions for prop name instead of fileName is anchorText or displayName or displayLabel. Please post your thoughts on this!

Hi guys, I see that we're currently using fileName for attachments, and for this case, I think displayName makes more sense. We also need to update AnchorForCommentsOnly (which I think is the other component that uses anchorForCommentsOnlyPropTypes too)

@mateusbra
Copy link
Contributor Author

@mateusbra
Add the new type here

Sorry, I missed this one. Already commited it!

@mateusbra
Copy link
Contributor Author

Hi guys, I see that we're currently using fileName for attachments, and for this case, I think displayName makes more sense. We also need to update AnchorForCommentsOnly (which I think is the other component that uses anchorForCommentsOnlyPropTypes too)

Hi Marco, thanks for the feedback, working on it!

@Santhosh-Sellavel
Copy link
Collaborator

Sorry for the delay here.

@Santhosh-Sellavel
Copy link
Collaborator

Santhosh-Sellavel commented Mar 22, 2022

PR Reviewer Checklist

  • 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 are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)

  • I verified all code is DRY

  • I verified any variables that can be defined as constants (ie. in CONST.js) 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
    • Any internal methods are bound to “this” properly so there are no scoping issues
    • Any internal methods bound to “this” are necessary to be bound
    • 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)

@Santhosh-Sellavel
Copy link
Collaborator

@mateusbra Update same QA Steps to Tests also. So it would be easier to understand!

@Santhosh-Sellavel
Copy link
Collaborator

@marcochavezf

  • 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.

Do we need opinion from the marketing team?

Copy link
Collaborator

@Santhosh-Sellavel Santhosh-Sellavel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tests well.

@marcochavezf

Seems mWeb is already broken not introduced in this PR. Except for mWeb Everything else tests well!

@mateusbra
Copy link
Contributor Author

@mateusbra Update same QA Steps to Tests also. So it would be easier to understand!

Changed the Tests section, thanks for the review guys!

@marcochavezf
Copy link
Contributor

Do we need opinion from the marketing team?

Good question, for this case is fine because we're just changing a word from an existing text (in fact I think we should move this to an interpolated text like Copy ${value} to clipboard if we add another type of value).

Copy link
Contributor

@marcochavezf marcochavezf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you guys for your effort!

@marcochavezf marcochavezf merged commit 9beba91 into Expensify:main Mar 23, 2022
@OSBotify
Copy link
Contributor

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

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @marcochavezf in version: 1.1.46-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@michaelhaxhiu
Copy link
Contributor

michaelhaxhiu commented Mar 28, 2022

Am I correct in understanding that #8311 is a regression?

@michaelhaxhiu
Copy link
Contributor

Wait no, this isn't a regression. It's a bug discovery?

@Santhosh-Sellavel
Copy link
Collaborator

Not it's not a regression, @michaelhaxhiu!

@michaelhaxhiu
Copy link
Contributor

yep got it - was just confused it didn't have the "@ - reported by" part in the title. I see what's going on, and was just trying to get an update for the main GH.

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @timszot in version: 1.1.46-3 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 failure ❌
🕸 web 🕸 success ✅

@@ -61,7 +62,7 @@ class BaseAnchorForCommentsOnly extends React.Component {
onSecondaryInteraction={
(event) => {
ReportActionContextMenu.showContextMenu(
ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
Str.isValidEmail(this.props.displayName) ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line introduced a regression in #18912 , When an email is linked to a url link. The message display "Copy Email to Clipboard" however the copied text is the url link.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants