@grafana/plugin-ui 0.17.10 → 0.18.0

package/dist/cjs/index.cjs

@@ -8,10 +8,11 @@ var data = require('@grafana/data');
 var Calendar = require('react-calendar');
 var css = require('@emotion/css');
 var e2eSelectors = require('@grafana/e2e-selectors');
-var runtime = require('@grafana/runtime');
+var datasources = require('@grafana/plugin-compat/datasources');
 var reactUse = require('react-use');
 var ui$1 = require('@react-awesome-query-builder/ui');
 var uuid = require('uuid');
+var runtime = require('@grafana/runtime');
 var lodash = require('lodash');
 var AutoSizer = require('react-virtualized-auto-sizer');
 var sqlFormatter = require('sql-formatter');
@@ -338,99 +339,100 @@ function getSignatureDisplayModel(signature) {
 }
 PluginSignatureBadge.displayName = "PluginSignatureBadge";
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
-class DataSourcePicker extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField$6(this, "dataSourceSrv", runtime.getDataSourceSrv());
-    __publicField$6(this, "state", {});
-    __publicField$6(this, "onChange", (item) => {
-      const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
-      if (dsSettings) {
-        this.props.onChange(dsSettings);
-        this.setState({ error: void 0 });
+function DataSourcePicker({
+  onChange,
+  current: currentProp,
+  hideTextValue,
+  onBlur,
+  autoFocus = false,
+  openMenuOnFocus = false,
+  placeholder = "Select datasource",
+  noDefault
+}) {
+  const current = currentProp != null ? currentProp : null;
+  const showNoDatasources = !current && !!noDefault;
+  const { items, isLoading: isListLoading, error: listError } = datasources.useDataSourceInstanceList();
+  const currentResult = datasources.useDataSourceInstanceListItem(current);
+  const selected = currentResult.item;
+  const isCurrentLoading = !showNoDatasources && currentResult.isLoading;
+  const isLoading = isListLoading || isCurrentLoading;
+  const notFound = !selected && !isCurrentLoading && !showNoDatasources;
+  const handleChange = (option) => {
+    const item = items.find((ds) => ds.uid === option.value);
+    if (item) {
+      onChange(item);
+    }
+  };
+  const options = items.map((ds) => ({
+    value: ds.uid,
+    label: ds.name,
+    imgUrl: ds.meta.info.logos.small,
+    meta: ds.meta
+  }));
+  const value = getCurrentValue({ current, selected, notFound, showNoDatasources, hideTextValue });
+  const invalid = !!listError || notFound;
+  return /* @__PURE__ */ React__default.default.createElement("div", { "aria-label": e2eSelectors.selectors.components.DataSourcePicker.container }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Select,
+    {
+      className: "ds-picker select-container",
+      isMulti: false,
+      isClearable: false,
+      backspaceRemovesValue: false,
+      onChange: handleChange,
+      options,
+      isLoading,
+      autoFocus,
+      onBlur,
+      openMenuOnFocus,
+      maxMenuHeight: 500,
+      placeholder,
+      noOptionsMessage: listError ? "Could not load data sources" : "No datasources found",
+      value,
+      invalid,
+      "aria-invalid": invalid,
+      getOptionLabel: (o) => {
+        if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
+          return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React__default.default.createElement("span", null, o.label), " ", /* @__PURE__ */ React__default.default.createElement(PluginSignatureBadge, { status: o.meta.signature }));
+        }
+        return o.label || "";
       }
-    });
-  }
-  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
-      };
     }
+  ));
+}
+function getCurrentValue({
+  current,
+  selected,
+  notFound,
+  showNoDatasources,
+  hideTextValue
+}) {
+  if (showNoDatasources) {
     return {
-      label: (current != null ? current : "no name") + " - not found",
-      value: (current != null ? current : "no name") + " - not found",
-      imgUrl: "",
-      hideText: hideTextValue
+      label: "No datasources found"
     };
   }
-  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;
+  if (selected) {
+    return toOption$1(selected, hideTextValue);
   }
-  render() {
-    const { autoFocus, onBlur, openMenuOnFocus, placeholder } = this.props;
-    const { error } = this.state;
-    const options = this.getDataSourceOptions();
-    const value = this.getCurrentValue();
-    return /* @__PURE__ */ React__default.default.createElement("div", { "aria-label": e2eSelectors.selectors.components.DataSourcePicker.container }, /* @__PURE__ */ React__default.default.createElement(
-      ui.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__default.default.createElement(ui.Stack, { alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React__default.default.createElement("span", null, o.label), " ", /* @__PURE__ */ React__default.default.createElement(PluginSignatureBadge, { status: o.meta.signature }));
-          }
-          return o.label || "";
-        }
-      }
-    ));
+  if (!notFound) {
+    return void 0;
   }
+  return {
+    label: (current != null ? current : "no name") + " - not found",
+    value: (current != null ? current : "no name") + " - not found",
+    imgUrl: "",
+    hideText: hideTextValue
+  };
+}
+function toOption$1(ds, hideTextValue) {
+  return {
+    label: ds.name.substr(0, 37),
+    value: ds.name,
+    imgUrl: ds.meta.info.logos.small,
+    hideText: hideTextValue,
+    meta: ds.meta
+  };
 }
-__publicField$6(DataSourcePicker, "defaultProps", {
-  autoFocus: false,
-  openMenuOnFocus: false,
-  placeholder: "Select datasource"
-});
 
 const { FormField, Switch } = ui.LegacyForms;
 const getStyles$u = ui.stylesFactory(() => ({
@@ -24700,32 +24702,6 @@ function useHealthChecks() {
   return { healthMap, checkUids, retry };
 }
 
-let pluginNameCache = null;
-function buildPluginNameCache() {
-  var _a;
-  if (pluginNameCache) {
-    return pluginNameCache;
-  }
-  const map = /* @__PURE__ */ new Map();
-  try {
-    const list = runtime.getDataSourceSrv().getList();
-    for (const ds of list) {
-      if (((_a = ds.meta) == null ? void 0 : _a.name) && ds.type && !map.has(ds.type)) {
-        map.set(ds.type, ds.meta.name);
-      }
-    }
-  } catch (ex) {
-    console.error(ex);
-  }
-  pluginNameCache = map;
-  return map;
-}
-function resolvePluginName(pluginType) {
-  var _a;
-  const cache = buildPluginNameCache();
-  return (_a = cache.get(pluginType)) != null ? _a : pluginType;
-}
-
 function useDatasourceSchema(pluginType) {
   const [schema, setSchema] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
@@ -26588,7 +26564,6 @@ exports.isValidCelExpression = isValidCelExpression;
 exports.parseDependsOn = parseDependsOn;
 exports.resolveActiveOverride = resolveActiveOverride;
 exports.resolveGroups = resolveGroups;
-exports.resolvePluginName = resolvePluginName;
 exports.resolveRequiredFieldsGroup = resolveRequiredFieldsGroup;
 exports.toOption = toOption;
 exports.useDatasourceSchema = useDatasourceSchema;