diff --git a/packages/scenes/src/locales/en-US/grafana-scenes.json b/packages/scenes/src/locales/en-US/grafana-scenes.json
index acdc1627d..10b93d697 100644
--- a/packages/scenes/src/locales/en-US/grafana-scenes.json
+++ b/packages/scenes/src/locales/en-US/grafana-scenes.json
@@ -113,6 +113,7 @@
"collapse": "Collapse",
"collapse-filters": "Collapse filters",
"expand-filters": "Expand filters",
+ "filters-label": "Filters:",
"group-by-label": "Group by:",
"restore-default-group-by": "Restore groupby set by this dashboard.",
"show-more-filters_one": "Show {{count}} more filters",
diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
index 1ea081dbc..b39608184 100644
--- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
+++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
@@ -20,8 +20,17 @@ interface Props {
}
export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRenderer({ controller }: Props) {
- const { originFilters, filters, readOnly, collapsible, valueRecommendations, enableGroupBy, groupByRestorable } =
- controller.useState();
+ const {
+ originFilters,
+ filters,
+ readOnly,
+ collapsible,
+ valueRecommendations,
+ enableGroupBy,
+ hideLabel,
+ variableLabel,
+ groupByRestorable,
+ } = controller.useState();
const styles = useStyles2(getStyles);
const theme = useTheme2();
const [collapsed, setCollapsed] = useState(true);
@@ -93,12 +102,20 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe
>
{!readOnly && valueRecommendations && }
+ {enableGroupBy && hideLabel && (
+
+ {variableLabel
+ ? `${variableLabel}:`
+ : t('grafana-scenes.variables.adhoc-filters-combobox-renderer.filters-label', 'Filters:')}
+
+ )}
+
{adhocFiltersToRender.length > 0 && (
// if there are filters already selected, this makes sure
// that the input is announced before focussing on the pills
@@ -318,6 +335,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
backgroundColor: theme.colors.border.weak,
flexShrink: 0,
}),
+ filtersLabel: css({
+ ...theme.typography.bodySmall,
+ fontWeight: theme.typography.fontWeightBold,
+ color: theme.colors.text.primary,
+ whiteSpace: 'nowrap',
+ }),
groupByLabel: css({
...theme.typography.bodySmall,
fontWeight: theme.typography.fontWeightBold,
diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts
index 242ffeaa3..39b16cf42 100644
--- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts
+++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersController.ts
@@ -22,6 +22,8 @@ export interface AdHocFiltersControllerState {
valueRecommendations?: AdHocFiltersRecommendations;
drilldownRecommendationsEnabled?: boolean;
enableGroupBy?: boolean;
+ hideLabel?: boolean;
+ variableLabel?: string;
groupByRestorable?: boolean;
}
diff --git a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts
index f961c7ee5..514f626cb 100644
--- a/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts
+++ b/packages/scenes/src/variables/adhoc/controller/AdHocFiltersVariableController.ts
@@ -1,4 +1,4 @@
-import { SelectableValue } from '@grafana/data';
+import { SelectableValue, VariableHide } from '@grafana/data';
import { AdHocFilterWithLabels, AdHocFiltersVariable } from '../AdHocFiltersVariable';
import { AdHocFiltersController, AdHocFiltersControllerState } from './AdHocFiltersController';
import { getQueryController } from '../../../core/sceneGraph/getQueryController';
@@ -29,6 +29,8 @@ export class AdHocFiltersVariableController implements AdHocFiltersController {
valueRecommendations: this.model.getRecommendations(),
drilldownRecommendationsEnabled: state.drilldownRecommendationsEnabled,
enableGroupBy: state.enableGroupBy,
+ hideLabel: state.hide === VariableHide.hideLabel,
+ variableLabel: state.label,
groupByRestorable: this.model.isGroupByRestorable(),
};
}