fix(button): change to toggle in drawer in action header

CONTRIBUTING.md

@@ -89,13 +89,15 @@ We're also installing `react-dom` and `styled-components` because these two libr
 2. Navigate to installed `react`, `react-dom` and `styled-components` and register them under yarn linked packages:
 ```bash
 $ cd node_modules/react && yarn link
-$ cd ../node_modules/react-dom && yarn link
-$ cd ../node_modules/styled-components && yarn link
+$ cd ../../node_modules/react-dom && yarn link
+$ cd ../../node_modules/react-i18next && yarn link
+$ cd ../../node_modules/styled-components && yarn link
 ```
 3. Now link those packages in your local `adminjs` and `adminjs-design-system` projects:
 ```bash
 $ yarn link "react"
 $ yarn link "react-dom"
+$ yarn link "react-i18next"
 $ yarn link "styled-components"
 ```
 4. Your test application should now be working.

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

@@ -99,7 +99,7 @@ const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
         <Box mt={cssHeaderMT} flexGrow={1} px={['default', 0]}>
           <CssHComponent mb="lg">
             {!isList && listAction ? (
-              <StyledBackButton resourceId={resourceId} showInDrawer={action.showInDrawer} />
+              <StyledBackButton showInDrawer={action.showInDrawer} />
             ) : ''}
             {title}
             {tag ? (<Badge variant="primary" ml="default">{tag}</Badge>) : ''}

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

@@ -1,41 +1,33 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Link as RouterLink } from 'react-router-dom'
+import { useNavigation, Link as RouterLink, useNavigate } from 'react-router-dom'
 import {
   ButtonCSS,
   ButtonProps,
   Icon,
 } from '@adminjs/design-system'
 
-import { useSelector } from 'react-redux'
 import ViewHelpers from '../../../../backend/utils/view-helpers/view-helpers'
-import { ReduxState, RouterProps } from '../../../store'
 import allowOverride from '../../../hoc/allow-override'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StyledLink = styled(({ rounded, ...rest }) => <RouterLink {...rest} />)<ButtonProps>`${ButtonCSS}`
 const h = new ViewHelpers()
 
 export type StyledBackButtonProps = {
-  resourceId: string;
   showInDrawer: boolean;
 }
 
 const StyledBackButton: React.FC<StyledBackButtonProps> = (props) => {
-  const { resourceId, showInDrawer } = props
+  const { showInDrawer } = props
   const cssCloseIcon = showInDrawer ? 'ChevronRight' : 'ChevronLeft'
 
-  const { from } = useSelector<ReduxState, RouterProps>((state) => state.router)
-  const { pathname, search } = from
-
-  const backButtonUrl = pathname
-    ? [pathname, search].join('')
-    : h.resourceUrl({ resourceId, search: window.location.search })
+  const navigate = useNavigate()
 
   return (
     <StyledLink
       size="icon"
-      to={backButtonUrl}
+      to={navigate(-1)}
       rounded
       mr="lg"
       type="button"