@grafana/scenes 6.12.0 → 6.13.0--canary.1122.15166261616.0

package/dist/index.js

@@ -2955,6 +2955,9 @@ class GroupByVariableUrlSyncHandler {
     this._sceneObject = _sceneObject;
     this._nextChangeShouldAddHistoryStep = false;
   }
+  getRestorableKey() {
+    return `${this._sceneObject.state.name}-restorable`;
+  }
   getKey() {
     return `var-${this._sceneObject.state.name}`;
   }
@@ -2962,21 +2965,36 @@ class GroupByVariableUrlSyncHandler {
     if (this._sceneObject.state.skipUrlSync) {
       return [];
     }
-    return [this.getKey()];
+    return [this.getKey(), ...this._sceneObject.state.defaultValue ? [this.getRestorableKey()] : []];
   }
   getUrlState() {
     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),
+      ...this._sceneObject.state.defaultValue ? {
+        [this.getRestorableKey()]: this._sceneObject.state.restorable ? "true" : void 0
+      } : {}
+    };
   }
   updateFromUrl(values) {
+    var _a, _b;
     let urlValue = values[this.getKey()];
+    let restorableValue = values[this.getRestorableKey()];
     if (urlValue != null) {
       if (!this._sceneObject.isActive) {
         this._sceneObject.skipNextValidation = true;
       }
       const { values: values2, texts } = fromUrlValues(urlValue);
+      if (this._sceneObject.state.defaultValue && !restorableValue) {
+        this._sceneObject.changeValueTo(
+          (_a = this._sceneObject.state.defaultValue) == null ? void 0 : _a.value,
+          (_b = this._sceneObject.state.defaultValue) == null ? void 0 : _b.text,
+          false
+        );
+        return;
+      }
       this._sceneObject.changeValueTo(values2, texts);
     }
   }
@@ -3077,6 +3095,98 @@ 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 = lodash.isArray(model.state.value) ? model.state.value : model.state.value ? [model.state.value] : [];
+  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 (model.checkIfRestorable([])) {
+              model.setState({ restorable: true });
+            }
+          }
+        }
+      )
+    );
+  }
+  if (model.state.restorable) {
+    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 (!model.state.restorable) {
+    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({
@@ -3095,6 +3205,21 @@ class GroupByVariable extends MultiValueVariable {
     });
     this.isLazy = true;
     this._urlSync = new GroupByVariableUrlSyncHandler(this);
+    this._activationHandler = () => {
+      if (this.state.defaultValue && (lodash.isArray(this.state.value) && !this.state.value.length || !this.state.value)) {
+        this.setState({
+          value: this.state.defaultValue.value,
+          text: this.state.defaultValue.text,
+          restorable: false
+        });
+      }
+      if (this.state.defaultValue && this.checkIfRestorable(this.state.value)) {
+        this.setState({ restorable: true });
+      }
+      return () => {
+        this.restoreDefaultValues();
+      };
+    };
     /**
      * Get possible keys given current filters. Do not call from plugins directly
      */
@@ -3139,6 +3264,7 @@ class GroupByVariable extends MultiValueVariable {
         return () => allActiveGroupByVariables.delete(this);
       });
     }
+    this.addActivationHandler(this._activationHandler);
   }
   validateAndUpdate() {
     return this.getValueOptions({}).pipe(
@@ -3197,6 +3323,25 @@ class GroupByVariable extends MultiValueVariable {
       })
     );
   }
+  // This method is related to the defaultValue property. We check if the current value
+  // is different from the default value. If it is, the groupBy will show a button
+  // allowing the user to restore the default values.
+  checkIfRestorable(values) {
+    var _a, _b, _c, _d;
+    const originalValues = lodash.isArray((_a = this.state.defaultValue) == null ? void 0 : _a.value) ? (_b = this.state.defaultValue) == null ? void 0 : _b.value : ((_c = this.state.defaultValue) == null ? void 0 : _c.value) ? [(_d = this.state.defaultValue) == 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() {
+    this.setState({ restorable: false });
+    if (!this.state.defaultValue) {
+      return;
+    }
+    this.changeValueTo(this.state.defaultValue.value, this.state.defaultValue.text, true);
+  }
   /**
    * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable
    */
@@ -3215,7 +3360,8 @@ function GroupByVariableRenderer({ model }) {
     noValueOnClear,
     options,
     includeAll,
-    allowCustomValue = true
+    allowCustomValue = true,
+    defaultValue
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3233,6 +3379,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 hasDefaultValue = defaultValue !== void 0;
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3260,7 +3407,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,
@@ -3276,7 +3423,12 @@ function GroupByVariableRenderer({ model }) {
       isClearable: true,
       hideSelectedOptions: false,
       isLoading: isFetchingOptions,
-      components: { Option: OptionWithCheckbox },
+      components: {
+        Option: OptionWithCheckbox,
+        ...hasDefaultValue ? {
+          IndicatorsContainer: () => /* @__PURE__ */ React__default.default.createElement(DefaultGroupByCustomIndicatorContainer, { model })
+        } : {}
+      },
       onInputChange,
       onBlur: () => {
         model.changeValueTo(
@@ -3284,6 +3436,10 @@ function GroupByVariableRenderer({ model }) {
           uncommittedValue.map((x) => x.label),
           true
         );
+        const restorable = model.checkIfRestorable(uncommittedValue.map((v) => v.value));
+        if (restorable !== model.state.restorable) {
+          model.setState({ restorable });
+        }
       },
       onChange: (newValue, action) => {
         if (action.action === "clear" && noValueOnClear) {
@@ -3307,7 +3463,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,