feat: improve sql codemirror, style and error management

preda-bogdan commented 5 months ago

Summary

Moved the autocomplete key binding to Shift + Spacebar so that it works on all platforms the same.
Changed the styles to fix issues with padding, multi-line query, and bad highlighting of built-in functions.
Added a line to indicate available DB prefixes for the WordPress database.
Fixed issue with errors not being reported if syntax errors were present. Now proper error should be displayed.
Allow queries to end in ; we strip them if present, this should allow users to write queries more easily.

Will affect the visual aspect of the product

YES

Screenshots

Default Query and style changes

![image](https://github.com/Codeinwp/visualizer/assets/23024731/e158fca3-4281-4c44-9b87-2595f3257d03)

Test instructions

On a fresh instance with Visualizer Pro enabled
Check the Database Source for a chart
Check the default query is working
Check that the shortcut Shift + Spacebar is recommending query suggestions.
Check that the db prefix is shown.
Check that the query can end in ; or work without.
Check that query errors are displayed if a query is invalid.

Check before Pull Request is ready:

[x] I have written a test and included it in this PR
[x] I have run all tests and they pass
[x] The code passes when running the PHP CodeSniffer
[x] Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
[x] Security and Sanitization requirements have been followed
[x] I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes Codeinwp/visualizer-pro#448.

pirate-bot commented 5 months ago

Plugin build for 6d988a615289f732f78c7a3ff2cb422355596294 is ready :bellhop_bell:!

Download build

ineagu commented 5 months ago

@preda-bogdan can this easily result in a chart?

preda-bogdan commented 5 months ago

@preda-bogdan can this easily result in a chart?

@ineagu Yes, the current default query will easily display a chart without any change from the user.

irinelenache commented 4 months ago

@preda-bogdan Tested and here is what i found:

[ ] The shortcut is control + space in my case (using macOS)
[ ] There's an empty space in the text editor that makes the code harder to read https://vertis.d.pr/i/X08hBQ
[ ] The word 'YEAR' in the query is not readable because of the low contrast https://vertis.d.pr/i/OlQgvA

preda-bogdan commented 4 months ago

@irinelenache Can you check that you are not using some cached assets I can see from the screenshots you shared that the colors are not the latest being used. I checked on a clean instance using the zip from the PR and it works and behaves as expected. Please let me know so that I can look for other issues, right now it looks like something is cached on your end.

irinelenache commented 4 months ago

@preda-bogdan Indeed, the issues were related to caching. I checked again and everything's fine on my end 🚀

Codeinwp / visualizer