Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New editor: Style for query preview #467

Merged
merged 3 commits into from Sep 14, 2022
Merged

New editor: Style for query preview #467

merged 3 commits into from Sep 14, 2022

Conversation

andresmgot
Copy link
Contributor

@andresmgot andresmgot commented Sep 14, 2022 •
edited

Final component of #391

Move the preview to its own section and add the capability to show/hide it:

Peek 2022-09-14 12-01

I tried to use a component with some syntax highlighting but:

  • Using a CodeEditor (monaco) is a bit heavy. Also it's not possible to set the height automatically which is not very friendly for the preview. Also, the same editor is available when switching to the KQL editor.
    - I also tried to use Prismjs, which is used in other editors but the language for kusto is not included by default.

@andresmgot andresmgot requested a review from a team as a code owner September 14, 2022 10:08
@github-actions
Copy link

Backend code coverage report for PR #467
No changes

@github-actions
Copy link

Frontend code coverage report for PR #467

Plugin Main PR Difference
src 79.06% 79.06% 0%

asimpson
asimpson approved these changes Sep 14, 2022
View reviewed changes
Copy link
Contributor

@asimpson asimpson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM.

It does look like Prism added Kusto support, did you try the keyword kusto?

src/components/QueryEditor/VisualQueryEditor.tsx
@@ -99,8 +100,7 @@ export const VisualQueryEditor: React.FC<VisualQueryEditorProps> = (props) => {
<FilterSection {...props} tableSchema={tableSchema} />
<AggregateSection {...props} tableSchema={tableSchema} />
<GroupBySection {...props} tableSchema={tableSchema} />
{/* TODO: Use proper preview component */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌

@asimpson
Copy link
Contributor

Yes! Prism looks great!!! 🏆

@andresmgot
Copy link
Contributor Author

It does look like Prism added Kusto support, did you try the keyword kusto?

I saw that but then when I checked how other plugins used Prism, I saw that Prism.languages did not include kusto so I could not use it that way (I also read somewhere that it was needed to modify webpack to include it). Anyway, now I've found this snippet: https://gist.github.com/awran5/b2fb99b91d279b700aff6d3a0f1f223d and it seems to work! Default themes are not mindblowing but we have now some syntax highlighting:

Screenshot from 2022-09-14 16-50-41

@asimpson
Copy link
Contributor

Anyway, now I've found this snippet: https://gist.github.com/awran5/b2fb99b91d279b700aff6d3a0f1f223d and it seems to work! Default themes are not mindblowing but we have now some syntax highlighting:

Ah, slick. Nice find! 🎨

@andresmgot andresmgot merged commit 045cf3d into main Sep 14, 2022
@andresmgot andresmgot deleted the preview branch September 14, 2022 15:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@asimpson asimpson asimpson approved these changes

@yaelleC yaelleC Awaiting requested review from yaelleC yaelleC is a code owner automatically assigned from grafana/partner-datasources

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@andresmgot @asimpson