update partition filter highlight

client/src/components/customInput/SearchInput.tsx

@@ -104,7 +104,8 @@ const SearchInput: FC<SearchType> = props => {
 
   useEffect(() => {
     timer = setTimeout(() => {
-      const params = new URLSearchParams();
+      const location = history.location;
+      const params = new URLSearchParams(location.search);
       if (searchValue) {
         params.append('search', searchValue);
       } else {

client/src/http/Partition.ts

@@ -2,12 +2,12 @@ import { StatusEnum } from '../components/status/Types';
 import {
   PartitionManageParam,
   PartitionParam,
-  PartitionView,
+  PartitionData,
 } from '../pages/partitions/Types';
 import { formatNumber } from '../utils/Common';
 import BaseModel from './BaseModel';
 
-export class PartitionHttp extends BaseModel implements PartitionView {
+export class PartitionHttp extends BaseModel implements PartitionData {
   private id!: string;
   private name!: string;
   private rowCount!: string;

client/src/pages/partitions/Types.ts

@@ -2,15 +2,19 @@ import { ReactElement } from 'react';
 import { StatusEnum } from '../../components/status/Types';
 import { ManageRequestMethods } from '../../types/Common';
 
-export interface PartitionView {
+export interface PartitionData {
   _id: string;
   _name: string;
   _status: StatusEnum;
-  _statusElement?: ReactElement;
   _rowCount: string;
   _formatName: string;
 }
 
+export interface PartitionView extends PartitionData {
+  _nameElement?: ReactElement;
+  _statusElement?: ReactElement;
+}
+
 // delete and create
 export interface PartitionManageParam {
   collectionName: string;

client/src/pages/partitions/partitions.tsx

@@ -19,6 +19,7 @@ import { ManageRequestMethods } from '../../types/Common';
 // import { StatusEnum } from '../../components/status/Types';
 // import { useDialogHook } from '../../hooks/Dialog';
 import DeleteTemplate from '../../components/customDialog/DeleteDialogTemplate';
+import Highlighter from 'react-highlight-words';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -28,6 +29,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '20px',
     marginLeft: theme.spacing(0.5),
   },
+  highlight: {
+    color: theme.palette.primary.main,
+    backgroundColor: 'transparent',
+  },
 }));
 
 const Partitions: FC<{
@@ -67,7 +72,10 @@ const Partitions: FC<{
       const res = await PartitionHttp.getPartitions(collectionName);
 
       const partitions: PartitionView[] = res.map(p =>
-        Object.assign(p, { _statusElement: <Status status={p._status} /> })
+        Object.assign(p, {
+          _nameElement: <>{p._formatName}</>,
+          _statusElement: <Status status={p._status} />,
+        })
       );
       setLoading(false);
       setPartitions(partitions);
@@ -118,6 +126,28 @@ const Partitions: FC<{
   //   return res;
   // };
 
+  const handleSearch = (value: string) => {
+    const searchWords = [value];
+    console.log('====== search words', searchWords);
+    const list = value
+      ? partitions.filter(p => p._formatName.includes(value))
+      : partitions;
+
+    const highlightList = list.map(c => {
+      Object.assign(c, {
+        _nameElement: (
+          <Highlighter
+            textToHighlight={c._formatName}
+            searchWords={searchWords}
+            highlightClassName={classes.highlight}
+          />
+        ),
+      });
+      return c;
+    });
+    setSearchedPartitions(highlightList);
+  };
+
   const toolbarConfigs: ToolBarConfig[] = [
     {
       label: t('create'),
@@ -169,11 +199,7 @@ const Partitions: FC<{
       label: 'Search',
       icon: 'search',
       onSearch: (value: string) => {
-        const list = value
-          ? partitions.filter(p => p._name.includes(value))
-          : partitions;
-
-        setSearchedPartitions(list);
+        handleSearch(value);
       },
     },
   ];
@@ -186,7 +212,7 @@ const Partitions: FC<{
       label: t('id'),
     },
     {
-      id: '_formatName',
+      id: '_nameElement',
       align: 'left',
       disablePadding: false,
       label: t('name'),