Fix block selector inconsistencies

CHANGELOG.md

@@ -7,11 +7,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Block selector not working after a locale change
+
+### Added
+
+- Block selector status(wait)
+
 ### 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
 
 ## [4.36.1] - 2021-02-08
@@ -27,7 +36,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Setting `Description` and `Keywords` as editable fields with the same condition as `Title` in `admin-pages`
 
 ## [4.35.0] - 2021-02-02
+
 ### Added
+
 - Adds binding selector for CMS Redirects
 
 ## [4.34.0] - 2021-01-22

react/components/EditorContainer/Topbar/BlockPicker.tsx

@@ -4,7 +4,6 @@ import { InjectedIntlProps, injectIntl } from 'react-intl'
 import { Tooltip } from 'vtex.styleguide'
 
 import { useEditorContext } from '../../EditorContext'
-
 import { useHover } from './hooks'
 import IconPicker from './icons/IconPicker'
 
@@ -26,13 +25,17 @@ const BlockPicker: React.FC<InjectedIntlProps> = ({ intl }) => {
       position="bottom"
     >
       <button
+        style={editor.mode === 'disabled' ? { cursor: 'wait' } : {}}
         className={`w2 h2 bg-white br2 b--transparent outline-0 pointer flex justify-center items-center ${
-          editor.editMode || hover ? 'c-action-primary' : 'c-on-disabled'
+          editor.editMode || (hover && editor.mode !== 'disabled')
+            ? 'c-action-primary'
+            : 'c-on-disabled'
         }`}
         onClick={handleEditModeToggle}
         onKeyPress={handleKeyPress}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        disabled={editor.mode === 'disabled'}
       >
         <IconPicker />
       </button>

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

@@ -20,13 +20,27 @@ const LocaleSelector: React.FC<Props> = ({
 }) => {
   const { culture, emitter } = iframeRuntime
 
+  const editor = useEditorContext()
+
   const [locale, setLocale] = React.useState(culture.locale)
 
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       setLocale(e.target.value)
 
-      emitter.emit('localesChanged', e.target.value)
+      emitter.emit('localesChanged', e.target.value, null, () => {
+        if (editor.iframeWindow) {
+          const searchParams = new URLSearchParams(
+            editor.iframeWindow.location.search
+          )
+
+          const bindingQueryString = searchParams.get('__bindingAddress')
+
+          editor.iframeWindow.location.search = `__bindingAddress=${bindingQueryString}&__localeAddress=${e.target.value}&__siteEditor=true`
+        }
+      })
+
+      editor.setMode('disabled')
     },
     [emitter]
   )
@@ -35,6 +49,8 @@ const LocaleSelector: React.FC<Props> = ({
     if (locale !== culture.locale) {
       setLocale(culture.locale)
     }
+
+    if (editor.mode !== 'layout') editor.setMode('layout')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [culture.locale])
 
@@ -53,7 +69,6 @@ const LocaleSelector: React.FC<Props> = ({
     [className, handleChange, isDisabled, locale, options]
   )
 
-  const editor = useEditorContext()
   const intl = useIntl()
 
   return editor.editTreePath ? (

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

@@ -98,6 +98,8 @@ const ContextSelectors: React.FC<WithApolloClient<Props>> = ({
 
           editor.iframeWindow.location.search = `__bindingAddress=${newBinding.canonicalBaseAddress}&__siteEditor=true`
         }
+
+        editor.setMode('disabled')
       }
     },
     [bindings, setBinding, editor.iframeWindow]

react/components/EditorContainer/Topbar/UrlInput.tsx

@@ -10,7 +10,11 @@ const UrlInput = () => {
 
   const resolveUrlPath = (pathname: string, searchQueries: string) => {
     const searchParams = new URLSearchParams(searchQueries)
-    const SEARCH_QUERIES_TO_HIDE = ['__siteEditor', '__bindingAddress']
+    const SEARCH_QUERIES_TO_HIDE = [
+      '__siteEditor',
+      '__bindingAddress',
+      '__localeAddress',
+    ]
 
     SEARCH_QUERIES_TO_HIDE.forEach(query => {
       searchParams.delete(query)
@@ -34,6 +38,8 @@ const UrlInput = () => {
 
   React.useEffect(() => {
     setUrl(urlPath)
+
+    if (editor.mode !== 'layout') editor.setMode('layout')
   }, [urlPath])
 
   const onEnter = (

react/components/EditorProvider.tsx

@@ -306,7 +306,7 @@ class EditorProvider extends Component<Props, State> {
   }
 
   public handleSetMode = (mode: EditorMode) => {
-    this.setState({ mode })
+    this.setState({ mode, editMode: mode === 'content' ? true : false })
   }
 
   public handleChangeIframeUrl = (url: string) => {

react/typings/global.d.ts

@@ -170,7 +170,7 @@ declare global {
 
   type ConfigurationDevice = 'any' | 'desktop' | 'mobile'
 
-  type EditorMode = 'content' | 'layout'
+  type EditorMode = 'content' | 'layout' | 'disabled'
 
   interface EditorConditionSection {
     activeConditions: string[]