make avatar and welcome message pressable #8409

Tushu17 · 2022-03-31T18:14:50Z

Details

Made the avatar and welcome message pressable

Fixed Issues

$ #8249

Tests

Open a chat
At beginning of the chat Avatar and name of the user is shown
Try to click the avatar and name and check if you can see the details of the user

Open a group
At beginning of the chat, Avatars and names of the participants are shown
Try to click the avatars it should open group details page
Try to click on different names of the participants it should open details page of that particular user

Open a room
At beginning of the room, Avatars and name of the room is shown
Try to click the avatar and room name it should open room details page

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Open a chat
At beginning of the chat Avatar and name of the user is shown
Try to click the avatar and name and check if you can see the details of the user

Open a group
At beginning of the chat, Avatars and names of the participants are shown
Try to click the avatars it should open group details page
Try to click on different names of the participants it should open details page of that particular user

Open a room
At beginning of the room, Avatars and name of the room is shown
Try to click the avatar and room name it should open room details page

Verify that no errors appear in the JS console

Screenshots

Web

Screen.Recording.2022-04-11.at.3.20.12.AM.mov

Mobile Web

Screen.Recording.2022-04-11.at.4.01.05.AM.mov

Desktop

Screen.Recording.2022-04-11.at.3.33.42.AM.mov

iOS

Screen.Recording.2022-04-11.at.3.55.00.AM.mov

Android

android.mp4

I couldn't update android video because I am having problems making a android build on my new machine

rushatgabhane

Tapping on user name should navigate user details straight away even if it's group chat.

@Tushu17 The expected result of the feature request is that in a group chat, tapping on the username should open that particular user.

Right now it just opens the group details page.

rushatgabhane · 2022-04-05T07:00:13Z

@Tushu17 any updates?

Tushu17 · 2022-04-05T16:25:27Z

Sorry for the delay here, I missed the notification.

Tapping on user name should navigate user details straight away even if it's group chat.

I tried wrapping displayName in pressable but I didn't find a way to get reportID of the participants. Do you know a way to get reportID of the participants? It would be helpful.

App/src/components/ReportWelcomeText.js

Lines 121 to 126 in 4b5abf6

    
           {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => ( 
        
               <Text key={displayName}> 
        
                   <Text style={[styles.textStrong]}> 
        
                       {displayName} 
        
                   </Text> 
        
                   {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}

rushatgabhane · 2022-04-06T16:09:01Z

@Tushu17 I believe we already have the emails from report.participants. So we could just navigate to DetailsPage, because it only requires email id.

Let me know if you have any questions, thanks!

Tushu17 · 2022-04-07T15:05:18Z

aah got it thanks, one more question do we want to make room names in welcome message pressable? and in groups there will be mutiple avatars so what should happen when a user clicks on avatars in a group chat, should we open the details page of the group?

rushatgabhane · 2022-04-07T17:14:10Z

what should happen when a user clicks on avatars in a group chat

@Tushu17 Good question. I've asked about this over here #8249 (comment)

do we want to make room names in welcome message pressable

Sure, I don't see why not.
If you feel this is extra work, I'd suggest that you ask for a price bump in the issue.

Tushu17 · 2022-04-08T15:15:49Z

Sure, I don't see why not.
If you feel this is extra work, I'd suggest that you ask for a price bump in the issue.

Not a problem I will do it. Just wanted to confirm.

github-actions · 2022-04-10T20:43:11Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

Tushu17 · 2022-04-10T21:28:46Z

Sorry for the confusion here.. I am using a different machine and I had created a new gpg key and there was a typo in my email so that's why the commits weren't verified. I used git reset and pushed the new commit forcefully, is it fine?

rushatgabhane · 2022-04-11T21:47:37Z

@Tushu17 No problemo

rushatgabhane · 2022-04-18T14:42:56Z

@Tushu17 bump ^^

Tushu17 · 2022-04-18T15:06:17Z

Hi, I have updated the PR. Can you review it.

rushatgabhane

@Tushu17 looks good! Please fix the merge conflicts and address the changes (mostly style).
Thanks so much!

I'm sorry that I didn't realize you had made changes (the force-push confused me, even though you added a comment for just that 😅)

src/components/ReportWelcomeText.js

src/pages/home/report/ReportActionItemCreated.js

rushatgabhane

@Tushu17 Nice work so far!

Bug: Names are misaligned on native

Tushu17 · 2022-04-21T16:40:23Z

Hi, I am trying to find the cause as it wasn't misaligned earlier.

rushatgabhane · 2022-04-21T16:59:36Z

Great, maybe try reverting the Tooltip commit?

Tushu17 · 2022-04-25T10:40:58Z

I tried removing the tooltip but still got the same result. I have found another way, we can use onPress of Text and we can remove Pressable but we will have to remove the tooltip too as the text is getting misaligned after getting wrapped.

rushatgabhane · 2022-04-25T10:46:53Z

@Tushu17 I think we should ask for help on Slack.

@chiragsalian have you seen this bug before? #8409 (review)

chiragsalian · 2022-04-25T18:57:30Z

oh weird, i have not seen that bug before. I feel like its new. I don't think it should be addressed in this PR but can you guys report it on slack so that an issue is created for it if it hasn't been captured already. If you guys already have the solution on hand let me know so that the newly created issue can be quickly solved by you guys too 🙂

rushatgabhane · 2022-04-26T18:51:50Z

I've unassigned from the issue because I'll be OOO untill May 14.
I'm sure a different C+ move this over the finish line soon!

Tushu17 · 2022-04-27T18:45:15Z

@chiragsalian Done, here's the slack thread

chiragsalian · 2022-04-29T17:37:48Z

@Tushu17, can you try rajat's suggestion. If its simple enough to fix here then lets go ahead with it.

Tushu17 · 2022-05-01T11:37:34Z

@chiragsalian It didn't work.

parasharrajat

try this.

src/components/ReportWelcomeText.js

…r-pressable merge main

src/pages/home/report/ReportActionItemCreated.js

Santhosh-Sellavel · 2022-05-12T18:49:13Z

@Tushu17 Resolve those conflicts too, thanks!

src/libs/ReportUtils.js

Tushu17 · 2022-05-16T19:43:21Z

@Santhosh-Sellavel, done! Made the changes.

Santhosh-Sellavel

Looks good and tests well!
cc: @chiragsalian

Santhosh-Sellavel · 2022-05-16T20:01:55Z

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

chiragsalian

LGTM and works well. I found a bug (posted on slack) while testing this but i realized its not because of this PR.

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

OSBotify · 2022-05-17T19:15:14Z

✋ 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 · 2022-05-18T15:37:42Z

🚀 Deployed to staging by @chiragsalian in version: 1.1.63-0 🚀

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

OSBotify · 2022-05-18T18:38:16Z

🚀 Deployed to staging by @chiragsalian in version: 1.1.63-0 🚀

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

OSBotify · 2022-05-19T17:23:21Z

🚀 Deployed to production by @AndrewGable in version: 1.1.63-2 🚀

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

Tushu17 requested a review from a team as a code owner March 31, 2022 18:14

melvin-bot bot requested review from chiragsalian and rushatgabhane and removed request for a team March 31, 2022 18:14

rushatgabhane suggested changes Apr 1, 2022

View reviewed changes

make user and room name pressable

3e48b23

Tushu17 force-pushed the make-avatar-pressable branch from 62e0f4c to 3e48b23 Compare April 10, 2022 21:21

rushatgabhane suggested changes Apr 18, 2022

View reviewed changes

Tushu17 added 2 commits April 19, 2022 21:30

resolve conflicts

be236a3

add tooltip

1877d03

rushatgabhane suggested changes Apr 20, 2022

View reviewed changes

chiragsalian assigned Tushu17 Apr 26, 2022

parasharrajat suggested changes May 1, 2022

View reviewed changes

src/components/ReportWelcomeText.js Outdated Show resolved Hide resolved

Tushu17 added 3 commits May 4, 2022 00:55

Merge branch 'main' of https://github.com/Tushu17/App into make-avata…

3db70de

…r-pressable merge main

remove pressable

5ace2ad

remove view

0a1f26f

Santhosh-Sellavel reviewed May 6, 2022

View reviewed changes

src/pages/home/report/ReportActionItemCreated.js Outdated Show resolved Hide resolved

Tushu17 added 2 commits May 13, 2022 01:53

resolve conflicts

5cdb807

make navigateToDetailsPage a util function

f590ea6

Santhosh-Sellavel suggested changes May 15, 2022

View reviewed changes

src/libs/ReportUtils.js Outdated Show resolved Hide resolved

remove particpants from the param

69e76f2

Santhosh-Sellavel approved these changes May 16, 2022

View reviewed changes

chiragsalian approved these changes May 17, 2022

View reviewed changes

chiragsalian merged commit c16d2eb into Expensify:main May 17, 2022

OSBotify mentioned this pull request May 18, 2022

Deploy Checklist: New Expensify 2022-05-18 #9069

Closed

18 tasks

kavimuru mentioned this pull request May 18, 2022

iOS - Group chat - User name is highlighted when tapping on it to show the details of the user #9081

Closed

parasharrajat mentioned this pull request Jun 2, 2022

[$500] Workspace - The middle message flows out of the container when the email is longer #9287

Closed

Tushu17 mentioned this pull request Jun 3, 2022

Wrapping Text inside Tooltip or Pressable make the text vertically misaligned on native - reported by @Tushu17 #9242

Closed

dangrous mentioned this pull request Jul 31, 2023

[HOLD for payment 2023-07-26] [$1000] Web - Wrong information is shown if we create a group with descending order for the names of the users #22118

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

make avatar and welcome message pressable #8409

make avatar and welcome message pressable #8409

Tushu17 commented Mar 31, 2022 •

edited

Loading

rushatgabhane left a comment

rushatgabhane commented Apr 5, 2022

Tushu17 commented Apr 5, 2022

rushatgabhane commented Apr 6, 2022 •

edited

Loading

Tushu17 commented Apr 7, 2022

rushatgabhane commented Apr 7, 2022 •

edited

Loading

Tushu17 commented Apr 8, 2022

github-actions bot commented Apr 10, 2022 •

edited

Loading

Tushu17 commented Apr 10, 2022 •

edited

Loading

rushatgabhane commented Apr 11, 2022

rushatgabhane commented Apr 18, 2022

Tushu17 commented Apr 18, 2022

rushatgabhane left a comment

rushatgabhane left a comment •

edited

Loading

Tushu17 commented Apr 21, 2022

rushatgabhane commented Apr 21, 2022 •

edited

Loading

Tushu17 commented Apr 25, 2022

rushatgabhane commented Apr 25, 2022

chiragsalian commented Apr 25, 2022

rushatgabhane commented Apr 26, 2022

Tushu17 commented Apr 27, 2022

chiragsalian commented Apr 29, 2022

Tushu17 commented May 1, 2022

parasharrajat left a comment

Santhosh-Sellavel commented May 12, 2022

Tushu17 commented May 16, 2022

Santhosh-Sellavel left a comment •

edited

Loading

Santhosh-Sellavel commented May 16, 2022 •

edited

Loading

chiragsalian left a comment

OSBotify commented May 17, 2022

OSBotify commented May 18, 2022

OSBotify commented May 18, 2022

OSBotify commented May 19, 2022

make avatar and welcome message pressable #8409

make avatar and welcome message pressable #8409

Conversation

Tushu17 commented Mar 31, 2022 • edited Loading

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

rushatgabhane left a comment

Choose a reason for hiding this comment

rushatgabhane commented Apr 5, 2022

Tushu17 commented Apr 5, 2022

rushatgabhane commented Apr 6, 2022 • edited Loading

Tushu17 commented Apr 7, 2022

rushatgabhane commented Apr 7, 2022 • edited Loading

Tushu17 commented Apr 8, 2022

github-actions bot commented Apr 10, 2022 • edited Loading

Tushu17 commented Apr 10, 2022 • edited Loading

rushatgabhane commented Apr 11, 2022

rushatgabhane commented Apr 18, 2022

Tushu17 commented Apr 18, 2022

rushatgabhane left a comment

Choose a reason for hiding this comment

rushatgabhane left a comment • edited Loading

Choose a reason for hiding this comment

Tushu17 commented Apr 21, 2022

rushatgabhane commented Apr 21, 2022 • edited Loading

Tushu17 commented Apr 25, 2022

rushatgabhane commented Apr 25, 2022

chiragsalian commented Apr 25, 2022

rushatgabhane commented Apr 26, 2022

Tushu17 commented Apr 27, 2022

chiragsalian commented Apr 29, 2022

Tushu17 commented May 1, 2022

parasharrajat left a comment

Choose a reason for hiding this comment

Santhosh-Sellavel commented May 12, 2022

Tushu17 commented May 16, 2022

Santhosh-Sellavel left a comment • edited Loading

Choose a reason for hiding this comment

Santhosh-Sellavel commented May 16, 2022 • edited Loading

PR Reviewer Checklist

chiragsalian left a comment

Choose a reason for hiding this comment

PR Reviewer Checklist

OSBotify commented May 17, 2022

OSBotify commented May 18, 2022

OSBotify commented May 18, 2022

OSBotify commented May 19, 2022

Tushu17 commented Mar 31, 2022 •

edited

Loading

rushatgabhane commented Apr 6, 2022 •

edited

Loading

rushatgabhane commented Apr 7, 2022 •

edited

Loading

github-actions bot commented Apr 10, 2022 •

edited

Loading

Tushu17 commented Apr 10, 2022 •

edited

Loading

rushatgabhane left a comment •

edited

Loading

rushatgabhane commented Apr 21, 2022 •

edited

Loading

Santhosh-Sellavel left a comment •

edited

Loading

Santhosh-Sellavel commented May 16, 2022 •

edited

Loading