@grafana/scenes 6.43.0--canary.1296.19132771015.0 → 6.43.0--canary.1297.19135213685.0

package/dist/index.js

@@ -1514,7 +1514,10 @@ const formatRegistry = new data.Registry(() => {
       id: "join",
       // join not yet available in depended @grafana/schema version
       name: "Join",
-      description: "Join values with a comma",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.join-values-with-a-comma",
+        "Join values with a comma"
+      ),
       formatter: (value, args) => {
         var _a;
         if (lodash.isArray(value)) {
@@ -1587,8 +1590,8 @@ const formatRegistry = new data.Registry(() => {
       id: schema.VariableFormatID.QueryParam,
       name: "Query parameter",
       description: "Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.",
-      formatter: (value, _args, variable) => {
-        if (variable.urlSync) {
+      formatter: (value, _args, variable, fieldPath) => {
+        if (variable.urlSync && !fieldPath) {
           const urlParam = variable.urlSync.getUrlState();
           return data.urlUtil.toUrlParams(urlParam);
         }
@@ -2442,7 +2445,7 @@ function sceneInterpolator(sceneObject, target, scopedVars, format, interpolatio
       }
       return match;
     }
-    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt);
+    const value = formatValue(sceneObject, variable, variable.getValue(fieldPath), fmt, fieldPath);
     if (interpolations) {
       interpolations.push({ match, variableName, fieldPath, format: fmt, value, found: value !== match });
     }
@@ -2466,7 +2469,7 @@ function lookupFormatVariable(name, match, scopedVars, sceneObject) {
   }
   return null;
 }
-function formatValue(context, variable, value, formatNameOrFn) {
+function formatValue(context, variable, value, formatNameOrFn, fieldPath) {
   if (value === null || value === void 0) {
     return "";
   }
@@ -2501,7 +2504,7 @@ function formatValue(context, variable, value, formatNameOrFn) {
     console.error(`Variable format ${formatNameOrFn} not found. Using glob format as fallback.`);
     formatter = formatRegistry.get(schema.VariableFormatID.Glob);
   }
-  return formatter.formatter(value, args, variable);
+  return formatter.formatter(value, args, variable, fieldPath);
 }
 
 function isSceneObject(obj) {
@@ -3585,29 +3588,23 @@ class GroupByVariable extends MultiValueVariable {
     });
     return applicableValues;
   }
-  async getGroupByApplicabilityForQueries(value, queries) {
+  async _verifyApplicability() {
     const ds = await getDataSource(this.state.datasource, {
       __sceneObject: wrapInSafeSerializableSceneObject(this)
     });
     if (!ds.getDrilldownsApplicability) {
       return;
     }
+    const queries = getQueriesForVariables(this);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
-    return await ds.getDrilldownsApplicability({
+    const value = this.state.value;
+    const response = await ds.getDrilldownsApplicability({
       groupByKeys: Array.isArray(value) ? value.map((v) => String(v)) : value ? [String(value)] : [],
       queries,
       timeRange,
       scopes: sceneGraph.getScopes(this),
       ...getEnrichedFiltersRequest(this)
     });
-  }
-  async _verifyApplicability() {
-    const queries = getQueriesForVariables(this);
-    const value = this.state.value;
-    const response = await this.getGroupByApplicabilityForQueries(value, queries);
-    if (!response) {
-      return;
-    }
     if (!lodash.isEqual(response, this.state.keysApplicability)) {
       this.setState({ keysApplicability: response != null ? response : void 0 });
       this.publishEvent(new SceneVariableValueChangedEvent(this), true);
@@ -3638,15 +3635,6 @@ class GroupByVariable extends MultiValueVariable {
   getDefaultMultiState(options) {
     return { value: [], text: [] };
   }
-  /**
-   * Focus the group by input to start selecting dimensions.
-   */
-  focusInput() {
-    if (this.state.readOnly) {
-      return;
-    }
-    this.setState({ _shouldFocus: true });
-  }
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
@@ -3661,8 +3649,7 @@ function GroupByVariableRenderer({ model }) {
     includeAll,
     allowCustomValue = true,
     defaultValue,
-    keysApplicability,
-    _shouldFocus
+    keysApplicability
   } = model.useState();
   const values = React.useMemo(() => {
     const arrayValue = lodash.isArray(value) ? value : [value];
@@ -3681,14 +3668,6 @@ function GroupByVariableRenderer({ model }) {
   const [uncommittedValue, setUncommittedValue] = React.useState(values);
   const optionSearcher = React.useMemo(() => getOptionSearcher(options, includeAll), [options, includeAll]);
   const hasDefaultValue = defaultValue !== void 0;
-  const selectRef = React.useRef(null);
-  React.useEffect(() => {
-    var _a, _b;
-    if (_shouldFocus) {
-      (_b = (_a = selectRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
-      model.setState({ _shouldFocus: false });
-    }
-  }, [_shouldFocus, model]);
   React.useEffect(() => {
     setUncommittedValue(values);
   }, [values]);
@@ -3713,7 +3692,6 @@ function GroupByVariableRenderer({ model }) {
   return isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
-      selectRef,
       "aria-label": i18n.t(
         "grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector",
         "Group by selector"
@@ -3781,7 +3759,6 @@ function GroupByVariableRenderer({ model }) {
   ) : /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
-      selectRef,
       "aria-label": i18n.t(
         "grafana-scenes.variables.group-by-variable-renderer.aria-label-group-by-selector",
         "Group by selector"
@@ -3975,7 +3952,6 @@ function VizPanelRenderer({ model }) {
     hoverHeaderOffset,
     menu,
     headerActions,
-    subHeader,
     titleItems,
     seriesLimit,
     seriesLimitShowAll,
@@ -4040,20 +4016,6 @@ function VizPanelRenderer({ model }) {
   if (dataObject && dataObject.setContainerWidth) {
     dataObject.setContainerWidth(Math.round(width));
   }
-  let subHeaderElement = [];
-  if (subHeader) {
-    if (Array.isArray(subHeader)) {
-      subHeaderElement = subHeaderElement.concat(
-        subHeader.map((subHeaderItem) => {
-          return /* @__PURE__ */ React__default.default.createElement(subHeaderItem.Component, { model: subHeaderItem, key: `${subHeaderItem.state.key}` });
-        })
-      );
-    } else if (isSceneObject(subHeader)) {
-      subHeaderElement.push(/* @__PURE__ */ React__default.default.createElement(subHeader.Component, { model: subHeader }));
-    } else {
-      subHeaderElement.push(subHeader);
-    }
-  }
   let titleItemsElement = [];
   if (titleItems) {
     if (Array.isArray(titleItems)) {
@@ -4127,7 +4089,8 @@ function VizPanelRenderer({ model }) {
   const isReadyToRender = dataObject.isDataReadyToDisplay ? dataObject.isDataReadyToDisplay() : true;
   const context = model.getPanelContext();
   const panelId = model.getLegacyPanelId();
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: relativeWrapper }, /* @__PURE__ */ React__default.default.createElement("div", { ref, className: absoluteWrapper, "data-viz-panel-key": model.state.key }, width > 0 && height > 0 && /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: relativeWrapper }, /* @__PURE__ */ React__default.default.createElement("div", { ref, className: absoluteWrapper, "data-viz-panel-key": model.state.key }, width > 0 && height > 0 && // @ts-expect-error showMenuAlways remove when updating to @grafana/ui@12 fixed in https://github.com/grafana/grafana/pull/103553
+  /* @__PURE__ */ React__default.default.createElement(
     ui.PanelChrome,
     {
       title: titleInterpolated,
@@ -4149,7 +4112,6 @@ function VizPanelRenderer({ model }) {
       onFocus: setPanelAttention,
       onMouseEnter: setPanelAttention,
       onMouseMove: debouncedMouseMove,
-      subHeaderContent: subHeaderElement.length ? subHeaderElement : void 0,
       onDragStart: (e) => {
         var _a2;
         (_a2 = dragHooks.onDragStart) == null ? void 0 : _a2.call(dragHooks, e, model);
@@ -7634,16 +7596,9 @@ const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwa
 });
 
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly, _shouldFocus } = controller.useState();
+  const { originFilters, filters, readOnly } = controller.useState();
   const styles = ui.useStyles2(getStyles$9);
   const focusOnWipInputRef = React.useRef();
-  React.useEffect(() => {
-    var _a, _b;
-    if (_shouldFocus) {
-      (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
-      (_b = controller.resetFocusFlag) == null ? void 0 : _b.call(controller);
-    }
-  }, [_shouldFocus, controller]);
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
@@ -7810,8 +7765,7 @@ class AdHocFiltersVariableController {
       allowCustomValue: state.allowCustomValue,
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
-      wip: state._wip,
-      _shouldFocus: state._shouldFocus
+      wip: state._wip
     };
   }
   async getKeys(currentKey) {
@@ -7844,12 +7798,6 @@ class AdHocFiltersVariableController {
   restoreOriginalFilter(filter) {
     this.model.restoreOriginalFilter(filter);
   }
-  focusInput() {
-    this.model.focusInput();
-  }
-  resetFocusFlag() {
-    this.model._resetFocusFlag();
-  }
   startProfile(name) {
     const queryController = getQueryController(this.model);
     queryController == null ? void 0 : queryController.startProfile(name);
@@ -7864,6 +7812,7 @@ class AdHocFiltersVariableController {
   }
 }
 
+const ORIGIN_FILTERS_KEY = "originFilters";
 const OPERATORS = [
   {
     value: "=",
@@ -8064,7 +8013,18 @@ class AdHocFiltersVariable extends SceneObjectBase {
       this._updateFilter(filter, original);
     }
   }
-  getValue() {
+  getValue(fieldPath) {
+    if (fieldPath === ORIGIN_FILTERS_KEY) {
+      const originFilters = this.state.originFilters;
+      if (!originFilters || (originFilters == null ? void 0 : originFilters.length) === 0) {
+        return [];
+      }
+      return [
+        ...originFilters.map(
+          (filter) => toArray(filter).map(escapeOriginFilterUrlDelimiters).join("|").concat(`#${filter.origin}`)
+        )
+      ];
+    }
     return this.state.filterExpression;
   }
   _updateFilter(filter, update) {
@@ -8173,28 +8133,25 @@ class AdHocFiltersVariable extends SceneObjectBase {
       });
     }
   }
-  async getFiltersApplicabilityForQueries(filters, queries) {
+  async _verifyApplicability() {
+    var _a, _b, _c;
+    const filters = [...this.state.filters, ...(_a = this.state.originFilters) != null ? _a : []];
     const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);
     if (!ds || !ds.getDrilldownsApplicability) {
       return;
     }
+    if (!filters) {
+      return;
+    }
     const timeRange = sceneGraph.getTimeRange(this).state.value;
-    return await ds.getDrilldownsApplicability({
+    const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
+    const response = await ds.getDrilldownsApplicability({
       filters,
       queries,
       timeRange,
       scopes: sceneGraph.getScopes(this),
       ...getEnrichedFiltersRequest(this)
     });
-  }
-  async _verifyApplicability() {
-    var _a, _b, _c;
-    const filters = [...this.state.filters, ...(_a = this.state.originFilters) != null ? _a : []];
-    const queries = this.state.useQueriesAsFilterForOptions ? getQueriesForVariables(this) : void 0;
-    const response = await this.getFiltersApplicabilityForQueries(filters, queries != null ? queries : []);
-    if (!response) {
-      return;
-    }
     const responseMap = /* @__PURE__ */ new Map();
     response.forEach((filter) => {
       responseMap.set(`${filter.key}${filter.origin ? `-${filter.origin}` : ""}`, filter);
@@ -8317,27 +8274,6 @@ class AdHocFiltersVariable extends SceneObjectBase {
       _wip: { key: "", value: "", operator: "=", condition: "" }
     });
   }
-  /**
-   * Focus the filter input to start adding a new filter.
-   * Works with both standard and combobox layouts.
-   */
-  focusInput() {
-    if (this.state.readOnly) {
-      return;
-    }
-    if (this.state.layout === "combobox") {
-      this.setState({ _shouldFocus: true });
-    }
-  }
-  /**
-   * Reset the focus flag after focusing has completed
-   * @internal
-   */
-  _resetFocusFlag() {
-    if (this.state._shouldFocus) {
-      this.setState({ _shouldFocus: false });
-    }
-  }
   _getOperators() {
     const { supportsMultiValueOperators, allowCustomValue = true } = this.state;
     return OPERATORS.filter(({ isMulti, isRegex }) => {
@@ -11964,6 +11900,7 @@ function SwitchVariableRenderer({ model }) {
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(
     ui.Switch,
     {
+      id: `var-${state.key}`,
       value: state.value === state.enabledValue,
       onChange: (event) => {
         model.setValue(event.currentTarget.checked ? state.enabledValue : state.disabledValue);