Add data aggregation panel

[mtrezza]

New Feature / Enhancement Checklist

• I am not disclosing a vulnerability.
• I am not just asking a question.
• I have searched through existing issues.

Current Limitation

An object may have related information stored in other classes, for example a user and its related purchase history and its related payment transactions. This related information needs to be researched manually by going into the respective classes. With each navigation, only the information in the current class is visible, there is no aggregated view of all information at once, e.g. purchase history and payment transactions.

Feature / Enhancement Description

Add a slide-in panel that displays aggregated information related to the selected object in the data browser table.

The process should be:

1. User opens the side-panel
2. User selects a row in the data browser table by clicking any field
3. The selected object is sent incl. all its fields to a Parse Server Cloud Function
4. The response is displayed in the info panel

Example Use Case

Dashboard options could look like this:

"apps": [
  {
    "infoPanel": [
      {
        "title": "User Details",
        "classes": ["_User"],
        "cloudCodeFunction": "getUserDetails",
      }
    ]
  }
]

The response of the Cloud Function could be:

{
   // Nest response in `segments` property to be able to extend the response object
   // in the future if needed; the `segments` property is an ordered array so that 
   // it can display segments in a given order
  "segments": [
    {
      // The segment title
      "title": "Purchases",
      // The items within the segment; as ordered array to display items in a given
      // order; items here are only
      "items": [
        {
          // A plain text field
          "type": "text",
          "value": "This user has a high churn risk!"
        },
        {
          // A key-value style
          "type": "keyValue",
          "key": "Lifetime purchase value",
          "value": "$10k"
        },
        {
          // A key-value style with a linked URL
          "type": "keyValue",
          "key": "Last purchase ID",
          "value": "012345",
          "url": "https://example.com/purchaseDetails?purchaseId=012345"
        },
        {
          // An image
          "type": "image",
          "url": "https://example.com/images?purchaseId=012345"
        }
      ]
    }
  ]
}

The panel could look like this:

• The panel size should be resizable by the dashboard user do adapt it depending on available screen space and displayed info; some form of control like a drag handle would be needed for that, not visible in the screenshot.
• When being resized, text should wrap and images should resize.
• Sliding the panel in completely, so that it doesn't appear should disable loading the info unnecessarily.
• The panel should not cover any space other than the data browser itself.

Alternatives / Workarounds

• Research manually by navigating to each class
• User Dashboard Script to display information in a pop-up message

Future extensions

• Add buttons to execute scripts on the user, like the existing scripts feature in the context menu.

[parse-github-assistant]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[mtrezza]

@Bhavyajain21 this may be interesting for you