Skip to content

Commit 2a92bbd

Browse files
Maria-LordwillMaria-Lordwill
authored
Merge pull request #204 from pneumaticapp/frontend/template/46110__place_the_dataset_selector_inside_the_hamburger_menu_in_accordance_with_the_layout
46110 frontend [ template ] Place the dataset selector inside the hamburger menu in accordance with the layout
2 parents cf0f55a + 57146b8 commit 2a92bbd

30 files changed

Lines changed: 516 additions & 679 deletions

‎frontend/src/public/components/TemplateEdit/ExtraFields/Checkbox/ExtraFieldCheckbox.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { EExtraFieldMode, IExtraFieldSelection } from '../../../../types/templat
1212
import { fitInputWidth } from '../utils/fitInputWidth';
1313
import { PencilSmallIcon, RemoveIcon } from '../../../icons';
1414
import { Checkbox } from '../../../UI/Fields/Checkbox';
15-
import { DatasetSourceToggle } from '../utils/DatasetSourceToggle';
15+
import { OutputFieldContent } from '../utils/OutputFieldContent';
1616

1717
import { IWorkflowExtraFieldProps } from '..';
1818

@@ -38,6 +38,7 @@ export function ExtraFieldCheckbox({
3838
deleteField,
3939
editField,
4040
isDisabled = false,
41+
datasetName,
4142
}: IWorkflowExtraFieldProps) {
4243
const selectionItems = field.selections as IExtraFieldSelection[];
4344
const selectionValues = field.selections as string[];
@@ -116,10 +117,10 @@ export function ExtraFieldCheckbox({
116117
</p>
117118
)}
118119

119-
<DatasetSourceToggle field={field} editField={editField} isDisabled={isDisabled}>
120+
<OutputFieldContent field={field} editField={editField} isDisabled={isDisabled} datasetName={datasetName}>
120121
{customOptionsList}
121122
{!isDisabled && addOptionButton}
122-
</DatasetSourceToggle>
123+
</OutputFieldContent>
123124
</div>
124125
);
125126
};

‎frontend/src/public/components/TemplateEdit/ExtraFields/Checkbox/__tests__/ExtraFieldCheckbox.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import * as React from 'react';
33
import { render, screen } from '@testing-library/react';
44

55
import { ExtraFieldCheckbox } from '../ExtraFieldCheckbox';
6-
import { DatasetSourceToggle } from '../../utils/DatasetSourceToggle';
6+
import { OutputFieldContent } from '../../utils/OutputFieldContent';
77
import { Checkbox } from '../../../../UI/Fields/Checkbox';
88
import { intlMock } from '../../../../../__stubs__/intlMock';
99
import { EExtraFieldMode } from '../../../../../types/template';
1010

11-
jest.mock('../../utils/DatasetSourceToggle', () => ({
12-
DatasetSourceToggle: jest.fn(({ children }: any) =>
13-
React.createElement('div', { 'data-testid': 'dataset-source-toggle' }, children),
11+
jest.mock('../../utils/OutputFieldContent', () => ({
12+
OutputFieldContent: jest.fn(({ children }: any) =>
13+
React.createElement('div', { 'data-testid': 'output-field-content' }, children),
1414
),
1515
}));
1616

@@ -92,16 +92,16 @@ describe('ExtraFieldCheckbox', () => {
9292
jest.clearAllMocks();
9393
});
9494

95-
it('Kickoff: renders DatasetSourceToggle as wrapper for options', () => {
95+
it('Kickoff: renders OutputFieldContent as wrapper for options', () => {
9696
render(React.createElement(ExtraFieldCheckbox as any, baseKickoffProps));
9797

98-
expect(screen.getByTestId('dataset-source-toggle')).toBeInTheDocument();
98+
expect(screen.getByTestId('output-field-content')).toBeInTheDocument();
9999
});
100100

101-
it('Kickoff: passes field, editField, isDisabled to DatasetSourceToggle', () => {
101+
it('Kickoff: passes field, editField, isDisabled to OutputFieldContent', () => {
102102
render(React.createElement(ExtraFieldCheckbox as any, baseKickoffProps));
103103

104-
const mock = DatasetSourceToggle as jest.Mock;
104+
const mock = OutputFieldContent as jest.Mock;
105105
expect(mock).toHaveBeenCalledTimes(1);
106106
expect(mock).toHaveBeenCalledWith(
107107
expect.objectContaining({

‎frontend/src/public/components/TemplateEdit/ExtraFields/Creatable/ExtraFieldCreatable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getInputNameBackground } from '../utils/getInputNameBackground';
1111
import { RemoveIcon, ArrowDropdownIcon } from '../../../icons';
1212
import { IntlMessages } from '../../../IntlMessages';
1313
import { FieldWithName } from '../utils/FieldWithName';
14-
import { DatasetSourceToggle } from '../utils/DatasetSourceToggle';
14+
import { OutputFieldContent } from '../utils/OutputFieldContent';
1515
import { getFieldValidator } from '../utils/getFieldValidator';
1616
import { EExtraFieldMode, IExtraFieldSelection } from '../../../../types/template';
1717
import { validateCheckboxAndRadioField } from '../../../../utils/validators';
@@ -45,6 +45,7 @@ export function ExtraFieldCreatable({
4545
isDisabled = false,
4646
labelBackgroundColor,
4747
innerRef,
48+
datasetName,
4849
}: IWorkflowExtraFieldProps) {
4950
const { isRequired } = field;
5051
const optionInputsRefs = React.useRef<HTMLInputElement[]>([]);
@@ -199,10 +200,10 @@ export function ExtraFieldCreatable({
199200
<div className={inputStyles['kickoff-create-field-container']}>
200201
{renderKickoffField()}
201202

202-
<DatasetSourceToggle field={field} editField={editField} isDisabled={isDisabled}>
203+
<OutputFieldContent field={field} editField={editField} isDisabled={isDisabled} datasetName={datasetName}>
203204
{customOptionsList}
204205
{!isDisabled && addOptionButton}
205-
</DatasetSourceToggle>
206+
</OutputFieldContent>
206207
</div>
207208
);
208209
};

‎frontend/src/public/components/TemplateEdit/ExtraFields/Creatable/__tests__/ExtraFieldCreatable.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import * as React from 'react';
33
import { render, screen } from '@testing-library/react';
44

55
import { ExtraFieldCreatable } from '../ExtraFieldCreatable';
6-
import { DatasetSourceToggle } from '../../utils/DatasetSourceToggle';
6+
import { OutputFieldContent } from '../../utils/OutputFieldContent';
77
import { DropdownList } from '../../../../UI/DropdownList';
88
import { intlMock } from '../../../../../__stubs__/intlMock';
99
import { EExtraFieldMode } from '../../../../../types/template';
1010

11-
jest.mock('../../utils/DatasetSourceToggle', () => ({
12-
DatasetSourceToggle: jest.fn(({ children }: any) =>
13-
React.createElement('div', { 'data-testid': 'dataset-source-toggle' }, children),
11+
jest.mock('../../utils/OutputFieldContent', () => ({
12+
OutputFieldContent: jest.fn(({ children }: any) =>
13+
React.createElement('div', { 'data-testid': 'output-field-content' }, children),
1414
),
1515
}));
1616

@@ -95,16 +95,16 @@ describe('ExtraFieldCreatable', () => {
9595
jest.clearAllMocks();
9696
});
9797

98-
it('Kickoff: renders DatasetSourceToggle as wrapper for options', () => {
98+
it('Kickoff: renders OutputFieldContent as wrapper for options', () => {
9999
render(React.createElement(ExtraFieldCreatable as any, baseKickoffProps));
100100

101-
expect(screen.getByTestId('dataset-source-toggle')).toBeInTheDocument();
101+
expect(screen.getByTestId('output-field-content')).toBeInTheDocument();
102102
});
103103

104-
it('Kickoff: passes field, editField, isDisabled to DatasetSourceToggle', () => {
104+
it('Kickoff: passes field, editField, isDisabled to OutputFieldContent', () => {
105105
render(React.createElement(ExtraFieldCreatable as any, baseKickoffProps));
106106

107-
const mock = DatasetSourceToggle as jest.Mock;
107+
const mock = OutputFieldContent as jest.Mock;
108108
expect(mock).toHaveBeenCalledTimes(1);
109109
expect(mock).toHaveBeenCalledWith(
110110
expect.objectContaining({

‎frontend/src/public/components/TemplateEdit/ExtraFields/ExtraField.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import { Ref, useCallback, useMemo } from 'react';
2+
import { useCallback, useMemo } from 'react';
33
import classnames from 'classnames';
4-
import { injectIntl, IntlShape } from 'react-intl';
4+
import { injectIntl} from 'react-intl';
55

66
import { ExtraFieldString } from './String';
77
import { ExtraFieldText } from './Text';
@@ -14,35 +14,14 @@ import { ExtraFieldFile } from './File';
1414
import { ExtraFieldUser } from './User';
1515
import { ExtraFieldNumber } from './Number';
1616

17-
import { EExtraFieldMode, EExtraFieldType, IExtraField } from '../../../types/template';
18-
import { EInputNameBackgroundColor } from '../../../types/workflow';
17+
import { EExtraFieldType } from '../../../types/template';
1918
import { ExtraFieldDropdown } from './utils/ExtraFieldDropdown';
2019
import { getInputNameBackground } from './utils/getInputNameBackground';
20+
import { IExtraFieldProps } from './types';
2121

2222
import styles from '../KickoffRedux/KickoffRedux.css';
2323

24-
export interface IWorkflowExtraFieldProps {
25-
field: IExtraField;
26-
intl: IntlShape;
27-
showDropdown?: boolean;
28-
mode?: EExtraFieldMode;
29-
namePlaceholder?: string;
30-
descriptionPlaceholder?: string;
31-
labelBackgroundColor?: EInputNameBackgroundColor;
32-
deleteField?(): void;
33-
moveFieldUp?(): void;
34-
moveFieldDown?(): void;
35-
editField(changedProps: Partial<IExtraField>): void;
36-
isDisabled?: boolean;
37-
innerRef?: Ref<HTMLInputElement>;
38-
accountId: number;
39-
}
40-
41-
interface IExtraFieldProps extends IWorkflowExtraFieldProps {
42-
wrapperClassName?: string;
43-
fieldsCount?: number;
44-
id?: number;
45-
}
24+
import { DATASET_FIELD_TYPES } from './constants';
4625

4726
function ExtraField(props: IExtraFieldProps) {
4827
const {
@@ -59,8 +38,23 @@ function ExtraField(props: IExtraFieldProps) {
5938
wrapperClassName,
6039
labelBackgroundColor,
6140
innerRef,
41+
datasetOptions,
6242
} = props;
6343

44+
const isDatasetField = DATASET_FIELD_TYPES.includes(field.type);
45+
46+
const datasetName = useMemo(
47+
() => datasetOptions?.find((option) => option.value === String(field.dataset))?.label,
48+
[datasetOptions, field.dataset],
49+
);
50+
51+
const handleDatasetSelect = useCallback(
52+
(datasetId: number) => {
53+
editField({ dataset: datasetId, selections: undefined });
54+
},
55+
[editField],
56+
);
57+
6458
const handleDeleteField = useCallback(() => {
6559
if (!deleteField) {
6660
return;
@@ -101,7 +95,7 @@ function ExtraField(props: IExtraFieldProps) {
10195

10296
const Field = fieldsMap[field.type];
10397

104-
return <Field {...props} innerRef={innerRef} />;
98+
return <Field {...props} innerRef={innerRef} {...(isDatasetField && { datasetName })} />;
10599
};
106100

107101
const isFirstItem = useMemo(() => id === 0 && id !== undefined, [id]);
@@ -174,6 +168,10 @@ function ExtraField(props: IExtraFieldProps) {
174168
onMoveFieldUp={handleMoveFieldUp}
175169
onMoveFieldDown={handleMoveFieldDown}
176170
onDeleteField={handleDeleteField}
171+
showDatasetOption={isDatasetField}
172+
datasetOptions={datasetOptions}
173+
{...(field.dataset && { selectedDatasetId: field.dataset })}
174+
onDatasetSelect={handleDatasetSelect}
177175
/>
178176
</div>
179177
)}

‎frontend/src/public/components/TemplateEdit/ExtraFields/Radio/ExtraFieldRadio.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { EExtraFieldMode, IExtraFieldSelection } from '../../../../types/templat
1212
import { fitInputWidth } from '../utils/fitInputWidth';
1313
import { PencilSmallIcon, RemoveIcon } from '../../../icons';
1414
import { RadioButton } from '../../../UI/Fields/RadioButton';
15-
import { DatasetSourceToggle } from '../utils/DatasetSourceToggle';
15+
import { OutputFieldContent } from '../utils/OutputFieldContent';
1616

1717
import { IWorkflowExtraFieldProps } from '..';
1818

@@ -32,6 +32,7 @@ export function ExtraFieldRadio({
3232
deleteField,
3333
editField,
3434
isDisabled = false,
35+
datasetName,
3536
}: IWorkflowExtraFieldProps) {
3637
const selectionItems = field.selections as IExtraFieldSelection[];
3738
const selectionValues = field.selections as string[];
@@ -108,10 +109,10 @@ export function ExtraFieldRadio({
108109
</p>
109110
)}
110111

111-
<DatasetSourceToggle field={field} editField={editField} isDisabled={isDisabled}>
112+
<OutputFieldContent field={field} editField={editField} isDisabled={isDisabled} datasetName={datasetName}>
112113
{customOptionsList}
113114
{!isDisabled && addOptionButton}
114-
</DatasetSourceToggle>
115+
</OutputFieldContent>
115116
</div>
116117
);
117118
};

‎frontend/src/public/components/TemplateEdit/ExtraFields/Radio/__tests__/ExtraFieldRadio.test.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import * as React from 'react';
33
import { render, screen } from '@testing-library/react';
44

55
import { ExtraFieldRadio } from '../ExtraFieldRadio';
6-
import { DatasetSourceToggle } from '../../utils/DatasetSourceToggle';
6+
import { OutputFieldContent } from '../../utils/OutputFieldContent';
77
import { RadioButton } from '../../../../UI/Fields/RadioButton';
88
import { intlMock } from '../../../../../__stubs__/intlMock';
99
import { EExtraFieldMode } from '../../../../../types/template';
1010

11-
jest.mock('../../utils/DatasetSourceToggle', () => ({
12-
DatasetSourceToggle: jest.fn(({ children }: any) =>
13-
React.createElement('div', { 'data-testid': 'dataset-source-toggle' }, children),
11+
jest.mock('../../utils/OutputFieldContent', () => ({
12+
OutputFieldContent: jest.fn(({ children }: any) =>
13+
React.createElement('div', { 'data-testid': 'output-field-content' }, children),
1414
),
1515
}));
1616

@@ -92,16 +92,16 @@ describe('ExtraFieldRadio', () => {
9292
jest.clearAllMocks();
9393
});
9494

95-
it('Kickoff: renders DatasetSourceToggle as wrapper for options', () => {
95+
it('Kickoff: renders OutputFieldContent as wrapper for options', () => {
9696
render(React.createElement(ExtraFieldRadio as any, baseKickoffProps));
9797

98-
expect(screen.getByTestId('dataset-source-toggle')).toBeInTheDocument();
98+
expect(screen.getByTestId('output-field-content')).toBeInTheDocument();
9999
});
100100

101-
it('Kickoff: passes field, editField, isDisabled to DatasetSourceToggle', () => {
101+
it('Kickoff: passes field, editField, isDisabled to OutputFieldContent', () => {
102102
render(React.createElement(ExtraFieldRadio as any, baseKickoffProps));
103103

104-
const mock = DatasetSourceToggle as jest.Mock;
104+
const mock = OutputFieldContent as jest.Mock;
105105
expect(mock).toHaveBeenCalledTimes(1);
106106
expect(mock).toHaveBeenCalledWith(
107107
expect.objectContaining({

‎frontend/src/public/components/TemplateEdit/ExtraFields/__tests__/ExtraField.test.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@ import { ExtraFieldIntl } from '../index';
77
import { ExtraFieldDropdown } from '../utils/ExtraFieldDropdown';
88
import { EExtraFieldMode, EExtraFieldType } from '../../../../types/template';
99

10+
jest.mock('react-redux', () => ({
11+
useSelector: jest.fn((selector) => {
12+
const mockState = {
13+
datasets: {
14+
allDatasetsList: [],
15+
isAllDatasetsLoading: false,
16+
isAllDatasetsLoaded: false,
17+
},
18+
};
19+
20+
return selector(mockState);
21+
}),
22+
useDispatch: jest.fn(() => jest.fn()),
23+
}));
24+
1025
jest.mock('../utils/ExtraFieldDropdown', () => ({
1126
ExtraFieldDropdown: jest.fn(() => null),
1227
}));

‎frontend/src/public/components/TemplateEdit/ExtraFields/constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { EExtraFieldType } from '../../../types/template';
2+
3+
export const DATASET_FIELD_TYPES = [EExtraFieldType.Checkbox, EExtraFieldType.Radio, EExtraFieldType.Creatable];

‎frontend/src/public/components/TemplateEdit/ExtraFields/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
/* eslint-disable */
2-
/* prettier-ignore */
31
export * from './ExtraField';
2+
export type { IWorkflowExtraFieldProps } from './types';

0 commit comments

Comments
 (0)