mirror of https://github.com/grafana/grafana
QueryVariable: Add static options input (#107514)
* static options for query variable * add toggle * fix and add tests * run the hack codegen thing * more test fixes * make betterer happier * also make typecheck happy * make betterer happier * fix i18n key * tranalte static variables sort label * gen translations * update snapshotpull/106511/head
Domas
6 days ago
committed by
GitHub
parent
baa89f3eac
commit
8eef17cb37
@ -0,0 +1,106 @@ |
||||
import { useState } from 'react'; |
||||
|
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { t, Trans } from '@grafana/i18n'; |
||||
import { VariableValueOption } from '@grafana/scenes'; |
||||
import { Button, Input, Stack } from '@grafana/ui'; |
||||
|
||||
interface VariableOptionsFieldProps { |
||||
options: VariableValueOption[]; |
||||
onChange: (options: VariableValueOption[]) => void; |
||||
width?: number; |
||||
} |
||||
|
||||
export function VariableOptionsInput({ options, onChange, width }: VariableOptionsFieldProps) { |
||||
const [optionsLocal, setOptionsLocal] = useState(options.length ? options : [{ value: '', label: '' }]); |
||||
|
||||
const updateOptions = (newOptions: VariableValueOption[]) => { |
||||
setOptionsLocal(newOptions); |
||||
onChange( |
||||
newOptions |
||||
.map((option) => ({ |
||||
label: option.label.trim(), |
||||
value: String(option.value).trim(), |
||||
})) |
||||
.filter((option) => !!option.label) |
||||
); |
||||
}; |
||||
|
||||
const handleValueChange = (index: number, value: string) => { |
||||
if (optionsLocal[index].value !== value) { |
||||
const newOptions = [...optionsLocal]; |
||||
newOptions[index] = { ...newOptions[index], value }; |
||||
updateOptions(newOptions); |
||||
} |
||||
}; |
||||
|
||||
const handleLabelChange = (index: number, label: string) => { |
||||
if (optionsLocal[index].label !== label) { |
||||
const newOptions = [...optionsLocal]; |
||||
newOptions[index] = { ...newOptions[index], label }; |
||||
updateOptions(newOptions); |
||||
} |
||||
}; |
||||
|
||||
const addOption = () => { |
||||
const newOption: VariableValueOption = { value: '', label: '' }; |
||||
const newOptions = [...optionsLocal, newOption]; |
||||
updateOptions(newOptions); |
||||
}; |
||||
|
||||
const removeOption = (index: number) => { |
||||
const newOptions = optionsLocal.filter((_, i) => i !== index); |
||||
updateOptions(newOptions); |
||||
}; |
||||
|
||||
return ( |
||||
<Stack direction="column" gap={2} width={width}> |
||||
{optionsLocal.map((option, index) => ( |
||||
<Stack |
||||
direction="row" |
||||
key={index} |
||||
data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsRow} |
||||
> |
||||
<Input |
||||
value={option.label} |
||||
placeholder={t('variables.query-variable-static-options.label-placeholder', 'display label')} |
||||
onChange={(e) => handleLabelChange(index, e.currentTarget.value)} |
||||
data-testid={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsLabelInput |
||||
} |
||||
/> |
||||
<Input |
||||
value={String(option.value)} |
||||
placeholder={t('variables.query-variable-static-options.value-placeholder', 'value, default empty string')} |
||||
onChange={(e) => handleValueChange(index, e.currentTarget.value)} |
||||
data-testid={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsValueInput |
||||
} |
||||
/> |
||||
<Button |
||||
icon="times" |
||||
variant="secondary" |
||||
aria-label={t('variables.query-variable-static-options.remove-option-button-label', 'Remove option')} |
||||
onClick={() => removeOption(index)} |
||||
data-testid={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsDeleteButton |
||||
} |
||||
/> |
||||
</Stack> |
||||
))} |
||||
<div> |
||||
<Button |
||||
icon="plus" |
||||
variant="secondary" |
||||
onClick={addOption} |
||||
data-testid={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsAddButton |
||||
} |
||||
aria-label={t('variables.query-variable-static-options.add-option-button-label', 'Add option')} |
||||
> |
||||
<Trans i18nKey="variables.query-variable-static-options.add-option-button-label">Add option</Trans> |
||||
</Button> |
||||
</div> |
||||
</Stack> |
||||
); |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
import { useState } from 'react'; |
||||
|
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { t, Trans } from '@grafana/i18n'; |
||||
import { QueryVariable } from '@grafana/scenes'; |
||||
import { Field, Stack, Switch } from '@grafana/ui'; |
||||
import { VariableLegend } from 'app/features/dashboard-scene/settings/variables/components/VariableLegend'; |
||||
import { VariableOptionsInput } from 'app/features/dashboard-scene/settings/variables/components/VariableOptionsInput'; |
||||
import { VariableSelectField } from 'app/features/dashboard-scene/settings/variables/components/VariableSelectField'; |
||||
|
||||
export type StaticOptionsType = QueryVariable['state']['staticOptions']; |
||||
export type StaticOptionsOrderType = QueryVariable['state']['staticOptionsOrder']; |
||||
|
||||
interface QueryVariableStaticOptionsProps { |
||||
staticOptions: StaticOptionsType; |
||||
staticOptionsOrder: StaticOptionsOrderType; |
||||
onStaticOptionsChange: (staticOptions: StaticOptionsType) => void; |
||||
onStaticOptionsOrderChange: (staticOptionsOrder: StaticOptionsOrderType) => void; |
||||
} |
||||
|
||||
const SORT_OPTIONS = [ |
||||
{ label: 'Before query values', value: 'before' }, |
||||
{ label: 'After query values', value: 'after' }, |
||||
{ label: 'Sorted with query values', value: 'sorted' }, |
||||
]; |
||||
|
||||
export function QueryVariableStaticOptions(props: QueryVariableStaticOptionsProps) { |
||||
const { staticOptions, onStaticOptionsChange, staticOptionsOrder, onStaticOptionsOrderChange } = props; |
||||
|
||||
const value = SORT_OPTIONS.find((o) => o.value === staticOptionsOrder) ?? SORT_OPTIONS[0]; |
||||
|
||||
const [areStaticOptionsEnabled, setAreStaticOptionsEnabled] = useState(!!staticOptions?.length); |
||||
|
||||
return ( |
||||
<> |
||||
<VariableLegend> |
||||
<Trans i18nKey="dashboard-scene.query-variable-editor-form.static-options-legend">Static options</Trans> |
||||
</VariableLegend> |
||||
<Stack direction="column" gap={2}> |
||||
<Field |
||||
noMargin |
||||
label={t('dashboard-scene.query-variable-editor-form.label-use-static-options', 'Use static options')} |
||||
description={t( |
||||
'variables.query-variable-static-options.description', |
||||
'Add custom options in addition to query results' |
||||
)} |
||||
> |
||||
<> |
||||
<Stack direction="column" gap={2}> |
||||
<Switch |
||||
data-testid={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsToggle |
||||
} |
||||
value={areStaticOptionsEnabled} |
||||
onChange={(e) => { |
||||
if (e.currentTarget.checked) { |
||||
setAreStaticOptionsEnabled(true); |
||||
} else { |
||||
setAreStaticOptionsEnabled(false); |
||||
if (!!staticOptions?.length) { |
||||
onStaticOptionsChange(undefined); |
||||
} |
||||
} |
||||
}} |
||||
/> |
||||
|
||||
{areStaticOptionsEnabled && ( |
||||
<VariableOptionsInput width={60} options={staticOptions ?? []} onChange={onStaticOptionsChange} /> |
||||
)} |
||||
</Stack> |
||||
</> |
||||
</Field> |
||||
|
||||
{areStaticOptionsEnabled && ( |
||||
<VariableSelectField |
||||
name={t('dashboard-scene.query-variable-editor-form.label-static-options-sort', 'Static options sort')} |
||||
description={t( |
||||
'variables.query-variable-static-options-sort-select.description-values-variable', |
||||
'How to sort static options with query results' |
||||
)} |
||||
value={value} |
||||
options={SORT_OPTIONS} |
||||
onChange={(opt) => onStaticOptionsOrderChange(opt.value)} |
||||
testId={ |
||||
selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsStaticOptionsOrderDropdown |
||||
} |
||||
width={25} |
||||
/> |
||||
)} |
||||
</Stack> |
||||
</> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue