[DOP-22361] add filter rows transformation

Author: Zabilsya

src/entities/transformation/ui/FilterRows/components/FilterRowsItem/index.tsx

@@ -20,10 +20,7 @@ export const FilterRowsItem = ({ onRemove, name }: FilterRowsItemProps) => {
       name,
     ]);
 
-    if (!filterRowsItems) {
-      return undefined;
-    }
-    return filterRowsItems.type;
+    return filterRowsItems?.type;
   }, [formInstance, name]);
 
   /** Use custom type state, because Form.useWatch doesn't support dynamic fieldname like in Form.List */

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

@@ -17,9 +17,9 @@ export const FilterRowsNode = ({}: FilterRowsNodeProps) => {
   const children = useMemo(() => {
     return (
       <>
-        <Handle type="target" position={Position.Left} id={TransferCanvasEdge.FILTER_ROWS_TARGET} />
+        <Handle type="target" position={Position.Left} id={TransferCanvasEdge.ROWS_FILTER_TARGET} />
         <FilterRows />
-        <Handle type="source" position={Position.Right} id={TransferCanvasEdge.FILTER_ROWS_SOURCE} />
+        <Handle type="source" position={Position.Right} id={TransferCanvasEdge.ROWS_FILTER_SOURCE} />
       </>
     );
   }, []);

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

@@ -3,6 +3,6 @@ import { Node, NodeProps } from '@xyflow/react';
 import { TransferCanvasTransformNodeType } from '../TransferConnectionsCanvas';
 
 export interface FilterRowsNodeData
-  extends Node<Record<string, unknown>, TransferCanvasTransformNodeType.FILTER_ROWS> {}
+  extends Node<Record<string, unknown>, TransferCanvasTransformNodeType.ROWS_FILTER> {}
 
 export interface FilterRowsNodeProps extends NodeProps<FilterRowsNodeData> {}

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

@@ -17,7 +17,7 @@ export const SourceParams = memo(({ groupId }: SourceParamsProps) => {
     <>
       <Form.Item label="Connection" name="source_connection_id" rules={[{ required: true }]}>
         <ManagedSelect
-          /** className "nodrag" for opening dropdown in select in custom node React Flow https://github.com/xyflow/xyflow/discussions/2694 */
+          /** className "nodrag" and "nowheel" for select in custom node React Flow https://reactflow.dev/api-reference/react-flow#no-drag-class-name */
           className="nodrag"
           popupClassName="nowheel"
           size="large"

src/features/transfer/MutateTransferForm/components/TransferConnections/utils/getTabsItems/getTabsItems.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Fieldset } from '@shared/ui';
 
 import { TransferConnectionsDefault } from '../../../TransferConnectionsDefault';
 import { TransferConnectionsCanvas } from '../../../TransferConnectionsCanvas';
@@ -15,6 +16,10 @@ export const getTabsItems = (props: GetTabsItemsProps) => [
   {
     label: 'Advanced',
     key: TransferConnectionsTab.ADVANCED,
-    children: <TransferConnectionsCanvas {...props} />,
+    children: (
+      <Fieldset title="Connections settings">
+        <TransferConnectionsCanvas {...props} />
+      </Fieldset>
+    ),
   },
 ];

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Canvas, Fieldset } from '@shared/ui';
+import { Canvas } from '@shared/ui';
 import { ReactFlowProvider, useEdgesState, useNodesState } from '@xyflow/react';
 import { Form } from 'antd';
 import { TransformationsForm, TransformationType } from '@entities/transformation';
@@ -32,19 +32,17 @@ export const TransferConnectionsCanvas = (props: TransferCanvasProps) => {
 
   return (
     <ReactFlowProvider>
-      <Fieldset title="Connections settings">
-        <div className={classes.root}>
-          <Canvas
-            nodeTypes={NODE_TYPES}
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-          >
-            <TransformButtons />
-          </Canvas>
-        </div>
-      </Fieldset>
+      <div className={classes.root}>
+        <Canvas
+          nodeTypes={NODE_TYPES}
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+        >
+          <TransformButtons />
+        </Canvas>
+      </div>
     </ReactFlowProvider>
   );
 };

src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/constants.ts

@@ -9,7 +9,7 @@ import { TransferCanvasDefaultNodeType, TransferCanvasTransformNodeType } from '
 export const NODE_TYPES: NodeTypes = {
   [TransferCanvasDefaultNodeType.SOURCE]: SourceParamsNode,
   [TransferCanvasDefaultNodeType.TARGET]: TargetParamsNode,
-  [TransferCanvasTransformNodeType.FILTER_ROWS]: FilterRowsNode,
+  [TransferCanvasTransformNodeType.ROWS_FILTER]: FilterRowsNode,
 };
 
 export const NODE_POSITION_X_GAP_DEFAULT = 500;

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

@@ -14,12 +14,16 @@ export enum TransferCanvasDefaultNodeType {
 }
 
 export enum TransferCanvasTransformNodeType {
-  FILTER_ROWS = 'FILTER_ROWS',
+  ROWS_FILTER = 'ROWS_FILTER',
 }
 
+export const TransferCanvasTransformNodeTypeName = {
+  [TransferCanvasTransformNodeType.ROWS_FILTER]: 'Filter rows',
+} as const;
+
 export enum TransferCanvasEdge {
   SOURCE = 'SOURCE',
   TARGET = 'TARGET',
-  FILTER_ROWS_SOURCE = 'FILTER_ROWS_SOURCE',
-  FILTER_ROWS_TARGET = 'FILTER_ROWS_TARGET',
+  ROWS_FILTER_SOURCE = 'ROWS_FILTER_SOURCE',
+  ROWS_FILTER_TARGET = 'ROWS_FILTER_TARGET',
 }

src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/utils/getInitialNodes/getInitialNodes.ts

@@ -17,8 +17,8 @@ export const getInitialNodes = ({ groupId, hasFilterRows }: GetInitialNodesProps
 
   if (hasFilterRows) {
     nodes.push({
-      id: TransferCanvasTransformNodeType.FILTER_ROWS,
-      type: TransferCanvasTransformNodeType.FILTER_ROWS,
+      id: TransferCanvasTransformNodeType.ROWS_FILTER,
+      type: TransferCanvasTransformNodeType.ROWS_FILTER,
       data: {},
       position: getNodePosition(nodeIndex),
     });

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

@@ -1,28 +1,58 @@
-import React, { memo } from 'react';
-import { Button, Typography } from 'antd';
+import React, { memo, useState } from 'react';
+import { Typography } from 'antd';
+import { useModalState } from '@shared/hooks';
+import { ModalWrapper } from '@shared/ui';
+import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants';
 
-import { TransferCanvasTransformNodeType } from '../TransferConnectionsCanvas';
+import { TransferCanvasTransformNodeType, TransferCanvasTransformNodeTypeName } from '../TransferConnectionsCanvas';
 
-import classes from './styles.module.less';
 import { useHandleNodes } from './hooks';
+import { DeleteNode, TransformButtonItem } from './components';
+import classes from './styles.module.less';
 
 const { Text } = Typography;
 
 export const TransformButtons = memo(() => {
-  const { transformNodeTypes, handleAddTransformNode } = useHandleNodes();
+  const { transformNodeTypes, handleAddTransformNode, handleDeleteTransformNode } = useHandleNodes();
+
+  const [nodeTypeForDeleting, setNodeTypeForDeleting] = useState<TransferCanvasTransformNodeType | null>(null);
+
+  const { isOpened: isOpenedModal, handleOpen: openModal, handleClose: handleCloseModal } = useModalState();
+
+  const handleOpenDeleteNodeModal = (nodeType: TransferCanvasTransformNodeType) => {
+    setNodeTypeForDeleting(nodeType);
+    openModal();
+  };
+
+  const handleDeleteNode = (nodeType: TransferCanvasTransformNodeType) => {
+    handleDeleteTransformNode(nodeType);
+    handleCloseModal();
+  };
 
   return (
     <div className={classes.root}>
-      <Text strong>You can add some data transforms:</Text>
+      <Text strong>Transform data controls:</Text>
       <div className={classes.buttons}>
-        <Button
-          type="primary"
-          onClick={() => handleAddTransformNode(TransferCanvasTransformNodeType.FILTER_ROWS)}
-          disabled={transformNodeTypes ? transformNodeTypes[TransferCanvasTransformNodeType.FILTER_ROWS] : false}
-        >
-          Filter rows
-        </Button>
+        {Object.values(TransferCanvasTransformNodeType).map((item, index) => (
+          <TransformButtonItem
+            nodeType={item}
+            isExist={transformNodeTypes ? transformNodeTypes[item] : false}
+            onAddNode={handleAddTransformNode}
+            onDeleteNode={handleOpenDeleteNodeModal}
+            key={index}
+          />
+        ))}
       </div>
+      {nodeTypeForDeleting && (
+        <ModalWrapper
+          title={`Delete ${TransferCanvasTransformNodeTypeName[nodeTypeForDeleting]}`}
+          width={DEFAULT_MODAL_DELETE_WIDTH}
+          open={isOpenedModal}
+          onCancel={handleCloseModal}
+        >
+          <DeleteNode nodeType={nodeTypeForDeleting} onConfirm={handleDeleteNode} onCancel={handleCloseModal} />
+        </ModalWrapper>
+      )}
     </div>
   );
 });