feat: Add pagination to data browser

[dblythy]

New Pull Request Checklist

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

Issue Description

Closes: #2571

Approach

TODOs before merging

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

[parse-github-assistant]

I will reformat the title to use the proper commit message syntax.

[parse-github-assistant]

🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review.

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-61441

⌚ Updated Feb 28, 2025, 14:54 UTC

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

📄 View Application Logs etc.

What is Uffizzi? Learn more

[mtrezza]

Great feature!

•  There are the vars const MAX_ROWS = 200; and const MAX_ROWS_FETCHED = 200; which set a hard limit to 200 rows. I think these need to be dynamic now that the number of rows per page can be set manually. For example, if we add a new value like 500 to the list of {[10, 20, 50, 100, 200, 500].map((size) , there should be 500 rows rendered. I think query.limit(MAX_ROWS_FETCHED); essentially makes the dashboard fetch 200 rows, but if the rows/page value is lower, less rows get displayed, so the dashboard may be fetching rows that are not even shown?
•  When clicking on the next / previous button, the data browser should jump to the top. Otherwise, especially when clicking on "next", the user'd have to scroll up to continue seeing data that is sorted by a date for example.
•  Instead of adding an empty space to the top of the BrowserFooter, add a light gray line and ensure the bar is the same hight as the bottom bar in the menu column on the left. Also reduce size of next/previous buttons.
•  The number of items per page should be set dashboard wide and remembered across sessions. I assume dashboard already has a data store for that. Let's do this: after install, dashboard has a default rows/page of 100. If the user changes the value, that value is stored in the data store and used as default rows/page value for all newly opened dashboard tabs and sessions. In other words, changing the value in any tab simply sets that value as the new default for all newly opened tabs.
• Reset current page when changing class or applying filter. For example, currently, when on page 2 and then navigating to a class that has only 1 page, no objects are displayed because page 2 does not exist.
• Adjust font size

[dblythy]

What do you mean by

Instead of adding an empty space to the top of the BrowserFooter, add a light gray line and ensure the bar is the same hight as the bottom bar in the menu column on the left. Also reduce size of next/previous buttons.

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-61596

⌚ Updated Mar 06, 2025, 00:08 UTC

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

📄 View Application Logs etc.

What is Uffizzi? Learn more

[mtrezza]

I was referring to the height difference between the top edge of the new FooterBar for pagination and the existing menu bar on the left side, see red lines in screenshot. I also meant that there is no visible separation between the new footer bar and the data cells, so maybe add a light gray line for the top corner, or add a light gray background color, see green circle in screenshot

Btw, there's also a new issue since the last commits where the pagination buttons are disabled.

[dblythy]

Btw, there's also a new issue since the last commits where the pagination buttons are disabled.

What do you mean? From my testing they only disable when there isn't enough data

[mtrezza]

Yes, I have observed the buttons disabled even though there was more data. I was able to reproduce the issue several times. Have there been any changes in the recent commits that could have caused this? I haven't observed that when I wrote the previous feedback.

[dblythy]

If you don't mind, could you possibly provide some replication steps and/or a screenshot? I've been unable to replicate the bug

[mtrezza]

Sure, let me try

[dblythy]

@mtrezza let me know how you go when you get the chance 😊

[mtrezza]

Sure, I'll take a look in a bit...

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-62155

⌚ Updated Mar 23, 2025, 14:21 UTC

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

📄 View Application Logs etc.

What is Uffizzi? Learn more

[mtrezza]

I was able to reproduce.

1. Open Uffizi
2. Create class "Test".
3. Run the following to the JS API console:

   const promises = [];
     for (let i = 0; i<100; i++) {
       const myObj = new Parse.Object('Test');
         for (let f = 0; f<30; f++) {
           myObj.set(`field${f}`, 'Hello World!')
         }
       promises.push(myObj.save());
     }
     await Promise.all(promises);
   

4. Navigate to "Test" class.
5. The buttons are disabled, the page values show "1 / 0".

I think that is because the total number of records in the class is also determined to be "0", as shown next to the class name. After refreshing the browser tab, the records counter updates to the correct value and paging works. I understand that the paging is depending on that counter value, that's fine. If the number of total records in a class did not update also before this PR, i.e. the bug was not introduced by this PR, then we can ignore it in this PR.

And could you please fix the merge conflicts?

Screen.Recording.2025-03-23.at.15.56.24.mov

[mtrezza]

@dblythy could you please fix the lint issues, and when this is ready, could you please request a review?

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-62182

⌚ Updated Mar 24, 2025, 14:18 UTC

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

📄 View Application Logs etc.

What is Uffizzi? Learn more

[uffizzi-cloud]

Uffizzi Ephemeral Environment deployment-62253

⌚ Updated Mar 27, 2025, 01:11 UTC

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

📄 View Application Logs etc.

What is Uffizzi? Learn more

[parseplatformorg]

🎉 This change has been released in version 7.1.0-alpha.1