AQL Table Creation UI

[jjnesbitt]

Fixes #106.

This adds the UI for several key features:

• Running AQL queries
• Viewing the result of AQL queries
• Creating tables from the result of AQL queries

A new dependency is added, vue-json-pretty, which allows for viewing the JSON results in a clean way.

[jjnesbitt]

Due to the previews not building, I've included some screenshots:

[jtomeck]

@AlmightyYakob sorry that I'm just getting to this review. I love it so far, but have a couple thoughts. Let me know if you need clarification on anything I flesh out below

1.) Would it make sense to make the textarea where the AQL is written to take up the full screen (except the sidebars and headerbar of course), and maybe have controls for dark theme text field. I think what you have there is a monospaced/code font, right (I was gonna suggest it if not)?
2.) I'm not sure the right sidebar needs to be done with expansion panels. What if it were 3 evenly sized cards, with separate headings, and lists inside that have scroll bars if the content is too long.
3.) The 3 buttons at the bottom. Can we make the cancel button have the text prop? We also don't really use green buttons anywhere, so can we make the green button grey darken-2 or 3?

I'll let you know if I come up with anything else.

[jjnesbitt]

1.) Would it make sense to make the textarea where the AQL is written to take up the full screen (except the sidebars and headerbar of course), and maybe have controls for dark theme text field. I think what you have there is a monospaced/code font, right (I was gonna suggest it if not)?

• I'm not sure what you mean by taking up full screen, while still retaining the sidebars and headers. I personally think there's enough space there for the editor.
• Regarding the dark theme comment, that's not a bad idea, but I think that'd be a separate issue, as that's something we'll want to enable site-wide.
• I didn't specify a monospaced/code font, but that's a good idea. I'll try that out.

2.) I'm not sure the right sidebar needs to be done with expansion panels. What if it were 3 evenly sized cards, with separate headings, and lists inside that have scroll bars if the content is too long.

Good idea.

3.) The 3 buttons at the bottom. Can we make the cancel button have the text prop? We also don't really use green buttons anywhere, so can we make the green button grey darken-2 or 3?

By cancel, you mean the red clear button? If you feel that keeping the colors consistent with site-wide theme is important enough, then I can update these buttons. However, I do think that these buttons nicely represent the actions with color (red is cancel/clear, blue is a non-modifying action, green is a "submit" action). Just think that's worth considering.

[jtomeck]

I'm not sure what you mean by taking up full screen

I thought taking up the entire area between the two sidebars with a dark theme text box, similar to what you'd see in your code editor would be neat. Not necessary. I think a happy medium would be using a dark theme text box and removing the elevation.

By cancel, you mean the red clear button? If you feel that keeping the colors consistent with site-wide theme is important enough, then I can update these buttons. However, I do think that these buttons nicely represent the actions with color (red is cancel/clear, blue is a non-modifying action, green is a "submit" action). Just think that's worth considering.

Yeah that button. My concern wasn't really about matching the buttons to the theme. There are two schools of thought on secondary action buttons like "cancel" or "clear" or "delete." There are those that feel that they need to have more attention called to them and be colored appropriately in order to let users know "do not click unless you really mean to." (I typically like this school of thought for the "delete" action, but that's pretty much the only one) The school of thought I usually follow is to remove the emphasis from them. The user will typically then ignore that action unless they really need it. Additionally I find it a bit more aesthetically pleasing. Not trying to sound pretentious, but I always call them skittles buttons when there's multicolored action buttons.

That said, that's just my opinion, and neither school of thought is considered right or wrong. So let me know which route you'd like to take! Nice work so far though!

[waxlamp]

By cancel, you mean the red clear button? If you feel that keeping the colors consistent with site-wide theme is important enough, then I can update these buttons. However, I do think that these buttons nicely represent the actions with color (red is cancel/clear, blue is a non-modifying action, green is a "submit" action). Just think that's worth considering.

Yeah that button. My concern wasn't really about matching the buttons to the theme. There are two schools of thought on secondary action buttons like "cancel" or "clear" or "delete." There are those that feel that they need to have more attention called to them and be colored appropriately in order to let users know "do not click unless you really mean to." (I typically like this school of thought for the "delete" action, but that's pretty much the only one) The school of thought I usually follow is to remove the emphasis from them. The user will typically then ignore that action unless they really need it. Additionally I find it a bit more aesthetically pleasing. Not trying to sound pretentious, but I always call them skittles buttons when there's multicolored action buttons.

That said, that's just my opinion, and neither school of thought is considered right or wrong. So let me know which route you'd like to take! Nice work so far though!

My vote is for not having skittles buttons 🌈 Let's try out @jtomeck's color sense on this to see what it looks like.

[jjnesbitt]

@jtomeck How's this look?

[jtomeck]

Looks awesome, thanks @AlmightyYakob

[waxlamp]

Thanks for all the work that went into this, @AlmightyYakob!