@grafana/sql 13.1.0-24463273379 → 13.1.0-24463635474
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RawEditor.cjs","sources":["../../../../src/components/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { type SQLQuery, type QueryEditorProps } from '../../types';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n onRunQuery: () => void;\n onChange: (q: SQLQuery, processQuery: boolean) => void;\n onValidate: (isValid: boolean) => void;\n queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const [isExpanded, setIsExpanded] = useState(false);\n const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n const editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n editorLanguageDefinition={editorLanguageDefinition}\n query={query}\n width={width}\n height={height ? height - toolboxMeasure.height : undefined}\n onChange={onChange}\n >\n {({ formatQuery }) => {\n return (\n <div ref={toolboxRef}>\n <QueryToolbox\n db={db}\n query={queryToValidate}\n onValidate={onValidate}\n onFormatCode={formatQuery}\n showTools\n range={range}\n onExpand={setIsExpanded}\n isExpanded={isExpanded}\n />\n </div>\n );\n }}\n </QueryEditorRaw>\n );\n };\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }) => {\n return renderQueryEditor(width, height);\n }}\n </AutoSizer>\n ) : (\n <div ref={editorRef}>{renderQueryEditor()}</div>\n );\n };\n\n const renderPlaceholder = () => {\n return (\n <div\n style={{\n width: editorMeasure.width,\n height: editorMeasure.height,\n background: theme.colors.background.primary,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Trans i18nKey=\"grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor\">\n Editing in expanded code editor\n </Trans>\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={t('grafana-sql.components.raw-editor.title-query-num', 'Query {{queryNum}}', {\n queryNum: query.refId,\n })}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\n reportInteraction('grafana_sql_editor_expand', {\n datasource: query.datasource?.type,\n expanded: false,\n });\n setIsExpanded(false);\n }}\n >\n {renderEditor(true)}\n </Modal>\n )}\n </>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n modal: css({\n width: '95vw',\n height: '95vh',\n }),\n modalContent: css({\n height: '100%',\n paddingTop: 0,\n }),\n };\n}\n"],"names":["useTheme2","useStyles2","useState","useMeasure","useMemo","jsx","QueryEditorRaw","QueryToolbox","AutoSizer","Trans","jsxs","Fragment","Modal","t","reportInteraction","css"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBO,SAAS,SAAA,CAAU,EAAE,EAAA,EAAI,KAAA,EAAO,UAAU,UAAA,EAAY,UAAA,EAAY,eAAA,EAAiB,KAAA,EAAM,EAAmB;AACjH,EAAA,MAAM,QAAQA,YAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAASC,cAAW,SAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAIC,mBAAA,EAA2B;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAIA,mBAAA,EAA2B;AAE9D,EAAA,MAAM,wBAAA,GAA2BC,cAAQ,MAAM,EAAA,CAAG,6BAA4B,EAAG,CAAC,EAAE,CAAC,CAAA;AAErF,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAA,KAAoB;AAC7D,IAAA,uBACEC,cAAA;AAAA,MAACC,6BAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAA,GAAS,MAAA,GAAS,cAAA,CAAe,MAAA,GAAS,KAAA,CAAA;AAAA,QAClD,QAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,WAAA,EAAY,KAAM;AACpB,UAAA,uBACED,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EACR,QAAA,kBAAAA,cAAA;AAAA,YAACE,yBAAA;AAAA,YAAA;AAAA,cACC,EAAA;AAAA,cACA,KAAA,EAAO,eAAA;AAAA,cACP,UAAA;AAAA,cACA,YAAA,EAAc,WAAA;AAAA,cACd,SAAA,EAAS,IAAA;AAAA,cACT,KAAA;AAAA,cACA,QAAA,EAAU,aAAA;AAAA,cACV;AAAA;AAAA,WACF,EACF,CAAA;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,GAAa,KAAA,KAAU;AAC3C,IAAA,OAAO,6BACLF,cAAA,CAACG,0BAAA,EAAA,EACE,WAAC,EAAE,KAAA,EAAO,QAAO,
|
|
1
|
+
{"version":3,"file":"RawEditor.cjs","sources":["../../../../src/components/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport AutoSizer, { type Size } from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { type SQLQuery, type QueryEditorProps } from '../../types';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n onRunQuery: () => void;\n onChange: (q: SQLQuery, processQuery: boolean) => void;\n onValidate: (isValid: boolean) => void;\n queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const [isExpanded, setIsExpanded] = useState(false);\n const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n const editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n editorLanguageDefinition={editorLanguageDefinition}\n query={query}\n width={width}\n height={height ? height - toolboxMeasure.height : undefined}\n onChange={onChange}\n >\n {({ formatQuery }) => {\n return (\n <div ref={toolboxRef}>\n <QueryToolbox\n db={db}\n query={queryToValidate}\n onValidate={onValidate}\n onFormatCode={formatQuery}\n showTools\n range={range}\n onExpand={setIsExpanded}\n isExpanded={isExpanded}\n />\n </div>\n );\n }}\n </QueryEditorRaw>\n );\n };\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }: Size) => {\n return renderQueryEditor(width, height);\n }}\n </AutoSizer>\n ) : (\n <div ref={editorRef}>{renderQueryEditor()}</div>\n );\n };\n\n const renderPlaceholder = () => {\n return (\n <div\n style={{\n width: editorMeasure.width,\n height: editorMeasure.height,\n background: theme.colors.background.primary,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Trans i18nKey=\"grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor\">\n Editing in expanded code editor\n </Trans>\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={t('grafana-sql.components.raw-editor.title-query-num', 'Query {{queryNum}}', {\n queryNum: query.refId,\n })}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\n reportInteraction('grafana_sql_editor_expand', {\n datasource: query.datasource?.type,\n expanded: false,\n });\n setIsExpanded(false);\n }}\n >\n {renderEditor(true)}\n </Modal>\n )}\n </>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n modal: css({\n width: '95vw',\n height: '95vh',\n }),\n modalContent: css({\n height: '100%',\n paddingTop: 0,\n }),\n };\n}\n"],"names":["useTheme2","useStyles2","useState","useMeasure","useMemo","jsx","QueryEditorRaw","QueryToolbox","AutoSizer","Trans","jsxs","Fragment","Modal","t","reportInteraction","css"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RawEditor.mjs","sources":["../../../../src/components/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { type SQLQuery, type QueryEditorProps } from '../../types';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n onRunQuery: () => void;\n onChange: (q: SQLQuery, processQuery: boolean) => void;\n onValidate: (isValid: boolean) => void;\n queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const [isExpanded, setIsExpanded] = useState(false);\n const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n const editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n editorLanguageDefinition={editorLanguageDefinition}\n query={query}\n width={width}\n height={height ? height - toolboxMeasure.height : undefined}\n onChange={onChange}\n >\n {({ formatQuery }) => {\n return (\n <div ref={toolboxRef}>\n <QueryToolbox\n db={db}\n query={queryToValidate}\n onValidate={onValidate}\n onFormatCode={formatQuery}\n showTools\n range={range}\n onExpand={setIsExpanded}\n isExpanded={isExpanded}\n />\n </div>\n );\n }}\n </QueryEditorRaw>\n );\n };\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }) => {\n return renderQueryEditor(width, height);\n }}\n </AutoSizer>\n ) : (\n <div ref={editorRef}>{renderQueryEditor()}</div>\n );\n };\n\n const renderPlaceholder = () => {\n return (\n <div\n style={{\n width: editorMeasure.width,\n height: editorMeasure.height,\n background: theme.colors.background.primary,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Trans i18nKey=\"grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor\">\n Editing in expanded code editor\n </Trans>\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={t('grafana-sql.components.raw-editor.title-query-num', 'Query {{queryNum}}', {\n queryNum: query.refId,\n })}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\n reportInteraction('grafana_sql_editor_expand', {\n datasource: query.datasource?.type,\n expanded: false,\n });\n setIsExpanded(false);\n }}\n >\n {renderEditor(true)}\n </Modal>\n )}\n </>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n modal: css({\n width: '95vw',\n height: '95vh',\n }),\n modalContent: css({\n height: '100%',\n paddingTop: 0,\n }),\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBO,SAAS,SAAA,CAAU,EAAE,EAAA,EAAI,KAAA,EAAO,UAAU,UAAA,EAAY,UAAA,EAAY,eAAA,EAAiB,KAAA,EAAM,EAAmB;AACjH,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAI,UAAA,EAA2B;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,UAAA,EAA2B;AAE9D,EAAA,MAAM,wBAAA,GAA2B,QAAQ,MAAM,EAAA,CAAG,6BAA4B,EAAG,CAAC,EAAE,CAAC,CAAA;AAErF,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAA,KAAoB;AAC7D,IAAA,uBACE,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAA,GAAS,MAAA,GAAS,cAAA,CAAe,MAAA,GAAS,KAAA,CAAA;AAAA,QAClD,QAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,WAAA,EAAY,KAAM;AACpB,UAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EACR,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,EAAA;AAAA,cACA,KAAA,EAAO,eAAA;AAAA,cACP,UAAA;AAAA,cACA,YAAA,EAAc,WAAA;AAAA,cACd,SAAA,EAAS,IAAA;AAAA,cACT,KAAA;AAAA,cACA,QAAA,EAAU,aAAA;AAAA,cACV;AAAA;AAAA,WACF,EACF,CAAA;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,GAAa,KAAA,KAAU;AAC3C,IAAA,OAAO,6BACL,GAAA,CAAC,SAAA,EAAA,EACE,WAAC,EAAE,KAAA,EAAO,QAAO,
|
|
1
|
+
{"version":3,"file":"RawEditor.mjs","sources":["../../../../src/components/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport AutoSizer, { type Size } from 'react-virtualized-auto-sizer';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { type SQLQuery, type QueryEditorProps } from '../../types';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n onRunQuery: () => void;\n onChange: (q: SQLQuery, processQuery: boolean) => void;\n onValidate: (isValid: boolean) => void;\n queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const [isExpanded, setIsExpanded] = useState(false);\n const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n const editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n editorLanguageDefinition={editorLanguageDefinition}\n query={query}\n width={width}\n height={height ? height - toolboxMeasure.height : undefined}\n onChange={onChange}\n >\n {({ formatQuery }) => {\n return (\n <div ref={toolboxRef}>\n <QueryToolbox\n db={db}\n query={queryToValidate}\n onValidate={onValidate}\n onFormatCode={formatQuery}\n showTools\n range={range}\n onExpand={setIsExpanded}\n isExpanded={isExpanded}\n />\n </div>\n );\n }}\n </QueryEditorRaw>\n );\n };\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }: Size) => {\n return renderQueryEditor(width, height);\n }}\n </AutoSizer>\n ) : (\n <div ref={editorRef}>{renderQueryEditor()}</div>\n );\n };\n\n const renderPlaceholder = () => {\n return (\n <div\n style={{\n width: editorMeasure.width,\n height: editorMeasure.height,\n background: theme.colors.background.primary,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Trans i18nKey=\"grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor\">\n Editing in expanded code editor\n </Trans>\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={t('grafana-sql.components.raw-editor.title-query-num', 'Query {{queryNum}}', {\n queryNum: query.refId,\n })}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\n reportInteraction('grafana_sql_editor_expand', {\n datasource: query.datasource?.type,\n expanded: false,\n });\n setIsExpanded(false);\n }}\n >\n {renderEditor(true)}\n </Modal>\n )}\n </>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n modal: css({\n width: '95vw',\n height: '95vh',\n }),\n modalContent: css({\n height: '100%',\n paddingTop: 0,\n }),\n };\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"author": "Grafana Labs",
|
|
3
3
|
"license": "AGPL-3.0-only",
|
|
4
4
|
"name": "@grafana/sql",
|
|
5
|
-
"version": "13.1.0-
|
|
5
|
+
"version": "13.1.0-24463635474",
|
|
6
6
|
"description": "Shared UI components and utilities used by SQL-based datasource plugins",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"repository": {
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"@emotion/css": "11.13.5",
|
|
45
45
|
"@grafana/assistant": "^0.1.24",
|
|
46
46
|
"@grafana/data": ">=10.4.0",
|
|
47
|
-
"@grafana/e2e-selectors": "13.1.0-
|
|
48
|
-
"@grafana/i18n": "13.1.0-
|
|
47
|
+
"@grafana/e2e-selectors": "13.1.0-24463635474",
|
|
48
|
+
"@grafana/i18n": "13.1.0-24463635474",
|
|
49
49
|
"@grafana/plugin-ui": "0.13.1",
|
|
50
50
|
"@grafana/ui": ">=10.4.0",
|
|
51
51
|
"@react-awesome-query-builder/ui": "6.6.15",
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"rollup": "4.59.0",
|
|
81
81
|
"ts-jest": "29.4.0",
|
|
82
82
|
"ts-node": "10.9.2",
|
|
83
|
-
"typescript": "
|
|
83
|
+
"typescript": "6.0.2"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
86
|
"@grafana/data": ">=10.4.0",
|