Design/new data source+query editor

[kocsmy]

TODO

Query Editor

• Flexible layout: resizable sections
• Less vertical and horizontal space consumed
• Move ... to page-header
• Move Execute and other 2nd action buttons below the query editor
• Fix spacing on smaller screens
• Replace refresh icon with play icon on the visualisation section
• 1 rows @arikfr
• Show data scanner property @arikfr
• Content height must match nav height in order to cover overlapping elements
• Move updated at time to the right
• The results area now takes the whole remaining screen, so it pushes down the other parts for no reason. Need to apply media queries there so it uses the height of the screen only on bigger screens.
• Mobile phone sizes: when the Publish button is visible it pushes Execute off screen.
• In tablet and smaller sizes we need to change the metadata part to be a single row again (Created X ago by Y | Updated Z ago by YY | Refresh Schedule) that will show up below the query editor.
• Mobile phone sizes: hide Edit Visualization button and Schema Browser.
• Cross browser check @kocsmy
• Can't test in IE due to 429 too many requests 50 per 1 hour error
• Redash themed editor which is lighter
• Page doesn't load in Safari due to some JS error
• Table should be called Data (or Results) on Query @arikfr
• Double/Pointer click to expand and collapse section

New Data Source Flow

• More visual flow with database logos
• 2 sections: Databases and Other Data Sources
• Search input added
• Add missing "Save" button for the 2nd step
• Listing page should use the new box design
• Implement JS functionality

Screenshots

Query Editor

New Data Source

Data Source Listing:

New Data Source Step 1 with placeholder logos:

New Data Source Step 2 (+ edit also looks the same):

[arikfr]

Table should be called Data (or Results) on Query

It's a bit tricky so I decided to skip for now.

Hide name at query metadata on smaller screens

You probably meant on thinner left pane sizes? Because on smaller screens the metadata section has the whole width of the screen and plenty of room for the name. If this is the case, then we can skip this for now (unless <15 minutes of work).

Some notes on responsive views:

• the results area now takes the whole remaining screen, so it pushes down the other parts for no reason. Need to apply media queries there so it uses the height of the screen only on bigger screens.
• Mobile phone sizes: when the Publish button is visible it pushes Execute off screen.
• in tablet and smaller sizes we need to change the metadata part to be a single row again (Created X ago by Y | Updated Z ago by YY | Refresh Schedule) that will show up below the query editor.
• Mobile phone sizes: hide Edit Visualization button and Schema Browser.

[kocsmy]

Thanks for the comments @arikfr — I agree and I'll fix those tomorrow 👌

[kocsmy]

You probably meant on thinner left pane sizes? Because on smaller screens the metadata section has the whole width of the screen and plenty of room for the name. If this is the case, then we can skip this for now (unless <15 minutes of work).

This is a legacy task that can be removed now, I'll clear it.

Regarding the other notes: I'm also handling them, thanks for the highlight!

[arikfr]

Page doesn't load in Safari due to some JS error

I couldn't reproduce this. What was the error you saw? Something with angular being undefined and you got a blank page?

[kocsmy]

and the xmlhttprequest runs forever...

[arikfr]

What version of Safari do you have?

[arikfr]

Nevermind -- ran a system update and indeed after the upgrade I get the same error. I don't think it's specific to this branch though. I will make sure and if it isn't, will merge.

[arikfr]

Merged. 👏 👏

[denisov-vlad]

Nice update! Thanks.

But I see that there is no image for python datasource.

[RichardLitt]

Thanks for noting that, @denisov-vlad. Want to open a new issue to track this?

[denisov-vlad]

@RichardLitt done: #2240