lanitochka17 commented 2 weeks ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.0.1-17 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): betlihemasfaw14@gmail.com Issue reported by: Applause - Internal Team

Action Performed:

Navigate to Admin > plus sign
Add title and Assignee
Go to Quick Action and assign task
Add title and confirm

Expected Result:

UX should not cover the message

Actual Result:

UX covers the message

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

[ ] Android: Native
[ ] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/ab12b35a-8232-4155-9fc6-d32a50fbc5d3

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01eec125fcb90e14fe
Upwork Job ID: 1805999145742342542
Last Price Increase: 2024-07-09

Issue Owner

Current Issue Owner: @allgandalf

melvin-bot[bot] commented 2 weeks ago

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

lanitochka17 commented 2 weeks ago

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

lanitochka17 commented 2 weeks ago

e think that this bug might be related to #vip-vsp

kevinksullivan commented 2 weeks ago

Huh... Definitely unideal. This should go in #wave-collect because it's tied to a workspace/admins room though.

melvin-bot[bot] commented 2 weeks ago

Job added to Upwork: https://www.upwork.com/jobs/~01eec125fcb90e14fe

melvin-bot[bot] commented 2 weeks ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allgandalf (External)

kevinksullivan commented 2 weeks ago

@lanitochka17 I am unable to reproduce this actually. Are there more specific steps I need to follow than those you added in the post?

iCodePrograms commented 2 weeks ago

@lanitochka17 I am unable to reproduce this actually. Are there more specific steps I need to follow than those you added in the post?

Again coming in from Upwork, I believe we would require to add another task to reproduce the issue and a specific mode of display which is causing the issue

melvin-bot[bot] commented 2 weeks ago

📣 @iCodePrograms! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:
```
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
```

iCodePrograms commented 2 weeks ago

Contributor details Your Expensify account email: shamabegum88@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~01f8324b203ccf973f

melvin-bot[bot] commented 2 weeks ago

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

kevinksullivan commented 2 weeks ago

Again coming in from Upwork, I believe we would require to add another task to reproduce the issue and a specific mode of display which is causing the issue

@iCodePrograms can you elaborate? I took the Help wanted label off here and am trying to reproduce.

iCodePrograms commented 2 weeks ago

Hi @kevinksullivan, to be able to reproduce the error Click New Workspace -> Back button (left arrow) -> Click on #admins channel -> Click on the + button beside the chat box -> Assign Task -> Enter any title -> Select Assignee -> Create Task-> Click on the + button in the menu to find Quick Action Assign Task -> Enter title -> Create Task You should see the error something like this I'm using Windows OS by the way I can reproduce it too, we might need to extend the scope of occurrence in details of the issue.

melvin-bot[bot] commented 1 week ago

@kevinksullivan, @allgandalf Eep! 4 days overdue now. Issues have feelings too...

allgandalf commented 1 week ago

Chill Melvin, this is waiting for proposals

melvin-bot[bot] commented 1 week ago

@kevinksullivan, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

allgandalf commented 1 week ago

Same as ^

Julesssss commented 5 days ago

Bumping the bounty here. It's an important issue to resolve as it can appear without warning in other cases.

For example, it appeared here within the invoices flow.

melvin-bot[bot] commented 5 days ago

Upwork job price has been updated to $500

Julesssss commented 5 days ago

These issues also appear related:

allgandalf commented 5 days ago

Can you also post on open source channel pointing the urgency of this and the bounty increase @Julesssss ?

Julesssss commented 5 days ago

@allgandalf yeah 👍

melvin-bot[bot] commented 5 days ago

@Julesssss @kevinksullivan @allgandalf this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

wasxxm commented 5 days ago

I just pulled the latest forked version of the repo, and I am no longer able to reproduce the above error; I was able to produce it a few hours ago. Has it been fixed?

wasxxm commented 5 days ago

Proposal

Please re-state the problem that we are trying to solve in this issue

After adding a few tasks or invoices, a part of the background image UX should not cover the message; however, it currently does in that chat conversation window, and it feels broken.

What is the root cause of that problem?

The root cause of the problem is the in the /src/pages/home/report/ReportActionsList.tsx starting at line 683. The InvertedFlatList inherits from BaseInvertedFlatList, which in turn inherits from FlatList with an "inverted" parameter. This parameters applies transform: scaleY(-1) to the list items flipping the list vertically upside down.

This creates a new stack of elements inside the list which causes the z-index property not to respect the originally assigned z-index value; we, therefore, see that background image coming on top of the list items.

What changes do you think we should make in order to solve the problem?

We need to do the following steps to fix the broken UI problem for tasks and invoices:

Remove \ from /src/pages/home/report/ReportActionItemCreated.tsx at line 63; this will fix the broken UI in the Workspace for the tasks assigned.
Remove \ from /src/components/ReportActionItem/MoneyReportView.tsx at line 62; this will fix the invoice created problem
Add the same (i.e. \) to /src/pages/home/report/ReportActionsList.tsx before line 683.
Replace line 46 of /src/pages/home/report/AnimatedEmptyStateBackground.tsx having the existing code:

<View style={StyleUtils.getReportWelcomeBackgroundContainerStyle()}>

with:

<View style={[StyleUtils.getReportWelcomeBackgroundContainerStyle(), {height: '100%'}]}>

What alternative solutions did you explore? (Optional)

I also tried removing the background image altogether by doing step 1 and leaving everything else the same. It does not actually solve the problem but removes the annoying background messing up with the text.

Screenshot

The above fixes solves the broken UI problem as shown below:

The repeated "Say Hello" chat message has nothing to do with the front-end UI; it is coming directly from the backend API responsible for the chat messages. See the entries at index 0 and 4 for the reportActions object; they are the duplicate entries -- see below screenshot:

Julesssss commented 4 days ago

I just pulled the latest forked version of the repo, and I am no longer able to reproduce the above error; I was able to produce it a few hours ago. Has it been fixed?

I asked QA for a retest 👍

wasxxm commented 4 days ago

I just pulled the latest forked version of the repo, and I am no longer able to reproduce the above error; I was able to produce it a few hours ago. Has it been fixed?

I asked QA for a retest 👍

I was able to reproduce the bug and it happens for all UIs involving the InvertedFlatList; I have suggested a solution above.

kbecciv commented 4 days ago

Issue reproducible

https://github.com/Expensify/App/assets/93399543/2ad7c39d-58e0-47d0-a97b-83279a6a427d

wasxxm commented 2 days ago

https://github.com/Expensify/App/issues/44388#issuecomment-2219303604 Proposal Updated

melvin-bot[bot] commented 2 days ago

@Julesssss, @kevinksullivan, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

allgandalf commented 1 day ago

@wasxxm about your proposal:

Can you please explain why the issue is occuring (RCA) along with links to our codebase

The InvertedFlatList inherits from BaseInvertedFlatList, which in turn inherits from FlatList with an "inverted" parameter. This parameters applies transform: scaleY(-1) to the list items flipping the list vertically upside down.

Sorry but i really don't understand what you are really trying to explain here, can you be more specific in terms of what the ideal behaviour should be and why the inconsistency is happening.

The repeated "Say Hello" chat message has nothing to do with the front-end UI; it is coming directly from the backend API responsible for the chat messages.

Does that happen on staging as well, or is it happening only when we apply your suggested solution?

wasxxm commented 1 day ago

Can you please explain why the issue is occurring (RCA) along with links to our codebase Sorry but i really don't understand what you are really trying to explain here, can you be more specific in terms of what the ideal behaviour should be and why the inconsistency is happening.

Let me explain it in more simple terms:

In the file https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionsList.tsx at line 684, you can see <InvertedFlatList .. />. This component is responsible for rendering the UI for the messages in the chat window such as the tasks, invoices, and welcome texts, in a list. A closer inspection of the component's CSS styling reveals that it has a CSS rule transform: scaleY(-1) which flips the list upside down. This was done to display the latest messages at the bottom of the chat; had it not been applied, you will end up seeing the newest chat/messages at the very top of the chat list.

However, this introduces a problem in the way browsers treat the z-index property of an HTML element. Whenever a CSS based transformation, such as scaling in above case, is applied on an HTML element, it loses its original z-index property in relation to other elements in the DOM.

The same phenomenon happens in this case. The messed up UI you see in this case is because of a DIV with a background image coming in front of the chat list, even though it has a z-index of -1. If you go to line 63 of the file: https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionItemCreated.tsx, you can see this component \; this is the component rendering a DIV with a background image using CSS. So as soon as the transform: scaleY(-1) is applied on the list, as I mentioned above, this background component comes to the front of the chat list UI.

The ideal behaviour should be not to flip the list of chat list UI; instead, a reverse sorting should have been applied at the backend, so that latest messages appear at the bottom of the chat without any UI tricks.

Does that happen on staging as well, or is it happening only when we apply your suggested solution?

Yes, it happens at the staging as well. I can see through my Google Chrome Network Logs that the API endpoint: https://staging.expensify.com/api/OpenReport? returns an array inside onyxData with duplicate or almost similar objects for a single task with "actionName": "ADDCOMMENT",:

{
    "onyxMethod": "merge",
    "key": "reportActions_4082806742617648",
    "value": {
        "1902385733061192700": {
            "person": [
                {
                    "type": "TEXT",
                    "style": "strong",
                    "text": "Waseem Khan"
                }
            ],
            "actorAccountID": 17802616,
            "message": [
                {
                    "type": "COMMENT",
                    "html": "task for sfefefefef",
                    "text": "task for sfefefefef",
                    "isEdited": false,
                    "whisperedTo": [],
                    "isDeletedParentAction": false,
                    "deleted": "",
                    "reactions": []
                }
            ],
            "originalMessage": {
                "html": "task for sfefefefef",
                "lastModified": "2024-07-13 07:26:55.132",
                "taskReportID": 617253907972382
            },
            "avatar": "https:\/\/d1wpcgnaa73g0y.cloudfront.net\/285f0f984f8c54c9ca2c386d0e16587f5d98e416_128.jpeg",
            "created": "2024-07-13 07:26:55.132",
            "timestamp": 1720855615,
            "reportActionTimestamp": 1720855615132,
            "automatic": false,
            "actionName": "ADDCOMMENT",
            "shouldShow": true,
            "reportActionID": "1902385733061192700",
            "previousReportActionID": "1283128664733577895",
            "lastModified": "2024-07-13 07:26:55.132",
            "childReportID": "617253907972382",
            "childType": "task",
            "childReportName": "sfefefefef",
            "childOwnerAccountID": 17802616,
            "childManagerAccountID": 17802616,
            "whisperedToAccountIDs": []
        },
        "1283128664733577895": {
            "person": [
                {
                    "type": "TEXT",
                    "style": "strong",
                    "text": "Waseem Khan"
                }
            ],
            "actorAccountID": 17802616,
            "message": [
                {
                    "type": "COMMENT",
                    "html": "task for sdcsfds",
                    "text": "task for sdcsfds",
                    "isEdited": false,
                    "whisperedTo": [],
                    "isDeletedParentAction": false,
                    "deleted": "",
                    "reactions": []
                }
            ],
            "originalMessage": {
                "html": "task for sdcsfds",
                "lastModified": "2024-07-13 07:26:45.954",
                "taskReportID": 6672766817607404
            },
            "avatar": "https:\/\/d1wpcgnaa73g0y.cloudfront.net\/285f0f984f8c54c9ca2c386d0e16587f5d98e416_128.jpeg",
            "created": "2024-07-13 07:26:45.954",
            "timestamp": 1720855605,
            "reportActionTimestamp": 1720855605954,
            "automatic": false,
            "actionName": "ADDCOMMENT",
            "shouldShow": true,
            "reportActionID": "1283128664733577895",
            "previousReportActionID": "3794866778627686587",
            "lastModified": "2024-07-13 07:26:45.954",
            "childReportID": "6672766817607404",
            "childType": "task",
            "childReportName": "sdcsfds",
            "childOwnerAccountID": 17802616,
            "childManagerAccountID": 17802616,
            "whisperedToAccountIDs": []
        },
        "3794866778627686587": {
            "reportActionID": "3794866778627686587",
            "previousReportActionID": "0",
            "actionName": "CREATED",
            "created": "2024-07-13 07:26:22.292",
            "reportActionTimestamp": 1720855582292,
            "avatar": "https:\/\/d1wpcgnaa73g0y.cloudfront.net\/285f0f984f8c54c9ca2c386d0e16587f5d98e416_128.jpeg",
            "message": [
                {
                    "type": "TEXT",
                    "style": "strong",
                    "text": "You"
                },
                {
                    "type": "TEXT",
                    "style": "normal",
                    "text": " created this report"
                }
            ],
            "person": [
                {
                    "type": "TEXT",
                    "style": "strong",
                    "text": "Waseem Khan"
                }
            ],
            "automatic": false,
            "sequenceNumber": 0,
            "shouldShow": true,
            "lastModified": "2024-07-13 07:26:22.292"
        }
    }
}

Expensify / App

[$500] Chat - UX covers message #44388

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Screenshot