Drag and drop screenshots to reorder

[bartaz]

Fixes #1673

Enables drag and drop to reorder screenshots on publisher listing page.

QA

• ./run or https://snapcraft-io-canonical-websites-pr-1772.run.demo.haus/
• go to listing page of any snap with screenshots
• drag a screenshot to reorder, if you drop it in different place change should be detected (Revert and Save should be enabled)
• if you drag back to same place (old order) Revert would be disabled again
• make sure adding screenshots works (and new screenshots can be reordered)
• make sure removing screenshots work (and dnd works after removing)
• make screen smaller (so screenshots don't fit into one line), make sure reordering works

[codecov-io]

Codecov Report

Merging #1772 into master will decrease coverage by 0.08%.
The diff coverage is 83.33%.

Impacted Files	Coverage Δ
static/js/publisher/form/media.js	89.09% <0%> (-10.91%)	⬇️
static/js/publisher/form/mediaItem.js	75% <100%> (+3.57%)	⬆️
static/js/publisher/form/mediaList.js	100% <100%> (ø)
webapp/publisher/snaps/logic.py	92.85% <100%> (ø)	⬆️

[webteam-app]

Starting demo at: https://snapcraft-io-canonical-websites-pr-1772.run.demo.haus/

[Lukewh]

When you have no images, upload 5, reorder and save - when the page reloads they're in the upload order. Maybe the inputs need reordering?

[hughesjordan]

Hey @bartaz a few issues:

• This part doesn't seem to work for me, revert button is still enabled:

• if you drag back to same place (old order) Revert would be disabled again

• When I add an image, re-order that image and click on save, it then re-appears in last slot.

• After saving any changes, when I re-order any image the 'Changes applied' notification does not disappear.

[bartaz]

@Lukewh it seems that our backend doesn't take order to account when it comes to new screenshots. It just adds new screenshots to the end of the list (in order of upload).
While reordering inputs may be a hacky workaround, it will only help if all screenshots are new, not if new ones are mixed between old ones. So I guess it would be better to fix it in our backend logic.

[bartaz]

@hughesjordan @Lukewh Updated so that order of newly added screenshots is correctly preserved.

For other issues:

if you drag back to same place (old order) Revert would be disabled again

I see it working for myself. @hughesjordan Is there any specific case when revert button is enabled if order is same as saved?

After saving any changes, when I re-order any image the 'Changes applied' notification does not disappear.

That is the case also for removing screenshots, etc. So I don't feel like it's an issue with this specific PR.

[hughesjordan]

@bartaz does not seem to be any specific case for me:

[bartaz]

@hughesjordan This doesn't seem to be related to screenshots, so I reported it separately (#1772).

Does screenshot reordering work good apart from that?

[hughesjordan]

@bartaz apart from that its good! 👍🏻

[Lukewh]

Looks good thanks @bartaz