feat: keep page info in url (#89)

* fix(URL): add pageInfo in URL

* feat(filters): use searchParams in order to persist filters

* fix(test): fix JSON.parse

* fix(test): remove warning for empty string title

* fix(test): add tests for next page

* fix(test): add URL related test

* fix(searchParam): edge cases of transition

* fix(router): add all handleNavigate cases

Author: safeamiiir

aqueductcore/frontend/src/__mocks__/AppContextAQDMock.tsx

@@ -1,6 +1,6 @@
 import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
+import { BrowserRouter, MemoryRouter, MemoryRouterProps } from "react-router-dom";
 import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
-import { MemoryRouter, MemoryRouterProps } from "react-router-dom";
 import { MockedProvider } from "@apollo/client/testing";
 import CssBaseline from "@mui/material/CssBaseline";
 import { PropsWithChildren } from "react";
@@ -32,6 +32,7 @@ interface AppContextAQDMockProps {
   getExperimentFiles_mockMockMode?: keyof typeof getExperimentFiles_mock;
   getUserInformation_mockMockMode?: keyof typeof getUserInformation_mock;
   getExperiment_mockMockMode?: keyof typeof getExperiment_mock;
+  browserRouter?: boolean;
   memoryRouterProps?: MemoryRouterProps
 }
 
@@ -48,6 +49,7 @@ function AppContextAQDMock({
   getUserInformation_mockMockMode = "success",
   getExperiment_mockMockMode = "success",
   memoryRouterProps,
+  browserRouter,
   children,
 }: AppContextAQDMockProps) {
   Object.defineProperty(window, "matchMedia", {
@@ -92,16 +94,24 @@ function AppContextAQDMock({
     ...getUserInformation_mock[getUserInformation_mockMockMode],
     getExperiment_mock[getExperiment_mockMockMode],
   ];
+
+  const App =
+    <>
+      <CssBaseline />
+      {children}
+      <Toaster />
+    </>
   return (
     <MockedProvider mocks={mocks} addTypename={false}>
       <CssVarsProvider theme={themeConfig}>
-        {/* <BrowserRouter> */}
-        <MemoryRouter {...memoryRouterProps}>
-          <CssBaseline />
-          {children}
-          <Toaster />
-        </MemoryRouter>
-        {/* </BrowserRouter> */}
+        {browserRouter ?
+          <BrowserRouter>
+            {App}
+          </BrowserRouter> :
+          <MemoryRouter {...memoryRouterProps}>
+            {App}
+          </MemoryRouter>
+        }
       </CssVarsProvider>
     </MockedProvider>
   );

aqueductcore/frontend/src/__mocks__/queries/getAllExperimentsMock.tsx

@@ -21,7 +21,7 @@ export const getAllExperiments_mock = {
             title: "",
             tags: null,
             shouldIncludeTags: null,
-          },
+          }
         },
       },
       result: {

aqueductcore/frontend/src/__mocks__/queries/getAllExperimentsWithNameFilterMock.tsx

@@ -21,6 +21,7 @@ export const getAllExperimentsWithNameFilter_mock = {
             endDate: null,
             title: filterByThisTitle,
             tags: null,
+            shouldIncludeTags: null
           },
         },
       },
@@ -46,6 +47,7 @@ export const getAllExperimentsWithNameFilter_mock = {
             endDate: null,
             title: filterByThisTitle,
             tags: null,
+            shouldIncludeTags: null
           },
         },
       },

aqueductcore/frontend/src/__mocks__/queries/getAllExperimentsWithTagFilterMock.tsx

@@ -21,6 +21,7 @@ export const getAllExperimentsWithTagFilter_mock = {
             endDate: null,
             title: "",
             tags: [filterByThisTag],
+            shouldIncludeTags: null
           },
         },
       },
@@ -47,6 +48,7 @@ export const getAllExperimentsWithTagFilter_mock = {
             endDate: null,
             title: "",
             tags: [filterByThisTag],
+            shouldIncludeTags: null
           },
         },
       },

aqueductcore/frontend/src/__tests__/ExperimentRecordsPage.test.tsx

@@ -1,13 +1,13 @@
-import { render } from "@testing-library/react";
+import { act, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import { ExperimentRecordsColumns } from "pages/ExperimentRecordsPage";
-import ExperimentRecordsPage from "pages/ExperimentRecordsPage";
 import { filterByThisTitle } from "__mocks__/queries/getAllExperimentsWithNameFilterMock";
 import { filterByThisTag } from "__mocks__/queries/getAllExperimentsWithTagFilterMock";
+import { ARCHIVED, experimentRecordsRowsPerPageOptions } from "constants/constants";
+import { ExperimentRecordsColumns } from "pages/ExperimentRecordsPage";
 import { ExperimentDataMock } from "__mocks__/ExperimentDataMock";
+import ExperimentRecordsPage from "pages/ExperimentRecordsPage";
 import AppContextAQDMock from "__mocks__/AppContextAQDMock";
-import { ARCHIVED, experimentRecordsRowsPerPageOptions } from "constants/constants";
 
 // Experiment table
 test("render page with no error", () => {
@@ -99,3 +99,80 @@ test("render filtered experiments based on Tags", async () => {
 });
 
 //todo: start and end date
+
+test("experiment table next page click", async () => {
+  const { findByTitle, findByText } = render(
+    <AppContextAQDMock>
+      <ExperimentRecordsPage category="all" />
+    </AppContextAQDMock>
+  );
+
+  // 0- Just page loaded. ex: 1–10 of 14
+  const length_of_all_active_experiments = ExperimentDataMock.filter((item) => !item.tags.includes(ARCHIVED)).length
+  const firstNumberInPaginationRange = 1
+  const secondNumberInPaginationRange = Math.min(length_of_all_active_experiments, experimentRecordsRowsPerPageOptions[0])
+  const paginationString = `${firstNumberInPaginationRange}–${secondNumberInPaginationRange} of ${length_of_all_active_experiments}`
+  const pageInfo = await findByText(paginationString);
+  expect(pageInfo).toBeInTheDocument()
+
+  // 1- Click next page >
+  const nextPageIconButton = await findByTitle("Go to next page");
+  await act(async () => {
+    await userEvent.click(nextPageIconButton);
+  });
+
+  // 2- What we expect in the next page. ex: 11-14 of 14
+  const firstNumberInPaginationRangeAfterClick = experimentRecordsRowsPerPageOptions[0] + 1
+  const secondNumberInPaginationRangeAfterClick = Math.min(length_of_all_active_experiments, 2 * experimentRecordsRowsPerPageOptions[0])
+  const paginationStringAfterClick = `${firstNumberInPaginationRangeAfterClick}–${secondNumberInPaginationRangeAfterClick} of ${length_of_all_active_experiments}`
+  const pageInfoAfterClick = await findByText(paginationStringAfterClick);
+
+  expect(pageInfoAfterClick).toBeInTheDocument()
+
+});
+
+test("experiment table to keep the URL updated with pagination", async () => {
+  const { findByTitle } = render(
+    <AppContextAQDMock browserRouter>
+      <ExperimentRecordsPage category="all" />
+    </AppContextAQDMock>
+  );
+
+  // 0- URL should be there by the first load
+  await waitFor(async () => {
+    expect(window.location.href).toMatch(/rowsPerPage=10&page=0/)
+  });
+
+  // 1- Click next page >
+  const nextPageIconButton = await findByTitle("Go to next page");
+  await act(async () => {
+    await userEvent.click(nextPageIconButton);
+  });
+
+  // 2- next page should be reflected in the new page URL
+  await waitFor(async () => {
+    expect(window.location.href).toMatch(/rowsPerPage=10&page=1/)
+  });
+
+});
+
+test("experiment table to keep the URL updated with filters - Search title", async () => {
+  const { getByTitle } = render(
+    <AppContextAQDMock browserRouter>
+      <ExperimentRecordsPage category="all" />
+    </AppContextAQDMock>
+  );
+  const searchBar = getByTitle("Search Experiments input");
+
+  await userEvent.click(searchBar);
+  await userEvent.type(searchBar, filterByThisTitle);
+
+  await waitFor(async () => {
+    expect(window.location.href).toMatch(/title=EXP_rabi/)
+  });
+
+  // Clean up the input
+  await userEvent.clear(searchBar);
+});
+
+//todo: start and end date with the URL

aqueductcore/frontend/src/components/molecules/SearchBar/index.tsx

@@ -49,6 +49,7 @@ export const SearchBar = ({ searchString, handleSearchStringUpdate }: SearchBarP
       placeholder="Search by EID and Name"
       value={text}
       onChange={handleChange}
+      inputProps={{ title: 'Search Experiments input' }}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">

aqueductcore/frontend/src/components/organisms/ExperimentDetails/index.tsx

@@ -308,10 +308,13 @@ function ExperimentDetails({ experimentDetails }: ExperimentDetailsProps) {
 
   function handleNavigateBack() {
     switch (location.state?.from) {
+      //if user have chosen the experiment from the experiment records
       case "/aqd/experiments/favourites":
       case "/aqd/experiments/archived":
+      case "/aqd/experiments":
         navigate(-1);
         break;
+      //if the link is copied or other states
       default:
         navigate("..", { relative: "path" });
     }

aqueductcore/frontend/src/components/organisms/ExperimentsListTable/index.tsx

@@ -1,25 +1,25 @@
 import StarBorderOutlinedIcon from "@mui/icons-material/StarBorderOutlined";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import TablePagination from "@mui/material/TablePagination";
 import TableContainer from "@mui/material/TableContainer";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import StarIcon from "@mui/icons-material/Star";
-import { useNavigate } from "react-router-dom";
 import TableRow from "@mui/material/TableRow";
 import { grey } from "@mui/material/colors";
+import { useEffect, useState } from "react";
 import Table from "@mui/material/Table";
 import Paper from "@mui/material/Paper";
-import { useState } from "react";
 
+import { useRemoveTagFromExperiment } from "API/graphql/mutations/Experiment/removeTagFromExperiment";
+import { useAddTagToExperiment } from "API/graphql/mutations/Experiment/addTagToExperiment";
+import { FAVOURITE, experimentRecordsRowsPerPageOptions } from "constants/constants";
 import {
-  ExperimentDataType,
   ExperimentRecordsColumnsType,
   ExperimentsListTableProps,
+  ExperimentDataType,
 } from "types/globalTypes";
-import { useRemoveTagFromExperiment } from "API/graphql/mutations/Experiment/removeTagFromExperiment";
-import { useAddTagToExperiment } from "API/graphql/mutations/Experiment/addTagToExperiment";
-import { FAVOURITE, experimentRecordsRowsPerPageOptions } from "constants/constants";
 
 function ExperimentsListTable({
   ExperimentRecordsColumns,
@@ -41,6 +41,7 @@ function ExperimentsListTable({
   const [showActionId, setShowActionId] = useState("-1");
   const { page, setPage, rowsPerPage, setRowsPerPage, count } = pageInfo;
   const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { mutate: mutateAddTag } = useAddTagToExperiment();
   const { mutate: mutateRemoveTag } = useRemoveTagFromExperiment();
 
@@ -53,6 +54,13 @@ function ExperimentsListTable({
     setPage(0);
   };
 
+  useEffect(() => {
+    const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+    newQueryParameters.set('rowsPerPage', String(rowsPerPage))
+    newQueryParameters.set('page', String(page))
+    setSearchParams(newQueryParameters)
+  }, [page, rowsPerPage])
+
   function handleToggleFavorite(
     e: React.MouseEvent,
     experimentId: ExperimentDataType["id"],

aqueductcore/frontend/src/components/organisms/FilterExperiments/index.tsx

@@ -1,3 +1,4 @@
+import { useSearchParams } from "react-router-dom";
 import { Grid, styled } from "@mui/material";
 import { useEffect, useState } from "react";
 import dayjs, { Dayjs } from "dayjs";
@@ -20,7 +21,8 @@ interface FilterExperimentsProps {
 }
 
 function FilterExperiments({ filters, setFilters }: FilterExperimentsProps) {
-  const [selectedTags, setSelectedTags] = useState<TagType[]>([]);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [selectedTags, setSelectedTags] = useState<TagType[]>(filters?.tags ?? []);
   const [searchString, setSearchString] = useState<string>(filters?.title ?? "");
   const [startDate, setStartDate] = useState<Dayjs | null>(
     filters?.startDate ? dayjs(filters.startDate) : null
@@ -44,21 +46,49 @@ function FilterExperiments({ filters, setFilters }: FilterExperimentsProps) {
   }, [selectedTags, searchString, startDate, endDate]);
 
   const handleTagUpdate = (value: TagType[]) => {
+    const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+    if (value.length === 0) {
+      newQueryParameters.delete('tags')
+    } else {
+      newQueryParameters.set('tags', JSON.stringify(value))
+    }
+    setSearchParams(newQueryParameters)
     setSelectedTags(value);
   };
 
   const handleSearchStringUpdate = (value: string) => {
+    const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+    if (!value) {
+      newQueryParameters.delete('title')
+    } else {
+      newQueryParameters.set('title', value)
+    }
+    setSearchParams(newQueryParameters)
     setSearchString(value);
   };
 
   const handleStartDateUpdate = (value: Dayjs | null) => {
     if (value?.isValid() || value === null) {
+      const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+      if (!value) {
+        newQueryParameters.delete('startDate')
+      } else {
+        newQueryParameters.set('startDate', (value?.toISOString()) ?? '')
+      }
+      setSearchParams(newQueryParameters)
       setStartDate(value);
     }
   };
 
   const handleEndDateUpdate = (value: Dayjs | null) => {
     if (value?.isValid() || value === null) {
+      const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+      if (!value) {
+        newQueryParameters.delete('endDate')
+      } else {
+        newQueryParameters.set('endDate', (value?.toISOString()) ?? '')
+      }
+      setSearchParams(newQueryParameters)
       setEndDate(value);
     }
   };