diff --git a/CHANGELOG.md b/CHANGELOG.md index c34b37f1b..018734af0 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/react/RedirectForm.tsx b/react/RedirectForm.tsx index 33500e33e..fbe57c10c 100644 --- a/react/RedirectForm.tsx +++ b/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 { 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({ query: Redirect, variables: { path: `/${params.path}${ - restQuerystring ? '?' + restQuerystring : '' + restQueryString ? '?' + restQueryString : '' }`, binding: binding, }, diff --git a/react/components/admin/redirects/List/List.tsx b/react/components/admin/redirects/List/List.tsx index 2e6c6fe30..a462be792 100644 --- a/react/components/admin/redirects/List/List.tsx +++ b/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 = ({ 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] diff --git a/react/components/admin/redirects/utils.ts b/react/components/admin/redirects/utils.ts new file mode 100644 index 000000000..f1629792e --- /dev/null +++ b/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, '&')