[DOP-22299] add file name template field

Author: Zabilsya

src/app/styles/variables.less

@@ -20,3 +20,5 @@
 @input-bg: #f1f3f5;
 @select-background: #f1f3f5;
 @picker-bg: #f1f3f5;
+
+@tooltip-bg: #000000;

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

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

src/entities/file/ui/FileNameTemplate/constants.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/** Regexp to filename template, which must include `{extension}` and `{index}` placeholder (e.g. qwerty_{index}.{extension}) */
+export const FILE_NAME_TEMPLATE_REGEXP =
+  /^(?=.*\{index\})(?=.*\{extension\})([a-zA-Z0-9._\-]*\{(?:index|extension|run_created_at|run_id)\}[a-zA-Z0-9._\-]*)*$/;
+
+export const fileNameTemplateTooltipText = (
+  <>
+    You can use the following placeholders (with brackets {'{}'}): <br />
+    <ul>
+      <li>{`{index}`} - required</li>
+      <li>{`{extension}`} - required</li>
+      <li>{`{run_created_at}`}</li>
+      <li>{`{run_id}`}</li>
+    </ul>
+    And letters, numbers, and symbols &quot;.&quot;, &quot;_&quot;, &quot;-&quot; <br />
+  </>
+);
+
+export const fileNamePlaceholder = '{run_created_at}_{index}.{extension}';

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

@@ -0,0 +1,24 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+import { validateFormFieldByPattern } from '@shared/utils';
+
+import { FILE_NAME_TEMPLATE_REGEXP, fileNamePlaceholder, fileNameTemplateTooltipText } from './constants';
+
+export const FileNameTemplate = () => {
+  return (
+    <Form.Item
+      label="Filename template"
+      normalize={(value) => (value.trim() === '' ? undefined : value)}
+      tooltip={fileNameTemplateTooltipText}
+      name={['target_params', 'file_name_template']}
+      rules={[
+        {
+          pattern: FILE_NAME_TEMPLATE_REGEXP,
+          validator: validateFormFieldByPattern,
+        },
+      ]}
+    >
+      <Input className="nodrag" size="large" placeholder={fileNamePlaceholder} />
+    </Form.Item>
+  );
+};

src/entities/file/ui/index.ts

@@ -1 +1,2 @@
 export * from './FileFormatParams';
+export * from './FileNameTemplate';

src/entities/transfer/api/types.ts

@@ -75,25 +75,27 @@ interface TransferParamsHdfs {
   directory_path: string;
 }
 
-interface TransferSourceParamsHdfs extends TransferParamsHdfs {
+export interface TransferSourceParamsHdfs extends TransferParamsHdfs {
   file_format: FileFormat;
 }
 
-interface TransferTargetParamsHdfs extends TransferParamsHdfs {
+export interface TransferTargetParamsHdfs extends TransferParamsHdfs {
   file_format: Exclude<FileFormat, Json>;
+  file_name_template: string;
 }
 
 interface TransferParamsS3 {
   type: ConnectionType.S3;
   directory_path: string;
 }
 
-interface TransferSourceParamsS3 extends TransferParamsS3 {
+export interface TransferSourceParamsS3 extends TransferParamsS3 {
   file_format: FileFormat;
 }
 
-interface TransferTargetParamsS3 extends TransferParamsS3 {
+export interface TransferTargetParamsS3 extends TransferParamsS3 {
   file_format: Exclude<FileFormat, Json>;
+  file_name_template: string;
 }
 
 export interface GetTransfersRequest extends PaginationRequest {

src/entities/transfer/ui/TransferConnectionHdfs/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Divider, Form, Input } from 'antd';
 import { ABSOLUTE_PATH_REGEXP } from '@shared/constants';
-import { FileFormatParams } from '@entities/file/@x/transfer';
+import { FileFormatParams, FileNameTemplate } from '@entities/file/@x/transfer';
 
 import { TransferConnectionHdfsProps } from './types';
 
@@ -15,6 +15,7 @@ export const TransferConnectionHdfs = ({ name }: TransferConnectionHdfsProps) =>
       >
         <Input className="nodrag" size="large" />
       </Form.Item>
+      {name === 'target_params' && <FileNameTemplate />}
       <Divider>File format settings</Divider>
       <FileFormatParams name={name} />
     </>

src/entities/transfer/ui/TransferConnectionS3/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Divider, Form, Input } from 'antd';
 import { ABSOLUTE_PATH_REGEXP } from '@shared/constants';
-import { FileFormatParams } from '@entities/file/@x/transfer';
+import { FileFormatParams, FileNameTemplate } from '@entities/file/@x/transfer';
 
 import { TransferConnectionS3Props } from './types';
 
@@ -15,6 +15,7 @@ export const TransferConnectionS3 = ({ name }: TransferConnectionS3Props) => {
       >
         <Input className="nodrag" size="large" />
       </Form.Item>
+      {name === 'target_params' && <FileNameTemplate />}
       <Divider>File format settings</Divider>
       <FileFormatParams name={name} />
     </>

src/features/transfer/TransferDetailInfo/components/TransferParams/utils/getDescriptionItems/index.tsx

@@ -1,25 +1,37 @@
 import React from 'react';
 import { ConnectionType, DescriptionItem } from '@shared/types';
+import { Transfer } from '@entities/transfer';
 
 import { TransferFileFormatData } from '../../../TransferFileFormatData';
+import { isTargetParamsFileConnectionType } from '../isTargetParamsFileConnectionType';
 
 import { GetDescriptionItemsProps } from './types';
 
 /** Util for mapping data for Description component depends on connection type */
-export const getDescriptionItems = ({ data }: GetDescriptionItemsProps): DescriptionItem[] => {
+export const getDescriptionItems = <T extends Transfer['source_params'] | Transfer['target_params']>({
+  data,
+}: GetDescriptionItemsProps<T>): DescriptionItem[] => {
   switch (data.type) {
     case ConnectionType.HDFS:
     case ConnectionType.S3:
-      return [
+      const items: DescriptionItem[] = [
         {
           label: 'Directory path',
           content: data.directory_path,
         },
-        {
-          label: 'File format',
-          content: <TransferFileFormatData data={data.file_format} />,
-        },
       ];
+      if (isTargetParamsFileConnectionType(data)) {
+        items.push({
+          label: 'Filename template',
+          content: data.file_name_template,
+        });
+      }
+      items.push({
+        label: 'File format',
+        content: <TransferFileFormatData data={data.file_format} />,
+      });
+
+      return items;
     case ConnectionType.HIVE:
     case ConnectionType.ORACLE:
     case ConnectionType.POSTGRES:

src/features/transfer/TransferDetailInfo/components/TransferParams/utils/getDescriptionItems/types.ts

@@ -1,5 +1,3 @@
-import { Transfer } from '@entities/transfer';
-
-export interface GetDescriptionItemsProps {
-  data: Transfer['source_params'];
+export interface GetDescriptionItemsProps<T> {
+  data: T;
 }