@grafana/aws-sdk 0.2.0 → 0.3.1

package/dist/esm/src/sql/QueryEditor/FillValueSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FillValueSelect.js","sources":["../../../../../src/sql/QueryEditor/FillValueSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { DataQuery, SelectableValue } from '@grafana/data';\nimport { InlineField, Input, Select } from '@grafana/ui';\n\nexport enum FillValueOptions {\n  Previous,\n  Null,\n  Value,\n}\n\nexport const SelectableFillValueOptions: Array<SelectableValue<FillValueOptions>> = [\n  {\n    label: 'Previous Value',\n    value: FillValueOptions.Previous,\n  },\n  {\n    label: 'NULL',\n    value: FillValueOptions.Null,\n  },\n  {\n    label: 'Value',\n    value: FillValueOptions.Value,\n  },\n];\n\nexport type FillValueSelectProps<TQuery extends DataQuery> = {\n  query: TQuery;\n  onChange: (value: TQuery) => void;\n  onRunQuery?: () => void;\n};\n\nexport function FillValueSelect<TQuery extends DataQuery & Record<string, any>>(props: FillValueSelectProps<TQuery>) {\n  return (\n    <>\n      <InlineField label=\"Fill value\" tooltip=\"value to fill missing points\">\n        <Select\n          aria-label=\"Fill value\"\n          options={SelectableFillValueOptions}\n          value={props.query.fillMode?.mode ?? FillValueOptions.Previous}\n          onChange={({ value }) => {\n            props.onChange({\n              ...props.query,\n              // Keep the fillMode.value in case FillValueOptions.Value mode is selected back\n              fillMode: { ...props.query.fillMode, mode: value },\n            });\n            props.onRunQuery?.();\n          }}\n          className=\"width-12\"\n          menuShouldPortal={true}\n        />\n      </InlineField>\n      {props.query.fillMode?.mode === FillValueOptions.Value && (\n        <InlineField label=\"Value\" labelWidth={11}>\n          <Input\n            type=\"number\"\n            aria-label=\"Value\"\n            value={props.query.fillMode.value}\n            onChange={({ currentTarget }: React.FormEvent<HTMLInputElement>) =>\n              props.onChange({\n                ...props.query,\n                fillMode: {\n                  mode: FillValueOptions.Value,\n                  value: currentTarget.valueAsNumber,\n                },\n              })\n            }\n            onBlur={() => props.onRunQuery?.()}\n          />\n        </InlineField>\n      )}\n    </>\n  );\n}\n"],"names":["FillValueOptions","_a"],"mappings":"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"}
+{"version":3,"file":"FillValueSelect.js","sources":["../../../../../src/sql/QueryEditor/FillValueSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { DataQuery, SelectableValue } from '@grafana/data';\nimport { InlineField, Input, Select } from '@grafana/ui';\nimport { EditorField } from '@grafana/experimental';\n\nexport enum FillValueOptions {\n  Previous,\n  Null,\n  Value,\n}\n\nexport const SelectableFillValueOptions: Array<SelectableValue<FillValueOptions>> = [\n  {\n    label: 'Previous Value',\n    value: FillValueOptions.Previous,\n  },\n  {\n    label: 'NULL',\n    value: FillValueOptions.Null,\n  },\n  {\n    label: 'Value',\n    value: FillValueOptions.Value,\n  },\n];\n\nexport type FillValueSelectProps<TQuery extends DataQuery> = {\n  query: TQuery;\n  onChange: (value: TQuery) => void;\n  newFormStylingEnabled?: boolean;\n  onRunQuery?: () => void;\n};\n\nexport function FillValueSelect<TQuery extends DataQuery & Record<string, any>>(props: FillValueSelectProps<TQuery>) {\n  return (\n    <>\n      {props.newFormStylingEnabled ? (\n        <>\n          <EditorField label=\"Fill with\" tooltip=\"value to fill missing points\" htmlFor=\"fillWith\">\n            <Select\n              id=\"fillWith\"\n              aria-label=\"Fill with\"\n              data-testid=\"table-fill-with-select\"\n              options={SelectableFillValueOptions}\n              value={props.query.fillMode?.mode ?? FillValueOptions.Previous}\n              onChange={({ value }) => {\n                props.onChange({\n                  ...props.query,\n                  // Keep the fillMode.value in case FillValueOptions.Value mode is selected back\n                  fillMode: { ...props.query.fillMode, mode: value },\n                });\n                props.onRunQuery?.();\n              }}\n              menuShouldPortal={true}\n            />\n          </EditorField>\n          {props.query.fillMode?.mode === FillValueOptions.Value && (\n            <EditorField label=\"Value\" htmlFor=\"valueToFill\" width={6}>\n              <Input\n                id=\"valueToFill\"\n                aria-label=\"Value\"\n                type=\"number\"\n                value={props.query.fillMode.value}\n                onChange={({ currentTarget }: React.FormEvent<HTMLInputElement>) =>\n                  props.onChange({\n                    ...props.query,\n                    fillMode: {\n                      mode: FillValueOptions.Value,\n                      value: currentTarget.valueAsNumber,\n                    },\n                  })\n                }\n                onBlur={() => props.onRunQuery?.()}\n              />\n            </EditorField>\n          )}\n        </>\n      ) : (\n        <>\n          <InlineField label=\"Fill value\" tooltip=\"value to fill missing points\">\n            <Select\n              aria-label=\"Fill value\"\n              options={SelectableFillValueOptions}\n              value={props.query.fillMode?.mode ?? FillValueOptions.Previous}\n              onChange={({ value }) => {\n                props.onChange({\n                  ...props.query,\n                  // Keep the fillMode.value in case FillValueOptions.Value mode is selected back\n                  fillMode: { ...props.query.fillMode, mode: value },\n                });\n                props.onRunQuery?.();\n              }}\n              className=\"width-12\"\n              menuShouldPortal={true}\n            />\n          </InlineField>\n          {props.query.fillMode?.mode === FillValueOptions.Value && (\n            <InlineField label=\"Value\" labelWidth={11}>\n              <Input\n                type=\"number\"\n                aria-label=\"Value\"\n                value={props.query.fillMode.value}\n                onChange={({ currentTarget }: React.FormEvent<HTMLInputElement>) =>\n                  props.onChange({\n                    ...props.query,\n                    fillMode: {\n                      mode: FillValueOptions.Value,\n                      value: currentTarget.valueAsNumber,\n                    },\n                  })\n                }\n                onBlur={() => props.onRunQuery?.()}\n              />\n            </InlineField>\n          )}\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["FillValueOptions","_a"],"mappings":"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"}

package/dist/esm/src/sql/QueryEditor/FormatSelect.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineField, Select } from '@grafana/ui';
+import { Select, InlineField } from '@grafana/ui';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -21,14 +21,25 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function FormatSelect(props) {
+  var _a;
   const onChangeFormat = (e) => {
-    var _a;
+    var _a2;
     props.onChange(__spreadProps(__spreadValues({}, props.query), {
       format: e.value || 0
     }));
-    (_a = props.onRunQuery) == null ? void 0 : _a.call(props);
+    (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
   };
-  return /* @__PURE__ */ React.createElement(InlineField, { label: "Format as", labelWidth: 11 }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      "aria-label": "Format data frames as",
+      id: (_a = props.id) != null ? _a : "formatAs",
+      options: props.options,
+      value: props.query.format,
+      onChange: onChangeFormat,
+      menuShouldPortal: true
+    }
+  ) : /* @__PURE__ */ React.createElement(InlineField, { label: "Format as", labelWidth: 11 }, /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": "Format as",
@@ -38,7 +49,7 @@ function FormatSelect(props) {
       className: "width-12",
       menuShouldPortal: true
     }
-  ));
+  )));
 }
 
 export { FormatSelect };

package/dist/esm/src/sql/QueryEditor/FormatSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormatSelect.js","sources":["../../../../../src/sql/QueryEditor/FormatSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { DataQuery, SelectableValue } from '@grafana/data';\nimport { InlineField, Select } from '@grafana/ui';\n\nexport type FormatSelectProps<TQuery extends DataQuery, FormatOptions> = {\n  query: TQuery;\n  options: Array<SelectableValue<FormatOptions>>;\n  onChange: (value: TQuery) => void;\n  onRunQuery?: () => void;\n};\n\nexport function FormatSelect<TQuery extends DataQuery & Record<string, any>, FormatOptions>(\n  props: FormatSelectProps<TQuery, FormatOptions>\n) {\n  const onChangeFormat = (e: SelectableValue<FormatOptions>) => {\n    props.onChange({\n      ...props.query,\n      format: e.value || 0,\n    });\n    props.onRunQuery?.();\n  };\n  return (\n    <InlineField label=\"Format as\" labelWidth={11}>\n      <Select\n        aria-label=\"Format as\"\n        options={props.options}\n        value={props.query.format}\n        onChange={onChangeFormat}\n        className=\"width-12\"\n        menuShouldPortal={true}\n      />\n    </InlineField>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWO,SAAS,aACd,KACA,EAAA;AACA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAsC,KAAA;AAdhE,IAAA,IAAA,EAAA,CAAA;AAeI,IAAM,KAAA,CAAA,QAAA,CAAS,aACV,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAM,KADI,CAAA,EAAA;AAAA,MAEb,MAAA,EAAQ,EAAE,KAAS,IAAA,CAAA;AAAA,KACpB,CAAA,CAAA,CAAA;AACD,IAAA,CAAA,EAAA,GAAA,KAAA,CAAM,UAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACF,CAAA;AACA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAM,EAAA,WAAA,EAAY,YAAY,EACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,WAAA;AAAA,MACX,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,KAAA,EAAO,MAAM,KAAM,CAAA,MAAA;AAAA,MACnB,QAAU,EAAA,cAAA;AAAA,MACV,SAAU,EAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,KAAA;AAAA,GAEtB,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormatSelect.js","sources":["../../../../../src/sql/QueryEditor/FormatSelect.tsx"],"sourcesContent":["import React from 'react';\nimport { DataQuery, SelectableValue } from '@grafana/data';\nimport { InlineField, Select } from '@grafana/ui';\n\nexport type FormatSelectProps<TQuery extends DataQuery, FormatOptions> = {\n  newFormStylingEnabled?: boolean;\n  id?: string;\n  query: TQuery;\n  options: Array<SelectableValue<FormatOptions>>;\n  onChange: (value: TQuery) => void;\n  onRunQuery?: () => void;\n};\n\nexport function FormatSelect<TQuery extends DataQuery & Record<string, any>, FormatOptions>(\n  props: FormatSelectProps<TQuery, FormatOptions>\n) {\n  const onChangeFormat = (e: SelectableValue<FormatOptions>) => {\n    props.onChange({\n      ...props.query,\n      format: e.value || 0,\n    });\n    props.onRunQuery?.();\n  };\n  return (\n    <>\n      {props.newFormStylingEnabled ? (\n        <Select\n          aria-label=\"Format data frames as\"\n          id={props.id ?? 'formatAs'}\n          options={props.options}\n          value={props.query.format}\n          onChange={onChangeFormat}\n          menuShouldPortal={true}\n        />\n      ) : (\n        <InlineField label=\"Format as\" labelWidth={11}>\n          <Select\n            aria-label=\"Format as\"\n            options={props.options}\n            value={props.query.format}\n            onChange={onChangeFormat}\n            className=\"width-12\"\n            menuShouldPortal={true}\n          />\n        </InlineField>\n      )}\n    </>\n  );\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,aACd,KACA,EAAA;AAfF,EAAA,IAAA,EAAA,CAAA;AAgBE,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAsC,KAAA;AAhBhE,IAAAA,IAAAA,GAAAA,CAAAA;AAiBI,IAAM,KAAA,CAAA,QAAA,CAAS,aACV,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAM,KADI,CAAA,EAAA;AAAA,MAEb,MAAA,EAAQ,EAAE,KAAS,IAAA,CAAA;AAAA,KACpB,CAAA,CAAA,CAAA;AACD,IAAA,CAAAA,GAAA,GAAA,KAAA,CAAM,UAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACF,CAAA;AACA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,MAAM,qBACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,uBAAA;AAAA,MACX,EAAA,EAAA,CAAI,EAAM,GAAA,KAAA,CAAA,EAAA,KAAN,IAAY,GAAA,EAAA,GAAA,UAAA;AAAA,MAChB,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,KAAA,EAAO,MAAM,KAAM,CAAA,MAAA;AAAA,MACnB,QAAU,EAAA,cAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,KAAA;AAAA,sBAGnB,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAM,EAAA,WAAA,EAAY,YAAY,EACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,WAAA;AAAA,MACX,SAAS,KAAM,CAAA,OAAA;AAAA,MACf,KAAA,EAAO,MAAM,KAAM,CAAA,MAAA;AAAA,MACnB,QAAU,EAAA,cAAA;AAAA,MACV,SAAU,EAAA,UAAA;AAAA,MACV,gBAAkB,EAAA,IAAA;AAAA,KAAA;AAAA,GAEtB,CAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/esm/src/sql/ResourceSelector.js

@@ -1,4 +1,4 @@
-import { InlineField, Select } from '@grafana/ui';
+import { Select, InlineField } from '@grafana/ui';
 import { isEqual } from 'lodash';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 import { defaultKey } from './types.js';
@@ -102,9 +102,10 @@ function ResourceSelector(props) {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ React.createElement(InlineField, { label: props.label, labelWidth: props.labelWidth, tooltip: props.tooltip, hidden: props.hidden }, /* @__PURE__ */ React.createElement("div", { "data-testid": props["data-testid"], title: props.title }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React.createElement(
     Select,
     __spreadProps(__spreadValues({}, props), {
+      id: props.id,
       "aria-label": props.label,
       options,
       onChange,
@@ -113,7 +114,29 @@ function ResourceSelector(props) {
       onOpenMenu: () => props.fetch && onClick(),
       menuShouldPortal: true
     })
-  )));
+  ) : /* @__PURE__ */ React.createElement(
+    InlineField,
+    {
+      label: props.label,
+      labelWidth: props.labelWidth,
+      tooltip: props.tooltip,
+      hidden: props.hidden,
+      htmlFor: props.id
+    },
+    /* @__PURE__ */ React.createElement("div", { "data-testid": props["data-testid"], title: props.title }, /* @__PURE__ */ React.createElement(
+      Select,
+      __spreadProps(__spreadValues({}, props), {
+        id: props.id,
+        "aria-label": props.label,
+        options,
+        onChange,
+        isLoading,
+        className: props.className || "min-width-6",
+        onOpenMenu: () => props.fetch && onClick(),
+        menuShouldPortal: true
+      })
+    ))
+  ));
 }
 
 export { ResourceSelector };

package/dist/esm/src/sql/ResourceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceSelector.js","sources":["../../../../src/sql/ResourceSelector.tsx"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { InlineField, Select, SelectCommonProps } from '@grafana/ui';\nimport { isEqual } from 'lodash';\nimport React, { useEffect, useMemo, useState, DependencyList, useRef } from 'react';\n\nimport { defaultKey } from './types';\n\nexport interface ResourceSelectorProps extends SelectCommonProps<string> {\n  value: string | null;\n  dependencies?: DependencyList;\n  tooltip?: string;\n  label?: string;\n  'data-testid'?: string;\n  hidden?: boolean;\n  // Options only needed for QueryEditor\n  default?: string;\n  // Options only needed for the ConfigEditor\n  title?: string;\n  labelWidth?: number;\n  saveOptions?: () => Promise<void>;\n  // Either set a way of fetching resources or the resource list\n  fetch?: () => Promise<Array<string | SelectableValue<string>>>;\n  resources?: string[];\n  onChange: (e: SelectableValue<string> | null) => void;\n}\n\nexport function ResourceSelector(props: ResourceSelectorProps) {\n  const propsDependencies = props.dependencies;\n  const propsOnChange = props.onChange\n  \n  const dependencies = useRef(props.dependencies);\n  const fetched = useRef<boolean>(false);\n  const resource = useRef<string | null>(props.value || props.default || null);\n\n  const [resources, setResources] = useState<Array<string | SelectableValue>>(\n    resource.current ? [resource.current] : []\n  );\n  const [isLoading, setIsLoading] = useState(false);\n\n  \n  const defaultOpts = useMemo(() => {\n    const opts: Array<SelectableValue<string>> = [\n      {\n        label: `default (${props.default})`,\n        value: defaultKey,\n        description: `Default value set in the data source`,\n      },\n    ];\n    if (props.value && props.value !== defaultKey) {\n      opts.push({ label: props.value, value: props.value });\n    }\n    return opts;\n  }, [props.default, props.value]);\n  const [options, setOptions] = useState<Array<SelectableValue<string>>>(props.default ? defaultOpts : []);\n  useEffect(() => {\n    if (props.resources !== undefined) {\n      setResources(props.resources);\n    }\n  }, [props.resources]);\n  useEffect(() => {\n    const newOptions: Array<SelectableValue<string>> = props.default ? defaultOpts : [];\n    if (resources.length) {\n      resources.forEach((r) => {\n        const value = typeof r === 'string' ? r : r.value;\n        if (!newOptions.find((o) => o.value === value)) {\n          typeof r === 'string' ? newOptions.push({ label: r, value: r }) : newOptions.push(r);\n        }\n      });\n      setOptions(newOptions);\n    } else {\n      setOptions([]);\n    }\n  }, [resources, defaultOpts, props.default]);\n\n  useEffect(() => {\n    // A change in the dependencies cause a state clean-up\n    if (!isEqual(propsDependencies, dependencies.current)) {\n      fetched.current = false;\n      resource.current = null;\n      dependencies.current = propsDependencies\n      propsOnChange(null);\n    }\n  }, [propsDependencies, propsOnChange]);\n\n  const fetch = async () => {\n    if (fetched.current) {\n      return;\n    }\n    if (props.saveOptions) {\n      await props.saveOptions();\n    }\n    try {\n      const resources = (await props.fetch?.()) || [];\n      setResources(resources);\n    } finally {\n      fetched.current = true;\n    }\n  };\n\n  const onChange = (e: SelectableValue<string>) => {\n    propsOnChange(e);\n    if (e.value) {\n      resource.current = e.value;\n    }\n  };\n  const onClick = async () => {\n    setIsLoading(true);\n    try {\n      await fetch();\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <InlineField label={props.label} labelWidth={props.labelWidth} tooltip={props.tooltip} hidden={props.hidden}>\n      <div data-testid={props['data-testid']} title={props.title}>\n        <Select\n          {...props}\n          aria-label={props.label}\n          options={options}\n          onChange={onChange}\n          isLoading={isLoading}\n          className={props.className || 'min-width-6'}\n          onOpenMenu={() => props.fetch && onClick()}\n          menuShouldPortal={true}\n        />\n      </div>\n    </InlineField>\n  );\n}\n"],"names":["resources"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BO,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,oBAAoB,KAAM,CAAA,YAAA,CAAA;AAChC,EAAA,MAAM,gBAAgB,KAAM,CAAA,QAAA,CAAA;AAE5B,EAAM,MAAA,YAAA,GAAe,MAAO,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,OAAgB,KAAK,CAAA,CAAA;AACrC,EAAA,MAAM,WAAW,MAAsB,CAAA,KAAA,CAAM,KAAS,IAAA,KAAA,CAAM,WAAW,IAAI,CAAA,CAAA;AAE3E,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,IAChC,SAAS,OAAU,GAAA,CAAC,QAAS,CAAA,OAAO,IAAI,EAAC;AAAA,GAC3C,CAAA;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAGhD,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,IAAuC,GAAA;AAAA,MAC3C;AAAA,QACE,KAAA,EAAO,YAAY,KAAM,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,QACzB,KAAO,EAAA,UAAA;AAAA,QACP,WAAa,EAAA,CAAA,oCAAA,CAAA;AAAA,OACf;AAAA,KACF,CAAA;AACA,IAAA,IAAI,KAAM,CAAA,KAAA,IAAS,KAAM,CAAA,KAAA,KAAU,UAAY,EAAA;AAC7C,MAAK,IAAA,CAAA,IAAA,CAAK,EAAE,KAAO,EAAA,KAAA,CAAM,OAAO,KAAO,EAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAAA,KACtD;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,KACN,CAAC,KAAA,CAAM,OAAS,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA,CAAA;AAC/B,EAAM,MAAA,CAAC,SAAS,UAAU,CAAA,GAAI,SAAyC,KAAM,CAAA,OAAA,GAAU,WAAc,GAAA,EAAE,CAAA,CAAA;AACvG,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,KAAA,CAAM,cAAc,KAAW,CAAA,EAAA;AACjC,MAAA,YAAA,CAAa,MAAM,SAAS,CAAA,CAAA;AAAA,KAC9B;AAAA,GACC,EAAA,CAAC,KAAM,CAAA,SAAS,CAAC,CAAA,CAAA;AACpB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAA6C,GAAA,KAAA,CAAM,OAAU,GAAA,WAAA,GAAc,EAAC,CAAA;AAClF,IAAA,IAAI,UAAU,MAAQ,EAAA;AACpB,MAAU,SAAA,CAAA,OAAA,CAAQ,CAAC,CAAM,KAAA;AACvB,QAAA,MAAM,KAAQ,GAAA,OAAO,CAAM,KAAA,QAAA,GAAW,IAAI,CAAE,CAAA,KAAA,CAAA;AAC5C,QAAI,IAAA,CAAC,WAAW,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,KAAK,CAAG,EAAA;AAC9C,UAAA,OAAO,CAAM,KAAA,QAAA,GAAW,UAAW,CAAA,IAAA,CAAK,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,EAAO,CAAE,EAAC,CAAI,GAAA,UAAA,CAAW,KAAK,CAAC,CAAA,CAAA;AAAA,SACrF;AAAA,OACD,CAAA,CAAA;AACD,MAAA,UAAA,CAAW,UAAU,CAAA,CAAA;AAAA,KAChB,MAAA;AACL,MAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,KACf;AAAA,KACC,CAAC,SAAA,EAAW,WAAa,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAE1C,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,OAAA,CAAQ,iBAAmB,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AACrD,MAAA,OAAA,CAAQ,OAAU,GAAA,KAAA,CAAA;AAClB,MAAA,QAAA,CAAS,OAAU,GAAA,IAAA,CAAA;AACnB,MAAA,YAAA,CAAa,OAAU,GAAA,iBAAA,CAAA;AACvB,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,KACpB;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,aAAa,CAAC,CAAA,CAAA;AAErC,EAAA,MAAM,QAAQ,YAAY;AApF5B,IAAA,IAAA,EAAA,CAAA;AAqFI,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AACA,IAAA,IAAI,MAAM,WAAa,EAAA;AACrB,MAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AAAA,KAC1B;AACA,IAAI,IAAA;AACF,MAAA,MAAMA,UAAa,GAAA,OAAA,CAAM,EAAM,GAAA,KAAA,CAAA,KAAA,KAAN,mCAAoB,EAAC,CAAA;AAC9C,MAAA,YAAA,CAAaA,UAAS,CAAA,CAAA;AAAA,KACtB,SAAA;AACA,MAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,KACpB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAAW,CAAC,CAA+B,KAAA;AAC/C,IAAA,aAAA,CAAc,CAAC,CAAA,CAAA;AACf,IAAA,IAAI,EAAE,KAAO,EAAA;AACX,MAAA,QAAA,CAAS,UAAU,CAAE,CAAA,KAAA,CAAA;AAAA,KACvB;AAAA,GACF,CAAA;AACA,EAAA,MAAM,UAAU,YAAY;AAC1B,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,IAAI,IAAA;AACF,MAAA,MAAM,KAAM,EAAA,CAAA;AAAA,KACZ,SAAA;AACA,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACpB;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,KAAO,EAAA,KAAA,CAAM,OAAO,UAAY,EAAA,KAAA,CAAM,YAAY,OAAS,EAAA,KAAA,CAAM,SAAS,MAAQ,EAAA,KAAA,CAAM,0BAClG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,eAAa,KAAM,CAAA,aAAA,CAAA,EAAgB,KAAO,EAAA,KAAA,CAAM,KACnD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,KADL,CAAA,EAAA;AAAA,MAEC,cAAY,KAAM,CAAA,KAAA;AAAA,MAClB,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,EAAW,MAAM,SAAa,IAAA,aAAA;AAAA,MAC9B,UAAY,EAAA,MAAM,KAAM,CAAA,KAAA,IAAS,OAAQ,EAAA;AAAA,MACzC,gBAAkB,EAAA,IAAA;AAAA,KAAA,CAAA;AAAA,GAEtB,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ResourceSelector.js","sources":["../../../../src/sql/ResourceSelector.tsx"],"sourcesContent":["import { SelectableValue } from '@grafana/data';\nimport { InlineField, Select, SelectCommonProps } from '@grafana/ui';\nimport { isEqual } from 'lodash';\nimport React, { useEffect, useMemo, useState, DependencyList, useRef } from 'react';\n\nimport { defaultKey } from './types';\n\nexport interface ResourceSelectorProps extends SelectCommonProps<string> {\n  // props for old form styling\n  tooltip?: string;\n  hidden?: boolean;\n\n  newFormStylingEnabled?: boolean; // awsDatasourcesNewForStyling feature toggle\n  value: string | null;\n  dependencies?: DependencyList;\n  id: string;\n  label: string;\n  'data-testid'?: string;\n  // Options only needed for QueryEditor\n  default?: string;\n  // Options only needed for the ConfigEditor\n  title?: string;\n  labelWidth?: number;\n  saveOptions?: () => Promise<void>;\n  // Either set a way of fetching resources or the resource list\n  fetch?: () => Promise<Array<string | SelectableValue<string>>>;\n  resources?: string[];\n  onChange: (e: SelectableValue<string> | null) => void;\n}\n\nexport function ResourceSelector(props: ResourceSelectorProps) {\n  const propsDependencies = props.dependencies;\n  const propsOnChange = props.onChange;\n\n  const dependencies = useRef(props.dependencies);\n  const fetched = useRef<boolean>(false);\n  const resource = useRef<string | null>(props.value || props.default || null);\n\n  const [resources, setResources] = useState<Array<string | SelectableValue>>(\n    resource.current ? [resource.current] : []\n  );\n  const [isLoading, setIsLoading] = useState(false);\n\n  const defaultOpts = useMemo(() => {\n    const opts: Array<SelectableValue<string>> = [\n      {\n        label: `default (${props.default})`,\n        value: defaultKey,\n        description: `Default value set in the data source`,\n      },\n    ];\n    if (props.value && props.value !== defaultKey) {\n      opts.push({ label: props.value, value: props.value });\n    }\n    return opts;\n  }, [props.default, props.value]);\n  const [options, setOptions] = useState<Array<SelectableValue<string>>>(props.default ? defaultOpts : []);\n  useEffect(() => {\n    if (props.resources !== undefined) {\n      setResources(props.resources);\n    }\n  }, [props.resources]);\n  useEffect(() => {\n    const newOptions: Array<SelectableValue<string>> = props.default ? defaultOpts : [];\n    if (resources.length) {\n      resources.forEach((r) => {\n        const value = typeof r === 'string' ? r : r.value;\n        if (!newOptions.find((o) => o.value === value)) {\n          typeof r === 'string' ? newOptions.push({ label: r, value: r }) : newOptions.push(r);\n        }\n      });\n      setOptions(newOptions);\n    } else {\n      setOptions([]);\n    }\n  }, [resources, defaultOpts, props.default]);\n\n  useEffect(() => {\n    // A change in the dependencies cause a state clean-up\n    if (!isEqual(propsDependencies, dependencies.current)) {\n      fetched.current = false;\n      resource.current = null;\n      dependencies.current = propsDependencies;\n      propsOnChange(null);\n    }\n  }, [propsDependencies, propsOnChange]);\n\n  const fetch = async () => {\n    if (fetched.current) {\n      return;\n    }\n    if (props.saveOptions) {\n      await props.saveOptions();\n    }\n    try {\n      const resources = (await props.fetch?.()) || [];\n      setResources(resources);\n    } finally {\n      fetched.current = true;\n    }\n  };\n\n  const onChange = (e: SelectableValue<string>) => {\n    propsOnChange(e);\n    if (e.value) {\n      resource.current = e.value;\n    }\n  };\n  const onClick = async () => {\n    setIsLoading(true);\n    try {\n      await fetch();\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <>\n      {props.newFormStylingEnabled ? (\n        <Select\n          {...props}\n          id={props.id}\n          aria-label={props.label}\n          options={options}\n          onChange={onChange}\n          isLoading={isLoading}\n          className={props.className || 'min-width-6'}\n          onOpenMenu={() => props.fetch && onClick()}\n          menuShouldPortal={true}\n        />\n      ) : (\n        <InlineField\n          label={props.label}\n          labelWidth={props.labelWidth}\n          tooltip={props.tooltip}\n          hidden={props.hidden}\n          htmlFor={props.id}\n        >\n          <div data-testid={props['data-testid']} title={props.title}>\n            <Select\n              {...props}\n              id={props.id}\n              aria-label={props.label}\n              options={options}\n              onChange={onChange}\n              isLoading={isLoading}\n              className={props.className || 'min-width-6'}\n              onOpenMenu={() => props.fetch && onClick()}\n              menuShouldPortal={true}\n            />\n          </div>\n        </InlineField>\n      )}\n    </>\n  );\n}\n"],"names":["resources"],"mappings":"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"}

package/dist/index.d.ts

@@ -40,9 +40,12 @@ interface ConnectionConfigProps<J extends AwsAuthDataSourceJsonData = AwsAuthDat
     labelWidth?: number;
     inExperimentalAuthComponent?: boolean;
     externalId?: string;
+    newFormStylingEnabled?: boolean;
 }
 declare const ConnectionConfig: FC<ConnectionConfigProps>;
 
+declare function Divider(): JSX.Element;
+
 interface SIGV4ConnectionConfigProps extends DataSourcePluginOptionsEditorProps<any, any> {
     inExperimentalAuthComponent?: boolean;
 }
@@ -53,7 +56,8 @@ interface ConfigSelectProps extends DataSourcePluginOptionsEditorProps<AwsAuthDa
     fetch: () => Promise<Array<string | SelectableValue<string>>>;
     onChange: (e: SelectableValue<string> | null) => void;
     dependencies?: string[];
-    label?: string;
+    id: string;
+    label: string;
     'data-testid'?: string;
     hidden?: boolean;
     disabled?: boolean;
@@ -80,6 +84,7 @@ interface ConfigSelectProps extends DataSourcePluginOptionsEditorProps<AwsAuthDa
     width?: number;
     isOptionDisabled?: () => boolean;
     labelWidth?: number;
+    newFormStylingEnabled?: boolean;
 }
 declare function ConfigSelect(props: ConfigSelectProps): JSX.Element;
 
@@ -97,12 +102,14 @@ interface InlineInputProps extends DataSourcePluginOptionsEditorProps<{}, AwsAut
 declare function InlineInput(props: InlineInputProps): JSX.Element;
 
 interface ResourceSelectorProps extends SelectCommonProps<string> {
+    tooltip?: string;
+    hidden?: boolean;
+    newFormStylingEnabled?: boolean;
     value: string | null;
     dependencies?: DependencyList;
-    tooltip?: string;
-    label?: string;
+    id: string;
+    label: string;
     'data-testid'?: string;
-    hidden?: boolean;
     default?: string;
     title?: string;
     labelWidth?: number;
@@ -121,6 +128,7 @@ declare enum FillValueOptions {
 declare type FillValueSelectProps<TQuery extends DataQuery> = {
     query: TQuery;
     onChange: (value: TQuery) => void;
+    newFormStylingEnabled?: boolean;
     onRunQuery?: () => void;
 };
 declare function FillValueSelect<TQuery extends DataQuery & Record<string, any>>(props: FillValueSelectProps<TQuery>): JSX.Element;
@@ -163,6 +171,8 @@ interface Props<Datasource extends DataSourceApi<TQuery, JsonData>, TQuery exten
 declare function QueryEditorHeader<Datasource extends DataSourceApi<TQuery, JsonData>, TQuery extends DataQuery, JsonData extends DataSourceJsonData>({ query, showAsyncQueryButtons, extraHeaderElementLeft, extraHeaderElementRight, enableRunButton, onRunQuery, data, cancel, }: Props<Datasource, TQuery, JsonData>): JSX.Element;
 
 declare type FormatSelectProps<TQuery extends DataQuery, FormatOptions> = {
+    newFormStylingEnabled?: boolean;
+    id?: string;
     query: TQuery;
     options: Array<SelectableValue<FormatOptions>>;
     onChange: (value: TQuery) => void;
@@ -181,4 +191,4 @@ declare const standardRegions: string[];
 
 declare const awsAuthProviderOptions: Array<SelectableValue<AwsAuthType>>;
 
-export { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceSettings, AwsAuthType, ConfigSelect, ConnectionConfig, ConnectionConfigProps, DEFAULT_LABEL_WIDTH, FillValueOptions, FillValueSelect, FormatSelect, InlineInput, QueryCodeEditor, QueryEditorHeader, ResourceSelector, ResourceSelectorProps, SIGV4ConnectionConfig, SQLQuery, appendTemplateVariablesAsSuggestions, applySQLTemplateVariables, awsAuthProviderOptions, filterSQLQuery, standardRegions };
+export { AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceSettings, AwsAuthType, ConfigSelect, ConnectionConfig, ConnectionConfigProps, DEFAULT_LABEL_WIDTH, Divider, FillValueOptions, FillValueSelect, FormatSelect, InlineInput, QueryCodeEditor, QueryEditorHeader, ResourceSelector, ResourceSelectorProps, SIGV4ConnectionConfig, SQLQuery, appendTemplateVariablesAsSuggestions, applySQLTemplateVariables, awsAuthProviderOptions, filterSQLQuery, standardRegions };