@grafana/scenes 6.51.0 → 6.52.1--canary.1323.20573204293.0

package/dist/index.d.ts

@@ -1128,6 +1128,11 @@ interface AdHocFiltersVariableState extends SceneVariableState {
      * state for checking whether drilldown applicability is enabled
      */
     applicabilityEnabled?: boolean;
+    /**
+     * When true, enables a collapse button that appears when filters wrap to multiple lines.
+     * Allows users to collapse the filter UI to save vertical space.
+     */
+    collapsible?: boolean;
     /**
      * enables drilldown recommendations
      */
@@ -1181,6 +1186,10 @@ declare class AdHocFiltersVariable extends SceneObjectBase<AdHocFiltersVariableS
         forcePublish?: boolean;
     }): void;
     restoreOriginalFilter(filter: AdHocFilterWithLabels): void;
+    /**
+     * Clear all user-added filters and restore origin filters to their original values.
+     */
+    clearAll(): void;
     getValue(fieldPath?: string): VariableValue | undefined;
     _updateFilter(filter: AdHocFilterWithLabels, update: Partial<AdHocFilterWithLabels>): void;
     updateToMatchAll(filter: AdHocFilterWithLabels): void;
@@ -1265,7 +1274,7 @@ declare abstract class MultiValueVariable<TState extends MultiValueVariableState
     protected interceptStateUpdateAfterValidation(stateUpdate: Partial<MultiValueVariableState>): void;
     getValue(fieldPath?: string): VariableValue;
     private getFieldAccessor;
-    getValueText(): string;
+    getValueText(fieldPath?: string): string;
     hasAllValue(): boolean;
     getDefaultMultiState(options: VariableValueOption[]): {
         value: string[];
@@ -1462,6 +1471,11 @@ interface GroupByVariableState extends MultiValueVariableState {
      * state for checking whether drilldown applicability is enabled
      */
     applicabilityEnabled?: boolean;
+    /**
+     * Whether the input should be wide. For example, this is needed when dashboardAdHocAndGroupByWrapper feature toggle is enabled so that
+     * the input fills the remaining space in the row.
+     */
+    wideInput?: boolean;
     /**
      * enables drilldown recommendations
      */
@@ -2537,7 +2551,7 @@ declare class LocalValueVariable extends SceneObjectBase<LocalValueVariableState
     constructor(initialState: Partial<LocalValueVariableState>);
     getValue(fieldPath?: string): VariableValue;
     private getFieldAccessor;
-    getValueText(): string;
+    getValueText(fieldPath?: string): string;
     /**
      * Checks the ancestor of our parent SceneVariableSet for loading state of a variable with the same name
      * This function is unit tested from SceneVariableSet tests.
@@ -2557,6 +2571,10 @@ interface AdHocFiltersControllerState {
     onAddCustomValue?: OnAddCustomValueFn;
     wip?: AdHocFilterWithLabels;
     inputPlaceholder?: string;
+    /**
+     * When true, enables a collapse button that appears when filters wrap to multiple lines.
+     */
+    collapsible?: boolean;
     valueRecommendations?: AdHocFiltersRecommendations;
     drilldownRecommendationsEnabled?: boolean;
 }
@@ -2627,6 +2645,10 @@ interface AdHocFiltersController {
      * @param filter - The filter to restore
      */
     restoreOriginalFilter(filter: AdHocFilterWithLabels): void;
+    /**
+     * Clear all user-added filters and restore origin filters to original values.
+     */
+    clearAll?(): void;
     /**
      * Optional: Start profiling an interaction (for performance tracking).
      * @param name - The interaction name
@@ -2665,6 +2687,7 @@ declare class AdHocFiltersVariableController implements AdHocFiltersController {
     handleComboboxBackspace(filter: AdHocFilterWithLabels): void;
     addWip(): void;
     restoreOriginalFilter(filter: AdHocFilterWithLabels): void;
+    clearAll(): void;
     startProfile(name: string): void;
     startInteraction(name: string): void;
     stopInteraction(): void;

package/dist/index.js

@@ -15,11 +15,11 @@ var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
 var uFuzzy = require('@leeoniya/ufuzzy');
+var reactUse = require('react-use');
 var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var react = require('@emotion/react');
 require('react-dom');
-var reactUse = require('react-use');
 var operators = require('rxjs/operators');
 var ReactGridLayout = require('react-grid-layout');
 var BarChartPanelCfg_types_gen = require('@grafana/schema/dist/esm/raw/composable/barchart/panelcfg/x/BarChartPanelCfg_types.gen');
@@ -1581,9 +1581,9 @@ const formatRegistry = new data.Registry(() => {
       id: schema.VariableFormatID.Text,
       name: "Text",
       description: "Format variables in their text representation. Example in multi-variable scenario A + B + C.",
-      formatter: (value, _args, variable) => {
+      formatter: (value, _args, variable, fieldPath) => {
         if (variable.getValueText) {
-          return variable.getValueText();
+          return variable.getValueText(fieldPath);
         }
         return String(value);
       }
@@ -1918,10 +1918,31 @@ const _MultiValueVariable = class _MultiValueVariable extends SceneObjectBase {
     }
     return _MultiValueVariable.fieldAccessorCache[fieldPath] = lodash.property(fieldPath);
   }
-  getValueText() {
+  getValueText(fieldPath) {
     if (this.hasAllValue()) {
       return ALL_VARIABLE_TEXT;
     }
+    if (fieldPath != null) {
+      const accessor = this.getFieldAccessor(fieldPath);
+      if (Array.isArray(this.state.value)) {
+        const index = parseInt(fieldPath, 10);
+        if (!isNaN(index) && index >= 0 && index < this.state.value.length) {
+          const option = this.state.options[index];
+          if (option) {
+            return String(option.label);
+          }
+        }
+        return this.state.value.map((v) => {
+          const option = this.state.options.find((o) => o.value === v);
+          return option ? accessor(option.properties) : v;
+        }).join(" + ");
+      } else {
+        const option = this.state.options.find((o) => o.value === this.state.value);
+        if (option) {
+          return String(accessor(option.properties));
+        }
+      }
+    }
     if (Array.isArray(this.state.text)) {
       return this.state.text.join(" + ");
     }
@@ -4614,6 +4635,9 @@ const generatePlaceholder = (filter, filterInputType, isMultiValueEdit, isAlways
     }
     return ((_a = filter.valueLabels) == null ? void 0 : _a[0]) || "";
   }
+  if (isAlwaysWip && filterInputType === "operator") {
+    return "";
+  }
   return filter[filterInputType] && !isAlwaysWip ? `${filter[filterInputType]}` : inputPlaceholder || INPUT_PLACEHOLDER_DEFAULT;
 };
 const populateInputValueOnInputTypeSwitch = ({
@@ -4802,7 +4826,8 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
   isAlwaysWip,
   handleChangeViewMode,
   focusOnWipInputRef,
-  populateInputOnEdit
+  populateInputOnEdit,
+  onInputClick
 }, parentRef) {
   var _a, _b, _c;
   const [open, setOpen] = React.useState(false);
@@ -5285,6 +5310,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({
       className: css.cx(styles.inputStyle, { [styles.loadingInputPadding]: !optionsLoading }),
       onClick: (event) => {
         event.stopPropagation();
+        onInputClick == null ? void 0 : onInputClick();
         setOpen(true);
       },
       onFocus: () => {
@@ -5746,53 +5772,100 @@ const getStyles$d = (theme) => ({
   ...getNonApplicablePillStyles(theme)
 });
 
-const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller }, parentRef) {
+const AdHocFiltersAlwaysWipCombobox = React.forwardRef(function AdHocFiltersAlwaysWipCombobox2({ controller, onInputClick }, parentRef) {
   const { wip } = controller.useState();
   React.useLayoutEffect(() => {
     if (!wip) {
       controller.addWip();
     }
   }, [wip]);
-  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef });
+  return /* @__PURE__ */ React__default.default.createElement(AdHocCombobox, { controller, filter: wip, isAlwaysWip: true, ref: parentRef, onInputClick });
 });
 
+const MAX_VISIBLE_FILTERS = 5;
 const AdHocFiltersComboboxRenderer = React.memo(function AdHocFiltersComboboxRenderer2({ controller }) {
-  const { originFilters, filters, readOnly, valueRecommendations } = controller.useState();
+  var _a;
+  const { originFilters, filters, readOnly, collapsible, valueRecommendations } = controller.useState();
   const styles = ui.useStyles2(getStyles$c);
+  const theme = ui.useTheme2();
+  const [collapsed, setCollapsed] = React.useState(true);
+  const [wrapperRef, { height: wrapperHeight }] = reactUse.useMeasure();
+  const clearAll = () => {
+    var _a2;
+    (_a2 = controller.clearAll) == null ? void 0 : _a2.call(controller);
+  };
   const focusOnWipInputRef = React.useRef();
+  const singleLineThreshold = theme.spacing.gridSize * 5;
+  const isMultiLine = collapsible && wrapperHeight > singleLineThreshold;
+  const handleCollapseToggle = (event) => {
+    event.stopPropagation();
+    if (collapsible) {
+      setCollapsed(true);
+    }
+  };
+  const handleExpand = () => {
+    var _a2, _b;
+    if (!collapsible) {
+      (_a2 = focusOnWipInputRef.current) == null ? void 0 : _a2.call(focusOnWipInputRef);
+      return;
+    }
+    if (collapsed) {
+      setCollapsed(false);
+    } else {
+      (_b = focusOnWipInputRef.current) == null ? void 0 : _b.call(focusOnWipInputRef);
+    }
+  };
+  const visibleOriginFilters = (_a = originFilters == null ? void 0 : originFilters.filter((f) => f.origin)) != null ? _a : [];
+  const visibleFilters = filters.filter((f) => !f.hidden);
+  const allFilters = [...visibleOriginFilters, ...visibleFilters];
+  const totalFiltersCount = allFilters.length;
+  const shouldCollapse = collapsible && collapsed && totalFiltersCount > 0;
+  const filtersToRender = shouldCollapse ? allFilters.slice(0, MAX_VISIBLE_FILTERS) : allFilters;
+  React.useEffect(() => {
+    if (collapsible && totalFiltersCount === 0 && collapsed) {
+      setCollapsed(false);
+    }
+  }, [collapsible, totalFiltersCount, collapsed]);
+  const showCollapseButton = collapsible && isMultiLine && !collapsed;
   return /* @__PURE__ */ React__default.default.createElement(
     "div",
     {
-      className: css.cx(styles.comboboxWrapper, { [styles.comboboxFocusOutline]: !readOnly }),
-      onClick: () => {
-        var _a;
-        (_a = focusOnWipInputRef.current) == null ? void 0 : _a.call(focusOnWipInputRef);
-      }
+      ref: wrapperRef,
+      className: css.cx(styles.comboboxWrapper, {
+        [styles.comboboxFocusOutline]: !readOnly,
+        [styles.collapsed]: shouldCollapse,
+        [styles.clickableCollapsed]: shouldCollapse
+      }),
+      onClick: handleExpand
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "filter", className: styles.filterIcon, size: "lg" }),
     valueRecommendations && /* @__PURE__ */ React__default.default.createElement(valueRecommendations.Component, { model: valueRecommendations }),
-    originFilters == null ? void 0 : originFilters.map(
-      (filter, index) => filter.origin ? /* @__PURE__ */ React__default.default.createElement(
-        AdHocFilterPill,
-        {
-          key: `${index}-${filter.key}`,
-          filter,
-          controller,
-          focusOnWipInputRef: focusOnWipInputRef.current
-        }
-      ) : null
-    ),
-    filters.filter((filter) => !filter.hidden).map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
+    filtersToRender.map((filter, index) => /* @__PURE__ */ React__default.default.createElement(
       AdHocFilterPill,
       {
-        key: `${index}-${filter.key}`,
+        key: `${filter.origin ? "origin-" : ""}${index}-${filter.key}`,
         filter,
         controller,
         readOnly: readOnly || filter.readOnly,
         focusOnWipInputRef: focusOnWipInputRef.current
       }
     )),
-    !readOnly ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null
+    !readOnly && !shouldCollapse ? /* @__PURE__ */ React__default.default.createElement(AdHocFiltersAlwaysWipCombobox, { controller, ref: focusOnWipInputRef }) : null,
+    /* @__PURE__ */ React__default.default.createElement("div", { className: styles.rightControls }, showCollapseButton && /* @__PURE__ */ React__default.default.createElement(
+      ui.Button,
+      {
+        className: styles.collapseButton,
+        fill: "text",
+        onClick: handleCollapseToggle,
+        "aria-label": i18n.t(
+          "grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse-filters",
+          "Collapse filters"
+        ),
+        "aria-expanded": !collapsed
+      },
+      i18n.t("grafana-scenes.variables.adhoc-filters-combobox-renderer.collapse", "Collapse"),
+      /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-up", size: "md" })
+    ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.clearAllButton }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "times", size: "md", onClick: clearAll })), shouldCollapse && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, totalFiltersCount > MAX_VISIBLE_FILTERS && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.moreIndicator }, "(+", totalFiltersCount - MAX_VISIBLE_FILTERS, ")"), /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "angle-down", className: styles.dropdownIndicator })))
   );
 });
 const getStyles$c = (theme) => ({
@@ -5808,7 +5881,8 @@ const getStyles$c = (theme) => ({
     borderRadius: theme.shape.radius.default,
     paddingInline: theme.spacing(1),
     paddingBlock: theme.spacing(0.5),
-    flexGrow: 1
+    flexGrow: 1,
+    width: "100%"
   }),
   comboboxFocusOutline: css.css({
     "&:focus-within": {
@@ -5824,6 +5898,48 @@ const getStyles$c = (theme) => ({
   filterIcon: css.css({
     color: theme.colors.text.secondary,
     alignSelf: "center"
+  }),
+  collapsed: css.css({
+    flexWrap: "nowrap",
+    overflow: "hidden"
+  }),
+  clickableCollapsed: css.css({
+    cursor: "pointer",
+    "&:hover": {
+      borderColor: theme.colors.border.medium
+    }
+  }),
+  rightControls: css.css({
+    display: "flex",
+    alignItems: "center",
+    marginLeft: "auto",
+    flexShrink: 0
+  }),
+  moreIndicator: css.css({
+    color: theme.colors.text.secondary,
+    whiteSpace: "nowrap"
+  }),
+  dropdownIndicator: css.css({
+    color: theme.colors.text.secondary,
+    flexShrink: 0
+  }),
+  collapseButton: css.css({
+    color: theme.colors.text.secondary,
+    padding: 0,
+    fontSize: theme.typography.bodySmall.fontSize,
+    border: "none",
+    "&:hover": {
+      background: "transparent",
+      color: theme.colors.text.primary
+    }
+  }),
+  clearAllButton: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    cursor: "pointer",
+    color: theme.colors.text.secondary,
+    "&:hover": {
+      color: theme.colors.text.primary
+    }
   })
 });
 
@@ -5928,6 +6044,7 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
+      collapsible: state.collapsible,
       valueRecommendations: this.model.getRecommendations(),
       drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
     };
@@ -5965,6 +6082,9 @@ class AdHocFiltersVariableController {
   restoreOriginalFilter(filter) {
     this.model.restoreOriginalFilter(filter);
   }
+  clearAll() {
+    this.model.clearAll();
+  }
   startProfile(name) {
     const queryController = getQueryController(this.model);
     queryController == null ? void 0 : queryController.startProfile(name);
@@ -6196,6 +6316,18 @@ class AdHocFiltersVariable extends SceneObjectBase {
       this._updateFilter(filter, original);
     }
   }
+  /**
+   * Clear all user-added filters and restore origin filters to their original values.
+   */
+  clearAll() {
+    var _a;
+    (_a = this.state.originFilters) == null ? void 0 : _a.forEach((filter) => {
+      if (filter.restorable) {
+        this.restoreOriginalFilter(filter);
+      }
+    });
+    this.setState({ filters: [] });
+  }
   getValue(fieldPath) {
     if (fieldPath === ORIGIN_FILTERS_KEY) {
       const originFilters = this.state.originFilters;
@@ -7064,6 +7196,7 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
+  var _a, _b;
   const {
     value,
     text,
@@ -7084,10 +7217,10 @@ function GroupByVariableRenderer({ model }) {
     const arrayValue = lodash.isArray(value) ? value : [value];
     const arrayText = lodash.isArray(text) ? text : [text];
     return arrayValue.map((value2, idx) => {
-      var _a;
+      var _a2;
       return {
         value: value2,
-        label: String((_a = arrayText[idx]) != null ? _a : value2)
+        label: String((_a2 = arrayText[idx]) != null ? _a2 : value2)
       };
     });
   }, [value, text]);
@@ -7118,7 +7251,8 @@ function GroupByVariableRenderer({ model }) {
     () => handleOptionGroups(optionSearcher(inputValue).map(toSelectableValue)),
     [optionSearcher, inputValue]
   );
-  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(
+  const WideInputWrapper = (children) => /* @__PURE__ */ React__default.default.createElement("div", { className: styles.selectWrapper }, children);
+  const select = isMulti ? /* @__PURE__ */ React__default.default.createElement(ConditionalWrapper, { condition: (_a = model.state.wideInput) != null ? _a : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
       "aria-label": i18n.t(
@@ -7188,7 +7322,7 @@ function GroupByVariableRenderer({ model }) {
         setIsOptionsOpen(false);
       }
     }
-  ) : /* @__PURE__ */ React__default.default.createElement(
+  )) : /* @__PURE__ */ React__default.default.createElement(ConditionalWrapper, { condition: (_b = model.state.wideInput) != null ? _b : false, wrapper: WideInputWrapper }, /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
       "aria-label": i18n.t(
@@ -7202,7 +7336,6 @@ function GroupByVariableRenderer({ model }) {
         "Group by label"
       ),
       width: "auto",
-      className: css.cx(drilldownRecommendationsEnabled && styles.selectStylesInWrapper),
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
       allowCustomValue,
@@ -7246,12 +7379,19 @@ function GroupByVariableRenderer({ model }) {
         setIsOptionsOpen(false);
       }
     }
-  );
+  ));
   if (!recommendations) {
     return select;
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.recommendations }, /* @__PURE__ */ React__default.default.createElement(recommendations.Component, { model: recommendations })), select);
 }
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => {
+  return condition ? wrapper(children) : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, children);
+};
 const filterNoOp = () => true;
 function WideMenu(props) {
   return /* @__PURE__ */ React__default.default.createElement(components.Menu, { ...props }, /* @__PURE__ */ React__default.default.createElement("div", { style: { minWidth: "220px" } }, props.children));
@@ -7268,6 +7408,22 @@ function toSelectableValue(input) {
   return result;
 }
 const getStyles$a = (theme) => ({
+  selectWrapper: css.css({
+    display: "flex",
+    minWidth: 0,
+    width: "100%"
+  }),
+  // Fix for noMultiValueWrap grid layout - prevent pills from stretching
+  // when the select is full width. The grid layout uses gridAutoFlow: column
+  // which stretches items by default.
+  fullWidthMultiSelect: css.css({
+    width: "100%",
+    // Target the value container (has data-testid) which uses grid layout
+    "& [data-testid]": {
+      gridAutoColumns: "max-content",
+      justifyItems: "start"
+    }
+  }),
   wrapper: css.css({
     display: "flex"
   }),
@@ -10687,7 +10843,13 @@ const _LocalValueVariable = class _LocalValueVariable extends SceneObjectBase {
     }
     return _LocalValueVariable.fieldAccessorCache[fieldPath] = lodash.property(fieldPath);
   }
-  getValueText() {
+  getValueText(fieldPath) {
+    if (fieldPath && this.state.properties) {
+      const value = this.getFieldAccessor(fieldPath)(this.state.properties);
+      if (value != null) {
+        return String(value);
+      }
+    }
     return this.state.text.toString();
   }
   /**
@@ -16807,7 +16969,7 @@ function __variableDynamicImportRuntime0__(path) {
   switch (path) {
     case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DPdlSPjz.js'); });
     case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-BHIE4ld0.js'); });
-    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C9F_2hih.js'); });
+    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DrGXYYn6.js'); });
     case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-D4tq59Dc.js'); });
     case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-Ce77KCbO.js'); });
     case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DMYCnFop.js'); });