Spike: Flatten Work Items object structure

Summary

This issue explores the possibility of flattening work item object for ease of use on frontend, getting rid of repetitive logic of parsing widgets array, and potentially improving VueApollo cache updates in places like Child items widget.

Example

Here's an example of a Work Item object containing metadata like assignees & labels;

{
  "id": "gid://gitlab/WorkItem/1"
  "iid": "1"
  "title": "Foo"
  ...
  ...
  "widgets": [
    {
      "type": "ASSIGNEES",
      "assignees": {
        "nodes": [
          {
            "id": "gid://gitlab/User/1"
            "username": "Bar"
          }
        ]
      }
    },
    {
      "type": "LABELS",
      "labels": {
        "nodes": [
          {
            "id": "gid://gitlab/GroupLabel/1"
            "title": "Some Label"
          }
        ]
      }
    },
  ],
}

The flattened structure would look similar to what Issuables have;

{
  "id": "gid://gitlab/WorkItem/1"
  "iid": "1"
  "title": "Foo"
  "assignees": [...],
  "labels": [...]
}

While it may look like it is going against the design philosophy of Work Items architecture, it is something that we need to abstract out of the presentation logic (i.e. Vue components) and instead have it in Apollo resolvers such that Vue components do not need to know where in widgets array a given widget is present.

Also, the example above is a simple usecase, but when you look at instances where we need to show blocked/blocking information on Linked Items for instance, the frontend needs to look deeper in the widget array to be able to get the information of how many items are blocked/blocking a given item;

Notice how we need to look at 2 levels deep widget array just to get count of blocked/blocking items.