From 59c9a46918ac0ba64af720809e3e1cd660b1c783 Mon Sep 17 00:00:00 2001 From: Andres Martinez Date: Wed, 14 Sep 2022 12:00:06 +0200 Subject: [PATCH 1/2] New editor: Style for query preview --- .../QueryEditor/VisualQueryEditor.tsx | 4 +- .../VisualQueryEditor/KQLPreview.test.tsx | 17 +++++++ .../VisualQueryEditor/KQLPreview.tsx | 49 +++++++++++++++++++ 3 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx create mode 100644 src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx diff --git a/src/components/QueryEditor/VisualQueryEditor.tsx b/src/components/QueryEditor/VisualQueryEditor.tsx index f8b68e23..ec6d8949 100644 --- a/src/components/QueryEditor/VisualQueryEditor.tsx +++ b/src/components/QueryEditor/VisualQueryEditor.tsx @@ -12,6 +12,7 @@ import { AdxDataSourceOptions, AdxSchema, defaultQuery, KustoQuery } from 'types import FilterSection from './VisualQueryEditor/FilterSection'; import AggregateSection from './VisualQueryEditor/AggregateSection'; import GroupBySection from './VisualQueryEditor/GroupBySection'; +import KQLPreview from './VisualQueryEditor/KQLPreview'; type Props = QueryEditorProps; @@ -99,8 +100,7 @@ export const VisualQueryEditor: React.FC = (props) => { - {/* TODO: Use proper preview component */} - 
{query.query}
+ ); }; diff --git a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx new file mode 100644 index 00000000..ca58a04a --- /dev/null +++ b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { render, screen } from '@testing-library/react'; +import KQLPreview from './KQLPreview'; + +describe('KQLPreview', () => { + it('should render the query preview', () => { + render(); + // hidden by default + expect(screen.queryByText('my query')).not.toBeVisible(); + screen.getByText('show').click(); + expect(screen.queryByText('my query')).toBeVisible(); + // hide it again + screen.getByText('hide').click(); + expect(screen.queryByText('my query')).not.toBeVisible(); + }); +}); diff --git a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx new file mode 100644 index 00000000..9841a7bd --- /dev/null +++ b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental'; +import { Button, useStyles2 } from '@grafana/ui'; +import { css } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; + +interface KQLPreviewProps { + query: string; +} + +const KQLPreview: React.FC = ({ query }) => { + const styles = useStyles2(getStyles); + const [hidden, setHidden] = useState(true); + + return ( + + + + <> + + + + + + + + ); +}; + +const getStyles = (theme: GrafanaTheme2) => { + return { + codeBlock: css({ + width: '100%', + display: 'table', + tableLayout: 'fixed', + }), + code: css({ + marginBottom: '4px', + }), + }; +}; + +export default KQLPreview; From c35dc932fdf35bd746f014c88228439f04dcb198 Mon Sep 17 00:00:00 2001 From: Andres Martinez Date: Wed, 14 Sep 2022 16:54:17 +0200 Subject: [PATCH 2/2] Use Prismjs highlight --- package.json | 2 ++ .../QueryEditor/VisualQueryEditor/KQLPreview.tsx | 13 +++++++++++-- yarn.lock | 10 ++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e88be3bc..58086849 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@types/debounce-promise": "^3.1.2", "@types/grafana": "github:CorpGlory/types-grafana.git", "@types/lodash": "^4.14.158", + "@types/prismjs": "1.26.0", "@typescript-eslint/eslint-plugin": "3.6.0", "@typescript-eslint/parser": "3.6.0", "chance": "^1.1.7", @@ -37,6 +38,7 @@ "emotion": "^11.0.0", "jest-environment-jsdom-sixteen": "^1.0.3", "monaco-editor": "0.17.0", + "prismjs": "1.29.0", "ts-jest": "^26.4.3" }, "dependencies": { diff --git a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx index 9841a7bd..d4f3f8c2 100644 --- a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx +++ b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx @@ -1,8 +1,11 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental'; import { Button, useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; +import Prism from 'prismjs'; +import 'prismjs/components/prism-kusto'; +import 'prismjs/themes/prism-tomorrow.min.css'; interface KQLPreviewProps { query: string; @@ -12,6 +15,10 @@ const KQLPreview: React.FC = ({ query }) => { const styles = useStyles2(getStyles); const [hidden, setHidden] = useState(true); + useEffect(() => { + Prism.highlightAll(); + }, [query]); + return ( @@ -21,7 +28,9 @@ const KQLPreview: React.FC = ({ query }) => { show