Add CodeMirror editor with sql syntax and autocomplete #35
Conversation
frontend/src/components/QueryBox.js
Outdated
| ? this.schemaToCodeMirror(this.props.schema) | ||
| : {}; | ||
|
|
||
| const options = { |
There was a problem hiding this comment.
Isn't really important, but I wouldn't convert schema and create options object on every render (means every key press). Consider to create the codemirror configuration in constructor and update it on componentWillReceiveProps when schema or handleSubmit are changed.
There was a problem hiding this comment.
You are right, fixed in d2fb518
There was a problem hiding this comment.
rebased, now it's fixed in ce8f1dd
|
|
||
| .CodeMirror-empty { | ||
| color: dimgrey; | ||
| } |
carlosms
changed the title
carlosms
changed the title
Code to fix CodeMirror dependencies in frontend tests taken from https://github.com/bblfsh/dashboard/blob/master/src/setupTests.js Signed-off-by: Carlos Martín <carlos.martin.sanchez@gmail.com>
| .then(res => | ||
| Promise.all( | ||
| res.data.map(e => | ||
| query(`DESCRIBE TABLE ${e.table}`).then(tableRes => ({ |
There was a problem hiding this comment.
@carlosms sorry for digging this up, but I have just realized that we need to change this logic eventually.
Instead for
- API call
/tables - then, for each table call
DESCRIBE TABLEfrom the frontend
We should have
- API call to
/tables, so that the backend returns all this information in a single call
on top of per improvements (less HTTP calls), one of the purposes of having separate API endpoint on the backend was to abstract the details of how meta-information (schema) is collected.
Current approach, for a case if it is not a DESCRIBE TABLE - would require us to change both, backend and frontend. The one suggested above would requite only the backend change.
There was a problem hiding this comment.
I agree with you comment. I actually though of doing it that way in this PR, but didn't want to get too ahead of myself and went for the quicker approach of doing it in the frontend.
I've created a new issue with your request: #40
Fixes #20.
Besides syntax highlighting this PR also adds autocomplete. To do that, the schema is loaded when the application starts. Also the query can be executed with ctrl+enter.