fix(admin-ui): Navigating to tax settings should not break URL (#3989)

* fix navigation to taxes page, and switch out react-helmet with react-helemt-async

* add changeset

* pinpoint react-hot-toast

.changeset/thin-owls-give.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): fixes an issue where navigating to tax settings would append the basename multiple times. Removes `react-helmet` for `react-helmet-async` to get rid off error caused by unsafe sideeffects"

packages/admin-ui/package.json

@@ -62,10 +62,10 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.0.0",
+    "react-helmet-async": "^1.3.0",
     "react-highlight-words": "^0.18.0",
     "react-hook-form": "7.38.0",
-    "react-hot-toast": "^2.4.0",
+    "react-hot-toast": "2.4.0",
     "react-hotkeys-hook": "^3.4.7",
     "react-json-tree": "^0.17.0",
     "react-jwt": "^1.1.4",

packages/admin-ui/ui/src/components/seo/index.tsx

@@ -1,4 +1,5 @@
-import { Helmet } from "react-helmet"
+import React from "react"
+import { Helmet } from "react-helmet-async"
 
 const site = {
   siteMetadata: {
@@ -11,12 +12,15 @@ const site = {
 function SEO({
   description,
   lang,
-  meta,
+  meta = [],
   title,
 }: {
   description?: string
   lang?: string
-  meta?: any[]
+  meta?: React.DetailedHTMLProps<
+    React.MetaHTMLAttributes<HTMLMetaElement>,
+    HTMLMetaElement
+  >[]
   title: string
 }) {
   const metaDescription = description || site.siteMetadata.description
@@ -61,7 +65,8 @@ function SEO({
           name: `twitter:description`,
           content: metaDescription,
         },
-      ].concat(meta)}
+        ...meta,
+      ]}
     />
   )
 }

packages/admin-ui/ui/src/domain/settings/index.tsx

@@ -108,7 +108,7 @@ const Settings = () => (
     <Route path="/return-reasons" element={<ReturnReasons />} />
     <Route path="/team" element={<Users />} />
     <Route path="/personal-information" element={<PersonalInformation />} />
-    <Route path="/taxes" element={<Taxes />} />
+    <Route path="/taxes/*" element={<Taxes />} />
   </Routes>
 )
 

packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx

@@ -1,5 +1,5 @@
 import { useAdminRegions } from "medusa-react"
-import React, { useEffect } from "react"
+import React, { useCallback, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import Fade from "../../../../components/atoms/fade-wrapper"
 import Button from "../../../../components/fundamentals/button"
@@ -18,7 +18,7 @@ type Props = {
 const RegionOverview = ({ id }: Props) => {
   const navigate = useNavigate()
   const { trackRegions } = useAnalytics()
-  const { regions, isLoading } = useAdminRegions(undefined, {
+  const { regions } = useAdminRegions(undefined, {
     onSuccess: ({ regions, count }) => {
       trackRegions({ regions: regions.map((r) => r.name), count })
     },
@@ -27,6 +27,18 @@ const RegionOverview = ({ id }: Props) => {
     string | undefined
   >(id)
 
+  const handleChange = useCallback(
+    (id: string) => {
+      if (id !== selectedRegion) {
+        setSelectedRegion(id)
+        navigate(`/a/settings/regions/${id}`, {
+          replace: true,
+        })
+      }
+    },
+    [navigate, selectedRegion]
+  )
+
   useEffect(() => {
     if (id) {
       handleChange(id)
@@ -35,26 +47,7 @@ const RegionOverview = ({ id }: Props) => {
     if (!id && regions && regions.length > 0) {
       handleChange(regions[0].id)
     }
-  }, [id, regions])
+  }, [handleChange, id, regions])
-
-  useEffect(() => {
-    if (isLoading) {
-      return
-    }
-
-    if (!selectedRegion && regions && regions.length > 0) {
-      navigate(`/a/settings/regions/${regions[0].id}`, {
-        replace: true,
-      })
-    }
-  }, [regions, isLoading, selectedRegion])
-
-  const handleChange = (id: string) => {
-    if (id !== selectedRegion) {
-      setSelectedRegion(id)
-      navigate(`/a/settings/regions/${id}`)
-    }
-  }
 
   const { state, toggle, close } = useToggleState()
 

packages/admin-ui/ui/src/domain/settings/taxes/index.tsx

@@ -1,6 +1,6 @@
 import { useAdminRegions } from "medusa-react"
-import { useEffect } from "react"
+import { useCallback, useEffect, useState } from "react"
-import { useNavigate, useSearchParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
 import BackButton from "../../../components/atoms/back-button"
 import Spinner from "../../../components/atoms/spinner"
 import GearIcon from "../../../components/fundamentals/icons/gear-icon"
@@ -9,19 +9,39 @@ import RadioGroup from "../../../components/organisms/radio-group"
 import TwoSplitPane from "../../../components/templates/two-split-pane"
 import TaxDetails from "./details"
 
-const SEARCH_PARAM = "reg_id"
-
 const Taxes = () => {
+  const params = useParams()
+  const regId: string | undefined = params["*"]
+
   const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
 
   const { regions, isLoading } = useAdminRegions()
 
+  const [selectedRegion, setSelectedRegion] = useState<string | undefined>(
+    regId
+  )
+
+  const handleChange = useCallback(
+    (id: string) => {
+      if (id !== selectedRegion) {
+        setSelectedRegion(id)
+        navigate(`/a/settings/taxes/${id}`, {
+          replace: true,
+        })
+      }
+    },
+    [navigate, selectedRegion]
+  )
+
   useEffect(() => {
-    if (!isLoading && regions?.length && !searchParams.get(SEARCH_PARAM)) {
+    if (regId) {
-      setSearchParams({ [SEARCH_PARAM]: regions[0].id })
+      handleChange(regId)
     }
-  }, [regions, isLoading, searchParams, setSearchParams])
+
+    if (!regId && regions && regions.length > 0) {
+      handleChange(regions[0].id)
+    }
+  }, [handleChange, regId, regions])
 
   return (
     <>
@@ -50,10 +70,8 @@ const Taxes = () => {
               </div>
             ) : (
               <RadioGroup.Root
-                value={searchParams.get(SEARCH_PARAM) || undefined}
+                value={selectedRegion}
-                onValueChange={(value) =>
+                onValueChange={handleChange}
-                  setSearchParams({ [SEARCH_PARAM]: value })
-                }
               >
                 {regions.map((r) => {
                   return (
@@ -75,7 +93,7 @@ const Taxes = () => {
               </RadioGroup.Root>
             )}
           </BodyCard>
-          <TaxDetails id={searchParams.get(SEARCH_PARAM)} />
+          <TaxDetails id={selectedRegion} />
         </TwoSplitPane>
       </div>
     </>

packages/admin-ui/ui/src/providers/providers.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react"
+import { HelmetProvider } from "react-helmet-async"
 import { LayeredModalProvider } from "../components/molecules/modal/layered-modal"
 import { SteppedProvider } from "../components/molecules/modal/stepped-modal"
 import { FeatureFlagProvider } from "./feature-flag-provider"
@@ -10,14 +11,16 @@ import { PollingProvider } from "./polling-provider"
  */
 export const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <MedusaProvider>
+    <HelmetProvider>
-      <FeatureFlagProvider>
+      <MedusaProvider>
-        <PollingProvider>
+        <FeatureFlagProvider>
-          <SteppedProvider>
+          <PollingProvider>
-            <LayeredModalProvider>{children}</LayeredModalProvider>
+            <SteppedProvider>
-          </SteppedProvider>
+              <LayeredModalProvider>{children}</LayeredModalProvider>
-        </PollingProvider>
+            </SteppedProvider>
-      </FeatureFlagProvider>
+          </PollingProvider>
-    </MedusaProvider>
+        </FeatureFlagProvider>
+      </MedusaProvider>
+    </HelmetProvider>
   )
 }

yarn.lock

@@ -5883,10 +5883,10 @@ __metadata:
     react-dnd: ^16.0.1
     react-dnd-html5-backend: ^16.0.1
     react-dom: ^18.2.0
-    react-helmet: ^6.0.0
+    react-helmet-async: ^1.3.0
     react-highlight-words: ^0.18.0
     react-hook-form: 7.38.0
-    react-hot-toast: ^2.4.0
+    react-hot-toast: 2.4.0
     react-hotkeys-hook: ^3.4.7
     react-json-tree: ^0.17.0
     react-jwt: ^1.1.4
@@ -7969,10 +7969,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.3.1":
+"@remix-run/router@npm:1.6.0":
-  version: 1.3.1
+  version: 1.6.0
-  resolution: "@remix-run/router@npm:1.3.1"
+  resolution: "@remix-run/router@npm:1.6.0"
-  checksum: 9140a87b04429dbc5f02eb0a4550d7b284516c3daa8ffa71e4f21c87c15846a8dc5c7253f70955b497c721e91344877cf74c0037eeac6ff8bdd3e08c32a44f86
+  checksum: 109f72bc7550bde225f2a5070b210f66b23ac83154ba155b8cc3ecb05c2770548cedb4746f8d4f70dfdce18ec3a0967bac862dbe2cf19cffea18e9b0a1574219
   languageName: node
   linkType: hard
 
@@ -34642,24 +34642,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.1.1":
+"react-fast-compare@npm:^3.0.1":
   version: 3.2.0
   resolution: "react-fast-compare@npm:3.2.0"
   checksum: 2a7d75ce9fb5da1e3c01f74a5cd592f3369a8cc8d44e93654bf147ab221f430238e8be70677e896f2bfcb96a1cb7a47a8d05d84633de764a9d57d27005a4bb9e
   languageName: node
   linkType: hard
 
-"react-helmet@npm:^6.0.0":
+"react-fast-compare@npm:^3.2.0":
-  version: 6.1.0
+  version: 3.2.1
-  resolution: "react-helmet@npm:6.1.0"
+  resolution: "react-fast-compare@npm:3.2.1"
+  checksum: 81e805b9cde58a49e37ecb7361a4c97a24e869182761ceda9428c9f4de4b26e461a33c155bfe8fad67c8ae26c6355750671ff6335df80c5d3fe9c537ff2d6ffb
+  languageName: node
+  linkType: hard
+
+"react-helmet-async@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "react-helmet-async@npm:1.3.0"
   dependencies:
-    object-assign: ^4.1.1
+    "@babel/runtime": ^7.12.5
+    invariant: ^2.2.4
     prop-types: ^15.7.2
-    react-fast-compare: ^3.1.1
+    react-fast-compare: ^3.2.0
-    react-side-effect: ^2.1.0
+    shallowequal: ^1.1.0
   peerDependencies:
-    react: ">=16.3.0"
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
-  checksum: 1d2831d9c3b4f5c91f020076aeb6502437a4788077d0c438421e466eb9633d5dc2aacedf7b779a970b807d61cf87793c5ff76ee3190a185d71c90b5cfb367e96
+    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 8f3e6d26beff61d2ed18f7b41561df3e4d83a7582914c7196aa65158c7f3cce939276547d7a0b8987952d9d44131406df74efba02d1f8fa8a3940b49e6ced70b
   languageName: node
   linkType: hard
 
@@ -34685,7 +34694,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hot-toast@npm:^2.4.0":
+"react-hot-toast@npm:2.4.0":
   version: 2.4.0
   resolution: "react-hot-toast@npm:2.4.0"
   dependencies:
@@ -34890,26 +34899,26 @@ __metadata:
   linkType: hard
 
 "react-router-dom@npm:^6.8.0":
-  version: 6.8.0
+  version: 6.11.0
-  resolution: "react-router-dom@npm:6.8.0"
+  resolution: "react-router-dom@npm:6.11.0"
   dependencies:
-    "@remix-run/router": 1.3.1
+    "@remix-run/router": 1.6.0
-    react-router: 6.8.0
+    react-router: 6.11.0
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: 95dd9cc65606934134b14908c80bd4267f6bdd8ad44c9fc5b941d70a37e8d35d852649f3d5789fefa33ab74f99448a71d54f498b8055e860dfd3c328aea73624
+  checksum: b5894d7d16ed57ac8ccea3ee3154972dc2c3a34708c7c2b337239e402645eca21ac9bb046f1a3b7f09db36cf4b8c2d3b02d846ac5b7753222578a41798fd6510
   languageName: node
   linkType: hard
 
-"react-router@npm:6.8.0":
+"react-router@npm:6.11.0":
-  version: 6.8.0
+  version: 6.11.0
-  resolution: "react-router@npm:6.8.0"
+  resolution: "react-router@npm:6.11.0"
   dependencies:
-    "@remix-run/router": 1.3.1
+    "@remix-run/router": 1.6.0
   peerDependencies:
     react: ">=16.8"
-  checksum: bdf0fc1938a8cfa12455db0f6dc5ede884101f267b3bf538df778455515c84ec261a6611e7b815170b8a01a57f6cc03fa6eaf054b34102c201305f965031fa3e
+  checksum: c1bca326d78a8aa9a0de56d9298ca4f639d03c1047239b02c35744b41e37ae5dae6c38b4337ebd8546485c300c18b8605778c26d2239294ba0b60f9d488c7888
   languageName: node
   linkType: hard
 
@@ -34933,15 +34942,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-side-effect@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "react-side-effect@npm:2.1.2"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.0 || ^18.0.0
-  checksum: 5d934cae438f701ce646f566750ae6a445e99185ce1a026108f9db728147f7962a22ecf8db79ff26089953a3799b3607766904f4f10194ce42bcd5a1aa0215e8
-  languageName: node
-  linkType: hard
-
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"