@plone/volto 17.0.0-alpha.7 → 17.0.0-alpha.9

package/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx

@@ -9,8 +9,6 @@ import { listGroups } from '@plone/volto/actions';
 import { Icon, Toast } from '@plone/volto/components';
 import { updateGroup, listUsers } from '@plone/volto/actions';
 
-import add from '@plone/volto/icons/add.svg';
-import remove from '@plone/volto/icons/remove.svg';
 import down_key from '@plone/volto/icons/down-key.svg';
 
 const ListingTemplate = ({
@@ -116,7 +114,7 @@ const ListingTemplate = ({
     }
   }, [dispatch, query_group, show_matrix_options, groups_filter]);
 
-  const onSelectOptionHandler = (item, selectedvalue, checked, singleClick) => {
+  const onSelectOptionHandler = (selectedvalue, checked, singleClick) => {
     singleClick = singleClick ?? false;
     let group = selectedvalue.y;
     let username = selectedvalue.x;
@@ -150,17 +148,14 @@ const ListingTemplate = ({
       });
   };
 
-  const onSelectAllHandler = (mtxoption, checked) => {
-    let elements = document.querySelectorAll(`div.checkbox_${mtxoption} input`);
-    let identifier;
+  const onSelectAllHandler = (group, items_ids, checked) => {
     let usersgroupmapping = {};
-    elements.forEach((element) => {
-      identifier = element.name.split('_-_');
-      usersgroupmapping[identifier[1]] = checked ? true : false;
+    items_ids.forEach((el) => {
+      usersgroupmapping[el] = checked ? true : false;
     });
 
     dispatch(
-      updateGroup(identifier[2], {
+      updateGroup(group, {
         users: usersgroupmapping,
       }),
     )
@@ -188,93 +183,68 @@ const ListingTemplate = ({
     <div className="administration_matrix">
       {matrix_options && matrix_options?.length > 0 && (
         <div className="label-options">
-          {matrix_options?.map((matrix_option) => (
-            <div
-              className="label-options-label inclined"
-              key={matrix_option.value}
-            >
-              <div>
-                <span className="label">{matrix_option.label}</span>
+          <div className="target-labels">
+            <div>
+              <h3>{items.length} users</h3>
+            </div>
+            <div>
+              {matrix_options?.map((matrix_option) => (
+                <div
+                  className="label-options-label inclined"
+                  key={matrix_option.value}
+                >
+                  <div>
+                    <span className="label">{matrix_option.label}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="listing-row selectall" key="selectall">
+            <div className="listing-item">
+              <div />
+              <div className="matrix_options">
+                {matrix_options?.map((matrix_option) => (
+                  <div key={matrix_option.value}>
+                    <Checkbox
+                      className="toggle-target"
+                      defaultChecked={false}
+                      onChange={(event, { checked }) =>
+                        onSelectAllHandler(
+                          matrix_option.value,
+                          items.map((el) => el.id),
+                          checked,
+                        )
+                      }
+                    />
+                  </div>
+                ))}
               </div>
             </div>
-          ))}
+          </div>
         </div>
       )}
 
       <div className="items">
         {items.length > 0 ? (
           <>
-            <div className="listing-row selectall" key="selectall">
-              <div className="listing-item">
-                <div />
-                <div className="matrix_options">
-                  {matrix_options?.map((matrix_option) => (
-                    <div key={matrix_option.value}>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, true)
-                        }
-                        className="add-button"
-                        aria-label={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.addUsersToGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={add}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                      <Button
-                        icon
-                        basic
-                        onClick={() =>
-                          onSelectAllHandler(matrix_option.value, false)
-                        }
-                        className="remove-button"
-                        aria-label={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                        title={
-                          intl.formatMessage(messages.removeUsersFromGroup) +
-                          ` ${matrix_option.label}`
-                        }
-                      >
-                        <Icon
-                          name={remove}
-                          size="10px"
-                          className="circled"
-                          color="unset"
-                        />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <h3>{items.length} users </h3>
             {items.map((item) => (
-              <div className="listing-row" key={item.id}>
+              <div
+                className="listing-row"
+                key={item.id}
+                id={`source-row-${item.id}`}
+              >
                 <div className="listing-item" key={item['@id']}>
                   <div>
-                    <h4>
-                      {item.fullname} ({item.id})
+                    <h4 title={`${item.fullname} ${item.id}`}>
+                      {item.fullname?.length > 25
+                        ? item.fullname.slice(0, 22) + '...'
+                        : item.fullname || item.id}
                     </h4>
                   </div>
                   <div className="matrix_options">
                     {matrix_options?.map((matrix_option) => (
                       <Checkbox
-                        name={`member_-_${item.id}_-_${matrix_option.value}`}
                         className={`checkbox_${matrix_option.value}`}
                         key={matrix_option.value}
                         title={matrix_option.title}
@@ -283,7 +253,6 @@ const ListingTemplate = ({
                           .includes(matrix_option.value)}
                         onChange={(event, { checked }) => {
                           onSelectOptionHandler(
-                            item,
                             { y: matrix_option.value, x: item.id },
                             checked,
                             true,

package/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx

@@ -122,83 +122,87 @@ const UserGroupMembershipMatrix = ({ many_users, many_groups }) => {
 
   return (
     <div className="controlpanel_matrix">
-      <div className="controlpanel_search_y">
-        <Form className="search_users" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchUser"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchUsers)}
-              onChange={onChangeSearchUsers}
-              onKeyDown={onChangeSearchUsers}
-              id="user-search-input"
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_search_wrapper">
+        <div className="controlpanel_search_y">
+          <Form className="search_users" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchUser"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchUsers)}
+                onChange={onChangeSearchUsers}
+                onKeyDown={onChangeSearchUsers}
+                id="user-search-input"
+              />
+            </Form.Field>
+          </Form>
+        </div>
+        <div className="controlpanel_search_x">
+          <Form className="search_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroup"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroups}
+                onKeyDown={onChangeSearchGroups}
+                id="group-search-input"
+              />
+            </Form.Field>
+            <Form.Field>
+              <Checkbox
+                name="addJoinedGroups"
+                label={intl.formatMessage(messages.addJoinedGroups)}
+                title={intl.formatMessage(messages.addJoinedGroups)}
+                defaultChecked={false}
+                onChange={(event, { checked }) => {
+                  onToggleJoinedGroups(checked);
+                }}
+              />
+            </Form.Field>
+          </Form>
+        </div>
       </div>
-      <div className="controlpanel_search_x">
-        <Form className="search_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroup"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroups}
-              onKeyDown={onChangeSearchGroups}
-              id="group-search-input"
-            />
-          </Form.Field>
-          <Form.Field>
-            <Checkbox
-              name="addJoinedGroups"
-              label={intl.formatMessage(messages.addJoinedGroups)}
-              title={intl.formatMessage(messages.addJoinedGroups)}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onToggleJoinedGroups(checked);
-              }}
-            />
-          </Form.Field>
-        </Form>
+      <div className="controlpanel_listing_wrapper">
+        <div className="controlpanel_filter">
+          <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
+          <Form className="search_filter_groups" onSubmit={onReset}>
+            <Form.Field>
+              <Input
+                name="SearchGroupFilter"
+                action={{ icon: 'delete' }}
+                placeholder={intl.formatMessage(messages.searchGroups)}
+                onChange={onChangeSearchGroupsFilter}
+                onKeyDown={onChangeSearchGroupsFilter}
+                id="groupfilter-search-input"
+              />
+            </Form.Field>
+          </Form>
+          {(!many_groups || query_group_filter.length > 1) &&
+            filter_options?.map((filter_option) => (
+              <Form.Field>
+                <Checkbox
+                  name={`filter_option_${filter_option.value}`}
+                  key={filter_option.value}
+                  title={filter_option.label}
+                  label={filter_option.label}
+                  defaultChecked={false}
+                  onChange={(event, { checked }) => {
+                    onSelectOptionHandler(filter_option, checked);
+                  }}
+                />
+              </Form.Field>
+            ))}
+        </div>
+        <UserGroupMembershipListing
+          query_user={query_user}
+          query_group={query_group}
+          groups_filter={groups_filter}
+          add_joined_groups={add_joined_groups}
+          many_users={many_users}
+          many_groups={many_groups}
+        />
       </div>
-      <div className="controlpanel_filter">
-        <h3>{intl.formatMessage(messages.filterByGroups)}</h3>
-
-        <Form className="search_filter_groups" onSubmit={onReset}>
-          <Form.Field>
-            <Input
-              name="SearchGroupFilter"
-              action={{ icon: 'delete' }}
-              placeholder={intl.formatMessage(messages.searchGroups)}
-              onChange={onChangeSearchGroupsFilter}
-              onKeyDown={onChangeSearchGroupsFilter}
-              id="groupfilter-search-input"
-            />
-          </Form.Field>
-        </Form>
-
-        {(!many_groups || query_group_filter.length > 1) &&
-          filter_options?.map((filter_option) => (
-            <Checkbox
-              name={`filter_option_${filter_option.value}`}
-              key={filter_option.value}
-              title={filter_option.label}
-              label={filter_option.label}
-              defaultChecked={false}
-              onChange={(event, { checked }) => {
-                onSelectOptionHandler(filter_option, checked);
-              }}
-            />
-          ))}
-      </div>
-      <UserGroupMembershipListing
-        query_user={query_user}
-        query_group={query_group}
-        groups_filter={groups_filter}
-        add_joined_groups={add_joined_groups}
-        many_users={many_users}
-        many_groups={many_groups}
-      />
     </div>
   );
 };

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

@@ -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/theme/NotFound/NotFound.jsx

@@ -1,53 +1,67 @@
-/**
- * Home container.
- * @module components/theme/NotFound/NotFound
- */
-
-import React from 'react';
+import { useEffect } from 'react';
+import { BodyClass, toBackendLang } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
 
 /**
  * Not found function.
  * @function NotFound
  * @returns {string} Markup of the not found page.
  */
-const NotFound = () => (
-  <Container className="view-wrapper">
-    <h1>
-      <FormattedMessage
-        id="This page does not seem to exist…"
-        defaultMessage="This page does not seem to exist…"
-      />
-    </h1>
-    <p className="description">
-      <FormattedMessage
-        id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-        defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-      />
-    </p>
-    <p>
-      <FormattedMessage
-        id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        values={{
-          site_admin: (
-            <Link to="/contact-form">
-              <FormattedMessage
-                id="Site Administration"
-                defaultMessage="Site Administration"
-              />
-            </Link>
-          ),
-        }}
-      />
-    </p>
-    <p>
-      <FormattedMessage id="Thank you." defaultMessage="Thank you." />
-    </p>
-  </Container>
-);
+const NotFound = () => {
+  const dispatch = useDispatch();
+  const lang = useSelector((state) => state.intl.locale);
+
+  useEffect(() => {
+    dispatch(
+      getNavigation(
+        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        config.settings.navDepth,
+      ),
+    );
+  }, [dispatch, lang]);
+
+  return (
+    <Container className="view-wrapper">
+      <BodyClass className="page-not-found" />
+      <h1>
+        <FormattedMessage
+          id="This page does not seem to exist…"
+          defaultMessage="This page does not seem to exist…"
+        />
+      </h1>
+      <p className="description">
+        <FormattedMessage
+          id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+          defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          values={{
+            site_admin: (
+              <Link to="/contact-form">
+                <FormattedMessage
+                  id="Site Administration"
+                  defaultMessage="Site Administration"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="Thank you." defaultMessage="Thank you." />
+      </p>
+    </Container>
+  );
+};
 
 export default withServerErrorCode(404)(NotFound);

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

@@ -44,7 +44,13 @@ const RenderBlocks = (props) => {
         });
 
         return Block ? (
-          <StyleWrapper key={block} {...props} id={block} data={blockData}>
+          <StyleWrapper
+            key={block}
+            {...props}
+            id={block}
+            block={block}
+            data={blockData}
+          >
             <Block
               id={block}
               metadata={metadata}

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/Api/Api.js

@@ -89,7 +89,7 @@ class Api {
               checkUrl &&
               request.url &&
               request.xhr &&
-              stripQuerystring(request.url) !==
+              encodeURI(stripQuerystring(request.url)) !==
                 stripQuerystring(request.xhr.responseURL)
             ) {
               if (request.xhr.responseURL?.length === 0) {

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',
+      }),
+    },
   }),
 }));