change tableUrl to an array

frontend/src/components/DetailView/common/SimpleTable.tsx

@@ -30,7 +30,7 @@ export const SimpleTable = <T extends MRT_RowData, ParentType extends MRT_RowDat
   const navigate = useNavigate()
 
   const location = useLocation()
-  const { setTableUrl } = usePageContext()
+  const { previousTableUrls, setPreviousTableUrls } = usePageContext()
   const [searchParams] = useSearchParams()
 
   const linkToDetails = ({ row }: { row: MRT_Row<T> }) => {
@@ -45,7 +45,7 @@ export const SimpleTable = <T extends MRT_RowData, ParentType extends MRT_RowDat
           renderRowActions: linkToDetails,
           muiTableBodyRowProps: ({ row }: { row: MRT_Row<T> }) => ({
             onClick: () => {
-              setTableUrl(`${location.pathname}?tab=${searchParams.get('tab')}`)
+              setPreviousTableUrls([...previousTableUrls, `${location.pathname}?tab=${searchParams.get('tab')}`])
               navigate(`/${url}/${row.original[idFieldName]}`)
             },
             sx: {

frontend/src/components/DetailView/components.tsx

@@ -204,7 +204,7 @@ export const ErrorBox = <T,>() => {
 
 export const ReturnButton = () => {
   const navigate = useNavigate()
-  const { tableUrl } = usePageContext()
+  const { setPreviousTableUrls, previousTableUrls } = usePageContext()
   const { mode, setMode } = useDetailContext()
 
   if (mode.staging) {
@@ -222,7 +222,17 @@ export const ReturnButton = () => {
     )
   }
   return (
-    <Button onClick={() => navigate(tableUrl, { relative: 'path' })}>
+    <Button
+      onClick={() => {
+        if (previousTableUrls.length > 0) {
+          const previousTableUrl = previousTableUrls[previousTableUrls.length - 1]
+          const newUrls = [...previousTableUrls]
+          newUrls.splice(-1)
+          setPreviousTableUrls(newUrls)
+          navigate(previousTableUrl, { relative: 'path' })
+        }
+      }}
+    >
       <ArrowBackIcon color="primary" style={{ marginRight: '0.2em' }} />
       Return to table
     </Button>

frontend/src/components/Page.tsx

@@ -14,8 +14,8 @@ export type PageContextType<T> = {
   setIdList: (ids: string[]) => void
   idFieldName: string
   viewName: string
-  tableUrl: string
+  previousTableUrls: string[]
-  setTableUrl: (newUrl: string) => void
+  setPreviousTableUrls: (newPreviousTableUrls: string[]) => void
   createTitle: (data: T) => string
   createSubtitle: (data: T) => string
   editRights: EditRights
@@ -47,12 +47,13 @@ export const PageContextProvider = <T extends object>({
   editRights: EditRights
 }) => {
   const [idList, setIdList] = useState<string[]>([])
-  const [tableUrl, setTableUrl] = useState<string>(`/${viewName}`)
+  const [previousTableUrls, setPreviousTableUrls] = useState<string[]>([`/${viewName}`])
   // TODO: replace with some default values from variables
   const [sqlLimit, setSqlLimit] = useState<number>(defaultPagination.pageSize)
   const [sqlOffset, setSqlOffset] = useState<number>(0)
   const [sqlColumnFilters, setSqlColumnFilters] = useState<MRT_ColumnFiltersState>([])
   const [sqlOrderBy, setSqlOrderBy] = useState<MRT_SortingState>([])
+  console.log(previousTableUrls)
 
   return (
     <PageContext.Provider
@@ -62,8 +63,8 @@ export const PageContextProvider = <T extends object>({
         idFieldName,
         setIdList: (newIdList: string[]) => setIdList(newIdList),
         viewName,
-        tableUrl,
+        previousTableUrls,
-        setTableUrl: (newUrl: string) => setTableUrl(newUrl),
+        setPreviousTableUrls,
         createTitle: (data: unknown) => createTitle(data as T),
         createSubtitle: (data: unknown) => createSubtitle(data as T),
         sqlLimit,

frontend/src/components/TableView/ActionComponent.tsx

@@ -1,9 +1,10 @@
 import { Box, Button, Tooltip, Typography } from '@mui/material'
 import { MRT_RowData, MRT_Row } from 'material-react-table'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import ManageSearchIcon from '@mui/icons-material/ManageSearch'
 import PolicyIcon from '@mui/icons-material/Policy'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import { usePageContext } from '../Page'
 
 export const ActionComponent = <T extends MRT_RowData>({
   row,
@@ -21,6 +22,8 @@ export const ActionComponent = <T extends MRT_RowData>({
   tableRowAction?: (row: T) => void
 }) => {
   const navigate = useNavigate()
+  const { previousTableUrls, setPreviousTableUrls } = usePageContext()
+  const [searchParams] = useSearchParams()
 
   const id = row.original[idFieldName]
 
@@ -57,6 +60,7 @@ export const ActionComponent = <T extends MRT_RowData>({
       event.stopPropagation()
       tableRowAction(row.original)
     } else {
+      setPreviousTableUrls([...previousTableUrls, `${location.pathname}?tab=${searchParams.get('tab')}`])
       navigate(`/${url}/${id}`)
     }
   }

frontend/src/components/TableView/TableView.tsx

@@ -72,7 +72,15 @@ export const TableView = <T extends MRT_RowData>({
   isFetching: boolean
 }) => {
   const location = useLocation()
-  const { editRights, setSqlLimit, setSqlOffset, setSqlColumnFilters, setSqlOrderBy } = usePageContext()
+  const {
+    editRights,
+    setSqlLimit,
+    setSqlOffset,
+    setSqlColumnFilters,
+    setSqlOrderBy,
+    previousTableUrls,
+    setPreviousTableUrls,
+  } = usePageContext()
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>([])
   const [sorting, setSorting] = useState<MRT_SortingState>([])
   const navigate = useNavigate()
@@ -80,7 +88,7 @@ export const TableView = <T extends MRT_RowData>({
     selectorFn ? defaultPaginationSmall : defaultPagination
   )
   const user = useUser()
-  const { setIdList, setTableUrl } = usePageContext<T>()
+  const { setIdList } = usePageContext<T>()
 
   useEffect(() => {
     setSqlLimit(pagination.pageSize)
@@ -122,6 +130,13 @@ export const TableView = <T extends MRT_RowData>({
 
   const muiTableBodyRowProps = ({ row }: { row: MRT_Row<T> }) => ({
     onClick: () => {
+      const columnFilterToUrl = `columnfilters=${JSON.stringify(columnFilters)}`
+      const sortingToUrl = `sorting=${JSON.stringify(sorting)}`
+      const paginationToUrl = `pagination=${JSON.stringify(pagination)}`
+      setPreviousTableUrls([
+        ...previousTableUrls,
+        `${location.pathname}?&${columnFilterToUrl}&${sortingToUrl}&${paginationToUrl}`,
+      ])
       navigate(`/${url}/${row.original[idFieldName]}`)
     },
     sx: {
@@ -211,7 +226,6 @@ export const TableView = <T extends MRT_RowData>({
     const columnFilterToUrl = `columnfilters=${JSON.stringify(columnFilters)}`
     const sortingToUrl = `sorting=${JSON.stringify(sorting)}`
     const paginationToUrl = `pagination=${JSON.stringify(pagination)}`
-    setTableUrl(`${location.pathname}?&${columnFilterToUrl}&${sortingToUrl}&${paginationToUrl}`)
     navigate(`${location.pathname}?&${columnFilterToUrl}&${sortingToUrl}&${paginationToUrl}`, {
       replace: true,
     })