Image collections are not correctly structured in the postMessage

[akash1810]

Short description

An app can integrate with Grid by creating an iframe and listening to a postMessage (demo here).

When an image has a collection, the collections are not correctly represented in the postMessage data.

It looks like the cause is either in thesesus or Grid failing to follow the argo spec.

Grid will getEntity to craft the payload of a postMessage, this calls out to thesesus, ultimately landing here and reaching the RHS of the ternary. This is because collections in the Grid API are an array of objects and thesesus is only working on objects.

Steps to reproduce

• Upload image
• Add image to collection
• View the image in the media-api and observe the data on the collections prop
• Run an app that iframes Grid (editions-card-builder, facia-tool or even the demo linked above)
• Add the following event listener on the window to log any messages:

window.addEventListener("message", msg => {
  if(msg.origin === "https://media.gutools.co.uk") {
    console.log(msg.data.image.data.collections)
  }
})

• Select the image
• Observe the collections being the wrong shape (an array of empty objects, rather than an array of collections)

Actual results (including screenshots)

[{}]

Expected results (including screenshots)

[
  {
    "uri": "https://media-collections.gutools.co.uk/images/746d85eb450c911eca54abf4c1a1eb8afa4e9f07/Observer/Magazine/Features/Fashion%20Rental/Selfridges",
    "data": {
      "path": [
        "Observer",
        "Magazine",
        "Features",
        "Fashion Rental",
        "Selfridges"
      ],
      "pathId": "observer/magazine/features/fashion rental/selfridges",
      "description": "Selfridges",
      "cssColour": "#006f94",
      "actionData": {
        "author": "foo.bar@guardian.co.uk",
        "date": "2020-09-08T14:32:30.925+00:00"
      }
    }
  }
]

OS and browser details

All environments.