add copy button on collection page title

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/components/advancedSearch/CopyButton.tsx

@@ -34,8 +34,7 @@ const CopyButton: FC<CopyButtonProps> = props => {
   const handleClick = (event: React.MouseEvent<HTMLElement>, v: string) => {
     event.stopPropagation();
 
-    // for non-string or number value, convert to string
-    if (typeof v !== 'string' || typeof v !== 'number') {
+    if (typeof v === 'object' ) {
       v = JSON.stringify(v);
     }
 

client/src/pages/databases/Databases.tsx

@@ -15,6 +15,7 @@ import { dataContext, authContext } from '@/context';
 import Collections from './collections/Collections';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import RefreshButton from './RefreshButton';
+import CopyButton from '@/components/advancedSearch/CopyButton';
 import { CollectionObject } from '@server/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -38,6 +39,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflowX: 'auto',
     padding: theme.spacing(0, 2),
   },
+  headerIcon: {
+    marginLeft: theme.spacing(0.5),
+    '& svg': {
+      fontSize: 15,
+      color: theme.palette.primary.main,
+    },
+  },
 }));
 
 // Databases page(tree and tabs)
@@ -62,11 +70,19 @@ const Databases = () => {
     collectionName,
     databaseName,
     extra: (
-      <RefreshButton
-        onClick={async () => {
-          await fetchCollection(collectionName);
-        }}
-      />
+      <>
+        <CopyButton
+          label=""
+          value={collectionName}
+          className={classes.headerIcon}
+        />
+        <RefreshButton
+          className={classes.headerIcon}
+          onClick={async () => {
+            await fetchCollection(collectionName);
+          }}
+        />
+      </>
     ),
   });
 

client/src/pages/databases/RefreshButton.tsx

@@ -2,18 +2,9 @@ import { useState, MouseEvent } from 'react';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 
-import { IconButtonProps, makeStyles, Theme } from '@material-ui/core';
+import { IconButtonProps } from '@material-ui/core';
 import icons from '@/components/icons/Icons';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  rotatingRefreshButton: {
-    ' & svg': {
-      color: theme.palette.primary.main,
-    },
-    marginLeft: 4,
-  },
-}));
-
 const RefreshButton = (props: IconButtonProps & { tooltip?: string }) => {
   // props
   const { onClick, ...otherProps } = props;
@@ -22,7 +13,6 @@ const RefreshButton = (props: IconButtonProps & { tooltip?: string }) => {
 
   // icon
   const RefreshIcon = icons.refresh;
-  const classes = useStyles();
 
   const onBtnClicked = async (event: MouseEvent<HTMLButtonElement>) => {
     setIsLoading(true);
@@ -36,7 +26,7 @@ const RefreshButton = (props: IconButtonProps & { tooltip?: string }) => {
 
   return (
     <CustomIconButton
-      className={classes.rotatingRefreshButton}
+      className={props.className}
       {...otherProps}
       onClick={onBtnClicked}
       style={{}}