@plone/volto 17.0.0-alpha.0 → 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/BlockChooser/BlockChooserButton.jsx

@@ -4,8 +4,10 @@ import addSVG from '@plone/volto/icons/circle-plus.svg';
 import { blockHasValue } from '@plone/volto/helpers';
 import { Icon, BlockChooser } from '@plone/volto/components';
 import config from '@plone/volto/registry';
-import { Button } from 'semantic-ui-react';
+import { Button, Ref } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import { usePopper } from 'react-popper';
+import { Portal } from 'react-portal';
 
 const messages = defineMessages({
   addBlock: {
@@ -76,41 +78,73 @@ const BlockChooserButton = (props) => {
     };
   }, [handleClickOutside]);
 
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: config.experimental.addBlockButton.enabled
+      ? 'bottom'
+      : 'right-start',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 5],
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['right-end', 'top-start'],
+        },
+      },
+    ],
+  });
+
   return (
     <>
       {!disableNewBlocks &&
         (config.experimental.addBlockButton.enabled ||
           !blockHasValue(data)) && (
-          <Component
-            {...props}
-            onShowBlockChooser={() => setAddNewBlockOpened(true)}
-          />
+          <Ref innerRef={setReferenceElement}>
+            <Component
+              {...props}
+              onShowBlockChooser={() => setAddNewBlockOpened(true)}
+            />
+          </Ref>
         )}
       {addNewBlockOpened && (
-        <BlockChooser
-          onMutateBlock={
-            onMutateBlock
-              ? (id, value) => {
-                  setAddNewBlockOpened(false);
-                  onMutateBlock(id, value);
-                }
-              : null
-          }
-          onInsertBlock={
-            onInsertBlock
-              ? (id, value) => {
-                  setAddNewBlockOpened(false);
-                  onInsertBlock(id, value);
-                }
-              : null
-          }
-          currentBlock={block}
-          allowedBlocks={allowedBlocks}
-          blocksConfig={blocksConfig}
-          properties={properties}
-          showRestricted={showRestricted}
-          ref={blockChooserRef}
-        />
+        <Portal node={document.getElementById('body')}>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <BlockChooser
+              onMutateBlock={
+                onMutateBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onMutateBlock(id, value);
+                    }
+                  : null
+              }
+              onInsertBlock={
+                onInsertBlock
+                  ? (id, value) => {
+                      setAddNewBlockOpened(false);
+                      onInsertBlock(id, value);
+                    }
+                  : null
+              }
+              currentBlock={block}
+              allowedBlocks={allowedBlocks}
+              blocksConfig={blocksConfig}
+              properties={properties}
+              showRestricted={showRestricted}
+              ref={blockChooserRef}
+            />
+          </div>
+        </Portal>
       )}
     </>
   );

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

@@ -31,7 +31,6 @@ const BlockChooserSearch = ({ onChange, searchValue }) => {
           autoComplete="off"
           placeholder={intl.formatMessage(messages.search)}
           title={intl.formatMessage(messages.search)}
-          autoFocus
           ref={searchInput}
         />
         {searchValue && (

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;