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

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

@@ -3,4 +3,4 @@
     "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

@@ -3,4 +3,4 @@
     "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.7",
+  "version": "17.0.0-alpha.9",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/packages/volto-slate/src/blocks/Text/SlashMenu.jsx

@@ -110,7 +110,7 @@ const PersistentSlashMenu = ({ editor }) => {
 
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 
-  const useAllowedBlocks = !isEmpty(allowedBlocks);
+  const hasAllowedBlocks = !isEmpty(allowedBlocks);
   const slashCommand = data.plaintext
     ?.toLowerCase()
     .trim()
@@ -119,12 +119,13 @@ const PersistentSlashMenu = ({ editor }) => {
   const availableBlocks = React.useMemo(
     () =>
       filter(blocksConfig, (item) =>
-        useAllowedBlocks
+        hasAllowedBlocks
           ? allowedBlocks.includes(item.id)
           : typeof item.restricted === 'function'
           ? !item.restricted({ properties, block: item })
           : !item.restricted,
       )
+        .filter((block) => Boolean(block.title && block.id))
         .filter((block) => {
           // typed text is a substring of the title or id
           const title = translateBlockTitle(block, intl).toLowerCase();
@@ -150,7 +151,7 @@ const PersistentSlashMenu = ({ editor }) => {
       intl,
       properties,
       slashCommand,
-      useAllowedBlocks,
+      hasAllowedBlocks,
     ],
   );
 

package/packages/volto-slate/src/editor/deserialize.js

@@ -95,7 +95,6 @@ export const blockTagDeserializer = (tagname) => (editor, el, options) => {
     children = [{ text: '' }];
   }
 
-  console.log('children', children);
   return jsx('element', { type: tagname }, children);
 };
 

package/razzle.config.js

@@ -341,6 +341,11 @@ const defaultModify = ({
 
   if (config.devServer) {
     config.devServer.static.watch.ignored = /node_modules\/(?!@plone\/volto)/;
+    config.snapshot = {
+      managedPaths: [
+        /^(.+?[\\/]node_modules[\\/](?!(@plone[\\/]volto))(@.+?[\\/])?.+?)[\\/]/,
+      ],
+    };
   }
 
   return config;

package/src/actions/index.js

@@ -71,6 +71,12 @@ export {
   purgeMessages,
 } from '@plone/volto/actions/messages/messages';
 export { getNavigation } from '@plone/volto/actions/navigation/navigation';
+export {
+  createRelations,
+  deleteRelations,
+  queryRelations,
+} from '@plone/volto/actions/relations/relations';
+export { rebuildRelations } from '@plone/volto/actions/relations/rebuild';
 export { listRoles } from '@plone/volto/actions/roles/roles';
 export {
   getSchema,

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/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

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/Contents/Contents.jsx

@@ -1013,6 +1013,7 @@ class Contents extends Component {
         sort_order: this.state.sort_order,
         metadata_fields: '_all',
         b_size: 100000000,
+        show_inactive: true,
         ...(this.state.filter && { SearchableText: `${this.state.filter}*` }),
       });
     } else {
@@ -1024,6 +1025,7 @@ class Contents extends Component {
         ...(this.state.filter && { SearchableText: `${this.state.filter}*` }),
         b_size: this.state.pageSize,
         b_start: this.state.currentPage * this.state.pageSize,
+        show_inactive: true,
       });
     }
   }
@@ -1785,7 +1787,9 @@ class Contents extends Component {
                                     <Menu.Header
                                       content={this.props.intl.formatMessage(
                                         messages.selected,
-                                        { count: this.state.selected.length },
+                                        {
+                                          count: this.state.selected.length,
+                                        },
                                       )}
                                     />
                                     <Input

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

@@ -169,6 +169,12 @@ export const ContentsItemComponent = ({
                   <FormattedMessage id="Expired" defaultMessage="Expired" />
                 </Button>
               )}
+            {item.EffectiveDate !== 'None' &&
+              new Date(item.EffectiveDate).getTime() > new Date().getTime() && (
+                <Button className="button-margin effective-future" size="mini">
+                  <FormattedMessage id="Scheduled" defaultMessage="Scheduled" />
+                </Button>
+              )}
           </Link>
         </Table.Cell>
         {map(indexes, (index) => (

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

@@ -90,6 +90,10 @@ const messages = defineMessages({
     id: 'Content Rules',
     defaultMessage: 'Content Rules',
   },
+  relations: {
+    id: 'Relations',
+    defaultMessage: 'Relations',
+  },
 });
 
 /**
@@ -153,6 +157,11 @@ function Controlpanels({
         group: intl.formatMessage(messages.general),
         title: intl.formatMessage(messages.urlmanagement),
       },
+      {
+        '@id': '/relations',
+        group: intl.formatMessage(messages.content),
+        title: intl.formatMessage(messages.relations),
+      },
       {
         '@id': '/moderate-comments',
         group: intl.formatMessage(messages.content),

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

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { uniqBy } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+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';
+
+const BrokenRelations = () => {
+  const dispatch = useDispatch();
+  const brokenRelationStats = useSelector(
+    (state) => state.relations?.stats?.broken || {},
+  );
+  const brokenRelations = useSelector(
+    (state) => state.relations?.subrequests?.broken?.relations,
+  );
+
+  useEffect(() => {
+    dispatch(queryRelations(null, true, 'broken'));
+  }, [dispatch]);
+
+  return brokenRelations && Object.keys(brokenRelations).length > 0 ? (
+    <>
+      <Divider section hidden />
+      <Segment>
+        <h3>
+          <FormattedMessage
+            id="Broken relations"
+            defaultMessage="Broken relations"
+          />
+        </h3>
+        {Object.keys(brokenRelations).map((relationname) => (
+          <div key={relationname}>
+            <Divider section hidden />
+            <h4>
+              {brokenRelationStats[relationname]} broken <i>{relationname}</i>{' '}
+              relations
+            </h4>
+            <Table>
+              <Table.Body>
+                {uniqBy(brokenRelations[relationname].items, function (el) {
+                  return el[0];
+                }).map((el) => (
+                  <Table.Row key={el[0]}>
+                    <Table.Cell>
+                      <UniversalLink
+                        href={`${flattenToAppURL(el[0])}/edit`}
+                        openLinkInNewTab={true}
+                      >
+                        {flattenToAppURL(el[0])}
+                      </UniversalLink>
+                    </Table.Cell>
+                    <Table.Cell>{el[1]}</Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          </div>
+        ))}
+      </Segment>
+    </>
+  ) : null;
+};
+
+export default BrokenRelations;

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

@@ -0,0 +1,114 @@
+/**
+ * Relations Control Panel
+ */
+import React, { useEffect } from 'react';
+import { find } from 'lodash';
+import { useSelector } from 'react-redux';
+import { Portal } from 'react-portal';
+import { useHistory } from 'react-router';
+import { Link, useLocation } from 'react-router-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { Divider, Message, Segment } from 'semantic-ui-react';
+import { Helmet, messages } from '@plone/volto/helpers';
+import { listActions } from '@plone/volto/actions';
+import { Icon, Toolbar } from '@plone/volto/components';
+import { getParentUrl } from '@plone/volto/helpers';
+import RelationsMatrix from '@plone/volto/components/manage/Controlpanels/Relations/RelationsMatrix';
+import backSVG from '@plone/volto/icons/back.svg';
+
+const RelationsControlPanel = () => {
+  const intl = useIntl();
+  const history = useHistory();
+  const location = useLocation();
+  const dispatch = useDispatch();
+
+  const brokenRelations = useSelector(
+    (state) => state.relations?.stats?.broken,
+  );
+
+  const relations_stats = useSelector((state) => state.relations?.stats?.stats);
+  const actions = useSelector((state) => state.actions?.actions ?? {});
+  const can_edit = find(actions.object, {
+    id: 'edit',
+  });
+
+  useEffect(() => {
+    dispatch(listActions('/'));
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className="relations-control-panel">
+        <Helmet title={intl.formatMessage(messages.relations)} />
+        {can_edit ? (
+          <Segment.Group raised>
+            <Segment className="primary">
+              {brokenRelations && Object.keys(brokenRelations).length > 0 ? (
+                <React.Fragment>
+                  <Message warning>
+                    <FormattedMessage
+                      id="Some relations are broken. Please fix."
+                      defaultMessage="Some relations are broken. Please fix."
+                    />
+                  </Message>
+                  <Divider hidden />
+                </React.Fragment>
+              ) : null}
+              <h1>
+                <FormattedMessage id="Relations" defaultMessage="Relations" />
+              </h1>
+              {!relations_stats ? (
+                <React.Fragment>
+                  <Divider hidden />
+                  <Message warning>
+                    <FormattedMessage
+                      id="Please upgrade to plone.restapi >= 8.35.3."
+                      defaultMessage="Please upgrade to plone.restapi >= 8.35.3."
+                    />
+                  </Message>
+                </React.Fragment>
+              ) : null}
+            </Segment>
+            <Segment>
+              <RelationsMatrix />
+            </Segment>
+          </Segment.Group>
+        ) : (
+          <Segment.Group>
+            <Segment>
+              <FormattedMessage id="Relations" defaultMessage="Relations" />
+              <Divider hidden />
+              <FormattedMessage
+                id="You have not the required permission for this control panel."
+                defaultMessage="You have not the required permission for this control panel."
+              />
+            </Segment>
+          </Segment.Group>
+        )}
+      </div>
+
+      {__CLIENT__ && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={location.pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link
+                className="item"
+                to="#"
+                onClick={() => {
+                  history.push(getParentUrl(location.pathname));
+                }}
+              >
+                <Icon name={backSVG} className="contents circled" size="30px" />
+              </Link>
+            }
+          />
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default RelationsControlPanel;