@grafana/scenes 4.11.2--canary.690.8734061653.0 → 4.11.2--canary.648.8738574184.0

package/dist/index.d.ts

@@ -612,17 +612,13 @@ declare class AdHocFiltersVariableUrlSyncHandler implements SceneObjectUrlSyncHa
     updateFromUrl(values: SceneObjectUrlValues): void;
 }
 
-interface AdHocFilterWithLabels extends AdHocVariableFilter {
-    keyLabel?: string;
-    valueLabel?: string;
-}
 interface AdHocFiltersVariableState extends SceneVariableState {
     /** Optional text to display on the 'add filter' button */
     addFilterButtonText?: string;
     /** The visible filters */
-    filters: AdHocFilterWithLabels[];
+    filters: AdHocVariableFilter[];
     /** Base filters to always apply when looking up keys*/
-    baseFilters?: AdHocFilterWithLabels[];
+    baseFilters?: AdHocVariableFilter[];
     /** Datasource to use for getTagKeys and getTagValues and also controls which scene queries the filters should apply to */
     datasource: DataSourceRef | null;
     /** Controls if the filters can be changed */
@@ -671,14 +667,14 @@ interface AdHocFiltersVariableState extends SceneVariableState {
     /**
      * @internal state of the new filter being added
      */
-    _wip?: AdHocFilterWithLabels;
+    _wip?: AdHocVariableFilter;
 }
-type AdHocVariableExpressionBuilderFn = (filters: AdHocFilterWithLabels[]) => string;
+type AdHocVariableExpressionBuilderFn = (filters: AdHocVariableFilter[]) => string;
 type getTagKeysProvider$1 = (variable: AdHocFiltersVariable, currentKey: string | null) => Promise<{
     replace?: boolean;
     values: MetricFindValue[];
 }>;
-type getTagValuesProvider = (variable: AdHocFiltersVariable, filter: AdHocFilterWithLabels) => Promise<{
+type getTagValuesProvider = (variable: AdHocFiltersVariable, filter: AdHocVariableFilter) => Promise<{
     replace?: boolean;
     values: MetricFindValue[];
 }>;
@@ -690,8 +686,8 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
     constructor(state: Partial<AdHocFiltersVariableState>);
     setState(update: Partial<AdHocFiltersVariableState>): void;
     getValue(): VariableValue | undefined;
-    _updateFilter(filter: AdHocFilterWithLabels, prop: keyof AdHocFilterWithLabels, { value, label }: SelectableValue<string | undefined | null>): void;
-    _removeFilter(filter: AdHocFilterWithLabels): void;
+    _updateFilter(filter: AdHocVariableFilter, prop: keyof AdHocVariableFilter, value: string | undefined | null): void;
+    _removeFilter(filter: AdHocVariableFilter): void;
     /**
      * Get possible keys given current filters. Do not call from plugins directly
      */
@@ -699,7 +695,7 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
     /**
      * Get possible key values for a specific key given current filters. Do not call from plugins directly
      */
-    _getValuesFor(filter: AdHocFilterWithLabels): Promise<Array<SelectableValue<string>>>;
+    _getValuesFor(filter: AdHocVariableFilter): Promise<Array<SelectableValue<string>>>;
     _addWip(): void;
     _getOperators(): SelectableValue<string>[];
 }

package/dist/index.js

@@ -2857,6 +2857,7 @@ function VariableValueSelect({ model }) {
     tabSelectsValue: false,
     onInputChange,
     options: model.getOptionsForSelect(),
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
     }
@@ -2893,6 +2894,7 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);
@@ -3168,18 +3170,24 @@ var __spreadValues$y = (a, b) => {
   return a;
 };
 var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-function keyLabelToOption(key, label) {
-  return key !== "" ? {
-    value: key,
-    label: label || key
-  } : null;
-}
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
   const styles = ui.useStyles2(getStyles$7);
   const [state, setState] = React.useState({});
-  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
-  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
+  const keyValue = React.useMemo(() => {
+    if (filter.key !== "") {
+      if (model.state.defaultKeys) {
+        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
+        if (matchingDefaultKey) {
+          return toSelectableValue(matchingDefaultKey);
+        }
+      } else {
+        return data.toOption(filter.key);
+      }
+    }
+    return null;
+  }, [filter.key, model.state.defaultKeys]);
+  const valueValue = filter.value !== "" ? data.toOption(filter.value) : null;
   const valueSelect = /* @__PURE__ */ React__default["default"].createElement(ui.Select, {
     allowCustomValue: true,
     formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
@@ -3189,7 +3197,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: valueValue,
     placeholder: "Select value",
     options: state.values,
-    onChange: (v) => model._updateFilter(filter, "value", v),
+    onChange: (v) => model._updateFilter(filter, "value", v.value),
     isOpen: state.isValuesOpen,
     isLoading: state.isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
@@ -3211,7 +3219,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: keyValue,
     placeholder: "Select label",
     options: state.keys,
-    onChange: (v) => model._updateFilter(filter, "key", v),
+    onChange: (v) => model._updateFilter(filter, "key", v.value),
     autoFocus: filter.key === "",
     isOpen: state.isKeysOpen,
     isLoading: state.isKeysLoading,
@@ -3258,7 +3266,7 @@ function AdHocFilterRenderer({ filter, model }) {
     disabled: model.state.readOnly,
     options: model._getOperators(),
     width: "auto",
-    onChange: (v) => model._updateFilter(filter, "operator", v)
+    onChange: (v) => model._updateFilter(filter, "operator", v.value)
   }), valueSelect, /* @__PURE__ */ React__default["default"].createElement(ui.Button, {
     variant: "secondary",
     "aria-label": "Remove filter",
@@ -3345,7 +3353,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(escapeDelimiter).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -3365,54 +3373,30 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
-function escapePipeDelimiters(value) {
+function escapeDelimiter(value) {
   if (value === null || value === void 0) {
     return "";
   }
-  return value = /\|/g[Symbol.replace](value, "__gfp__");
+  return /\|/g[Symbol.replace](value, "__gfp__");
 }
-function escapeCommaDelimiters(value) {
+function unescapeDelimiter(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;
+  return /__gfp__/g[Symbol.replace](value, "|");
 }
 function toArray(filter) {
-  return [
-    toCommaDelimitedString(filter.key, filter.keyLabel),
-    filter.operator,
-    toCommaDelimitedString(filter.value, filter.valueLabel)
-  ];
-}
-function toCommaDelimitedString(key, label) {
-  if (!label || key === label) {
-    return escapeCommaDelimiters(key);
-  }
-  return [key, label].map(escapeCommaDelimiters).join(",");
+  return [filter.key, filter.operator, filter.value];
 }
-function toFilter(urlValue) {
-  if (typeof urlValue !== "string" || urlValue.length === 0) {
+function toFilter(value) {
+  if (typeof value !== "string" || value.length === 0) {
     return null;
   }
-  const [key, keyLabel, operator, _operatorLabel, value, valueLabel] = urlValue.split("|").reduce((acc, v) => {
-    const [key2, label] = v.split(",");
-    acc.push(key2, label != null ? label : key2);
-    return acc;
-  }, []).map(unescapeDelimiters);
+  const parts = value.split("|").map(unescapeDelimiter);
   return {
-    key,
-    keyLabel,
-    operator,
-    value,
-    valueLabel,
+    key: parts[0],
+    operator: parts[1],
+    value: parts[2],
     condition: ""
   };
 }
@@ -3471,23 +3455,22 @@ class AdHocFiltersVariable extends SceneObjectBase {
   getValue() {
     return this.state.filterExpression;
   }
-  _updateFilter(filter, prop, { value, label }) {
+  _updateFilter(filter, prop, value) {
     if (value == null) {
       return;
     }
     const { filters, _wip } = this.state;
-    const propLabelKey = `${prop}Label`;
     if (filter === _wip) {
       if (prop === "value") {
-        this.setState({ filters: [...filters, __spreadProps$l(__spreadValues$x({}, _wip), { [prop]: value, [propLabelKey]: label })], _wip: void 0 });
+        this.setState({ filters: [...filters, __spreadProps$l(__spreadValues$x({}, _wip), { [prop]: value })], _wip: void 0 });
       } else {
-        this.setState({ _wip: __spreadProps$l(__spreadValues$x({}, filter), { [prop]: value, [propLabelKey]: label }) });
+        this.setState({ _wip: __spreadProps$l(__spreadValues$x({}, filter), { [prop]: value }) });
       }
       return;
     }
     const updatedFilters = this.state.filters.map((f) => {
       if (f === filter) {
-        return __spreadProps$l(__spreadValues$x({}, f), { [prop]: value, [propLabelKey]: label });
+        return __spreadProps$l(__spreadValues$x({}, f), { [prop]: value });
       }
       return f;
     });
@@ -3546,9 +3529,7 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return values.map(toSelectableValue);
   }
   _addWip() {
-    this.setState({
-      _wip: { key: "", keyLabel: "", value: "", valueLabel: "", operator: "=", condition: "" }
-    });
+    this.setState({ _wip: { key: "", value: "", operator: "=", condition: "" } });
   }
   _getOperators() {
     return ["=", "!=", "<", ">", "=~", "!~"].map((value) => ({
@@ -6009,7 +5990,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: verticalContainer
+      className: verticalContainer,
+      "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
     }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
       variable,
       layout
@@ -6018,7 +6000,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: containerStyle
+    className: containerStyle,
+    "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
   }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
@@ -7518,7 +7501,8 @@ function VizPanelMenuRenderer({ model }) {
         childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
         url: item.href,
         onClick: item.onClick,
-        shortcut: item.shortcut
+        shortcut: item.shortcut,
+        testId: e2eSelectors.selectors.components.Panels.Panel.menuItems(item.text)
       })
     );
   };
@@ -8144,7 +8128,8 @@ function SceneGridRowRenderer({ model }) {
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton,
-    "aria-label": isCollapsed ? "Expand row" : "Collapse row"
+    "aria-label": isCollapsed ? "Expand row" : "Collapse row",
+    "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
   }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React__default["default"].createElement("span", {