@plone/volto 14.7.1 → 14.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 14.8.0 (2022-02-03)
+
+### Feature
+
+- Enable `components` property in Volto's config registry. Does not expose any direct feature but this will open the door to be able to override registered components using the config registry and avoid using shadowing explicitly. @sneridagh
+- Add `resolve` and `register` helper methods for the Volto config. They retrieve and register new components in the registry. @tiberiuichim @sneridagh
+- Add `Component` component, given a `name` of a component registered in the registry, it renders it, passing down the props. @tiberiuichim
+- Syncronize the content language with the UI language in multilingual sites. So when you are accessing a content in a given language the rest of the interface literals follow along (it updates the language cookie). So the UI remains consistent. @sneridagh
+
+### Bugfix
+
+- Fix the a11y violation of UrlWidget @iRohitSingh
+
+### Internal
+
+- Update volta pins in package.json @fredvd
+
 ## 14.7.1 (2022-02-02)
 
 ### Internal

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.7.1",
+  "version": "14.8.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -434,7 +434,7 @@
     "ua-parser-js": "0.7.28"
   },
   "volta": {
-    "node": "14.17.0",
-    "yarn": "1.19.1"
+    "node": "16.13.2",
+    "yarn": "1.22.17"
   }
 }

package/src/components/manage/Widgets/UrlWidget.jsx

@@ -101,6 +101,7 @@ export const UrlWidget = (props) => {
             <Button
               basic
               className="cancel"
+              aria-label="clearUrlBrowser"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -115,6 +116,7 @@ export const UrlWidget = (props) => {
             <Button
               basic
               icon
+              aria-label="openUrlBrowser"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();

package/src/components/theme/App/App.jsx

@@ -146,7 +146,10 @@ class App extends Component {
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />
-        <MultilingualRedirector pathname={this.props.pathname}>
+        <MultilingualRedirector
+          pathname={this.props.pathname}
+          contentLanguage={this.props.content?.language?.token}
+        >
           <Segment basic className="content-area">
             <main>
               <OutdatedBrowser />

package/src/components/theme/Component/Component.jsx

@@ -0,0 +1,19 @@
+import registry from '@plone/volto/registry';
+
+/**
+ * A component that can autommatically look up its implementation from the
+ * registry based on the provided component name
+ */
+const Component = ({ name, ...rest }) => {
+  const Component = registry.resolve(name)?.component;
+
+  if (!Component) {
+    // eslint-disable-next-line no-console
+    console.warn(`Component not found in registry: ${name}`);
+    return null;
+  }
+
+  return <Component {...rest} />;
+};
+
+export default Component;

package/src/components/theme/Component/Component.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import Component from './Component';
+import config from '@plone/volto/registry';
+
+config.set('components', {
+  Toolbar: { component: (props) => <div>this is the Toolbar component</div> },
+  'Toolbar.Types': {
+    component: ({ teststring }) => (
+      <div>this is the Toolbar component with a prop {teststring} in it</div>
+    ),
+  },
+});
+
+describe('Component component :P', () => {
+  it('Render a Component in the registry', () => {
+    const { container } = render(<Component name="Toolbar" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('Renders a Fallback Component that does not exists in the registry', () => {
+    const { container } = render(<Component name="Toolbar.Foo" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('Renders a Component in the registry - passes props correctly', () => {
+    const { container } = render(
+      <Component name="Toolbar.Types" teststring="Hi!" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -8,7 +8,7 @@ import { normalizeLanguageName } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
-  const { pathname, children } = props;
+  const { pathname, contentLanguage, children } = props;
   const currentLanguage =
     cookie.load('I18N_LANGUAGE') || settings.defaultLanguage;
   const redirectToLanguage = settings.supportedLanguages.includes(
@@ -18,6 +18,33 @@ const MultilingualRedirector = (props) => {
     : settings.defaultLanguage;
   const dispatch = useDispatch();
 
+  React.useEffect(() => {
+    // This ensures the current content language and the current active language in the
+    // UI are the same. Otherwise, there are inconsistencies between the UI main elements
+    // eg. Home link in breadcrumbs, other i18n dependant literals from the main UI and
+    // the current content language.
+    if (
+      contentLanguage &&
+      currentLanguage !== contentLanguage &&
+      pathname &&
+      // We don't want to trigger it in Babel View, since Babel view already takes care
+      // of it
+      !pathname.endsWith('/add') &&
+      settings.isMultilingual
+    ) {
+      const langFileName = normalizeLanguageName(contentLanguage);
+      import('~/../locales/' + langFileName + '.json').then((locale) => {
+        dispatch(changeLanguage(contentLanguage, locale.default));
+      });
+    }
+  }, [
+    pathname,
+    dispatch,
+    currentLanguage,
+    contentLanguage,
+    settings.isMultilingual,
+  ]);
+
   React.useEffect(() => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);

package/src/config/index.js

@@ -192,3 +192,4 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.appExtras = config.appExtras;
+ConfigRegistry.components = config.components;

package/src/registry.js

@@ -79,6 +79,22 @@ class Config {
   set slots(slots) {
     this._data.slots = slots;
   }
+
+  get components() {
+    return this._data.components;
+  }
+
+  set components(components) {
+    this._data.components = components;
+  }
+
+  resolve(component) {
+    return this._data.components[component] || {};
+  }
+
+  register(name, component) {
+    this._data.components[name] = component;
+  }
 }
 
 const instance = new Config();

package/src/registry.test.js

@@ -0,0 +1,28 @@
+import config from './registry';
+
+config.set('components', {
+  Toolbar: { component: 'this is the Toolbar component' },
+  'Toolbar.Types': { component: 'this is the Types component' },
+});
+
+describe('registry', () => {
+  it('resolve components', () => {
+    expect(config.resolve('Toolbar').component).toEqual(
+      'this is the Toolbar component',
+    );
+  });
+  it('resolve components with dots', () => {
+    expect(config.resolve('Toolbar.Types').component).toEqual(
+      'this is the Types component',
+    );
+  });
+  it('resolve unexistent component', () => {
+    expect(config.resolve('Toolbar.Doh').component).toEqual(undefined);
+  });
+  it('register component by name', () => {
+    config.register('Toolbar.Bar', { component: 'this is a Bar component' });
+    expect(config.resolve('Toolbar.Bar').component).toEqual(
+      'this is a Bar component',
+    );
+  });
+});