@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

package/src/components/manage/LinksToItem/LinksToItem.jsx

@@ -0,0 +1,209 @@
+/**
+ * LinksToItem component
+ * @module components/manage/LinksToItem/LinksToItem
+ */
+import { useEffect } from 'react';
+import { find } from 'lodash';
+import { Helmet } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import { Portal } from 'react-portal';
+import { Container, Segment, Table } from 'semantic-ui-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { getContent, queryRelations } from '@plone/volto/actions';
+import {
+  Icon as IconNext,
+  Toolbar,
+  UniversalLink,
+} from '@plone/volto/components';
+
+import { getBaseUrl } from '@plone/volto/helpers';
+import backSVG from '@plone/volto/icons/back.svg';
+import settingsSVG from '@plone/volto/icons/settings.svg';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
+  helpLinkRelationsControlPanel: {
+    id: 'Overview of relations of all content items',
+    defaultMessage: 'Overview of relations of all content items',
+  },
+});
+
+const LinksToItem = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const pathname = props.location.pathname;
+  const itempath = getBaseUrl(pathname);
+
+  const title = useSelector((state) => state.content.data?.title || '');
+  const myrelations = useSelector(
+    (state) => state.relations.subrequests[itempath]?.relations,
+  );
+  const actions = useSelector((state) => state.actions?.actions ?? {});
+  const ploneSetupAction = find(actions.user, {
+    id: 'plone_setup',
+  });
+
+  useEffect(() => {
+    dispatch(queryRelations(null, false, itempath, null, [itempath]));
+  }, [dispatch, itempath]);
+
+  useEffect(() => {
+    if (!title) dispatch(getContent(itempath));
+  }, [dispatch, itempath, title]);
+
+  let links = {};
+  if (myrelations) {
+    Object.keys(myrelations).forEach((relationtype) => {
+      links[relationtype] = {};
+      myrelations[relationtype].items.forEach((item) => {
+        links[relationtype][item.source.UID] = item.source;
+      });
+    });
+  }
+
+  let links_ordered = {};
+  Object.keys(links).forEach((relationtype) => {
+    links_ordered[relationtype] = Object.values(links[relationtype]).sort(
+      (link) => link['@id'],
+    );
+  });
+
+  const relations_found = Object.keys(links_ordered).length > 0;
+  return (
+    <Container id="linkstoitem">
+      <Helmet title={intl.formatMessage(messages.linkstoitem)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage
+            id="Content that links to or references {title}"
+            defaultMessage="Content that links to or references {title}"
+            values={{ title: <q>{title}</q> }}
+          />
+        </Segment>
+        {relations_found ? (
+          <Table selectable compact singleLine attached>
+            {
+              <Table.Body>
+                {Object.keys(links_ordered).map((relationtype) => {
+                  return [].concat(
+                    [
+                      <Table.Row>
+                        <Table.HeaderCell>
+                          {relationtype === 'isReferencing' ? (
+                            <FormattedMessage
+                              id="Linking this item with hyperlink in text"
+                              defaultMessage="Linking this item with hyperlink in text"
+                            />
+                          ) : relationtype === 'relatedItems' ? (
+                            <FormattedMessage
+                              id="Referencing this item as related item"
+                              defaultMessage="Referencing this item as related item"
+                            />
+                          ) : (
+                            <>
+                              <FormattedMessage
+                                id="Referencing this item with {relationship}"
+                                defaultMessage="Referencing this item with {relationship}"
+                                values={{ relationship: <q>{relationtype}</q> }}
+                              />
+                            </>
+                          )}
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage
+                            id="Review state"
+                            defaultMessage="Review state"
+                          />
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage id="Type" defaultMessage="Type" />
+                        </Table.HeaderCell>
+                      </Table.Row>,
+                    ],
+                    links_ordered[relationtype].map((link) => {
+                      return (
+                        <Table.Row key={link['@id']}>
+                          <Table.Cell>
+                            <UniversalLink
+                              href={link['@id']}
+                              className={`source ${link.review_state}`}
+                            >
+                              <span className="label" title={link.type_title}>
+                                {link.title}
+                              </span>
+                            </UniversalLink>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.review_state}</span>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.type_title || ''}</span>
+                          </Table.Cell>
+                        </Table.Row>
+                      );
+                    }),
+                  );
+                })}
+              </Table.Body>
+            }
+          </Table>
+        ) : (
+          <Segment secondary>
+            <FormattedMessage
+              id="No links to this item found."
+              defaultMessage="No links to this item found."
+            />
+          </Segment>
+        )}
+      </Segment.Group>
+      {__CLIENT__ && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Link to={itempath} className="item">
+                  <IconNext
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+
+                <>
+                  {ploneSetupAction ? (
+                    <Link to="/controlpanel/relations" className="relations">
+                      <IconNext
+                        name={settingsSVG}
+                        className="circled"
+                        aria-label={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                        size="30px"
+                        title={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                      />
+                    </Link>
+                  ) : null}
+                </>
+              </>
+            }
+          />
+        </Portal>
+      )}
+    </Container>
+  );
+};
+
+export default LinksToItem;

package/src/components/manage/LinksToItem/LinksToItem.test.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import LinksToItem from './LinksToItem';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+
+jest.mock('react-portal', () => ({
+  Portal: jest.fn(() => <div id="Portal" />),
+}));
+jest.mock('../Toolbar/More', () => jest.fn(() => <div className="More" />));
+
+describe('LinksToItem', () => {
+  it('renders "links and references" view', () => {
+    const store = mockStore({
+      relations: {
+        subrequests: {
+          '/page-1': {
+            relations: {
+              isReferencing: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-basil',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Basil',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+              relatedItems: {
+                items: [
+                  {
+                    source: {
+                      '@id': 'http://localhost:3000/page-cucumber',
+                      '@type': 'Document',
+                      UID: 'SOMEUID008',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Cucumber',
+                      type_title: 'Document',
+                    },
+                    target: {
+                      '@id': 'http://localhost:3000/page-tomato',
+                      '@type': 'Document',
+                      UID: 'SOMEUID007',
+                      description: '',
+                      review_state: 'published',
+                      title: 'Tomato',
+                      type_title: 'Document',
+                    },
+                  },
+                ],
+                items_total: 1,
+              },
+            },
+          },
+        },
+      },
+      content: {
+        data: {
+          UID: 'SOMEUID007',
+          title: 'page #1',
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <LinksToItem location={{ pathname: '/page-1/links-to-item' }} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -6,7 +6,7 @@ import {
   getTranslationLocator,
   getContent,
 } from '@plone/volto/actions';
-import { flattenToAppURL, normalizeLanguageName } from '@plone/volto/helpers';
+import { flattenToAppURL, toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const CreateTranslation = (props) => {
@@ -33,7 +33,7 @@ const CreateTranslation = (props) => {
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
-        const langFileName = normalizeLanguageName(language);
+        const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
         });

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -15,7 +15,8 @@ import {
   Api,
   flattenToAppURL,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
+  toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
 const messages = defineMessages({
@@ -55,9 +56,9 @@ const TranslationObject = ({
       setLoadingLocale(true);
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
-      const langFileName = normalizeLanguageName(lang);
+      const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
-        setLocales({ ...locales, [lang]: locale.default });
+        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }

package/src/components/manage/Preferences/ChangePassword.jsx

@@ -43,8 +43,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   newPasswordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   newPasswordRepeatTitle: {
     id: 'Confirm password',

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -15,7 +15,7 @@ import { toast } from 'react-toastify';
 import { Form, Toast } from '@plone/volto/components';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -86,7 +86,7 @@ class PersonalPreferences extends Component {
   onSubmit(data) {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
-      const langFileName = normalizeLanguageName(language);
+      const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });

package/src/components/manage/Sharing/Sharing.jsx

@@ -14,7 +14,7 @@ import { Portal } from 'react-portal';
 import {
   Button,
   Checkbox,
-  Container,
+  Container as SemanticContainer,
   Form,
   Icon as IconOld,
   Input,
@@ -28,6 +28,7 @@ import { updateSharing, getSharing } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Icon, Toolbar, Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
+import config from '@plone/volto/registry';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -288,6 +289,9 @@ class SharingComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />

package/src/components/manage/Sidebar/AlignBlock.jsx

@@ -57,7 +57,7 @@ const AlignBlock = ({
   return (
     <div className="align-buttons">
       {actions.map((action) => (
-        <Button.Group>
+        <Button.Group key={action}>
           <Button
             icon
             basic

package/src/components/manage/TemplateChooser/TemplateChooser.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Button, Grid, Message } from 'semantic-ui-react';
+
+const TemplateChooser = ({ templates, onSelectTemplate }) => {
+  const intl = useIntl();
+  return (
+    <div className="template-chooser">
+      <Message>
+        <Grid columns={templates(intl).length}>
+          {templates(intl).map((template, index) => (
+            <Grid.Column key={template.id}>
+              <Button
+                className="template-chooser-item"
+                onClick={() => onSelectTemplate(index)}
+              >
+                <img src={template.image} alt="" />
+                <div className="template-chooser-title">
+                  {intl.formatMessage({
+                    id: template.id,
+                    defaultMessage: template.title,
+                  })}
+                </div>
+              </Button>
+            </Grid.Column>
+          ))}
+        </Grid>
+      </Message>
+    </div>
+  );
+};
+
+TemplateChooser.propTypes = {
+  templates: PropTypes.func.isRequired,
+  onSelectTemplate: PropTypes.func.isRequired,
+};
+
+export default TemplateChooser;

package/src/components/manage/TemplateChooser/TemplateChooser.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import TemplateChooser from './TemplateChooser';
+import templateSVG from './template.svg';
+
+const mockStore = configureStore();
+
+test('renders a TemplateChooser component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: { templateid: 'Template default translation' },
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <TemplateChooser
+        templates={() => [
+          {
+            image: templateSVG,
+            id: 'templateid',
+            defaultMessage: 'Template default translation',
+          },
+        ]}
+        onSelectTemplate={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/TemplateChooser/template.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="96" height="96" fill="#9FD1E5" rx="3"/>
+    <g fill="#FFF" opacity=".9" transform="translate(9 21)">
+      <rect width="78" height="29"/>
+      <rect width="36" height="8" y="33"/>
+      <rect width="77" height="10" y="45"/>
+    </g>
+  </g>
+</svg>

package/src/components/manage/Toast/Toast.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import successSVG from '@plone/volto/icons/ready.svg';
 import infoSVG from '@plone/volto/icons/info.svg';
@@ -15,7 +15,7 @@ const Toast = (props) => {
       return successSVG;
     } else if (props.error) {
       return errorSVG;
-    } else if (props.error) {
+    } else if (props.warning) {
       return warningSVG;
     } else {
       return successSVG;

package/src/components/manage/Toolbar/More.jsx

@@ -53,6 +53,10 @@ const messages = defineMessages({
     id: 'URL Management',
     defaultMessage: 'URL Management',
   },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
   ManageTranslations: {
     id: 'Manage Translations',
     defaultMessage: 'Manage Translations',
@@ -227,6 +231,7 @@ class More extends Component {
     const aliasesAction = find(this.props.actions.object_buttons, {
       id: 'redirection',
     });
+
     const { content, intl } = this.props;
 
     const dateOptions = {
@@ -317,6 +322,16 @@ class More extends Component {
                 </li>
               )}
             </Plug>
+            {path !== '' && !config.settings.excludeLinksAndReferencesMenuItem && (
+              <Plug pluggable="toolbar-more-menu-list" id="linkstoitems">
+                <li>
+                  <Link to={`${path}/links-to-item`}>
+                    {this.props.intl.formatMessage(messages.linkstoitem)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              </Plug>
+            )}
             <Plug pluggable="toolbar-more-menu-list" id="rules">
               {rulesAction && (
                 <li>

package/src/components/manage/Toolbar/Types.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { filter, find, isEmpty, map } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-import { flattenToAppURL, langmap } from '@plone/volto/helpers';
+import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
@@ -59,7 +59,7 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                   find(content['@components'].translations.items, {
                     language: lang,
                   }),
-              ) && currentLanguage !== lang,
+              ) && toBackendLang(currentLanguage) !== lang,
           );
 
           return (

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -12,7 +12,6 @@ import {
   isInternalURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
-import { matchPath } from 'react-router';
 
 import config from '@plone/volto/registry';
 
@@ -66,11 +65,8 @@ const UniversalLink = ({
     }
   }
 
-  const isBlacklisted =
-    (config.settings.externalRoutes ?? []).find((route) =>
-      matchPath(flattenToAppURL(url), route.match),
-    )?.length > 0;
-  const isExternal = !isInternalURL(url) || isBlacklisted;
+  const isExternal = !isInternalURL(url);
+
   const isDownload = (!isExternal && url.includes('@@download')) || download;
   const isDisplayFile =
     (!isExternal && url.includes('@@display-file')) || false;

package/src/components/manage/UniversalLink/UniversalLink.test.jsx

@@ -157,6 +157,42 @@ describe('UniversalLink', () => {
     );
   });
 
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+  });
+
   it('check UniversalLink does not break with error in item', () => {
     const component = renderer.create(
       <Provider store={store}>

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

@@ -51,7 +51,12 @@ const ColorPickerWidget = (props) => {
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        onChange(id, color.name);
+                        onChange(
+                          id,
+                          value === color.name
+                            ? props.missing_value
+                            : color.name,
+                        );
                       }}
                       active={value === color.name}
                       circular