slick 5:4 and 4:5 crop sharing from composer to fronts tool

[twrichards]

Pre-requisite PRs (9)

• 📌 load pinboard for V2 fronts tool if user has Pinboard permission (and feature switch on) facia-tool#1679
• add empty element per article card, to act as handle for Pinboard 📌 to attach to (using urlPath as data attribute) facia-tool#1695
• add spinner overlay on trail image when dropping or pasting an override facia-tool#1697
• https://github.com/guardian/workflow/pull/1119
• expose aspect ratio and crop type on asset-handle elements (used by Pinboard) grid#4350
• https://github.com/guardian/flexible-content/pull/4984 and https://github.com/guardian/flexible-content/pull/4999
• add feature flag mechanism #321
• https://github.com/guardian/flexible-content/pull/5049
• remove the feature switch show-cropping-gutters-switch (still GNM only) grid#4348

alternateCropSuggesting Feature Switch

This PR makes use of the feature switch mechanism added in #321, via a new feature switch alternateCropSuggesting (set via a query param on any page of the host tool). All the below changes (Composer and all Fronts Integration) will only display with the feature switch on. Doing it this way allows users to be trained over a few weeks and will see the new functionality from whenever they once visit a fronts/composer URL with ?pinboardFeatureFlag_alternateCropSuggesting=true onwards (as the feature flag is persisted to their user in the DB).

Composer changes

Thanks to https://github.com/guardian/flexible-content/pull/4984 and https://github.com/guardian/flexible-content/pull/4999 we have a new <pinboard-suggest-alternate-crops> element which sits beneath the 'Alt text' of the trail/thumbnail in the Furniture panel. Pinboard detects this element (as with other tools integrations) and populates it using React portal (and shadow DOM) to display a heading and two new crop ratios, with a button and count for each...

• clicking the button pops up a new iframe modal (implemented in Pinboard, but similar to that already in composer) which restricts the crop ratio and upon cropping (or selecting a suitable existing crop) uses the postMessage to share the crop to the pinboard, sending and expanding automatically so the user can see what has happened
• the count displays the count of crops at that ratio (thanks to expose aspect ratio and crop type on asset-handle elements (used by Pinboard) grid#4350) within the 'pre-selected pinboard' for the composer piece in question (this required some refactors to push some stuff up to global application state).
  Hovering over the count displays a smallish tooltip showing small thumbnails for the crops of that ratio...
  
  ...clicking on those thumbnails will expand the pinboard, scroll to the item and flash to highlight, so the user can see any supporting contextual messages if any have been sent).

Pinboard also adds translucent gutters down the L&R sides of the trail to help remind users what will be clipped off with the automatic 5:3 -> 5:4 crops (centring the image)...

...these complement the gutters users will have seen in the grid when they were cropping for main/trail (thanks to https://github.com/guardian/flexible-content/pull/5049 composer will only send the shouldShowCropGuttersIfApplicable query param to Grid IF pinboard has taken over the <pinboard-suggest-alternate-crops> - i.e. grid's cropping gutters only show for users with the feature switch on - indirectly though, since pinboard doesn't run in iframed grid, only standalone grid - so grid cannot check the feature switch itself).

Fronts integration

This PR adds Fronts integration (previously there wasn't any pinboard in fronts tool).

Since Pinboard uses workflow items for pinboards (pinboardId is just a workflow stub id) the only bit of connecting information between a card in fronts and the pinboard is via the urlPath field, we needed to allow searching for many url paths in one go, returning a list of workflow ids - cue https://github.com/guardian/workflow/pull/1119.

Thanks to...

• 📌 load pinboard for V2 fronts tool if user has Pinboard permission (and feature switch on) facia-tool#1679
• add empty element per article card, to act as handle for Pinboard 📌 to attach to (using urlPath as data attribute) facia-tool#1695
• correctly pass urlPath to FeedItem, rather than using liveUrl facia-tool#1705
• phasing out pinboard feature switch in fronts tool itself (added in 📌 load pinboard for V2 fronts tool if user has Pinboard permission (and feature switch on) facia-tool#1679), once this PR is released, before training commences in default pinboard feature switch to ON in all envs facia-tool#1735 and then remove pinboard feature switch entirely facia-tool#1734

...we now have a <pinboard-article-button> on the various cards in fronts tool (typically in the hover menu), each with a data-url-path attribute (see previous para). Pinboard detects these elements (as with other tools integrations) and populates each using React portals (and shadow DOM) to display for a given pinboard a...

• count of all items in that pinboard
• a count of all crops (if present)
• a count of 5:4 crops (if present)
• a count of 4:5 crops (if present)

... allowing users to see at a glance which cards have pinboard discussions and suitable assets to use as overrides on the cards. All the following are when hovering...

'Latest' feed

Clipboard

Container (collapsed)

... clicking the yellow buttons opens Pinboard to the relevant pinboard.

Then for the expanded cards, in a container, we get thumbnails for the crops of the appropriate ratio, in the GIF below this is a 5:4 container...

...notice how clicking on the suggested crop takes you to the relevant image in the chat (to see if there's any useful context), the user can then drag the thumbnail to replace the trail image (alas fronts tool is quite slow doing this).

[andrew-nowak]

we've had a walkthrough so I've seen it working, logic seems fine but I've not done a super-deep-dive into it. Just a couple of comments which could be addressed in a followup

great work!

[prout-bot]

Seen on PROD (merged by @twrichards 3 minutes and 13 seconds ago) Please check your changes!