+
Preview of values
@@ -51,12 +83,12 @@ export const VariableValuesPreview = ({ options }: VariableValuesPreviewProps) =
)}
);
-};
-VariableValuesPreview.displayName = 'VariableValuesPreview';
+}
+VariableValuesWithoutPropsPreview.displayName = 'VariableValuesWithoutPropsPreview';
function getStyles(theme: GrafanaTheme2) {
return {
- wrapper: css({
+ previewContainer: css({
display: 'flex',
flexDirection: 'column',
marginTop: theme.spacing(2),
@@ -71,5 +103,10 @@ function getStyles(theme: GrafanaTheme2) {
textOverflow: 'ellipsis',
maxWidth: '50vw',
}),
+ table: css({
+ td: css({
+ padding: theme.spacing(0.5, 1),
+ }),
+ }),
};
}
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx
index a7315d37a76..e182ce1e2af 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.test.tsx
@@ -5,117 +5,225 @@ import { CustomVariable } from '@grafana/scenes';
import { CustomVariableEditor } from './CustomVariableEditor';
+function setup(options: Partial
[0]> = {}) {
+ return {
+ variable: new CustomVariable({
+ name: 'customVar',
+ ...options,
+ }),
+ onRunQuery: jest.fn(),
+ };
+}
+
+function renderEditor(ui: React.ReactNode) {
+ const renderResult = render(ui);
+
+ const elements = {
+ formatButton: (label: string) => renderResult.queryByLabelText(label) as HTMLElement,
+ queryInput: () =>
+ renderResult.queryByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput
+ ) as HTMLTextAreaElement,
+ multiValueCheckbox: () =>
+ renderResult.queryByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
+ ) as HTMLInputElement,
+ allowCustomValueCheckbox: () =>
+ renderResult.queryByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsAllowCustomValueSwitch
+ ) as HTMLInputElement,
+ includeAllCheckbox: () =>
+ renderResult.queryByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
+ ) as HTMLInputElement,
+ customAllValueInput: () =>
+ renderResult.queryByTestId(
+ selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
+ ) as HTMLInputElement,
+ };
+
+ return {
+ ...renderResult,
+ elements,
+ actions: {
+ updateValuesInput(newQuery: string) {
+ fireEvent.change(elements.queryInput(), { target: { value: newQuery } });
+ fireEvent.blur(elements.queryInput());
+ },
+ changeValuesFormat(newFormat: 'csv' | 'json') {
+ const targetLabel = newFormat === 'json' ? 'Object values in a JSON array' : 'Values separated by comma';
+
+ const formatButton = elements.formatButton(targetLabel);
+ if (formatButton === null) {
+ throw new Error(`Unable to fire a "click" event - button with label "${targetLabel}" not found in DOM`);
+ }
+
+ fireEvent.click(formatButton);
+ },
+ },
+ };
+}
+
describe('CustomVariableEditor', () => {
- it('should render the CustomVariableForm with correct initial values', () => {
- const variable = new CustomVariable({
- name: 'customVar',
- query: 'test, test2',
- value: 'test',
- isMulti: true,
- includeAll: true,
- allValue: 'test',
+ describe('CSV values format', () => {
+ it('should render CustomVariableForm with the correct initial values', () => {
+ const { variable, onRunQuery } = setup({
+ query: 'test, test2',
+ value: 'test',
+ isMulti: true,
+ includeAll: true,
+ allowCustomValue: true,
+ allValue: 'all',
+ });
+
+ const { elements } = renderEditor();
+
+ expect(elements.queryInput().value).toBe('test, test2');
+ expect(elements.multiValueCheckbox().checked).toBe(true);
+ expect(elements.allowCustomValueCheckbox().checked).toBe(true);
+ expect(elements.includeAllCheckbox().checked).toBe(true);
+ expect(elements.customAllValueInput().value).toBe('all');
});
- const onRunQuery = jest.fn();
- const { getByTestId } = render();
+ it('should update the variable state when some input values change ("Multi-value", "Allow custom values" & "Include All option")', () => {
+ const { variable, onRunQuery } = setup({
+ query: 'test, test2',
+ value: 'test',
+ isMulti: false,
+ allowCustomValue: false,
+ includeAll: false,
+ });
- const queryInput = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput
- ) as HTMLInputElement;
- const allValueInput = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
- ) as HTMLInputElement;
- const multiCheckbox = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
- ) as HTMLInputElement;
- const includeAllCheckbox = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
- ) as HTMLInputElement;
+ const { elements } = renderEditor();
- expect(queryInput.value).toBe('test, test2');
- expect(allValueInput.value).toBe('test');
- expect(multiCheckbox.checked).toBe(true);
- expect(includeAllCheckbox.checked).toBe(true);
+ expect(elements.multiValueCheckbox().checked).toBe(false);
+ expect(elements.allowCustomValueCheckbox().checked).toBe(false);
+ expect(elements.includeAllCheckbox().checked).toBe(false);
+ // include-all-custom input appears after include-all checkbox is checked only
+ expect(elements.customAllValueInput()).not.toBeInTheDocument();
+
+ fireEvent.click(elements.multiValueCheckbox());
+ fireEvent.click(elements.allowCustomValueCheckbox());
+ fireEvent.click(elements.includeAllCheckbox());
+
+ expect(variable.state.isMulti).toBe(true);
+ expect(variable.state.allowCustomValue).toBe(true);
+ expect(variable.state.includeAll).toBe(true);
+ expect(elements.customAllValueInput()).toBeInTheDocument();
+ });
+
+ describe('when the values textarea loses focus after its value has changed', () => {
+ it('should update the query in the variable state and call the onRunQuery callback', async () => {
+ const { variable, onRunQuery } = setup({ query: 'test, test2', value: 'test' });
+
+ const { actions } = renderEditor();
+
+ actions.updateValuesInput('test3, test4');
+
+ expect(variable.state.query).toBe('test3, test4');
+ expect(onRunQuery).toHaveBeenCalled();
+ });
+ });
+
+ describe('when the "Custom all value" input loses focus after its value has changed', () => {
+ it('should update the variable state', () => {
+ const { variable, onRunQuery } = setup({
+ query: 'test, test2',
+ value: 'test',
+ isMulti: true,
+ includeAll: true,
+ });
+
+ const { elements } = renderEditor();
+
+ fireEvent.change(elements.customAllValueInput(), { target: { value: 'new custom all' } });
+ fireEvent.blur(elements.customAllValueInput());
+
+ expect(variable.state.allValue).toBe('new custom all');
+ });
+ });
});
- it('should update the variable state when input values change', () => {
- const variable = new CustomVariable({
- name: 'customVar',
- query: 'test, test2',
- value: 'test',
+ describe('JSON values format', () => {
+ const initialJsonQuery = `[
+ {"value":1,"text":"Development","aws":"dev","azure":"development"},
+ {"value":2,"text":"Production","aws":"prod","azure":"production"}
+ ]`;
+
+ it('should render CustomVariableForm with the correct initial values', () => {
+ const { variable, onRunQuery } = setup({
+ valuesFormat: 'json',
+ query: initialJsonQuery,
+ isMulti: true,
+ includeAll: true,
+ });
+
+ const { elements } = renderEditor();
+
+ expect(elements.queryInput().value).toBe(initialJsonQuery);
+ expect(elements.multiValueCheckbox().checked).toBe(true);
+ expect(elements.allowCustomValueCheckbox()).not.toBeInTheDocument();
+ expect(elements.includeAllCheckbox().checked).toBe(true);
+ expect(elements.customAllValueInput()).not.toBeInTheDocument();
});
- const onRunQuery = jest.fn();
- const { getByTestId } = render();
+ describe('when the values textarea loses focus after its value has changed', () => {
+ describe('if the value is valid JSON', () => {
+ it('should update the query in the variable state and call the onRunQuery callback', async () => {
+ const { variable, onRunQuery } = setup({ valuesFormat: 'json', query: initialJsonQuery });
- const multiCheckbox = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch
- );
- const includeAllCheckbox = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch
- );
+ const { actions } = renderEditor();
- const allowCustomValueCheckbox = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsAllowCustomValueSwitch
- );
+ actions.updateValuesInput('[]');
- // It include-all-custom input appears after include-all checkbox is checked only
- expect(() =>
- getByTestId(selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput)
- ).toThrow('Unable to find an element');
+ expect(variable.state.query).toBe('[]');
+ expect(onRunQuery).toHaveBeenCalled();
+ });
+ });
- fireEvent.click(allowCustomValueCheckbox);
+ describe('if the value is NOT valid JSON', () => {
+ it('should display a validation error message and neither update the query in the variable state nor call the onRunQuery callback', async () => {
+ const { variable, onRunQuery } = setup({ valuesFormat: 'json', query: initialJsonQuery });
- fireEvent.click(multiCheckbox);
+ const { actions, getByRole } = renderEditor(
+
+ );
- fireEvent.click(includeAllCheckbox);
- const allValueInput = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
- );
+ actions.updateValuesInput('[x]');
- expect(variable.state.isMulti).toBe(true);
- expect(variable.state.includeAll).toBe(true);
- expect(variable.state.allowCustomValue).toBe(false);
- expect(allValueInput).toBeInTheDocument();
+ expect(getByRole('alert')).toHaveTextContent(`Unexpected token 'x', "[x]" is not valid JSON`);
+ expect(variable.state.query).toBe(initialJsonQuery);
+ expect(onRunQuery).not.toHaveBeenCalled();
+ });
+ });
+ });
});
- it('should call update query and re-run query when input loses focus', async () => {
- const variable = new CustomVariable({
- name: 'customVar',
- query: 'test, test2',
- value: 'test',
+ describe('when switching values format', () => {
+ it('should switch the visibility of the proper form inputs ("Allow custom values" and "Custom all value")', () => {
+ const { variable, onRunQuery } = setup({
+ valuesFormat: 'csv',
+ query: '',
+ isMulti: true,
+ includeAll: true,
+ allowCustomValue: true,
+ allValue: '',
+ });
+
+ const { elements, actions } = renderEditor();
+
+ expect(elements.allowCustomValueCheckbox()).toBeInTheDocument();
+ expect(elements.customAllValueInput()).toBeInTheDocument();
+
+ actions.changeValuesFormat('json');
+
+ expect(elements.allowCustomValueCheckbox()).not.toBeInTheDocument();
+ expect(elements.customAllValueInput()).not.toBeInTheDocument();
+
+ actions.changeValuesFormat('csv');
+
+ expect(elements.allowCustomValueCheckbox()).toBeInTheDocument();
+ expect(elements.customAllValueInput()).toBeInTheDocument();
});
- const onRunQuery = jest.fn();
-
- const { getByTestId } = render();
-
- const queryInput = getByTestId(selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput);
- fireEvent.change(queryInput, { target: { value: 'test3, test4' } });
- fireEvent.blur(queryInput);
-
- expect(onRunQuery).toHaveBeenCalled();
- expect(variable.state.query).toBe('test3, test4');
- });
-
- it('should update the variable state when all-custom-value input loses focus', () => {
- const variable = new CustomVariable({
- name: 'customVar',
- query: 'test, test2',
- value: 'test',
- isMulti: true,
- includeAll: true,
- });
- const onRunQuery = jest.fn();
-
- const { getByTestId } = render();
-
- const allValueInput = getByTestId(
- selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput
- ) as HTMLInputElement;
-
- fireEvent.change(allValueInput, { target: { value: 'new custom all' } });
- fireEvent.blur(allValueInput);
-
- expect(variable.state.allValue).toBe('new custom all');
});
});
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.tsx
index 8dfc7b3eac1..5c1f3158443 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.tsx
@@ -1,5 +1,7 @@
-import { FormEvent, useCallback } from 'react';
+import { isObject } from 'lodash';
+import { FormEvent, useCallback, useState } from 'react';
+import { CustomVariableModel, shallowCompare } from '@grafana/data';
import { t } from '@grafana/i18n';
import { CustomVariable, SceneVariable } from '@grafana/scenes';
@@ -14,7 +16,26 @@ interface CustomVariableEditorProps {
}
export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEditorProps) {
- const { query, isMulti, allValue, includeAll, allowCustomValue } = variable.useState();
+ const { query, valuesFormat, isMulti, allValue, includeAll, allowCustomValue } = variable.useState();
+ const [queryValidationError, setQueryValidationError] = useState();
+
+ const [prevQuery, setPrevQuery] = useState('');
+ const onValuesFormatChange = useCallback(
+ (format: CustomVariableModel['valuesFormat']) => {
+ variable.setState({ query: prevQuery });
+ variable.setState({ value: isMulti ? [] : undefined });
+ variable.setState({ valuesFormat: format });
+ variable.setState({ allowCustomValue: false });
+ variable.setState({ allValue: undefined });
+ onRunQuery();
+
+ setQueryValidationError(undefined);
+ if (query !== prevQuery) {
+ setPrevQuery(query);
+ }
+ },
+ [isMulti, onRunQuery, prevQuery, query, variable]
+ );
const onMultiChange = useCallback(
(event: FormEvent) => {
@@ -32,10 +53,20 @@ export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEdi
const onQueryChange = useCallback(
(event: FormEvent) => {
+ setPrevQuery('');
+
+ if (valuesFormat === 'json') {
+ const validationError = validateJsonQuery(event.currentTarget.value);
+ setQueryValidationError(validationError);
+ if (validationError) {
+ return;
+ }
+ }
+
variable.setState({ query: event.currentTarget.value });
onRunQuery();
},
- [variable, onRunQuery]
+ [valuesFormat, variable, onRunQuery]
);
const onAllValueChange = useCallback(
@@ -55,15 +86,18 @@ export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEdi
return (
);
}
@@ -81,3 +115,47 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
}),
];
}
+
+export const validateJsonQuery = (rawQuery: string): Error | undefined => {
+ const query = rawQuery.trim();
+ if (!query) {
+ return;
+ }
+
+ try {
+ const options = JSON.parse(query);
+
+ if (!Array.isArray(options)) {
+ throw new Error('Enter a valid JSON array of objects');
+ }
+
+ if (!options.length) {
+ return;
+ }
+
+ let errorIndex = options.findIndex((item) => !isObject(item));
+ if (errorIndex !== -1) {
+ throw new Error(`All items must be objects. The item at index ${errorIndex} is not an object.`);
+ }
+
+ const keys = Object.keys(options[0]);
+ if (!keys.includes('value')) {
+ throw new Error('Each object in the array must include at least a "value" property');
+ }
+ if (keys.includes('')) {
+ throw new Error('Object property names cannot be empty strings');
+ }
+
+ errorIndex = options.findIndex((o) => !shallowCompare(keys, Object.keys(o)));
+ if (errorIndex !== -1) {
+ throw new Error(
+ `All objects must have the same set of properties. The object at index ${errorIndex} does not match the expected properties`
+ );
+ }
+
+ return;
+ } catch (error) {
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+ return error as Error;
+ }
+};
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.tsx
index 3e8a8aa57b1..fa6dd46680a 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.tsx
@@ -1,15 +1,16 @@
-import { useCallback, useRef } from 'react';
+import { FormEvent, useCallback, useState } from 'react';
+import { lastValueFrom } from 'rxjs';
+import { CustomVariableModel } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { t, Trans } from '@grafana/i18n';
import { CustomVariable } from '@grafana/scenes';
-import { Button, Modal, Stack } from '@grafana/ui';
+import { Button, FieldValidationMessage, Modal, Stack, TextArea } from '@grafana/ui';
-import { VariableStaticOptionsFormRef } from '../../components/VariableStaticOptionsForm';
-import { VariableStaticOptionsFormAddButton } from '../../components/VariableStaticOptionsFormAddButton';
+import { ValuesFormatSelector } from '../../components/CustomVariableForm';
+import { VariableValuesPreview } from '../../components/VariableValuesPreview';
-import { ValuesBuilder } from './ValuesBuilder';
-import { ValuesPreview } from './ValuesPreview';
+import { validateJsonQuery } from './CustomVariableEditor';
interface ModalEditorProps {
variable: CustomVariable;
@@ -18,9 +19,49 @@ interface ModalEditorProps {
}
export function ModalEditor({ variable, isOpen, onClose }: ModalEditorProps) {
- const formRef = useRef(null);
+ const { query, valuesFormat, isMulti } = variable.useState();
+ const [prevQuery, setPrevQuery] = useState('');
+ const [queryValidationError, setQueryValidationError] = useState();
- const handleOnAdd = useCallback(() => formRef.current?.addItem(), []);
+ const onValuesFormatChange = useCallback(
+ async (format: CustomVariableModel['valuesFormat']) => {
+ variable.setState({ query: prevQuery });
+ variable.setState({ value: isMulti ? [] : undefined });
+ variable.setState({ valuesFormat: format });
+ variable.setState({ allowCustomValue: false });
+ variable.setState({ allValue: undefined });
+
+ await lastValueFrom(variable.validateAndUpdate());
+
+ setQueryValidationError(undefined);
+ if (query !== prevQuery) {
+ setPrevQuery(query);
+ }
+ },
+ [isMulti, prevQuery, query, variable]
+ );
+
+ const onQueryChange = useCallback(
+ async (event: FormEvent) => {
+ setPrevQuery('');
+
+ if (valuesFormat === 'json') {
+ const validationError = validateJsonQuery(event.currentTarget.value);
+ setQueryValidationError(validationError);
+ if (validationError) {
+ return;
+ }
+ }
+
+ variable.setState({ query: event.currentTarget.value });
+ await lastValueFrom(variable.validateAndUpdate());
+ },
+ [valuesFormat, variable]
+ );
+
+ const optionsForSelect = variable.getOptionsForSelect(false);
+ const hasJsonValuesFormat = variable.state.valuesFormat === 'json';
+ const hasMultiProps = hasJsonValuesFormat || optionsForSelect.every((o) => Boolean(o.properties));
return (
-
-
+
+
+
+ {queryValidationError && {queryValidationError.message}}
+
+
+
+
- }>
+