Add ability to edit schema description (#69)

closes #39

src/components/modals/EditSchemaDescriptionModal.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 { UpdateSchemaMutationParams } from '../../hooks/schemas';
+
+interface EditSchemaDescriptionModalProps {
+  open: boolean;
+  schema: UpdateSchemaMutationParams;
+  closeModal: () => void;
+  onSubmit: (comment: UpdateSchemaMutationParams) => void;
+  loading: boolean;
+}
+
+export function EditSchemaDescriptionModal({
+  open,
+  schema,
+  closeModal,
+  onSubmit,
+  loading,
+}: EditSchemaDescriptionModalProps) {
+  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">
+        Schema description
+      </Typography.Paragraph>
+      <Form<UpdateSchemaMutationParams>
+        layout="vertical"
+        onFinish={(values) => {
+          onSubmit(values);
+        }}
+        name="Edit description form"
+        initialValues={{ comment: schema.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/schemas.tsx

@@ -83,6 +83,47 @@ export function useCreateSchema() {
     },
   });
 }
+// =========================
+interface UpdateSchemaParams {
+  catalog: string;
+  schema: string;
+}
+export interface UpdateSchemaMutationParams
+  extends Pick<SchemaInterface, 'name' | 'comment'> {}
+
+// Update a new schema
+export function useUpdateSchema({ catalog, schema }: UpdateSchemaParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation<SchemaInterface, Error, UpdateSchemaMutationParams>({
+    mutationFn: async (params: UpdateSchemaMutationParams) => {
+      const fullSchemaName = [catalog, schema].join('.');
+
+      const response = await fetch(
+        `${UC_API_PREFIX}/schemas/${fullSchemaName}`,
+        {
+          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 schema');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['getSchema', catalog, schema],
+      });
+    },
+  });
+}
+
+// =========================
 
 export interface DeleteSchemaMutationParams
   extends Pick<SchemaInterface, 'catalog_name' | 'name'> {}

src/pages/SchemaDetails.tsx

@@ -1,59 +1,94 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import DetailsLayout from '../components/layouts/DetailsLayout';
 import { Flex, Radio, Typography } from 'antd';
 import DescriptionBox from '../components/DescriptionBox';
-import { useGetSchema } from '../hooks/schemas';
+import { useGetSchema, useUpdateSchema } from '../hooks/schemas';
 import SchemaSidebar from '../components/schemas/SchemaSidebar';
 import TablesList from '../components/tables/TablesList';
 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';
+import { EditSchemaDescriptionModal } from '../components/modals/EditSchemaDescriptionModal';
+import { useNotification } from '../utils/NotificationContext';
 
 export default function SchemaDetails() {
   const { catalog, schema } = useParams();
   if (!catalog) throw new Error('Catalog name is required');
   if (!schema) throw new Error('Schema name is required');
 
   const { data } = useGetSchema({ catalog, schema });
-  const schemaFullName = [catalog, schema].join('.');
+  const [open, setOpen] = useState<boolean>(false);
+  const { setNotification } = useNotification();
+  // const mutation = useUpdateSchema();
+  const mutation = useUpdateSchema({ catalog, schema });
 
   if (!data) return null;
 
+  const schemaFullName = [catalog, schema].join('.');
+
   return (
-    <DetailsLayout
-      title={
-        <Flex justify="space-between" align="flex-start" gap="middle">
-          <Typography.Title level={3}>
-            <DatabaseOutlined /> {schemaFullName}
-          </Typography.Title>
-          <Flex gap="middle">
-            <SchemaActionsDropdown catalog={catalog} schema={schema} />
-            <CreateAssetsDropdown catalog={catalog} schema={schema} />
+    <>
+      <DetailsLayout
+        title={
+          <Flex justify="space-between" align="flex-start" gap="middle">
+            <Typography.Title level={3}>
+              <DatabaseOutlined /> {schemaFullName}
+            </Typography.Title>
+            <Flex gap="middle">
+              <SchemaActionsDropdown catalog={catalog} schema={schema} />
+              <CreateAssetsDropdown catalog={catalog} schema={schema} />
+            </Flex>
           </Flex>
-        </Flex>
-      }
-      breadcrumbs={[
-        { title: <Link to="/">Catalogs</Link>, key: '_home' },
-        {
-          title: <Link to={`/data/${catalog}`}>{catalog}</Link>,
-          key: '_catalog',
-        },
-        { title: schema, key: '_schema' },
-      ]}
-    >
-      <DetailsLayout.Content>
-        <Flex vertical gap="middle">
-          <DescriptionBox comment={data.comment} />
-          <SchemaDetailsTabs catalog={catalog} schema={schema} />
-        </Flex>
-      </DetailsLayout.Content>
-      <DetailsLayout.Aside>
-        <SchemaSidebar catalog={catalog} schema={schema} />
-      </DetailsLayout.Aside>
-    </DetailsLayout>
+        }
+        breadcrumbs={[
+          { title: <Link to="/">Catalogs</Link>, key: '_home' },
+          {
+            title: <Link to={`/data/${catalog}`}>{catalog}</Link>,
+            key: '_catalog',
+          },
+          { title: schema, key: '_schema' },
+        ]}
+      >
+        <DetailsLayout.Content>
+          <Flex vertical gap="middle">
+            <DescriptionBox
+              comment={data.comment}
+              onEdit={() => setOpen(true)}
+            />
+            <SchemaDetailsTabs catalog={catalog} schema={schema} />
+          </Flex>
+        </DetailsLayout.Content>
+        <DetailsLayout.Aside>
+          <SchemaSidebar catalog={catalog} schema={schema} />
+        </DetailsLayout.Aside>
+      </DetailsLayout>
+      <EditSchemaDescriptionModal
+        open={open}
+        schema={data}
+        closeModal={() => setOpen(false)}
+        onSubmit={(values) =>
+          mutation.mutate(
+            { ...values, name: schema },
+            {
+              onError: (error: Error) => {
+                setNotification(error.message, 'error');
+              },
+              onSuccess: (schema) => {
+                setNotification(
+                  `${schema.name} schema successfully updated`,
+                  'success',
+                );
+                setOpen(false);
+              },
+            },
+          )
+        }
+        loading={mutation.isPending}
+      />
+    </>
   );
 }