Expense Report: Invited Member Sees Fallback Avatar

by Admin 52 views
Invited Member to Expense Report Sees the Chat with Fallback Avatar on LHN

Hey Expensify users, have you encountered a quirky visual hiccup when inviting someone to an expense report? Let's dive into a reported issue where, upon invitation, a user sees a fallback avatar instead of their expected profile picture in the Left Hand Navigation (LHN) chat. This article will break down the problem, steps to reproduce it, and what we're looking at to fix it. If you're into contributing or want to join the Slack channel, check out the contributing guidelines and email contributors@expensify.com!

The Bug: Fallback Avatar Surprise

The core of the issue lies in how a newly invited member to an expense report chat is represented within the LHN. Instead of seeing their personalized avatar, they are greeted with a default, fallback image. This is a visual glitch that impacts the user experience, making it harder to quickly identify who's who within the chat. The issue has been spotted in both staging and production environments, meaning it's not just a development snag, but a real-world problem for users. It's crucial to understand how to reproduce the bug to find and fix the root cause.

Version and Environment Details

  • Version Number: v9.2.42-0 (This pinpoints the specific version where the bug was observed.)
  • Reproducible in staging?: Yes (This confirms the issue can be replicated in the staging environment, which is a pre-production testing area.)
  • Reproducible in production?: Yes (The bug is also present in the live production environment, affecting real users.)
  • If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory (The issue was identified through exploratory testing, which is a method of software testing where testers dynamically explore the application.)
  • Email or phone of affected tester (no customers): gocemate+b2154894@gmail.com (The email of the tester who reported the issue.)
  • Issue reported by: Applause Internal Team (The bug was found and reported by the internal team.)
  • Device used: Lenovo 80ES / Windows 10 Pro (The device and operating system used during the testing.)
  • App Component: Left Hand Navigation (LHN) (The component where the bug is visible.)

Steps to Recreate the Fallback Avatar Display

Reproducing the bug is essential to understanding and fixing it. Here's a step-by-step guide to help you recreate the issue and see the fallback avatar yourself. Following these steps, anyone can verify the bug, assisting in its quick resolution. This approach is standard in software development to enable collaborative bug fixing. Understanding the exact steps to reproduce the issue is key to fixing it. Here's a breakdown of the actions performed to trigger the bug, which will help anyone duplicate the problem and confirm the fix when it’s implemented. Getting into the details makes it easier for the development team to isolate the source of the problem and ensure a complete and effective solution.

Detailed Steps to Reproduce the Issue

  1. Expense Submission (User A): Start by logging into staging.new.expensify.com as User A. The first step involves User A submitting two expenses to User B. This initial action sets up the expense report context, which is where the bug later manifests.
  2. Access the Expense Report (User A): After the expense submission, User A should navigate to the expense report. This will become the hub for the conversation and where the new user will be invited. This is important because it establishes the chat context, where the invite and avatar display will occur.
  3. Mention and Message (User A): Within the expense report, User A needs to send a message and mention User C. This step is designed to prime the system for the invitation and the subsequent display issue. This triggers the system to prepare for the addition of User C to the chat.
  4. Invite User C (User A): User A then proceeds to invite User C by clicking the 'Invite them' option in the whisper. This action is the catalyst for the bug, causing the system to attempt to integrate User C into the chat, where the fallback avatar is displayed.
  5. Check LHN (User C): User C should then check their LHN to see how the chat appears. This is where the unexpected default avatar should show up instead of User C's actual profile picture. User C's perspective confirms whether the bug is visible.

The Expected and Actual Results

Knowing the expected and actual results is critical. It helps us pinpoint the discrepancy that causes the bug. The goal is to see a user's actual profile picture. However, the system currently shows a generic fallback avatar instead. Let’s break it down in detail.

The Expected Outcome

When User C is added to the expense report chat, the expectation is that their profile picture (avatar) should appear in the LHN. This is a standard user experience feature, making it easy to identify people in conversations. It provides a visual cue that allows users to recognize each other quickly and efficiently. The system is designed to display a user's actual avatar, pulled from their profile. This functionality ensures that users have a familiar and personalized visual experience within the application, and the expected result is that User C's real profile picture would be correctly displayed in the LHN.

The Actual Result

Instead of the personalized avatar, User C is presented with a fallback avatar. This default image doesn't provide any identifying information. The fallback avatar is shown instead of User C’s expected profile picture. This is a common visual default when a user's profile picture cannot be retrieved or loaded for some reason. This is the core visual glitch the issue report highlights. The actual result is an unexpected visual representation, and the fallback avatar undermines the user experience. The bug's presence affects how users visually interact with the application, as it impairs their ability to quickly recognize and engage with other participants in the expense report chats.

Workaround and Platform Impact

A workaround is a temporary solution to mitigate the impact of the bug. A workaround can help users continue their work without being completely blocked by a glitch. The absence of a known workaround underscores the need for a quick resolution to the underlying issue. The report also highlights which platforms the bug affects. This gives developers a good overview, allowing them to target their efforts to the most pressing areas. The platform details are crucial for prioritizing fixes and testing the impact of any changes. A fix on one platform might not translate to another, so understanding where the bug appears helps to ensure comprehensive solutions.

Workaround Status

  • Workaround: Unknown (The absence of a workaround indicates the immediate impact of the bug.)

Affected Platforms

  • Windows: Chrome: The bug has been confirmed on Windows using Chrome, indicating a significant user impact. This suggests that a large segment of users on the Chrome browser using the Windows OS will experience this issue.

Visual Aids: Screenshots and Videos

Visual aids are incredibly helpful. They provide a clear, concise way to showcase the issue. This allows developers to see the bug in action. The presence of visual aids greatly enhances the clarity of the report, speeding up the troubleshooting process and improving the chances of a rapid resolution. In this case, a screenshot of the fallback avatar would quickly and effectively highlight the issue.

Conclusion and Next Steps

The issue of the fallback avatar in the LHN is a crucial problem. It affects the user experience by making it difficult for users to quickly recognize each other in expense report chats. Developers need to investigate the image loading mechanism. The goal is to ensure that the correct avatar is displayed for all invited members. Addressing this bug will make the chat experience more user-friendly and visually clear. The fix will involve identifying why the user's avatar isn't loading correctly. The focus will be on ensuring that the avatar is correctly retrieved. It will also be made sure it is displayed in the LHN chat. This is a step towards a more seamless, user-friendly expense reporting platform. If you have any questions or want to help, please reach out!