Skip to content

Commit

Permalink
Update position of Query fields for initial values (#455)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people authored Jul 18, 2024
1 parent a3d79cf commit d546ecf
Show file tree
Hide file tree
Showing 12 changed files with 250 additions and 157 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
# Change Log

## 4.2.0 (IN PROGRESS)
## 4.2.0 (2024-07-18)

### Features / Enhancements

- Updated Docker Compose and E2E pipeline (#446, #447)
- 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)

Expand Down
69 changes: 2 additions & 67 deletions src/components/ElementEditor/ElementEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -69,21 +68,6 @@ interface Props {
*/
layoutSectionOptions: SelectableValue[];

/**
* Initial Request Method
*/
initialMethod?: RequestMethod;

/**
* Query Fields
*/
queryFields: QueryField[];

/**
* Is Query Fields Enabled
*/
isQueryFieldsEnabled: boolean;

/**
* Data
*/
Expand All @@ -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
*/
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
margin-left: ${theme.spacing(1)};
color: ${theme.colors.text.secondary};
`,
buttonWrap: css`
min-height: 32px;
`,
};
};
72 changes: 0 additions & 72 deletions src/components/FormElementsEditor/FormElementsEditor.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down
25 changes: 9 additions & 16 deletions src/components/FormElementsEditor/FormElementsEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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>
Expand All @@ -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} />
Expand Down
115 changes: 115 additions & 0 deletions src/components/InitialFieldsEditor/InitialFieldsEditor.test.tsx
Original file line number Diff line number Diff line change
@@ -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');
});
});
Loading

0 comments on commit d546ecf

Please sign in to comment.