Add support to edit volume description (#68)

src/components/modals/EditVolumeDescriptionModal.tsx

@@ -0,0 +1,60 @@
+import { Button, Form, Modal, Typography } from 'antd';
+import React, { useCallback, useRef } from 'react';
+import TextArea from 'antd/es/input/TextArea';
+import { UpdateVolumeMutationParams } from '../../hooks/volumes';
+
+interface EditVolumeDescriptionModalProps {
+  open: boolean;
+  volume: UpdateVolumeMutationParams;
+  closeModal: () => void;
+  onSubmit: (comment: UpdateVolumeMutationParams) => void;
+  loading: boolean;
+}
+
+export function EditVolumeDescriptionModal({
+  open,
+  volume,
+  closeModal,
+  onSubmit,
+  loading,
+}: EditVolumeDescriptionModalProps) {
+  const submitRef = useRef<HTMLButtonElement>(null);
+
+  const handleSubmit = useCallback(() => {
+    submitRef.current?.click();
+  }, []);
+
+  return (
+    <Modal
+      title={<Typography.Title level={4}>Edit description</Typography.Title>}
+      okText="Save"
+      cancelText="Cancel"
+      open={open}
+      destroyOnClose
+      onCancel={closeModal}
+      onOk={handleSubmit}
+      okButtonProps={{ loading: loading }}
+    >
+      <Typography.Paragraph type="secondary">
+        Volume description
+      </Typography.Paragraph>
+      <Form<UpdateVolumeMutationParams>
+        layout="vertical"
+        onFinish={(values) => {
+          onSubmit(values);
+        }}
+        name="Edit description form"
+        initialValues={{ comment: volume.comment }}
+      >
+        <Form.Item name="comment">
+          <TextArea />
+        </Form.Item>
+        <Form.Item hidden>
+          <Button type="primary" htmlType="submit" ref={submitRef}>
+            Create
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}

src/hooks/volumes.tsx

@@ -70,6 +70,50 @@ export function useGetVolume({ catalog, schema, volume }: GetVolumeParams) {
   });
 }
 
+interface UpdateVolumeParams {
+  catalog: string;
+  schema: string;
+  volume: string;
+}
+
+export interface UpdateVolumeMutationParams
+  extends Pick<VolumeInterface, 'name' | 'comment'> {}
+
+export function useUpdateVolume({
+  catalog,
+  schema,
+  volume,
+}: UpdateVolumeParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation<VolumeInterface, Error, UpdateVolumeMutationParams>({
+    mutationFn: async (params: UpdateVolumeMutationParams) => {
+      const fullVolumeName = [catalog, schema, volume].join('.');
+
+      const response = await fetch(
+        `${UC_API_PREFIX}/volumes/${fullVolumeName}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(params),
+        },
+      );
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to update volume');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['getVolume', catalog, schema, volume],
+      });
+    },
+  });
+}
+
 export interface DeleteVolumeMutationParams
   extends Pick<VolumeInterface, 'catalog_name' | 'schema_name' | 'name'> {}
 

src/pages/VolumeDetails.tsx

@@ -1,59 +1,92 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import DetailsLayout from '../components/layouts/DetailsLayout';
 import { Flex, Typography } from 'antd';
 import DescriptionBox from '../components/DescriptionBox';
-import { useGetVolume } from '../hooks/volumes';
+import { useGetVolume, useUpdateVolume } from '../hooks/volumes';
 import VolumeSidebar from '../components/volumes/VolumeSidebar';
 import { FolderOutlined } from '@ant-design/icons';
 import VolumeActionsDropdown from '../components/volumes/VolumeActionsDropdown';
+import { EditVolumeDescriptionModal } from '../components/modals/EditVolumeDescriptionModal';
+import { useNotification } from '../utils/NotificationContext';
 
 export default function VolumeDetails() {
   const { catalog, schema, volume } = useParams();
   if (!catalog) throw new Error('Catalog name is required');
   if (!schema) throw new Error('Schema name is required');
-  if (!volume) throw new Error('Table name is required');
+  if (!volume) throw new Error('Volume name is required');
 
   const { data } = useGetVolume({ catalog, schema, volume });
+  const [open, setOpen] = useState<boolean>(false);
+  const { setNotification } = useNotification();
+  const mutation = useUpdateVolume({ catalog, schema, volume });
 
   if (!data) return null;
 
   const volumeFullName = [catalog, schema, volume].join('.');
   return (
-    <DetailsLayout
-      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' },
-        {
-          title: <Link to={`/data/${catalog}`}>{catalog}</Link>,
-          key: '_catalog',
-        },
-        {
-          title: <Link to={`/data/${catalog}/${schema}`}>{schema}</Link>,
-          key: '_schema',
-        },
-        { title: volume, key: '_volume' },
-      ]}
-    >
-      <DetailsLayout.Content>
-        <Flex vertical gap="middle">
-          <DescriptionBox comment={data.comment} />
-        </Flex>
-      </DetailsLayout.Content>
-      <DetailsLayout.Aside>
-        <VolumeSidebar catalog={catalog} schema={schema} volume={volume} />
-      </DetailsLayout.Aside>
-    </DetailsLayout>
+    <>
+      <DetailsLayout
+        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' },
+          {
+            title: <Link to={`/data/${catalog}`}>{catalog}</Link>,
+            key: '_catalog',
+          },
+          {
+            title: <Link to={`/data/${catalog}/${schema}`}>{schema}</Link>,
+            key: '_schema',
+          },
+          { title: volume, key: '_volume' },
+        ]}
+      >
+        <DetailsLayout.Content>
+          <Flex vertical gap="middle">
+            <DescriptionBox
+              comment={data.comment}
+              onEdit={() => setOpen(true)}
+            />
+          </Flex>
+        </DetailsLayout.Content>
+        <DetailsLayout.Aside>
+          <VolumeSidebar catalog={catalog} schema={schema} volume={volume} />
+        </DetailsLayout.Aside>
+      </DetailsLayout>
+      <EditVolumeDescriptionModal
+        open={open}
+        volume={data}
+        closeModal={() => setOpen(false)}
+        onSubmit={(values) =>
+          mutation.mutate(
+            { ...values, name: volume },
+            {
+              onError: (error: Error) => {
+                setNotification(error.message, 'error');
+              },
+              onSuccess: (volume) => {
+                setNotification(
+                  `${volume.name} volume successfully updated`,
+                  'success',
+                );
+                setOpen(false);
+              },
+            },
+          )
+        }
+        loading={mutation.isPending}
+      />
+    </>
   );
 }