[DOP-30115] add advanced parameters changes to normal transfer editing

src/entities/transformation/ui/TransformationForm/TransformationForm.tsx

@@ -1,4 +1,4 @@
-import { Button, Form } from 'antd';
+import { Button, Form, FormListFieldData } from 'antd';
 import React, { memo, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,6 +10,7 @@ import { TransformationFormProps } from './types';
 
 const TransformationFormComponent = <T extends TransformationType>({
   transformationType,
+  canHaveEmptyRecordsList,
   ...props
 }: TransformationFormProps<T>) => {
   const { t } = useTranslation();
@@ -25,10 +26,13 @@ const TransformationFormComponent = <T extends TransformationType>({
    * because it is inconvenient to check for the presence of a default value of this array,
    * when forming a request to backend or initial form values */
   useLayoutEffect(() => {
-    if (!filtersValues || !filtersValues.length) {
+    const needFillEmpty = !canHaveEmptyRecordsList && !filtersValues?.length;
+    if (needFillEmpty) {
       formInstance.setFieldValue(['transformations', transformationType], [{}]);
     }
-  }, [formInstance, filtersValues, transformationType]);
+  }, [formInstance, filtersValues, transformationType, canHaveEmptyRecordsList]);
+
+  const canRemoveItem = ({ name }: FormListFieldData) => (name || canHaveEmptyRecordsList) && isDisplayed;
 
   return (
     <Form.List name={['transformations', transformationType]}>
@@ -39,7 +43,7 @@ const TransformationFormComponent = <T extends TransformationType>({
               {...field}
               {...props}
               transformationType={transformationType}
-              onRemove={field.name && isDisplayed ? remove : undefined}
+              onRemove={canRemoveItem(field) ? remove : undefined}
               key={field.key}
             />
           ))}

src/entities/transformation/ui/TransformationForm/types.ts

@@ -3,4 +3,10 @@ import { TransformationType } from '@entities/transformation';
 import { TransformationFormItemProps } from './components';
 
 export interface TransformationFormProps<T extends TransformationType>
-  extends Pick<TransformationFormItemProps<T>, 'transformationType' | 'nestedTypeSelectLabel' | 'hasColumnField'> {}
+  extends Pick<TransformationFormItemProps<T>, 'transformationType' | 'nestedTypeSelectLabel' | 'hasColumnField'> {
+  /** Can have empty records list */
+  canHaveEmptyRecordsList?: boolean;
+}
+
+export interface FilterFormItemProps<T extends TransformationType>
+  extends Pick<TransformationFormProps<T>, 'canHaveEmptyRecordsList'> {}

src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/FilterColumnsFormItem.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { FilterFormItemProps, TransformationForm, TransformationType } from '@entities/transformation';
+import { useTranslation } from 'react-i18next';
+
+export const FilterColumnsFormItem = memo(
+  <T extends TransformationType>({ canHaveEmptyRecordsList }: FilterFormItemProps<T>) => {
+    const { t } = useTranslation('transformation');
+
+    return (
+      <TransformationForm
+        transformationType={TransformationType.FILTER_COLUMNS}
+        nestedTypeSelectLabel={t('type', { ns: 'shared' })}
+        canHaveEmptyRecordsList={canHaveEmptyRecordsList}
+        hasColumnField
+      />
+    );
+  },
+);

src/features/transfer/MutateTransferForm/components/FilterColumnsFormItem/index.ts

@@ -0,0 +1 @@
+export * from './FilterColumnsFormItem';

src/features/transfer/MutateTransferForm/components/FilterColumnsNode/FilterColumnsNode.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { CanvasNode } from '@shared/ui';
 import { Handle, Position } from '@xyflow/react';
 import { FilterOutlined } from '@ant-design/icons';
-import { TransformationForm, TransformationType } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import {
   TransferCanvasEdge,
   TransferCanvasTransformNodeType,
   TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY,
 } from '../TransferConnectionsCanvas';
+import { FilterColumnsFormItem } from '../FilterColumnsFormItem';
 
 import classes from './styles.module.less';
 
@@ -24,15 +24,11 @@ export const FilterColumnsNode = () => {
     return (
       <>
         <Handle type="target" position={Position.Left} id={TransferCanvasEdge.FILTER_COLUMNS_TARGET} />
-        <TransformationForm
-          transformationType={TransformationType.FILTER_COLUMNS}
-          nestedTypeSelectLabel={t('type', { ns: 'shared' })}
-          hasColumnField
-        />
+        <FilterColumnsFormItem />
         <Handle type="source" position={Position.Right} id={TransferCanvasEdge.FILTER_COLUMNS_SOURCE} />
       </>
     );
-  }, [t]);
+  }, []);
 
   return (
     <CanvasNode

src/features/transfer/MutateTransferForm/components/FilterFileFormItem/FilterFileFormItem.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import { FilterFormItemProps, TransformationForm, TransformationType } from '@entities/transformation';
+import { useTranslation } from 'react-i18next';
+
+export const FilterFileFormItem = memo(
+  <T extends TransformationType>({ canHaveEmptyRecordsList }: FilterFormItemProps<T>) => {
+    const { t } = useTranslation('transformation');
+
+    return (
+      <TransformationForm
+        transformationType={TransformationType.FILTER_FILE}
+        nestedTypeSelectLabel={t('type', { ns: 'shared' })}
+        canHaveEmptyRecordsList={canHaveEmptyRecordsList}
+      />
+    );
+  },
+);

src/features/transfer/MutateTransferForm/components/FilterFileFormItem/index.ts

@@ -0,0 +1 @@
+export * from './FilterFileFormItem';

src/features/transfer/MutateTransferForm/components/FilterFileNode/FilterFileNode.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { CanvasNode } from '@shared/ui';
 import { Handle, Position } from '@xyflow/react';
 import { FilterOutlined } from '@ant-design/icons';
-import { TransformationForm, TransformationType } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import {
   TransferCanvasEdge,
   TransferCanvasTransformNodeType,
   TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY,
 } from '../TransferConnectionsCanvas';
+import { FilterFileFormItem } from '../FilterFileFormItem';
 
 import classes from './styles.module.less';
 
@@ -24,14 +24,11 @@ export const FilterFileNode = () => {
     return (
       <>
         <Handle type="target" position={Position.Left} id={TransferCanvasEdge.FILTER_FILE_TARGET} />
-        <TransformationForm
-          transformationType={TransformationType.FILTER_FILE}
-          nestedTypeSelectLabel={t('type', { ns: 'shared' })}
-        />
+        <FilterFileFormItem />
         <Handle type="source" position={Position.Right} id={TransferCanvasEdge.FILTER_FILE_SOURCE} />
       </>
     );
-  }, [t]);
+  }, []);
 
   return (
     <CanvasNode

src/features/transfer/MutateTransferForm/components/FilterRowsFormItem/FilterRowsFormItem.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { FilterFormItemProps, TransformationForm, TransformationType } from '@entities/transformation';
+import { useTranslation } from 'react-i18next';
+
+export const FilterRowsFormItem = memo(
+  <T extends TransformationType>({ canHaveEmptyRecordsList }: FilterFormItemProps<T>) => {
+    const { t } = useTranslation('transformation');
+
+    return (
+      <TransformationForm
+        transformationType={TransformationType.FILTER_ROWS}
+        nestedTypeSelectLabel={t('operator')}
+        canHaveEmptyRecordsList={canHaveEmptyRecordsList}
+        hasColumnField
+      />
+    );
+  },
+);

src/features/transfer/MutateTransferForm/components/FilterRowsFormItem/index.ts

@@ -0,0 +1 @@
+export * from './FilterRowsFormItem';

src/features/transfer/MutateTransferForm/components/FilterRowsNode/FilterRowsNode.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { CanvasNode } from '@shared/ui';
 import { Handle, Position } from '@xyflow/react';
 import { FilterOutlined } from '@ant-design/icons';
-import { TransformationForm, TransformationType } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import {
   TransferCanvasEdge,
   TransferCanvasTransformNodeType,
   TRANSFER_CANVAS_TRANSFORM_NODE_TYPE_NAME_DISPLAY,
 } from '../TransferConnectionsCanvas';
+import { FilterRowsFormItem } from '../FilterRowsFormItem';
 
 import classes from './styles.module.less';
 
@@ -24,15 +24,11 @@ export const FilterRowsNode = () => {
     return (
       <>
         <Handle type="target" position={Position.Left} id={TransferCanvasEdge.FILTER_ROWS_TARGET} />
-        <TransformationForm
-          transformationType={TransformationType.FILTER_ROWS}
-          nestedTypeSelectLabel={t('operator')}
-          hasColumnField
-        />
+        <FilterRowsFormItem />
         <Handle type="source" position={Position.Right} id={TransferCanvasEdge.FILTER_ROWS_SOURCE} />
       </>
     );
-  }, [t]);
+  }, []);
 
   return (
     <CanvasNode

src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/constants.tsx

@@ -0,0 +1,23 @@
+import { TransformationType } from '@entities/transformation';
+import React from 'react';
+
+import { FilterColumnsFormItem } from '../FilterColumnsFormItem';
+import { FilterFileFormItem } from '../FilterFileFormItem';
+import { FilterRowsFormItem } from '../FilterRowsFormItem';
+
+import { FilterTypeConfig } from './types';
+
+export const FILTER_TYPES_CONFIG: Record<TransformationType, FilterTypeConfig> = {
+  [TransformationType.FILTER_ROWS]: {
+    title: 'filterRows',
+    filter: <FilterRowsFormItem canHaveEmptyRecordsList />,
+  },
+  [TransformationType.FILTER_COLUMNS]: {
+    title: 'filterColumns',
+    filter: <FilterColumnsFormItem canHaveEmptyRecordsList />,
+  },
+  [TransformationType.FILTER_FILE]: {
+    title: 'filterFile',
+    filter: <FilterFileFormItem canHaveEmptyRecordsList />,
+  },
+} as const;

src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/index.tsx

@@ -1,20 +1,32 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Fieldset } from '@shared/ui';
 import { useTranslation } from 'react-i18next';
 
 import { SourceParams } from '../SourceParams';
 import { TargetParams } from '../TargetParams';
 
 import { TransferConnectionsDefaultProps } from './types';
+import { FILTER_TYPES_CONFIG } from './constants';
 
 export const TransferConnectionsDefault = ({ groupId }: TransferConnectionsDefaultProps) => {
   const { t } = useTranslation('connection');
 
+  const filters = useMemo(
+    () =>
+      Object.entries(FILTER_TYPES_CONFIG).map(([key, { title, filter }]) => (
+        <Fieldset key={key} title={t(title, { ns: 'transformation' })}>
+          {filter}
+        </Fieldset>
+      )),
+    [t],
+  );
+
   return (
     <>
       <Fieldset title={t('sourceConnection')}>
         <SourceParams groupId={groupId} />
       </Fieldset>
+      {filters}
       <Fieldset title={t('targetConnection')}>
         <TargetParams groupId={groupId} />
       </Fieldset>

src/features/transfer/MutateTransferForm/components/TransferConnectionsDefault/types.ts

@@ -2,3 +2,10 @@ import { SourceParamsProps } from '../SourceParams';
 import { TargetParamsProps } from '../TargetParams';
 
 export interface TransferConnectionsDefaultProps extends SourceParamsProps, TargetParamsProps {}
+
+type TitleType = 'filterRows' | 'filterColumns' | 'filterFile';
+
+export interface FilterTypeConfig {
+  title: TitleType;
+  filter: React.JSX.Element;
+}