@plone/volto 17.0.0-alpha.1 → 17.0.0-alpha.10

package/src/actions/language/language.js

@@ -1,5 +1,9 @@
 import { updateIntl } from 'react-intl-redux';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 import Cookies from 'universal-cookie';
 
 export function changeLanguageCookies(language, req) {
@@ -7,18 +11,15 @@ export function changeLanguageCookies(language, req) {
 
   const cookieOptions = getCookieOptions({
     secure: req?.protocol?.startsWith('https') ? true : false,
+    sameSite: 'strict',
   });
 
   if (!req) {
-    cookies.set(
-      'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
-      cookieOptions,
-    );
+    cookies.set('I18N_LANGUAGE', toGettextLang(language) || '', cookieOptions);
   } else {
     req.universalCookies.set(
       'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
+      toGettextLang(language) || '',
       cookieOptions,
     );
   }
@@ -35,7 +36,7 @@ export function changeLanguage(language, locale, req) {
   changeLanguageCookies(language, req);
 
   return updateIntl({
-    locale: language,
+    locale: toReactIntlLang(language),
     messages: locale,
   });
 }

package/src/actions/querystringsearch/querystringsearch.js

@@ -31,24 +31,30 @@ export function getQueryStringResults(path, data, subrequest, page) {
     }
   }
 
+  const query = {
+    ...requestData,
+    ...(!requestData.b_size && {
+      b_size: settings.defaultPageSize,
+    }),
+    ...(page && {
+      b_start: requestData.b_size
+        ? data.b_size * (page - 1)
+        : settings.defaultPageSize * (page - 1),
+    }),
+    query: requestData?.query,
+  };
+
   return {
     type: GET_QUERYSTRING_RESULTS,
     subrequest,
     request: {
-      op: 'post',
-      path: `${path}/@querystring-search`,
-      data: {
-        ...requestData,
-        ...(!requestData.b_size && {
-          b_size: settings.defaultPageSize,
-        }),
-        ...(page && {
-          b_start: requestData.b_size
-            ? data.b_size * (page - 1)
-            : settings.defaultPageSize * (page - 1),
-        }),
-        query: requestData?.query,
-      },
+      op: settings.querystringSearchGet ? 'get' : 'post',
+      path: `${path}/@querystring-search${
+        settings.querystringSearchGet
+          ? `?query=${encodeURIComponent(JSON.stringify(query))}`
+          : ''
+      }`,
+      data: settings.querystringSearchGet ? null : query,
     },
   };
 }

package/src/actions/relations/rebuild.js

@@ -0,0 +1,25 @@
+/**
+ * Rebuild relations action.
+ * @module actions/relations/rebuild
+ */
+
+import { REBUILD_RELATIONS } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Rebuild relation function.
+ * @function rebuildRelations
+ * @param {Boolean} flush Flush intids
+ * @returns {Object} Rebuild relation action.
+ */
+export function rebuildRelations(flush = false) {
+  let path = '/@relations';
+  var searchParams = new URLSearchParams();
+  searchParams.append('rebuild', '1');
+  flush && searchParams.append('flush', '1');
+  const searchParamsToString = searchParams.toString();
+  path += `?${searchParamsToString}`;
+  return {
+    type: REBUILD_RELATIONS,
+    request: { op: 'get', path: path },
+  };
+}

package/src/actions/relations/relations.js

@@ -0,0 +1,86 @@
+/**
+ * Relations actions.
+ * @module actions/relations/relations
+ */
+
+import {
+  CREATE_RELATIONS,
+  DELETE_RELATIONS,
+  LIST_RELATIONS,
+} from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Create relation function.
+ * @function createRelations
+ * @param {Object|Array} content Relation data.
+ * @returns {Object} Create relation action.
+ */
+export function createRelations(content) {
+  return {
+    type: CREATE_RELATIONS,
+    request: {
+      op: 'post',
+      path: '/@relations',
+      data: {
+        items: content,
+      },
+    },
+  };
+}
+
+/**
+ * Delete relation function.
+ * @function deleteRelations
+ * @param {string} id Relation id
+ * @returns {Object} Delete relation action.
+ */
+export function deleteRelations(content) {
+  return {
+    type: DELETE_RELATIONS,
+    request: {
+      op: 'del',
+      path: `/@relations`,
+      data: {
+        items: content,
+      },
+    },
+  };
+}
+
+/**
+ * Query relations
+ * @function queryRelations
+ * @param {string} relation Name of relation
+ * @param {boolean} onlyBroken
+ * @returns {Object} List relations action
+ */
+export function queryRelations(
+  relation = null,
+  onlyBroken = false,
+  subrequest = null,
+  source = null,
+  target = null,
+  query_source = null,
+  query_target = null,
+) {
+  let path = '/@relations';
+  var searchParams = new URLSearchParams();
+  relation && searchParams.append('relation', relation);
+  onlyBroken && searchParams.append('onlyBroken', onlyBroken);
+  source && searchParams.append('source', source);
+  target && searchParams.append('target', target);
+  query_source && searchParams.append('query_source', query_source);
+  query_target && searchParams.append('query_target', query_target);
+  const searchParamsToString = searchParams.toString();
+  if (searchParamsToString) {
+    path += `?${searchParamsToString}`;
+  }
+  return {
+    type: LIST_RELATIONS,
+    subrequest,
+    request: {
+      op: 'get',
+      path: path,
+    },
+  };
+}

package/src/actions/relations/relations.test.js

@@ -0,0 +1,15 @@
+import { queryRelations } from './relations';
+import { LIST_RELATIONS } from '@plone/volto/constants/ActionTypes';
+
+describe('Relations action', () => {
+  describe('queryRelations', () => {
+    it('should create an action to get relations of type "relatedItems"', () => {
+      const relation = 'relatedItems';
+      const action = queryRelations(relation);
+
+      expect(action.type).toEqual(LIST_RELATIONS);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`/@relations?relation=${relation}`);
+    });
+  });
+});

package/src/components/index.js

@@ -89,6 +89,7 @@ export ContentTypeSchema from '@plone/volto/components/manage/Controlpanels/Cont
 export ContentTypesActions from '@plone/volto/components/manage/Controlpanels/ContentTypesActions';
 export UsersControlpanel from '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel';
 export UserGroupMembershipControlPanel from '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel';
+export Relations from '@plone/volto/components/manage/Controlpanels/Relations/Relations';
 export GroupsControlpanel from '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel';
 export RulesControlpanel from '@plone/volto/components/manage/Controlpanels/Rules/Rules';
 export AddRuleControlpanel from '@plone/volto/components/manage/Controlpanels/Rules/AddRule';

package/src/components/manage/Add/Add.jsx

@@ -33,7 +33,7 @@ import {
   getBlocksLayoutFieldname,
   getLanguageIndependentFields,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
 } from '@plone/volto/helpers';
 
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
@@ -219,7 +219,7 @@ class Add extends Component {
   onCancel() {
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
-      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/BlockChooser/BlockChooser.jsx

@@ -33,17 +33,22 @@ const BlockChooser = ({
   properties = {},
 }) => {
   const intl = useIntl();
-  const useAllowedBlocks = !isEmpty(allowedBlocks);
+  const hasAllowedBlocks = !isEmpty(allowedBlocks);
 
   const filteredBlocksConfig = filter(blocksConfig, (item) => {
+    // Check if the block is well formed (has at least id and title)
+    const blockIsWellFormed = Boolean(item.title && item.id);
+    if (!blockIsWellFormed) {
+      return false;
+    }
     if (showRestricted) {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         return true;
       }
     } else {
-      if (useAllowedBlocks) {
+      if (hasAllowedBlocks) {
         return allowedBlocks.includes(item.id);
       } else {
         // Overload restricted as a function, so we can decide the availability of a block
@@ -89,14 +94,18 @@ const BlockChooser = ({
   function blocksAvailableFilter(blocks) {
     return blocks.filter(
       (block) =>
-        getFormatMessage(block.title).toLowerCase().includes(filterValue) ||
+        getFormatMessage(block.title)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase()) ||
         filterVariations(block)?.length,
     );
   }
   function filterVariations(block) {
     return block.variations?.filter(
       (variation) =>
-        getFormatMessage(variation.title).toLowerCase().includes(filterValue) &&
+        getFormatMessage(variation.title)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase()) &&
         !variation.title.toLowerCase().includes('default'),
     );
   }

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

@@ -108,6 +108,11 @@ config.blocks.blocksConfig = {
     restricted: false,
     mostUsed: false,
   },
+  malformedBlock: {
+    icon: blockSVG,
+    group: 'common',
+    restricted: false,
+  },
 };
 
 const mockStore = configureStore();

package/src/components/manage/Blocks/Listing/Edit.jsx

@@ -26,35 +26,16 @@ const messages = defineMessages({
 const Edit = React.memo(
   (props) => {
     const { data, onChangeBlock, block, selected, pathname } = props;
-
     const intl = useIntl();
-
-    // componentDidMount
-    React.useEffect(() => {
-      if (!data.query) {
-        onChangeBlock(block, {
-          ...data,
-          query: [],
-          block,
-        });
-      }
-      /* eslint-disable react-hooks/exhaustive-deps */
-    }, []);
-
     const placeholder =
       data.placeholder ||
       (data?.querystring?.query?.length
         ? intl.formatMessage(messages.results)
         : intl.formatMessage(messages.items));
 
-    const HeadlineTag = data.headlineTag || 'h2';
-
     return (
       <>
         <p className="items-preview">{placeholder}</p>
-        {data.headline && (
-          <HeadlineTag className="headline">{data.headline}</HeadlineTag>
-        )}
         <ListingBody {...props} path={getBaseUrl(pathname)} isEditMode />
         <SidebarPortal selected={selected}>
           <ListingData

package/src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -1,5 +1,6 @@
 import React, { createRef } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
+import cx from 'classnames';
 import { Pagination, Dimmer, Loader } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import config from '@plone/volto/registry';
@@ -44,70 +45,85 @@ const ListingBody = withQuerystringResults((props) => {
     ? variation.noResultsComponent
     : config.blocks?.blocksConfig['listing'].noResultsComponent;
 
-  return listingItems?.length > 0 ? (
-    <div ref={listingRef}>
-      <ListingBodyTemplate
-        items={listingItems}
-        isEditMode={isEditMode}
-        {...data}
-        {...variation}
-      />
-      {totalPages > 1 && (
-        <div className="pagination-wrapper">
-          <Pagination
-            activePage={currentPage}
-            totalPages={totalPages}
-            onPageChange={(e, { activePage }) => {
-              !isEditMode &&
-                listingRef.current.scrollIntoView({ behavior: 'smooth' });
-              onPaginationChange(e, { activePage });
-            }}
-            firstItem={null}
-            lastItem={null}
-            prevItem={{
-              content: <Icon name={paginationLeftSVG} size="18px" />,
-              icon: true,
-              'aria-disabled': !prevBatch,
-              className: !prevBatch ? 'disabled' : null,
-            }}
-            nextItem={{
-              content: <Icon name={paginationRightSVG} size="18px" />,
-              icon: true,
-              'aria-disabled': !nextBatch,
-              className: !nextBatch ? 'disabled' : null,
-            }}
+  const HeadlineTag = data.headlineTag || 'h2';
+
+  return (
+    <>
+      {data.headline && (
+        <HeadlineTag
+          className={cx('headline', {
+            emptyListing: !listingItems?.length > 0,
+          })}
+        >
+          {data.headline}
+        </HeadlineTag>
+      )}
+      {listingItems?.length > 0 ? (
+        <div ref={listingRef}>
+          <ListingBodyTemplate
+            items={listingItems}
+            isEditMode={isEditMode}
+            {...data}
+            {...variation}
           />
+          {totalPages > 1 && (
+            <div className="pagination-wrapper">
+              <Pagination
+                activePage={currentPage}
+                totalPages={totalPages}
+                onPageChange={(e, { activePage }) => {
+                  !isEditMode &&
+                    listingRef.current.scrollIntoView({ behavior: 'smooth' });
+                  onPaginationChange(e, { activePage });
+                }}
+                firstItem={null}
+                lastItem={null}
+                prevItem={{
+                  content: <Icon name={paginationLeftSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled': !prevBatch,
+                  className: !prevBatch ? 'disabled' : null,
+                }}
+                nextItem={{
+                  content: <Icon name={paginationRightSVG} size="18px" />,
+                  icon: true,
+                  'aria-disabled': !nextBatch,
+                  className: !nextBatch ? 'disabled' : null,
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ) : isEditMode ? (
+        <div className="listing message" ref={listingRef}>
+          {isFolderContentsListing && (
+            <FormattedMessage
+              id="No items found in this container."
+              defaultMessage="No items found in this container."
+            />
+          )}
+          {hasLoaded && NoResults && (
+            <NoResults isEditMode={isEditMode} {...data} />
+          )}
+          <Dimmer active={!hasLoaded} inverted>
+            <Loader indeterminate size="small">
+              <FormattedMessage id="loading" defaultMessage="Loading" />
+            </Loader>
+          </Dimmer>
+        </div>
+      ) : (
+        <div className="emptyListing">
+          {hasLoaded && NoResults && (
+            <NoResults isEditMode={isEditMode} {...data} />
+          )}
+          <Dimmer active={!hasLoaded} inverted>
+            <Loader indeterminate size="small">
+              <FormattedMessage id="loading" defaultMessage="Loading" />
+            </Loader>
+          </Dimmer>
         </div>
       )}
-    </div>
-  ) : isEditMode ? (
-    <div className="listing message" ref={listingRef}>
-      {isFolderContentsListing && (
-        <FormattedMessage
-          id="No items found in this container."
-          defaultMessage="No items found in this container."
-        />
-      )}
-      {hasLoaded && NoResults && (
-        <NoResults isEditMode={isEditMode} {...data} />
-      )}
-      <Dimmer active={!hasLoaded} inverted>
-        <Loader indeterminate size="small">
-          <FormattedMessage id="loading" defaultMessage="Loading" />
-        </Loader>
-      </Dimmer>
-    </div>
-  ) : (
-    <div>
-      {hasLoaded && NoResults && (
-        <NoResults isEditMode={isEditMode} {...data} />
-      )}
-      <Dimmer active={!hasLoaded} inverted>
-        <Loader indeterminate size="small">
-          <FormattedMessage id="loading" defaultMessage="Loading" />
-        </Loader>
-      </Dimmer>
-    </div>
+    </>
   );
 });
 

package/src/components/manage/Blocks/Listing/View.jsx

@@ -7,15 +7,11 @@ import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
   const { data, path, pathname, className } = props;
-  const HeadlineTag = data.headlineTag || 'h2';
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
     >
-      {data.headline && (
-        <HeadlineTag className="headline">{data.headline}</HeadlineTag>
-      )}
       <ListingBody {...props} path={path ?? pathname} />
     </div>
   );

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,7 +1,13 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
 
-export default ({ dispatch, data, path, blocksConfig }) => {
+const getListingBlockAsyncData = ({
+  dispatch,
+  id,
+  data,
+  path,
+  blocksConfig,
+}) => {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -14,8 +20,10 @@ export default ({ dispatch, data, path, blocksConfig }) => {
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },
-        data.block,
+        id,
       ),
     ),
   ];
 };
+
+export default getListingBlockAsyncData;

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -14,11 +14,16 @@ function getDisplayName(WrappedComponent) {
 
 export default function withQuerystringResults(WrappedComponent) {
   function WithQuerystringResults(props) {
-    const { data = {}, properties: content, path, variation } = props;
+    const {
+      data = {},
+      id = data.block,
+      properties: content,
+      path,
+      variation,
+    } = props;
     const { settings } = config;
     const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
 
-    const { block } = data;
     const { b_size = settings.defaultPageSize } = querystring; // batchsize
 
     // save the path so it won't trigger dispatch on eager router location change
@@ -45,32 +50,32 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? !querystringResults?.[block]?.loading : true;
+    const hasLoaded = hasQuery ? !querystringResults?.[id]?.loading : true;
 
     const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[block]
-        ? querystringResults?.[block]?.items || []
+      querystring?.query?.length > 0 && querystringResults?.[id]
+        ? querystringResults?.[id]?.items || []
         : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[block]?.total > b_size;
+      hasQuery && querystringResults?.[id]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[block].total / b_size)
+      ? Math.ceil(querystringResults[id].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[block].batching?.prev
+      ? querystringResults[id].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[block].batching?.next
+      ? querystringResults[id].batching?.next
       : null;
 
     const isImageGallery =
@@ -80,7 +85,7 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, block, currentPage),
+          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -98,14 +103,14 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            block,
+            id,
           ),
         );
       } else {
         dispatch(getContent(initialPath, null, null, currentPage));
       }
     }, [
-      block,
+      id,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -118,7 +123,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[block]?.total}
+        total={querystringResults?.[id]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 import { compose } from 'redux';
 
@@ -60,9 +59,11 @@ const SearchBlockEdit = (props) => {
   };
 
   const { query = {} } = data || {};
-  useDeepCompareEffect(() => {
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
     onTriggerSearch();
-  }, [query, onTriggerSearch]);
+  }, [deepQuery, onTriggerSearch]);
 
   return (
     <>

package/src/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -57,7 +57,7 @@ const applyDefaults = (data, root) => {
 };
 
 const SearchBlockView = (props) => {
-  const { data, searchData, mode = 'view', variation } = props;
+  const { id, data, searchData, mode = 'view', variation } = props;
 
   const Layout = variation.view;
 
@@ -89,6 +89,7 @@ const SearchBlockView = (props) => {
         setSelectedView={setSelectedView}
       >
         <ListingBody
+          id={id}
           variation={{ ...data, ...listingBodyVariation }}
           data={listingBodyData}
           path={props.path}