Options: support array value paths for panel options (#39499) (#39596)

(cherry picked from commit 01deae2105)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

packages/grafana-data/src/panel/PanelPlugin.test.tsx

@@ -182,6 +182,27 @@ describe('PanelPlugin', () => {
         expect(panel.fieldConfigDefaults.defaults.custom).toEqual(expectedDefaults);
       });
 
+      test('throw error with array fieldConfigs', () => {
+        const panel = new PanelPlugin(() => {
+          return <div>Panel</div>;
+        });
+
+        panel.useFieldConfig({
+          useCustomConfig: (builder) => {
+            builder.addCustomEditor({
+              id: 'somethingUnique',
+              path: 'numericOption[0]',
+              name: 'Option editor',
+              description: 'Option editor description',
+              defaultValue: 10,
+            } as any);
+          },
+        });
+        expect(() => panel.fieldConfigRegistry).toThrowErrorMatchingInlineSnapshot(
+          `"[undefined] Field config paths do not support arrays: custom.somethingUnique"`
+        );
+      });
+
       test('default values for nested paths', () => {
         const panel = new PanelPlugin(() => {
           return <div>Panel</div>;

packages/grafana-data/src/panel/registryFactories.ts

@@ -75,6 +75,13 @@ export function createFieldConfigRegistry<TFieldConfigOptions>(
     }
   }
 
+  // assert that field configs do not use array path syntax
+  for (const item of registry.list()) {
+    if (item.path.indexOf('[') > 0) {
+      throw new Error(`[${pluginName}] Field config paths do not support arrays: ${item.id}`);
+    }
+  }
+
   return registry;
 }
 

public/app/features/dashboard/components/PanelEditor/utils.test.ts

@@ -89,13 +89,16 @@ describe('updateDefaultFieldConfigValue', () => {
 
 describe('setOptionImmutably', () => {
   it.each`
-    source                    | path       | value     | expected
+    source                    | path          | value     | expected
-    ${{}}                     | ${'a'}     | ${1}      | ${{ a: 1 }}
+    ${{}}                     | ${'a'}        | ${1}      | ${{ a: 1 }}
-    ${{}}                     | ${'a.b.c'} | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
+    ${{}}                     | ${'a.b.c'}    | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
-    ${{ a: {} }}              | ${'a.b.c'} | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
+    ${{ a: {} }}              | ${'a.b.c'}    | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
-    ${{ b: {} }}              | ${'a.b.c'} | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } }, b: {} }}
+    ${{ b: {} }}              | ${'a.b.c'}    | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } }, b: {} }}
-    ${{ a: { b: { c: 3 } } }} | ${'a.b.c'} | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
+    ${{ a: { b: { c: 3 } } }} | ${'a.b.c'}    | ${[1, 2]} | ${{ a: { b: { c: [1, 2] } } }}
-  `('numeric-like text mapping, value:${value', ({ source, path, value, expected }) => {
+    ${{}}                     | ${'a.b[2]'}   | ${'x'}    | ${{ a: { b: [undefined, undefined, 'x'] } }}
+    ${{}}                     | ${'a[0]'}     | ${1}      | ${{ a: [1] }}
+    ${{}}                     | ${'a[0].b.c'} | ${1}      | ${{ a: [{ b: { c: 1 } }] }}
+  `('property value:${value', ({ source, path, value, expected }) => {
     expect(setOptionImmutably(source, path, value)).toEqual(expected);
   });
 

public/app/features/dashboard/components/PanelEditor/utils.ts

@@ -68,6 +68,21 @@ export function setOptionImmutably<T extends object>(options: T, path: string |
   const splat = !Array.isArray(path) ? path.split('.') : path;
 
   const key = splat.shift()!;
+  if (key.endsWith(']')) {
+    const idx = key.lastIndexOf('[');
+    const index = +key.substring(idx + 1, key.length - 1);
+    const propKey = key.substr(0, idx);
+    let current = (options as Record<string, any>)[propKey];
+    const arr = Array.isArray(current) ? [...current] : [];
+    if (splat.length) {
+      if (current == null || typeof current !== 'object') {
+        current = {};
+      }
+      value = setOptionImmutably(current, splat, value);
+    }
+    arr[index] = value;
+    return { ...options, [propKey]: arr };
+  }
 
   if (!splat.length) {
     return { ...options, [key]: value };