[HOLD for payment 2022-12-20] [$1000] [Feature] Update the chat UI to reflect drag-and-drop update ability

[roryabraham]

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

---

Action Performed:

Drag an image file over a chat

Expected Result:

1. The cursor should change to be a green +
2. The UI of the chat should update to reflect that you can drop the file in there and it will be uploaded

Actual Result:

1. The cursor changes to be a green + ✅
2. The UI of the chat does not update to reflect that you can drop the file in there and it will be uploaded ❌

Workaround:

n/a – this is polish to make an existing feature more intuitive.

Platform:

Where is this issue occurring?

• Web
• Desktop App

There is no concept of drag-and-drop on iOS, Android, mWeb, so this is a feature request for web and desktop only.

Version Number: 1.2.14-0
Notes/Photos/Videos:

This is how the feature looks in slack:

Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1665684156253079

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[roryabraham]

Bringing in @shawnborton for the mockups, then we can make this external.

[JmillsExpensify]

I think this was mentioned in the Slack thread, but we should think about what happens if someone tried to drag and drop over the LHN. Do we block that entirely? Do we highlight the individual row that is hovered over? I agree with @roryabraham that the chat window itself should be very straightforward, especially since we don't have threads and a right-docked side modal for reports yet.

[Christinadobrzyn]

User example of this behaviour - user is trying to drag & drop a doc for bank verification and it's creating an expense instead. https://github.com/Expensify/Expensify/issues/233722

Should I file this GH as a bug? I closed it in favour of this GH but i can reopen if it's better.

[shawnborton]

@JmillsExpensify for now I would suggest we just block the drag and drop action over the LHN, and only show feedback if the main chat pane is hovered. Will share screens shortly.

[shawnborton]

Added a quick mock to the Slack thread, but here it is too:

[melvin-bot]

Triggered auto assignment to @maddylewis (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

Current assignee @roryabraham is eligible for the External assigner, not assigning anyone new.

[roryabraham]

Cool, design LGTM let's get an upwork job created for this, then we can start accepting proposals.

[parasharrajat]

Calling all proposals...lol

[roryabraham]

for now I would suggest we just block the drag and drop action over the LHN, and only show feedback if the main chat pane is hovered.

Quick clarification – I'm going to ask that we display the no-drop cursor style if you drag a file into the app anywhere where it's not allowed, which for now should include the whole LHN

[parasharrajat]

And the report header as well. This is the default behavior of the browser. We are only listening for drop over report body and composer

[vladamx]

Proposal

The idea is to detect if dragging over dropzone is active and to use React Portal to render the overlay in the drop view.

You can check the code in the diff below.
https://github.com/Expensify/App/compare/main...vladamx:App:vladamx-proposal-11823-drag-and-drop-overlay?expand=1

@parasharrajat
This should get you a good idea on the strategy.

Details like adding the document icon from design, extracting the overlay to separate file, making sure there is no regressions on mobile etc ; will be a part of PR

Outcome:

Chrome/ Web

Chrome.mp4

Desktop

Upload.-.Desktop.mp4

[maddylewis]

created job posting here - https://www.upwork.com/jobs/~0198538cbc40aff5b9

[roryabraham]

PR merged. I think the correct payout for this is:

• $1000 base
• Additional $250 for storybook stories: Update the chat UI to reflect drag-and-drop #12056 (comment)
• Additional $500 that I'd like to authorize because the PR had a fair amount of scope creep, took a long time, and was working on shifting tides of the changing theme. @vladamx was flexible and persistent throughout the process, and I think that should be rewarded.

So $1750 total

[vladamx]

@roryabraham That's fair, thank you!

[maddylewis]

just noting here that i've seen this comment (#11823 (comment)) and will get this paid out before EOW.

[maddylewis]

@roryabraham - will you confirm if we're paying out $1750 to both the C and C+ on this one?

[parasharrajat]

@vladamx There is an issue from this PR https://expensify.slack.com/archives/C01GTK53T8Q/p1670528976295469. Could you please take a look?

[francoisl]

In addition, I wanted to confirm - what's the expected behavior if you try to drag and drop a file while the right-hand panel is open?

The QA team opened this issue but it kinda makes sense to me not to allow drag-and-dropping a file in this case (or that would mean you'd want to drag and drop in the RHP?)

video_09.mp4

[parasharrajat]

@francoisl I answered the same thing on the related issue.

[francoisl]

Thanks, works for me and I agree with you here.

[parasharrajat]

I think this error is happening because the child's componentDidMount is called before parent components. So it means that even though there is a microsecond difference in the mounting of these. Operations/calls are made in the wrong sequence. Thus the slightest delay will fix it.

In short, changing the execution order of dropzone mounting and document.getElementID(this.dropzone) will fix it which can be done as

        setTimeout(() => {
            this.dropZone = document.getElementById(this.props.dropZoneId);
            this.dropZoneRect = this.calculateDropZoneClientReact();
        });

But I am not suggesting this as a solution just the analysis.

[parasharrajat]

It seems that #11823 (comment) is not related to this PR but is caused by some other PR. 😄

[maddylewis]

im sorry for the delay on payment - will get this processed tomorrow.

[vladamx]

@maddylewis i think we made a mistake with payment. I received 1750 + 1000 and i think i should receive only 1750 for this job

[maddylewis]

uh oh! thanks for saying something @vladamx. is there a way in Upworks for you to reject the $1000 payment? i will also look into this on my end.

[maddylewis]

@parasharrajat - will you confirm the payment you're expecting for this issue? thanks!

[parasharrajat]

Same as #11823 (comment).

---

For an extra payment, the contractor can make a refund.

[vladamx]

@maddylewis Hm, i don't seem to have that option. Maybe you can contact their support. Transactions are still in pending so they might be able to cancel $1000 transaction.

I can confirm that i received the payment for this issue.

[maddylewis]

it sounds like i can request a refund. i will get on that. thanks again for letting me know, Vlad!

[maddylewis]

hey @vladamx - i needed @michaelhaxhiu to request a refund in Upwork since i didnt have the permissions for some reason. we requested a $1k refund, but then received notification from Upwork that the refund request was $1750.

will you let me know the refund you were requested on your end? sorry for the hassle here!

[vladamx]

@maddylewis i edited a refund to be 1000.
You should receive 900. 100 is service fee

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.38-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update the chat UI to reflect drag-and-drop #12056

If no regressions arise, payment will be issued on 2022-12-20. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[mallenexpensify]

Pretty sure this can be closed. Reopen and/or comment if not