[DOP-22031] update transfer

src/app/config/router/instance.tsx

@@ -12,7 +12,7 @@ import {
   CreateConnectionPage,
   UpdateConnectionPage,
 } from '@pages/connection';
-import { CreateTransferPage, TransferDetailPage, TransferListPage } from '@pages/transfer';
+import { CreateTransferPage, TransferDetailPage, TransferListPage, UpdateTransferPage } from '@pages/transfer';
 import { RunDetailPage } from '@pages/run';
 
 import { ErrorBoundary, NotFoundError } from '../errorBoundary';
@@ -113,14 +113,18 @@ export const router = createBrowserRouter([
             path: '/transfers/:id',
             element: <TransferDetailPage />,
           },
-          {
-            path: '/transfers/runs/:id',
-            element: <RunDetailPage />,
-          },
           {
             path: '/transfers/create',
             element: <CreateTransferPage />,
           },
+          {
+            path: '/transfers/:id/update',
+            element: <UpdateTransferPage />,
+          },
+          {
+            path: '/transfers/runs/:id',
+            element: <RunDetailPage />,
+          },
         ],
       },
       {

src/entities/transfer/api/transferService.ts

@@ -7,6 +7,7 @@ import {
   GetTransferRequest,
   GetTransfersRequest,
   Transfer,
+  UpdateTransferRequest,
 } from './types';
 
 export const transferService = {
@@ -22,6 +23,10 @@ export const transferService = {
     return axiosInstance.post(`transfers`, data);
   },
 
+  updateTransfer: ({ id, ...data }: UpdateTransferRequest): Promise<Transfer> => {
+    return axiosInstance.patch(`transfers/${id}`, data);
+  },
+
   deleteTransfer: ({ id }: DeleteTransferRequest): Promise<null> => {
     return axiosInstance.delete(`transfers/${id}`);
   },

src/entities/transfer/api/types.ts

@@ -82,6 +82,8 @@ export interface GetTransferRequest {
 
 export interface CreateTransferRequest extends Omit<Transfer, 'id'> {}
 
+export interface UpdateTransferRequest extends Omit<Transfer, 'group_id'> {}
+
 export interface DeleteTransferRequest {
   id: number;
 }

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

@@ -11,7 +11,7 @@ export const TransferSchedule = () => {
 
   return (
     <>
-      <Form.Item label="Is scheduled" name="is_scheduled">
+      <Form.Item label="Is scheduled" name="is_scheduled" valuePropName="checked">
         <Switch onChange={handleChangeScheduled} />
       </Form.Item>
       {isScheduled && (

src/features/transfer/TransferList/index.tsx

@@ -7,14 +7,15 @@ import { TransferQueryKey, transferService } from '@entities/transfer';
 import { TRANSFER_LIST_COLUMNS } from './constants';
 import { TransferListProps } from './types';
 
-export const TransferList = memo(({ group, onDeleteRowClick }: TransferListProps) => {
+export const TransferList = memo(({ group, onUpdateRowClick, onDeleteRowClick }: TransferListProps) => {
   return (
     <ManagedTable
       queryKey={[TransferQueryKey.GET_TRANSFERS, group.data.id]}
       queryFunction={(params) => transferService.getTransfers({ ...params, group_id: group.data.id })}
       columns={TRANSFER_LIST_COLUMNS}
       isRenderUpdateRowAction={() => hasAccessByUserRole(UserRole.Developer, group.role)}
       isRenderDeleteRowAction={() => hasAccessByUserRole(UserRole.Maintainer, group.role)}
+      onUpdateRowClick={onUpdateRowClick}
       onDeleteRowClick={onDeleteRowClick}
       rowKey="id"
     />

src/features/transfer/TransferList/types.ts

@@ -3,5 +3,6 @@ import { Transfer } from '@entities/transfer';
 
 export interface TransferListProps {
   group: Group;
+  onUpdateRowClick: (transfer: Transfer) => void;
   onDeleteRowClick: (transfer: Transfer) => void;
 }

src/pages/group/GroupDetailPage/components/UpdateGroupButton/index.tsx

@@ -8,7 +8,7 @@ import { UpdateGroupButtonProps } from './types';
 export const UpdateGroupButton = ({ groupId }: UpdateGroupButtonProps) => {
   return (
     <Button className={classes.button} type="primary" size="large">
-      <Link to={`/groups/${groupId}/update`}>Update group</Link>
+      <Link to={`/groups/${groupId}/update`}>Update Group</Link>
     </Button>
   );
 };

src/pages/transfer/UpdateTransferPage/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Typography } from 'antd';
+import { PageContentWrapper } from '@shared/ui';
+import { useParams } from 'react-router-dom';
+import { PageDetailParams, UserRole } from '@shared/types';
+import { useGetGroup } from '@entities/group';
+import { hasAccessByUserRole } from '@shared/utils';
+import { AccessError } from '@shared/config';
+import { useGetTransfer } from '@entities/transfer';
+import { UpdateTransfer } from '@widgets/transfer';
+
+const { Title } = Typography;
+
+export const UpdateTransferPage = () => {
+  const params = useParams<PageDetailParams>();
+  const { data: transfer } = useGetTransfer({ id: Number(params.id) });
+  const { data: group } = useGetGroup({ id: transfer.group_id });
+
+  if (!transfer || !group) {
+    return null;
+  }
+
+  if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) {
+    throw new AccessError();
+  }
+
+  return (
+    <PageContentWrapper width="small">
+      <Title>Update Transfer</Title>
+      <UpdateTransfer transfer={transfer} group={group.data} />
+    </PageContentWrapper>
+  );
+};

src/pages/transfer/index.ts

@@ -1,3 +1,4 @@
 export * from './TransferListPage';
 export * from './TransferDetailPage';
 export * from './CreateTransferPage';
+export * from './UpdateTransferPage';

src/widgets/connection/ConnectionDetail/components/DeleteConnectionButton/index.tsx

@@ -21,10 +21,10 @@ export const DeleteConnectionButton = ({ connection }: DeleteConnectionButtonPro
   return (
     <>
       <Button type="primary" size="large" danger onClick={handleOpenModal}>
-        Delete connection
+        Delete Connection
       </Button>
       <ModalWrapper
-        title="Delete connection"
+        title="Delete Connection"
         width={DEFAULT_MODAL_DELETE_WIDTH}
         open={isOpenedModal}
         onCancel={handleCloseModal}

src/widgets/connection/ConnectionDetail/components/UpdateConnectionButton/index.tsx

@@ -7,7 +7,7 @@ import { UpdateConnectionButtonProps } from './types';
 export const UpdateConnectionButton = ({ connectionId }: UpdateConnectionButtonProps) => {
   return (
     <Button type="primary" size="large">
-      <Link to={`/connections/${connectionId}/update`}>Update connection</Link>
+      <Link to={`/connections/${connectionId}/update`}>Update Connection</Link>
     </Button>
   );
 };

src/widgets/connection/ConnectionListWrapper/index.tsx

@@ -37,7 +37,7 @@ export const ConnectionListWrapper = ({ group }: ConnectionListWrapperProps) =>
     <>
       {selectedConnection && (
         <ModalWrapper
-          title="Delete connection"
+          title="Delete Connection"
           width={DEFAULT_MODAL_DELETE_WIDTH}
           open={isOpenedDeleteConnectionModal}
           onCancel={handleCloseDeleteConnectionModal}

src/widgets/queue/QueueDetail/components/DeleteQueueButton/index.tsx

@@ -25,10 +25,10 @@ export const DeleteQueueButton = ({ queue }: DeleteQueueButtonProps) => {
   return (
     <>
       <Button type="primary" size="large" danger onClick={handleOpenDeleteQueueModal}>
-        Delete queue
+        Delete Queue
       </Button>
       <ModalWrapper
-        title="Delete queue"
+        title="Delete Queue"
         width={DEFAULT_MODAL_DELETE_WIDTH}
         open={isOpenedDeleteQueueModal}
         onCancel={handleCloseDeleteQueueModal}

src/widgets/queue/QueueDetail/components/UpdateQueueButton/index.tsx

@@ -7,7 +7,7 @@ import { UpdateQueueButtonProps } from './types';
 export const UpdateQueueButton = ({ queueId }: UpdateQueueButtonProps) => {
   return (
     <Button type="primary" size="large">
-      <Link to={`/queues/${queueId}/update`}>Update queue</Link>
+      <Link to={`/queues/${queueId}/update`}>Update Queue</Link>
     </Button>
   );
 };

src/widgets/queue/QueueListWrapper/index.tsx

@@ -37,7 +37,7 @@ export const QueueListWrapper = ({ group }: QueueListWrapperProps) => {
     <>
       {selectedQueue && (
         <ModalWrapper
-          title="Delete queue"
+          title="Delete Queue"
           width={DEFAULT_MODAL_DELETE_WIDTH}
           open={isOpenedDeleteQueueModal}
           onCancel={handleCloseDeleteQueueModal}

src/widgets/transfer/TransferDetail/components/DeleteTransferButton/index.tsx

@@ -21,10 +21,10 @@ export const DeleteTransferButton = ({ transfer }: DeleteTransferButtonProps) =>
   return (
     <>
       <Button type="primary" size="large" danger onClick={handleOpenModal}>
-        Delete transfer
+        Delete Transfer
       </Button>
       <ModalWrapper
-        title="Delete transfer"
+        title="Delete Transfer"
         width={DEFAULT_MODAL_DELETE_WIDTH}
         open={isOpenedModal}
         onCancel={handleCloseModal}

src/widgets/transfer/TransferDetail/components/UpdateTransferButton/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Link } from 'react-router-dom';
+
+import { UpdateTransferButtonProps } from './types';
+
+export const UpdateTransferButton = ({ transferId }: UpdateTransferButtonProps) => {
+  return (
+    <Button type="primary" size="large">
+      <Link to={`/transfers/${transferId}/update`}>Update Transfer</Link>
+    </Button>
+  );
+};

src/widgets/transfer/TransferDetail/components/UpdateTransferButton/types.ts

@@ -0,0 +1,3 @@
+export interface UpdateTransferButtonProps {
+  transferId: number;
+}

src/widgets/transfer/TransferDetail/components/index.ts

@@ -1 +1,2 @@
 export * from './DeleteTransferButton';
+export * from './UpdateTransferButton';

src/widgets/transfer/TransferDetail/index.tsx

@@ -4,7 +4,7 @@ import { TransferDetailInfo } from '@features/transfer';
 import { UserRole } from '@shared/types';
 
 import { TransferDetailProps } from './types';
-import { DeleteTransferButton } from './components';
+import { DeleteTransferButton, UpdateTransferButton } from './components';
 import classes from './styles.module.less';
 
 export const TransferDetail = ({ transfer, group, connectionSource, connectionTarget, queue }: TransferDetailProps) => {
@@ -19,6 +19,7 @@ export const TransferDetail = ({ transfer, group, connectionSource, connectionTa
         extra={
           <AccessWrapper accessRole={UserRole.Maintainer} currentRole={group.role}>
             <div className={classes.actions}>
+              <UpdateTransferButton transferId={transfer.id} />
               <DeleteTransferButton transfer={transfer} />
             </div>
           </AccessWrapper>

src/widgets/transfer/TransferListWrapper/index.tsx

@@ -4,10 +4,12 @@ import { Transfer } from '@entities/transfer';
 import { useModalState } from '@shared/hooks';
 import { ModalWrapper } from '@shared/ui';
 import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants';
+import { useNavigate } from 'react-router-dom';
 
 import { TransferListWrapperProps } from './types';
 
 export const TransferListWrapper = ({ group }: TransferListWrapperProps) => {
+  const navigate = useNavigate();
   const [selectedTransfer, setSelectedTransfer] = useState<Transfer>();
 
   const {
@@ -24,11 +26,18 @@ export const TransferListWrapper = ({ group }: TransferListWrapperProps) => {
     [handleOpenDeleteTransferModal],
   );
 
+  const handleUpdateRowClick = useCallback(
+    (record: Transfer) => {
+      navigate(`/transfers/${record.id}/update`);
+    },
+    [navigate],
+  );
+
   return (
     <>
       {selectedTransfer && (
         <ModalWrapper
-          title="Delete transfer"
+          title="Delete Transfer"
           width={DEFAULT_MODAL_DELETE_WIDTH}
           open={isOpenedDeleteTransferModal}
           onCancel={handleCloseDeleteTransferModal}
@@ -40,7 +49,7 @@ export const TransferListWrapper = ({ group }: TransferListWrapperProps) => {
           />
         </ModalWrapper>
       )}
-      <TransferList group={group} onDeleteRowClick={handleDeleteUserClick} />
+      <TransferList group={group} onUpdateRowClick={handleUpdateRowClick} onDeleteRowClick={handleDeleteUserClick} />
     </>
   );
 };

src/widgets/transfer/UpdateTransfer/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ManagedForm } from '@shared/ui';
+import { useNavigate } from 'react-router-dom';
+import { Transfer, TransferQueryKey, transferService } from '@entities/transfer';
+import { MutateTransferForm } from '@features/transfer';
+
+import { UpdateTransferForm, UpdateTransferProps } from './types';
+
+export const UpdateTransfer = ({ transfer, group }: UpdateTransferProps) => {
+  const { id: transferId, group_id, ...transferInitialValues } = transfer;
+  const navigate = useNavigate();
+
+  const handleUpdateTransfer = (values: UpdateTransferForm) => {
+    return transferService.updateTransfer({ id: transferId, ...values });
+  };
+
+  const onSuccess = (response: Transfer) => {
+    navigate(`/transfers/${response.id}`);
+  };
+
+  const onCancel = () => {
+    navigate('/transfers');
+  };
+
+  return (
+    <ManagedForm<UpdateTransferForm, Transfer>
+      initialValues={transferInitialValues}
+      mutationFunction={handleUpdateTransfer}
+      onSuccess={onSuccess}
+      keysInvalidateQueries={[
+        [{ queryKey: [TransferQueryKey.GET_TRANSFERS, group.id] }],
+        [{ queryKey: [TransferQueryKey.GET_TRANSFER, transfer.id] }],
+      ]}
+    >
+      <MutateTransferForm
+        initialSourceConnectionType={transferInitialValues.source_params.type}
+        initialTargetConnectionType={transferInitialValues.target_params.type}
+        group={group}
+        onCancel={onCancel}
+      />
+    </ManagedForm>
+  );
+};

src/widgets/transfer/UpdateTransfer/types.ts

@@ -0,0 +1,9 @@
+import { GroupData } from '@entities/group';
+import { Transfer, UpdateTransferRequest } from '@entities/transfer';
+
+export interface UpdateTransferForm extends Omit<UpdateTransferRequest, 'id'> {}
+
+export interface UpdateTransferProps {
+  transfer: Transfer;
+  group: GroupData;
+}

src/widgets/transfer/index.ts

@@ -1,3 +1,4 @@
 export * from './TransferListWrapper';
 export * from './TransferDetail';
 export * from './CreateTransfer';
+export * from './UpdateTransfer';