feat: support copy collection ID (#915)

* feat: support copy collection ID

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* finish

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

---------

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/advancedSearch/CopyButton.tsx

@@ -8,12 +8,19 @@ import type { IconButtonProps } from '@mui/material';
 interface CopyButtonProps extends Omit<IconButtonProps, 'value'> {
   copyValue?: string | object;
   tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+  copyLabel?: string;
 }
 
 const CopyButton: FC<CopyButtonProps> = props => {
-  const { copyValue = '', tooltipPlacement = 'top', ...others } = props;
+  const {
+    copyValue = '',
+    tooltipPlacement = 'top',
+    copyLabel,
+    ...others
+  } = props;
   const { t: commonTrans } = useTranslation();
-  const [tooltipTitle, setTooltipTitle] = useState(commonTrans('copy.copy'));
+  const copyTooltip = commonTrans('copy.copy') + (copyLabel ? ` ${copyLabel}` : '');
+  const [tooltipTitle, setTooltipTitle] = useState(copyTooltip);
 
   const unsecuredCopyToClipboard = useCallback((v: string) => {
     const textArea = document.createElement('textarea');
@@ -46,7 +53,7 @@ const CopyButton: FC<CopyButtonProps> = props => {
       }
 
       setTimeout(() => {
-        setTooltipTitle(commonTrans('copy.copy'));
+        setTooltipTitle(copyTooltip);
       }, 1000);
     },
     [commonTrans, unsecuredCopyToClipboard, copyValue]

client/src/components/customButton/RefreshButton.tsx

@@ -44,11 +44,23 @@ const RefreshButton = ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
+        minWidth: '32px',
+        minHeight: '32px',
         ...otherProps.sx,
       }}
       {...otherProps}
     >
-      {isLoading ? <CircularProgress size={16} /> : icon || <RefreshIcon />}
+      <div
+        style={{
+          width: 16,
+          height: 16,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {isLoading ? <CircularProgress size={16} /> : icon || <RefreshIcon />}
+      </div>
     </IconButton>
   );
 

client/src/i18n/cn/collection.ts

@@ -1,6 +1,7 @@
 const collectionTrans = {
   noLoadData: '没有加载的 Collection',
   noData: '没有 Collection',
+  collectionId: 'Collection ID',
 
   rowCount: 'Entity 数量（大约）',
   count: 'Entity 数量',

client/src/i18n/en/collection.ts

@@ -1,6 +1,7 @@
 const collectionTrans = {
   noLoadData: 'No Loaded Collection',
   noData: 'No Collection',
+  collectionId: 'Collection ID',
 
   rowCount: 'Approx Count',
   count: 'Entity Count',

client/src/pages/databases/collections/schema/Schema.tsx

@@ -81,6 +81,7 @@ const Overview = () => {
                 color: f.name === '$meta' ? 'secondary.dark' : 'inherit',
                 fontStyle: f.name === '$meta' ? 'italic' : 'inherit',
               }}
+              component="div"
             >
               {f.name}
             </Typography>
@@ -352,8 +353,8 @@ const Overview = () => {
                   <RefreshButton
                     sx={{
                       '& svg': {
-                        width: 16,
-                        height: 16,
+                        width: 14,
+                        height: 14,
                       },
                     }}
                     onClick={async () => {
@@ -381,17 +382,18 @@ const Overview = () => {
                   <CopyButton
                     sx={{
                       '& svg': {
-                        width: 16,
-                        height: 16,
+                        width: 14,
+                        height: 14,
                       },
                     }}
-                    copyValue={collection.collection_name}
+                    copyValue={collection.id}
+                    copyLabel={`${collectionTrans('collectionId')}: ${collection.id}`}
                   />
                   <RefreshButton
                     sx={{
                       '& svg': {
-                        width: 16,
-                        height: 16,
+                        width: 14,
+                        height: 14,
                       },
                     }}
                     onClick={async () => {
@@ -415,8 +417,8 @@ const Overview = () => {
                   <RefreshButton
                     sx={{
                       '& svg': {
-                        width: 16,
-                        height: 16,
+                        width: 14,
+                        height: 14,
                       },
                     }}
                     onClick={() => {
@@ -441,8 +443,8 @@ const Overview = () => {
                   <RefreshButton
                     sx={{
                       '& svg': {
-                        width: 16,
-                        height: 16,
+                        width: 14,
+                        height: 14,
                       },
                     }}
                     tooltip={btnTrans('refresh')}

client/src/pages/databases/collections/schema/StyledComponents.tsx

@@ -40,10 +40,10 @@ export const Card = styled(Box)(({ theme }) => ({
 
 export const InfoRow = styled(Box)(({ theme }) => ({
   display: 'flex',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   gap: theme.spacing(1.5),
   '&:not(:last-child)': {
-    paddingBottom: theme.spacing(1),
+    padding: theme.spacing(0.5, 0),
   },
   [theme.breakpoints.down('md')]: {
     gap: theme.spacing(1),
@@ -59,7 +59,8 @@ export const InfoLabel = styled(Box)(({ theme }) => ({
   fontWeight: 400,
   minWidth: 80,
   flexShrink: 0,
-  paddingTop: '2px',
+  display: 'flex',
+  alignItems: 'center',
   [theme.breakpoints.down('md')]: {
     minWidth: 70,
     fontSize: 12,
@@ -71,12 +72,11 @@ export const InfoValue = styled(Box)(({ theme }) => ({
   fontSize: 14,
   fontWeight: 500,
   display: 'flex',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   gap: theme.spacing(1),
   flex: 1,
   minWidth: 0,
   flexWrap: 'nowrap',
-  overflow: 'hidden',
   [theme.breakpoints.down('md')]: {
     fontSize: 13,
     gap: theme.spacing(0.5),
@@ -102,10 +102,10 @@ export const InfoValue = styled(Box)(({ theme }) => ({
 export const ActionWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  gap: theme.spacing(0.5),
+  gap: theme.spacing(0.25),
   position: 'relative',
-  top: '-4px',
   marginLeft: 'auto',
+  height: '100%',
   [theme.breakpoints.down('md')]: {
     gap: theme.spacing(0.25),
   },