fix: retain filters when opening record in a drawer

src/frontend/components/app/action-header/action-header.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { Badge, Box, ButtonGroup, cssClass, H2, H3 } from '@adminjs/design-system'
 import React from 'react'
-import { useNavigate } from 'react-router'
+import { useNavigate, useLocation } from 'react-router'
 
 import allowOverride from '../../../hoc/allow-override.js'
 import { useActionResponseHandler, useTranslation, useModal } from '../../../hooks/index.js'
@@ -31,6 +31,7 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   const translateFunctions = useTranslation()
   const { translateButton, translateAction } = translateFunctions
   const navigate = useNavigate()
+  const location = useLocation()
   const actionResponseHandler = useActionResponseHandler(actionPerformed)
   const modalFunctions = useModal()
 
@@ -46,6 +47,7 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
       params,
       actionResponseHandler,
       navigate,
+      location,
       translateFunctions,
       modalFunctions,
     })(event)

src/frontend/components/app/action-header/styled-back-button.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
+import { useLocation } from 'react-router'
 import {
   ButtonCSS,
   ButtonProps,
@@ -17,13 +18,17 @@ export type StyledBackButtonProps = {
 }
 
 const StyledBackButton: React.FC<StyledBackButtonProps> = (props) => {
+  const location = useLocation()
   const { showInDrawer } = props
   const cssCloseIcon = showInDrawer ? 'ChevronRight' : 'ChevronLeft'
 
   return (
     <StyledLink
       size="icon"
-      to=".."
+      to={{
+        pathname: '..',
+        search: location.search,
+      }}
       relative="route"
       rounded
       mr="lg"

src/frontend/components/app/records-table/record-in-list.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { useNavigate } from 'react-router'
+import { useNavigate, useLocation } from 'react-router'
 import {
   Placeholder, TableRow, TableCell, CheckBox, ButtonGroup,
 } from '@adminjs/design-system'
@@ -30,6 +30,7 @@ const RecordInList: React.FC<RecordInListProps> = (props) => {
   } = props
   const [record, setRecord] = useState<RecordJSON>(recordFromProps)
   const navigate = useNavigate()
+  const location = useLocation()
   const translateFunctions = useTranslation()
   const modalFunctions = useModal()
 
@@ -65,6 +66,7 @@ const RecordInList: React.FC<RecordInListProps> = (props) => {
         params: { resourceId: resource.id, recordId: record.id },
         actionResponseHandler,
         navigate,
+        location,
         translateFunctions,
         modalFunctions,
       })(event)
@@ -79,6 +81,7 @@ const RecordInList: React.FC<RecordInListProps> = (props) => {
       params: actionParams,
       actionResponseHandler,
       navigate,
+      location,
       translateFunctions,
       modalFunctions,
     })(event)

src/frontend/components/app/records-table/selected-records.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { TableCaption, Title, ButtonGroup, Box } from '@adminjs/design-system'
-import { useNavigate } from 'react-router'
+import { useNavigate, useLocation } from 'react-router'
 
 import { ActionJSON, buildActionClickHandler, RecordJSON, ResourceJSON } from '../../../interfaces/index.js'
 import getBulkActionsFromRecords from './utils/get-bulk-actions-from-records.js'
@@ -19,6 +19,7 @@ const SelectedRecords: React.FC<SelectedRecordsProps> = (props) => {
   const translateFunctions = useTranslation()
   const { translateLabel } = translateFunctions
   const navigate = useNavigate()
+  const location = useLocation()
   const actionResponseHandler = useActionResponseHandler()
   const modalFunctions = useModal()
 
@@ -37,6 +38,7 @@ const SelectedRecords: React.FC<SelectedRecordsProps> = (props) => {
       params,
       actionResponseHandler,
       navigate,
+      location,
       translateFunctions,
       modalFunctions,
     })(event)

src/frontend/hooks/use-action/use-action.ts

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router'
+import { useNavigate, useLocation } from 'react-router'
 
 import { ActionResponse } from '../../../backend/actions/action.interface.js'
 import { ActionJSON, buildActionCallApiTrigger, buildActionClickHandler } from '../../interfaces/index.js'
@@ -25,6 +25,7 @@ export function useAction<K extends ActionResponse>(
   onActionCall?: ActionCallCallback,
 ): UseActionResult<K> {
   const navigate = useNavigate()
+  const location = useLocation()
   const translateFunctions = useTranslation()
   const modalFunctions = useModal()
   const actionResponseHandler = useActionResponseHandler(onActionCall)
@@ -44,6 +45,7 @@ export function useAction<K extends ActionResponse>(
     navigate,
     translateFunctions,
     modalFunctions,
+    location,
   })
 
   return {

src/frontend/interfaces/action/build-action-click-handler.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-globals */
 /* eslint-disable no-undef */
 /* eslint-disable no-alert */
-import { NavigateFunction } from 'react-router'
+import { NavigateFunction, Location } from 'react-router'
 
 import { DifferentActionParams, useActionResponseHandler } from '../../hooks/index.js'
 import { actionHasDisabledComponent } from './action-has-component.js'
@@ -12,21 +12,21 @@ import { TranslateFunctions } from '../../../utils/index.js'
 import { ModalData, ModalFunctions } from '../modal.interface.js'
 
 export type BuildActionClickOptions = {
-  action: ActionJSON;
-  params: DifferentActionParams;
-  actionResponseHandler: ReturnType<typeof useActionResponseHandler>;
-  navigate: NavigateFunction;
-  translateFunctions: TranslateFunctions;
+  action: ActionJSON
+  params: DifferentActionParams
+  actionResponseHandler: ReturnType<typeof useActionResponseHandler>
+  navigate: NavigateFunction
+  translateFunctions: TranslateFunctions
   modalFunctions: ModalFunctions
+  location?: Location
 }
 
 export type BuildActionClickReturn = (event: any) => any | Promise<any>
 
 export const buildActionClickHandler = (
   options: BuildActionClickOptions,
 ): BuildActionClickReturn => {
-  const { action, params, actionResponseHandler, navigate,
-    modalFunctions } = options
+  const { action, params, actionResponseHandler, navigate, modalFunctions, location } = options
   const { openModal } = modalFunctions
 
   const handleActionClick = (event: React.MouseEvent<HTMLElement>): Promise<any> | any => {
@@ -36,7 +36,9 @@ export const buildActionClickHandler = (
     const href = actionHref(action, params)
 
     const callApi = buildActionCallApiTrigger({
-      params, action, actionResponseHandler,
+      params,
+      action,
+      actionResponseHandler,
     })
 
     // Action has "component" option set to "false" explicitly in it's configuration
@@ -65,7 +67,17 @@ export const buildActionClickHandler = (
 
     // Default behaviour - you're navigated to action URL and logic is performed on it's route
     if (href) {
-      navigate(href)
+      const url = new URL(`relative:${href}`)
+      const hrefParams = new URLSearchParams(url.search)
+      const currentParams = new URLSearchParams(action.showInDrawer ? location?.search ?? '' : '')
+      Object.entries(Object.fromEntries(currentParams.entries())).forEach(([key, value]) => {
+        hrefParams.append(key, value)
+      })
+
+      navigate({
+        pathname: url.pathname,
+        search: hrefParams.toString(),
+      })
     }
   }