Add ability to edit catalog description (#63)

* Add ability to edit catalog description edit modal is made to support more fields in the future if we want to edit more than just description * lint * feedback Co-authored-by: Shawn Chen <[email protected]> --------- Co-authored-by: Shawn Chen <[email protected]>
unitycatalog · Aug 12, 2024 · 6ef82e2 · 6ef82e2
1 parent dd4f528
commit 6ef82e2
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 31 deletions.
diff --git a/src/components/DescriptionBox.tsx b/src/components/DescriptionBox.tsx
@@ -1,14 +1,22 @@
-import { Typography } from 'antd';
+import { Button, Typography } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
 
 interface DescriptionBoxProps {
   comment: string;
+  onEdit?: () => void;
 }
 
-export default function DescriptionBox({ comment }: DescriptionBoxProps) {
+export default function DescriptionBox({
+  comment,
+  onEdit,
+}: DescriptionBoxProps) {
   return (
     <div>
-      <Typography.Title level={5}>Description</Typography.Title>
+      <Typography.Title level={5}>
+        Description {comment && <EditOutlined onClick={onEdit} />}
+      </Typography.Title>
       <Typography.Text type="secondary">{comment}</Typography.Text>
+      {!comment && <Button onClick={onEdit}>Add description</Button>}
     </div>
   );
 }
diff --git a/src/components/modals/EditCatalogDescriptionModal.tsx b/src/components/modals/EditCatalogDescriptionModal.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 { UpdateCatalogMutationParams } from '../../hooks/catalog';
+
+interface EditCatalogDescriptionModalProps {
+  open: boolean;
+  catalog: UpdateCatalogMutationParams;
+  closeModal: () => void;
+  onSubmit: (comment: UpdateCatalogMutationParams) => void;
+  loading: boolean;
+}
+
+export function EditCatalogDescriptionModal({
+  open,
+  catalog,
+  closeModal,
+  onSubmit,
+  loading,
+}: EditCatalogDescriptionModalProps) {
+  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">
+        Catalog description
+      </Typography.Paragraph>
+      <Form<UpdateCatalogMutationParams>
+        layout="vertical"
+        onFinish={(values) => {
+          onSubmit(values);
+        }}
+        name="Edit description form"
+        initialValues={{ comment: catalog.comment }}
+      >
+        <Form.Item name="comment">
+          <TextArea />
+        </Form.Item>
+        <Form.Item hidden>
+          <Button type="primary" htmlType="submit" ref={submitRef}>
+            Create
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
diff --git a/src/hooks/catalog.tsx b/src/hooks/catalog.tsx
@@ -76,6 +76,36 @@ export function useCreateCatalog() {
   });
 }
 
+export interface UpdateCatalogMutationParams
+  extends Pick<CatalogInterface, 'name' | 'comment'> {}
+
+// Update a new catalog
+export function useUpdateCatalog() {
+  const queryClient = useQueryClient();
+
+  return useMutation<CatalogInterface, Error, UpdateCatalogMutationParams>({
+    mutationFn: async (params: UpdateCatalogMutationParams) => {
+      const response = await fetch(`${UC_API_PREFIX}/catalogs/${params.name}`, {
+        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 catalog');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['getCatalog', params.name],
+      });
+    },
+  });
+}
+
 export interface DeleteCatalogMutationParams
   extends Pick<CatalogInterface, 'name'> {}
 

diff --git a/src/pages/CatalogDetails.tsx b/src/pages/CatalogDetails.tsx
@@ -1,50 +1,83 @@
-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 { useGetCatalog } from '../hooks/catalog';
+import { useGetCatalog, useUpdateCatalog } from '../hooks/catalog';
 import SchemasList from '../components/schemas/SchemasList';
 import DescriptionBox from '../components/DescriptionBox';
 import CatalogSidebar from '../components/catalogs/CatalogSidebar';
 import { ProductOutlined } from '@ant-design/icons';
 import CreateSchemaAction from '../components/schemas/CreateSchemaAction';
 import CatalogActionDropdown from '../components/catalogs/CatalogActionDropdown';
+import { EditCatalogDescriptionModal } from '../components/modals/EditCatalogDescriptionModal';
+import { useNotification } from '../utils/NotificationContext';
 
 export default function CatalogDetails() {
   const { catalog } = useParams();
   if (!catalog) throw new Error('Catalog name is required');
 
   const { data } = useGetCatalog({ catalog });
+  const [open, setOpen] = useState<boolean>(false);
+  const { setNotification } = useNotification();
+  const mutation = useUpdateCatalog();
 
   if (!data) return null;
 
   return (
-    <DetailsLayout
-      title={
-        <Flex justify="space-between" align="flex-start" gap="middle">
-          <Typography.Title level={3}>
-            <ProductOutlined /> {catalog}
-          </Typography.Title>
-          <Flex gap="middle">
-            <CatalogActionDropdown catalog={catalog} />
-            <CreateSchemaAction catalog={catalog} />
+    <>
+      <DetailsLayout
+        title={
+          <Flex justify="space-between" align="flex-start" gap="middle">
+            <Typography.Title level={3}>
+              <ProductOutlined /> {catalog}
+            </Typography.Title>
+            <Flex gap="middle">
+              <CatalogActionDropdown catalog={catalog} />
+              <CreateSchemaAction catalog={catalog} />
+            </Flex>
           </Flex>
-        </Flex>
-      }
-      breadcrumbs={[
-        { title: <Link to="/">Catalogs</Link>, key: '_home' },
-        { title: catalog, key: '_catalog' },
-      ]}
-    >
-      <DetailsLayout.Content>
-        <Flex vertical gap="middle">
-          <DescriptionBox comment={data.comment} />
-          <SchemasList catalog={catalog} />
-        </Flex>
-      </DetailsLayout.Content>
-      <DetailsLayout.Aside>
-        <CatalogSidebar catalog={catalog} />
-      </DetailsLayout.Aside>
-    </DetailsLayout>
+        }
+        breadcrumbs={[
+          { title: <Link to="/">Catalogs</Link>, key: '_home' },
+          { title: catalog, key: '_catalog' },
+        ]}
+      >
+        <DetailsLayout.Content>
+          <Flex vertical gap="middle">
+            <DescriptionBox
+              comment={data.comment}
+              onEdit={() => setOpen(true)}
+            />
+            <SchemasList catalog={catalog} />
+          </Flex>
+        </DetailsLayout.Content>
+        <DetailsLayout.Aside>
+          <CatalogSidebar catalog={catalog} />
+        </DetailsLayout.Aside>
+      </DetailsLayout>
+      <EditCatalogDescriptionModal
+        open={open}
+        catalog={data}
+        closeModal={() => setOpen(false)}
+        onSubmit={(values) =>
+          mutation.mutate(
+            { ...values, name: data.name },
+            {
+              onError: (error: Error) => {
+                setNotification(error.message, 'error');
+              },
+              onSuccess: (catalog) => {
+                setNotification(
+                  `${catalog.name} catalog successfully updated`,
+                  'success',
+                );
+                setOpen(false);
+              },
+            },
+          )
+        }
+        loading={mutation.isPending}
+      />
+    </>
   );
 }