Add Query Field Picker for Initial Request (#227)

* Add Query Field Picker * Allow to select query field from any queries * Formatting --------- Co-authored-by: Mikhail <mikhail@volkovlabs.io>
VolkovLabs · Aug 18, 2023 · 6a0d092 · 6a0d092
1 parent 46ecd0e
commit 6a0d092
Show file tree

Hide file tree

Showing 13 changed files with 477 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Add clearing errors before initial and update requests (#232)
 - Add URL encode to variables (#231)
 - Allow empty section name (#228)
+- Add Query Field Picker for Initial Request (#227)
 
 ## 3.1.0 (2023-08-13)
 

diff --git a/src/__mocks__/@grafana/ui.tsx b/src/__mocks__/@grafana/ui.tsx
@@ -45,7 +45,7 @@ const DateTimePicker = jest.fn(({ onChange, ...restProps }) => {
 /**
  * Mock Select component
  */
-const Select = jest.fn(({ options, onChange, value, isMulti, ...restProps }) => (
+const Select = jest.fn(({ options, onChange, value, isMulti, isClearable, ...restProps }) => (
   <select
     onChange={(event: any) => {
       if (onChange) {
@@ -64,6 +64,11 @@ const Select = jest.fn(({ options, onChange, value, isMulti, ...restProps }) =>
     multiple={isMulti}
     {...restProps}
   >
+    {isClearable && (
+      <option key="clear" value="">
+        Clear
+      </option>
+    )}
     {options.map(({ label, value }: any) => (
       <option key={value} value={value}>
         {label}

diff --git a/src/components/ElementEditor/ElementEditor.tsx b/src/components/ElementEditor/ElementEditor.tsx
@@ -22,7 +22,7 @@ import {
   StringElementOptions,
   TestIds,
 } from '../../constants';
-import { LocalFormElement } from '../../types';
+import { LocalFormElement, QueryField } from '../../types';
 import { FormatNumberValue, GetElementWithNewType, ToNumberValue } from '../../utils';
 import { ElementDateEditor } from '../ElementDateEditor';
 import { Styles } from './styles';
@@ -59,7 +59,17 @@ interface Props {
   /**
    * Initial Request Method
    */
-  initialMethod: RequestMethod;
+  initialMethod?: RequestMethod;
+
+  /**
+   * Query Fields
+   */
+  queryFields: QueryField[];
+
+  /**
+   * Is Query Fields Enabled
+   */
+  isQueryFieldsEnabled: boolean;
 }
 
 /**
@@ -71,6 +81,8 @@ export const ElementEditor: React.FC<Props> = ({
   onChangeOption,
   layoutSectionOptions,
   initialMethod,
+  isQueryFieldsEnabled,
+  queryFields,
 }) => {
   /**
    * Styles
@@ -415,6 +427,25 @@ export const ElementEditor: React.FC<Props> = ({
         </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={TestIds.formElementsEditor.fieldFromQueryPicker}
+              isClearable={true}
+            />
+          </InlineField>
+        </InlineFieldRow>
+      )}
+
       {(element.type === FormElementType.RADIO ||
         element.type === FormElementType.SELECT ||
         element.type === FormElementType.MULTISELECT ||

diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../constants';
 import { getFormElementsEditorSelectors } from '../../utils';
 import { FormElementsEditor } from './FormElementsEditor';
+import { toDataFrame } from '@grafana/data';
 
 /**
  * Mock timers
@@ -434,6 +435,76 @@ describe('Form Elements Editor', () => {
     expect(elementSelectors.buttonRemoveOption()).toBeInTheDocument();
   });
 
+  /**
+   * Field Name Disabled
+   */
+  it('Should not allow to select field name if initial method is not Datasource', () => {
+    const elements = [
+      {
+        ...FormElementDefault,
+        id: 'element',
+        type: FormElementType.STRING,
+      },
+    ];
+
+    render(
+      getComponent({
+        value: elements,
+        onChange,
+        context: {
+          options: {
+            initial: {
+              method: RequestMethod.QUERY,
+            },
+          },
+        },
+      })
+    );
+    expect(selectors.root()).toBeInTheDocument();
+
+    /**
+     * Make Element is opened
+     */
+    const elementSelectors = openElement('element', FormElementType.STRING);
+
+    expect(elementSelectors.fieldNamePicker(true)).not.toBeInTheDocument();
+  });
+
+  /**
+   * Query Field Name Disabled
+   */
+  it('Should not allow to select query field name if initial method is not Query', () => {
+    const elements = [
+      {
+        ...FormElementDefault,
+        id: 'element',
+        type: FormElementType.STRING,
+      },
+    ];
+
+    render(
+      getComponent({
+        value: elements,
+        onChange,
+        context: {
+          options: {
+            initial: {
+              method: RequestMethod.DATASOURCE,
+            },
+          },
+        },
+      })
+    );
+    expect(selectors.root()).toBeInTheDocument();
+
+    /**
+     * Make Element is opened
+     */
+    const elementSelectors = openElement('element', FormElementType.STRING);
+
+    expect(elementSelectors.fieldFromQueryPicker(true)).not.toBeInTheDocument();
+  });
+
   /**
    * Two elements
    */
@@ -1081,6 +1152,52 @@ describe('Form Elements Editor', () => {
       expect(elementSelectors.fieldNamePicker()).toHaveValue('metric');
     });
 
+    it('Should update query field name', async () => {
+      const elements = [{ ...FormElementDefault, 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', FormElementDefault.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 showIf', async () => {
       const element = { ...FormElementDefault, id: 'id', type: FormElementType.TEXTAREA, rows: 2 };
       const elements = [element];

diff --git a/src/components/FormElementsEditor/FormElementsEditor.tsx b/src/components/FormElementsEditor/FormElementsEditor.tsx
@@ -9,9 +9,9 @@ import {
 } from 'react-beautiful-dnd';
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { Button, Icon, IconButton, useTheme2 } from '@grafana/ui';
-import { TestIds } from '../../constants';
-import { useFormElements } from '../../hooks';
-import { FormElement, LayoutSection, LocalFormElement } from '../../types';
+import { RequestMethod, TestIds } from '../../constants';
+import { useFormElements, useQueryFields } from '../../hooks';
+import { FormElement, LayoutSection, LocalFormElement, PanelOptions } from '../../types';
 import { GetElementUniqueId, GetLayoutUniqueId, Reorder } from '../../utils';
 import { Collapse } from '../Collapse';
 import { ElementEditor } from '../ElementEditor';
@@ -31,7 +31,7 @@ const getItemStyle = (isDragging: boolean, draggableStyle: DraggingStyle | NotDr
 /**
  * Properties
  */
-interface Props extends StandardEditorProps<FormElement[]> {}
+interface Props extends StandardEditorProps<FormElement[], null, PanelOptions> {}
 
 /**
  * Form Elements Editor
@@ -61,6 +61,12 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
     onElementRemove,
   } = useFormElements(onChange, value);
 
+  /**
+   * Query Fields
+   */
+  const isQueryFieldsEnabled = context.options?.initial?.method === RequestMethod.QUERY;
+  const queryFields = useQueryFields({ data: context.data, isEnabled: isQueryFieldsEnabled });
+
   /**
    * Add Elements
    */
@@ -165,6 +171,8 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
                             layoutSectionOptions={layoutSectionOptions}
                             initialMethod={context.options?.initial?.method}
                             onChangeOption={onChangeElementOption}
+                            queryFields={queryFields}
+                            isQueryFieldsEnabled={isQueryFieldsEnabled}
                           />
                         </Collapse>
                       </div>