Support Context menu on the tree

client/src/i18n/cn/action.ts

@@ -0,0 +1,15 @@
+const actionTrans = {
+  createCollection: '创建 Collection',
+  dropCollection: '删除 Collection',
+  loadCollection: '加载 Collection',
+  renameCollection: '重命名 Collection',
+  releaseCollection: '释放 Collection',
+  dropDatabase: '删除 Database',
+  createDatabase: '创建 Database',
+  emptyCollection: '清空 Collection',
+  flushCollection: '数据落盘 (Flush)',
+  importFile: '导入文件',
+  insertSampleData: '插入示例数据',
+};
+
+export default actionTrans;

client/src/i18n/en/action.ts

@@ -0,0 +1,15 @@
+const actionTrans = {
+  createCollection: 'Create Collection',
+  dropCollection: 'Drop Collection',
+  loadCollection: 'Load Collection',
+  renameCollection: 'Rename Collection',
+  releaseCollection: 'Release Collection',
+  dropDatabase: 'Drop Database',
+  createDatabase: 'Create Database',
+  emptyCollection: 'Empty Collection',
+  flushCollection: 'Flush Collection',
+  importFile: 'Import File',
+  insertSampleData: 'Insert Sample Data',
+};
+
+export default actionTrans;

client/src/i18n/index.ts

@@ -36,6 +36,8 @@ import prometheusTransEn from './en/prometheus';
 import prometheusTransCn from './cn/prometheus';
 import propertiesEn from './en/properties';
 import propertiesCn from './cn/properties';
+import actionEn from './en/action';
+import actionCn from './cn/action';
 
 export const resources = {
   'zh-CN': {
@@ -56,6 +58,7 @@ export const resources = {
     database: databaseTransCn,
     prometheus: prometheusTransCn,
     properties: propertiesCn,
+    action: actionCn,
   },
   en: {
     translation: commonEn,
@@ -75,6 +78,7 @@ export const resources = {
     database: databaseTransEn,
     prometheus: prometheusTransEn,
     properties: propertiesEn,
+    action: actionEn,
   },
 };
 

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -240,11 +240,6 @@ const CollectionData = (props: CollectionDataProps) => {
             component: (
               <EmptyDataDialog
                 cb={async () => {
-                  openSnackBar(
-                    successTrans('empty', {
-                      name: collectionTrans('collection'),
-                    })
-                  );
                   await onDelete();
                 }}
                 collection={collection!}

client/src/pages/databases/tree/TreeContextMenu.tsx

@@ -0,0 +1,221 @@
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { rootContext, dataContext } from '@/context';
+import CreateCollectionDialog from '@/pages/dialogs/CreateCollectionDialog';
+import LoadCollectionDialog from '@/pages/dialogs/LoadCollectionDialog';
+import ReleaseCollectionDialog from '@/pages/dialogs/ReleaseCollectionDialog';
+import DropCollectionDialog from '@/pages/dialogs/DropCollectionDialog';
+import RenameCollectionDialog from '@/pages/dialogs/RenameCollectionDialog';
+import InsertDialog from '@/pages/dialogs/insert/Dialog';
+import ImportSampleDialog from '@/pages/dialogs/ImportSampleDialog';
+import EmptyDataDialog from '@/pages/dialogs/EmptyDataDialog';
+import { MenuItem, Divider } from '@mui/material';
+import { ContextMenu } from './types';
+import { useStyles } from './style';
+import { CollectionObject } from '@server/types';
+
+export const TreeContextMenu = (props: {
+  onClick: Function;
+  contextMenu: ContextMenu;
+}) => {
+  // hooks
+  const { setDialog } = useContext(rootContext);
+  const { fetchCollection } = useContext(dataContext);
+  const classes = useStyles();
+  // props
+  const { contextMenu, onClick } = props;
+  // i18n
+  const { t: actionTrans } = useTranslation('action');
+
+  // render menu
+  if (!contextMenu) {
+    return null;
+  }
+
+  switch (contextMenu.nodeType) {
+    case 'db':
+      return (
+        <>
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: <CreateCollectionDialog />,
+                },
+              });
+            }}
+          >
+            {actionTrans('createCollection')}
+          </MenuItem>
+          {/* 
+          <MenuItem
+            className={classes.menuItem}
+            disabled={true}
+            onClick={() => handleMenuClick('Delete')}
+          >
+            {actionTrans('dropDatabase')}
+          </MenuItem> */}
+        </>
+      );
+
+    case 'collection':
+      return (
+        <>
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <LoadCollectionDialog
+                      collection={contextMenu.object as CollectionObject}
+                      onLoad={async () => {}}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('loadCollection')}
+          </MenuItem>
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <ReleaseCollectionDialog
+                      collection={contextMenu.object as CollectionObject}
+                      onRelease={async () => {}}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('releaseCollection')}
+          </MenuItem>
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <RenameCollectionDialog
+                      collection={contextMenu.object as CollectionObject}
+                      cb={async () => {}}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('renameCollection')}
+          </MenuItem>
+
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <DropCollectionDialog
+                      collections={[contextMenu.object] as CollectionObject[]}
+                      onDelete={async () => {}}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('dropCollection')}
+          </MenuItem>
+
+          <Divider />
+
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              const collection = contextMenu.object as CollectionObject;
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <InsertDialog
+                      defaultSelectedCollection={collection.collection_name}
+                      // user can't select partition on collection page, so default value is ''
+                      defaultSelectedPartition={''}
+                      collections={[collection!]}
+                      onInsert={async () => {
+                        fetchCollection(collection.collection_name);
+                      }}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('importFile')}
+          </MenuItem>
+
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              const collection = contextMenu.object as CollectionObject;
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <ImportSampleDialog
+                      collection={collection}
+                      cb={async () => {
+                        fetchCollection(collection.collection_name);
+                      }}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('insertSampleData')}
+          </MenuItem>
+
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => {
+              const collection = contextMenu.object as CollectionObject;
+              setDialog({
+                open: true,
+                type: 'custom',
+                params: {
+                  component: (
+                    <EmptyDataDialog
+                      collection={collection}
+                      cb={async () => {
+                        fetchCollection(collection.collection_name);
+                      }}
+                    />
+                  ),
+                },
+              });
+            }}
+          >
+            {actionTrans('emptyCollection')}
+          </MenuItem>
+        </>
+      );
+  }
+};