Add ability to update function description

fixes #42

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

@@ -77,6 +77,56 @@ export function useGetFunction({
   });
 }
 
+interface UpdateFunctionParams {
+  catalog: string;
+  schema: string;
+  ucFunction: string;
+}
+export interface UpdateFunctionMutationParams
+  extends Pick<FunctionInterface, 'name' | 'comment'> {}
+
+// Update a new function
+export function useUpdateFunction({
+  catalog,
+  schema,
+  ucFunction,
+}: UpdateFunctionParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation<FunctionInterface, Error, UpdateFunctionMutationParams>({
+    mutationFn: async (params: UpdateFunctionMutationParams) => {
+      const fullFunctionName = [catalog, schema, ucFunction].join('.');
+
+      const response = await fetch(
+        `${UC_API_PREFIX}/functions/${fullFunctionName}`,
+        {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(params),
+        },
+      );
+
+      const contentType = response.headers.get('content-type');
+      if (contentType && contentType.includes('application/json')) {
+        const jsonData = await response.json();
+        if (!response.ok) {
+          throw new Error(jsonData.message || 'Failed to update function');
+        }
+        return jsonData;
+      } else {
+        throw new Error('Unexpected response format');
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['getFunction', catalog, schema, ucFunction],
+      });
+    },
+  });
+}
+
 export interface DeleteFunctionMutationParams
   extends Pick<FunctionInterface, 'catalog_name' | 'schema_name' | 'name'> {}
 

src/pages/FunctionDetails.tsx

@@ -1,64 +1,98 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import DetailsLayout from '../components/layouts/DetailsLayout';
 import FunctionSidebar from '../components/functions/FunctionSidebar';
-import { useGetFunction } from '../hooks/functions';
+import { useGetFunction, useUpdateFunction } from '../hooks/functions';
 import DescriptionBox from '../components/DescriptionBox';
 import { Flex, Typography } from 'antd';
 import { FunctionOutlined } from '@ant-design/icons';
 import CodeBox from '../components/CodeBox';
 import FunctionActionsDropdown from '../components/functions/FunctionActionsDropdown';
 
+import { useNotification } from '../utils/NotificationContext';
+import { EditFunctionDescriptionModal } from '../components/modals/EditFunctionDescriptionModal';
+
 export default function FunctionDetails() {
   const { catalog, schema, ucFunction } = useParams();
   if (!catalog) throw new Error('Catalog name is required');
   if (!schema) throw new Error('Schema name is required');
   if (!ucFunction) throw new Error('Function name is required');
 
   const { data } = useGetFunction({ catalog, schema, ucFunction });
+  const [open, setOpen] = useState<boolean>(false);
+  const { setNotification } = useNotification();
+  const mutation = useUpdateFunction({ catalog, schema, ucFunction });
 
   if (!data) return null;
 
   return (
-    <DetailsLayout
-      title={
-        <Flex justify="space-between" align="flex-start" gap="middle">
-          <Typography.Title level={3}>
-            <FunctionOutlined /> {ucFunction}
-          </Typography.Title>
-          <FunctionActionsDropdown
+    <>
+      <DetailsLayout
+        title={
+          <Flex justify="space-between" align="flex-start" gap="middle">
+            <Typography.Title level={3}>
+              <FunctionOutlined /> {ucFunction}
+            </Typography.Title>
+            <FunctionActionsDropdown
+              catalog={catalog}
+              schema={schema}
+              ucFunction={ucFunction}
+            />
+          </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: ucFunction, key: '_ucFunction' },
+        ]}
+      >
+        <DetailsLayout.Content>
+          <Flex vertical gap="middle">
+            <DescriptionBox
+              comment={data?.comment}
+              onEdit={() => setOpen(true)}
+            />
+            <CodeBox definition={data.routine_definition} />
+          </Flex>
+        </DetailsLayout.Content>
+        <DetailsLayout.Aside>
+          <FunctionSidebar
             catalog={catalog}
             schema={schema}
             ucFunction={ucFunction}
           />
-        </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: ucFunction, key: '_ucFunction' },
-      ]}
-    >
-      <DetailsLayout.Content>
-        <Flex vertical gap="middle">
-          <DescriptionBox comment={data?.comment} />
-          <CodeBox definition={data.routine_definition} />
-        </Flex>
-      </DetailsLayout.Content>
-      <DetailsLayout.Aside>
-        <FunctionSidebar
-          catalog={catalog}
-          schema={schema}
-          ucFunction={ucFunction}
-        />
-      </DetailsLayout.Aside>
-    </DetailsLayout>
+        </DetailsLayout.Aside>
+      </DetailsLayout>
+      <EditFunctionDescriptionModal
+        open={open}
+        ucFunction={data}
+        closeModal={() => setOpen(false)}
+        onSubmit={(values) =>
+          mutation.mutate(
+            { ...values, name: ucFunction },
+            {
+              onError: (error: Error) => {
+                setNotification(error.message, 'error');
+              },
+              onSuccess: (ucFunction) => {
+                setNotification(
+                  `${ucFunction.name} function successfully updated`,
+                  'success',
+                );
+                setOpen(false);
+              },
+            },
+          )
+        }
+        loading={mutation.isPending}
+      />
+    </>
   );
 }