@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.25

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.0.0-alpha.24",
+  "version": "17.0.0-alpha.25",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/build/messages/src/blocks/Table/TableBlockEdit.json

@@ -0,0 +1,90 @@
+[
+  {
+    "id": "Insert row before",
+    "defaultMessage": "Insert row before"
+  },
+  {
+    "id": "Insert row after",
+    "defaultMessage": "Insert row after"
+  },
+  {
+    "id": "Delete row",
+    "defaultMessage": "Delete row"
+  },
+  {
+    "id": "Insert col before",
+    "defaultMessage": "Insert col before"
+  },
+  {
+    "id": "Insert col after",
+    "defaultMessage": "Insert col after"
+  },
+  {
+    "id": "Delete col",
+    "defaultMessage": "Delete col"
+  },
+  {
+    "id": "Hide headers",
+    "defaultMessage": "Hide headers"
+  },
+  {
+    "id": "Make the table sortable",
+    "defaultMessage": "Make the table sortable"
+  },
+  {
+    "id": "Visible only in view mode",
+    "defaultMessage": "Visible only in view mode"
+  },
+  {
+    "id": "Fixed width table cells",
+    "defaultMessage": "Fixed width table cells"
+  },
+  {
+    "id": "Make the table compact",
+    "defaultMessage": "Make the table compact"
+  },
+  {
+    "id": "Reduce complexity",
+    "defaultMessage": "Reduce complexity"
+  },
+  {
+    "id": "Divide each row into separate cells",
+    "defaultMessage": "Divide each row into separate cells"
+  },
+  {
+    "id": "Table color inverted",
+    "defaultMessage": "Table color inverted"
+  },
+  {
+    "id": "Stripe alternate rows with color",
+    "defaultMessage": "Stripe alternate rows with color"
+  },
+  {
+    "id": "Left",
+    "defaultMessage": "Left"
+  },
+  {
+    "id": "Center",
+    "defaultMessage": "Center"
+  },
+  {
+    "id": "Right",
+    "defaultMessage": "Right"
+  },
+  {
+    "id": "Bottom",
+    "defaultMessage": "Bottom"
+  },
+  {
+    "id": "Middle",
+    "defaultMessage": "Middle"
+  },
+  {
+    "id": "Top",
+    "defaultMessage": "Top"
+  },
+  {
+    "id": "Table",
+    "defaultMessage": "Table"
+  }
+]

package/packages/volto-slate/build/messages/src/blocks/Text/DefaultTextBlockEditor.json

@@ -0,0 +1,6 @@
+[
+  {
+    "id": "Type text…",
+    "defaultMessage": "Type text…"
+  }
+]

package/packages/volto-slate/build/messages/src/blocks/Text/DetachedTextBlockEditor.json

@@ -0,0 +1,6 @@
+[
+  {
+    "id": "Type text…",
+    "defaultMessage": "Type text…"
+  }
+]

package/packages/volto-slate/build/messages/src/blocks/Text/SlashMenu.json

@@ -0,0 +1,6 @@
+[
+  {
+    "id": "No matching blocks",
+    "defaultMessage": "No matching blocks"
+  }
+]

package/packages/volto-slate/build/messages/src/editor/plugins/AdvancedLink/index.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "Edit link",
+    "defaultMessage": "Edit link"
+  },
+  {
+    "id": "Remove link",
+    "defaultMessage": "Remove link"
+  }
+]

package/packages/volto-slate/build/messages/src/editor/plugins/Link/index.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "Add link",
+    "defaultMessage": "Add link"
+  },
+  {
+    "id": "Edit link",
+    "defaultMessage": "Edit link"
+  }
+]

package/packages/volto-slate/build/messages/src/editor/plugins/Table/index.json

@@ -0,0 +1,30 @@
+[
+  {
+    "id": "Delete table",
+    "defaultMessage": "Delete table"
+  },
+  {
+    "id": "Insert row before",
+    "defaultMessage": "Insert row before"
+  },
+  {
+    "id": "Insert row after",
+    "defaultMessage": "Insert row after"
+  },
+  {
+    "id": "Delete row",
+    "defaultMessage": "Delete row"
+  },
+  {
+    "id": "Insert col before",
+    "defaultMessage": "Insert col before"
+  },
+  {
+    "id": "Insert col after",
+    "defaultMessage": "Insert col after"
+  },
+  {
+    "id": "Delete col",
+    "defaultMessage": "Delete col"
+  }
+]

package/packages/volto-slate/build/messages/src/elementEditor/messages.json

@@ -0,0 +1,10 @@
+[
+  {
+    "id": "Edit element",
+    "defaultMessage": "Edit element"
+  },
+  {
+    "id": "Remove element",
+    "defaultMessage": "Remove element"
+  }
+]

package/packages/volto-slate/build/messages/src/widgets/HtmlSlateWidget.json

@@ -0,0 +1,6 @@
+[
+  {
+    "id": "An error has occurred while editing \"{name}\" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.",
+    "defaultMessage": "An error has occurred while editing \"{name}\" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator."
+  }
+]

package/packages/volto-slate/build/messages/src/widgets/RichTextWidgetView.json

@@ -0,0 +1,6 @@
+[
+  {
+    "id": "An error has occurred while rendering \"{name}\" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator.",
+    "defaultMessage": "An error has occurred while rendering \"{name}\" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator."
+  }
+]

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.0.0-alpha.24",
+  "version": "17.0.0-alpha.25",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/actions/index.js

@@ -75,6 +75,7 @@ export {
   createRelations,
   deleteRelations,
   queryRelations,
+  getRelationStats,
 } from '@plone/volto/actions/relations/relations';
 export { rebuildRelations } from '@plone/volto/actions/relations/rebuild';
 export { listRoles } from '@plone/volto/actions/roles/roles';

package/src/actions/relations/relations.js

@@ -7,6 +7,7 @@ import {
   CREATE_RELATIONS,
   DELETE_RELATIONS,
   LIST_RELATIONS,
+  STATS_RELATIONS,
 } from '@plone/volto/constants/ActionTypes';
 
 /**
@@ -84,3 +85,19 @@ export function queryRelations(
     },
   };
 }
+
+/** Get relation stats
+ * @function getRelationStats
+ * @returns {Object} Relation stats
+ */
+
+export function getRelationStats() {
+  let path = '/@relations';
+  return {
+    type: STATS_RELATIONS,
+    request: {
+      op: 'get',
+      path: path,
+    },
+  };
+}

package/src/components/manage/Blocks/Image/schema.js

@@ -33,6 +33,10 @@ const messages = defineMessages({
     id: 'Alt text hint link text',
     defaultMessage: 'Describe the purpose of the image.',
   },
+  linkSettings: {
+    id: 'Link settings',
+    defaultMessage: 'Link settings',
+  },
 });
 
 export function ImageSchema({ formData, intl }) {
@@ -47,7 +51,7 @@ export function ImageSchema({ formData, intl }) {
         ? [
             {
               id: 'link_settings',
-              title: 'Link settings',
+              title: intl.formatMessage(messages.linkSettings),
               fields: ['href', 'openLinkInNewTab'],
             },
           ]

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

@@ -23,7 +23,7 @@ export default function withQuerystringResults(WrappedComponent) {
     } = 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 subrequestID = content?.UID + '-' + id;
     const { b_size = settings.defaultPageSize } = querystring; // batchsize
 
     // save the path so it won't trigger dispatch on eager router location change
@@ -52,31 +52,33 @@ export default function withQuerystringResults(WrappedComponent) {
 
     const folderItems = content?.is_folderish ? content.items : [];
     const hasQuery = querystring?.query?.length > 0;
-    const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
+    const hasLoaded = hasQuery
+      ? querystringResults?.[subrequestID]?.loaded
+      : true;
 
     const listingItems = hasQuery
-      ? querystringResults?.[id]?.items || []
+      ? querystringResults?.[subrequestID]?.items || []
       : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =
-      hasQuery && querystringResults?.[id]?.total > b_size;
+      hasQuery && querystringResults?.[subrequestID]?.total > b_size;
 
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[id].total / b_size)
+      ? Math.ceil(querystringResults[subrequestID].total / b_size)
       : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[id].batching?.prev
+      ? querystringResults[subrequestID].batching?.prev
       : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[id].batching?.next
+      ? querystringResults[subrequestID].batching?.next
       : null;
 
     const isImageGallery =
@@ -86,7 +88,12 @@ export default function withQuerystringResults(WrappedComponent) {
     useDeepCompareEffect(() => {
       if (hasQuery) {
         dispatch(
-          getQueryStringResults(initialPath, adaptedQuery, id, currentPage),
+          getQueryStringResults(
+            initialPath,
+            adaptedQuery,
+            subrequestID,
+            currentPage,
+          ),
         );
       } else if (isImageGallery && !hasQuery) {
         // when used as image gallery, it doesn't need a query to list children
@@ -104,7 +111,7 @@ export default function withQuerystringResults(WrappedComponent) {
                 },
               ],
             },
-            id,
+            subrequestID,
           ),
         );
       } else {
@@ -113,7 +120,7 @@ export default function withQuerystringResults(WrappedComponent) {
       adaptedQueryRef.current = adaptedQuery;
       currentPageRef.current = currentPage;
     }, [
-      id,
+      subrequestID,
       isImageGallery,
       adaptedQuery,
       hasQuery,
@@ -126,7 +133,7 @@ export default function withQuerystringResults(WrappedComponent) {
       <WrappedComponent
         {...props}
         onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
-        total={querystringResults?.[id]?.total}
+        total={querystringResults?.[subrequestID]?.total}
         batch_size={b_size}
         currentPage={currentPage}
         totalPages={totalPages}

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx

@@ -12,7 +12,9 @@ import { useHistory } from 'react-router-dom';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
 
-const RenderListItems = ({ items, data, history }) => {
+const RenderListItems = ({ items, data }) => {
+  const history = useHistory();
+
   return map(items, (item) => {
     const { id, level, title, override_toc, plaintext } = item;
     const slug = override_toc
@@ -50,7 +52,6 @@ const RenderListItems = ({ items, data, history }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
-  const history = useHistory();
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -70,7 +71,7 @@ const View = ({ data, tocEntries }) => {
         bulleted={!data.ordered}
         as={data.ordered ? 'ol' : 'ul'}
       >
-        <RenderListItems items={tocEntries} data={data} history={history} />
+        <RenderListItems items={tocEntries} data={data} />
       </List>
     </>
   );

package/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.test.jsx

@@ -0,0 +1,44 @@
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import DefaultTocRenderer from './DefaultTocRenderer';
+
+const mockStore = configureStore();
+
+const data = { '@type': 'toc', variation: 'default' };
+
+const tocEntries = [
+  {
+    level: 2,
+    title: 'Hello this is a sample page',
+    items: [
+      {
+        level: 3,
+        title: 'Test level 3',
+        items: [],
+        id: 'be612682-6df9-4a5e-b3a1-9dec5d82ae14',
+        parentId: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+      },
+    ],
+    id: '3a8bff13-3245-44f6-8a35-e0defef5898e',
+  },
+];
+
+test('renders a default toc renderer component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const component = renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <DefaultTocRenderer data={data} tocEntries={tocEntries} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/Contents/Contents.jsx

@@ -1334,6 +1334,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.upload}
                                 className="upload"
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.upload,
+                                )}
                               >
                                 <Icon
                                   name={uploadSVG}
@@ -1358,6 +1361,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.rename}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.rename,
+                                )}
                               >
                                 <Icon
                                   name={renameSVG}
@@ -1380,6 +1386,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.workflow}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.state,
+                                )}
                               >
                                 <Icon
                                   name={semaphoreSVG}
@@ -1402,6 +1411,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.tags}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.tags,
+                                )}
                               >
                                 <Icon
                                   name={tagSVG}
@@ -1425,6 +1437,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.properties}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.properties,
+                                )}
                               >
                                 <Icon
                                   name={propertiesSVG}
@@ -1449,6 +1464,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.cut}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.cut,
+                                )}
                               >
                                 <Icon
                                   name={cutSVG}
@@ -1471,6 +1489,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.copy}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.copy,
+                                )}
                               >
                                 <Icon
                                   name={copySVG}
@@ -1494,6 +1515,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.paste}
                                 disabled={!this.props.action}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.paste,
+                                )}
                               >
                                 <Icon
                                   name={pasteSVG}
@@ -1517,6 +1541,9 @@ class Contents extends Component {
                                 as={Button}
                                 onClick={this.delete}
                                 disabled={!selected}
+                                aria-label={this.props.intl.formatMessage(
+                                  messages.delete,
+                                )}
                               >
                                 <Icon
                                   name={deleteSVG}

package/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx

@@ -5,15 +5,15 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Divider, Segment, Table } from 'semantic-ui-react';
 import { queryRelations } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { UniversalLink } from '@plone/volto/components';
+import { ConditionalLink } from '@plone/volto/components';
 
 const BrokenRelations = () => {
   const dispatch = useDispatch();
   const brokenRelationStats = useSelector(
-    (state) => state.relations?.stats?.broken || {},
+    (state) => state.relations?.stats?.data?.broken || {},
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.subrequests?.broken?.relations,
+    (state) => state.relations?.subrequests?.broken?.data,
   );
 
   useEffect(() => {
@@ -60,20 +60,22 @@ const BrokenRelations = () => {
                 }).map((el, index) => (
                   <Table.Row key={index}>
                     <Table.Cell>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[0])}/edit`}
+                      <ConditionalLink
+                        to={`${el[0]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[0].includes('http')}
                       >
                         {flattenToAppURL(el[0])}
-                      </UniversalLink>
+                      </ConditionalLink>
                     </Table.Cell>
                     <Table.Cell>
-                      <UniversalLink
-                        href={`${flattenToAppURL(el[1])}/edit`}
+                      <ConditionalLink
+                        to={`${el[1]}/edit`}
                         openLinkInNewTab={true}
+                        condition={el[1].includes('http')}
                       >
                         {flattenToAppURL(el[1])}
-                      </UniversalLink>
+                      </ConditionalLink>
                     </Table.Cell>
                   </Table.Row>
                 ))}

package/src/components/manage/Controlpanels/Relations/Relations.jsx

@@ -24,10 +24,10 @@ const RelationsControlPanel = () => {
   const dispatch = useDispatch();
 
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
-  const relations_stats = useSelector((state) => state.relations?.stats?.stats);
+  const relations_stats = useSelector((state) => state.relations?.stats?.data);
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const can_edit = find(actions.object, {
     id: 'edit',
@@ -58,7 +58,7 @@ const RelationsControlPanel = () => {
               <h1>
                 <FormattedMessage id="Relations" defaultMessage="Relations" />
               </h1>
-              {!relations_stats ? (
+              {relations_stats?.error ? (
                 <React.Fragment>
                   <Divider hidden />
                   <Message warning>

package/src/components/manage/Controlpanels/Relations/RelationsListing.jsx

@@ -11,6 +11,7 @@ import {
   createRelations,
   deleteRelations,
   queryRelations,
+  resetSearchContent,
   searchContent,
 } from '@plone/volto/actions';
 
@@ -28,9 +29,10 @@ const ListingTemplate = ({
   const MAX = 40; // Maximum of rows and columns
   const MAX_RELATIONS = 1000;
 
-  const stats = useSelector((state) => state.relations?.stats || null);
+  const stats = useSelector((state) => state.relations?.stats?.data || null);
+
   let relations = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.items || [],
+    (state) => state.relations?.relations?.data?.[relationtype]?.items || [],
   );
 
   let potential_targets_objects = useSelector(
@@ -49,7 +51,8 @@ const ListingTemplate = ({
 
   // Editable if plone.api.relations available
   const editable = useSelector(
-    (state) => state.relations?.relations?.[relationtype]?.readonly !== true,
+    (state) =>
+      state.relations?.relations?.data?.[relationtype]?.readonly !== true,
   );
 
   let relationMatrix = {};
@@ -192,8 +195,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_targets'));
+      dispatch(resetSearchContent('potential_targets'));
     }
 
     // Fetch fresh potential sources
@@ -211,8 +213,7 @@ const ListingTemplate = ({
         ),
       );
     } else {
-      // TODO Better just reset redux store
-      dispatch(searchContent('/findstenichätsch', null, 'potential_sources'));
+      dispatch(resetSearchContent('potential_sources'));
     }
   }, [
     dispatch,