support rename oollection on the schema page

Signed-off-by: shanghaikid <jiangruiyi@gmail.com>
zilliztech · Dec 21, 2024 · 797e35e · 797e35e
1 parent a8b17ce
commit 797e35e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/client/src/pages/databases/collections/schema/Schema.tsx b/client/src/pages/databases/collections/schema/Schema.tsx
@@ -1,6 +1,6 @@
 import { Typography, Chip, Tooltip } from '@mui/material';
 import { useContext } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
@@ -15,16 +15,19 @@ import { FieldObject } from '@server/types';
 import { useStyles } from './Styles';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
+import RenameCollectionDialog from '@/pages/dialogs/RenameCollectionDialog';
 import CopyButton from '@/components/advancedSearch/CopyButton';
 import RefreshButton from '@/components/customButton/RefreshButton';
 import { CollectionService } from '@/http';
 
 const Overview = () => {
-  const { fetchCollection, collections, loading } = useContext(dataContext);
+  const { fetchCollection, collections, loading, database } =
+    useContext(dataContext);
   const { data } = useContext(systemContext);
   const { setDialog } = useContext(rootContext);
 
   const { collectionName = '' } = useParams<{ collectionName: string }>();
+  const navigate = useNavigate();
   const classes = useStyles();
   const { t: collectionTrans } = useTranslation('collection');
   const { t: indexTrans } = useTranslation('index');
@@ -275,6 +278,32 @@ const Overview = () => {
                 <p title={collection.collection_name}>
                   {collection.collection_name}
                 </p>
+                <RefreshButton
+                  className={classes.extraBtn}
+                  onClick={async () => {
+                    setDialog({
+                      open: true,
+                      type: 'custom',
+                      params: {
+                        component: (
+                          <RenameCollectionDialog
+                            collection={collection}
+                            cb={async newName => {
+                              await fetchCollection(newName);
+
+                              // update collection name in the route url;
+                              navigate(
+                                `/databases/${database}/${newName}/schema`
+                              );
+                            }}
+                          />
+                        ),
+                      },
+                    });
+                  }}
+                  tooltip={btnTrans('rename')}
+                  icon={<Icons.edit />}
+                />
                 <CopyButton
                   className={classes.extraBtn}
                   label={collection.collection_name}

diff --git a/client/src/pages/databases/tree/TreeContextMenu.tsx b/client/src/pages/databases/tree/TreeContextMenu.tsx
@@ -1,5 +1,6 @@
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { rootContext, dataContext } from '@/context';
 import CreateCollectionDialog from '@/pages/dialogs/CreateCollectionDialog';
 import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
@@ -20,7 +21,9 @@ export const TreeContextMenu = (props: {
 }) => {
   // hooks
   const { setDialog } = useContext(rootContext);
-  const { fetchCollection } = useContext(dataContext);
+  const { fetchCollection, database } = useContext(dataContext);
+  const navigate = useNavigate();
+
   const classes = useStyles();
   // props
   const { contextMenu, onClick } = props;
@@ -114,7 +117,12 @@ export const TreeContextMenu = (props: {
                   component: (
                     <RenameCollectionDialog
                       collection={contextMenu.object as CollectionObject}
-                      cb={async () => {}}
+                      cb={async newName => {
+                        await fetchCollection(newName);
+
+                        // update collection name in the route url;
+                        navigate(`/databases/${database}/${newName}/schema`);
+                      }}
                     />
                   ),
                 },