Add 'delete volume' similar to delete table (#56)

src/components/modals/DeleteVolumeModal.tsx

@@ -0,0 +1,67 @@
+import { Modal, Typography } from 'antd';
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useDeleteVolume } from '../../hooks/volumes';
+import { useNotification } from '../../utils/NotificationContext';
+
+interface DeleteVolumeModalProps {
+  open: boolean;
+  closeModal: () => void;
+  catalog: string;
+  schema: string;
+  volume: string;
+}
+
+export function DeleteVolumeModal({
+  open,
+  closeModal,
+  catalog,
+  schema,
+  volume,
+}: DeleteVolumeModalProps) {
+  const navigate = useNavigate();
+  const { setNotification } = useNotification();
+  const mutation = useDeleteVolume({
+    onSuccessCallback: () => {
+      setNotification(`${volume} volume successfully deleted`, 'success');
+      navigate(`/data/${catalog}/${schema}`);
+    },
+    catalog,
+    schema,
+  });
+
+  const handleSubmit = useCallback(() => {
+    mutation.mutate(
+      { catalog_name: catalog, schema_name: schema, name: volume },
+      {
+        onError: (error: Error) => {
+          setNotification(error.message, 'error');
+        },
+      },
+    );
+  }, [mutation, volume, setNotification]);
+
+  return (
+    <Modal
+      title={
+        <Typography.Title type={'danger'} level={4}>
+          Delete volume
+        </Typography.Title>
+      }
+      okText="Delete"
+      okType="danger"
+      cancelText="Cancel"
+      open={open}
+      destroyOnClose
+      onCancel={closeModal}
+      onOk={handleSubmit}
+      okButtonProps={{ loading: mutation.isPending }}
+    >
+      <Typography.Text>
+        Are you sure you want to delete the volume
+      </Typography.Text>
+      <Typography.Text strong>{` ${volume}`}</Typography.Text>
+      <Typography.Text>? This operation cannot be undone.</Typography.Text>
+    </Modal>
+  );
+}

src/components/volumes/VolumeActionsDropdown.tsx

@@ -0,0 +1,63 @@
+import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+import { useMemo, useState } from 'react';
+import { DeleteVolumeModal } from '../modals/DeleteVolumeModal';
+
+interface VolumeActionDropdownProps {
+  catalog: string;
+  schema: string;
+  volume: string;
+}
+
+enum VolumeActionsEnum {
+  Delete,
+}
+
+export default function VolumeActionsDropdown({
+  catalog,
+  schema,
+  volume,
+}: VolumeActionDropdownProps) {
+  const [dropdownVisible, setDropdownVisible] = useState<boolean>(false);
+  const [action, setAction] = useState<VolumeActionsEnum | null>(null);
+
+  const menuItems = useMemo(
+    (): MenuProps['items'] => [
+      {
+        key: 'deleteVolume',
+        label: 'Delete Volume',
+        onClick: () => setAction(VolumeActionsEnum.Delete),
+        icon: <DeleteOutlined />,
+        danger: true,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <Dropdown
+        menu={{ items: menuItems }}
+        trigger={['click']}
+        onOpenChange={() => setDropdownVisible(!dropdownVisible)}
+      >
+        <Button
+          type="text"
+          icon={
+            <MoreOutlined
+              rotate={dropdownVisible ? 90 : 0}
+              style={{ transition: 'transform 0.5s' }}
+            />
+          }
+        />
+      </Dropdown>
+      <DeleteVolumeModal
+        open={action === VolumeActionsEnum.Delete}
+        closeModal={() => setAction(null)}
+        catalog={catalog}
+        schema={schema}
+        volume={volume}
+      />
+    </>
+  );
+}

src/hooks/volumes.tsx

@@ -1,4 +1,9 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
 import { UC_API_PREFIX } from '../utils/constants';
 
 export interface VolumeInterface {
@@ -11,6 +16,7 @@ export interface VolumeInterface {
   created_at: number;
   updated_at: number | null;
 }
+
 interface ListVolumesResponse {
   volumes: VolumeInterface[];
   next_page_token: string | null;
@@ -36,7 +42,7 @@ export function useListVolumes({
       });
 
       const response = await fetch(
-        `${UC_API_PREFIX}/volumes?${searchParams.toString()}`
+        `${UC_API_PREFIX}/volumes?${searchParams.toString()}`,
       );
       return response.json();
     },
@@ -57,9 +63,55 @@ export function useGetVolume({ catalog, schema, volume }: GetVolumeParams) {
       const fullVolumeName = [catalog, schema, volume].join('.');
 
       const response = await fetch(
-        `${UC_API_PREFIX}/volumes/${fullVolumeName}`
+        `${UC_API_PREFIX}/volumes/${fullVolumeName}`,
       );
       return response.json();
     },
   });
 }
+
+export interface DeleteVolumeMutationParams
+  extends Pick<VolumeInterface, 'catalog_name' | 'schema_name' | 'name'> {}
+
+interface DeleteVolumeParams {
+  onSuccessCallback?: () => void;
+  catalog: string;
+  schema: string;
+}
+
+// Delete a volume
+export function useDeleteVolume({
+  onSuccessCallback,
+  catalog,
+  schema,
+}: DeleteVolumeParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, Error, DeleteVolumeMutationParams>({
+    mutationFn: async ({
+      catalog_name,
+      schema_name,
+      name,
+    }: DeleteVolumeMutationParams) => {
+      const response = await fetch(
+        `${UC_API_PREFIX}/volumes/${catalog_name}.${schema_name}.${name}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      );
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to delete volume');
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['listVolumes', catalog, schema],
+      });
+      onSuccessCallback?.();
+    },
+  });
+}

src/pages/VolumeDetails.tsx

@@ -6,6 +6,7 @@ import DescriptionBox from '../components/DescriptionBox';
 import { useGetVolume } from '../hooks/volumes';
 import VolumeSidebar from '../components/volumes/VolumeSidebar';
 import { FolderOutlined } from '@ant-design/icons';
+import VolumeActionsDropdown from '../components/volumes/VolumeActionsDropdown';
 
 export default function VolumeDetails() {
   const { catalog, schema, volume } = useParams();
@@ -21,9 +22,16 @@ export default function VolumeDetails() {
   return (
     <DetailsLayout
       title={
-        <Typography.Title level={3}>
-          <FolderOutlined /> {volumeFullName}
-        </Typography.Title>
+        <Flex justify="space-between" align="flex-start" gap="middle">
+          <Typography.Title level={3}>
+            <FolderOutlined /> {volumeFullName}
+          </Typography.Title>
+          <VolumeActionsDropdown
+            catalog={catalog}
+            schema={schema}
+            volume={volume}
+          />
+        </Flex>
       }
       breadcrumbs={[
         { title: <Link to="/">Catalogs</Link>, key: '_home' },