@grafana/scenes 4.12.1--canary.704.8799450327.0 → 4.13.0--canary.705.8801395113.0

package/dist/index.js

@@ -2840,6 +2840,59 @@ class CustomAllValue {
   }
 }
 
+class GroupByVariableUrlSyncHandler {
+  constructor(_sceneObject) {
+    this._sceneObject = _sceneObject;
+  }
+  getKey() {
+    return `var-${this._sceneObject.state.name}`;
+  }
+  getKeys() {
+    if (this._sceneObject.state.skipUrlSync) {
+      return [];
+    }
+    return [this.getKey()];
+  }
+  getUrlState() {
+    if (this._sceneObject.state.skipUrlSync) {
+      return {};
+    }
+    let { value: values, text: texts } = this._sceneObject.state;
+    values = Array.isArray(values) ? values : [values];
+    texts = Array.isArray(texts) ? texts : [texts];
+    const urlValue = lodash.zip(values, texts).map(toUrlValues);
+    return { [this.getKey()]: urlValue };
+  }
+  updateFromUrl(values) {
+    let urlValue = values[this.getKey()];
+    if (urlValue != null) {
+      if (!this._sceneObject.isActive) {
+        this._sceneObject.skipNextValidation = true;
+      }
+      urlValue = Array.isArray(urlValue) ? urlValue : [urlValue];
+      const valuesLabelsPairs = urlValue.map((value) => value ? value.split(",") : [value]);
+      let [values2, labels] = lodash.unzip(valuesLabelsPairs);
+      values2 = (values2 != null ? values2 : []).map(unescapeUrlDelimiters);
+      labels = (labels != null ? labels : []).map(unescapeUrlDelimiters);
+      this._sceneObject.setState({
+        urlOptions: values2.map((value, idx) => ({
+          value,
+          text: labels[idx]
+        }))
+      });
+      this._sceneObject.changeValueTo(values2, labels);
+    }
+  }
+}
+function toUrlValues([value, label]) {
+  if (value === void 0 || value === null) {
+    return "";
+  }
+  value = String(value);
+  label = label === void 0 || label === null ? value : String(label);
+  return toUrlCommaDelimitedString(value, label);
+}
+
 var __defProp$z = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
 var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
@@ -2876,6 +2929,7 @@ class GroupByVariable extends MultiValueVariable {
       noValueOnClear: true
     }));
     this.isLazy = true;
+    this._urlSync = new GroupByVariableUrlSyncHandler(this);
     this._getKeys = async (ds) => {
       var _a, _b, _c;
       const override = await ((_b = (_a = this.state).getTagKeysProvider) == null ? void 0 : _b.call(_a, this, null));
@@ -2925,9 +2979,11 @@ class GroupByVariable extends MultiValueVariable {
     this.setState(stateUpdate);
   }
   getValueOptions(args) {
+    var _a;
+    const urlOptions = (_a = this.state.urlOptions) != null ? _a : [];
     if (this.state.defaultOptions) {
       return rxjs.of(
-        this.state.defaultOptions.map((o) => ({
+        lodash.unionBy(this.state.defaultOptions, urlOptions, "value").map((o) => ({
           label: o.text,
           value: String(o.value)
         }))
@@ -2943,7 +2999,7 @@ class GroupByVariable extends MultiValueVariable {
         return rxjs.from(this._getKeys(ds)).pipe(
           rxjs.take(1),
           rxjs.mergeMap((data) => {
-            const a = data.map((i) => {
+            const a = lodash.unionBy(data, urlOptions, "value").map((i) => {
               return {
                 label: i.text,
                 value: i.value ? String(i.value) : i.text
@@ -2961,14 +3017,24 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
-  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();
-  const arrayValue = React.useMemo(() => lodash.isArray(value) ? value : [value], [value]);
+  const { value, text, key, maxVisibleValues, noValueOnClear } = model.useState();
+  const values = React.useMemo(() => {
+    const arrayValue = lodash.isArray(value) ? value : [value];
+    const arrayText = lodash.isArray(text) ? text : [text];
+    return arrayValue.map((value2, idx) => {
+      var _a;
+      return {
+        value: value2,
+        label: String((_a = arrayText[idx]) != null ? _a : value2)
+      };
+    });
+  }, [value, text]);
   const [isFetchingOptions, setIsFetchingOptions] = React.useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = React.useState(false);
-  const [uncommittedValue, setUncommittedValue] = React.useState(arrayValue);
+  const [uncommittedValue, setUncommittedValue] = React.useState(values);
   React.useEffect(() => {
-    setUncommittedValue(arrayValue);
-  }, [arrayValue]);
+    setUncommittedValue(values);
+  }, [values]);
   const onInputChange = model.onSearchChange ? (value2, meta) => {
     if (meta.action === "input-change") {
       model.onSearchChange(value2);
@@ -2993,13 +3059,13 @@ function GroupByVariableRenderer({ model }) {
     isLoading: isFetchingOptions,
     onInputChange,
     onBlur: () => {
-      model.changeValueTo(uncommittedValue);
+      model.changeValueTo(uncommittedValue.map((x) => x.value));
     },
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
       }
-      setUncommittedValue(newValue.map((x) => x.value));
+      setUncommittedValue(newValue);
     },
     onOpenMenu: async () => {
       setIsFetchingOptions(true);
@@ -3322,7 +3388,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
+    const value = filters.map((filter) => toArray(filter).map(escapeUrlPipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3342,39 +3408,13 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
-function escapePipeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return value = /\|/g[Symbol.replace](value, "__gfp__");
-}
-function escapeCommaDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  return /,/g[Symbol.replace](value, "__gfc__");
-}
-function unescapeDelimiters(value) {
-  if (value === null || value === void 0) {
-    return "";
-  }
-  value = /__gfp__/g[Symbol.replace](value, "|");
-  value = /__gfc__/g[Symbol.replace](value, ",");
-  return value;
-}
 function toArray(filter) {
   return [
-    toCommaDelimitedString(filter.key, filter.keyLabel),
+    toUrlCommaDelimitedString(filter.key, filter.keyLabel),
     filter.operator,
-    toCommaDelimitedString(filter.value, filter.valueLabel)
+    toUrlCommaDelimitedString(filter.value, filter.valueLabel)
   ];
 }
-function toCommaDelimitedString(key, label) {
-  if (!label || key === label) {
-    return escapeCommaDelimiters(key);
-  }
-  return [key, label].map(escapeCommaDelimiters).join(",");
-}
 function toFilter(urlValue) {
   if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
@@ -3383,7 +3423,7 @@ function toFilter(urlValue) {
     const [key2, label] = v.split(",");
     acc.push(key2, label != null ? label : key2);
     return acc;
-  }, []).map(unescapeDelimiters);
+  }, []).map(unescapeUrlDelimiters);
   return {
     key,
     keyLabel,
@@ -4080,6 +4120,32 @@ function filterOutInactiveRunnerDuplicates(runners) {
     return activeItems;
   });
 }
+function escapeUrlPipeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
+}
+function escapeUrlCommaDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return /,/g[Symbol.replace](value, "__gfc__");
+}
+function unescapeUrlDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  value = /__gfp__/g[Symbol.replace](value, "|");
+  value = /__gfc__/g[Symbol.replace](value, ",");
+  return value;
+}
+function toUrlCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeUrlCommaDelimiters(key);
+  }
+  return [key, label].map(escapeUrlCommaDelimiters).join(",");
+}
 
 function isAdHocVariable(variable) {
   return variable.state.type === "adhoc";