@grafana/plugin-ui 0.12.0 → 0.13.0

package/dist/esm/components/QueryEditor/QueryHeader.js

@@ -1,5 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useId, useCallback } from 'react';
+import React, { useState, useId, useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import '@grafana/data';
 import { ConfirmModal } from './ConfirmModal.js';
@@ -97,141 +96,119 @@ function QueryHeader({
     };
     onChange(next);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EditorHeader, { children: [
-      /* @__PURE__ */ jsx(
-        InlineSelect,
-        {
-          label: "Format",
-          value: query.format,
-          placeholder: "Select format",
-          menuShouldPortal: true,
-          onChange: onFormatChange,
-          options: QUERY_FORMAT_OPTIONS
-        }
-      ),
-      editorMode === EditorMode.Builder && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          InlineSwitch,
-          {
-            id: `sql-filter-${htmlId}`,
-            label: "Filter",
-            transparent: true,
-            showLabel: true,
-            value: queryRowFilter.filter,
-            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InlineSwitch,
-          {
-            id: `sql-group-${htmlId}`,
-            label: "Group",
-            transparent: true,
-            showLabel: true,
-            value: queryRowFilter.group,
-            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InlineSwitch,
-          {
-            id: `sql-order-${htmlId}`,
-            label: "Order",
-            transparent: true,
-            showLabel: true,
-            value: queryRowFilter.order,
-            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InlineSwitch,
-          {
-            id: `sql-preview-${htmlId}`,
-            label: "Preview",
-            transparent: true,
-            showLabel: true,
-            value: queryRowFilter.preview,
-            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(FlexItem, { grow: 1 }),
-      /* @__PURE__ */ jsx(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }),
-      /* @__PURE__ */ jsx(RadioButtonGroup, { options: editorModes, size: "sm", value: editorMode, onChange: onEditorModeChange }),
-      /* @__PURE__ */ jsx(
-        ConfirmModal,
-        {
-          isOpen: showConfirm,
-          onCopy: () => {
-            setShowConfirm(false);
-            copyToClipboard(query.rawSql);
-            onChange({
-              ...query,
-              rawSql: toRawSql(query),
-              editorMode: EditorMode.Builder
-            });
-          },
-          onDiscard: () => {
-            setShowConfirm(false);
-            onChange({
-              ...query,
-              rawSql: toRawSql(query),
-              editorMode: EditorMode.Builder
-            });
-          },
-          onCancel: () => setShowConfirm(false)
-        }
-      )
-    ] }),
-    editorMode === EditorMode.Builder && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Space, { v: 0.5 }),
-      /* @__PURE__ */ jsxs(EditorRow, { children: [
-        catalogsEnabled && /* @__PURE__ */ jsx(EditorField, { label: labels.get("catalog") || "Catalog", width: 25, children: /* @__PURE__ */ jsx(
-          CatalogSelector,
-          {
-            db,
-            inputId: `sql-catalog-${htmlId}`,
-            value: query.catalog === undefined ? null : query.catalog,
-            onChange: onCatalogChange
-          }
-        ) }),
-        effectiveEnableDatasets && /* @__PURE__ */ jsx(
-          EditorField,
-          {
-            label: catalogsEnabled ? labels.get("schema") || "Schema" : labels.get("dataset") || "Dataset",
-            width: 25,
-            children: /* @__PURE__ */ jsx(
-              DatasetSelector,
-              {
-                db,
-                inputId: catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`,
-                "data-testid": catalogsEnabled ? "schema-selector" : "dataset-selector",
-                dataset: catalogsEnabled ? undefined : defaultDataset,
-                value: query.dataset === undefined ? null : query.dataset,
-                onChange: onDatasetChange,
-                catalog: catalogsEnabled ? query.catalog : undefined
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(EditorField, { label: labels.get("table") || "Table", width: 25, children: /* @__PURE__ */ jsx(
-          TableSelector,
-          {
-            db,
-            inputId: `sql-table-${htmlId}`,
-            dataset: query.dataset || (catalogsEnabled ? undefined : defaultDataset),
-            catalog: catalogsEnabled ? query.catalog : undefined,
-            query,
-            value: query.table === undefined ? null : query.table,
-            onChange: onTableChange,
-            enableCatalogs: catalogsEnabled,
-            applyDefault: true
-          }
-        ) })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorHeader, null, /* @__PURE__ */ React.createElement(
+    InlineSelect,
+    {
+      label: "Format",
+      value: query.format,
+      placeholder: "Select format",
+      menuShouldPortal: true,
+      onChange: onFormatChange,
+      options: QUERY_FORMAT_OPTIONS
+    }
+  ), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: `sql-filter-${htmlId}`,
+      label: "Filter",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.filter,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: `sql-group-${htmlId}`,
+      label: "Group",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.group,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: `sql-order-${htmlId}`,
+      label: "Order",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.order,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
+    }
+  ), /* @__PURE__ */ React.createElement(
+    InlineSwitch,
+    {
+      id: `sql-preview-${htmlId}`,
+      label: "Preview",
+      transparent: true,
+      showLabel: true,
+      value: queryRowFilter.preview,
+      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
+    }
+  )), /* @__PURE__ */ React.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React.createElement(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }), /* @__PURE__ */ React.createElement(RadioButtonGroup, { options: editorModes, size: "sm", value: editorMode, onChange: onEditorModeChange }), /* @__PURE__ */ React.createElement(
+    ConfirmModal,
+    {
+      isOpen: showConfirm,
+      onCopy: () => {
+        setShowConfirm(false);
+        copyToClipboard(query.rawSql);
+        onChange({
+          ...query,
+          rawSql: toRawSql(query),
+          editorMode: EditorMode.Builder
+        });
+      },
+      onDiscard: () => {
+        setShowConfirm(false);
+        onChange({
+          ...query,
+          rawSql: toRawSql(query),
+          editorMode: EditorMode.Builder
+        });
+      },
+      onCancel: () => setShowConfirm(false)
+    }
+  )), editorMode === EditorMode.Builder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Space, { v: 0.5 }), /* @__PURE__ */ React.createElement(EditorRow, null, catalogsEnabled && /* @__PURE__ */ React.createElement(EditorField, { label: labels.get("catalog") || "Catalog", width: 25 }, /* @__PURE__ */ React.createElement(
+    CatalogSelector,
+    {
+      db,
+      inputId: `sql-catalog-${htmlId}`,
+      value: query.catalog === undefined ? null : query.catalog,
+      onChange: onCatalogChange
+    }
+  )), effectiveEnableDatasets && /* @__PURE__ */ React.createElement(
+    EditorField,
+    {
+      label: catalogsEnabled ? labels.get("schema") || "Schema" : labels.get("dataset") || "Dataset",
+      width: 25
+    },
+    /* @__PURE__ */ React.createElement(
+      DatasetSelector,
+      {
+        db,
+        inputId: catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`,
+        "data-testid": catalogsEnabled ? "schema-selector" : "dataset-selector",
+        dataset: catalogsEnabled ? undefined : defaultDataset,
+        value: query.dataset === undefined ? null : query.dataset,
+        onChange: onDatasetChange,
+        catalog: catalogsEnabled ? query.catalog : undefined
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(EditorField, { label: labels.get("table") || "Table", width: 25 }, /* @__PURE__ */ React.createElement(
+    TableSelector,
+    {
+      db,
+      inputId: `sql-table-${htmlId}`,
+      dataset: query.dataset || (catalogsEnabled ? undefined : defaultDataset),
+      catalog: catalogsEnabled ? query.catalog : undefined,
+      query,
+      value: query.table === undefined ? null : query.table,
+      onChange: onTableChange,
+      enableCatalogs: catalogsEnabled,
+      applyDefault: true
+    }
+  )))));
 }
 
 export { QueryHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"QueryHeader.js","sources":["../../../../src/components/QueryEditor/QueryHeader.tsx"],"sourcesContent":["import { 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 { type QueryWithDefaults } from './defaults';\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 { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } 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":"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"}
+{"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 { type QueryWithDefaults } from './defaults';\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 { type DB, type SQLQuery, type QueryRowFilter, EditorMode, QueryFormat, QUERY_FORMAT_OPTIONS } 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":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
 import { Tooltip, Button } from '@grafana/ui';
 
 const RunQueryButton = ({
@@ -14,7 +14,7 @@ const RunQueryButton = ({
   if (queryRunning) {
     icon = "fa fa-spinner";
   }
-  const RunButton = /* @__PURE__ */ jsx(
+  const RunButton = /* @__PURE__ */ React.createElement(
     Button,
     {
       "aria-label": ariaLabel,
@@ -23,22 +23,18 @@ const RunQueryButton = ({
       icon,
       disabled: disabled || queryRunning,
       onClick,
-      "data-testid": dataTestId,
-      children: "Run query"
-    }
+      "data-testid": dataTestId
+    },
+    "Run query"
   );
-  return queryInvalid ? /* @__PURE__ */ jsx(
+  return queryInvalid ? /* @__PURE__ */ React.createElement(
     Tooltip,
     {
       theme: "error",
       placement: "top",
-      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ jsxs(Fragment, { children: [
-        "Your query is invalid. Check below for details. ",
-        /* @__PURE__ */ jsx("br", {}),
-        "However, you can still run this query."
-      ] }),
-      children: RunButton
-    }
+      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ React.createElement(React.Fragment, null, "Your query is invalid. Check below for details. ", /* @__PURE__ */ React.createElement("br", null), "However, you can still run this query.")
+    },
+    RunButton
   ) : RunButton;
 };
 

package/dist/esm/components/QueryEditor/RunQueryButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA,UAAA;AAAA,MACd,QAAA,EAAA;AAAA;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,OAAA,EACE,oEACI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,kDAAA;AAAA,4BACiD,IAAG,EAAA,EAAA,CAAA;AAAA,QAAE;AAAA,OAExD,EAAA,CAAA;AAAA,MAIH,QAAA,EAAA;AAAA;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}
+{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,SACE,mBACE,IAAA,IAAA,GAAA,mBAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACiD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css, cx } from '@emotion/css';
 import '@grafana/data';
 import { stylesFactory, useTheme2 } from '@grafana/ui';
@@ -6,7 +6,7 @@ import { stylesFactory, useTheme2 } from '@grafana/ui';
 const Space = (props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, props);
-  return /* @__PURE__ */ jsx("span", { className: cx(styles.wrapper) });
+  return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
 };
 Space.defaultProps = {
   v: 0,

package/dist/esm/components/QueryEditor/Space.js.map

@@ -1 +1 @@
-{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAWa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,2BAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAxB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAwB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}
+{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAWa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAxB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAwB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';
@@ -25,7 +25,7 @@ const TableSelector = ({
     const tables = await db.tables(dataset, catalog);
     return tables.map(toOption);
   }, [dataset, catalog, enableCatalogs]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     Select,
     {
       inputId,

package/dist/esm/components/QueryEditor/TableSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import { useAsync } from 'react-use';\n\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,OAAS,EAAA;AACxB,MAAA,OAAO,EAAC;AAAA;AAIV,IAAA,IAAI,cAAmB,KAAA,CAAC,OAAW,IAAA,CAAC,OAAU,CAAA,EAAA;AAC5C,MAAA,OAAO,EAAC;AAAA;AAKV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GACzB,EAAA,CAAC,OAAS,EAAA,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}
+{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,OAAS,EAAA;AACxB,MAAA,OAAO,EAAC;AAAA;AAIV,IAAA,IAAI,cAAmB,KAAA,CAAC,OAAW,IAAA,CAAC,OAAU,CAAA,EAAA;AAC5C,MAAA,OAAO,EAAC;AAAA;AAKV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GACzB,EAAA,CAAC,OAAS,EAAA,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import '../types.js';
 import { formatSQL } from '../utils/formatSQL.js';
 import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
@@ -24,16 +23,16 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     SQLEditor,
     {
       width,
       height,
       query: query.rawSql,
       onChange: onRawQueryChange,
-      language: { id: "sql", completionProvider, formatter: formatSQL },
-      children
-    }
+      language: { id: "sql", completionProvider, formatter: formatSQL }
+    },
+    children
   );
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\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};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: 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: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgBgB,SAAA,cAAA,CAAe,EAAE,QAAU,EAAA,QAAA,EAAU,OAAO,KAAO,EAAA,MAAA,EAAQ,oBAA6B,EAAA;AAEtG,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,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,UAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,WAAW,SAAU,EAAA;AAAA,MAE/D;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"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';\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};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: 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: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBgB,SAAA,cAAA,CAAe,EAAE,QAAU,EAAA,QAAA,EAAU,OAAO,KAAO,EAAA,MAAA,EAAQ,oBAA6B,EAAA;AAEtG,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,UAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,WAAW,SAAU;AAAA,KAAA;AAAA,IAE/D;AAAA,GACH;AAEJ;;;;"}

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

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
-import { useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
 
@@ -40,31 +39,24 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === undefined) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, style, children: [
-    /* @__PURE__ */ jsx("div", { children: validatorProps.onValidate && /* @__PURE__ */ jsx(
-      QueryValidator,
-      {
-        ...validatorProps,
-        onValidate: (result) => {
-          setValidationResult(result);
-          validatorProps.onValidate(result);
-        }
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React.createElement(
+    QueryValidator,
+    {
+      ...validatorProps,
+      onValidate: (result) => {
+        setValidationResult(result);
+        validatorProps.onValidate(result);
       }
-    ) }),
-    showTools && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(HorizontalGroup, { spacing: "sm", children: [
-      onFormatCode && /* @__PURE__ */ jsx(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }),
-      onExpand && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => onExpand(!isExpanded),
-          name: isExpanded ? "angle-up" : "angle-down",
-          size: "xs",
-          tooltip: isExpanded ? "Collapse editor" : "Expand editor"
-        }
-      ),
-      /* @__PURE__ */ jsx(Tooltip, { content: "Hit CTRL/CMD+Return to run query", children: /* @__PURE__ */ jsx(Icon, { className: styles.hint, name: "keyboard" }) })
-    ] }) })
-  ] });
+    }
+  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      onClick: () => onExpand(!isExpanded),
+      name: isExpanded ? "angle-up" : "angle-down",
+      size: "xs",
+      tooltip: isExpanded ? "Collapse editor" : "Expand editor"
+    }
+  ), /* @__PURE__ */ React.createElement(Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.hint, name: "keyboard" })))));
 }
 
 export { QueryToolbox };

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

@@ -1 +1 @@
-{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\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\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={onFormatCode} 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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"}
+{"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';\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\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={onFormatCode} 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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"}