From 18c4f5b875436928e6fa7172997819c569b909ce Mon Sep 17 00:00:00 2001
From: grafakus <marc.mignonsin@grafana.com>
Date: Tue, 25 Nov 2025 12:06:47 +0100
Subject: [PATCH] feat: Update dynamic dashboards editors

---
 .../components/CustomVariableForm.tsx         |  73 +++++++-----
 .../components/VariableValuesPreview.tsx      |  13 ++-
 .../CustomVariableEditor.tsx                  |   7 +-
 .../CustomVariableEditor/ModalEditor.tsx      |  84 +++++++++++--
 .../getCustomVariableOptions.tsx              |   2 -
 .../variables/editors/QueryVariableEditor.tsx | 110 ++++++++++++------
 .../useVariableSelectionOptionsCategory.tsx   |   9 +-
 7 files changed, 212 insertions(+), 86 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
index 84f89df1c6a..b4ea09d190a 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/CustomVariableForm.tsx
@@ -48,27 +48,7 @@ export function CustomVariableForm({
         <Trans i18nKey="dashboard-scene.custom-variable-form.custom-options">Custom options</Trans>
       </VariableLegend>
 
-      <Stack direction="row" gap={1}>
-        <RadioButtonGroup
-          value={valuesFormat}
-          onChange={onValuesFormatChange}
-          options={[
-            {
-              value: 'csv',
-              label: t('dashboard-scene.custom-variable-form.name-values-separated-comma', 'Values separated by comma'),
-            },
-            {
-              value: 'json',
-              label: t('dashboard-scene.custom-variable-form.name-json-values', 'Object values in a JSON array'),
-            },
-          ]}
-        />
-        {valuesFormat === 'json' && (
-          <Tooltip content={TooltipJsonFormat} placement="top" interactive>
-            <Icon name="info-circle" />
-          </Tooltip>
-        )}
-      </Stack>
+      <ValuesFormatSelector valuesFormat={valuesFormat} onValuesFormatChange={onValuesFormatChange} />
 
       <VariableTextAreaField
         // we don't use a controlled component so we make sure the textarea content is cleared when changing format by providing a key
@@ -108,16 +88,47 @@ export function CustomVariableForm({
   );
 }
 
-function TooltipJsonFormat() {
+interface ValuesFormatSelectorProps {
+  valuesFormat?: CustomVariableModel['valuesFormat'];
+  onValuesFormatChange?: (format: CustomVariableModel['valuesFormat']) => void;
+}
+
+export function ValuesFormatSelector({ valuesFormat, onValuesFormatChange }: ValuesFormatSelectorProps) {
   return (
-    <Trans i18nKey="dashboard-scene.custom-variable-form.json-values-tooltip">
-      Provide a JSON representing an array of objects, where each object can have any number of properties.
-      <br />
-      Check{' '}
-      <TextLink href="https://grafana.com/docs/grafana/latest/variables/xxx" external>
-        our docs
-      </TextLink>{' '}
-      for more information.
-    </Trans>
+    <Stack direction="row" gap={1}>
+      <RadioButtonGroup
+        value={valuesFormat}
+        onChange={onValuesFormatChange}
+        options={[
+          {
+            value: 'csv',
+            label: t('dashboard-scene.custom-variable-form.name-values-separated-comma', 'Values separated by comma'),
+          },
+          {
+            value: 'json',
+            label: t('dashboard-scene.custom-variable-form.name-json-values', 'Object values in a JSON array'),
+          },
+        ]}
+      />
+      {valuesFormat === 'json' && (
+        <Tooltip
+          content={
+            <Trans i18nKey="dashboard-scene.custom-variable-form.json-values-tooltip">
+              Provide a JSON representing an array of objects, where each object can have any number of properties.
+              <br />
+              Check{' '}
+              <TextLink href="https://grafana.com/docs/grafana/latest/variables/xxx" external>
+                our docs
+              </TextLink>{' '}
+              for more information.
+            </Trans>
+          }
+          placement="top"
+          interactive
+        >
+          <Icon name="info-circle" />
+        </Tooltip>
+      )}
+    </Stack>
   );
 }
diff --git a/public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.tsx b/public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.tsx
index 41a9d5c4fc3..f575363c956 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.tsx
@@ -36,7 +36,13 @@ function VariableValuesWithPropsPreview({ options }: { options: VariableValueOpt
       <Text variant="bodySmall" weight="medium">
         <Trans i18nKey="dashboard-scene.variable-values-preview.preview-of-values">Preview of values</Trans>
       </Text>
-      <InteractiveTable columns={columns} data={data} getRowId={(r) => String(r.value)} pageSize={10} />
+      <InteractiveTable
+        className={styles.table}
+        columns={columns}
+        data={data}
+        getRowId={(r) => String(r.value)}
+        pageSize={8}
+      />
     </div>
   );
 }
@@ -97,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.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/CustomVariableEditor.tsx
index 6c3774407f1..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
@@ -23,6 +23,7 @@ export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEdi
   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 });
@@ -33,7 +34,7 @@ export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEdi
         setPrevQuery(query);
       }
     },
-    [onRunQuery, prevQuery, query, variable]
+    [isMulti, onRunQuery, prevQuery, query, variable]
   );
 
   const onMultiChange = useCallback(
@@ -52,6 +53,8 @@ export function CustomVariableEditor({ variable, onRunQuery }: CustomVariableEdi
 
   const onQueryChange = useCallback(
     (event: FormEvent<HTMLTextAreaElement>) => {
+      setPrevQuery('');
+
       if (valuesFormat === 'json') {
         const validationError = validateJsonQuery(event.currentTarget.value);
         setQueryValidationError(validationError);
@@ -113,7 +116,7 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
   ];
 }
 
-const validateJsonQuery = (rawQuery: string): Error | undefined => {
+export const validateJsonQuery = (rawQuery: string): Error | undefined => {
   const query = rawQuery.trim();
   if (!query) {
     return;
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<VariableStaticOptionsFormRef | null>(null);
+  const { query, valuesFormat, isMulti } = variable.useState();
+  const [prevQuery, setPrevQuery] = useState('');
+  const [queryValidationError, setQueryValidationError] = useState<Error>();
 
-  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<HTMLTextAreaElement>) => {
+      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 (
     <Modal
@@ -29,10 +70,31 @@ export function ModalEditor({ variable, isOpen, onClose }: ModalEditorProps) {
       onDismiss={onClose}
     >
       <Stack direction="column" gap={2}>
-        <ValuesBuilder variable={variable} ref={formRef} />
-        <ValuesPreview variable={variable} />
+        <ValuesFormatSelector valuesFormat={valuesFormat} onValuesFormatChange={onValuesFormatChange} />
+        <div>
+          <TextArea
+            id={valuesFormat}
+            key={valuesFormat}
+            rows={4}
+            defaultValue={query}
+            onBlur={onQueryChange}
+            placeholder={
+              valuesFormat === 'json'
+                ? // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+                  '[{ "text":"text1", "value":"val1", "propA":"a1", "propB":"b1" },\n{ "text":"text2", "value":"val2", "propA":"a2", "propB":"b2" }]'
+                : // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+                  '1, 10, mykey : myvalue, myvalue, escaped\,value'
+            }
+            required
+            data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput}
+          />
+          {queryValidationError && <FieldValidationMessage>{queryValidationError.message}</FieldValidationMessage>}
+        </div>
+        <div>
+          <VariableValuesPreview options={optionsForSelect} hasMultiProps={hasMultiProps} />
+        </div>
       </Stack>
-      <Modal.ButtonRow leftItems={<VariableStaticOptionsFormAddButton onAdd={handleOnAdd} />}>
+      <Modal.ButtonRow>
         <Button
           variant="secondary"
           fill="outline"
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/getCustomVariableOptions.tsx b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/getCustomVariableOptions.tsx
index 5033ebb1407..7dea9f83ec3 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/getCustomVariableOptions.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/getCustomVariableOptions.tsx
@@ -1,4 +1,3 @@
-import { t } from '@grafana/i18n';
 import { CustomVariable, SceneVariable } from '@grafana/scenes';
 
 import { OptionsPaneItemDescriptor } from '../../../../../dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
@@ -12,7 +11,6 @@ export function getCustomVariableOptions(variable: SceneVariable): OptionsPaneIt
 
   return [
     new OptionsPaneItemDescriptor({
-      title: t('dashboard.edit-pane.variable.custom-options.values', 'Values separated by comma'),
       id: 'custom-variable-values',
       render: ({ props }) => <PaneItem id={props.id} variable={variable} />,
     }),
diff --git a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
index da1649776b2..d461071c4cf 100644
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.tsx
@@ -7,7 +7,7 @@ import { Trans, t } from '@grafana/i18n';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { QueryVariable, sceneGraph, SceneVariable } from '@grafana/scenes';
 import { VariableRefresh, VariableSort } from '@grafana/schema';
-import { Box, Button, Field, Modal, TextLink } from '@grafana/ui';
+import { Box, Button, Field, Modal, Switch, TextLink } from '@grafana/ui';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 import { QueryEditor } from 'app/features/dashboard-scene/settings/variables/components/QueryEditor';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
@@ -250,6 +250,19 @@ export function Editor({ variable }: { variable: QueryVariable }) {
 
   const isHasVariableOptions = hasVariableOptions(variable);
 
+  // TODO: remove me after finished testing - each DS can/should implement their own UI
+  const [returnsMultiProps, setReturnsMultiProps] = useState(false);
+  const onChangeReturnsMultipleProps = (e: FormEvent<HTMLInputElement>) => {
+    setReturnsMultiProps(e.currentTarget.checked);
+    variable.setState({ allowCustomValue: false });
+    variable.setState({ allValue: '' });
+    variable.setState({ regex: '' });
+    onStaticOptionsChange?.([]);
+  };
+
+  const optionsForSelect = variable.getOptionsForSelect(false);
+  const hasMultiProps = returnsMultiProps || optionsForSelect.every((o) => Boolean(o.properties));
+
   return (
     <div data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.editor}>
       <Field
@@ -261,43 +274,64 @@ export function Editor({ variable }: { variable: QueryVariable }) {
       </Field>
 
       {selectedDatasource && VariableQueryEditor && (
-        <QueryEditor
-          onQueryChange={onQueryChange}
-          onLegacyQueryChange={onQueryChange}
-          datasource={selectedDatasource}
-          query={query}
-          VariableQueryEditor={VariableQueryEditor}
-          timeRange={timeRange}
-        />
+        <Box marginBottom={2}>
+          <QueryEditor
+            onQueryChange={onQueryChange}
+            onLegacyQueryChange={onQueryChange}
+            datasource={selectedDatasource}
+            query={query}
+            VariableQueryEditor={VariableQueryEditor}
+            timeRange={timeRange}
+          />
+          {/* TODO: remove me after finished testing - each DS can/should implement their own UI */}
+          <Field
+            // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+            label="Enable access to all the fields of the query results"
+            description={
+              <Trans i18nKey="">
+                Check{' '}
+                <TextLink href="https://grafana.com/docs/grafana/latest/variables/xxx" external>
+                  our docs
+                </TextLink>{' '}
+                for more information.
+              </Trans>
+            }
+            noMargin
+          >
+            <Switch onChange={onChangeReturnsMultipleProps} />
+          </Field>
+        </Box>
       )}
 
-      <VariableTextAreaField
-        defaultValue={regex ?? ''}
-        name={t('dashboard-scene.query-variable-editor-form.name-regex', 'Regex')}
-        description={
-          <div>
-            <Trans i18nKey="dashboard-scene.query-variable-editor-form.description-optional">
-              Optional, if you want to extract part of a series name or metric node segment.
-            </Trans>
-            <br />
-            <Trans i18nKey="dashboard-scene.query-variable-editor-form.description-examples">
-              Named capture groups can be used to separate the display text and value (
-              <TextLink
-                href="https://grafana.com/docs/grafana/latest/variables/filter-variables-with-regex#filter-and-modify-using-named-text-and-value-capture-groups"
-                external
-              >
-                see examples
-              </TextLink>
-              ).
-            </Trans>
-          </div>
-        }
-        // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
-        placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/"
-        onBlur={onRegExChange}
-        testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2}
-        width={52}
-      />
+      {!returnsMultiProps && (
+        <VariableTextAreaField
+          defaultValue={regex ?? ''}
+          name={t('dashboard-scene.query-variable-editor-form.name-regex', 'Regex')}
+          description={
+            <div>
+              <Trans i18nKey="dashboard-scene.query-variable-editor-form.description-optional">
+                Optional, if you want to extract part of a series name or metric node segment.
+              </Trans>
+              <br />
+              <Trans i18nKey="dashboard-scene.query-variable-editor-form.description-examples">
+                Named capture groups can be used to separate the display text and value (
+                <TextLink
+                  href="https://grafana.com/docs/grafana/latest/variables/filter-variables-with-regex#filter-and-modify-using-named-text-and-value-capture-groups"
+                  external
+                >
+                  see examples
+                </TextLink>
+                ).
+              </Trans>
+            </div>
+          }
+          // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
+          placeholder="/.*-(?<text>.*)-(?<value>.*)-.*/"
+          onBlur={onRegExChange}
+          testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2}
+          width={52}
+        />
+      )}
 
       <QueryVariableSortSelect
         testId={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2}
@@ -311,7 +345,7 @@ export function Editor({ variable }: { variable: QueryVariable }) {
         refresh={refresh}
       />
 
-      {onStaticOptionsChange && onStaticOptionsOrderChange && (
+      {!returnsMultiProps && onStaticOptionsChange && onStaticOptionsOrderChange && (
         <QueryVariableStaticOptions
           staticOptions={staticOptions}
           staticOptionsOrder={staticOptionsOrder}
@@ -320,7 +354,7 @@ export function Editor({ variable }: { variable: QueryVariable }) {
         />
       )}
 
-      {isHasVariableOptions && <VariableValuesPreview options={variable.getOptionsForSelect(false)} />}
+      {isHasVariableOptions && <VariableValuesPreview options={optionsForSelect} hasMultiProps={hasMultiProps} />}
     </div>
   );
 }
diff --git a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx b/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
index 429c9221998..d8d0ecfdf28 100644
--- a/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/useVariableSelectionOptionsCategory.tsx
@@ -45,7 +45,9 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
             'A wildcard regex or other value to represent All'
           ),
           useShowIf: () => {
-            return variable.useState().includeAll ?? false;
+            const state = variable.useState();
+            const hasJsonValuesFormat = 'valuesFormat' in state && state.valuesFormat === 'json';
+            return hasJsonValuesFormat ? false : (state.includeAll ?? false);
           },
           render: (descriptor) => <CustomAllValueInput id={descriptor.props.id} variable={variable} />,
         })
@@ -58,6 +60,11 @@ export function useVariableSelectionOptionsCategory(variable: MultiValueVariable
             'dashboard.edit-pane.variable.selection-options.allow-custom-values-description',
             'Enables users to enter values'
           ),
+          useShowIf: () => {
+            const state = variable.useState();
+            const hasJsonValuesFormat = 'valuesFormat' in state && state.valuesFormat === 'json';
+            return !hasJsonValuesFormat;
+          },
           render: (descriptor) => <AllowCustomSwitch id={descriptor.props.id} variable={variable} />,
         })
       );