diff --git a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx index 2f00b67f161..a220e8213cf 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx @@ -11,6 +11,7 @@ interface SwitchVariableFormProps { disabledValue: string; onEnabledValueChange: (value: string) => void; onDisabledValueChange: (value: string) => void; + inline?: boolean; } const VALUE_PAIR_OPTIONS: Array> = [ @@ -25,6 +26,7 @@ export function SwitchVariableForm({ disabledValue, onEnabledValueChange, onDisabledValueChange, + inline, }: SwitchVariableFormProps) { const currentValuePairType = getCurrentValuePairType(enabledValue, disabledValue); const [isCustomValuePairType, setIsCustomValuePairType] = useState(currentValuePairType === 'custom'); @@ -87,11 +89,15 @@ export function SwitchVariableForm({ } }; + const fieldWidth = inline ? undefined : 30; + return ( <> - - Switch options - + {!inline && ( + + Switch options + + )} { handleEnabledValueChange(event.currentTarget.value); @@ -149,7 +155,7 @@ export function SwitchVariableForm({ invalid={disabledValueInvalid} > handleDisabledValueChange(event.currentTarget.value)} placeholder={t( diff --git a/public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx index 3656231c50e..8796f268f79 100644 --- a/public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx +++ b/public/app/features/dashboard-scene/settings/variables/editors/SwitchVariableEditor.tsx @@ -5,9 +5,10 @@ import { SwitchVariableForm } from '../components/SwitchVariableForm'; interface SwitchVariableEditorProps { variable: SwitchVariable; + inline?: boolean; } -export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) { +export function SwitchVariableEditor({ variable, inline = false }: SwitchVariableEditorProps) { const { value, enabledValue, disabledValue } = variable.useState(); const onEnabledValueChange = (newEnabledValue: string) => { @@ -36,6 +37,7 @@ export function SwitchVariableEditor({ variable }: SwitchVariableEditorProps) { disabledValue={disabledValue} onEnabledValueChange={onEnabledValueChange} onDisabledValueChange={onDisabledValueChange} + inline={inline} /> ); } @@ -49,7 +51,7 @@ export function getSwitchVariableOptions(variable: SceneVariable): OptionsPaneIt return [ new OptionsPaneItemDescriptor({ id: `variable-${variable.state.name}-value`, - render: () => , + render: () => , }), ]; }