feat: Add data panel to display object related data fetched via Cloud Function

[vardhan0604]

New Pull Request Checklist

• I am not disclosing a vulnerability.
• I am creating this PR in reference to an issue.

Issue Description

fixes #2495

Approach

TODOs before merging

• Add tests
• Add changes to documentation (guides, repository pages, in-code descriptions)

[parse-github-assistant]

Thanks for opening this pull request!

• ❌ Please link an issue that describes the reason for this pull request, otherwise your pull request will be closed. Make sure to write it as Closes: #123 in the PR description, so I can recognize it.

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-54723

⌚ Updated Jul 28, 2024, 13:26 UTC

☁️ https://app.uffizzi.com/github.com/parse-community/parse-dashboard/pull/2584

📄 View Application Logs etc.

What is Uffizzi? Learn more

[vardhan0604]

@mtrezza can you please review it?

[mtrezza]

I tried to review it, but couldn't get it to work. Could you please post the parse-dashboard-config.json file and a video of how you get the panel to show?

I tried with this:

{
  "apps": [
    {
      "serverURL": "http://localhost:1337/parse",
      "appId": "hello",
      "masterKey": "world",
      "appName": "",
      "iconName": "",
      "primaryBackgroundColor": "",
      "secondaryBackgroundColor": "",
      "infoPanel": [
        {
          "title": "User Details",
          "classes": ["_User"],
          "cloudCodeFunction": "getUserDetails"
        }
      ]
    }
  ],
  "iconsFolder": "icons"
}

[vardhan0604]

Hey @mtrezza , this is my parse-dashboard-config.json

{
  "apps": [
    {
      "serverURL": "http://localhost:1337/parse",
      "appId": "1234",
      "masterKey": "12345",
      "appName": "MyApp",
      "infoPanel": [
        {
          "title": "User Details",
          "classes": ["_User"],
          "cloudCodeFunction": "user"
        },
        {
          "title": "Purchase Details",
          "classes": ["Purchase"],
          "cloudCodeFunction": "purchase"
        }
      ]
    }
  ]
}

Its working on my laptop , if any class has a cludfucntion defined for it in the config , we will get the show panel button otherwise there is not show panel button

this is the video of the feature working

screen-capture.3.webm

[404-html]

I love this feature! I think we can also close #2002 when this gets merged.

[404-html]

Overall - impressive! 👏👏👏👏

[vardhan0604]

Looks great, the only bug I've found was that when clicking a column headline and the object list reorders, the same object line with a different object is selected, and the panel shows data for the previously selected object.

1. Show panel & select obj A
2. Click on a header column to reorder objects --> a different obj B will be auto-selected
3. Panel does not update data but shows data of obj A

I think if we can get this last thing fixed, then let's merge this.

@mtrezza I have fixed what you ask , can you check and lemme know is this how you wanted it to be?

[vardhan0604]

@mtrezza, could you let me know whether we should remove the selectedCell after reordering, or should we call the cloud function for a new objectId?

[mtrezza]

Whatever makes more sense in your opinion. I see the fact that the cell stays selected after reordering a bit skeptical, if not even misleading. So maybe I would remove the cell selection after reordering if you think that makes more sense.

[vardhan0604]

Whatever makes more sense in your opinion. I see the fact that the cell stays selected after reordering a bit skeptical, if not even misleading. So maybe I would remove the cell selection after reordering if you think that makes more sense.

I felt the same, so I have removed the selection after reordering. I’ve pushed the changes. Could you please check them?

[mtrezza]

Great job! Thanks for taking this hefty feature on and your patience during the revisions and feedback. And thanks @404-html for testing this out and your feedback. Happy to merge this.

[mtrezza]

And just as I've merged this, I noticed that we totally forgot the documentation... adding via #2601.

[parseplatformorg]

🎉 This change has been released in version 6.0.0-alpha.14

[parseplatformorg]

🎉 This change has been released in version 6.0.0-beta.2

[parseplatformorg]

🎉 This change has been released in version 6.0.0

[vardhan0604]

Thank you so much @mtrezza @404-html ! It was a great experience working on this feature, and I really enjoyed the process. I learned a lot along the way and appreciate all the feedback and support. Looking forward to contributing more in the future!

[pastordee]

Hey @mtrezza , this is my parse-dashboard-config.json

{
  "apps": [
    {
      "serverURL": "http://localhost:1337/parse",
      "appId": "1234",
      "masterKey": "12345",
      "appName": "MyApp",
      "infoPanel": [
        {
          "title": "User Details",
          "classes": ["_User"],
          "cloudCodeFunction": "user"
        },
        {
          "title": "Purchase Details",
          "classes": ["Purchase"],
          "cloudCodeFunction": "purchase"
        }
      ]
    }
  ]
}

Its working on my laptop , if any class has a cludfucntion defined for it in the config , we will get the show panel button otherwise there is not show panel button

this is the video of the feature working

screen-capture.3.webm

Hi can we get an example of the cludfucntion code

[mtrezza]

It's pretty straightforward, you just create a Cloud Function that returns the JSON, according to the docs.

[chadpav]

I just updated to 6.0 and wanted to check out this new panel feature. I have added it to my config but I never see the Show/Hide button in the upper-right corner as he shows in the video. Any way to troubleshoot it? I was able to get the scripts feature working in a similar way.

...
infoPanel: [
        {
          title: 'User Details',
          classes: ['_User'],
          cloudCodeFunction: 'getUserDetails',
        },
      ],
...

[pastordee]

Me too got the script working but not the info panel

[mtrezza]

This issue is likely related to the response object. If you experience any issues with the panel, please open a new issue and post your dashboard config and the full, unredacted response of the Cloud Function that is sent to the dashboard.

[404-html]

I believe this happens when passing config to dashboard constructor (var dashboard = new ParseDashboard({...}) instead of using parse-dashboard-config.json file.
@chadpav @pastordee can you please confirm this is the case?

[pastordee]

Yes

[chadpav]

@404-html yes, I'm running the Dashboard as express middleware and passing config to the constructor. I'll open an issue so we can continue the conversation in the right place.

This feature (and scripts) are awesome, btw.