@grafana/plugin-ui 0.9.5 → 0.10.0

package/dist/esm/components/DataLinks/DataLinks.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useTheme2, Button } from '@grafana/ui';
+import { DataLinkBuiltInVars, VariableOrigin } from '@grafana/data';
+import { DataLink } from './DataLink.js';
+
+const getStyles = (theme) => ({
+  infoText: css`
+    padding-bottom: ${theme.v1.spacing.md};
+    color: ${theme.v1.colors.textWeak};
+  `,
+  dataLink: css`
+    margin-bottom: ${theme.v1.spacing.sm};
+  `
+});
+const DataLinks = (props) => {
+  const { value, onChange } = props;
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
+    return /* @__PURE__ */ React.createElement(
+      DataLink,
+      {
+        className: styles.dataLink,
+        key: index,
+        value: field,
+        onChange: (newField) => {
+          const newDataLinks = [...value];
+          newDataLinks.splice(index, 1, newField);
+          onChange(newDataLinks);
+        },
+        onDelete: () => {
+          const newDataLinks = [...value];
+          newDataLinks.splice(index, 1);
+          onChange(newDataLinks);
+        },
+        suggestions: [
+          {
+            value: DataLinkBuiltInVars.valueRaw,
+            label: "Raw value",
+            documentation: "Raw value of the field",
+            origin: VariableOrigin.Value
+          }
+        ]
+      }
+    );
+  }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "secondary",
+      className: css`
+              margin-right: 10px;
+            `,
+      icon: "plus",
+      onClick: (event) => {
+        event.preventDefault();
+        const newDataLinks = [...value || [], { field: "", label: "", matcherRegex: "", url: "" }];
+        onChange(newDataLinks);
+      }
+    },
+    "Add"
+  ))));
+};
+
+export { DataLinks };
+//# sourceMappingURL=DataLinks.js.map

package/dist/esm/components/DataLinks/DataLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataLinks.js","sources":["../../../../src/components/DataLinks/DataLinks.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { Button, useTheme2 } from '@grafana/ui';\nimport { type GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';\nimport { type DataLinkConfig } from './types';\nimport { DataLink } from './DataLink';\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  infoText: css`\n    padding-bottom: ${theme.v1.spacing.md};\n    color: ${theme.v1.colors.textWeak};\n  `,\n  dataLink: css`\n    margin-bottom: ${theme.v1.spacing.sm};\n  `,\n});\n\ntype Props = {\n  value?: DataLinkConfig[];\n  onChange: (value: DataLinkConfig[]) => void;\n};\nexport const DataLinks = (props: Props) => {\n  const { value, onChange } = props;\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n\n  return (\n    <>\n      <h3 className=\"page-heading\">Data links</h3>\n\n      <div className={styles.infoText}>\n        Add links to existing fields. Links will be shown in log row details next to the field value.\n      </div>\n\n      <div className=\"gf-form-group\">\n        {value &&\n          value.map((field, index) => {\n            return (\n              <DataLink\n                className={styles.dataLink}\n                key={index}\n                value={field}\n                onChange={(newField) => {\n                  const newDataLinks = [...value];\n                  newDataLinks.splice(index, 1, newField);\n                  onChange(newDataLinks);\n                }}\n                onDelete={() => {\n                  const newDataLinks = [...value];\n                  newDataLinks.splice(index, 1);\n                  onChange(newDataLinks);\n                }}\n                suggestions={[\n                  {\n                    value: DataLinkBuiltInVars.valueRaw,\n                    label: 'Raw value',\n                    documentation: 'Raw value of the field',\n                    origin: VariableOrigin.Value,\n                  },\n                ]}\n              />\n            );\n          })}\n        <div>\n          <Button\n            variant={'secondary'}\n            className={css`\n              margin-right: 10px;\n            `}\n            icon=\"plus\"\n            onClick={(event) => {\n              event.preventDefault();\n              const newDataLinks = [...(value || []), { field: '', label: '', matcherRegex: '', url: '' }];\n              onChange(newDataLinks);\n            }}\n          >\n            Add\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,QAAU,EAAA,GAAA;AAAA,oBACU,EAAA,KAAA,CAAM,EAAG,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,WAC5B,EAAA,KAAA,CAAM,EAAG,CAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,EAAA,CAAA;AAAA,EAEnC,QAAU,EAAA,GAAA;AAAA,mBACS,EAAA,KAAA,CAAM,EAAG,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,EAAA;AAExC,CAAA,CAAA;AAMa,MAAA,SAAA,GAAY,CAAC,KAAiB,KAAA;AACzC,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAE9B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAG,EAAA,EAAA,SAAA,EAAU,kBAAe,YAAU,CAAA,kBAEtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YAAU,+FAEjC,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,eAAA,EAAA,EACZ,SACC,KAAM,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AAC1B,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,QAAA;AAAA,QAClB,GAAK,EAAA,KAAA;AAAA,QACL,KAAO,EAAA,KAAA;AAAA,QACP,QAAA,EAAU,CAAC,QAAa,KAAA;AACtB,UAAM,MAAA,YAAA,GAAe,CAAC,GAAG,KAAK,CAAA;AAC9B,UAAa,YAAA,CAAA,MAAA,CAAO,KAAO,EAAA,CAAA,EAAG,QAAQ,CAAA;AACtC,UAAA,QAAA,CAAS,YAAY,CAAA;AAAA,SACvB;AAAA,QACA,UAAU,MAAM;AACd,UAAM,MAAA,YAAA,GAAe,CAAC,GAAG,KAAK,CAAA;AAC9B,UAAa,YAAA,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA;AAC5B,UAAA,QAAA,CAAS,YAAY,CAAA;AAAA,SACvB;AAAA,QACA,WAAa,EAAA;AAAA,UACX;AAAA,YACE,OAAO,mBAAoB,CAAA,QAAA;AAAA,YAC3B,KAAO,EAAA,WAAA;AAAA,YACP,aAAe,EAAA,wBAAA;AAAA,YACf,QAAQ,cAAe,CAAA;AAAA;AACzB;AACF;AAAA,KACF;AAAA,GAEH,CACH,kBAAA,KAAA,CAAA,aAAA,CAAC,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,GAAA;AAAA;AAAA,YAAA,CAAA;AAAA,MAGX,IAAK,EAAA,MAAA;AAAA,MACL,OAAA,EAAS,CAAC,KAAU,KAAA;AAClB,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,MAAM,YAAe,GAAA,CAAC,GAAI,KAAA,IAAS,EAAK,EAAA,EAAE,KAAO,EAAA,EAAA,EAAI,OAAO,EAAI,EAAA,YAAA,EAAc,EAAI,EAAA,GAAA,EAAK,IAAI,CAAA;AAC3F,QAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,KAAA;AAAA,IACD;AAAA,GAGH,CACF,CACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/DataSourcePicker/DataSourcePicker.js

@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import { Select, HorizontalGroup } from '@grafana/ui';
+import '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge.js';
+import { getDataSourceSrv } from '@grafana/runtime';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DataSourcePicker extends PureComponent {
+  constructor(props) {
+    super(props);
+    __publicField(this, "dataSourceSrv", getDataSourceSrv());
+    __publicField(this, "state", {});
+    __publicField(this, "onChange", (item) => {
+      const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
+      if (dsSettings) {
+        this.props.onChange(dsSettings);
+        this.setState({ error: undefined });
+      }
+    });
+  }
+  componentDidMount() {
+    const { current } = this.props;
+    const dsSettings = this.dataSourceSrv.getInstanceSettings(current);
+    if (!dsSettings) {
+      this.setState({ error: "Could not find data source " + current });
+    }
+  }
+  getCurrentValue() {
+    const { current, hideTextValue, noDefault } = this.props;
+    if (!current && noDefault) {
+      return {
+        label: "No datasources found"
+      };
+    }
+    const ds = this.dataSourceSrv.getInstanceSettings(current);
+    if (ds) {
+      return {
+        label: ds.name.substr(0, 37),
+        value: ds.name,
+        imgUrl: ds.meta.info.logos.small,
+        hideText: hideTextValue,
+        meta: ds.meta
+      };
+    }
+    return {
+      label: (current != null ? current : "no name") + " - not found",
+      value: (current != null ? current : "no name") + " - not found",
+      imgUrl: "",
+      hideText: hideTextValue
+    };
+  }
+  getDataSourceOptions() {
+    const options = this.dataSourceSrv.getList().map((ds) => ({
+      value: ds.uid,
+      label: ds.name,
+      imgUrl: ds.meta.info.logos.small,
+      meta: ds.meta
+    }));
+    return options;
+  }
+  render() {
+    const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;
+    const { error } = this.state;
+    const options = this.getDataSourceOptions();
+    const value = this.getCurrentValue();
+    return /* @__PURE__ */ React.createElement("div", { "aria-label": selectors.components.DataSourcePicker.container }, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        className: "ds-picker select-container",
+        isMulti: false,
+        isClearable: false,
+        backspaceRemovesValue: false,
+        onChange: this.onChange,
+        options,
+        autoFocus,
+        onBlur,
+        openMenuOnFocus,
+        maxMenuHeight: 500,
+        placeholder,
+        noOptionsMessage: "No datasources found",
+        value,
+        invalid: !!error,
+        getOptionLabel: (o) => {
+          if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
+            return /* @__PURE__ */ React.createElement(HorizontalGroup, { align: "center", justify: "space-between" }, /* @__PURE__ */ React.createElement("span", null, o.label), " ", /* @__PURE__ */ React.createElement(PluginSignatureBadge, { status: o.meta.signature }));
+          }
+          return o.label || "";
+        }
+      }
+    ));
+  }
+}
+__publicField(DataSourcePicker, "defaultProps", {
+  autoFocus: false,
+  openMenuOnFocus: false,
+  placeholder: "Select datasource"
+});
+
+export { DataSourcePicker };
+//# sourceMappingURL=DataSourcePicker.js.map

package/dist/esm/components/DataSourcePicker/DataSourcePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataSourcePicker.js","sources":["../../../../src/components/DataSourcePicker/DataSourcePicker.tsx"],"sourcesContent":["// Libraries\nimport React, { PureComponent } from 'react';\n\n// Components\nimport { HorizontalGroup, Select } from '@grafana/ui';\nimport { type DataSourceInstanceSettings, type SelectableValue } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge';\nimport { getDataSourceSrv, type DataSourceSrv } from '@grafana/runtime';\n\nexport interface Props {\n  onChange: (ds: DataSourceInstanceSettings) => void;\n  current: string | null;\n  hideTextValue?: boolean;\n  onBlur?: () => void;\n  autoFocus?: boolean;\n  openMenuOnFocus?: boolean;\n  placeholder?: string;\n  tracing?: boolean;\n  mixed?: boolean;\n  dashboard?: boolean;\n  metrics?: boolean;\n  annotations?: boolean;\n  variables?: boolean;\n  pluginId?: string;\n  noDefault?: boolean;\n}\n\nexport interface State {\n  error?: string;\n}\n\nexport class DataSourcePicker extends PureComponent<Props, State> {\n  dataSourceSrv: DataSourceSrv = getDataSourceSrv();\n\n  static defaultProps: Partial<Props> = {\n    autoFocus: false,\n    openMenuOnFocus: false,\n    placeholder: 'Select datasource',\n  };\n\n  state: State = {};\n\n  constructor(props: Props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    const { current } = this.props;\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(current!);\n    if (!dsSettings) {\n      this.setState({ error: 'Could not find data source ' + current });\n    }\n  }\n\n  onChange = (item: SelectableValue<string>) => {\n    const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value!);\n\n    if (dsSettings) {\n      this.props.onChange(dsSettings);\n      this.setState({ error: undefined });\n    }\n  };\n\n  private getCurrentValue(): SelectableValue<string> {\n    const { current, hideTextValue, noDefault } = this.props;\n\n    if (!current && noDefault) {\n      return {\n        label: 'No datasources found',\n      };\n    }\n\n    const ds = this.dataSourceSrv.getInstanceSettings(current!);\n\n    if (ds) {\n      return {\n        label: ds.name.substr(0, 37),\n        value: ds.name,\n        imgUrl: ds.meta.info.logos.small,\n        hideText: hideTextValue,\n        meta: ds.meta,\n      };\n    }\n\n    return {\n      label: (current ?? 'no name') + ' - not found',\n      value: (current ?? 'no name') + ' - not found',\n      imgUrl: '',\n      hideText: hideTextValue,\n    };\n  }\n\n  getDataSourceOptions(): Array<SelectableValue<string>> {\n    const options: Array<SelectableValue<string>> = this.dataSourceSrv.getList().map((ds) => ({\n      value: ds.uid,\n      label: ds.name,\n      imgUrl: ds.meta.info.logos.small,\n      meta: ds.meta,\n    }));\n\n    return options;\n  }\n\n  render() {\n    const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;\n    const { error } = this.state;\n    const options = this.getDataSourceOptions();\n    const value = this.getCurrentValue();\n\n    return (\n      <div aria-label={selectors.components.DataSourcePicker.container}>\n        <Select\n          className=\"ds-picker select-container\"\n          isMulti={false}\n          isClearable={false}\n          backspaceRemovesValue={false}\n          onChange={this.onChange}\n          options={options}\n          autoFocus={autoFocus}\n          onBlur={onBlur}\n          openMenuOnFocus={openMenuOnFocus}\n          maxMenuHeight={500}\n          placeholder={placeholder}\n          noOptionsMessage=\"No datasources found\"\n          value={value}\n          invalid={!!error}\n          getOptionLabel={(o) => {\n            if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {\n              return (\n                <HorizontalGroup align=\"center\" justify=\"space-between\">\n                  <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />\n                </HorizontalGroup>\n              );\n            }\n            return o.label || '';\n          }}\n        />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import Calendar from 'react-calendar';
+import { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';
+import { getStyles, getBodyStyles } from './styles.js';
+
+const DatePicker = memo((props) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+  const { isOpen, onClose } = props;
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: styles.modal, "data-testid": "date-picker" }, /* @__PURE__ */ React.createElement(Body, { ...props })));
+});
+DatePicker.displayName = "DatePicker";
+const Body = memo(({ value, onChange }) => {
+  const theme = useTheme2();
+  const styles = getBodyStyles(theme);
+  return /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      className: styles.body,
+      tileClassName: styles.title,
+      value: value || /* @__PURE__ */ new Date(),
+      nextLabel: /* @__PURE__ */ React.createElement(Icon, { name: "angle-right" }),
+      prevLabel: /* @__PURE__ */ React.createElement(Icon, { name: "angle-left" }),
+      onChange: (ev) => {
+        if (!Array.isArray(ev)) {
+          onChange(ev);
+        }
+      },
+      locale: "en"
+    }
+  );
+});
+Body.displayName = "Body";
+
+export { DatePicker };
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport Calendar from 'react-calendar';\nimport { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';\nimport { getStyles, getBodyStyles } from './styles';\n\nexport interface DatePickerProps {\n  isOpen?: boolean;\n  onClose: () => void;\n  onChange: (value: Date) => void;\n  value?: Date;\n}\n\nexport const DatePicker = memo<DatePickerProps>((props) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme);\n  const { isOpen, onClose } = props;\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <ClickOutsideWrapper useCapture={true} includeButtonPress={false} onClick={onClose}>\n      <div className={styles.modal} data-testid=\"date-picker\">\n        <Body {...props} />\n      </div>\n    </ClickOutsideWrapper>\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nconst Body = memo<DatePickerProps>(({ value, onChange }) => {\n  const theme = useTheme2();\n  const styles = getBodyStyles(theme);\n\n  return (\n    <Calendar\n      className={styles.body}\n      tileClassName={styles.title}\n      value={value || new Date()}\n      nextLabel={<Icon name=\"angle-right\" />}\n      prevLabel={<Icon name=\"angle-left\" />}\n      onChange={(ev: any) => {\n        if (!Array.isArray(ev)) {\n          onChange(ev);\n        }\n      }}\n      locale=\"en\"\n    />\n  );\n});\n\nBody.displayName = 'Body';\n"],"names":[],"mappings":";;;;;AAYa,MAAA,UAAA,GAAa,IAAsB,CAAA,CAAC,KAAU,KAAA;AACzD,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA;AAC9B,EAAM,MAAA,EAAE,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA;AAE5B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,uBAAoB,UAAY,EAAA,IAAA,EAAM,oBAAoB,KAAO,EAAA,OAAA,EAAS,2BACxE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAO,eAAY,aACxC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAM,GAAG,KAAA,EAAO,CACnB,CACF,CAAA;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;AAEzB,MAAM,OAAO,IAAsB,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AAC1D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,cAAc,KAAK,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,eAAe,MAAO,CAAA,KAAA;AAAA,MACtB,KAAA,EAAO,KAAS,oBAAA,IAAI,IAAK,EAAA;AAAA,MACzB,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,aAAc,EAAA,CAAA;AAAA,MACpC,SAAW,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,CAAA;AAAA,MACnC,QAAA,EAAU,CAAC,EAAY,KAAA;AACrB,QAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,EAAE,CAAG,EAAA;AACtB,UAAA,QAAA,CAAS,EAAE,CAAA;AAAA;AACb,OACF;AAAA,MACA,MAAO,EAAA;AAAA;AAAA,GACT;AAEJ,CAAC,CAAA;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/{components → esm/components}/DatePicker/styles.js

@@ -1,11 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBodyStyles = exports.getStyles = void 0;
-const css_1 = require("@emotion/css");
+import '@grafana/data';
+import { css } from '@emotion/css';
+
 const getStyles = (theme) => {
-    const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
-    return {
-        container: (0, css_1.css) `
+  const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
+  return {
+    container: css`
       top: -1px;
       position: absolute;
       right: 544px;
@@ -27,14 +26,14 @@ const getStyles = (theme) => {
         border-left: 1px solid ${theme.v1.colors.border1};
       }
     `,
-        modal: (0, css_1.css) `
+    modal: css`
       z-index: ${theme.v1.zIndex.modal};
     `,
-        content: (0, css_1.css) `
+    content: css`
       margin: 0 auto;
       width: 268px;
     `,
-        backdrop: (0, css_1.css) `
+    backdrop: css`
       position: fixed;
       top: 0;
       right: 0;
@@ -44,14 +43,13 @@ const getStyles = (theme) => {
       opacity: 0.7;
       z-index: ${theme.v1.zIndex.modalBackdrop};
       text-align: center;
-    `,
-    };
+    `
+  };
 };
-exports.getStyles = getStyles;
 const getBodyStyles = (theme) => {
-    const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
-    return {
-        title: (0, css_1.css) `
+  const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
+  return {
+    title: css`
       color: ${theme.colors.text};
       background-color: ${theme.v1.colors.bodyBg};
       font-size: ${theme.v1.typography.size.md};
@@ -61,7 +59,7 @@ const getBodyStyles = (theme) => {
         position: relative;
       }
     `,
-        body: (0, css_1.css) `
+    body: css`
       z-index: ${theme.zIndex.modal};
       position: fixed;
       background-color: ${theme.v1.colors.bodyBg};
@@ -147,8 +145,9 @@ const getBodyStyles = (theme) => {
         border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;
       }
-    `,
-    };
+    `
+  };
 };
-exports.getBodyStyles = getBodyStyles;
-//# sourceMappingURL=styles.js.map
+
+export { getBodyStyles, getStyles };
+//# sourceMappingURL=styles.js.map

package/dist/esm/components/DatePicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatePicker/styles.ts"],"sourcesContent":["import { type GrafanaTheme2 } from '@grafana/data';\nimport { css } from '@emotion/css';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n  const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;\n\n  return {\n    container: css`\n      top: -1px;\n      position: absolute;\n      right: 544px;\n      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};\n      background-color: ${theme.v1.colors.bodyBg};\n      z-index: -1;\n      border: 1px solid ${containerBorder};\n      border-radius: 2px 0 0 2px;\n\n      &:after {\n        display: block;\n        background-color: ${theme.v1.colors.bodyBg};\n        width: 19px;\n        height: 100%;\n        content: '';\n        position: absolute;\n        top: 0;\n        right: -19px;\n        border-left: 1px solid ${theme.v1.colors.border1};\n      }\n    `,\n    modal: css`\n      z-index: ${theme.v1.zIndex.modal};\n    `,\n    content: css`\n      margin: 0 auto;\n      width: 268px;\n    `,\n    backdrop: css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background: #202226;\n      opacity: 0.7;\n      z-index: ${theme.v1.zIndex.modalBackdrop};\n      text-align: center;\n    `,\n  };\n};\n\nexport const getBodyStyles = (theme: GrafanaTheme2) => {\n  const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;\n\n  return {\n    title: css`\n      color: ${theme.colors.text};\n      background-color: ${theme.v1.colors.bodyBg};\n      font-size: ${theme.v1.typography.size.md};\n      border: 1px solid transparent;\n\n      &:hover {\n        position: relative;\n      }\n    `,\n    body: css`\n      z-index: ${theme.zIndex.modal};\n      position: fixed;\n      background-color: ${theme.v1.colors.bodyBg};\n      width: 268px;\n\n      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};\n      border: 1px solid ${containerBorder};\n      border-radius: 2px 0 0 2px;\n\n      .react-calendar__navigation__label,\n      .react-calendar__navigation__arrow,\n      .react-calendar__navigation {\n        padding-top: 4px;\n        background-color: inherit;\n        color: ${theme.colors.text};\n        border: 0;\n        font-weight: ${theme.v1.typography.weight.semibold};\n      }\n\n      .react-calendar__month-view__weekdays {\n        background-color: inherit;\n        text-align: center;\n        color: ${theme.v1.palette.blue77};\n\n        abbr {\n          border: 0;\n          text-decoration: none;\n          cursor: default;\n          display: block;\n          padding: 4px 0 4px 0;\n        }\n      }\n\n      .react-calendar__month-view__days {\n        background-color: inherit;\n      }\n\n      .react-calendar__tile,\n      .react-calendar__tile--now {\n        margin-bottom: 4px;\n        background-color: inherit;\n        height: 26px;\n      }\n\n      .react-calendar__navigation__label,\n      .react-calendar__navigation > button:focus,\n      .time-picker-calendar-tile:focus {\n        outline: 0;\n      }\n\n      .react-calendar__tile--active,\n      .react-calendar__tile--active:hover {\n        color: ${theme.v1.palette.white};\n        font-weight: ${theme.v1.typography.weight.semibold};\n        background: ${theme.v1.palette.blue95};\n        box-shadow: none;\n        border: 0px;\n      }\n\n      .react-calendar__tile--rangeEnd,\n      .react-calendar__tile--rangeStart {\n        padding: 0;\n        border: 0px;\n        color: ${theme.v1.palette.white};\n        font-weight: ${theme.v1.typography.weight.semibold};\n        background: ${theme.v1.palette.blue95};\n\n        abbr {\n          background-color: ${theme.v1.palette.blue77};\n          border-radius: 100px;\n          display: block;\n          padding-top: 2px;\n          height: 26px;\n        }\n      }\n\n      .react-calendar__tile--rangeStart {\n        border-top-left-radius: 20px;\n        border-bottom-left-radius: 20px;\n      }\n\n      .react-calendar__tile--rangeEnd {\n        border-top-right-radius: 20px;\n        border-bottom-right-radius: 20px;\n      }\n    `,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePickerWithInput/DatePickerWithInput.js

@@ -0,0 +1,28 @@
+import { Input } from '@grafana/ui';
+import React from 'react';
+import { DatePicker } from '../DatePicker/DatePicker.js';
+import { getStyles } from './styles.js';
+import { cx } from '@emotion/css';
+
+const formatDate = (date) => date.toISOString().split("T")[0];
+const DatePickerWithInput = (props) => {
+  const { value, onChange, className, ...rest } = props;
+  const [open, setOpen] = React.useState(false);
+  const styles = getStyles();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      type: "date",
+      placeholder: "Date",
+      value: formatDate(value || /* @__PURE__ */ new Date()),
+      onClick: () => setOpen(true),
+      onChange: () => {
+      },
+      className: cx(styles.input, className),
+      ...rest
+    }
+  ), /* @__PURE__ */ React.createElement(DatePicker, { isOpen: open, value, onChange: (ev) => onChange(ev), onClose: () => setOpen(false) }));
+};
+
+export { DatePickerWithInput, formatDate };
+//# sourceMappingURL=DatePickerWithInput.js.map

package/dist/esm/components/DatePickerWithInput/DatePickerWithInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerWithInput.js","sources":["../../../../src/components/DatePickerWithInput/DatePickerWithInput.tsx"],"sourcesContent":["import { Input } from '@grafana/ui';\n\nimport React, { type ComponentProps } from 'react';\nimport { DatePicker } from '../DatePicker/DatePicker';\nimport { getStyles } from './styles';\nimport { cx } from '@emotion/css';\n\nexport const formatDate = (date: Date) => date.toISOString().split('T')[0];\n\nexport interface DatePickerWithInputProps extends Omit<ComponentProps<typeof Input>, 'ref' | 'value' | 'onChange'> {\n  value?: Date;\n  onChange: (value: Date) => void;\n}\n\nexport const DatePickerWithInput = (props: DatePickerWithInputProps) => {\n  const { value, onChange, className, ...rest } = props;\n  const [open, setOpen] = React.useState(false);\n  const styles = getStyles();\n\n  return (\n    <>\n      <Input\n        type=\"date\"\n        placeholder=\"Date\"\n        value={formatDate(value || new Date())}\n        onClick={() => setOpen(true)}\n        onChange={() => {}}\n        className={cx(styles.input, className)}\n        {...rest}\n      />\n      <DatePicker isOpen={open} value={value} onChange={(ev: any) => onChange(ev)} onClose={() => setOpen(false)} />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOa,MAAA,UAAA,GAAa,CAAC,IAAe,KAAA,IAAA,CAAK,aAAc,CAAA,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC;AAO5D,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAChD,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,SAAS,SAAU,EAAA;AAEzB,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,MAAA;AAAA,MACL,WAAY,EAAA,MAAA;AAAA,MACZ,KAAO,EAAA,UAAA,CAAW,KAAS,oBAAA,IAAI,MAAM,CAAA;AAAA,MACrC,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAC3B,UAAU,MAAM;AAAA,OAAC;AAAA,MACjB,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MACpC,GAAG;AAAA;AAAA,qBAEL,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,MAAQ,EAAA,IAAA,EAAM,OAAc,QAAU,EAAA,CAAC,EAAY,KAAA,QAAA,CAAS,EAAE,CAAG,EAAA,OAAA,EAAS,MAAM,OAAQ,CAAA,KAAK,GAAG,CAC9G,CAAA;AAEJ;;;;"}

package/dist/esm/components/DatePickerWithInput/styles.js

@@ -0,0 +1,16 @@
+import { css } from '@emotion/css';
+
+function getStyles() {
+  return {
+    input: css({
+      /* hides the native Calendar picker icon given when using type=date */
+      "input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator": {
+        display: "none",
+        WebkitAppearance: "none"
+      }
+    })
+  };
+}
+
+export { getStyles };
+//# sourceMappingURL=styles.js.map

package/dist/esm/components/DatePickerWithInput/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatePickerWithInput/styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\n\nexport function getStyles() {\n  return {\n    input: css({\n      /* hides the native Calendar picker icon given when using type=date */\n      \"input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator\": {\n        display: 'none',\n        WebkitAppearance: 'none',\n      },\n    }),\n  };\n}\n"],"names":[],"mappings":";;AAEO,SAAS,SAAY,GAAA;AAC1B,EAAO,OAAA;AAAA,IACL,OAAO,GAAI,CAAA;AAAA;AAAA,MAET,sGAAwG,EAAA;AAAA,QACtG,OAAS,EAAA,MAAA;AAAA,QACT,gBAAkB,EAAA;AAAA;AACpB,KACD;AAAA,GACH;AACF;;;;"}

package/dist/esm/components/DebounceInput/DebounceInput.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Input } from '@grafana/ui';
+import { useDebounce } from '../../hooks/useDebounce.js';
+
+const DebounceInput = (props) => {
+  const { delay, onDebounce, value, ...rest } = props;
+  const [input, setInput] = React.useState(value);
+  const debouncedInput = useDebounce(input, delay);
+  React.useEffect(() => onDebounce(debouncedInput), [debouncedInput]);
+  React.useEffect(() => setInput(value), [value]);
+  return /* @__PURE__ */ React.createElement(Input, { onChange: (ev) => setInput(ev.currentTarget.value), value: input, ...rest });
+};
+
+export { DebounceInput };
+//# sourceMappingURL=DebounceInput.js.map

package/dist/esm/components/DebounceInput/DebounceInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebounceInput.js","sources":["../../../../src/components/DebounceInput/DebounceInput.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { Input } from '@grafana/ui';\nimport { useDebounce } from '../../hooks/useDebounce';\n\nexport interface DebounceInputProps extends Omit<ComponentProps<typeof Input>, 'ref'> {\n  value: string;\n  onDebounce: (debouncedInput?: string) => void;\n  delay?: number;\n}\n\nexport const DebounceInput = (props: DebounceInputProps) => {\n  const { delay, onDebounce, value, ...rest } = props;\n  const [input, setInput] = React.useState(value);\n\n  const debouncedInput = useDebounce(input, delay);\n\n  // TODO: We should fix this\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  React.useEffect(() => onDebounce(debouncedInput), [debouncedInput]);\n  React.useEffect(() => setInput(value), [value]);\n\n  return <Input onChange={(ev) => setInput(ev.currentTarget.value)} value={input} {...rest} />;\n};\n"],"names":[],"mappings":";;;;AAUa,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,KAAO,EAAA,UAAA,EAAY,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAC9C,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,KAAA,EAAO,KAAK,CAAA;AAI/C,EAAA,KAAA,CAAM,UAAU,MAAM,UAAA,CAAW,cAAc,CAAG,EAAA,CAAC,cAAc,CAAC,CAAA;AAClE,EAAA,KAAA,CAAM,UAAU,MAAM,QAAA,CAAS,KAAK,CAAG,EAAA,CAAC,KAAK,CAAC,CAAA;AAE9C,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAU,EAAA,CAAC,EAAO,KAAA,QAAA,CAAS,EAAG,CAAA,aAAA,CAAc,KAAK,CAAA,EAAG,KAAO,EAAA,KAAA,EAAQ,GAAG,IAAM,EAAA,CAAA;AAC5F;;;;"}

package/dist/esm/components/Plugins/PluginSignatureBadge.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Badge } from '@grafana/ui';
+import { PluginSignatureStatus } from '@grafana/data';
+
+const PluginSignatureBadge = ({ status, ...otherProps }) => {
+  const display = getSignatureDisplayModel(status);
+  return /* @__PURE__ */ React.createElement(
+    Badge,
+    {
+      text: display.text,
+      color: display.color,
+      icon: display.icon,
+      tooltip: display.tooltip,
+      ...otherProps
+    }
+  );
+};
+function isUnsignedPluginSignature(signature) {
+  return signature && signature !== PluginSignatureStatus.valid && signature !== PluginSignatureStatus.internal;
+}
+function getSignatureDisplayModel(signature) {
+  if (!signature) {
+    signature = PluginSignatureStatus.invalid;
+  }
+  switch (signature) {
+    case PluginSignatureStatus.internal:
+      return { text: "Core", icon: "cube", color: "blue", tooltip: "Core plugin that is bundled with Grafana" };
+    case PluginSignatureStatus.valid:
+      return { text: "Signed", icon: "lock", color: "green", tooltip: "Signed and verified plugin" };
+    case PluginSignatureStatus.invalid:
+      return {
+        text: "Invalid signature",
+        icon: "exclamation-triangle",
+        color: "red",
+        tooltip: "Invalid plugin signature"
+      };
+    case PluginSignatureStatus.modified:
+      return {
+        text: "Modified signature",
+        icon: "exclamation-triangle",
+        color: "red",
+        tooltip: "Valid signature but content has been modified"
+      };
+    case PluginSignatureStatus.missing:
+      return {
+        text: "Missing signature",
+        icon: "exclamation-triangle",
+        color: "red",
+        tooltip: "Missing plugin signature"
+      };
+  }
+  return { text: "Unsigned", icon: "exclamation-triangle", color: "red", tooltip: "Unsigned external plugin" };
+}
+PluginSignatureBadge.displayName = "PluginSignatureBadge";
+
+export { PluginSignatureBadge, isUnsignedPluginSignature };
+//# sourceMappingURL=PluginSignatureBadge.js.map

package/dist/esm/components/Plugins/PluginSignatureBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginSignatureBadge.js","sources":["../../../../src/components/Plugins/PluginSignatureBadge.tsx"],"sourcesContent":["import React, { type HTMLAttributes } from 'react';\nimport { Badge, type BadgeProps } from '@grafana/ui';\nimport { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  status?: PluginSignatureStatus;\n}\n\nexport const PluginSignatureBadge = ({ status, ...otherProps }: Props) => {\n  const display = getSignatureDisplayModel(status);\n  return (\n    <Badge\n      text={display.text}\n      color={display.color as any}\n      icon={display.icon}\n      tooltip={display.tooltip}\n      {...otherProps}\n    />\n  );\n};\n\nexport function isUnsignedPluginSignature(signature?: PluginSignatureStatus) {\n  return signature && signature !== PluginSignatureStatus.valid && signature !== PluginSignatureStatus.internal;\n}\n\nexport function mapPluginErrorCodeToSignatureStatus(code: PluginErrorCode) {\n  switch (code) {\n    case PluginErrorCode.invalidSignature:\n      return PluginSignatureStatus.invalid;\n    case PluginErrorCode.missingSignature:\n      return PluginSignatureStatus.missing;\n    case PluginErrorCode.modifiedSignature:\n      return PluginSignatureStatus.modified;\n    default:\n      return PluginSignatureStatus.missing;\n  }\n}\n\nfunction getSignatureDisplayModel(signature?: PluginSignatureStatus): BadgeProps {\n  if (!signature) {\n    signature = PluginSignatureStatus.invalid;\n  }\n\n  switch (signature) {\n    case PluginSignatureStatus.internal:\n      return { text: 'Core', icon: 'cube', color: 'blue', tooltip: 'Core plugin that is bundled with Grafana' };\n    case PluginSignatureStatus.valid:\n      return { text: 'Signed', icon: 'lock', color: 'green', tooltip: 'Signed and verified plugin' };\n    case PluginSignatureStatus.invalid:\n      return {\n        text: 'Invalid signature',\n        icon: 'exclamation-triangle',\n        color: 'red',\n        tooltip: 'Invalid plugin signature',\n      };\n    case PluginSignatureStatus.modified:\n      return {\n        text: 'Modified signature',\n        icon: 'exclamation-triangle',\n        color: 'red',\n        tooltip: 'Valid signature but content has been modified',\n      };\n    case PluginSignatureStatus.missing:\n      return {\n        text: 'Missing signature',\n        icon: 'exclamation-triangle',\n        color: 'red',\n        tooltip: 'Missing plugin signature',\n      };\n  }\n\n  return { text: 'Unsigned', icon: 'exclamation-triangle', color: 'red', tooltip: 'Unsigned external plugin' };\n}\n\nPluginSignatureBadge.displayName = 'PluginSignatureBadge';\n"],"names":[],"mappings":";;;;AAQO,MAAM,uBAAuB,CAAC,EAAE,MAAQ,EAAA,GAAG,YAAwB,KAAA;AACxE,EAAM,MAAA,OAAA,GAAU,yBAAyB,MAAM,CAAA;AAC/C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,MAAM,OAAQ,CAAA,IAAA;AAAA,MACd,OAAO,OAAQ,CAAA,KAAA;AAAA,MACf,MAAM,OAAQ,CAAA,IAAA;AAAA,MACd,SAAS,OAAQ,CAAA,OAAA;AAAA,MAChB,GAAG;AAAA;AAAA,GACN;AAEJ;AAEO,SAAS,0BAA0B,SAAmC,EAAA;AAC3E,EAAA,OAAO,SAAa,IAAA,SAAA,KAAc,qBAAsB,CAAA,KAAA,IAAS,cAAc,qBAAsB,CAAA,QAAA;AACvG;AAeA,SAAS,yBAAyB,SAA+C,EAAA;AAC/E,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAA,SAAA,GAAY,qBAAsB,CAAA,OAAA;AAAA;AAGpC,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,qBAAsB,CAAA,QAAA;AACzB,MAAO,OAAA,EAAE,MAAM,MAAQ,EAAA,IAAA,EAAM,QAAQ,KAAO,EAAA,MAAA,EAAQ,SAAS,0CAA2C,EAAA;AAAA,IAC1G,KAAK,qBAAsB,CAAA,KAAA;AACzB,MAAO,OAAA,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,QAAQ,KAAO,EAAA,OAAA,EAAS,SAAS,4BAA6B,EAAA;AAAA,IAC/F,KAAK,qBAAsB,CAAA,OAAA;AACzB,MAAO,OAAA;AAAA,QACL,IAAM,EAAA,mBAAA;AAAA,QACN,IAAM,EAAA,sBAAA;AAAA,QACN,KAAO,EAAA,KAAA;AAAA,QACP,OAAS,EAAA;AAAA,OACX;AAAA,IACF,KAAK,qBAAsB,CAAA,QAAA;AACzB,MAAO,OAAA;AAAA,QACL,IAAM,EAAA,oBAAA;AAAA,QACN,IAAM,EAAA,sBAAA;AAAA,QACN,KAAO,EAAA,KAAA;AAAA,QACP,OAAS,EAAA;AAAA,OACX;AAAA,IACF,KAAK,qBAAsB,CAAA,OAAA;AACzB,MAAO,OAAA;AAAA,QACL,IAAM,EAAA,mBAAA;AAAA,QACN,IAAM,EAAA,sBAAA;AAAA,QACN,KAAO,EAAA,KAAA;AAAA,QACP,OAAS,EAAA;AAAA,OACX;AAAA;AAGJ,EAAO,OAAA,EAAE,MAAM,UAAY,EAAA,IAAA,EAAM,wBAAwB,KAAO,EAAA,KAAA,EAAO,SAAS,0BAA2B,EAAA;AAC7G;AAEA,oBAAA,CAAqB,WAAc,GAAA,sBAAA;;;;"}

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

@@ -0,0 +1,18 @@
+import { cx, css } from '@emotion/css';
+import React from 'react';
+import '@grafana/data';
+import { useStyles2, Button } from '@grafana/ui';
+
+const AccessoryButton = ({ className, ...props }) => {
+  const styles = useStyles2(getButtonStyles);
+  return /* @__PURE__ */ React.createElement(Button, { ...props, className: cx(className, styles.button) });
+};
+const getButtonStyles = (theme) => ({
+  button: css({
+    paddingLeft: theme.spacing(3 / 2),
+    paddingRight: theme.spacing(3 / 2)
+  })
+});
+
+export { AccessoryButton };
+//# sourceMappingURL=AccessoryButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessoryButton.js","sources":["../../../../src/components/QueryEditor/AccessoryButton.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Button, type ButtonProps, useStyles2 } from '@grafana/ui';\n\ninterface AccessoryButtonProps extends ButtonProps {}\n\nexport const AccessoryButton = ({ className, ...props }: AccessoryButtonProps) => {\n  const styles = useStyles2(getButtonStyles);\n\n  return <Button {...props} className={cx(className, styles.button)} />;\n};\n\nconst getButtonStyles = (theme: GrafanaTheme2) => ({\n  button: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n  }),\n});\n"],"names":[],"mappings":";;;;;AAQO,MAAM,kBAAkB,CAAC,EAAE,SAAW,EAAA,GAAG,OAAkC,KAAA;AAChF,EAAM,MAAA,MAAA,GAAS,WAAW,eAAe,CAAA;AAEzC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,UAAQ,GAAG,KAAA,EAAO,WAAW,EAAG,CAAA,SAAA,EAAW,MAAO,CAAA,MAAM,CAAG,EAAA,CAAA;AACrE;AAEA,MAAM,eAAA,GAAkB,CAAC,KAA0B,MAAA;AAAA,EACjD,QAAQ,GAAI,CAAA;AAAA,IACV,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,GAAI,CAAC,CAAA;AAAA,IAChC,YAAc,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,GAAI,CAAC;AAAA,GAClC;AACH,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect } from 'react';
+import { Modal, Icon, Button } from '@grafana/ui';
+
+function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (isOpen) {
+      (_a = buttonRef.current) == null ? undefined : _a.focus();
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      title: /* @__PURE__ */ React.createElement("div", { className: "modal-header-title" }, /* @__PURE__ */ React.createElement(Icon, { name: "exclamation-triangle", size: "lg" }), /* @__PURE__ */ React.createElement("span", { className: "p-l-1" }, "Warning")),
+      onDismiss: onCancel,
+      isOpen
+    },
+    /* @__PURE__ */ React.createElement("p", null, "Builder mode does not display changes made in code. The query builder will display the last changes you made in builder mode."),
+    /* @__PURE__ */ React.createElement("p", null, "Do you want to copy your code to the clipboard?"),
+    /* @__PURE__ */ React.createElement(Modal.ButtonRow, null, /* @__PURE__ */ React.createElement(Button, { type: "button", variant: "secondary", onClick: onCancel, fill: "outline" }, "Cancel"), /* @__PURE__ */ React.createElement(Button, { variant: "destructive", type: "button", onClick: onDiscard, ref: buttonRef }, "Discard code and switch"), /* @__PURE__ */ React.createElement(Button, { variant: "primary", onClick: onCopy }, "Copy code and switch"))
+  );
+}
+
+export { ConfirmModal };
+//# sourceMappingURL=ConfirmModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sources":["../../../../src/components/QueryEditor/ConfirmModal.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport { Button, Icon, Modal } from '@grafana/ui';\n\ntype ConfirmModalProps = {\n  isOpen: boolean;\n  onCancel?: () => void;\n  onDiscard?: () => void;\n  onCopy?: () => void;\n};\nexport function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Moved from grafana/ui\n  useEffect(() => {\n    // for some reason autoFocus property did no work on this button, but this does\n    if (isOpen) {\n      buttonRef.current?.focus();\n    }\n  }, [isOpen]);\n\n  return (\n    <Modal\n      title={\n        <div className=\"modal-header-title\">\n          <Icon name=\"exclamation-triangle\" size=\"lg\" />\n          <span className=\"p-l-1\">Warning</span>\n        </div>\n      }\n      onDismiss={onCancel}\n      isOpen={isOpen}\n    >\n      <p>\n        Builder mode does not display changes made in code. The query builder will display the last changes you made in\n        builder mode.\n      </p>\n      <p>Do you want to copy your code to the clipboard?</p>\n      <Modal.ButtonRow>\n        <Button type=\"button\" variant=\"secondary\" onClick={onCancel} fill=\"outline\">\n          Cancel\n        </Button>\n        <Button variant=\"destructive\" type=\"button\" onClick={onDiscard} ref={buttonRef}>\n          Discard code and switch\n        </Button>\n        <Button variant=\"primary\" onClick={onCopy}>\n          Copy code and switch\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,aAAa,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAW,QAA6B,EAAA;AACvF,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA;AAGhD,EAAA,SAAA,CAAU,MAAM;AAdlB,IAAA,IAAA,EAAA;AAgBI,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,SAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AACrB,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,oBAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAK,sBAAuB,EAAA,IAAA,EAAK,MAAK,CAC5C,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAU,EAAA,OAAA,EAAA,EAAQ,SAAO,CACjC,CAAA;AAAA,MAEF,SAAW,EAAA,QAAA;AAAA,MACX;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,WAAE,+HAGH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,WAAE,iDAA+C,CAAA;AAAA,oBACjD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,SAAN,EAAA,IAAA,sCACE,MAAO,EAAA,EAAA,IAAA,EAAK,QAAS,EAAA,OAAA,EAAQ,aAAY,OAAS,EAAA,QAAA,EAAU,IAAK,EAAA,SAAA,EAAA,EAAU,QAE5E,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAQ,eAAc,IAAK,EAAA,QAAA,EAAS,OAAS,EAAA,SAAA,EAAW,KAAK,SAAW,EAAA,EAAA,yBAEhF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAO,OAAQ,EAAA,SAAA,EAAU,OAAS,EAAA,MAAA,EAAA,EAAQ,sBAE3C,CACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import { useAsync } from 'react-use';
+import '@grafana/data';
+import { Select } from '@grafana/ui';
+import { toOption } from './types.js';
+
+const DatasetSelector = ({
+  db,
+  dataset,
+  value,
+  onChange,
+  disabled,
+  className,
+  applyDefault
+}) => {
+  const state = useAsync(async () => {
+    if (dataset) {
+      onChange(toOption(dataset));
+      return [toOption(dataset)];
+    }
+    const datasets = await db.datasets();
+    return datasets.map(toOption);
+  }, []);
+  useEffect(() => {
+    if (!applyDefault) {
+      return;
+    }
+    if (!value) {
+      if (state.value && state.value[0]) {
+        onChange(state.value[0]);
+      }
+    } else {
+      if (state.value && state.value.find((v) => v.value === value) === undefined) {
+        if (state.value.length > 0) {
+          onChange(state.value[0]);
+        }
+      }
+    }
+  }, [state.value, value, applyDefault, onChange]);
+  return /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      className,
+      "aria-label": "Dataset selector",
+      value,
+      options: state.value,
+      onChange,
+      disabled,
+      isLoading: state.loading,
+      menuShouldPortal: true
+    }
+  );
+};
+
+export { DatasetSelector };
+//# sourceMappingURL=DatasetSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetSelector.js","sources":["../../../../src/components/QueryEditor/DatasetSelector.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { type SelectableValue } from '@grafana/data';\nimport { Select } from '@grafana/ui';\n\nimport { type DB, type ResourceSelectorProps, toOption } from './types';\n\ninterface DatasetSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset: string;\n  value: string | null;\n  applyDefault?: boolean;\n  disabled?: boolean;\n  onChange: (v: SelectableValue) => void;\n}\n\nexport const DatasetSelector = ({\n  db,\n  dataset,\n  value,\n  onChange,\n  disabled,\n  className,\n  applyDefault,\n}: DatasetSelectorProps) => {\n  const state = useAsync(async () => {\n    if (dataset) {\n      onChange(toOption(dataset));\n      return [toOption(dataset)];\n    }\n\n    const datasets = await db.datasets();\n    return datasets.map(toOption);\n  }, []);\n\n  useEffect(() => {\n    if (!applyDefault) {\n      return;\n    }\n    // Set default dataset when values are fetched\n    if (!value) {\n      if (state.value && state.value[0]) {\n        onChange(state.value[0]);\n      }\n    } else {\n      if (state.value && state.value.find((v) => v.value === value) === undefined) {\n        // if value is set and newly fetched values does not contain selected value\n        if (state.value.length > 0) {\n          onChange(state.value[0]);\n        }\n      }\n    }\n  }, [state.value, value, applyDefault, onChange]);\n\n  return (\n    <Select\n      className={className}\n      aria-label=\"Dataset selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      disabled={disabled}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,OAAS,EAAA;AACX,MAAS,QAAA,CAAA,QAAA,CAAS,OAAO,CAAC,CAAA;AAC1B,MAAO,OAAA,CAAC,QAAS,CAAA,OAAO,CAAC,CAAA;AAAA;AAG3B,IAAM,MAAA,QAAA,GAAW,MAAM,EAAA,CAAG,QAAS,EAAA;AACnC,IAAO,OAAA,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA;AAAA;AAGF,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,IAAI,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA;AACjC,QAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB,KACK,MAAA;AACL,MAAI,IAAA,KAAA,CAAM,KAAS,IAAA,KAAA,CAAM,KAAM,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,KAAA,KAAU,KAAK,CAAA,KAAM,SAAW,EAAA;AAE3E,QAAI,IAAA,KAAA,CAAM,KAAM,CAAA,MAAA,GAAS,CAAG,EAAA;AAC1B,UAAS,QAAA,CAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA;AACzB;AACF;AACF,KACC,CAAC,KAAA,CAAM,OAAO,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAC,CAAA;AAE/C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,YAAW,EAAA,kBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA;AAAA;AAAA,GACpB;AAEJ;;;;"}