[DOP-29475] Show connection type in source/target Transfer params

Author: dolfinus

src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { ConnectionQueryKey, connectionService } from '@entities/connection';
+import { ConnectionQueryKey, connectionService, CONNECTION_TYPE_NAMES } from '@entities/connection';
 import { ManagedSelect } from '@shared/ui';
 import { Form } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,7 @@ export const SourceParams = memo(({ groupId }: SourceParamsProps) => {
           queryKey={[ConnectionQueryKey.GET_CONNECTIONS, groupId]}
           queryFunction={(params) => connectionService.getConnections({ group_id: groupId, ...params })}
           renderOptionValue={(connection) => connection.id}
-          renderOptionLabel={(connection) => connection.name}
+          renderOptionLabel={(connection) => `${connection.name} (${CONNECTION_TYPE_NAMES[connection.type]})`}
           onSelect={handleSelectConnection}
           detailQueryKey={[ConnectionQueryKey.GET_CONNECTION]}
           detailQueryFunction={(value) => connectionService.getConnection({ id: value })}

src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { ConnectionQueryKey, connectionService } from '@entities/connection';
+import { ConnectionQueryKey, connectionService, CONNECTION_TYPE_NAMES } from '@entities/connection';
 import { ManagedSelect } from '@shared/ui';
 import { Form } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -27,7 +27,7 @@ export const TargetParams = memo(({ groupId }: TargetParamsProps) => {
           queryKey={[ConnectionQueryKey.GET_CONNECTIONS, groupId]}
           queryFunction={(params) => connectionService.getConnections({ group_id: groupId, ...params })}
           renderOptionValue={(connection) => connection.id}
-          renderOptionLabel={(connection) => connection.name}
+          renderOptionLabel={(connection) => `${connection.name} (${CONNECTION_TYPE_NAMES[connection.type]})`}
           onSelect={handleSelectConnection}
           detailQueryKey={[ConnectionQueryKey.GET_CONNECTION]}
           detailQueryFunction={(value) => connectionService.getConnection({ id: value })}

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Descriptions } from 'antd';
 import { CONNECTION_TYPE_NAMES } from '@entities/connection';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { TransferParamsProps } from './types';
 import { getDescriptionItems } from './utils';
 
-export const TransferParams = ({ data, ...props }: TransferParamsProps) => {
+export const TransferParams = ({ data, connection, ...props }: TransferParamsProps) => {
   const { t } = useTranslation();
 
   return (
     <Descriptions {...props}>
-      <Descriptions.Item label={t('type')} span={3}>
-        {CONNECTION_TYPE_NAMES[data.type]}
+      <Descriptions.Item label={t('connection', { ns: 'connection' })} span={3}>
+        <Link to={`/connections/${connection.id}`}>
+          {connection.name} ({CONNECTION_TYPE_NAMES[data.type]})
+        </Link>
       </Descriptions.Item>
       {getDescriptionItems({ data, t }).map((item, index) => (
         <Descriptions.Item label={item.label} span={3} key={index}>

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

@@ -1,6 +1,8 @@
+import { Connection } from '@entities/connection';
 import { Transfer } from '@entities/transfer';
 import { DescriptionsProps } from 'antd';
 
 export interface TransferParamsProps extends DescriptionsProps {
+  connection: Connection;
   data: Transfer['source_params'] | Transfer['target_params'];
 }

src/features/transfer/TransferDetailInfo/index.tsx

@@ -38,17 +38,11 @@ export const TransferDetailInfo = ({
         <Descriptions.Item label={t('queue', { ns: 'queue' })} span={3}>
           <Link to={`/queues/${queue.id}`}>{queue.name}</Link>
         </Descriptions.Item>
-        <Descriptions.Item label={t('sourceConnection', { ns: 'transfer' })} span={3}>
-          <Link to={`/connections/${connectionSource.id}`}>{connectionSource.name}</Link>
-        </Descriptions.Item>
-        <Descriptions.Item label={t('targetConnection', { ns: 'transfer' })} span={3}>
-          <Link to={`/connections/${connectionTarget.id}`}>{connectionTarget.name}</Link>
-        </Descriptions.Item>
-        <Descriptions.Item className={classes.subDescription} label={t('sourceParams', { ns: 'transfer' })} span={3}>
-          <TransferParams data={transfer.source_params} />
+        <Descriptions.Item className={classes.subDescription} label={t('source', { ns: 'transfer' })} span={3}>
+          <TransferParams connection={connectionSource} data={transfer.source_params} />
         </Descriptions.Item>
         <Descriptions.Item className={classes.subDescription} label={t('targetParams', { ns: 'transfer' })} span={3}>
-          <TransferParams data={transfer.target_params} />
+          <TransferParams connection={connectionTarget} data={transfer.target_params} />
         </Descriptions.Item>
         <Descriptions.Item className={classes.subDescription} label={t('strategyParams', { ns: 'transfer' })} span={3}>
           <TransferStrategyParams data={transfer.strategy_params} />