Drag'n'drop to promote channel

[bartaz]

Fixes #1961
Fixes #1962
Fixes #1963

Adds drag'n'drop to releases page.
Channels can now be promoted using drag'n'drop.

QA

This is new quite complex feature. Please make sure to QA on different snaps (different number of architectures, devmode revisions, closed channels, etc) and in different browsers (it uses native drag'n'drop, so browser implementations may differ).

• ./run or https://snapcraft-io-canonical-web-and-design-pr-2019.run.demo.haus/
• go to releases page or any snap (many snaps ideally)
• try to promote some stuff using drag'n'drop
• make sure that things that can be normally promoted can also be promoted with drag'n'drop
• make sure that things that can't be normally promoted (empty channel, devmode) can't be promoted with drag'n'drop
• click on things, try drag'n'drop in different UI states

[webteam-app]

Starting demo at: https://snapcraft-io-canonical-web-and-design-pr-2019.run.demo.haus/

[therealjuan-zz]

A few comments:

• Can we use a pointer icon instead of the cross?
  

• Would it be possible to make the whole cell draggable?

• There should be a separate issue for moving the promote actions as part of the new options (cog) area instead of just the bin?

• I will probably have a review on the visuals with Mr. @kwm14

[bartaz]

Thanks for comments @therealjuan

• Can we use a pointer icon instead of the cross?

We can, but it's most common for click interaction, not drag.
But there are some dnd related cursors in CSS we may try (not sure about their browser compatibility, but we can try and have fallback to "move" cross):

• Would it be possible to make the whole cell draggable?

It would I guess, but it's get tricker, because we have interactive elements in it (things that have tooltips, things that are clickable), and I'm not sure how they will work together.
Tooltips are most annoying, because if you start drag with tooltip open it will likely be visible during drag, etc. We will need to find some workarounds for that.
Also when we lated make revision cells draggable: they are clickable as a whole, they have tooltip as a whole, they may have a 'cancel' icon in it that is clickable... and we will make it draggable as a whole...
And all those elements are actually both draggable and drop targets at the same time (which is a bit tricky by itself).

So... long story short - I guess it may be possible, but complicates the implementation and may lead to even more weird cases to work around.

• There should be a separate issue for moving the promote actions as part of the new options (cog) area instead of just the bin?

Ideally yes - we can do it before or later the drag and drop is finished.

[therealjuan-zz]

Some comments to discuss tomorrow:

• Once you drag a channel into another one, might be good to highlight as well the channel that you end up promoting to
  
• Could we use grab instead of the cursor to drag? Similarly to what happens with a message on gmail
• Can we update the highlighted colour to use rgb(250, 230, 190)?

[codecov-io]

Codecov Report

Merging #2019 into master will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted Files	Coverage Δ
static/js/publisher/release/selectors/index.js	100% <100%> (ø)	⬆️

[bartaz]

• Once you drag a channel into another one, might be good to highlight as well the channel that you end up promoting to

Done. If all revisions in given channel are promoted, channel will be highlighted as well.

• Could we use grab instead of the cursor to drag? Similarly to what happens with a message on gmail

Turns out to be hard. We can change the cursor of the handle before it's dragged, but once dragging starts it's browser that controls cursor and we have little control over it. To fix that we would need to create custom implementation of drag'n'drop functionality which is probably not worth the cost just to change the cursor.

• Can we update the highlighted colour to use rgb(250, 230, 190)?

Done.

[Lukewh]

Not sure if there's anything we can do about it, but letting go makes the dragged element reset it's drag centre to the top left of the element.

[Lukewh]

If you click to select a different revision for an architecture, then drag, should we de-obscure the main table?

[bartaz]

Not sure if there's anything we can do about it, but letting go makes the dragged element reset it's drag centre to the top left of the element.

I don't see it happening (both in Chrome or Firefox). So this may be some native issue. Not sure if we have any control on that.

[Lukewh]

👍 Code looks good and functionality works - just some minor UI/ UX things (that can maybe be deferred?)

[therealjuan-zz]

Desk review done. Looking juanderful!