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

Author: sa gorelov

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 canCanRemoveItem = ({ 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={canCanRemoveItem(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';