Update Pre-Selection for multi selection elements

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Features / Enhancements
 
 - Added Expandable Editors (#472)
+- Updated Pre-Selection for multi selection elements (#474)
 
 ## 4.3.1 (2024-08-16)
 

src/components/FormPanel/FormPanel.test.tsx

@@ -632,6 +632,83 @@ describe('Panel', () => {
       );
     });
 
+    it('Should update elements with query result for multiselect elements', async () => {
+      /**
+       * Render
+       */
+      await act(async () => {
+        render(
+          getComponent({
+            options: {
+              initial: {
+                method: RequestMethod.QUERY,
+              },
+              elements: [
+                {
+                  ...FORM_ELEMENT_DEFAULT,
+                  type: FormElementType.CHECKBOX_LIST,
+                  id: 'mapped',
+                  queryField: {
+                    refId: 'A',
+                    value: 'metric',
+                  },
+                },
+                {
+                  ...FORM_ELEMENT_DEFAULT,
+                  id: 'unmapped',
+                  queryField: undefined,
+                },
+              ],
+            },
+            props: {
+              data: {
+                state: LoadingState.Done,
+                series: [
+                  toDataFrame({
+                    fields: [
+                      {
+                        name: 'metric',
+                        values: ['metricA1', 'metricA2'],
+                      },
+                    ],
+                    refId: 'A',
+                  }),
+                  toDataFrame({
+                    fields: [
+                      {
+                        name: 'metric',
+                        values: ['metricB1', 'metricB2'],
+                      },
+                    ],
+                    refId: 'B',
+                  }),
+                ],
+              },
+            },
+          })
+        );
+
+        await waitFor(() => expect(selectors.loadingBar(true)).not.toBeInTheDocument());
+      });
+
+      expect(FormElements).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          elements: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'mapped',
+              value: ['metricA1', 'metricA2'],
+            }),
+            expect.objectContaining({
+              id: 'unmapped',
+              value: '',
+            }),
+          ]),
+        }),
+        expect.anything()
+      );
+    });
+
     it('Should not update elements if no query result', async () => {
       /**
        * Render

src/components/FormPanel/FormPanel.tsx

@@ -201,6 +201,13 @@ export const FormPanel: React.FC<Props> = ({
            */
           const values = getFieldValues(field);
 
+          /**
+           * Supports multi values
+           */
+          if (element.type === FormElementType.CHECKBOX_LIST || element.type === FormElementType.MULTISELECT) {
+            return convertToElementValue(element, values);
+          }
+
           return convertToElementValue(element, values[values.length - 1]);
         }