Hide query strings from the site editor top bar

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Hides query strings from the site editor top bar.
+
 ## [4.37.0] - 2021-02-09
 - Adds support for multi binding for redirect CSV managment
 
@@ -39,11 +43,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Site editor flag in the iframe URL.
 
 ## [4.32.0] - 2021-01-21
+
 ### Added
-- Adds binding selector for CMS Pages 
+
+- Adds binding selector for CMS Pages
 
 ## [4.31.1] - 2021-01-20
+
 ### Fixed
+
 - Sending blockId in `Form index` component even when is not changed to prevent unexpected behaviors
 
 ## [4.31.0] - 2021-01-13

react/components/EditorContainer/StoreIframe.tsx

@@ -36,7 +36,9 @@ const StoreIframe: React.FunctionComponent<Props> = ({ path }) => {
     src += `${getJoiner(src)}__bindingAddress=${binding.canonicalBaseAddress}`
   }
 
-  src += `${getJoiner(src)}__siteEditor`
+  if (!src.includes('__siteEditor')) {
+    src += `${getJoiner(src)}__siteEditor=true`
+  }
 
   return (
     <iframe

react/components/EditorContainer/Topbar/ContextSelectors/index.tsx

@@ -96,7 +96,7 @@ const ContextSelectors: React.FC<WithApolloClient<Props>> = ({
         if (newBinding && editor.iframeWindow) {
           setBinding(newBinding)
 
-          editor.iframeWindow.location.search = `__bindingAddress=${newBinding.canonicalBaseAddress}&__siteEditor`
+          editor.iframeWindow.location.search = `__bindingAddress=${newBinding.canonicalBaseAddress}&__siteEditor=true`
         }
       }
     },

react/components/EditorContainer/Topbar/UrlInput.tsx

@@ -8,9 +8,26 @@ const UrlInput = () => {
 
   const editor = useEditorContext()
 
+  const resolveUrlPath = (pathname: string, searchQueries: string) => {
+    const searchParams = new URLSearchParams(searchQueries)
+    const SEARCH_QUERIES_TO_HIDE = ['__siteEditor', '__bindingAddress']
+
+    SEARCH_QUERIES_TO_HIDE.forEach(query => {
+      searchParams.delete(query)
+    })
+
+    if (searchParams.toString().length) {
+      return pathname + `?${searchParams.toString()}`
+    }
+
+    return pathname
+  }
+
   const urlPath = editor.iframeWindow
-    ? editor.iframeWindow.location.pathname +
-      editor.iframeWindow.location.search
+    ? resolveUrlPath(
+        editor.iframeWindow.location.pathname,
+        editor.iframeWindow.location.search
+      )
     : ''
 
   const [url, setUrl] = React.useState(urlPath)