npm - @grafana/plugin-ui - Versions diffs - 0.15.0 → 0.16.0-dsconfig.a155abe - Mend

@grafana/plugin-ui 0.15.0 → 0.16.0-dsconfig.a155abe

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.

Files changed (240) hide show

package/dist/esm/components/QueryEditor/QueryHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState, useId } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { CatalogSelector } from './CatalogSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport {\n type DB,\n type SQLQuery,\n type QueryRowFilter,\n type QueryWithDefaults,\n EditorMode,\n QueryFormat,\n QUERY_FORMAT_OPTIONS,\n} from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n db: DB;\n defaultDataset: string;\n enableDatasets: boolean;\n enableCatalogs?: boolean;\n query: QueryWithDefaults;\n onChange: (query: SQLQuery) => void;\n onRunQuery: () => void;\n onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n queryRowFilter: QueryRowFilter;\n isQueryRunnable: boolean;\n labels?: Map<string, string>;\n}\n\nconst editorModes = [\n { label: 'Builder', value: EditorMode.Builder },\n { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n db,\n defaultDataset,\n enableDatasets,\n enableCatalogs,\n query,\n queryRowFilter,\n onChange,\n onRunQuery,\n onQueryRowChange,\n isQueryRunnable,\n labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n const { editorMode } = query;\n const [_, copyToClipboard] = useCopyToClipboard();\n const [showConfirm, setShowConfirm] = useState(false);\n const toRawSql = getRawSqlFn(db);\n const htmlId = useId();\n\n // Derive enableCatalogs from db.disableCatalogs when not explicitly provided\n // Catalogs are disabled by default (when disableCatalogs is undefined or true)\n const catalogsEnabled = enableCatalogs ?? db.disableCatalogs === false;\n\n // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n // This ensures the dataset selector is shown to select schemas\n const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;\n\n const onEditorModeChange = useCallback(\n (newEditorMode: EditorMode) => {\n if (editorMode === EditorMode.Code) {\n setShowConfirm(true);\n return;\n }\n onChange({ ...query, editorMode: newEditorMode });\n },\n [editorMode, onChange, query]\n );\n\n const onFormatChange = (e: SelectableValue) => {\n const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n onChange(next);\n };\n\n const onDatasetChange = (e: SelectableValue) => {\n // dataset field has dual meaning:\n // - When catalogs enabled: dataset = schema\n // - When catalogs disabled: dataset = dataset\n const datasetValue = e.value \|\| undefined;\n if (datasetValue === query.dataset) {\n return;\n }\n const next: SQLQuery = {\n ...query,\n dataset: datasetValue,\n table: undefined,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n const onCatalogChange = (catalog: string \| null) => {\n const catalogValue = catalog \|\| undefined;\n if (catalogValue === query.catalog) {\n return;\n }\n\n const next: SQLQuery = {\n ...query,\n catalog: catalogValue,\n dataset: undefined, // Reset dataset (which acts as schema when catalog is present)\n table: undefined,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n const onTableChange = (e: SelectableValue) => {\n if (e.value === query.table) {\n return;\n }\n\n const next: SQLQuery = {\n ...query,\n table: e.value,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n return (\n <>\n <EditorHeader>\n <InlineSelect\n label=\"Format\"\n value={query.format}\n placeholder=\"Select format\"\n menuShouldPortal\n onChange={onFormatChange}\n options={QUERY_FORMAT_OPTIONS}\n />\n {editorMode === EditorMode.Builder && (\n <>\n <InlineSwitch\n id={`sql-filter-${htmlId}`}\n label=\"Filter\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.filter}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-group-${htmlId}`}\n label=\"Group\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.group}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-order-${htmlId}`}\n label=\"Order\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.order}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-preview-${htmlId}`}\n label=\"Preview\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.preview}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n }\n />\n </>\n )}\n\n <FlexItem grow={1} />\n\n <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n <ConfirmModal\n isOpen={showConfirm}\n onCopy={() => {\n setShowConfirm(false);\n copyToClipboard(query.rawSql!);\n onChange({\n ...query,\n rawSql: toRawSql(query),\n editorMode: EditorMode.Builder,\n });\n }}\n onDiscard={() => {\n setShowConfirm(false);\n onChange({\n ...query,\n rawSql: toRawSql(query),\n editorMode: EditorMode.Builder,\n });\n }}\n onCancel={() => setShowConfirm(false)}\n />\n </EditorHeader>\n\n {editorMode === EditorMode.Builder && (\n <>\n <Space v={0.5} />\n\n <EditorRow>\n {/* Catalog selector: only when catalogs are not disabled /}\n {catalogsEnabled && (\n <EditorField label={labels.get('catalog') \|\| 'Catalog'} width={25}>\n <CatalogSelector\n db={db}\n inputId={`sql-catalog-${htmlId}`}\n value={query.catalog === undefined ? null : query.catalog}\n onChange={onCatalogChange}\n />\n </EditorField>\n )}\n\n {/ Schema selector when catalogs enabled, dataset selector otherwise /}\n {effectiveEnableDatasets && (\n <EditorField\n label={catalogsEnabled ? labels.get('schema') \|\| 'Schema' : labels.get('dataset') \|\| 'Dataset'}\n width={25}\n >\n <DatasetSelector\n db={db}\n inputId={catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`}\n data-testid={catalogsEnabled ? 'schema-selector' : 'dataset-selector'}\n dataset={catalogsEnabled ? undefined : defaultDataset}\n value={query.dataset === undefined ? null : query.dataset}\n onChange={onDatasetChange}\n catalog={catalogsEnabled ? query.catalog : undefined}\n />\n </EditorField>\n )}\n\n {/ Table selector: always shown */}\n <EditorField label={labels.get('table') \|\| 'Table'} width={25}>\n <TableSelector\n db={db}\n inputId={`sql-table-${htmlId}`}\n dataset={query.dataset \|\| (catalogsEnabled ? undefined : defaultDataset)}\n catalog={catalogsEnabled ? query.catalog : undefined}\n query={query}\n value={query.table === undefined ? null : query.table}\n onChange={onTableChange}\n enableCatalogs={catalogsEnabled}\n applyDefault\n />\n </EditorField>\n </EditorRow>\n </>\n )}\n </>\n );\n}\n"],"names":["useState","useId","useCallback"],"mappings":"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"}
1	+ {"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import React, { useCallback, useState, useId } from 'react';\nimport { useCopyToClipboard } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { ConfirmModal } from './ConfirmModal';\nimport { DatasetSelector } from './DatasetSelector';\nimport { CatalogSelector } from './CatalogSelector';\nimport { TableSelector } from './TableSelector';\nimport { InlineSwitch, RadioButtonGroup } from '@grafana/ui';\nimport { EditorField } from './EditorField';\nimport { EditorHeader } from './EditorHeader';\nimport { EditorRow } from './EditorRow';\nimport { FlexItem } from './FlexItem';\nimport { InlineSelect } from './InlineSelect';\nimport { Space } from './Space';\nimport { RunQueryButton } from './RunQueryButton';\nimport {\n type DB,\n type SQLQuery,\n type QueryRowFilter,\n type QueryWithDefaults,\n EditorMode,\n QueryFormat,\n QUERY_FORMAT_OPTIONS,\n} from './types';\nimport { getRawSqlFn } from './utils/sql.utils';\n\ninterface QueryHeaderProps {\n db: DB;\n defaultDataset: string;\n enableDatasets: boolean;\n enableCatalogs?: boolean;\n query: QueryWithDefaults;\n onChange: (query: SQLQuery) => void;\n onRunQuery: () => void;\n onQueryRowChange: (queryRowFilter: QueryRowFilter) => void;\n queryRowFilter: QueryRowFilter;\n isQueryRunnable: boolean;\n labels?: Map<string, string>;\n}\n\nconst editorModes = [\n { label: 'Builder', value: EditorMode.Builder },\n { label: 'Code', value: EditorMode.Code },\n];\n\nexport function QueryHeader({\n db,\n defaultDataset,\n enableDatasets,\n enableCatalogs,\n query,\n queryRowFilter,\n onChange,\n onRunQuery,\n onQueryRowChange,\n isQueryRunnable,\n labels = new Map([['dataset', 'Dataset']]),\n}: QueryHeaderProps) {\n const { editorMode } = query;\n const [_, copyToClipboard] = useCopyToClipboard();\n const [showConfirm, setShowConfirm] = useState(false);\n const toRawSql = getRawSqlFn(db);\n const htmlId = useId();\n\n // Derive enableCatalogs from db.disableCatalogs when not explicitly provided\n // Catalogs are disabled by default (when disableCatalogs is undefined or true)\n const catalogsEnabled = enableCatalogs ?? db.disableCatalogs === false;\n\n // When catalogs are enabled, datasets MUST be enabled (they act as schema selector)\n // This ensures the dataset selector is shown to select schemas\n const effectiveEnableDatasets = catalogsEnabled ? true : enableDatasets;\n\n const onEditorModeChange = useCallback(\n (newEditorMode: EditorMode) => {\n if (editorMode === EditorMode.Code) {\n setShowConfirm(true);\n return;\n }\n onChange({ ...query, editorMode: newEditorMode });\n },\n [editorMode, onChange, query]\n );\n\n const onFormatChange = (e: SelectableValue) => {\n const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };\n onChange(next);\n };\n\n const onDatasetChange = (e: SelectableValue) => {\n // dataset field has dual meaning:\n // - When catalogs enabled: dataset = schema\n // - When catalogs disabled: dataset = dataset\n const datasetValue = e.value \|\| undefined;\n if (datasetValue === query.dataset) {\n return;\n }\n const next: SQLQuery = {\n ...query,\n dataset: datasetValue,\n table: undefined,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n const onCatalogChange = (catalog: string \| null) => {\n const catalogValue = catalog \|\| undefined;\n if (catalogValue === query.catalog) {\n return;\n }\n\n const next: SQLQuery = {\n ...query,\n catalog: catalogValue,\n dataset: undefined, // Reset dataset (which acts as schema when catalog is present)\n table: undefined,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n const onTableChange = (e: SelectableValue) => {\n if (e.value === query.table) {\n return;\n }\n\n const next: SQLQuery = {\n ...query,\n table: e.value,\n sql: undefined,\n rawSql: '',\n };\n onChange(next);\n };\n\n return (\n <>\n <EditorHeader>\n <InlineSelect\n label=\"Format\"\n value={query.format}\n placeholder=\"Select format\"\n menuShouldPortal\n onChange={onFormatChange}\n options={QUERY_FORMAT_OPTIONS}\n />\n {editorMode === EditorMode.Builder && (\n <>\n <InlineSwitch\n id={`sql-filter-${htmlId}`}\n label=\"Filter\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.filter}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-group-${htmlId}`}\n label=\"Group\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.group}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-order-${htmlId}`}\n label=\"Order\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.order}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })\n }\n />\n\n <InlineSwitch\n id={`sql-preview-${htmlId}`}\n label=\"Preview\"\n transparent={true}\n showLabel={true}\n value={queryRowFilter.preview}\n onChange={(ev) =>\n ev.target instanceof HTMLInputElement &&\n onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })\n }\n />\n </>\n )}\n\n <FlexItem grow={1} />\n\n <RunQueryButton queryInvalid={!isQueryRunnable} onClick={() => onRunQuery()} />\n\n <RadioButtonGroup options={editorModes} size=\"sm\" value={editorMode} onChange={onEditorModeChange} />\n\n <ConfirmModal\n isOpen={showConfirm}\n onCopy={() => {\n setShowConfirm(false);\n copyToClipboard(query.rawSql!);\n onChange({\n ...query,\n rawSql: toRawSql(query),\n editorMode: EditorMode.Builder,\n });\n }}\n onDiscard={() => {\n setShowConfirm(false);\n onChange({\n ...query,\n rawSql: toRawSql(query),\n editorMode: EditorMode.Builder,\n });\n }}\n onCancel={() => setShowConfirm(false)}\n />\n </EditorHeader>\n\n {editorMode === EditorMode.Builder && (\n <>\n <Space v={0.5} />\n\n <EditorRow>\n {/* Catalog selector: only when catalogs are not disabled /}\n {catalogsEnabled && (\n <EditorField label={labels.get('catalog') \|\| 'Catalog'} width={25}>\n <CatalogSelector\n db={db}\n inputId={`sql-catalog-${htmlId}`}\n value={query.catalog === undefined ? null : query.catalog}\n onChange={onCatalogChange}\n />\n </EditorField>\n )}\n\n {/ Schema selector when catalogs enabled, dataset selector otherwise /}\n {effectiveEnableDatasets && (\n <EditorField\n label={catalogsEnabled ? labels.get('schema') \|\| 'Schema' : labels.get('dataset') \|\| 'Dataset'}\n width={25}\n >\n <DatasetSelector\n db={db}\n inputId={catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`}\n data-testid={catalogsEnabled ? 'schema-selector' : 'dataset-selector'}\n dataset={catalogsEnabled ? undefined : defaultDataset}\n value={query.dataset === undefined ? null : query.dataset}\n onChange={onDatasetChange}\n catalog={catalogsEnabled ? query.catalog : undefined}\n />\n </EditorField>\n )}\n\n {/ Table selector: always shown */}\n <EditorField label={labels.get('table') \|\| 'Table'} width={25}>\n <TableSelector\n db={db}\n inputId={`sql-table-${htmlId}`}\n dataset={query.dataset \|\| (catalogsEnabled ? undefined : defaultDataset)}\n catalog={catalogsEnabled ? query.catalog : undefined}\n query={query}\n value={query.table === undefined ? null : query.table}\n onChange={onTableChange}\n enableCatalogs={catalogsEnabled}\n applyDefault\n />\n </EditorField>\n </EditorRow>\n </>\n )}\n </>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAM,WAAc,GAAA;AAAA,EAClB,EAAE,KAAA,EAAO,SAAW,EAAA,KAAA,EAAO,WAAW,OAAQ,EAAA;AAAA,EAC9C,EAAE,KAAA,EAAO,MAAQ,EAAA,KAAA,EAAO,WAAW,IAAK;AAC1C,CAAA;AAEO,SAAS,WAAY,CAAA;AAAA,EAC1B,EAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA,uBAAa,GAAI,CAAA,CAAC,CAAC,SAAW,EAAA,SAAS,CAAC,CAAC;AAC3C,CAAqB,EAAA;AACnB,EAAM,MAAA,EAAE,YAAe,GAAA,KAAA;AACvB,EAAA,MAAM,CAAC,CAAA,EAAG,eAAe,CAAA,GAAI,kBAAmB,EAAA;AAChD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,EAAA,MAAM,SAAS,KAAM,EAAA;AAIrB,EAAM,MAAA,eAAA,GAAkB,cAAkB,IAAA,IAAA,GAAA,cAAA,GAAA,EAAA,CAAG,eAAoB,KAAA,KAAA;AAIjE,EAAM,MAAA,uBAAA,GAA0B,kBAAkB,IAAO,GAAA,cAAA;AAEzD,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,aAA8B,KAAA;AAC7B,MAAI,IAAA,UAAA,KAAe,WAAW,IAAM,EAAA;AAClC,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA;AAAA;AAEF,MAAA,QAAA,CAAS,EAAE,GAAG,KAAO,EAAA,UAAA,EAAY,eAAe,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,UAAY,EAAA,QAAA,EAAU,KAAK;AAAA,GAC9B;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAuB,KAAA;AAC7C,IAAM,MAAA,IAAA,GAAO,EAAE,GAAG,KAAO,EAAA,MAAA,EAAQ,CAAE,CAAA,KAAA,KAAU,SAAY,GAAA,CAAA,CAAE,KAAQ,GAAA,WAAA,CAAY,KAAM,EAAA;AACrF,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAuB,KAAA;AAI9C,IAAM,MAAA,YAAA,GAAe,EAAE,KAAS,IAAA,SAAA;AAChC,IAAI,IAAA,YAAA,KAAiB,MAAM,OAAS,EAAA;AAClC,MAAA;AAAA;AAEF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAS,EAAA,YAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,OAA2B,KAAA;AAClD,IAAA,MAAM,eAAe,OAAW,IAAA,SAAA;AAChC,IAAI,IAAA,YAAA,KAAiB,MAAM,OAAS,EAAA;AAClC,MAAA;AAAA;AAGF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAS,EAAA,YAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAAuB,KAAA;AAC5C,IAAI,IAAA,CAAA,CAAE,KAAU,KAAA,KAAA,CAAM,KAAO,EAAA;AAC3B,MAAA;AAAA;AAGF,IAAA,MAAM,IAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,OAAO,CAAE,CAAA,KAAA;AAAA,MACT,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AACA,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,GACf;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,YACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,QAAA;AAAA,MACN,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,WAAY,EAAA,eAAA;AAAA,MACZ,gBAAgB,EAAA,IAAA;AAAA,MAChB,QAAU,EAAA,cAAA;AAAA,MACV,OAAS,EAAA;AAAA;AAAA,GAEV,EAAA,UAAA,KAAe,UAAW,CAAA,OAAA,oBAEvB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,cAAc,MAAM,CAAA,CAAA;AAAA,MACxB,KAAM,EAAA,QAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,MAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,MAAA,EAAQ,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIrE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,aAAa,MAAM,CAAA,CAAA;AAAA,MACvB,KAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,KAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,KAAA,EAAO,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIpE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,aAAa,MAAM,CAAA,CAAA;AAAA,MACvB,KAAM,EAAA,OAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,KAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,KAAA,EAAO,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAIpE,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,eAAe,MAAM,CAAA,CAAA;AAAA,MACzB,KAAM,EAAA,SAAA;AAAA,MACN,WAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,MACX,OAAO,cAAe,CAAA,OAAA;AAAA,MACtB,QAAU,EAAA,CAAC,EACT,KAAA,EAAA,CAAG,kBAAkB,gBACrB,IAAA,gBAAA,CAAiB,EAAE,GAAG,cAAgB,EAAA,OAAA,EAAS,EAAG,CAAA,MAAA,CAAO,SAAS;AAAA;AAAA,GAGxE,CAGF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,CAAG,EAAA,CAAA,kBAElB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,YAAc,EAAA,CAAC,eAAiB,EAAA,OAAA,EAAS,MAAM,UAAA,EAAc,EAAA,CAAA,kBAE5E,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,IAAK,EAAA,IAAA,EAAK,KAAO,EAAA,UAAA,EAAY,QAAU,EAAA,kBAAA,EAAoB,CAEnG,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,WAAA;AAAA,MACR,QAAQ,MAAM;AACZ,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAA,eAAA,CAAgB,MAAM,MAAO,CAAA;AAC7B,QAAS,QAAA,CAAA;AAAA,UACP,GAAG,KAAA;AAAA,UACH,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,UACtB,YAAY,UAAW,CAAA;AAAA,SACxB,CAAA;AAAA,OACH;AAAA,MACA,WAAW,MAAM;AACf,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAS,QAAA,CAAA;AAAA,UACP,GAAG,KAAA;AAAA,UACH,MAAA,EAAQ,SAAS,KAAK,CAAA;AAAA,UACtB,YAAY,UAAW,CAAA;AAAA,SACxB,CAAA;AAAA,OACH;AAAA,MACA,QAAA,EAAU,MAAM,cAAA,CAAe,KAAK;AAAA;AAAA,GAExC,GAEC,UAAe,KAAA,UAAA,CAAW,2BAEvB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,CAAA,EAAG,GAAK,EAAA,CAAA,sCAEd,SAEE,EAAA,IAAA,EAAA,eAAA,oBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,MAAA,CAAO,IAAI,SAAS,CAAA,IAAK,SAAW,EAAA,KAAA,EAAO,EAC7D,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA,EAAS,eAAe,MAAM,CAAA,CAAA;AAAA,MAC9B,KAAO,EAAA,KAAA,CAAM,OAAY,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,OAAA;AAAA,MAClD,QAAU,EAAA;AAAA;AAAA,GAEd,GAID,uBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,eAAkB,GAAA,MAAA,CAAO,GAAI,CAAA,QAAQ,KAAK,QAAW,GAAA,MAAA,CAAO,GAAI,CAAA,SAAS,CAAK,IAAA,SAAA;AAAA,MACrF,KAAO,EAAA;AAAA,KAAA;AAAA,oBAEP,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAS,eAAkB,GAAA,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,eAAe,MAAM,CAAA,CAAA;AAAA,QACzE,aAAA,EAAa,kBAAkB,iBAAoB,GAAA,kBAAA;AAAA,QACnD,OAAA,EAAS,kBAAkB,SAAY,GAAA,cAAA;AAAA,QACvC,KAAO,EAAA,KAAA,CAAM,OAAY,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,OAAA;AAAA,QAClD,QAAU,EAAA,eAAA;AAAA,QACV,OAAA,EAAS,eAAkB,GAAA,KAAA,CAAM,OAAU,GAAA;AAAA;AAAA;AAC7C,GACF,kBAID,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,MAAA,CAAO,IAAI,OAAO,CAAA,IAAK,OAAS,EAAA,KAAA,EAAO,EACzD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAA,EAAS,aAAa,MAAM,CAAA,CAAA;AAAA,MAC5B,OAAS,EAAA,KAAA,CAAM,OAAY,KAAA,eAAA,GAAkB,SAAY,GAAA,cAAA,CAAA;AAAA,MACzD,OAAA,EAAS,eAAkB,GAAA,KAAA,CAAM,OAAU,GAAA,SAAA;AAAA,MAC3C,KAAA;AAAA,MACA,KAAO,EAAA,KAAA,CAAM,KAAU,KAAA,SAAA,GAAY,OAAO,KAAM,CAAA,KAAA;AAAA,MAChD,QAAU,EAAA,aAAA;AAAA,MACV,cAAgB,EAAA,eAAA;AAAA,MAChB,YAAY,EAAA;AAAA;AAAA,GAEhB,CACF,CACF,CAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/RunQueryButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../_virtual/index.js';
+import React from 'react';
 import { Tooltip, Button } from '@grafana/ui';
 const RunQueryButton = ({

package/dist/esm/components/QueryEditor/Space.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../_virtual/index.js';
+import React from 'react';
 import { cx, css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

package/dist/esm/components/QueryEditor/TableSelector.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useRef, useEffect, useCallback } from 'react';
 import '../types.js';
 import { formatSQL } from '../utils/formatSQL.js';
 import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
@@ -16,11 +16,11 @@ function QueryEditorRaw({
   completionProvider,
   language = "sql"
 }) {
-  const queryRef = reactExports.useRef(query);
-  reactExports.useEffect(() => {
+  const queryRef = useRef(query);
+  useEffect(() => {
     queryRef.current = query;
   }, [query]);
-  const onRawQueryChange = reactExports.useCallback(
+  const onRawQueryChange = useCallback(
     (rawSql, processQuery) => {
       const newQuery = {
         ...queryRef.current,

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n query: SQLQuery;\n onChange: (value: SQLQuery, processQuery: boolean) => void;\n children?: (props: { formatQuery: () => void }) => React.ReactNode;\n width?: number;\n height?: number;\n completionProvider: LanguageCompletionProvider;\n language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n children,\n onChange,\n query,\n width,\n height,\n completionProvider,\n language = 'sql',\n}: Props) {\n // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n const queryRef = useRef<SQLQuery>(query);\n useEffect(() => {\n queryRef.current = query;\n }, [query]);\n\n const onRawQueryChange = useCallback(\n (rawSql: string, processQuery: boolean) => {\n const newQuery = {\n ...queryRef.current,\n rawQuery: true,\n rawSql,\n };\n onChange(newQuery, processQuery);\n },\n [onChange]\n );\n\n return (\n <SQLEditor\n width={width}\n height={height}\n query={query.rawSql!}\n onChange={onRawQueryChange}\n language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n >\n {children}\n </SQLEditor>\n );\n}\n"],"names":[~~"useRef","useEffect","useCallback"~~],"mappings":";;;;;;;;;AAkBO,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,~~GAAWA~~,~~oBAAiB~~,KAAK,CAAA;AACvC,~~EAAAC~~,~~sBAAA~~,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,~~GAAAC~~,~~wBAAA~~;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}
1	+ {"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n query: SQLQuery;\n onChange: (value: SQLQuery, processQuery: boolean) => void;\n children?: (props: { formatQuery: () => void }) => React.ReactNode;\n width?: number;\n height?: number;\n completionProvider: LanguageCompletionProvider;\n language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n children,\n onChange,\n query,\n width,\n height,\n completionProvider,\n language = 'sql',\n}: Props) {\n // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n const queryRef = useRef<SQLQuery>(query);\n useEffect(() => {\n queryRef.current = query;\n }, [query]);\n\n const onRawQueryChange = useCallback(\n (rawSql: string, processQuery: boolean) => {\n const newQuery = {\n ...queryRef.current,\n rawQuery: true,\n rawSql,\n };\n onChange(newQuery, processQuery);\n },\n [onChange]\n );\n\n return (\n <SQLEditor\n width={width}\n height={height}\n query={query.rawSql!}\n onChange={onRawQueryChange}\n language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n >\n {children}\n </SQLEditor>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBO,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
 import { reportInteraction } from '@grafana/runtime';
 function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }) {
   const theme = useTheme2();
-  const [validationResult, setValidationResult] = reactExports.useState();
-  const styles = reactExports.useMemo(() => {
+  const [validationResult, setValidationResult] = useState();
+  const styles = useMemo(() => {
     return {
       container: css`
         border: 1px solid ${theme.colors.border.medium};

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n showTools?: boolean;\n isExpanded?: boolean;\n onFormatCode?: () => void;\n onExpand?: (expand: boolean) => void;\n onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n const theme = useTheme2();\n const [validationResult, setValidationResult] = useState<boolean>();\n\n const styles = useMemo(() => {\n return {\n container: css`\n border: 1px solid ${theme.colors.border.medium};\n border-top: none;\n padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n font-size: ${theme.typography.bodySmall.fontSize};\n `,\n error: css`\n color: ${theme.colors.error.text};\n font-size: ${theme.typography.bodySmall.fontSize};\n font-family: ${theme.typography.fontFamilyMonospace};\n `,\n valid: css`\n color: ${theme.colors.success.text};\n `,\n info: css`\n color: ${theme.colors.text.secondary};\n `,\n hint: css`\n color: ${theme.colors.text.disabled};\n white-space: nowrap;\n cursor: help;\n `,\n };\n }, [theme]);\n\n let style = {};\n\n if (!showTools && validationResult === undefined) {\n style = { height: 0, padding: 0, visibility: 'hidden' };\n }\n const onFormatClick = () => {\n reportInteraction('grafana_sql_query_editor_format_click');\n onFormatCode?.();\n };\n\n return (\n <div className={styles.container} style={style}>\n <div>\n {validatorProps.onValidate && (\n <QueryValidator\n {...validatorProps}\n onValidate={(result: boolean) => {\n setValidationResult(result);\n validatorProps.onValidate!(result);\n }}\n />\n )}\n </div>\n {showTools && (\n <div>\n <HorizontalGroup spacing=\"sm\">\n {onFormatCode && (\n <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n )}\n {onExpand && (\n <IconButton\n onClick={() => onExpand(!isExpanded)}\n name={isExpanded ? 'angle-up' : 'angle-down'}\n size=\"xs\"\n tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n />\n )}\n <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n <Icon className={styles.hint} name=\"keyboard\" />\n </Tooltip>\n </HorizontalGroup>\n </div>\n )}\n </div>\n );\n}\n"],"names":[~~"useState","useMemo"~~],"mappings":";;;;;;AAgBgB,SAAA,YAAA,CAAa,EAAE,SAAW,EAAA,YAAA,EAAc,UAAU,UAAY,EAAA,GAAG,gBAAqC,EAAA;AACpH,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,~~GAAIA~~,~~qBAAkB~~,EAAA;AAElE,EAAM,MAAA,MAAA,~~GAASC~~,~~qBAAQ~~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"}
1	+ {"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n showTools?: boolean;\n isExpanded?: boolean;\n onFormatCode?: () => void;\n onExpand?: (expand: boolean) => void;\n onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n const theme = useTheme2();\n const [validationResult, setValidationResult] = useState<boolean>();\n\n const styles = useMemo(() => {\n return {\n container: css`\n border: 1px solid ${theme.colors.border.medium};\n border-top: none;\n padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n font-size: ${theme.typography.bodySmall.fontSize};\n `,\n error: css`\n color: ${theme.colors.error.text};\n font-size: ${theme.typography.bodySmall.fontSize};\n font-family: ${theme.typography.fontFamilyMonospace};\n `,\n valid: css`\n color: ${theme.colors.success.text};\n `,\n info: css`\n color: ${theme.colors.text.secondary};\n `,\n hint: css`\n color: ${theme.colors.text.disabled};\n white-space: nowrap;\n cursor: help;\n `,\n };\n }, [theme]);\n\n let style = {};\n\n if (!showTools && validationResult === undefined) {\n style = { height: 0, padding: 0, visibility: 'hidden' };\n }\n const onFormatClick = () => {\n reportInteraction('grafana_sql_query_editor_format_click');\n onFormatCode?.();\n };\n\n return (\n <div className={styles.container} style={style}>\n <div>\n {validatorProps.onValidate && (\n <QueryValidator\n {...validatorProps}\n onValidate={(result: boolean) => {\n setValidationResult(result);\n validatorProps.onValidate!(result);\n }}\n />\n )}\n </div>\n {showTools && (\n <div>\n <HorizontalGroup spacing=\"sm\">\n {onFormatCode && (\n <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n )}\n {onExpand && (\n <IconButton\n onClick={() => onExpand(!isExpanded)}\n name={isExpanded ? 'angle-up' : 'angle-down'}\n size=\"xs\"\n tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n />\n )}\n <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n <Icon className={styles.hint} name=\"keyboard\" />\n </Tooltip>\n </HorizontalGroup>\n </div>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { getValueFormat, formattedValueToString } from '@grafana/data';
 import { useTheme2, Spinner, Icon } from '@grafana/ui';
@@ -7,10 +7,10 @@ import '../types.js';
 function QueryValidator({ db, query, onValidate, range }) {
   var _a;
-  const [validationResult, setValidationResult] = reactExports.useState();
+  const [validationResult, setValidationResult] = useState();
   const theme = useTheme2();
-  const valueFormatter = reactExports.useMemo(() => getValueFormat("bytes"), []);
-  const styles = reactExports.useMemo(() => {
+  const valueFormatter = useMemo(() => getValueFormat("bytes"), []);
+  const styles = useMemo(() => {
     return {
       error: css`
         color: ${theme.colors.error.text};
@@ -46,7 +46,7 @@ function QueryValidator({ db, query, onValidate, range }) {
     1e3,
     [query, validateQuery]
   );
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (validationResult == null ? undefined : validationResult.isError) {
       onValidate(false);
     }

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n db: DB;\n query: SQLQuery;\n range?: TimeRange;\n onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n const [validationResult, setValidationResult] = useState<ValidationResults \| null>();\n const theme = useTheme2();\n const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n const styles = useMemo(() => {\n return {\n error: css`\n color: ${theme.colors.error.text};\n font-size: ${theme.typography.bodySmall.fontSize};\n font-family: ${theme.typography.fontFamilyMonospace};\n `,\n valid: css`\n color: ${theme.colors.success.text};\n `,\n info: css`\n color: ${theme.colors.text.secondary};\n `,\n };\n }, [theme]);\n\n const [state, validateQuery] = useAsyncFn(\n async (q: SQLQuery) => {\n if (q.rawSql?.trim() === '') {\n return null;\n }\n\n return await db.validateQuery(q, range);\n },\n [db]\n );\n\n const [,] = useDebounce(\n async () => {\n const result = await validateQuery(query);\n if (result) {\n setValidationResult(result);\n }\n\n return null;\n },\n 1000,\n [query, validateQuery]\n );\n\n useEffect(() => {\n if (validationResult?.isError) {\n onValidate(false);\n }\n if (validationResult?.isValid) {\n onValidate(true);\n }\n }, [validationResult, onValidate]);\n\n if (!state.value && !state.loading) {\n return null;\n }\n\n const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n return (\n <>\n {state.loading && (\n <div className={styles.info}>\n <Spinner inline={true} size={12} /> Validating query...\n </div>\n )}\n {!state.loading && state.value && (\n <>\n <>\n {state.value.isValid && state.value.statistics && (\n <div className={styles.valid}>\n <Icon name=\"check\" /> This query will process{' '}\n <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n when run.\n </div>\n )}\n </>\n\n <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n </>\n )}\n </>\n );\n}\n\nfunction processErrorMessage(error: string) {\n const splat = error.split(':');\n if (splat.length > 2) {\n return splat.slice(2).join(':');\n }\n return error;\n}\n"],"names":["~~useState","useMemo","~~_a"~~,"useEffect"~~],"mappings":";;;;;;;AAcO,SAAS,eAAe,EAAE,EAAA,EAAI,KAAO,EAAA,UAAA,EAAY,OAA8B,EAAA;AAdtF,EAAA,IAAA,EAAA;AAeE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,~~GAAIA~~,~~qBAAmC~~,EAAA;AACnF,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,~~iBAAiBC~~,~~oBAAQ~~,CAAA,MAAM,eAAe,OAAO,CAAA,EAAG,EAAE,CAAA;AAEhE,EAAM,MAAA,MAAA,~~GAASA~~,~~qBAAQ~~,MAAM;AAC3B,IAAO,OAAA;AAAA,MACL,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,mBACnB,EAAA,KAAA,CAAM,UAAW,CAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,qBACjC,EAAA,KAAA,CAAM,WAAW,mBAAmB,CAAA;AAAA,MAAA,CAAA;AAAA,MAErD,KAAO,EAAA,GAAA;AAAA,eACI,EAAA,KAAA,CAAM,MAAO,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAA,CAAA;AAAA,MAEpC,IAAM,EAAA,GAAA;AAAA,eACK,EAAA,KAAA,CAAM,MAAO,CAAA,IAAA,CAAK,SAAS,CAAA;AAAA,MAAA;AAAA,KAExC;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAM,MAAA,CAAC,KAAO,EAAA,aAAa,CAAI,GAAA,UAAA;AAAA,IAC7B,OAAO,CAAgB,KAAA;AApC3B,~~MAAAC~~,IAAAA,GAAAA;AAqCM,MAAA,IAAA,CAAA,CAAIA,MAAA,CAAE,CAAA,MAAA,KAAF,IAAAA,GAAAA,SAAAA,GAAAA,GAAAA,CAAU,YAAW,EAAI,EAAA;AAC3B,QAAO,OAAA,IAAA;AAAA;AAGT,MAAA,OAAO,MAAM,EAAA,CAAG,aAAc,CAAA,CAAA,EAAG,KAAK,CAAA;AAAA,KACxC;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAY,WAAA;AAAA,IACV,YAAY;AACV,MAAM,MAAA,MAAA,GAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AACxC,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAAA;AAG5B,MAAO,OAAA,IAAA;AAAA,KACT;AAAA,IACA,GAAA;AAAA,IACA,CAAC,OAAO,aAAa;AAAA;AAGvB,~~EAAAC~~,~~sBAAA~~,CAAU,MAAM;AACd,IAAA,IAAI,wDAAkB,OAAS,EAAA;AAC7B,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAElB,IAAA,IAAI,wDAAkB,OAAS,EAAA;AAC7B,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA;AACjB,GACC,EAAA,CAAC,gBAAkB,EAAA,UAAU,CAAC,CAAA;AAEjC,EAAA,IAAI,CAAC,KAAA,CAAM,KAAS,IAAA,CAAC,MAAM,OAAS,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,KAAA,GAAA,CAAA,CAAQ,WAAM,KAAN,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAa,SAAQ,mBAAoB,CAAA,KAAA,CAAM,KAAM,CAAA,KAAK,CAAI,GAAA,EAAA;AAE5E,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAA,CAAM,OACL,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,MAAA,EAAQ,IAAM,EAAA,IAAA,EAAM,IAAI,CAAE,EAAA,sBACrC,CAED,EAAA,CAAC,KAAM,CAAA,OAAA,IAAW,KAAM,CAAA,KAAA,8EAGlB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,KAAA,CAAM,KAAM,CAAA,OAAA,IAAW,KAAM,CAAA,KAAA,CAAM,UAClC,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,CAAA,EAAE,4BAAyB,GAC9C,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,EAAA,sBAAA,CAAuB,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,UAAA,CAAW,mBAAmB,CAAC,CAAE,CAAU,EAAA,GAAA,EAAI,WAE5G,CAEJ,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,MAAM,KAAM,CAAA,OAAA,oBAAY,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAA,EAAQ,KAAM,CAAO,CACxE,CAEJ,CAAA;AAEJ;AAEA,SAAS,oBAAoB,KAAe,EAAA;AAC1C,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,CAAM,GAAG,CAAA;AAC7B,EAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,IAAA,OAAO,KAAM,CAAA,KAAA,CAAM,CAAC,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA;AAEhC,EAAO,OAAA,KAAA;AACT;;;;"}
1	+ {"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n db: DB;\n query: SQLQuery;\n range?: TimeRange;\n onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n const [validationResult, setValidationResult] = useState<ValidationResults \| null>();\n const theme = useTheme2();\n const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n const styles = useMemo(() => {\n return {\n error: css`\n color: ${theme.colors.error.text};\n font-size: ${theme.typography.bodySmall.fontSize};\n font-family: ${theme.typography.fontFamilyMonospace};\n `,\n valid: css`\n color: ${theme.colors.success.text};\n `,\n info: css`\n color: ${theme.colors.text.secondary};\n `,\n };\n }, [theme]);\n\n const [state, validateQuery] = useAsyncFn(\n async (q: SQLQuery) => {\n if (q.rawSql?.trim() === '') {\n return null;\n }\n\n return await db.validateQuery(q, range);\n },\n [db]\n );\n\n const [,] = useDebounce(\n async () => {\n const result = await validateQuery(query);\n if (result) {\n setValidationResult(result);\n }\n\n return null;\n },\n 1000,\n [query, validateQuery]\n );\n\n useEffect(() => {\n if (validationResult?.isError) {\n onValidate(false);\n }\n if (validationResult?.isValid) {\n onValidate(true);\n }\n }, [validationResult, onValidate]);\n\n if (!state.value && !state.loading) {\n return null;\n }\n\n const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n return (\n <>\n {state.loading && (\n <div className={styles.info}>\n <Spinner inline={true} size={12} /> Validating query...\n </div>\n )}\n {!state.loading && state.value && (\n <>\n <>\n {state.value.isValid && state.value.statistics && (\n <div className={styles.valid}>\n <Icon name=\"check\" /> This query will process{' '}\n <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n when run.\n </div>\n )}\n </>\n\n <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n </>\n )}\n </>\n );\n}\n\nfunction processErrorMessage(error: string) {\n const splat = error.split(':');\n if (splat.length > 2) {\n return splat.slice(2).join(':');\n }\n return error;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useState, useMemo } from 'react';
 import { css } from '@emotion/css';
 import { useMeasure } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,10 +20,10 @@ function RawEditor({
 }) {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const [toolboxRef, toolboxMeasure] = useMeasure();
   const [editorRef, editorMeasure] = useMeasure();
-  const completionProvider = reactExports.useMemo(() => db.getSqlCompletionProvider(), [db]);
+  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);
   const renderQueryEditor = (width, height) => {
     return /* @__PURE__ */ React.createElement(
       QueryEditorRaw,

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\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 language?: SqlLanguage;\n}\n\nexport function RawEditor({\n db,\n query,\n onChange,\n onRunQuery,\n onValidate,\n queryToValidate,\n range,\n language = 'sql',\n}: 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 completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n completionProvider={completionProvider}\n query={query}\n width={width}\n language={language}\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 interface AutoSizerProps {\n width: number;\n height: number;\n }\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }: AutoSizerProps) => {\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 Editing in expanded code editor\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={`Query ${query.refId}`}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\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 padding-top: 0;\n `,\n };\n}\n"],"names":[~~"useState","useMemo"~~],"mappings":";;;;;;;;;;AAoBO,SAAS,SAAU,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAmB,EAAA;AACjB,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,~~GAAIA~~,~~sBAAS~~,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAI,UAA2B,EAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,UAA2B,EAAA;AAE9D,EAAM,MAAA,kBAAA,~~GAAqBC~~,~~qBAAQ~~,MAAM,EAAA,CAAG,0BAA4B,EAAA,CAAC,EAAE,CAAC,CAAA;AAE5E,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAoB,KAAA;AAC7D,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,kBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAQ,EAAA,MAAA,GAAS,MAAS,GAAA,cAAA,CAAe,MAAS,GAAA,SAAA;AAAA,QAClD;AAAA,OAAA;AAAA,MAEC,CAAC,EAAE,WAAA,EAAkB,KAAA;AACpB,QACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,UACR,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAO,EAAA,eAAA;AAAA,YACP,UAAA;AAAA,YACA,YAAc,EAAA,WAAA;AAAA,YACd,SAAS,EAAA,IAAA;AAAA,YACT,KAAA;AAAA,YACA,QAAU,EAAA,aAAA;AAAA,YACV;AAAA;AAAA,SAEJ,CAAA;AAAA;AAEJ,KACF;AAAA,GAEJ;AAOA,EAAM,MAAA,YAAA,GAAe,CAAC,UAAA,GAAa,KAAU,KAAA;AAC3C,IAAA,OAAO,6BACJ,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EACE,CAAC,EAAE,KAAA,EAAO,QAA6B,KAAA;AACtC,MAAO,OAAA,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,KAE1C,CAEA,mBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GAAK,EAAA,SAAA,EAAA,EAAY,mBAAoB,CAAA;AAAA,GAE9C;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,OAAO,aAAc,CAAA,KAAA;AAAA,UACrB,QAAQ,aAAc,CAAA,MAAA;AAAA,UACtB,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,UACpC,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA;AAAA;AAClB,OAAA;AAAA,MACD;AAAA,KAED;AAAA,GAEJ;AAEA,EAAA,iEAEK,UAAa,GAAA,iBAAA,EAAsB,GAAA,YAAA,IACnC,UACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAS,MAAA,EAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,MAC3B,oBAAsB,EAAA,KAAA;AAAA,MACtB,aAAe,EAAA,KAAA;AAAA,MACf,WAAW,MAAO,CAAA,KAAA;AAAA,MAClB,kBAAkB,MAAO,CAAA,YAAA;AAAA,MACzB,MAAQ,EAAA,UAAA;AAAA,MACR,WAAW,MAAM;AACf,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA;AACrB,KAAA;AAAA,IAEC,aAAa,IAAI;AAAA,GAGxB,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAsB,EAAA;AACvC,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,GAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIP,YAAc,EAAA,GAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAIhB;AACF;;;;"}
1	+ {"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\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 language?: SqlLanguage;\n}\n\nexport function RawEditor({\n db,\n query,\n onChange,\n onRunQuery,\n onValidate,\n queryToValidate,\n range,\n language = 'sql',\n}: 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 completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n const renderQueryEditor = (width?: number, height?: number) => {\n return (\n <QueryEditorRaw\n completionProvider={completionProvider}\n query={query}\n width={width}\n language={language}\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 interface AutoSizerProps {\n width: number;\n height: number;\n }\n\n const renderEditor = (standalone = false) => {\n return standalone ? (\n <AutoSizer>\n {({ width, height }: AutoSizerProps) => {\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 Editing in expanded code editor\n </div>\n );\n };\n\n return (\n <>\n {isExpanded ? renderPlaceholder() : renderEditor()}\n {isExpanded && (\n <Modal\n title={`Query ${query.refId}`}\n closeOnBackdropClick={false}\n closeOnEscape={false}\n className={styles.modal}\n contentClassName={styles.modalContent}\n isOpen={isExpanded}\n onDismiss={() => {\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 padding-top: 0;\n `,\n };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/types.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import '@react-awesome-query-builder/ui';
 import { toOption as toOption$1 } from '@grafana/data';
 import '@grafana/ui';
-import '../../_virtual/index.js';
+import 'react';
 import '../SQLEditor/standardSql/language.js';
 import 'uuid';
 import '@grafana/runtime';

package/dist/esm/components/QueryEditor/utils/useSqlChange.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useCallback } from 'react';
 import '../types.js';
 import { getRawSqlFn } from './sql.utils.js';
 function useSqlChange({ query, onQueryChange, db }) {
-  const onSqlChange = reactExports.useCallback(
+  const onSqlChange = useCallback(
     (sql) => {
       const toRawSql = getRawSqlFn(db);
       const rawSql = toRawSql({

package/dist/esm/components/QueryEditor/utils/useSqlChange.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n db: DB;\n query: SQLQuery;\n onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n const onSqlChange = useCallback(\n (sql: SQLExpression) => {\n const toRawSql = getRawSqlFn(db);\n const rawSql = toRawSql({\n sql,\n catalog: query.catalog,\n dataset: query.dataset,\n table: query.table,\n refId: query.refId,\n });\n const newQuery: SQLQuery = { ...query, sql, rawSql };\n onQueryChange(newQuery);\n },\n [db, onQueryChange, query]\n );\n\n return { onSqlChange };\n}\n"],"names":[~~"useCallback"~~],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,~~GAAAA~~,~~wBAAA~~;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAS,CAAA;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAO,KAAM,CAAA;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}
1	+ {"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n db: DB;\n query: SQLQuery;\n onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n const onSqlChange = useCallback(\n (sql: SQLExpression) => {\n const toRawSql = getRawSqlFn(db);\n const rawSql = toRawSql({\n sql,\n catalog: query.catalog,\n dataset: query.dataset,\n table: query.table,\n refId: query.refId,\n });\n const newQuery: SQLQuery = { ...query, sql, rawSql };\n onQueryChange(newQuery);\n },\n [db, onQueryChange, query]\n );\n\n return { onSqlChange };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAS,CAAA;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAO,KAAM,CAAA;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/AwesomeQueryBuilder.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { isString } from 'lodash';
 import { Utils, BasicConfig } from '@react-awesome-query-builder/ui';
 import { dateTime, toOption } from '@grafana/data';

package/dist/esm/components/QueryEditor/visual-query-builder/EditorField.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { stylesFactory, useTheme2, ReactUtils, Tooltip, Icon, Field } from '@grafana/ui';
 import { Space } from '../Space.js';

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';

package/dist/esm/components/QueryEditor/visual-query-builder/EditorRows.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { EditorStack } from '../EditorStack.js';
 const EditorRows = ({ children }) => {

package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import '../types.js';
 import { setGroupByField } from '../utils/sql.utils.js';
@@ -8,7 +8,7 @@ import { AccessoryButton } from '../AccessoryButton.js';
 import { InputGroup } from '../InputGroup.js';
 function GroupByRow({ sql, columns, onSqlChange }) {
-  const onGroupByChange = reactExports.useCallback(
+  const onGroupByChange = useCallback(
     (item) => {
       const cleaned = item.map((v) => {
         var _a;

package/dist/esm/components/QueryEditor/visual-query-builder/GroupByRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/GroupByRow.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { type SQLExpression } from '../types';\nimport { type QueryEditorGroupByExpression } from '../expressions';\nimport { setGroupByField } from '../utils/sql.utils';\nimport { EditorList } from '../EditorList';\nimport { Select } from '@grafana/ui';\nimport { AccessoryButton } from '../AccessoryButton';\nimport { InputGroup } from '../InputGroup';\n\ninterface GroupByRowProps {\n sql: SQLExpression;\n onSqlChange: (sql: SQLExpression) => void;\n columns?: Array<SelectableValue<string>>;\n}\n\nexport function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {\n const onGroupByChange = useCallback(\n (item: Array<Partial<QueryEditorGroupByExpression>>) => {\n // As new (empty object) items come in, we need to make sure they have the correct type\n const cleaned = item.map((v) => setGroupByField(v.property?.name));\n const newSql = { ...sql, groupBy: cleaned };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n return (\n <EditorList\n items={sql.groupBy!}\n onChange={onGroupByChange}\n renderItem={makeRenderColumn({\n options: columns,\n })}\n />\n );\n}\n\nfunction makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {\n const renderColumn = function (\n item: Partial<QueryEditorGroupByExpression>,\n onChangeItem: (item: QueryEditorGroupByExpression) => void,\n onDeleteItem: () => void\n ) {\n return (\n <InputGroup>\n <Select\n value={item.property?.name ? toOption(item.property.name) : null}\n aria-label=\"Group by\"\n options={options}\n menuShouldPortal\n onChange={({ value }) => value && onChangeItem(setGroupByField(value))}\n />\n <AccessoryButton aria-label=\"Remove group by column\" icon=\"times\" variant=\"secondary\" onClick={onDeleteItem} />\n </InputGroup>\n );\n };\n return renderColumn;\n}\n"],"names":[~~"useCallback"~~],"mappings":";;;;;;;;;AAgBO,SAAS,UAAW,CAAA,EAAE,GAAK,EAAA,OAAA,EAAS,aAAgC,EAAA;AACzE,EAAA,MAAM,eAAkB,~~GAAAA~~,~~wBAAA~~;AAAA,IACtB,CAAC,IAAuD,KAAA;AAEtD,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,CAAG,KAAA;AApBnC,QAAA,IAAA,EAAA;AAoBsC,QAAgB,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,QAAF,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,IAAI,CAAA;AAAA,OAAC,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,EAAE,GAAG,GAAA,EAAK,SAAS,OAAQ,EAAA;AAC1C,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,GAAI,CAAA,OAAA;AAAA,MACX,QAAU,EAAA,eAAA;AAAA,MACV,YAAY,gBAAiB,CAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACV;AAAA;AAAA,GACH;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,OAAA,EAAyD,EAAA;AACnF,EAAA,MAAM,YAAe,GAAA,SACnB,IACA,EAAA,YAAA,EACA,YACA,EAAA;AA3CJ,IAAA,IAAA,EAAA;AA4CI,IAAA,2CACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAA,CAAA,CAAO,UAAK,QAAL,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAe,QAAO,QAAS,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAI,GAAA,IAAA;AAAA,QAC5D,YAAW,EAAA,UAAA;AAAA,QACX,OAAA;AAAA,QACA,gBAAgB,EAAA,IAAA;AAAA,QAChB,QAAA,EAAU,CAAC,EAAE,KAAA,OAAY,KAAS,IAAA,YAAA,CAAa,eAAgB,CAAA,KAAK,CAAC;AAAA;AAAA,KACvE,kBACC,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,YAAW,EAAA,wBAAA,EAAyB,IAAK,EAAA,OAAA,EAAQ,OAAQ,EAAA,WAAA,EAAY,OAAS,EAAA,YAAA,EAAc,CAC/G,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,YAAA;AACT;;;;"}
1	+ {"version":3,"file":"GroupByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/GroupByRow.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { type SQLExpression } from '../types';\nimport { type QueryEditorGroupByExpression } from '../expressions';\nimport { setGroupByField } from '../utils/sql.utils';\nimport { EditorList } from '../EditorList';\nimport { Select } from '@grafana/ui';\nimport { AccessoryButton } from '../AccessoryButton';\nimport { InputGroup } from '../InputGroup';\n\ninterface GroupByRowProps {\n sql: SQLExpression;\n onSqlChange: (sql: SQLExpression) => void;\n columns?: Array<SelectableValue<string>>;\n}\n\nexport function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {\n const onGroupByChange = useCallback(\n (item: Array<Partial<QueryEditorGroupByExpression>>) => {\n // As new (empty object) items come in, we need to make sure they have the correct type\n const cleaned = item.map((v) => setGroupByField(v.property?.name));\n const newSql = { ...sql, groupBy: cleaned };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n return (\n <EditorList\n items={sql.groupBy!}\n onChange={onGroupByChange}\n renderItem={makeRenderColumn({\n options: columns,\n })}\n />\n );\n}\n\nfunction makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {\n const renderColumn = function (\n item: Partial<QueryEditorGroupByExpression>,\n onChangeItem: (item: QueryEditorGroupByExpression) => void,\n onDeleteItem: () => void\n ) {\n return (\n <InputGroup>\n <Select\n value={item.property?.name ? toOption(item.property.name) : null}\n aria-label=\"Group by\"\n options={options}\n menuShouldPortal\n onChange={({ value }) => value && onChangeItem(setGroupByField(value))}\n />\n <AccessoryButton aria-label=\"Remove group by column\" icon=\"times\" variant=\"secondary\" onClick={onDeleteItem} />\n </InputGroup>\n );\n };\n return renderColumn;\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,UAAW,CAAA,EAAE,GAAK,EAAA,OAAA,EAAS,aAAgC,EAAA;AACzE,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,IAAuD,KAAA;AAEtD,MAAA,MAAM,OAAU,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,CAAG,KAAA;AApBnC,QAAA,IAAA,EAAA;AAoBsC,QAAgB,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,QAAF,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAY,IAAI,CAAA;AAAA,OAAC,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,EAAE,GAAG,GAAA,EAAK,SAAS,OAAQ,EAAA;AAC1C,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,GAAI,CAAA,OAAA;AAAA,MACX,QAAU,EAAA,eAAA;AAAA,MACV,YAAY,gBAAiB,CAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACV;AAAA;AAAA,GACH;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,OAAA,EAAyD,EAAA;AACnF,EAAA,MAAM,YAAe,GAAA,SACnB,IACA,EAAA,YAAA,EACA,YACA,EAAA;AA3CJ,IAAA,IAAA,EAAA;AA4CI,IAAA,2CACG,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAA,CAAA,CAAO,UAAK,QAAL,KAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAe,QAAO,QAAS,CAAA,IAAA,CAAK,QAAS,CAAA,IAAI,CAAI,GAAA,IAAA;AAAA,QAC5D,YAAW,EAAA,UAAA;AAAA,QACX,OAAA;AAAA,QACA,gBAAgB,EAAA,IAAA;AAAA,QAChB,QAAA,EAAU,CAAC,EAAE,KAAA,OAAY,KAAS,IAAA,YAAA,CAAa,eAAgB,CAAA,KAAK,CAAC;AAAA;AAAA,KACvE,kBACC,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,YAAW,EAAA,wBAAA,EAAyB,IAAK,EAAA,OAAA,EAAQ,OAAQ,EAAA,WAAA,EAAY,OAAS,EAAA,YAAA,EAAc,CAC/G,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,YAAA;AACT;;;;"}

package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { uniqueId } from 'lodash';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import { Select, RadioButtonGroup, Input } from '@grafana/ui';
 import '../types.js';
@@ -14,28 +14,28 @@ const sortOrderOptions = [
 ];
 function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
   var _a, _b;
-  const onSortOrderChange = reactExports.useCallback(
+  const onSortOrderChange = useCallback(
     (item) => {
       const newSql = { ...sql, orderByDirection: item };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onLimitChange = reactExports.useCallback(
+  const onLimitChange = useCallback(
     (event) => {
       const newSql = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onOffsetChange = reactExports.useCallback(
+  const onOffsetChange = useCallback(
     (event) => {
       const newSql = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };
       onSqlChange(newSql);
     },
     [onSqlChange, sql]
   );
-  const onOrderByChange = reactExports.useCallback(
+  const onOrderByChange = useCallback(
     (item) => {
       const newSql = { ...sql, orderBy: setPropertyField(item == null ? undefined : item.value) };
       if (item === null) {

package/dist/esm/components/QueryEditor/visual-query-builder/OrderByRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/OrderByRow.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Input, RadioButtonGroup, Select } from '@grafana/ui';\nimport { type SQLExpression } from '../types';\nimport { setPropertyField } from '../utils/sql.utils';\nimport { Space } from '../Space';\nimport { EditorField } from '../EditorField';\nimport { InputGroup } from '../InputGroup';\n\ntype OrderByRowProps = {\n sql: SQLExpression;\n onSqlChange: (sql: SQLExpression) => void;\n columns?: Array<SelectableValue<string>>;\n showOffset?: boolean;\n};\n\nconst sortOrderOptions = [\n { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,\n { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,\n];\n\nexport function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {\n const onSortOrderChange = useCallback(\n (item: 'ASC' \| 'DESC') => {\n const newSql: SQLExpression = { ...sql, orderByDirection: item };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onLimitChange = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onOffsetChange = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onOrderByChange = useCallback(\n (item: SelectableValue<string>) => {\n const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };\n if (item === null) {\n newSql.orderByDirection = undefined;\n }\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n return (\n <>\n <EditorField label=\"Order by\" width={25}>\n <InputGroup>\n <Select\n aria-label=\"Order by\"\n options={columns}\n value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}\n isClearable\n menuShouldPortal\n onChange={onOrderByChange}\n />\n\n <Space h={1.5} />\n\n <RadioButtonGroup\n options={sortOrderOptions}\n disabled={!sql?.orderBy?.property.name}\n value={sql.orderByDirection}\n onChange={onSortOrderChange}\n />\n </InputGroup>\n </EditorField>\n <EditorField label=\"Limit\" optional width={25}>\n <Input type=\"number\" min={0} id={uniqueId('limit-')} value={sql.limit \|\| ''} onChange={onLimitChange} />\n </EditorField>\n {showOffset && (\n <EditorField label=\"Offset\" optional width={25}>\n <Input type=\"number\" id={uniqueId('offset-')} value={sql.offset \|\| ''} onChange={onOffsetChange} />\n </EditorField>\n )}\n </>\n );\n}\n"],"names":[~~"useCallback"~~],"mappings":";;;;;;;;;;AAiBA,MAAM,gBAAmB,GAAA;AAAA,EACvB,EAAE,WAAa,EAAA,mBAAA,EAAqB,KAAO,EAAA,KAAA,EAAO,MAAM,gBAAiB,EAAA;AAAA,EACzE,EAAE,WAAa,EAAA,oBAAA,EAAsB,KAAO,EAAA,MAAA,EAAQ,MAAM,kBAAmB;AAC/E,CAAA;AAEO,SAAS,WAAW,EAAE,GAAA,EAAK,WAAa,EAAA,OAAA,EAAS,YAA+B,EAAA;AAtBvF,EAAA,IAAA,EAAA,EAAA,EAAA;AAuBE,EAAA,MAAM,iBAAoB,~~GAAAA~~,~~wBAAA~~;AAAA,IACxB,CAAC,IAAyB,KAAA;AACxB,MAAA,MAAM,MAAwB,GAAA,EAAE,GAAG,GAAA,EAAK,kBAAkB,IAAK,EAAA;AAC/D,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,MAAM,aAAgB,~~GAAAA~~,~~wBAAA~~;AAAA,IACpB,CAAC,KAA6C,KAAA;AAC5C,MAAM,MAAA,MAAA,GAAwB,EAAE,GAAG,GAAK,EAAA,KAAA,EAAO,MAAO,CAAA,QAAA,CAAS,KAAM,CAAA,aAAA,CAAc,KAAO,EAAA,EAAE,CAAE,EAAA;AAC9F,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,MAAM,cAAiB,~~GAAAA~~,~~wBAAA~~;AAAA,IACrB,CAAC,KAA6C,KAAA;AAC5C,MAAM,MAAA,MAAA,GAAwB,EAAE,GAAG,GAAK,EAAA,MAAA,EAAQ,MAAO,CAAA,QAAA,CAAS,KAAM,CAAA,aAAA,CAAc,KAAO,EAAA,EAAE,CAAE,EAAA;AAC/F,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,MAAM,eAAkB,~~GAAAA~~,~~wBAAA~~;AAAA,IACtB,CAAC,IAAkC,KAAA;AACjC,MAAM,MAAA,MAAA,GAAwB,EAAE,GAAG,GAAA,EAAK,SAAS,gBAAiB,CAAA,IAAA,IAAA,IAAA,GAAA,SAAA,GAAA,IAAA,CAAM,KAAK,CAAE,EAAA;AAC/E,MAAA,IAAI,SAAS,IAAM,EAAA;AACjB,QAAA,MAAA,CAAO,gBAAmB,GAAA,SAAA;AAAA;AAE5B,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,WAAY,EAAA,EAAA,KAAA,EAAM,YAAW,KAAO,EAAA,EAAA,EAAA,sCAClC,UACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,UAAA;AAAA,MACX,OAAS,EAAA,OAAA;AAAA,MACT,KAAA,EAAA,CAAA,CAAO,EAAI,GAAA,GAAA,CAAA,OAAA,KAAJ,IAAa,GAAA,SAAA,GAAA,EAAA,CAAA,QAAA,CAAS,IAAO,IAAA,QAAA,CAAS,GAAI,CAAA,OAAA,CAAQ,QAAS,CAAA,IAAI,CAAI,GAAA,IAAA;AAAA,MAC1E,WAAW,EAAA,IAAA;AAAA,MACX,gBAAgB,EAAA,IAAA;AAAA,MAChB,QAAU,EAAA;AAAA;AAAA,GAGZ,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,CAAA,EAAG,KAAK,CAEf,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,gBAAA;AAAA,MACT,QAAU,EAAA,EAAA,CAAC,EAAK,GAAA,GAAA,IAAA,IAAA,GAAA,SAAA,GAAA,GAAA,CAAA,OAAA,KAAL,sBAAc,QAAS,CAAA,IAAA,CAAA;AAAA,MAClC,OAAO,GAAI,CAAA,gBAAA;AAAA,MACX,QAAU,EAAA;AAAA;AAAA,GAEd,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,OAAM,OAAQ,EAAA,QAAA,EAAQ,IAAC,EAAA,KAAA,EAAO,EACzC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,IAAK,EAAA,QAAA,EAAS,GAAK,EAAA,CAAA,EAAG,EAAI,EAAA,QAAA,CAAS,QAAQ,CAAG,EAAA,KAAA,EAAO,GAAI,CAAA,KAAA,IAAS,EAAI,EAAA,QAAA,EAAU,eAAe,CACxG,CAAA,EACC,UACC,oBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,KAAA,EAAM,UAAS,QAAQ,EAAA,IAAA,EAAC,KAAO,EAAA,EAAA,EAAA,kBACzC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,MAAK,QAAS,EAAA,EAAA,EAAI,QAAS,CAAA,SAAS,CAAG,EAAA,KAAA,EAAO,GAAI,CAAA,MAAA,IAAU,EAAI,EAAA,QAAA,EAAU,cAAgB,EAAA,CACnG,CAEJ,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"OrderByRow.js","sources":["../../../../../src/components/QueryEditor/visual-query-builder/OrderByRow.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport React, { useCallback } from 'react';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Input, RadioButtonGroup, Select } from '@grafana/ui';\nimport { type SQLExpression } from '../types';\nimport { setPropertyField } from '../utils/sql.utils';\nimport { Space } from '../Space';\nimport { EditorField } from '../EditorField';\nimport { InputGroup } from '../InputGroup';\n\ntype OrderByRowProps = {\n sql: SQLExpression;\n onSqlChange: (sql: SQLExpression) => void;\n columns?: Array<SelectableValue<string>>;\n showOffset?: boolean;\n};\n\nconst sortOrderOptions = [\n { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,\n { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,\n];\n\nexport function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {\n const onSortOrderChange = useCallback(\n (item: 'ASC' \| 'DESC') => {\n const newSql: SQLExpression = { ...sql, orderByDirection: item };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onLimitChange = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onOffsetChange = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n const onOrderByChange = useCallback(\n (item: SelectableValue<string>) => {\n const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };\n if (item === null) {\n newSql.orderByDirection = undefined;\n }\n onSqlChange(newSql);\n },\n [onSqlChange, sql]\n );\n\n return (\n <>\n <EditorField label=\"Order by\" width={25}>\n <InputGroup>\n <Select\n aria-label=\"Order by\"\n options={columns}\n value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}\n isClearable\n menuShouldPortal\n onChange={onOrderByChange}\n />\n\n <Space h={1.5} />\n\n <RadioButtonGroup\n options={sortOrderOptions}\n disabled={!sql?.orderBy?.property.name}\n value={sql.orderByDirection}\n onChange={onSortOrderChange}\n />\n </InputGroup>\n </EditorField>\n <EditorField label=\"Limit\" optional width={25}>\n <Input type=\"number\" min={0} id={uniqueId('limit-')} value={sql.limit \|\| ''} onChange={onLimitChange} />\n </EditorField>\n {showOffset && (\n <EditorField label=\"Offset\" optional width={25}>\n <Input type=\"number\" id={uniqueId('offset-')} value={sql.offset \|\| ''} onChange={onOffsetChange} />\n </EditorField>\n )}\n </>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/visual-query-builder/Preview.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { css } from '@emotion/css';
 import { useCopyToClipboard } from 'react-use';
 import '@grafana/data';

package/dist/esm/components/QueryEditor/visual-query-builder/SQLGroupByRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { GroupByRow } from './GroupByRow.js';
 import '../types.js';

package/dist/esm/components/QueryEditor/visual-query-builder/SQLOrderByRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import '@grafana/data';
 import { OrderByRow } from './OrderByRow.js';
 import '../types.js';

package/dist/esm/components/QueryEditor/visual-query-builder/SQLSelectRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { SelectRow } from './SelectRow.js';

package/dist/esm/components/QueryEditor/visual-query-builder/SQLWhereRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from '../../../_virtual/index.js';
+import React from 'react';
 import { useAsync } from 'react-use';
 import '@grafana/data';
 import './AwesomeQueryBuilder.js';

package/dist/esm/components/QueryEditor/visual-query-builder/SelectRow.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import React, { r as reactExports } from '../../../_virtual/index.js';
+import React, { useCallback } from 'react';
 import { toOption } from '@grafana/data';
 import { useStyles2, Select, Button } from '@grafana/ui';
 import { EditorField } from '../EditorField.js';
@@ -14,7 +14,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
   const styles = useStyles2(getStyles);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
-  const onColumnChange = reactExports.useCallback(
+  const onColumnChange = useCallback(
     (item, index) => (column) => {
       var _a2, _b;
       let modifiedItem = { ...item };
@@ -33,7 +33,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const onAggregationChange = reactExports.useCallback(
+  const onAggregationChange = useCallback(
     (item, index) => (aggregation) => {
       var _a2;
       const newItem = {
@@ -48,7 +48,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const removeColumn = reactExports.useCallback(
+  const removeColumn = useCallback(
     (index) => () => {
       const clone = [...sql.columns];
       clone.splice(index, 1);
@@ -60,7 +60,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     },
     [onSqlChange, sql]
   );
-  const addColumn = reactExports.useCallback(() => {
+  const addColumn = useCallback(() => {
     const newSql = { ...sql, columns: [...sql.columns, createFunctionField()] };
     onSqlChange(newSql);
   }, [onSqlChange, sql]);