Add JS API console auto-scrolling to bottom

[mtrezza]

New Issue Checklist

• [x] I am not disclosing a vulnerability.
• [x] I am not just asking a question.
• [x] I have searched through existing issues.
• [x] I can reproduce the issue with the latest versions of Parse Server and Parse Dashboard.

Issue Description

The JS console does not auto-scroll to the newest log entry at the bottom of the window. This makes it difficult to follow log output.

Steps to reproduce

Run

for (let i = 0; i<100; i++) {
console.log("x");
}

Actual Outcome

Newer log entries are not visible when the log window is full.

Expected Outcome

Scroll to newest entry at the bottom, if scroll position is at the bottom to begin with. The auto-scrolling to bottom should not occur when the window is not currently scrolled to the bottom.

Environment

Dashboard

• Parse Dashboard version: 5.2.0-alpha.11

[parse-github-assistant[bot]]

Thanks for opening this issue!

• 🚀 You can help us to fix this issue faster by opening a pull request with a failing test. See our Contribution Guide for how to make a pull request, or read our New Contributor's Guide if this is your first time contributing.

[patelmilanun]

I think the editor itself is a bit buggy. If I select all text and paste something the default text is getting appended.

[patelmilanun]

One more thing what if we change it approach completely. Meaning new logs will be logged on top. So bottom-up approach. Old logs will be at bottom and newer logs will be on top.

[mtrezza]

New lines should be at the bottom, it's the expected behavior of an IDE debug output.

Maybe we should throw out the console and look for a more modern one?

[AshishBarvaliya]

I believe the console should have its own separate scroll function. Currently, when I scroll to the bottom, the written code moves to the top and becomes invisible. It would be ideal if we could replicate the log console similar to the one in VS Code. This means having a separate scroll specifically for the console, always kept at a smaller size, and providing an option to expand the console if the user desires a larger view.

[mtrezza]

Aren't there more modern packages for a console like this where these things come OOTB? For example https://codemirror.net.

[patelmilanun]

https://github.com/microsoft/monaco-editor the editor. Can u explain a bit about what is the purpose of giving js console to the user. I mean what type of functionalities the users are checking inside it?

This is required to choose a console and its behavior like live preview, clear on run, scroll to bottom something like that. Here is a great example of javascript online IDE https://playcode.io/empty_javascript

[mtrezza]

I think the main use cases are:

for developers:

• get familiar with Parse Platform syntax (first playground for new developers, before using client SDKs)
• test out functionality in dev environment

for users:

• mass-update data (instead of manually via data browser)

@parse-community/dashboard Any other suggestions?