add copy button for each query/preview cell (#372)

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

client/src/components/grid/Table.tsx

@@ -268,63 +268,42 @@ const EnhancedTable: FC<TableType> = props => {
                             style={cellStyle}
                           >
                             <div className={classes.cellContainer}>
-                              {row[colDef.id] &&
-                              typeof row[colDef.id] === 'string' ? (
-                                <Typography title={row[colDef.id]}>
-                                  {colDef.onClick ? (
-                                    <Button
-                                      color="primary"
-                                      data-data={row[colDef.id]}
-                                      data-index={index}
-                                      size="small"
-                                      onClick={e => {
-                                        colDef.onClick &&
-                                          colDef.onClick(e, row);
-                                      }}
-                                    >
-                                      {colDef.formatter
-                                        ? colDef.formatter(row)
-                                        : row[colDef.id]}
-                                    </Button>
-                                  ) : colDef.formatter ? (
-                                    colDef.formatter(row)
-                                  ) : (
-                                    row[colDef.id]
-                                  )}
-                                </Typography>
-                              ) : (
+                              {row[colDef.id] && (
                                 <>
-                                  {colDef.onClick ? (
-                                    <Button
-                                      color="primary"
-                                      data-data={row[colDef.id]}
-                                      data-index={index}
+                                  <Typography title={row[colDef.id]}>
+                                    {colDef.onClick ? (
+                                      <Button
+                                        color="primary"
+                                        data-data={row[colDef.id]}
+                                        data-index={index}
+                                        size="small"
+                                        onClick={e => {
+                                          colDef.onClick &&
+                                            colDef.onClick(e, row);
+                                        }}
+                                      >
+                                        {colDef.formatter
+                                          ? colDef.formatter(row)
+                                          : row[colDef.id]}
+                                      </Button>
+                                    ) : colDef.formatter ? (
+                                      <Typography title={row[colDef.id]}>
+                                        {colDef.formatter(row)}
+                                      </Typography>
+                                    ) : (
+                                      row[colDef.id]
+                                    )}
+                                  </Typography>
+                                  {needCopy && (
+                                    <CopyButton
+                                      label={copyTrans.label}
+                                      value={row[colDef.id]}
                                       size="small"
-                                      onClick={e => {
-                                        colDef.onClick &&
-                                          colDef.onClick(e, row);
-                                      }}
-                                    >
-                                      {colDef.formatter
-                                        ? colDef.formatter(row)
-                                        : row[colDef.id]}
-                                    </Button>
-                                  ) : colDef.formatter ? (
-                                    colDef.formatter(row)
-                                  ) : (
-                                    row[colDef.id]
+                                      className={classes.copyBtn}
+                                    />
                                   )}
                                 </>
                               )}
-
-                              {needCopy && row[colDef.id] && (
-                                <CopyButton
-                                  label={copyTrans.label}
-                                  value={row[colDef.id]}
-                                  size="small"
-                                  className={classes.copyBtn}
-                                />
-                              )}
                             </div>
                           </TableCell>
                         );

client/src/hooks/Result.tsx

@@ -1,41 +1,22 @@
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ClassNameMap } from '@material-ui/styles/withStyles';
 import { detectItemType } from '@/utils';
-import CopyButton from '@/components/advancedSearch/CopyButton';
-
-export const useSearchResult = (searchResult: any[], classes: ClassNameMap) => {
-  const { t: commonTrans } = useTranslation();
-  const copyTrans = commonTrans('copy');
 
+export const useSearchResult = (searchResult: any[]) => {
   return useMemo(
     () =>
       searchResult?.map((resultItem: { [key: string]: any }) => {
-        // Iterate resultItem keys, then format vector(array) items.
-
         const tmp = Object.keys(resultItem).reduce(
           (prev: { [key: string]: any }, item: string) => {
             const itemType = detectItemType(resultItem[item]);
 
             switch (itemType) {
               case 'json':
-                prev[item] = <div>{JSON.stringify(resultItem[item])}</div>;
-                break;
               case 'array':
-                const list2Str = JSON.stringify(resultItem[item]);
-                prev[item] = (
-                  <div className={classes.vectorTableCell}>
-                    <div>{list2Str}</div>
-                    <CopyButton
-                      label={copyTrans.label}
-                      value={list2Str}
-                      className={classes.copyBtn}
-                    />
-                  </div>
-                );
+              case 'bool':
+                prev[item] = JSON.stringify(resultItem[item]);
                 break;
               default:
-                prev[item] = `${resultItem[item]}`;
+                prev[item] = resultItem[item];
             }
 
             return prev;
@@ -44,6 +25,6 @@ export const useSearchResult = (searchResult: any[], classes: ClassNameMap) => {
         );
         return tmp;
       }),
-    [searchResult, classes.vectorTableCell, classes.copyBtn, copyTrans.label]
+    [searchResult]
   );
 };

client/src/pages/preview/Preview.tsx

@@ -22,14 +22,13 @@ const Preview: FC<{
   const [tableLoading, setTableLoading] = useState<any>();
   const [queryResult, setQueryResult] = useState<any>();
   const [primaryKey, setPrimaryKey] = useState<string>('');
-  const { t: collectionTrans } = useTranslation('collection');
   const { t: searchTrans } = useTranslation('search');
   const { t: btnTrans } = useTranslation('btn');
 
   const classes = getQueryStyles();
 
   // Format result list
-  const queryResultMemo = useSearchResult(queryResult, classes);
+  const queryResultMemo = useSearchResult(queryResult);
 
   const {
     pageSize,
@@ -157,6 +156,7 @@ const Preview: FC<{
           id: i.name,
           align: 'left',
           disablePadding: false,
+          needCopy: true,
           label:
             i.name === DYNAMIC_FIELD ? searchTrans('dynamicFields') : i.name,
         }))}

client/src/pages/query/Query.tsx

@@ -52,7 +52,7 @@ const Query: FC<{
   const classes = getQueryStyles();
 
   // Format result list
-  const queryResultMemo = useSearchResult(queryResult, classes);
+  const queryResultMemo = useSearchResult(queryResult);
 
   const {
     pageSize,
@@ -278,6 +278,7 @@ const Query: FC<{
             id: i.name,
             align: 'left',
             disablePadding: false,
+            needCopy: true,
             label:
               i.name === DYNAMIC_FIELD ? searchTrans('dynamicFields') : i.name,
           }))}

client/src/pages/query/Types.ts

@@ -5,5 +5,5 @@ export interface QueryParam {
   travel_timestamp?: string;
   limit?: number;
   offset?: number;
-  consistency_level: string;
+  consistency_level?: string;
 }

client/src/pages/search/VectorSearch.tsx

@@ -78,7 +78,7 @@ const VectorSearch = () => {
   // latency
   const [latency, setLatency] = useState<number>(0);
 
-  const searchResultMemo = useSearchResult(searchResult as any, classes);
+  const searchResultMemo = useSearchResult(searchResult as any);
 
   const {
     pageSize,

client/src/utils/Common.ts

@@ -82,6 +82,8 @@ export const detectItemType = (item: unknown) => {
     return 'array';
   } else if (typeof item === 'object' && item !== null) {
     return 'json';
+  } else if (typeof item === 'boolean') {
+    return 'bool';
   } else {
     return 'unknown';
   }