[DOP-22361] add filter rows transformation (#69)

* [DOP-22361] add filter rows transformation

* [DOP-22361] fix after review

---------

Co-authored-by: Zabilsya <[email protected]>

Author: Zabilsya

src/entities/file/ui/FileFormatParams/components/FileCompression/index.tsx

@@ -42,7 +42,9 @@ export const FileCompression = <T,>({ name, options }: FileCompressionProps<T>)
       </div>
       <Form.Item className={classes.formItem} name={fieldName}>
         <Select
+          /** className "nodrag" and "nowheel" for select in custom node React Flow https://reactflow.dev/api-reference/react-flow#no-drag-class-name */
           className={selectClassNames}
+          popupClassName="nowheel"
           size="large"
           options={options}
           placeholder="Select compression"

src/entities/file/ui/FileFormatParams/index.tsx

@@ -18,7 +18,9 @@ export const FileFormatParams = ({ name }: FileFormatParamsProps) => {
     <>
       <Form.Item label="File format" name={[name, 'file_format', 'type']} rules={[{ required: true }]}>
         <Select
+          /** 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"
           options={name === 'source_params' ? SOURCE_FILE_FORMAT_SELECT_OPTIONS : TARGET_FILE_FORMAT_SELECT_OPTIONS}
           placeholder="Select file format"

src/entities/transfer/api/types.ts

@@ -1,4 +1,5 @@
 import { FileFormat, Json } from '@entities/file/@x/transfer';
+import { Transformations } from '@entities/transformation/@x/transfer';
 import { ConnectionType, PaginationRequest } from '@shared/types';
 
 export interface Transfer {
@@ -30,6 +31,7 @@ export interface Transfer {
   strategy_params: TransferStrategyParams;
   is_scheduled: boolean;
   schedule: string;
+  transformations: Transformations;
 }
 
 export type TransferConnectionParamFieldName = 'source_params' | 'target_params';

src/entities/transformation/@x/transfer.ts

@@ -0,0 +1,2 @@
+/** Cross-import entities using public API in FSD https://feature-sliced.design/ru/docs/reference/public-api#public-api-for-cross-imports */
+export type { Transformations } from '../types';

src/entities/transformation/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './utils';
+export * from './ui';

src/entities/transformation/types.ts

@@ -0,0 +1,47 @@
+export enum TransformationType {
+  ROWS_FILTER = 'dataframe_rows_filter',
+}
+
+export enum TransformationRowsFilterType {
+  IS_NULL = 'is_null',
+  IS_NOT_NULL = 'is_not_null',
+  EQUAL = 'equal',
+  NOT_EQUAL = 'not_equal',
+  GREATER_THAN = 'greater_than',
+  GREATER_OR_EQUAL = 'greater_or_equal',
+  LESS_THAN = 'less_than',
+  LESS_OR_EQUAL = 'less_or_equal',
+  LIKE = 'like',
+  ILIKE = 'ilike',
+  NOT_LIKE = 'not_like',
+  NOT_ILIKE = 'not_ilike',
+  REGEXP = 'regexp',
+}
+
+interface TransformationRowsFilterNullable {
+  type: Extract<
+    TransformationRowsFilterType,
+    TransformationRowsFilterType.IS_NULL | TransformationRowsFilterType.IS_NOT_NULL
+  >;
+  field: string;
+}
+
+interface TransformationRowsFilterDefault {
+  type: Exclude<
+    TransformationRowsFilterType,
+    TransformationRowsFilterType.IS_NULL | TransformationRowsFilterType.IS_NOT_NULL
+  >;
+  field: string;
+  value: string;
+}
+
+export interface TransformationRowsFilter {
+  type: TransformationType.ROWS_FILTER;
+  filters: Array<TransformationRowsFilterNullable | TransformationRowsFilterDefault>;
+}
+
+export type Transformations = Array<TransformationRowsFilter>;
+
+export interface TransformationsForm {
+  [TransformationType.ROWS_FILTER]?: TransformationRowsFilter['filters'];
+}

src/entities/transformation/ui/FilterRows/components/FilterRowsItem/constants.ts

@@ -0,0 +1,9 @@
+import { prepareOptionsForSelect } from '@shared/ui';
+
+import { TransformationRowsFilterType } from '../../../../types';
+
+export const FILTER_ROWS_TYPE_SELECT_OPTIONS = prepareOptionsForSelect({
+  data: Object.values(TransformationRowsFilterType),
+  renderLabel: (data) => data.replaceAll('_', ' '),
+  renderValue: (data) => data,
+});

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

@@ -0,0 +1,61 @@
+import { Button, Form, Input } from 'antd';
+import React, { useMemo, useState } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Select } from '@shared/ui';
+
+import { TransformationRowsFilter, TransformationRowsFilterType, TransformationType } from '../../../../types';
+import { FilterRowsValue } from '../FilterRowsValue';
+
+import { FilterRowsItemProps } from './types';
+import classes from './styles.module.less';
+import { FILTER_ROWS_TYPE_SELECT_OPTIONS } from './constants';
+
+export const FilterRowsItem = ({ onRemove, name }: FilterRowsItemProps) => {
+  const formInstance = Form.useFormInstance();
+
+  const initialType = useMemo(() => {
+    const filterRowsItems: TransformationRowsFilter['filters'][0] | undefined = formInstance.getFieldValue([
+      'transformations',
+      TransformationType.ROWS_FILTER,
+      name,
+    ]);
+
+    return filterRowsItems?.type;
+  }, [formInstance, name]);
+
+  /** Use custom type state, because Form.useWatch doesn't support dynamic fieldname like in Form.List */
+  const [type, setType] = useState(() => initialType);
+
+  const handleChangeType = (newType: TransformationRowsFilterType) => {
+    setType(newType);
+  };
+
+  const handleRemove = () => {
+    onRemove?.(name);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Form.Item className={classes.column} label="Column" name={[name, 'field']} rules={[{ required: true }]}>
+        <Input className="nodrag" size="large" />
+      </Form.Item>
+      <Form.Item className={classes.type} label="Operator" name={[name, 'type']} rules={[{ required: true }]}>
+        <Select
+          /** 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"
+          options={FILTER_ROWS_TYPE_SELECT_OPTIONS}
+          onChange={handleChangeType}
+          placeholder="Select type"
+        />
+      </Form.Item>
+      <FilterRowsValue name={name} type={type} />
+      {onRemove && (
+        <Button className="nodrag" type="primary" danger onClick={handleRemove}>
+          <DeleteOutlined />
+        </Button>
+      )}
+    </div>
+  );
+};

src/entities/transformation/ui/FilterRows/components/FilterRowsItem/styles.module.less

@@ -0,0 +1,14 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .column {
+    min-width: 300px;
+  }
+
+  .type {
+    min-width: 180px;
+    flex-grow: 1;
+  }
+}

src/entities/transformation/ui/FilterRows/components/FilterRowsItem/types.ts

@@ -0,0 +1,5 @@
+import { FormListFieldData, FormListOperation } from 'antd';
+
+export interface FilterRowsItemProps extends FormListFieldData {
+  onRemove?: FormListOperation['remove'];
+}