From d546ecf772d5f12c90d1662951ef6f4369bea117 Mon Sep 17 00:00:00 2001
From: Vitali Pinchuk <146737590+vitPinchuk@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:07:14 +0300
Subject: [PATCH] Update position of Query fields for initial values (#455)

* elements fields updated

* remove as unused

* Formatting

* Update Initial Fields Editor

* Update test

* tests update

* Formatting

* Remove unused aria-label

* Update CHANGELOG.md

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>
Co-authored-by: asimonok <sashasimonok@gmail.com>
---
 CHANGELOG.md                                  |   3 +-
 .../ElementEditor/ElementEditor.tsx           |  69 +----------
 .../FormElementsEditor.styles.ts              |   3 +
 .../FormElementsEditor.test.tsx               |  72 -----------
 .../FormElementsEditor/FormElementsEditor.tsx |  25 ++--
 .../InitialFieldsEditor.test.tsx              | 115 ++++++++++++++++++
 .../InitialFieldsEditor.tsx                   |  80 ++++++++++++
 src/components/InitialFieldsEditor/index.ts   |   1 +
 src/components/index.ts                       |   1 +
 src/constants/tests.ts                        |   6 +
 src/module.ts                                 |  26 ++++
 src/utils/tests.ts                            |   6 +-
 12 files changed, 250 insertions(+), 157 deletions(-)
 create mode 100644 src/components/InitialFieldsEditor/InitialFieldsEditor.test.tsx
 create mode 100644 src/components/InitialFieldsEditor/InitialFieldsEditor.tsx
 create mode 100644 src/components/InitialFieldsEditor/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d360407c..585d306f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## 4.2.0 (IN PROGRESS)
+## 4.2.0 (2024-07-18)
 
 ### Features / Enhancements
 
@@ -8,6 +8,7 @@
 - Improved unit tests (#447)
 - Updated Business Forms tutorial (#451)
 - Updated the logic for comparing values with the initial values (#454)
+- Updated position of Query fields for initial values (#455)
 
 ## 4.1.0 (2024-07-09)
 
diff --git a/src/components/ElementEditor/ElementEditor.tsx b/src/components/ElementEditor/ElementEditor.tsx
index 4bfcce6f..1ab101f9 100644
--- a/src/components/ElementEditor/ElementEditor.tsx
+++ b/src/components/ElementEditor/ElementEditor.tsx
@@ -22,12 +22,11 @@ import {
   LINK_TARGET_OPTIONS,
   OPTIONS_SOURCE_OPTIONS,
   OptionsSource,
-  RequestMethod,
   STRING_ELEMENT_OPTIONS,
   TEST_IDS,
   TIME_TRANSFORMATION_OPTIONS,
 } from '../../constants';
-import { CodeLanguage, LocalFormElement, QueryField } from '../../types';
+import { CodeLanguage, LocalFormElement } from '../../types';
 import {
   formatNumberValue,
   getElementWithNewType,
@@ -69,21 +68,6 @@ interface Props {
    */
   layoutSectionOptions: SelectableValue[];
 
-  /**
-   * Initial Request Method
-   */
-  initialMethod?: RequestMethod;
-
-  /**
-   * Query Fields
-   */
-  queryFields: QueryField[];
-
-  /**
-   * Is Query Fields Enabled
-   */
-  isQueryFieldsEnabled: boolean;
-
   /**
    * Data
    */
@@ -93,16 +77,7 @@ interface Props {
 /**
  * Element Editor
  */
-export const ElementEditor: React.FC<Props> = ({
-  element,
-  onChange,
-  onChangeOption,
-  layoutSectionOptions,
-  initialMethod,
-  isQueryFieldsEnabled,
-  queryFields,
-  data,
-}) => {
+export const ElementEditor: React.FC<Props> = ({ element, onChange, onChangeOption, layoutSectionOptions, data }) => {
   /**
    * Styles
    */
@@ -526,46 +501,6 @@ export const ElementEditor: React.FC<Props> = ({
         </InlineFieldRow>
       )}
 
-      {initialMethod === RequestMethod.DATASOURCE && (
-        <InlineFieldRow>
-          <InlineField
-            grow={true}
-            label="Field Name"
-            labelWidth={14}
-            tooltip="Specify a field name from the Data Source response"
-          >
-            <Input
-              value={element.fieldName || ''}
-              onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                onChange({
-                  ...element,
-                  fieldName: event.target.value,
-                });
-              }}
-              data-testid={TEST_IDS.formElementsEditor.fieldNamePicker}
-            />
-          </InlineField>
-        </InlineFieldRow>
-      )}
-      {isQueryFieldsEnabled && (
-        <InlineFieldRow>
-          <InlineField grow={true} label="Query Field" labelWidth={14} tooltip="Specify a field name from the Query">
-            <Select
-              value={element.queryField?.value}
-              options={queryFields}
-              onChange={(item) => {
-                onChange({
-                  ...element,
-                  queryField: item,
-                });
-              }}
-              aria-label={TEST_IDS.formElementsEditor.fieldFromQueryPicker}
-              isClearable={true}
-            />
-          </InlineField>
-        </InlineFieldRow>
-      )}
-
       {element.type === FormElementType.FILE && (
         <InlineFieldRow>
           <InlineField
diff --git a/src/components/FormElementsEditor/FormElementsEditor.styles.ts b/src/components/FormElementsEditor/FormElementsEditor.styles.ts
index d1bfeafc..d6096070 100644
--- a/src/components/FormElementsEditor/FormElementsEditor.styles.ts
+++ b/src/components/FormElementsEditor/FormElementsEditor.styles.ts
@@ -24,5 +24,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
       margin-left: ${theme.spacing(1)};
       color: ${theme.colors.text.secondary};
     `,
+    buttonWrap: css`
+      min-height: 32px;
+    `,
   };
 };
diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
index a91cadcf..56acd8c9 100644
--- a/src/components/FormElementsEditor/FormElementsEditor.test.tsx
+++ b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
@@ -1619,31 +1619,6 @@ describe('Form Elements Editor', () => {
       expect(elementSelectors.fieldTextareaRows()).toHaveValue(123);
     });
 
-    it('Should update field name', async () => {
-      const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id' }];
-      const context = {
-        options: {
-          initial: {
-            method: RequestMethod.DATASOURCE,
-          },
-        },
-      };
-
-      render(getComponent({ value: elements, onChange, context }));
-
-      /**
-       * Open id element
-       */
-      const elementSelectors = openElement('id', FORM_ELEMENT_DEFAULT.type);
-
-      /**
-       * Change field name
-       */
-      await act(() => fireEvent.change(elementSelectors.fieldNamePicker(), { target: { value: 'metric' } }));
-
-      expect(elementSelectors.fieldNamePicker()).toHaveValue('metric');
-    });
-
     it('Should update field accept', async () => {
       const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id', type: FormElementType.FILE }];
       const context = {
@@ -1717,53 +1692,6 @@ describe('Form Elements Editor', () => {
       expect(elementSelectors.fieldQueryOptionsValue()).toBeInTheDocument();
     });
 
-    it('Should update query field name', async () => {
-      const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id' }];
-      const context = {
-        options: {
-          initial: {
-            method: RequestMethod.QUERY,
-          },
-        },
-        data: [
-          toDataFrame({
-            fields: [
-              {
-                name: 'field1',
-                values: [],
-              },
-              {
-                name: 'field2',
-                values: [],
-              },
-            ],
-          }),
-        ],
-      };
-
-      render(getComponent({ value: elements, onChange, context }));
-
-      /**
-       * Open id element
-       */
-
-      const elementSelectors = openElement('id', FORM_ELEMENT_DEFAULT.type);
-
-      /**
-       * Change query field name
-       */
-      await act(() => fireEvent.change(elementSelectors.fieldFromQueryPicker(), { target: { value: 'field1' } }));
-
-      expect(elementSelectors.fieldFromQueryPicker()).toHaveValue('field1');
-
-      /**
-       * Clear query field name
-       */
-      await act(() => fireEvent.change(elementSelectors.fieldFromQueryPicker(), { target: { value: '' } }));
-
-      expect(elementSelectors.fieldFromQueryPicker()).toHaveValue('');
-    });
-
     it('Should update field target', async () => {
       const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id', type: FormElementType.LINK }];
       const context = {
diff --git a/src/components/FormElementsEditor/FormElementsEditor.tsx b/src/components/FormElementsEditor/FormElementsEditor.tsx
index 20709e75..5e664a64 100644
--- a/src/components/FormElementsEditor/FormElementsEditor.tsx
+++ b/src/components/FormElementsEditor/FormElementsEditor.tsx
@@ -4,8 +4,8 @@ import { DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDr
 import { Collapse } from '@volkovlabs/components';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { RequestMethod, TEST_IDS } from '../../constants';
-import { useFormElements, useQueryFields } from '../../hooks';
+import { TEST_IDS } from '../../constants';
+import { useFormElements } from '../../hooks';
 import { FormElement, LayoutSection, LocalFormElement, PanelOptions } from '../../types';
 import { getElementUniqueId, reorder } from '../../utils';
 import { ElementEditor } from '../ElementEditor';
@@ -58,12 +58,6 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
     value,
   });
 
-  /**
-   * Query Fields
-   */
-  const isQueryFieldsEnabled = context.options?.initial?.method === RequestMethod.QUERY;
-  const queryFields = useQueryFields({ data: context.data, isEnabled: isQueryFieldsEnabled });
-
   /**
    * Add Elements
    */
@@ -169,10 +163,7 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
                             element={element}
                             onChange={onChangeElement}
                             layoutSectionOptions={layoutSectionOptions}
-                            initialMethod={context.options?.initial?.method}
                             onChangeOption={onChangeElementOption}
-                            queryFields={queryFields}
-                            isQueryFieldsEnabled={isQueryFieldsEnabled}
                             data={context.data}
                           />
                         </Collapse>
@@ -187,11 +178,13 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
         </Droppable>
       </DragDropContext>
 
-      {isChanged && (
-        <Button onClick={onSaveUpdates} data-testid={TEST_IDS.formElementsEditor.buttonSaveChanges}>
-          Save changes
-        </Button>
-      )}
+      <div className={styles.buttonWrap}>
+        {isChanged && (
+          <Button onClick={onSaveUpdates} data-testid={TEST_IDS.formElementsEditor.buttonSaveChanges}>
+            Save changes
+          </Button>
+        )}
+      </div>
 
       <hr />
       <NewElement elements={elements} onSave={onElementAdd} />
diff --git a/src/components/InitialFieldsEditor/InitialFieldsEditor.test.tsx b/src/components/InitialFieldsEditor/InitialFieldsEditor.test.tsx
new file mode 100644
index 00000000..3ceeb944
--- /dev/null
+++ b/src/components/InitialFieldsEditor/InitialFieldsEditor.test.tsx
@@ -0,0 +1,115 @@
+import { toDataFrame } from '@grafana/data';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { FORM_ELEMENT_DEFAULT, RequestMethod } from '../../constants';
+import { getInitialFieldsEditorSelectors } from '../../utils';
+import { InitialFieldsEditor } from './InitialFieldsEditor';
+
+/**
+ * Form Elements Editor
+ */
+describe('Form Elements Editor', () => {
+  /**
+   * OnChange function
+   */
+  const onChange = jest.fn();
+
+  /**
+   * Form Elements Editor Selectors
+   */
+  const selectors = getInitialFieldsEditorSelectors(screen);
+
+  /**
+   * Get Tested Component
+   * @param value
+   * @param context
+   * @param restProps
+   */
+  const getComponent = ({ value = [], context = {}, ...restProps }: any) => {
+    return <InitialFieldsEditor {...restProps} value={value} context={context} />;
+  };
+
+  it('Should render component for Datasource method', async () => {
+    const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id' }];
+    render(
+      getComponent({
+        value: elements,
+        onChange,
+        context: { options: { initial: { method: RequestMethod.DATASOURCE } } },
+      })
+    );
+
+    expect(selectors.root()).toBeInTheDocument();
+  });
+
+  it('Should change Field Name', async () => {
+    const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id', fieldName: 'max' }];
+    render(
+      getComponent({
+        value: elements,
+        onChange,
+        context: { options: { initial: { method: RequestMethod.DATASOURCE } } },
+      })
+    );
+
+    expect(selectors.root()).toBeInTheDocument();
+
+    expect(selectors.fieldNamePicker()).toBeInTheDocument();
+    expect(selectors.fieldNamePicker()).toHaveValue('max');
+
+    /**
+     * Change field name
+     */
+    await act(() => fireEvent.change(selectors.fieldNamePicker(), { target: { value: 'metric' } }));
+
+    expect(selectors.fieldNamePicker()).toHaveValue('metric');
+  });
+
+  it('Should change Query Name', async () => {
+    const elements = [{ ...FORM_ELEMENT_DEFAULT, id: 'id' }];
+    const context = {
+      options: {
+        initial: {
+          method: RequestMethod.QUERY,
+        },
+      },
+      data: [
+        toDataFrame({
+          fields: [
+            {
+              name: 'field1',
+              values: [],
+            },
+            {
+              name: 'field2',
+              values: [],
+            },
+          ],
+          refId: 'A',
+        }),
+      ],
+    };
+
+    render(
+      getComponent({
+        value: elements,
+        onChange,
+        context,
+      })
+    );
+
+    expect(selectors.root()).toBeInTheDocument();
+
+    expect(selectors.fieldNamePicker(true)).not.toBeInTheDocument();
+
+    expect(selectors.fieldFromQueryPicker()).toHaveValue('');
+
+    /**
+     * Change query field name
+     */
+    await act(() => fireEvent.change(selectors.fieldFromQueryPicker(), { target: { value: 'field1' } }));
+
+    expect(selectors.fieldFromQueryPicker()).toHaveValue('field1');
+  });
+});
diff --git a/src/components/InitialFieldsEditor/InitialFieldsEditor.tsx b/src/components/InitialFieldsEditor/InitialFieldsEditor.tsx
new file mode 100644
index 00000000..d57b99cf
--- /dev/null
+++ b/src/components/InitialFieldsEditor/InitialFieldsEditor.tsx
@@ -0,0 +1,80 @@
+import { StandardEditorProps } from '@grafana/data';
+import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+import React, { ChangeEvent } from 'react';
+
+import { RequestMethod, TEST_IDS } from '../../constants';
+import { useFormElements, useQueryFields } from '../../hooks';
+import { FormElement, PanelOptions } from '../../types';
+
+/**
+ * Properties
+ */
+type Props = StandardEditorProps<FormElement[], null, PanelOptions>;
+
+/**
+ * Initial Fields Editor
+ */
+export const InitialFieldsEditor: React.FC<Props> = ({ value, onChange, context }) => {
+  /**
+   * Form Elements State
+   */
+  const { elements, isChanged, onSaveUpdates, onChangeElement } = useFormElements({
+    onChange,
+    value,
+  });
+
+  /**
+   * Query Fields
+   */
+  const queryFields = useQueryFields({
+    data: context.data,
+    isEnabled: context.options?.initial?.method === RequestMethod.QUERY,
+  });
+
+  /**
+   * Return
+   */
+  return (
+    <div data-testid={TEST_IDS.initialFieldsEditor.root}>
+      {elements.map((element) => {
+        return (
+          <InlineFieldRow key={element.uid}>
+            <InlineField grow={true} label={element.title} labelWidth={14}>
+              {context.options?.initial?.method === RequestMethod.DATASOURCE ? (
+                <Input
+                  value={element.fieldName || ''}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    onChangeElement({
+                      ...element,
+                      fieldName: event.target.value,
+                    });
+                  }}
+                  data-testid={TEST_IDS.initialFieldsEditor.fieldNamePicker}
+                />
+              ) : (
+                <Select
+                  value={element.queryField?.value}
+                  options={queryFields}
+                  onChange={(item) => {
+                    onChangeElement({
+                      ...element,
+                      queryField: item,
+                    });
+                  }}
+                  data-testid={TEST_IDS.initialFieldsEditor.fieldFromQueryPicker}
+                  isClearable={true}
+                />
+              )}
+            </InlineField>
+          </InlineFieldRow>
+        );
+      })}
+
+      {isChanged && (
+        <Button onClick={onSaveUpdates} data-testid={TEST_IDS.initialFieldsEditor.buttonSaveChanges}>
+          Save changes
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/InitialFieldsEditor/index.ts b/src/components/InitialFieldsEditor/index.ts
new file mode 100644
index 00000000..1124c612
--- /dev/null
+++ b/src/components/InitialFieldsEditor/index.ts
@@ -0,0 +1 @@
+export * from './InitialFieldsEditor';
diff --git a/src/components/index.ts b/src/components/index.ts
index 3cd54303..8cd1d247 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,5 +7,6 @@ export * from './FormElements';
 export * from './FormElementsEditor';
 export * from './FormPanel';
 export * from './HeaderParametersEditor';
+export * from './InitialFieldsEditor';
 export * from './LayoutSectionsEditor';
 export * from './NewElement';
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index 4d72d966..8341ff43 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -152,4 +152,10 @@ export const TEST_IDS = {
     loadingMessage: 'data-testid payload-editor loading-message',
     errorMessage: 'data-testid payload-editor error-message',
   },
+  initialFieldsEditor: {
+    root: 'data-testid initial-fields-editor',
+    buttonSaveChanges: 'data-testid initial-fields-editor button-save-changes',
+    fieldNamePicker: 'data-testid initial-fields-editor field-name-picker',
+    fieldFromQueryPicker: 'data-testid initial-fields-editor field-from-query-picker',
+  },
 };
diff --git a/src/module.ts b/src/module.ts
index 52e477b8..40f9cec3 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -8,6 +8,7 @@ import {
   FormElementsEditor,
   FormPanel,
   HeaderParametersEditor,
+  InitialFieldsEditor,
   LayoutSectionsEditor,
 } from './components';
 import {
@@ -265,6 +266,31 @@ export const plugin = new PanelPlugin<PanelOptions>(FormPanel)
         showIf: (config) => isRequestConfigured(config.initial),
       });
 
+    /**
+     * Initial Fields
+     */
+    builder
+      .addCustomEditor({
+        id: 'elements',
+        path: 'elements',
+        name: 'Field Names',
+        description: 'Specify fields for appropriate form elements.',
+        category: ['Initial Fields'],
+        editor: InitialFieldsEditor,
+        showIf: (config) =>
+          config.layout.variant !== LayoutVariant.NONE && config.initial.method === RequestMethod.DATASOURCE,
+      })
+      .addCustomEditor({
+        id: 'elements',
+        path: 'elements',
+        name: 'Query Fields',
+        description: 'Specify fields for appropriate form elements.',
+        category: ['Initial Fields'],
+        editor: InitialFieldsEditor,
+        showIf: (config) =>
+          config.layout.variant !== LayoutVariant.NONE && config.initial.method === RequestMethod.QUERY,
+      });
+
     /**
      * Initial Payload For Data Source
      */
diff --git a/src/utils/tests.ts b/src/utils/tests.ts
index ab0a4d29..b898d16c 100644
--- a/src/utils/tests.ts
+++ b/src/utils/tests.ts
@@ -1,3 +1,4 @@
+import { SelectableValue } from '@grafana/data';
 import { getJestSelectors } from '@volkovlabs/jest-selectors';
 
 import { TEST_IDS } from '../constants';
@@ -37,7 +38,10 @@ export const getHeaderParametersEditorSelectors = getJestSelectors(TEST_IDS.head
  */
 export const getLayoutSectionsEditorSelectors = getJestSelectors(TEST_IDS.layoutSectionsEditor);
 
-import { SelectableValue } from '@grafana/data';
+/**
+ * Get Initial Fields Editor Selectors
+ */
+export const getInitialFieldsEditorSelectors = getJestSelectors(TEST_IDS.initialFieldsEditor);
 
 /**
  * Get Options with testId