[DOP-33475] Добавить компонент для работы с SQL (#166)

Author: srj-mx-a11y

package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query": "5.90.21",
     "@tanstack/react-query-devtools": "5.91.3",
     "@xyflow/react": "12.10.1",
+    "ace-builds": "1.43.6",
     "antd": "4.24.16",
     "axios": "1.13.6",
     "clsx": "2.1.1",
@@ -32,6 +33,7 @@
     "i18next": "24.2.3",
     "rc-picker": "4.11.3",
     "react": "18.3.1",
+    "react-ace": "14.0.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.1.2",
     "react-i18next": "15.7.4",

src/app/styles/variables.less

@@ -18,6 +18,7 @@
 @typography-title-margin-bottom: 0;
 
 @input-bg: #f1f3f5;
+@input-border: 1px solid #d9d9d9;
 @select-background: #f1f3f5;
 @picker-bg: #f1f3f5;
 @tooltip-bg: #000000;

src/entities/transformation/constants.ts

@@ -21,6 +21,7 @@ export const TRANSFORMATIONS_FORM_DEFAULT_VALUE: TransformationsForm = {
   [TransformationType.FILTER_FILE]: [],
   [TransformationType.FILTER_ROWS]: [],
   [TransformationType.FILTER_COLUMNS]: [],
+  [TransformationType.FILTER_SQL]: [],
 };
 
 export const TRANSFORMATIONS_REQUEST_DEFAULT_VALUE: Transformations = [
@@ -71,6 +72,8 @@ const FILE_TRANSFORMATION_TYPES = Object.values(TransformationType);
 
 const DB_TRANSFORMATION_TYPES = FILE_TRANSFORMATION_TYPES.filter((type) => type !== TransformationType.FILTER_FILE);
 
+export const DEFAULT_TRANSFORMATION_TYPES = DB_TRANSFORMATION_TYPES;
+
 export const CONNECTION_TYPE_SUPPORT_TRANSFORMATION_TYPES: Record<ConnectionType, TransformationType[]> = {
   [ConnectionType.CLICKHOUSE]: DB_TRANSFORMATION_TYPES,
   [ConnectionType.FTP]: FILE_TRANSFORMATION_TYPES,

src/entities/transformation/types.ts

@@ -4,6 +4,7 @@ export enum TransformationType {
   FILTER_ROWS = 'dataframe_rows_filter',
   FILTER_COLUMNS = 'dataframe_columns_filter',
   FILTER_FILE = 'file_metadata_filter',
+  FILTER_SQL = 'sql',
 }
 
 export enum TransformationFilterRowsType {
@@ -107,15 +108,43 @@ export interface TransformationFilterFileForm {
   filters: Array<TransformationFilterFileRegexpItemForm | TransformationFilterFileSizeItemForm>;
 }
 
-export type Transformations = Array<TransformationFilterRows | TransformationFilterColumns | TransformationFilterFile>;
+export enum TransformationFilterSqlDialect {
+  SPARK = 'spark',
+}
+
+export type TransformationFilterSql = {
+  type: TransformationType.FILTER_SQL;
+  dialect: TransformationFilterSqlDialect;
+  query: string;
+};
+
+export type Transformations = Array<
+  TransformationFilterRows | TransformationFilterColumns | TransformationFilterFile | TransformationFilterSql
+>;
+
+export interface TransformationFilterSqlSparkItemForm {
+  dialect: TransformationFilterSqlDialect;
+  query: string;
+}
+
+export type TransformationFormFilterSql = {
+  type: TransformationType.FILTER_SQL;
+  filters: Array<TransformationFilterSqlSparkItemForm>;
+};
 
 export interface TransformationsForm {
   [TransformationType.FILTER_FILE]?: TransformationFilterFileForm['filters'];
   [TransformationType.FILTER_ROWS]?: TransformationFilterRows['filters'];
   [TransformationType.FILTER_COLUMNS]?: TransformationFilterColumns['filters'];
+  [TransformationType.FILTER_SQL]?: TransformationFormFilterSql['filters'];
 }
 
-export type TransformationsFormNestedType<T extends keyof TransformationsForm> =
+export type TransformationsFormWithNestedType =
+  | TransformationType.FILTER_FILE
+  | TransformationType.FILTER_ROWS
+  | TransformationType.FILTER_COLUMNS;
+
+export type TransformationsFormNestedType<T extends TransformationsFormWithNestedType> =
   Required<TransformationsForm>[T][number]['type'];
 
 export interface ShowButtonsContextProps {

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

@@ -1,9 +1,9 @@
 import { Button, Form, FormListFieldData } from 'antd';
-import React, { memo, useLayoutEffect } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useShowButtons } from '../../hooks';
-import { Transformations, TransformationType } from '../../types';
+import { TransformationsForm, TransformationType } from '../../types';
 
 import { TransformationFormItem } from './components';
 import { TransformationFormProps } from './types';
@@ -17,20 +17,24 @@ const TransformationFormComponent = <T extends TransformationType>({
   const { isDisplayed } = useShowButtons();
 
   const formInstance = Form.useFormInstance();
-  const filtersValues: Transformations[number]['filters'] | undefined = formInstance.getFieldValue([
+  const filtersValues: TransformationsForm[T] | undefined = formInstance.getFieldValue([
     'transformations',
     transformationType,
   ]);
+  const isFilterEmpty = !filtersValues?.length;
 
   /** Add at least one element to array form value here,
    * 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(() => {
-    const needFillEmpty = !canHaveEmptyRecordsList && !filtersValues?.length;
+    const needFillEmpty = !canHaveEmptyRecordsList && isFilterEmpty;
     if (needFillEmpty) {
       formInstance.setFieldValue(['transformations', transformationType], [{}]);
     }
-  }, [formInstance, filtersValues, transformationType, canHaveEmptyRecordsList]);
+  }, [formInstance, isFilterEmpty, transformationType, canHaveEmptyRecordsList]);
+
+  const isNeedShowAddNew = (fields: FormListFieldData[]) =>
+    isDisplayed && !(transformationType === TransformationType.FILTER_SQL && fields.length);
 
   const canRemoveItem = ({ name }: FormListFieldData) => (name || canHaveEmptyRecordsList) && isDisplayed;
 
@@ -47,9 +51,11 @@ const TransformationFormComponent = <T extends TransformationType>({
               key={field.key}
             />
           ))}
-          <Button className="nodrag" size="large" type="primary" onClick={() => add()} hidden={!isDisplayed}>
-            {t('add')}
-          </Button>
+          {isNeedShowAddNew(fields) && (
+            <Button className="nodrag" size="large" type="primary" onClick={() => add()}>
+              {t('add')}
+            </Button>
+          )}
         </div>
       )}
     </Form.List>

src/entities/transformation/ui/TransformationForm/components/FilterComponent/index.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
-import { TransformationsFormNestedType, TransformationType } from '@entities/transformation';
+import {
+  TransformationsFormNestedType,
+  TransformationsFormWithNestedType,
+  TransformationType,
+} from '@entities/transformation';
 
 import { FilterColumnsValue } from '../FilterColumnsValue';
 import { FilterFileValue } from '../FilterFileValue';
 import { FilterRowsValue } from '../FilterRowsValue';
 
 import { FilterComponentProps } from './types';
 
-export const FilterComponent = <T extends TransformationType>({
+export const FilterComponent = <T extends TransformationsFormWithNestedType>({
   transformationType,
   nestedType,
   name,

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

@@ -1,6 +1,6 @@
-import { TransformationsFormNestedType, TransformationType } from '@entities/transformation';
+import { TransformationsFormNestedType, TransformationsFormWithNestedType } from '@entities/transformation';
 
-export interface FilterComponentProps<T extends TransformationType> {
+export interface FilterComponentProps<T extends TransformationsFormWithNestedType> {
   name: number;
   transformationType: T;
   nestedType?: TransformationsFormNestedType<T>;

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

@@ -0,0 +1,25 @@
+import { AceSqlEditor } from '@shared/ui/AceSqlEditor';
+import { getCountLines } from '@shared/utils';
+
+import { FilterSqlProps } from './types';
+import { FONT_SIZE, LINE_HEIGHT, WIDTH } from './constants';
+import * as classes from './styles.module.less';
+
+export const FilterSql = ({ autoHeightMaxLineCount, value, onChange }: FilterSqlProps) => {
+  /** Calc the number of lines in the SQL expression to set the height of the editor */
+  const linesCount = Math.max(1, getCountLines(value as string));
+  const heightLinesCount = autoHeightMaxLineCount ? Math.min(linesCount, autoHeightMaxLineCount) : linesCount;
+
+  return (
+    <AceSqlEditor
+      className={classes.root}
+      tabSize={2}
+      fontSize={`${FONT_SIZE}em`}
+      width={WIDTH}
+      height={`${heightLinesCount * LINE_HEIGHT + 2}px`}
+      lineHeight={`${LINE_HEIGHT}px`}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};

src/entities/transformation/ui/TransformationForm/components/FilterSql/components/FilterSqlTooltip/constants.ts

@@ -0,0 +1,3 @@
+export const SPARK_SQL_QUERY_SELECT_DOCS_URL = 'https://spark.apache.org/docs/latest/sql-ref-syntax-qry-select.html';
+
+export const SPARK_SQL_API_DOCS_URL = 'https://spark.apache.org/docs/latest/api/sql';

src/entities/transformation/ui/TransformationForm/components/FilterSql/components/FilterSqlTooltip/index.tsx

@@ -0,0 +1,18 @@
+import { Typography } from 'antd';
+import { Trans } from 'react-i18next';
+
+import { SPARK_SQL_API_DOCS_URL, SPARK_SQL_QUERY_SELECT_DOCS_URL } from './constants';
+const { Link } = Typography;
+
+export const FilterSqlTooltip = () => {
+  return (
+    <Trans
+      ns="transformation"
+      i18nKey="filterSqlTooltip"
+      components={{
+        SparkSqlQuerySelectDocs: <Link href={SPARK_SQL_QUERY_SELECT_DOCS_URL} target="_blank" rel="noreferrer" />,
+        SparkSqlApiDocs: <Link href={SPARK_SQL_API_DOCS_URL} target="_blank" rel="noreferrer" />,
+      }}
+    />
+  );
+};