@plone/volto 17.0.0-alpha.6 → 17.0.0-alpha.8

package/src/components/theme/Logo/Logo.jsx

@@ -8,6 +8,7 @@ import { Image } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 
 const messages = defineMessages({
@@ -34,7 +35,7 @@ const Logo = () => {
 
   return (
     <UniversalLink
-      href={settings.isMultilingual ? `/${lang}` : '/'}
+      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
       title={intl.formatMessage(messages.site)}
     >
       <Image

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

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -23,7 +23,7 @@ const MultilingualRedirector = (props) => {
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
-      const langFileName = normalizeLanguageName(redirectToLanguage);
+      const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));

package/src/components/theme/Navigation/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
@@ -15,7 +15,9 @@ const NavItem = ({ item, lang }) => {
         className="item"
         activeClassName="active"
         exact={
-          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+          settings.isMultilingual
+            ? item.url === `/${toBackendLang(lang)}`
+            : item.url === ''
         }
       >
         {item.title}

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, toBackendLang } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -40,7 +40,7 @@ class Sitemap extends Component {
   componentDidMount() {
     const { settings } = config;
     if (settings.isMultilingual) {
-      this.props.getNavigation(`${this.props.lang}`, 4);
+      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
     } else {
       this.props.getNavigation('', 4);
     }
@@ -108,7 +108,9 @@ export default compose(
         const { settings } = config;
         const lang = getState().intl.locale;
         if (settings.isMultilingual) {
-          return __SERVER__ && dispatch(getNavigation(`${lang}`, 4));
+          return (
+            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
+          );
         } else {
           return __SERVER__ && dispatch(getNavigation('', 4));
         }

package/src/components/theme/View/EventDatesInfo.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
 import cx from 'classnames';
 
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -28,7 +29,7 @@ const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {

package/src/components/theme/Widgets/DateWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
       {children

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
       {children

package/src/components/theme/Widgets/RelationsWidget.jsx

@@ -5,17 +5,19 @@ import RelationWidget from './RelationWidget';
 const RelationsWidget = ({ value, children, className }) =>
   value ? (
     <ul className={cx(className, 'relations', 'widget')}>
-      {value.map((item, key) => (
-        <li key={key}>
-          <RelationWidget
-            value={item}
-            className={className}
-            key={item.token || item.title || item}
-          >
-            {children}
-          </RelationWidget>
-        </li>
-      ))}
+      {value.map((item, key) => {
+        return item ? (
+          <li key={key}>
+            <RelationWidget
+              value={item || `relation target not found '${key}'`}
+              className={className}
+              key={item.token || item.title || item}
+            >
+              {children}
+            </RelationWidget>
+          </li>
+        ) : null;
+      })}
     </ul>
   ) : (
     ''

package/src/config/ControlPanels.js

@@ -18,6 +18,7 @@ import settingsSVG from '@plone/volto/icons/settings.svg';
 import rulesSVG from '@plone/volto/icons/content-existing.svg';
 import undoControlPanelSVG from '@plone/volto/icons/undo-control-panel.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
+import relationsSVG from '@plone/volto/icons/ahead.svg';
 
 export const controlPanelsIcons = {
   default: settingsSVG,
@@ -40,6 +41,7 @@ export const controlPanelsIcons = {
   rules: rulesSVG,
   undo: undoControlPanelSVG,
   aliases: linkSVG,
+  relations: relationsSVG,
 };
 
 export const filterControlPanels = (controlpanels) => {

package/src/constants/ActionTypes.js

@@ -36,6 +36,10 @@ export const GET_NAVIGATION = 'GET_NAVIGATION';
 export const GET_PRINCIPALS = 'GET_PRINCIPALS';
 export const GET_QUERYSTRING = 'GET_QUERYSTRING';
 export const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
+export const CREATE_RELATIONS = 'CREATE_RELATIONS';
+export const DELETE_RELATIONS = 'DELETE_RELATIONS';
+export const LIST_RELATIONS = 'LIST_RELATIONS';
+export const REBUILD_RELATIONS = 'REBUILD_RELATIONS';
 export const GET_SCHEMA = 'GET_SCHEMA';
 export const POST_SCHEMA = 'POST_SCHEMA';
 export const PUT_SCHEMA = 'PUT_SCHEMA';

package/src/constants/Languages.js

@@ -4,14 +4,18 @@
  */
 
 module.exports = {
-  en: 'English',
+  ca: 'Català',
   de: 'Deutsch',
+  en: 'English',
+  es: 'Español',
+  eu: 'Euskara',
+  fi: 'Suomi',
+  fr: 'Français',
+  it: 'Italiano',
   nl: 'Nederlands',
   ro: 'Română',
   ja: '日本語',
   pt: 'Português',
   pt_BR: 'Português (Brasil)',
-  es: 'Spanish',
-  it: 'Italian',
-  eu: 'Euskara',
+  zh_CN: '中文',
 };

package/src/helpers/Html/Html.jsx

@@ -97,8 +97,10 @@ class Html extends Component {
     } = this.props;
     const head = Helmet.rewind();
     const bodyClass = join(BodyClass.rewind(), ' ');
+    const htmlAttributes = head.htmlAttributes.toComponent();
+
     return (
-      <html lang="en">
+      <html lang={htmlAttributes.lang}>
         <head>
           <meta charSet="utf-8" />
           {head.base.toComponent()}

package/src/helpers/Html/Html.test.jsx

@@ -20,6 +20,11 @@ jest.mock('../Helmet/Helmet', () => ({
     script: {
       toComponent: () => '',
     },
+    htmlAttributes: {
+      toComponent: () => ({
+        lang: 'en',
+      }),
+    },
   }),
 }));
 

package/src/helpers/MessageLabels/MessageLabels.js

@@ -260,4 +260,76 @@ export const messages = defineMessages({
     id: 'Show groups of users below',
     defaultMessage: 'Show groups of users below',
   },
+  inspectRelations: {
+    id: 'Inspect relations',
+    defaultMessage: 'Inspect relations',
+  },
+  relations: {
+    id: 'Relations',
+    defaultMessage: 'Relations',
+  },
+  fixRelations: {
+    id: 'Fix relations',
+    defaultMessage: 'Fix relations',
+  },
+  searchRelationSource: {
+    id: 'Search sources by title or path',
+    defaultMessage: 'Search sources by title or path',
+  },
+  searchRelationTarget: {
+    id: 'Search targets by title or path',
+    defaultMessage: 'Search targets by title or path',
+  },
+  createOrDeleteRelationsToTarget: {
+    id: 'Create or delete relations to target',
+    defaultMessage: 'Create or delete relations to target',
+  },
+  relationName: {
+    id: 'Relation name',
+    defaultMessage: 'relation',
+  },
+  selectRelation: {
+    id: 'Select relation',
+    defaultMessage: 'Select relation',
+  },
+  norelationfound: {
+    id: 'No relation found',
+    defaultMessage: 'No relation found',
+  },
+  toomanyrelationsfound: {
+    id: 'Many relations found. Please search.',
+    defaultMessage: 'Many relations found. Please search.',
+  },
+  rebuildRelations: {
+    id: 'rebuild relations',
+    defaultMessage: 'rebuild relations',
+  },
+  flushAndRebuildRelations: {
+    id: 'flush intIds and rebuild relations',
+    defaultMessage: 'flush intIds and rebuild relations',
+  },
+  addPotentialTargetsPath: {
+    id: 'target path',
+    defaultMessage: 'target path',
+  },
+  addPotentialSourcesPath: {
+    id: 'sources path',
+    defaultMessage: 'sources path',
+  },
+  relationsUpdated: {
+    id: 'Relations updated',
+    defaultMessage: 'Relations updated',
+  },
+  select: {
+    id: 'Select',
+    defaultMessage: 'Select',
+  },
+  selected: {
+    id: 'Selected',
+    defaultMessage: 'Selected',
+  },
+  filter: {
+    id: 'Filter',
+    defaultMessage: 'Filter',
+  },
 });

package/src/helpers/Utils/Utils.js

@@ -174,13 +174,13 @@ export const parseDateTime = (locale, value, format, moment) => {
 };
 
 /**
- * Converts a language code to the format `lang_region`
+ * Converts a language code like pt-br to the format `pt_BR` (`lang_region`)
  * Useful for passing from Plone's i18n lang names to Xnix locale names
- * eg. LC_MESSAGES/lang_region.po filenames
+ * eg. LC_MESSAGES/lang_region.po filenames. Also used in the I18N_LANGUAGE cookie.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const normalizeLanguageName = (language) => {
+export const toGettextLang = (language) => {
   if (language.includes('-')) {
     let normalizedLang = language.split('-');
     normalizedLang = `${normalizedLang[0]}_${normalizedLang[1].toUpperCase()}`;
@@ -189,23 +189,35 @@ export const normalizeLanguageName = (language) => {
 
   return language;
 };
+export const normalizeLanguageName = toGettextLang;
 
 /**
- * Converts a language code to the format `lang-region`
- * `react-intl` only supports this syntax, so coming from the language
- * negotiation of the `locale` lib, one need to convert it first
+ * Converts a language code like pt-br or pt_BR to the format `pt-BR`.
+ * `react-intl` only supports this syntax. We also use it for the locales
+ * in the volto Redux store.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const toLangUnderscoreRegion = (language) => {
-  if (language.includes('_')) {
-    let langCode = language.split('_');
+export const toReactIntlLang = (language) => {
+  if (language.includes('_') || language.includes('-')) {
+    let langCode = language.split(/[-_]/);
     langCode = `${langCode[0]}-${langCode[1].toUpperCase()}`;
     return langCode;
   }
 
   return language;
 };
+export const toLangUnderscoreRegion = toReactIntlLang; // old name for backwards-compat
+
+/**
+ * Converts a language code like pt_BR or pt-BR to the format `pt-br`.
+ * This format is used on the backend and in volto config settings.
+ * @param {string} language Language to be converted
+ * @returns {string} Language converted
+ */
+export const toBackendLang = (language) => {
+  return toReactIntlLang(language).toLowerCase();
+};
 
 /**
  * Lookup if a given expander is set in apiExpanders for the given path and action type

package/src/helpers/Utils/Utils.test.js

@@ -6,7 +6,7 @@ import {
   getColor,
   getInitials,
   hasApiExpander,
-  normalizeLanguageName,
+  toGettextLang,
   parseDateTime,
   removeFromArray,
   reorderArray,
@@ -284,12 +284,12 @@ describe('Utils tests', () => {
     });
   });
 
-  describe('normalizeLanguageName', () => {
+  describe('toGettextLang', () => {
     it('Normalizes an extended language (pt_BR)', () => {
-      expect(normalizeLanguageName('pt-br')).toStrictEqual('pt_BR');
+      expect(toGettextLang('pt-br')).toStrictEqual('pt_BR');
     });
     it('Normalizes a simple language (ca)', () => {
-      expect(normalizeLanguageName('ca')).toStrictEqual('ca');
+      expect(toGettextLang('ca')).toStrictEqual('ca');
     });
   });
 

package/src/helpers/index.js

@@ -80,8 +80,11 @@ export {
   applyConfig,
   withServerErrorCode,
   parseDateTime,
-  normalizeLanguageName,
-  toLangUnderscoreRegion,
+  toGettextLang,
+  normalizeLanguageName, // old name for toGettextLang
+  toReactIntlLang,
+  toLangUnderscoreRegion, // old name for toReactIntlLang
+  toBackendLang,
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,

package/src/middleware/api.js

@@ -18,7 +18,11 @@ import {
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 let socket = null;
 
 /**
@@ -205,11 +209,11 @@ const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
           const lang = result?.language?.token;
           if (
             lang &&
-            getState().intl.language !== lang &&
+            getState().intl.locale !== toReactIntlLang(lang) &&
             !subrequest &&
             config.settings.supportedLanguages.includes(lang)
           ) {
-            const langFileName = normalizeLanguageName(lang);
+            const langFileName = toGettextLang(lang);
             import('~/../locales/' + langFileName + '.json').then((locale) => {
               dispatch(changeLanguage(lang, locale.default));
             });

package/src/reducers/actions/actions.js

@@ -46,7 +46,7 @@ export default function actions(state = initialState, action = {}) {
         'actions',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (hasExpander) {
+      if (hasExpander && !action.subrequest) {
         return {
           ...state,
           error: null,

package/src/reducers/breadcrumbs/breadcrumbs.js

@@ -45,7 +45,7 @@ export default function breadcrumbs(state = initialState, action = {}) {
         'breadcrumbs',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (hasExpander) {
+      if (hasExpander && !action.subrequest) {
         return {
           ...state,
           error: null,

package/src/reducers/index.js

@@ -25,6 +25,7 @@ import messages from '@plone/volto/reducers/messages/messages';
 import navigation from '@plone/volto/reducers/navigation/navigation';
 import querystring from '@plone/volto/reducers/querystring/querystring';
 import querystringsearch from '@plone/volto/reducers/querystringsearch/querystringsearch';
+import relations from '@plone/volto/reducers/relations/relations';
 import roles from '@plone/volto/reducers/roles/roles';
 import rules from '@plone/volto/reducers/rules/rules';
 import controlpanelrule from '@plone/volto/reducers/controlPanelRule/controlPanelRule';
@@ -80,6 +81,7 @@ const reducers = {
   navigation,
   querystring,
   querystringsearch,
+  relations,
   roles,
   rules,
   controlpanelrule,

package/src/reducers/navigation/navigation.js

@@ -60,7 +60,7 @@ export default function navigation(state = initialState, action = {}) {
         'navigation',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (hasExpander) {
+      if (hasExpander && !action.subrequest) {
         return {
           ...state,
           error: null,

package/src/reducers/relations/relations.js

@@ -0,0 +1,173 @@
+/**
+ * Relations reducer.
+ * @module reducers/relations/relations
+ */
+
+import {
+  CREATE_RELATIONS,
+  DELETE_RELATIONS,
+  LIST_RELATIONS,
+  REBUILD_RELATIONS,
+} from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  relations: null,
+  stats: null,
+  create: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  delete: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  list: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  rebuild: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  subrequests: {},
+};
+
+/**
+ * Get request key
+ * @function getRequestKey
+ * @param {string} actionType Action type.
+ * @returns {string} Request key.
+ */
+function getRequestKey(actionType) {
+  return actionType.split('_')[0].toLowerCase();
+}
+
+/**
+ * Relations reducer.
+ * @function relations
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function relations(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${CREATE_RELATIONS}_PENDING`:
+    case `${DELETE_RELATIONS}_PENDING`:
+    case `${REBUILD_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+        },
+      };
+    case `${LIST_RELATIONS}_PENDING`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                ...(state.subrequests[action.subrequest] || {
+                  relations: null,
+                  stats: null,
+                }),
+                loaded: false,
+                loading: true,
+                error: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            [getRequestKey(action.type)]: {
+              loading: true,
+              loaded: false,
+              error: null,
+            },
+          };
+    case `${LIST_RELATIONS}_SUCCESS`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                loading: false,
+                loaded: true,
+                error: null,
+                relations: action.result.relations
+                  ? action.result.relations
+                  : state.relations,
+                stats: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: action.result.relations
+              ? action.result.relations
+              : state.relations,
+            stats: action.result.stats ? action.result : state.stats,
+            [getRequestKey(action.type)]: {
+              loading: false,
+              loaded: true,
+              error: null,
+            },
+          };
+    case `${CREATE_RELATIONS}_SUCCESS`:
+    case `${DELETE_RELATIONS}_SUCCESS`:
+    case `${REBUILD_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      };
+    case `${LIST_RELATIONS}_FAIL`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                relations: null,
+                stats: null,
+                loading: false,
+                loaded: false,
+                error: action.error,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: null,
+            stats: null,
+            [getRequestKey(action.type)]: {
+              loading: false,
+              loaded: false,
+              error: action.error,
+            },
+          };
+    case `${CREATE_RELATIONS}_FAIL`:
+    case `${DELETE_RELATIONS}_FAIL`:
+    case `${REBUILD_RELATIONS}_FAIL`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: false,
+          error: action.error,
+        },
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/types/types.js

@@ -39,7 +39,7 @@ export default function types(state = initialState, action = {}) {
         'types',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (hasExpander) {
+      if (hasExpander && !action.subrequest) {
         return {
           ...state,
           error: null,