@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.4

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

@@ -36,6 +36,26 @@ test('renders a ListingBody component', () => {
     content: {
       data: {
         is_folderish: true,
+        blocks: {
+          '839ee00b-013b-4f4a-9b10-8867938fdac3': {
+            '@type': 'listing',
+            block: '839ee00b-013b-4f4a-9b10-8867938fdac3',
+            headlineTag: 'h2',
+            query: [],
+            querystring: {
+              b_size: '2',
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.absolutePath',
+                  v: '/',
+                },
+              ],
+              sort_order: 'ascending',
+            },
+            variation: 'default',
+          },
+        },
       },
     },
     intl: {

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

@@ -25,7 +25,7 @@ export default function withQuerystringResults(WrappedComponent) {
     const [initialPath] = React.useState(getBaseUrl(path));
 
     const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
-
+    const { currentPage, setCurrentPage } = usePagination(data.block, 1);
     const adaptedQuery = Object.assign(
       variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
       {
@@ -37,7 +37,6 @@ export default function withQuerystringResults(WrappedComponent) {
           : {},
       ),
     );
-    const { currentPage, setCurrentPage } = usePagination(querystring, 1);
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -144,12 +144,16 @@ const getSearchFields = (searchData) => {
 };
 
 /**
- * A HOC that will mirror the search block state to a hash location
+ * A hook that will mirror the search block state to a hash location
  */
 const useHashState = () => {
   const location = useLocation();
   const history = useHistory();
 
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
   const oldState = React.useMemo(() => {
     return {
       ...qs.parse(location.search),
@@ -165,7 +169,7 @@ const useHashState = () => {
 
   const setSearchData = React.useCallback(
     (searchData) => {
-      const newParams = qs.parse(location.hash);
+      const newParams = qs.parse(location.search);
 
       let changed = false;
 
@@ -182,11 +186,11 @@ const useHashState = () => {
 
       if (changed) {
         history.push({
-          hash: qs.stringify(newParams),
+          search: qs.stringify(newParams),
         });
       }
     },
-    [history, oldState, location.hash],
+    [history, oldState, location.search],
   );
 
   return [current, setSearchData];

package/src/components/manage/Widgets/SelectUtils.js

@@ -54,7 +54,7 @@ export function normalizeSingleSelectOption(value, intl) {
     throw new Error(`Unknown value type of select widget: ${value}`);
   }
 
-  const token = value.token ?? value.value ?? 'no-value';
+  const token = value.token ?? value.value ?? value.UID ?? 'no-value';
   const label =
     (value.title && value.title !== 'None' ? value.title : undefined) ??
     value.label ??

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

@@ -202,7 +202,7 @@ class SelectWidget extends Component {
 
     const isMulti = this.props.isMulti
       ? this.props.isMulti
-      : id === 'roles' || id === 'groups';
+      : id === 'roles' || id === 'groups' || this.props.type === 'array';
 
     return (
       <FormFieldWrapper {...this.props}>

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'My username is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'My email is',

package/src/components/theme/PasswordReset/RequestPasswordReset.jsx

@@ -32,7 +32,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'label_my_username_is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'label_my_email_is',

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

@@ -87,7 +87,7 @@ const DefaultView = (props) => {
                 return f !== 'title' ? (
                   <Grid celled="internally" key={key}>
                     <Grid.Row>
-                      <Label>{field.title}:</Label>
+                      <Label title={field.id}>{field.title}:</Label>
                     </Grid.Row>
                     <Grid.Row>
                       <Segment basic>

package/src/config/Widgets.jsx

@@ -98,6 +98,7 @@ export const widgetMapping = {
     select_querystring_field: SelectMetadataWidget,
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
+    select: SelectWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -180,6 +180,7 @@ let config = {
     styleClassNameConverters,
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
+    querystringSearchGet: false,
   },
   experimental: {
     addBlockButton: {

package/src/express-middleware/sitemap.js

@@ -5,7 +5,6 @@ export const sitemap = function (req, res, next) {
   generateSitemap(req).then((sitemap) => {
     if (Buffer.isBuffer(sitemap)) {
       res.set('Content-Type', 'application/x-gzip');
-      res.set('Content-Encoding', 'gzip');
       res.set('Content-Disposition', 'attachment; filename="sitemap.xml.gz"');
       res.send(sitemap);
     } else {

package/src/helpers/FormValidation/FormValidation.js

@@ -65,7 +65,16 @@ const widgetValidation = {
   },
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
-      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([_.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
+      var urlRegex = new RegExp(
+        '^(https?:\\/\\/)?' + // validate protocol
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
+        '(localhost)' + // validate OR localhost address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+          '(\\#[-a-z\\d_]*)?$', // validate fragment locator
+        'i',
+      );
       const isValid = urlRegex.test(urlValue);
       return !isValid ? intlFunc(messages.isValidURL) : null;
     },

package/src/helpers/FormValidation/FormValidation.test.js

@@ -5,6 +5,7 @@ const schema = {
   properties: {
     username: { title: 'Username', type: 'string', description: '' },
     email: { title: 'Email', type: 'string', widget: 'email', description: '' },
+    url: { title: 'url', type: 'string', widget: 'url', description: '' },
   },
   fieldsets: [
     { id: 'default', title: 'FIXME: User Data', fields: ['username'] },
@@ -87,5 +88,45 @@ describe('FormValidation', () => {
         }),
       ).toEqual({});
     });
+    it('validates incorrect url', () => {
+      formData.url = 'foo';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({ url: [messages.isValidURL.defaultMessage] });
+    });
+    it('validates url', () => {
+      formData.url = 'https://plone.org/';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with ip', () => {
+      formData.url = 'http://127.0.0.1:8080/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with localhost', () => {
+      formData.url = 'http://localhost:8080/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
   });
 });

package/src/helpers/Utils/usePagination.js

@@ -1,25 +1,59 @@
-import React from 'react';
-import { isEqual } from 'lodash';
-import { usePrevious } from './usePrevious';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+import React, { useRef, useEffect } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import qs from 'query-string';
+import { useSelector } from 'react-redux';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+/**
+ * @function useCreatePageQueryStringKey
+ * @description A hook that creates a key with an id if there are multiple blocks with pagination.
+ * @returns {string} Example: page || page_012345678
+ */
+const useCreatePageQueryStringKey = (id) => {
+  const blockTypesWithPagination = ['search', 'listing'];
+  const blocks = useSelector((state) => state?.content?.data?.blocks) || [];
+  const blocksLayout =
+    useSelector((state) => state?.content?.data?.blocks_layout?.items) || [];
+  const displayedBlocks = blocksLayout?.map((item) => blocks[item]);
+  const hasMultiplePaginations =
+    displayedBlocks.filter((item) =>
+      blockTypesWithPagination.includes(item['@type']),
+    ).length > 1 || false;
+
+  return hasMultiplePaginations ? slugify(`page-${id}`) : 'page';
+};
 
 /**
  * A pagination helper that tracks the query and resets pagination in case the
  * query changes.
  */
-export const usePagination = (query, defaultPage = 1) => {
-  const previousQuery = usePrevious(query);
-  const [currentPage, setCurrentPage] = React.useState(defaultPage);
+export const usePagination = (id = null, defaultPage = 1) => {
+  const location = useLocation();
+  const history = useHistory();
+  const pageQueryStringKey = useCreatePageQueryStringKey(id);
+  const pageQueryParam =
+    qs.parse(location.search)[pageQueryStringKey] || defaultPage;
+  const [currentPage, setCurrentPage] = React.useState(
+    parseInt(pageQueryParam),
+  );
+  const queryRef = useRef(qs.parse(location.search)?.query);
 
-  useDeepCompareEffect(() => {
-    setCurrentPage(defaultPage);
-  }, [query, previousQuery, defaultPage]);
+  useEffect(() => {
+    if (queryRef.current !== qs.parse(location.search)?.query) {
+      setCurrentPage(defaultPage);
+      queryRef.current = qs.parse(location.search)?.query;
+    }
+    const newParams = {
+      ...qs.parse(location.search),
+      [pageQueryStringKey]: currentPage,
+    };
+    history.replace({
+      search: qs.stringify(newParams),
+    });
+  }, [currentPage, defaultPage, location.search, history, pageQueryStringKey]);
 
   return {
-    currentPage:
-      previousQuery && !isEqual(previousQuery, query)
-        ? defaultPage
-        : currentPage,
+    currentPage,
     setCurrentPage,
   };
 };

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

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { usePagination } from './usePagination';
+import * as redux from 'react-redux';
+import routeData from 'react-router';
+import { slugify } from '@plone/volto/helpers/Utils/Utils';
+
+const searchBlockId = '545b33de-92cf-4747-969d-68851837b317';
+const searchBlockId2 = '454b33de-92cf-4747-969d-68851837b713';
+const searchBlock = {
+  '@type': 'search',
+  query: {
+    b_size: '4',
+    query: [
+      {
+        i: 'path',
+        o: 'plone.app.querystring.operation.string.relativePath',
+        v: '',
+      },
+    ],
+    sort_order: 'ascending',
+  },
+  showSearchInput: true,
+  showTotalResults: true,
+};
+let state = {
+  content: {
+    data: {
+      blocks: {
+        [searchBlockId]: searchBlock,
+      },
+      blocks_layout: {
+        items: [searchBlockId],
+      },
+    },
+  },
+};
+
+let mockUseLocationValue = {
+  pathname: '/testroute',
+  search: '',
+};
+
+const setUp = (searchParam, numberOfSearches) => {
+  mockUseLocationValue.search = searchParam;
+  if (numberOfSearches > 1) {
+    state.content.data.blocks[searchBlockId2] = searchBlock;
+    state.content.data.blocks_layout.items.push(searchBlockId2);
+  }
+  return renderHook(({ id, defaultPage }) => usePagination(id, defaultPage), {
+    initialProps: {
+      id: searchBlockId,
+      defaultPage: 1,
+    },
+  });
+};
+
+describe(`Tests for usePagination, for the block ${searchBlockId}`, () => {
+  const useLocation = jest.spyOn(routeData, 'useLocation');
+  const useHistory = jest.spyOn(routeData, 'useHistory');
+  const useSelector = jest.spyOn(redux, 'useSelector');
+  beforeEach(() => {
+    useLocation.mockReturnValue(mockUseLocationValue);
+    useHistory.mockReturnValue({ replace: jest.fn() });
+    useSelector.mockImplementation((cb) => cb(state));
+  });
+
+  it('1 paginated block with id and defaultPage 1 - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it('1 paginated block without params - shoud be 1', () => {
+    const { result } = setUp();
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param1 = '?page=2';
+  it(`1 paginated block with params: ${param1} - shoud be 2`, () => {
+    const { result } = setUp(param1);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param2 = `?${slugify(`page-${searchBlockId}`)}=2`;
+  it(`2 paginated blocks with current block in the params: ${param2} - shoud be 2`, () => {
+    const { result } = setUp(param2, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param3 = `?${slugify(`page-${searchBlockId2}`)}=2`;
+  it(`2 paginated blocks with the other block in the params: ${param3} - shoud be 1`, () => {
+    const { result } = setUp(param3, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  const param4 = `?${slugify(`page-${searchBlockId}`)}=2&${slugify(
+    `page-${searchBlockId2}`,
+  )}=1`;
+  it(`2 paginated blocks with both blocks in the params, current 2: ${param4} - shoud be 2`, () => {
+    const { result } = setUp(param4, 2);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  const param5 = `?${slugify(`page-${searchBlockId}`)}=1&${slugify(
+    `page-${searchBlockId2}`,
+  )}=2`;
+  it(`2 paginated blocks with both blocks in the params, current 1: ${param5} - shoud be 1`, () => {
+    const { result } = setUp(param5, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+
+  it(`2 paginated blocks with wrong page param: ${param1} - shoud be 1`, () => {
+    const { result } = setUp(param1, 2);
+    expect(result.current.currentPage).toBe(1);
+  });
+});

package/styles/Vocab/Plone/accept.txt

@@ -6,3 +6,5 @@ Razzle
 RichText
 Volto
 Zope
+JavaScript
+NodeJS

package/styles/Vocab/Plone/reject.txt

@@ -0,0 +1,5 @@
+node
+nodejs
+javascript
+js
+Javascript