diff --git a/src/components/DescriptionBox.tsx b/src/components/DescriptionBox.tsx
index 4ca1002..bf01925 100644
--- 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 (
- Description
+
+ Description {comment && }
+
{comment}
+ {!comment && }
);
}
diff --git a/src/components/modals/EditCatalogDescriptionModal.tsx b/src/components/modals/EditCatalogDescriptionModal.tsx
new file mode 100644
index 0000000..682cde7
--- /dev/null
+++ 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(null);
+
+ const handleSubmit = useCallback(() => {
+ submitRef.current?.click();
+ }, []);
+
+ return (
+ Edit description}
+ okText="Save"
+ cancelText="Cancel"
+ open={open}
+ destroyOnClose
+ onCancel={closeModal}
+ onOk={handleSubmit}
+ okButtonProps={{ loading: loading }}
+ >
+
+ Catalog description
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/hooks/catalog.tsx b/src/hooks/catalog.tsx
index 7403fe7..f734633 100644
--- a/src/hooks/catalog.tsx
+++ b/src/hooks/catalog.tsx
@@ -76,6 +76,36 @@ export function useCreateCatalog() {
});
}
+export interface UpdateCatalogMutationParams
+ extends Pick {}
+
+// Update a new catalog
+export function useUpdateCatalog() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ 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 {}
diff --git a/src/pages/CatalogDetails.tsx b/src/pages/CatalogDetails.tsx
index 4628195..9851a1d 100644
--- 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(false);
+ const { setNotification } = useNotification();
+ const mutation = useUpdateCatalog();
if (!data) return null;
return (
-
-
- {catalog}
-
-
-
-
+ <>
+
+
+ {catalog}
+
+
+
+
+
-
- }
- breadcrumbs={[
- { title: Catalogs, key: '_home' },
- { title: catalog, key: '_catalog' },
- ]}
- >
-
-
-
-
-
-
-
-
-
-
+ }
+ breadcrumbs={[
+ { title: Catalogs, key: '_home' },
+ { title: catalog, key: '_catalog' },
+ ]}
+ >
+
+
+ setOpen(true)}
+ />
+
+
+
+
+
+
+
+ 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}
+ />
+ >
);
}