[DOP-22299] add file name template field (#72)

* [DOP-22299] add file name template field

* [DOP-22299] fix after review

---------

Co-authored-by: Zabilsya <kvcherniko@mts.ru>

Author: Zabilsya

src/app/styles/variables.less

@@ -20,6 +20,7 @@
 @input-bg: #f1f3f5;
 @select-background: #f1f3f5;
 @picker-bg: #f1f3f5;
+@tooltip-bg: #000000;
 
 // custom constants
 @select-transformation-type-width: 180px;

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/components/FileNameTemplateTooltipText/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const FileNameTemplateTooltipText = () => {
+  return (
+    <>
+      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 />
+    </>
+  );
+};

src/entities/file/ui/FileNameTemplate/components/index.ts

@@ -0,0 +1 @@
+export * from './FileNameTemplateTooltipText';

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

@@ -0,0 +1,5 @@
+/** 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 fileNamePlaceholder = '{run_created_at}_{index}.{extension}';

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

@@ -0,0 +1,25 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+import { validateFormFieldByPattern } from '@shared/utils';
+
+import { FILE_NAME_TEMPLATE_REGEXP, fileNamePlaceholder } from './constants';
+import { FileNameTemplateTooltipText } from './components';
+
+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} />
     </>