@grafana/scenes 6.51.0 → 6.53.0--canary.1315.20365173522.0

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');
@@ -4614,6 +4614,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 +4805,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 +5289,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 +5751,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 +5860,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 +5877,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 +6023,7 @@ class AdHocFiltersVariableController {
       supportsMultiValueOperators: state.supportsMultiValueOperators,
       onAddCustomValue: state.onAddCustomValue,
       wip: state._wip,
+      collapsible: state.collapsible,
       valueRecommendations: this.model.getRecommendations(),
       drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled
     };
@@ -5965,6 +6061,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 +6295,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 +7175,7 @@ class GroupByVariable extends MultiValueVariable {
 }
 GroupByVariable.Component = GroupByVariableRenderer;
 function GroupByVariableRenderer({ model }) {
+  var _a, _b;
   const {
     value,
     text,
@@ -7084,10 +7196,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 +7230,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 +7301,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 +7315,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 +7358,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 +7387,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"
   }),
@@ -16807,7 +16942,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'); });