[ui] Feat/delete schema (unitycatalog/unitycatalog-ui#61)

* delete schema functionality

* prettier

ui/src/components/modals/DeleteSchemaModal.tsx

@@ -0,0 +1,64 @@
+import { Modal, Typography } from 'antd';
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useNotification } from '../../utils/NotificationContext';
+import { useDeleteSchema } from '../../hooks/schemas';
+
+interface DeleteSchemaModalProps {
+  open: boolean;
+  closeModal: () => void;
+  catalog: string;
+  schema: string;
+}
+
+export function DeleteSchemaModal({
+  open,
+  closeModal,
+  catalog,
+  schema,
+}: DeleteSchemaModalProps) {
+  const navigate = useNavigate();
+  const { setNotification } = useNotification();
+  const mutation = useDeleteSchema({
+    onSuccessCallback: () => {
+      setNotification(`${schema} schema successfully deleted`, 'success');
+      navigate(`/data/${catalog}`);
+    },
+    catalog,
+  });
+
+  const handleSubmit = useCallback(() => {
+    mutation.mutate(
+      { catalog_name: catalog, name: schema },
+      {
+        onError: (error: Error) => {
+          setNotification(error.message, 'error');
+        },
+      },
+    );
+  }, [mutation, catalog, schema, setNotification]);
+
+  return (
+    <Modal
+      title={
+        <Typography.Title type={'danger'} level={4}>
+          Delete schema
+        </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 schema
+      </Typography.Text>
+      <Typography.Text strong>{` ${schema}`}</Typography.Text>
+      <Typography.Text>? This operation cannot be undone.</Typography.Text>
+    </Modal>
+  );
+}

ui/src/components/schemas/SchemaActionDropdown.tsx

@@ -0,0 +1,60 @@
+import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+import { useMemo, useState } from 'react';
+import { DeleteSchemaModal } from '../modals/DeleteSchemaModal';
+
+interface SchemaActionDropdownProps {
+  catalog: string;
+  schema: string;
+}
+
+enum SchemaActionsEnum {
+  Delete,
+}
+
+export default function SchemaActionsDropdown({
+  catalog,
+  schema,
+}: SchemaActionDropdownProps) {
+  const [dropdownVisible, setDropdownVisible] = useState<boolean>(false);
+  const [action, setAction] = useState<SchemaActionsEnum | null>(null);
+
+  const menuItems = useMemo(
+    (): MenuProps['items'] => [
+      {
+        key: 'deleteSchema',
+        label: 'Delete Schema',
+        onClick: () => setAction(SchemaActionsEnum.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>
+      <DeleteSchemaModal
+        open={action === SchemaActionsEnum.Delete}
+        closeModal={() => setAction(null)}
+        catalog={catalog}
+        schema={schema}
+      />
+    </>
+  );
+}

ui/src/hooks/schemas.tsx

@@ -90,3 +90,39 @@ export function useCreateSchema({
     },
   });
 }
+
+export interface DeleteSchemaMutationParams
+  extends Pick<SchemaInterface, 'catalog_name' | 'name'> {}
+
+interface DeleteSchemaParams {
+  onSuccessCallback?: () => void;
+  catalog: string;
+}
+
+export function useDeleteSchema({
+  onSuccessCallback,
+  catalog,
+}: DeleteSchemaParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation<void, Error, DeleteSchemaMutationParams>({
+    mutationFn: async (params: DeleteSchemaMutationParams) => {
+      const response = await fetch(
+        `${UC_API_PREFIX}/schemas/${params.catalog_name}.${params.name}`,
+        {
+          method: 'DELETE',
+        },
+      );
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to delete schema');
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['listSchemas', catalog],
+      });
+      onSuccessCallback?.();
+    },
+  });
+}

ui/src/pages/SchemaDetails.tsx

@@ -10,6 +10,7 @@ import VolumesList from '../components/volumes/VolumesList';
 import FunctionsList from '../components/functions/FunctionsList';
 import { DatabaseOutlined } from '@ant-design/icons';
 import CreateAssetsDropdown from '../components/schemas/CreateAssetsDropdown';
+import SchemaActionsDropdown from '../components/schemas/SchemaActionDropdown';
 
 export default function SchemaDetails() {
   const { catalog, schema } = useParams();
@@ -28,7 +29,10 @@ export default function SchemaDetails() {
           <Typography.Title level={3}>
             <DatabaseOutlined /> {schemaFullName}
           </Typography.Title>
-          <CreateAssetsDropdown catalog={catalog} schema={schema} />
+          <Flex gap="middle">
+            <SchemaActionsDropdown catalog={catalog} schema={schema} />
+            <CreateAssetsDropdown catalog={catalog} schema={schema} />
+          </Flex>
         </Flex>
       }
       breadcrumbs={[