[DOP-22032] delete transfer

src/entities/transfer/api/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useGetTransfer';
+export * from './useDeleteTransfer';

src/entities/transfer/api/hooks/useDeleteTransfer/index.ts

@@ -0,0 +1,25 @@
+import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
+import { notification } from 'antd';
+import { getErrorMessage } from '@shared/config';
+
+import { transferService } from '../../transferService';
+import { TransferQueryKey } from '../../keys';
+import { DeleteTransferRequest } from '../../types';
+
+/** Hook for deleting transfer */
+export const useDeleteTransfer = (data: DeleteTransferRequest): UseMutationResult => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => transferService.deleteTransfer(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [TransferQueryKey.GET_TRANSFERS] });
+      queryClient.removeQueries({ queryKey: [TransferQueryKey.GET_TRANSFER, data.id] });
+    },
+    onError: (error) => {
+      notification.error({
+        message: getErrorMessage(error),
+      });
+    },
+  });
+};

src/entities/transfer/api/transferService.ts

@@ -1,7 +1,7 @@
 import { axiosInstance } from '@shared/config';
 import { PaginationResponse } from '@shared/types';
 
-import { GetTransferRequest, GetTransfersRequest, Transfer } from './types';
+import { DeleteTransferRequest, GetTransferRequest, GetTransfersRequest, Transfer } from './types';
 
 export const transferService = {
   getTransfers: (params: GetTransfersRequest): Promise<PaginationResponse<Transfer>> => {
@@ -11,4 +11,8 @@ export const transferService = {
   getTransfer: ({ id }: GetTransferRequest): Promise<Transfer> => {
     return axiosInstance.get(`transfers/${id}`);
   },
+
+  deleteTransfer: ({ id }: DeleteTransferRequest): Promise<null> => {
+    return axiosInstance.delete(`transfers/${id}`);
+  },
 };

src/entities/transfer/api/types.ts

@@ -79,3 +79,7 @@ export interface GetTransfersRequest extends PaginationRequest {
 export interface GetTransferRequest {
   id: number;
 }
+
+export interface DeleteTransferRequest {
+  id: number;
+}

src/features/transfer/DeleteTransfer/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ControlButtons } from '@shared/ui';
+import { Typography } from 'antd';
+import { WarningOutlined } from '@ant-design/icons';
+import { useDeleteTransfer } from '@entities/transfer';
+
+import classes from './styles.module.less';
+import { DeleteTransferProps } from './types';
+
+const { Text } = Typography;
+
+export const DeleteTransfer = ({ transfer, onSuccess, onCancel }: DeleteTransferProps) => {
+  const { mutate: deleteTransfer, isPending } = useDeleteTransfer({ id: transfer.id });
+
+  const handleSubmit = () => {
+    deleteTransfer(null, { onSuccess });
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.main}>
+        <WarningOutlined className={classes.icon} />
+        <Text>
+          Do you really want to delete transfer <b>«{transfer.name}»</b>?
+        </Text>
+      </div>
+      <ControlButtons isLoading={isPending} submitButtonText="Confirm" onSubmit={handleSubmit} onCancel={onCancel} />
+    </div>
+  );
+};

src/features/transfer/DeleteTransfer/styles.module.less

@@ -0,0 +1,20 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .main {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+
+    .icon {
+      color: @red-6;
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}

src/features/transfer/DeleteTransfer/types.ts

@@ -0,0 +1,7 @@
+import { Transfer } from '@entities/transfer';
+
+export interface DeleteTransferProps {
+  transfer: Transfer;
+  onSuccess: () => void;
+  onCancel: () => void;
+}

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 }: TransferListProps) => {
+export const TransferList = memo(({ group, 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)}
+      onDeleteRowClick={onDeleteRowClick}
       rowKey="id"
     />
   );

src/features/transfer/TransferList/types.ts

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

src/features/transfer/index.ts

@@ -1,2 +1,3 @@
 export * from './TransferList';
 export * from './TransferDetailInfo';
+export * from './DeleteTransfer';

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants';
+import { useModalState } from '@shared/hooks';
+import { ModalWrapper } from '@shared/ui';
+import { Button } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { DeleteTransfer } from '@features/transfer';
+
+import { DeleteTransferButtonProps } from './types';
+
+export const DeleteTransferButton = ({ transfer }: DeleteTransferButtonProps) => {
+  const navigate = useNavigate();
+
+  const { isOpened: isOpenedModal, handleOpen: handleOpenModal, handleClose: handleCloseModal } = useModalState();
+
+  const handleSuccessDeleteTransfer = () => {
+    navigate('/transfers');
+    handleCloseModal();
+  };
+
+  return (
+    <>
+      <Button type="primary" size="large" danger onClick={handleOpenModal}>
+        Delete transfer
+      </Button>
+      <ModalWrapper
+        title="Delete transfer"
+        width={DEFAULT_MODAL_DELETE_WIDTH}
+        open={isOpenedModal}
+        onCancel={handleCloseModal}
+      >
+        <DeleteTransfer transfer={transfer} onSuccess={handleSuccessDeleteTransfer} onCancel={handleCloseModal} />
+      </ModalWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,5 @@
+import { Transfer } from '@entities/transfer';
+
+export interface DeleteTransferButtonProps {
+  transfer: Transfer;
+}

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

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

src/widgets/transfer/TransferDetail/index.tsx

@@ -1,19 +1,28 @@
 import React from 'react';
-import { PageContentWrapper } from '@shared/ui';
+import { AccessWrapper, PageContentWrapper } from '@shared/ui';
 import { TransferDetailInfo } from '@features/transfer';
+import { UserRole } from '@shared/types';
 
 import { TransferDetailProps } from './types';
+import { DeleteTransferButton } from './components';
+import classes from './styles.module.less';
 
 export const TransferDetail = ({ transfer, group, connectionSource, connectionTarget, queue }: TransferDetailProps) => {
   return (
     <PageContentWrapper>
-      {/* //TODO: [DOP-20065] add update and delete actions for transfer */}
       <TransferDetailInfo
         transfer={transfer}
         group={group.data}
         connectionSource={connectionSource}
         connectionTarget={connectionTarget}
         queue={queue}
+        extra={
+          <AccessWrapper accessRole={UserRole.Maintainer} currentRole={group.role}>
+            <div className={classes.actions}>
+              <DeleteTransferButton transfer={transfer} />
+            </div>
+          </AccessWrapper>
+        }
       />
     </PageContentWrapper>
   );

src/widgets/transfer/TransferDetail/styles.module.less

@@ -0,0 +1,5 @@
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}

src/widgets/transfer/TransferListWrapper/index.tsx

@@ -1,9 +1,46 @@
-import React from 'react';
-import { TransferList } from '@features/transfer';
+import React, { useCallback, useState } from 'react';
+import { DeleteTransfer, TransferList } from '@features/transfer';
+import { Transfer } from '@entities/transfer';
+import { useModalState } from '@shared/hooks';
+import { ModalWrapper } from '@shared/ui';
+import { DEFAULT_MODAL_DELETE_WIDTH } from '@shared/constants';
 
 import { TransferListWrapperProps } from './types';
 
 export const TransferListWrapper = ({ group }: TransferListWrapperProps) => {
-  //TODO: [DOP-20065] add update and delete actions for transfer
-  return <TransferList group={group} />;
+  const [selectedTransfer, setSelectedTransfer] = useState<Transfer>();
+
+  const {
+    isOpened: isOpenedDeleteTransferModal,
+    handleOpen: handleOpenDeleteTransferModal,
+    handleClose: handleCloseDeleteTransferModal,
+  } = useModalState();
+
+  const handleDeleteUserClick = useCallback(
+    (transfer: Transfer) => {
+      setSelectedTransfer(transfer);
+      handleOpenDeleteTransferModal();
+    },
+    [handleOpenDeleteTransferModal],
+  );
+
+  return (
+    <>
+      {selectedTransfer && (
+        <ModalWrapper
+          title="Delete transfer"
+          width={DEFAULT_MODAL_DELETE_WIDTH}
+          open={isOpenedDeleteTransferModal}
+          onCancel={handleCloseDeleteTransferModal}
+        >
+          <DeleteTransfer
+            transfer={selectedTransfer}
+            onSuccess={handleCloseDeleteTransferModal}
+            onCancel={handleCloseDeleteTransferModal}
+          />
+        </ModalWrapper>
+      )}
+      <TransferList group={group} onDeleteRowClick={handleDeleteUserClick} />;
+    </>
+  );
 };