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

Fix "user is typing..." indicator - key by accountID #21029

Merged
merged 10 commits into from
Jun 19, 2023

Conversation

Beamanator
Copy link
Contributor

@Beamanator Beamanator commented Jun 19, 2023

Details

Fixed Issues

$ #20956

Tests

  1. Set up User A as such:
    1. They should have a display name (set a first and / or last name)
    2. Create a public room with this user
    3. Send a few messages in this room, even though it's empty
  2. Set up User B as such:
    1. Brand new user, no display name and hasn't sent a message anywhere
    2. Join User A's public room
  3. Set up User C as such:
    1. Brand new user, no display name and hasn't sent a message anywhere
    2. Join User A's public room
  4. Open up the room with each user in different tabs / devices (ex: 1 chrome, 1 incognito chrome, 1 in desktop)
  5. Make sure you have an *@expensify.com account and can log in to Concierge

Make sure display name shows in "is typing" indicator

  1. Start typing in the room with User A (you don't need to send the message)
  2. Verify that while User A is typing, User B sees "<user a's display name> is typing..."
Screen.Recording.2023-06-19.at.4.27.17.PM.mov

Make sure "Someone" shows in "is typing" indicator

  1. Start typing in the room with User B (don't send a message)
  2. Verify that while User B is typing, User C sees "Someone is typing..."
Screenshot 2023-06-19 at 4 35 46 PM

Make sure login shows in "is typing" indicator

  1. As User B, send a message in the public room
  2. Make sure the message shows up in the public room, on User A's device
  3. Again, start typing in the room with User B
  4. Verify that while User B is typing, User A sees "<user b's email> is typing..."
Screenshot 2023-06-19 at 4 37 35 PM

Make sure "Multiple users are typing" indicator still works

  1. Arrange the 3 devices / windows so you can quickly send a message in 2 windows and see the results in the 3rd
  2. Quickly start typing a message with both User B and User C as quickly as possible
  3. Verify that while both users are typing, User A sees "Multiple users are typing..."
Screen.Recording.2023-06-19.at.4.47.39.PM.mov

Make sure Concierge live-chatting isn't broken

  1. Start a conversation with User B & Concierge in NewDot - make sure you are accessing User B's chat from NewDot & the Concierge account from OldDot
  2. Start typing in NewDot with User B
  3. Verify in Concierge you see no "user is typing" notification (like always) & that there's no console errors, and nothing crashes
  4. Start typing in Concierge (in OldDot) with the concierge account
  5. Verify in NewDot, User B sees "Concierge is typing..."
  • Verify that no errors appear in the JS console

Offline tests

"User is typing" indicator does not show offline, so no tests needed here

QA Steps

Same as above - Concierge part has to be internal QA'd

  • Verify that no errors appear in the JS console

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 the expected offline behavior in the Offline steps 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 tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android / native
    • Android / Chrome
    • iOS / native
    • iOS / Safari
    • MacOS / Chrome / Safari
    • 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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
    • 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 is localized by adding it to src/languages/* files and using the translation method
      • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review 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 (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
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • 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 */
    • 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 any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • 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 code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • 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.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Desktop, Android, Web Chrome

Display name:
Screenshot 2023-06-19 at 9 53 06 PM

Login:
Screenshot 2023-06-19 at 9 54 38 PM

Someone:
Screenshot 2023-06-19 at 9 57 01 PM

Concierge:
Screenshot 2023-06-19 at 10 00 38 PM

Mobile Web - Chrome
Mobile Web - Safari
iOS

@Beamanator Beamanator requested a review from a team as a code owner June 19, 2023 13:00
@Beamanator Beamanator self-assigned this Jun 19, 2023
@melvin-bot melvin-bot bot removed the request for review from a team June 19, 2023 13:00
@melvin-bot
Copy link

melvin-bot bot commented Jun 19, 2023

@s77rt Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@melvin-bot melvin-bot bot requested a review from s77rt June 19, 2023 13:00
@Beamanator Beamanator added Internal Requires API changes or must be handled by Expensify staff InternalQA This pull request required internal QA and removed Internal Requires API changes or must be handled by Expensify staff labels Jun 19, 2023
src/libs/actions/PersonalDetails.js Outdated Show resolved Hide resolved
src/pages/home/report/ReportTypingIndicator.js Outdated Show resolved Hide resolved
src/libs/actions/PersonalDetails.js Outdated Show resolved Hide resolved
@Beamanator Beamanator marked this pull request as draft June 19, 2023 17:15
@Beamanator Beamanator marked this pull request as ready for review June 19, 2023 18:36
@Beamanator Beamanator requested review from s77rt and a team June 19, 2023 18:40
@melvin-bot melvin-bot bot requested review from allroundexperts and removed request for a team June 19, 2023 18:40
@melvin-bot
Copy link

melvin-bot bot commented Jun 19, 2023

@allroundexperts Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

@Beamanator Beamanator removed the request for review from allroundexperts June 19, 2023 18:40
@marcaaron marcaaron self-requested a review June 19, 2023 18:44
@Beamanator
Copy link
Contributor Author

@s77rt i'm testing on all platforms then will fill out the checklist, please test if you get the chance

Copy link
Contributor

@marcaaron marcaaron left a comment

Choose a reason for hiding this comment

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

Had a couple of questions. Will test.

src/libs/actions/PersonalDetails.js Outdated Show resolved Hide resolved
src/libs/actions/PersonalDetails.js Show resolved Hide resolved
src/libs/actions/Report.js Outdated Show resolved Hide resolved
src/pages/home/report/ReportTypingIndicator.js Outdated Show resolved Hide resolved
Co-authored-by: Marc Glasser <marc.aaron.glasser@gmail.com>
@marcaaron
Copy link
Contributor

Also to clarify the test steps...

There is a comment on the report that says:

Hi there! If you just want to lurk in this room, others won't know you're here. However, if you post, others in the room will see your display name as 'userprivate@pizza.com'
If you'd like to add a different display name, open the Display Name page here.

So the expected behavior is to see "Someone is typing" until they "post"

If so, this is what I see:

2023-06-19_09-25-54

@marcaaron
Copy link
Contributor

✅ Make sure display name shows in "is typing" indicator
❌ Make sure "Someone" shows in "is typing" indicator
✅ Make sure "Multiple users are typing" indicator still works
❌ Make sure Concierge live-chatting isn't broken

@Beamanator
Copy link
Contributor Author

@marcaaron that's strange you don't see "Concierge is typing..." 😅 I see that all the time in my branch 🍕

@marcaaron
Copy link
Contributor

Gonna try to update all the repos maybe something is badly out of date for me locally.

@s77rt
Copy link
Contributor

s77rt commented Jun 19, 2023

@Beamanator How are we supposed to get the "Someone" is typing? we always fallback to the login first (email)

@Beamanator
Copy link
Contributor Author

Beamanator commented Jun 19, 2023

@s77rt - true we always fall back to the login IF it exists, but it doesn't always exist in Onyx.

For example, right when you join a public room, before you type anything nobody should have your personal details

  • I thinkkkk right now if anyone in the room refreshes / reopens the report they'll get your login in the displayName field on Onyx, but i think that's a bug we need to fix in the backend

@marcaaron
Copy link
Contributor

Ok "Concierge is typing" issue looks fixed now so we are ✅ there.

The "Someone is typing" step is still failing. It seems like User A will always see the display names (I am guessing they get updated with the personal details whenever someone joins the public room, but I haven't confirmed this yet).

Is that a blocker for this? Or are we good to merge? @puneetlath maybe you have the answer to that question as it's getting quite late for @Beamanator.

@Beamanator
Copy link
Contributor Author

@marcaaron updated the step

Make sure "Someone" shows in "is typing" indicator

to be between user B & C

It looks like the room admin always is sent the personal details of users as they join the room 👍

@s77rt
Copy link
Contributor

s77rt commented Jun 19, 2023

Works well, but I removed the onyx data manually (does not look critical to relay on the backend not to send the personaldetails)

Kooha-2023-06-19-21-07-50.mp4

@marcaaron
Copy link
Contributor

@s77rt would you mind testing android and posting screens? That's the last one I haven't tested and if you are reviewing I can check out some other things.

@marcaaron marcaaron self-requested a review June 19, 2023 20:22
@s77rt
Copy link
Contributor

s77rt commented Jun 19, 2023

Works well

Kooha-2023-06-19-21-30-38.mp4

Copy link
Contributor

@s77rt s77rt left a comment

Choose a reason for hiding this comment

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

LGTM! 🚀

(checklist filled by @marcaaron)

@melvin-bot
Copy link

melvin-bot bot commented Jun 19, 2023

We did not find an internal engineer to review this PR, trying to assign a random engineer to #20956... Please reach out for help on Slack if no one gets assigned!

@luacmartins luacmartins merged commit b25a014 into main Jun 19, 2023
@luacmartins luacmartins deleted the beaman-fixUserIsTypingIndicator branch June 19, 2023 21:47
OSBotify pushed a commit that referenced this pull request Jun 19, 2023
Fix "user is typing..." indicator - key by accountID

(cherry picked from commit b25a014)
chiragsalian added a commit that referenced this pull request Jun 20, 2023
@OSBotify
Copy link
Contributor

🚀 Cherry-picked to staging by https://github.com/luacmartins in version: 1.3.29-4 🚀

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

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

@Beamanator
Copy link
Contributor Author

QA'd on staging, everything looks good - except I wasn't able to test NOT having a login in my personalDetailsList b/c that's waiting on a web-e PR getting to staging, which hopefully will happen later today

@OSBotify
Copy link
Contributor

🚀 Deployed to production by https://github.com/luacmartins in version: 1.3.29-11 🚀

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

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by https://github.com/luacmartins in version: 1.3.32-1 🚀

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

@OSBotify
Copy link
Contributor

🚀 Deployed to production by https://github.com/thienlnam in version: 1.3.32-5 🚀

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
InternalQA This pull request required internal QA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants