Playground

[MutterPedro]

Added the playground feature, inspired on the DB workbenches console. This is a feature that I miss so much when I am using Parse Dashboard. Often I need to make custom queries that is not implemented in my project and the ordinary filters can't provide to me. I was planning to do it for a long time, but just now I had a little bit of time. Accepting new suggestions and improvements. Hope you like it!

[davimacedo]

I like the idea! Maybe we should improve little bit the design. But it is actually a very good start as is. Can you please check the integration errors out? @dplewis @acinader thoughts?

[acinader]

just looking at the pics here, but l love the idea.

[dplewis]

I like it, will definitely pull this down.

[MutterPedro]

Hello guys, I am really happy you like the idea! I am open to ideas and suggestions, mainly on design. I am trying to see whats the problem in the CI, but It seems that just stuck on the npm ci step. It happened just when I merged the latest changes from the master... 🤔

[MutterPedro]

I updated the dependencies with npm audit fix and fixed the Travis CI problem 🎉 🙌 @davimacedo

[davimacedo]

Few comments here

[davimacedo]

In addition to the code review, I pulled and did some tests. I actually didn't understand very well how the output works. With one-line find statements it works pretty well, but I didn't understand the behavior in the case we have multiple lines and I'd like to log something or even save and return an object. It is also very hard to understand the errors since there is no error output. Maybe would be better just output the the execution logs instead of the object tree? Maybe both of them?

In terms of design:

• Do you think there is any chance to have an auto-complete?
• What do you think of a dark mode?
• I've also thought about this feature in the past but the way I imagined it would be in a collapsible window fixed in the bottom of the page (like most of the IDEs) in such a way that you can navigate through the pages without closing the playground. It would be very nice being able to see the data and work with the SDK at the same time. I am not sure if my idea it is clear to you. What do you think about it?

[MutterPedro]

Hey @davimacedo, thanks for your review and feedback. It is the first version, so yes we can improve it much more. I was inspired by the consoles on the DBs workbench, where you run the queries and see the results. So, to emulate it, I make the output be the last statement, I hardcoded I return in the last statement before evaluating the code. If you write a multiline script, it won't work unless you separate the statements with a semicolon. That is the workaround that I needed to do by now to make it work with multi statements and returning just the last one. But I like the idea to print the console.something() statements too, or doing something like the runkit does.

About the design bullets:

• I will try to find a component with an auto-complete feature for Javascript.
• I guess that the component I used has a theming property, so we can make a toggle to switch the mode, what you think?
• I understand what you mean, but it would be new to Parse Dashboard, there is nothing with this design there yet, do you think it would fit the current design? My first think about the output was to show the result in a table, like in the browser tab. Like it would be a custom filter.

[MutterPedro]

I am intending to change the code editor component to one of these:

• https://www.npmjs.com/package/react-ace (have basic autocomplete and themes)
• https://www.npmjs.com/package/react-monaco-editor (code editor which powers VS Code, supported by Microsoft)

[davimacedo]

I think it is for sure a good start that can be improved later. I've just tried to add some ideas but feel free to only implement what you believe is necessary/easy now. In terms of the output, why don't we just execute the code and print out the console logs + the object that it was explicitly returned using return keyword (I'd not try to add it automatically in the last line).

[MutterPedro]

I thought about it... But you don't feel strange to put a return in a thing that you don't know is a function? I agree with you that printing the console would be great. I will change the code editor component to support basic autocomplete and dark mode, together with it I implement the console.

[davimacedo]

yes... it is kinda strange... maybe we should just print out the logs. Then each one can choose the best way to use. Maybe I'd do something like this:

console.log(main());

function main {
  ...
  return 'Hello World!'
}

[MutterPedro]

I will try this approach to see if we like it

[MutterPedro]

Hello guys! Here I am again. I made some improvements on the component, moved the editor to React Ace Editor, now it haves a simple autocomplete, dark mode, snippets, and the results are only shown when console.log or console.error is used. I really liked this version, I guess the UX is much more intuitive and the UI is much more pleasant. What do you think? @davimacedo @acinader @dplewis

Here are some print screens:

[davimacedo]

Nice job! It is very good now. What do you think about moving it inside API Console menu? Maybe it could be called "JS Console"

[MutterPedro]

Thanks! I think it is much better too, and yes I guess that would be the right place to that feature. Also, I need to update the docs to explain how the playground works, can I do it in this PR?

[MutterPedro]

Made the requested changes 👍

[davimacedo]

I see you are also Brazilian, so my feedback will go in Portuguese: "Está animal!!!" :)

Two things more and we can merge:

1 - What do you think about changing the default example to be something like this?

const myObj = new Parse.Object('MyClass');
myObj.set('myField', 'Hello World!')
await myObj.save();
console.log(myObj);

2 - I think your IDE is set to use " instead of ' and it replaced all existing " to ' in the files that you changed. Could you revert this?

[MutterPedro]

Sim @davimacedo , sou brasileiro também, fico feliz que gostou da minha contribuição hehe 🇧🇷 🎉

1. I changed the JS Console placeholder to your suggested code.
2. I added a rule on eslint config to force the single quote. It was my IDE indeed that was doing that reformatting.
3. After adding that rule, I ran npm run lint -- --fix. That's why there are many files changed, but at least they are all using the single quote 😅

[davimacedo]

Nice job! LGTM!

[okoumea]

Hello,
Please how to remove the placeholder ?
I have to manually delete each line every time i want to use the JS Console.