Fix back button not working (#448)

* history try Signed-off-by: ryjiang <[email protected]> * stash Signed-off-by: ryjiang <[email protected]> * fix back issue casued by the list filter Signed-off-by: ruiyi.jiang <[email protected]> * fix back button Signed-off-by: ruiyi.jiang <[email protected]> * stash Signed-off-by: ruiyi.jiang <[email protected]> * fix back Signed-off-by: ryjiang <[email protected]> --------- Signed-off-by: ryjiang <[email protected]> Signed-off-by: ruiyi.jiang <[email protected]>
zilliztech · Mar 26, 2024 · fcb7ce8 · fcb7ce8
1 parent 85890c1
commit fcb7ce8
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git a/client/src/components/customInput/SearchInput.tsx b/client/src/components/customInput/SearchInput.tsx
@@ -1,7 +1,6 @@
 import { InputAdornment, makeStyles, TextField } from '@material-ui/core';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
 import Icons from '../icons/Icons';
 import { SearchType } from './Types';
 
@@ -76,7 +75,6 @@ const useSearchStyles = makeStyles(theme => ({
 
 const SearchInput: FC<SearchType> = props => {
   const { searchText = '', onClear = () => {}, onSearch = () => {} } = props;
-  const [searchParams, setSearchParams] = useSearchParams();
   const [searchValue, setSearchValue] = useState<string>(searchText || '');
   const searched = useMemo(() => searchValue !== '', [searchValue]);
   const classes = useSearchStyles({ searched });
@@ -88,8 +86,20 @@ const SearchInput: FC<SearchType> = props => {
   };
 
   useEffect(() => {
-    searchParams[searchValue ? 'set' : 'delete']('search', searchValue);
-    setSearchParams(searchParams);
+    let hashPart = window.location.hash.substring(1);
+    // remove search part from hash part, include the '?'
+    hashPart = hashPart.replace(/(\?search=)[^&]+(&?)/, '$2');
+
+    let searchPart = !searchValue
+      ? ''
+      : `?search=${encodeURIComponent(searchValue)}`;
+
+    hashPart = `${hashPart}${searchPart}`;
+
+    const newUrl = `${window.location.pathname}#${hashPart}`;
+
+    window.history.replaceState(null, '', newUrl);
+
     handleSearch(searchValue);
   }, [searchValue]);
 

diff --git a/client/src/components/customTabList/RouteTabList.tsx b/client/src/components/customTabList/RouteTabList.tsx
@@ -63,18 +63,16 @@ const a11yProps = (index: number) => {
 const RouteTabList: FC<ITabListProps> = props => {
   const { tabs, activeIndex = 0, wrapperClass = '' } = props;
   const classes = useStyles();
-  const [value, setValue] = useState<number>(activeIndex);
   const navigate = useNavigate();
   const location = useLocation();
 
   const handleChange = (event: any, newValue: any) => {
-    setValue(newValue);
     const newPath =
       location.pathname.split('/').slice(0, -1).join('/') +
       '/' +
       tabs[newValue].path;
 
-    navigate(`${newPath}`);
+    navigate(newPath);
   };
 
   return (
@@ -86,7 +84,7 @@ const RouteTabList: FC<ITabListProps> = props => {
         }}
         // if not provide this property, Material will add single span element by default
         TabIndicatorProps={{ children: <div className="tab-indicator" /> }}
-        value={value}
+        value={activeIndex}
         onChange={handleChange}
         aria-label="tabs"
       >
@@ -104,7 +102,7 @@ const RouteTabList: FC<ITabListProps> = props => {
       {tabs.map((tab, index) => (
         <TabPanel
           key={tab.label}
-          value={value}
+          value={activeIndex}
           index={index}
           className={classes.tabPanel}
         >

diff --git a/client/src/pages/databases/collections/partitions/Partitions.tsx b/client/src/pages/databases/collections/partitions/Partitions.tsx
@@ -6,7 +6,7 @@ import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
 import { usePaginationHook, useInsertDialogHook } from '@/hooks';
-import icons from '@/components/icons/Icons';
+import Icons from '@/components/icons/Icons';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import { rootContext } from '@/context';
 import { CollectionService, PartitionService } from '@/http';
@@ -43,18 +43,13 @@ const Partitions = () => {
   const [search, setSearch] = useState<string>(
     (searchParams.get('search') as string) || ''
   );
-  const QuestionIcon = icons.question;
 
   const { handleInsertDialog } = useInsertDialogHook();
 
   const [selectedPartitions, setSelectedPartitions] = useState<PartitionData[]>(
     []
   );
   const [partitions, setPartitions] = useState<PartitionData[]>([]);
-  const [searchedPartitions, setSearchedPartitions] = useState<PartitionData[]>(
-    []
-  );
-
   const [loading, setLoading] = useState<boolean>(true);
   const { setDialog, openSnackBar } = useContext(rootContext);
 
@@ -77,14 +72,9 @@ const Partitions = () => {
     fetchPartitions(collectionName);
   }, [collectionName]);
 
-  // search
-  useEffect(() => {
-    const list = search
-      ? partitions.filter(p => p.name.includes(search))
-      : partitions;
-
-    setSearchedPartitions(list);
-  }, [search, partitions]);
+  const list = search
+    ? partitions.filter(p => p.name.includes(search))
+    : partitions;
 
   const {
     pageSize,
@@ -96,7 +86,7 @@ const Partitions = () => {
     order,
     orderBy,
     handleGridSort,
-  } = usePaginationHook(searchedPartitions);
+  } = usePaginationHook(list);
 
   // on delete
   const onDelete = () => {
@@ -232,7 +222,7 @@ const Partitions = () => {
         <span className="flex-center with-max-content">
           {t('rowCount')}
           <CustomToolTip title={t('tooltip')}>
-            <QuestionIcon classes={{ root: classes.icon }} />
+            <Icons.question classes={{ root: classes.icon }} />
           </CustomToolTip>
         </span>
       ),

diff --git a/client/src/pages/home/DatabaseCard.tsx b/client/src/pages/home/DatabaseCard.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react';
 import { makeStyles, Theme, Typography, useTheme } from '@material-ui/core';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { MilvusService } from '@/http';
 import icons from '@/components/icons/Icons';
@@ -98,7 +98,9 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   const { t: btnTrans } = useTranslation('btn');
   const { t: dialogTrans } = useTranslation('dialog');
 
-  const navigation = useNavigate();
+  const navigate = useNavigate();
+  const location = useLocation();
+
   const classes = useStyles();
   const theme = useTheme();
   const DbIcon = icons.database;
@@ -113,7 +115,9 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
     setDatabase(database.name);
 
     // navigate to database detail page
-    navigation(`/databases/${database.name}`);
+    const targetPath = `/databases/${database.name}`;
+
+    navigate(targetPath);
   };
 
   const handleDelete = async () => {

diff --git a/client/src/router/Router.tsx b/client/src/router/Router.tsx
@@ -16,8 +16,6 @@ const RouterComponent = () => {
     <Router>
       <Routes>
         <Route path="/" element={<Index />}>
-          <Route index element={<Databases />} />
-
           <Route path="databases" element={<Databases />} />
           <Route path="databases/:databaseName" element={<Databases />} />
           <Route