[DOP-22300] add increment_by field

src/entities/connection/ui/ConnectionTypeForm/components/ConnectionAuthBasic/index.tsx

@@ -8,7 +8,9 @@ export const ConnectionAuthBasic = () => {
 
   return (
     <>
-      <Form.Item name={['auth_data', 'type']} hidden />
+      <Form.Item name={['auth_data', 'type']} hidden>
+        <Input size="large" />
+      </Form.Item>
       <Form.Item label="User" name={['auth_data', 'user']} rules={[{ required: true }]}>
         <Input size="large" />
       </Form.Item>

src/entities/connection/ui/ConnectionTypeForm/components/ConnectionAuthS3/index.tsx

@@ -8,7 +8,9 @@ export const ConnectionAuthS3 = () => {
 
   return (
     <>
-      <Form.Item name={['auth_data', 'type']} hidden />
+      <Form.Item name={['auth_data', 'type']} hidden>
+        <Input size="large" />
+      </Form.Item>
       <Form.Item label="Access key" name={['auth_data', 'access_key']} rules={[{ required: true }]}>
         <Input size="large" />
       </Form.Item>

src/entities/connection/ui/ConnectionTypeForm/components/ConnectionOracle/index.tsx

@@ -11,15 +11,18 @@ export const ConnectionOracle = () => {
   const [isSidDisabled, setSidDisabled] = useState(false);
 
   const changeDisabledFields = useCallback(() => {
-    const serviceName = form.getFieldValue('service_name');
-    const sid = form.getFieldValue('sid');
+    const serviceName = form.getFieldValue(['connection_data', 'service_name']);
+    const sid = form.getFieldValue(['connection_data', 'sid']);
     setServiceNameDisabled(!!sid);
     setSidDisabled(!!serviceName);
   }, [form]);
 
   const handleFieldChange = () => {
     changeDisabledFields();
-    form.validateFields(['service_name', 'sid']);
+    form.validateFields([
+      ['connection_data', 'service_name'],
+      ['connection_data', 'sid'],
+    ]);
   };
 
   //* It needs to validate required fields service_name and sid correctly if they have initial values

src/entities/group/api/hooks/useGetInitialGroup/index.ts

@@ -10,5 +10,6 @@ export const useGetInitialGroup = ({ id }: GetGroupRequest): UseQueryResult<Grou
     queryKey: [GroupQueryKey.GET_GROUP, id],
     queryFn: () => groupService.getGroup({ id }),
     enabled: !!id,
+    throwOnError: false,
   });
 };

src/entities/transfer/api/types.ts

@@ -38,6 +38,7 @@ export type TransferConnectionParamFieldName = 'source_params' | 'target_params'
 
 export interface TransferStrategyParams {
   type: 'full' | 'incremental';
+  increment_by?: string;
 }
 
 interface TransferParamsHive {

src/entities/transfer/index.ts

@@ -1,3 +1,2 @@
 export * from './api';
-export * from './constants';
 export * from './ui';

src/features/transfer/MutateTransferForm/components/StrategyParams/components/IncrementByForm/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ConnectionType } from '@shared/types';
+import { Form, Input } from 'antd';
+
+import { IncrementByFormProps } from './types';
+
+export const IncrementByForm = ({ sourceConnectionType }: IncrementByFormProps) => {
+  switch (sourceConnectionType) {
+    case ConnectionType.CLICKHOUSE:
+    case ConnectionType.HIVE:
+    case ConnectionType.MS_SQL:
+    case ConnectionType.MY_SQL:
+    case ConnectionType.ORACLE:
+    case ConnectionType.POSTGRES:
+      return (
+        <Form.Item label="Increment by" name={['strategy_params', 'increment_by']} rules={[{ required: true }]}>
+          <Input size="large" />
+        </Form.Item>
+      );
+    case ConnectionType.HDFS:
+    case ConnectionType.S3:
+      return null;
+  }
+};

src/features/transfer/MutateTransferForm/components/StrategyParams/components/IncrementByForm/types.ts

@@ -0,0 +1,5 @@
+import { ConnectionType } from '@shared/types';
+
+export interface IncrementByFormProps {
+  sourceConnectionType: ConnectionType;
+}

src/entities/transfer/constants.ts → src/features/transfer/MutateTransferForm/components/StrategyParams/components/StrategyTypeForm/constants.ts

@@ -1,7 +1,6 @@
+import { TransferStrategyParams } from '@entities/transfer';
 import { prepareOptionsForSelect } from '@shared/ui';
 
-import { TransferStrategyParams } from './api';
-
 export const TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS = prepareOptionsForSelect<TransferStrategyParams['type']>({
   data: ['full', 'incremental'],
   renderLabel: (data) => data,

src/features/transfer/MutateTransferForm/components/StrategyParams/components/StrategyTypeForm/index.tsx

@@ -0,0 +1,40 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { Select } from '@shared/ui';
+import { Form } from 'antd';
+import { ConnectionType } from '@shared/types';
+
+import { TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS } from './constants';
+import { StrategyTypeFormProps } from './types';
+
+export const StrategyTypeForm = ({ sourceConnectionType }: StrategyTypeFormProps) => {
+  const [isDisabled, setDisabled] = useState(false);
+  const formInstance = Form.useFormInstance();
+
+  // change strategy_params type value and disabled field state depending on source connection type
+  useLayoutEffect(() => {
+    switch (sourceConnectionType) {
+      case ConnectionType.HDFS:
+      case ConnectionType.S3:
+        setDisabled(true);
+        return formInstance.setFieldValue(['strategy_params', 'type'], 'full');
+      case ConnectionType.CLICKHOUSE:
+      case ConnectionType.HIVE:
+      case ConnectionType.MS_SQL:
+      case ConnectionType.MY_SQL:
+      case ConnectionType.ORACLE:
+      case ConnectionType.POSTGRES:
+        return setDisabled(false);
+    }
+  }, [formInstance, sourceConnectionType]);
+
+  return (
+    <Form.Item label="Strategy params" name={['strategy_params', 'type']} rules={[{ required: true }]}>
+      <Select
+        size="large"
+        options={TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS}
+        placeholder="Select strategy"
+        disabled={isDisabled}
+      />
+    </Form.Item>
+  );
+};

src/features/transfer/MutateTransferForm/components/StrategyParams/components/StrategyTypeForm/types.ts

@@ -0,0 +1,5 @@
+import { ConnectionType } from '@shared/types';
+
+export interface StrategyTypeFormProps {
+  sourceConnectionType: ConnectionType;
+}

src/features/transfer/MutateTransferForm/components/StrategyParams/components/index.ts

@@ -0,0 +1,2 @@
+export * from './IncrementByForm';
+export * from './StrategyTypeForm';

src/features/transfer/MutateTransferForm/components/StrategyParams/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Fieldset } from '@shared/ui';
+import { Form } from 'antd';
+import { TransferStrategyParams } from '@entities/transfer';
+import { ConnectionType } from '@shared/types';
+
+import { IncrementByForm, StrategyTypeForm } from './components';
+
+export const StrategyParams = () => {
+  const formInstance = Form.useFormInstance();
+
+  /* useWatch takes a value from Form.Item, but useFormInstance takes one from general form state
+   * useWatch returns undefined when Form.Item has not rendered yet
+   * https://github.com/ant-design/ant-design/issues/49010
+   */
+  Form.useWatch(['source_params', 'type']);
+  Form.useWatch(['strategy_params', 'type']);
+
+  const sourceConnectionType = formInstance.getFieldValue(['source_params', 'type']) as ConnectionType;
+  const strategyParamsType = formInstance.getFieldValue(['strategy_params', 'type']) as TransferStrategyParams['type'];
+
+  return (
+    <Fieldset title="Strategy params">
+      <StrategyTypeForm sourceConnectionType={sourceConnectionType} />
+      {strategyParamsType === 'incremental' && <IncrementByForm sourceConnectionType={sourceConnectionType} />}
+    </Fieldset>
+  );
+};

src/features/transfer/MutateTransferForm/components/index.ts

@@ -2,3 +2,4 @@ export * from './SourceParams';
 export * from './TargetParams';
 export * from './TransferSchedule';
 export * from './TransferConnections';
+export * from './StrategyParams';

src/features/transfer/MutateTransferForm/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { QueueQueryKey, queueService } from '@entities/queue';
-import { TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS } from '@entities/transfer';
-import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedSelect, Select } from '@shared/ui';
+import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedSelect } from '@shared/ui';
 import { Form, Input } from 'antd';
 
 import { MutateTransferFormProps } from './types';
-import { TransferConnections, TransferSchedule } from './components';
+import { StrategyParams, TransferConnections, TransferSchedule } from './components';
 
 export const MutateTransferForm = ({ group, onCancel }: MutateTransferFormProps) => {
   return (
@@ -31,14 +30,12 @@ export const MutateTransferForm = ({ group, onCancel }: MutateTransferFormProps)
             placeholder="Select queue"
           />
         </Form.Item>
-
-        <Form.Item label="Strategy params" name={['strategy_params', 'type']} rules={[{ required: true }]}>
-          <Select size="large" options={TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS} placeholder="Select strategy" />
-        </Form.Item>
       </Fieldset>
 
       <TransferConnections groupId={group.id} />
 
+      <StrategyParams />
+
       <TransferSchedule />
 
       <ControlButtons onCancel={onCancel} />

src/features/transfer/TransferDetailInfo/components/TransferStrategyParams/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Descriptions } from 'antd';
+
+import { TransferStrategyParamsProps } from './types';
+
+export const TransferStrategyParams = ({ data, ...props }: TransferStrategyParamsProps) => {
+  return (
+    <Descriptions {...props}>
+      <Descriptions.Item label="Type" span={3}>
+        {data.type}
+      </Descriptions.Item>
+      {data.increment_by && (
+        <Descriptions.Item label="Increment by" span={3}>
+          {data.increment_by}
+        </Descriptions.Item>
+      )}
+    </Descriptions>
+  );
+};

src/features/transfer/TransferDetailInfo/components/TransferStrategyParams/types.ts

@@ -0,0 +1,6 @@
+import { Transfer } from '@entities/transfer';
+import { DescriptionsProps } from 'antd';
+
+export interface TransferStrategyParamsProps extends DescriptionsProps {
+  data: Transfer['strategy_params'];
+}

src/features/transfer/TransferDetailInfo/components/index.ts

@@ -1,2 +1,3 @@
 export * from './TransferParams';
 export * from './TransferFileFormatData';
+export * from './TransferStrategyParams';

src/features/transfer/TransferDetailInfo/index.tsx

@@ -5,7 +5,7 @@ import { CronService } from '@shared/services';
 
 import { TransferDetailInfoProps } from './types';
 import classes from './styles.module.less';
-import { TransferParams } from './components';
+import { TransferParams, TransferStrategyParams } from './components';
 
 export const TransferDetailInfo = ({
   transfer,
@@ -38,8 +38,8 @@ export const TransferDetailInfo = ({
             {new CronService(transfer.schedule).getSchedule()}
           </Descriptions.Item>
         )}
-        <Descriptions.Item label="Strategy params" span={3}>
-          {transfer.strategy_params.type}
+        <Descriptions.Item className={classes.subDescription} label="Strategy params" span={3}>
+          <TransferStrategyParams data={transfer.strategy_params} />
         </Descriptions.Item>
         <Descriptions.Item label="Source connection" span={3}>
           <Link to={`/connections/${connectionSource.id}`}>{connectionSource.name}</Link>