@grafana/scenes 6.11.1 → 6.12.0--canary.1122.15063334499.0

package/dist/index.js

@@ -2964,18 +2964,34 @@ class GroupByVariableUrlSyncHandler {
     return [this.getKey()];
   }
   getUrlState() {
+    var _a;
     if (this._sceneObject.state.skipUrlSync) {
       return {};
     }
-    return { [this.getKey()]: toUrlValues(this._sceneObject.state.value, this._sceneObject.state.text) };
+    return {
+      [this.getKey()]: toUrlValues(
+        this._sceneObject.state.value,
+        this._sceneObject.state.text,
+        (_a = this._sceneObject.state.defaultValues) == null ? void 0 : _a.value
+      )
+    };
   }
   updateFromUrl(values) {
+    var _a, _b;
     let urlValue = values[this.getKey()];
     if (urlValue != null) {
       if (!this._sceneObject.isActive) {
         this._sceneObject.skipNextValidation = true;
       }
-      const { values: values2, texts } = fromUrlValues(urlValue);
+      const { values: values2, texts, defaults } = fromUrlValues(urlValue);
+      if (lodash.isEqual(values2, defaults) && this._sceneObject.state.defaultValues) {
+        this._sceneObject.changeValueTo(
+          (_a = this._sceneObject.state.defaultValues) == null ? void 0 : _a.value,
+          (_b = this._sceneObject.state.defaultValues) == null ? void 0 : _b.text,
+          false
+        );
+        return;
+      }
       this._sceneObject.changeValueTo(values2, texts);
     }
   }
@@ -2988,9 +3004,10 @@ class GroupByVariableUrlSyncHandler {
     return this._nextChangeShouldAddHistoryStep;
   }
 }
-function toUrlValues(values, texts) {
+function toUrlValues(values, texts, defaultValues) {
   values = Array.isArray(values) ? values : [values];
   texts = Array.isArray(texts) ? texts : [texts];
+  const defaults = defaultValues ? Array.isArray(defaultValues) ? defaultValues : [defaultValues] : [];
   return values.map((value, idx) => {
     if (value === void 0 || value === null) {
       return "";
@@ -2998,21 +3015,27 @@ function toUrlValues(values, texts) {
     value = String(value);
     let text = texts[idx];
     text = text === void 0 || text === null ? value : String(text);
-    return toUrlCommaDelimitedString(value, text);
+    return toUrlCommaDelimitedString(value, text) + (defaults.includes(value) ? escapeUrlPipeDelimiters("|default") : "");
   });
 }
 function fromUrlValues(urlValues) {
   urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];
   return urlValues.reduce(
     (acc, urlValue) => {
-      const [value, label] = (urlValue != null ? urlValue : "").split(",");
+      const pipeEscapedVal = /__gfp__/g[Symbol.replace](urlValue, "|");
+      const [commaValues, isDefault] = (pipeEscapedVal != null ? pipeEscapedVal : "").split("|");
+      const [value, label] = (commaValues != null ? commaValues : "").split(",");
       acc.values.push(unescapeUrlDelimiters(value));
       acc.texts.push(unescapeUrlDelimiters(label != null ? label : value));
+      if (isDefault) {
+        acc.defaults.push(value);
+      }
       return acc;
     },
     {
       values: [],
-      texts: []
+      texts: [],
+      defaults: []
     }
   );
 }
@@ -3076,6 +3099,101 @@ function wrapInSafeSerializableSceneObject(sceneObject) {
   return { value: sceneObject, text: "__sceneObject" };
 }
 
+function DefaultGroupByCustomIndicatorContainer(props) {
+  const { model } = props;
+  const theme = ui.useTheme2();
+  const styles = getStyles$h(theme);
+  const inputStyles = ui.getInputStyles({ theme, invalid: false });
+  const value = React.useMemo(
+    () => lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [],
+    [model.state.value]
+  );
+  const isRestorable = React.useMemo(() => {
+    return model.checkIfRestorable(value);
+  }, [value, model]);
+  let buttons = [];
+  if (value && value.length) {
+    buttons.push(
+      /* @__PURE__ */ React__default.default.createElement(
+        ui.IconButton,
+        {
+          "aria-label": "clear",
+          key: "clear",
+          name: "times",
+          size: "md",
+          className: styles.clearIcon,
+          onClick: (e) => {
+            model.changeValueTo([], void 0, true);
+          }
+        }
+      )
+    );
+  }
+  if (isRestorable) {
+    buttons.push(
+      /* @__PURE__ */ React__default.default.createElement(
+        ui.IconButton,
+        {
+          onClick: (e) => {
+            props.model.restoreDefaultValues();
+          },
+          onKeyDownCapture: (e) => {
+            if (e.key === "Enter") {
+              props.model.restoreDefaultValues();
+            }
+          },
+          key: "restore",
+          name: "history",
+          size: "md",
+          className: styles.clearIcon,
+          tooltip: "Restore groupby set by this dashboard."
+        }
+      )
+    );
+  }
+  if (!isRestorable) {
+    buttons.push(
+      /* @__PURE__ */ React__default.default.createElement(
+        ui.Tooltip,
+        {
+          key: "tooltip",
+          content: "Applied by default in this dashboard. If edited, it carries over to other dashboards.",
+          placement: "bottom"
+        },
+        /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "md" })
+      )
+    );
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: css.cx(
+        inputStyles.suffix,
+        css.css({
+          position: "relative"
+        })
+      )
+    },
+    buttons
+  );
+}
+const getStyles$h = (theme) => ({
+  clearIcon: css.css({
+    color: theme.colors.action.disabledText,
+    cursor: "pointer",
+    "&:hover:before": {
+      backgroundColor: "transparent"
+    },
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
+  })
+});
+
 class GroupByVariable extends MultiValueVariable {
   constructor(initialState) {
     super({
@@ -3094,6 +3212,15 @@ class GroupByVariable extends MultiValueVariable {
     });
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
+    this._activationHandler = () => {
+      if (this.state.defaultValues && (lodash.isArray(this.state.value) && !this.state.value.length || !this.state.value)) {
+        this.setState({
+          value: this.state.defaultValues.value,
+          text: this.state.defaultValues.text
+        });
+        return;
+      }
+    };
     /**
      * Get possible keys given current filters. Do not call from plugins directly
      */
@@ -3138,6 +3265,7 @@ class GroupByVariable extends MultiValueVariable {
         return () => allActiveGroupByVariables.delete(this);
       });
     }
+    this.addActivationHandler(this._activationHandler);
   }
   validateAndUpdate() {
     return this.getValueOptions({}).pipe(
@@ -3196,6 +3324,21 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
+  checkIfRestorable(values) {
+    var _a, _b, _c, _d;
+    const originalValues = lodash.isArray((_a = this.state.defaultValues) == null ? void 0 : _a.value) ? (_b = this.state.defaultValues) == null ? void 0 : _b.value : ((_c = this.state.defaultValues) == null ? void 0 : _c.value) ? [(_d = this.state.defaultValues) == null ? void 0 : _d.value] : [];
+    const vals = lodash.isArray(values) ? values : [values];
+    if (vals.length !== originalValues.length) {
+      return true;
+    }
+    return !lodash.isEqual(vals, originalValues);
+  }
+  restoreDefaultValues() {
+    if (!this.state.defaultValues) {
+      return;
+    }
+    this.changeValueTo(this.state.defaultValues.value, this.state.defaultValues.text, true);
+  }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
@@ -3214,7 +3357,8 @@ function GroupByVariableRenderer({ model }) {
     noValueOnClear,
     options,
     includeAll,
-    allowCustomValue = true
+    allowCustomValue = true,
+    defaultValues
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3232,6 +3376,7 @@ function GroupByVariableRenderer({ model }) {
   const [inputValue, setInputValue] = React.useState("");
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
+  const hasDefaultValues = defaultValues !== void 0;
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3259,7 +3404,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Select value",
+      placeholder: "Group by label",
       width: "auto",
       allowCustomValue,
       inputValue,
@@ -3275,7 +3420,12 @@ function GroupByVariableRenderer({ model }) {
       isClearable: true,
       hideSelectedOptions: false,
       isLoading: isFetchingOptions,
-      components: { Option: OptionWithCheckbox },
+      components: {
+        Option: OptionWithCheckbox,
+        ...hasDefaultValues ? {
+          IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
+        } : {}
+      },
       onInputChange,
       onBlur: () => {
         model.changeValueTo(
@@ -3306,7 +3456,7 @@ function GroupByVariableRenderer({ model }) {
       "aria-label": "Group by selector",
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Select value",
+      placeholder: "Group by label",
       width: "auto",
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,