Fixes querystring problem

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Prevents redirect querystring to change order
 
 ## [4.37.0] - 2021-02-09
 - Adds support for multi binding for redirect CSV managment

react/RedirectForm.tsx

@@ -25,6 +25,7 @@ import Loader from './components/Loader'
 import Redirect from './queries/Redirect.graphql'
 import TenantInfoQuery from './queries/TenantInfo.graphql'
 import { getStoreBindings } from './utils/bindings'
+import { parseRedirectQueryString } from './components/admin/redirects/utils'
 
 interface CustomProps {
   params: {
@@ -94,14 +95,14 @@ class RedirectForm extends Component<Props, State> {
     if (!formData) {
       try {
         const rawQuerystring = history?.location?.search ?? ''
-        const querystring = queryString.parse(rawQuerystring)
-        const { binding, ...rest } = querystring
-        const restQuerystring = queryString.stringify(rest)
+        const { binding, q } = queryString.parse(rawQuerystring)
+        const restQueryString =
+          typeof q === 'string' && parseRedirectQueryString(q)
         const response = await client.query<RedirectQuery>({
           query: Redirect,
           variables: {
             path: `/${params.path}${
-              restQuerystring ? '?' + restQuerystring : ''
+              restQueryString ? '?' + restQueryString : ''
             }`,
             binding: binding,
           },

react/components/admin/redirects/List/List.tsx

@@ -11,6 +11,7 @@ import { Binding } from 'vtex.tenant-graphql'
 
 import { getFormattedLocalizedDate } from '../../../../utils/date'
 import { BASE_URL, NEW_REDIRECT_ID } from '../consts'
+import { slugifyRedirectQueryString } from '../utils'
 import CreateButton from './CreateButton'
 import { messages } from './messages'
 
@@ -130,11 +131,17 @@ const List: React.FC<Props> = ({
   const handleItemView = useCallback(
     (event: { rowData: Redirect }) => {
       const selectedItem = event.rowData
-      const bindingQS = selectedItem.from.includes('?')
+      const hasQueryString = selectedItem.from.includes('?')
+      const bindingQueryString = hasQueryString
         ? `&binding=${selectedItem.binding}`
         : `?binding=${selectedItem.binding}`
+      const [itemFrom, itemQueryString] = hasQueryString
+        ? selectedItem.from.split('?')
+        : [selectedItem.from, '']
+      const parsedQueryString =
+        itemQueryString && `?q=${slugifyRedirectQueryString(itemQueryString)}`
       navigate({
-        to: `${BASE_URL}${selectedItem.from}${bindingQS}`,
+        to: `${BASE_URL}${itemFrom}${parsedQueryString}${bindingQueryString}`,
       })
     },
     [navigate]

react/components/admin/redirects/utils.ts

@@ -0,0 +1,5 @@
+export const slugifyRedirectQueryString = (data: string) =>
+  data.replace(/=/g, '/').replace(/&/g, ';')
+
+export const parseRedirectQueryString = (data: string) =>
+  data.replace(/\//g, '=').replace(/;/g, '&')