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(), }; }