@eeacms/volto-eea-website-theme 1.34.0 → 2.0.0

package/src/customizations/volto/components/manage/Toolbar/More.jsx

@@ -0,0 +1,541 @@
+/**
+ * More component.
+ * @module components/manage/Toolbar/More
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Link, withRouter } from 'react-router-dom';
+import { find } from 'lodash';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+import { Pluggable, Plug } from '@plone/volto/components/manage/Pluggable';
+import {
+  FormattedDate,
+  Icon,
+  Display,
+  Workflow,
+} from '@plone/volto/components';
+import {
+  applyWorkingCopy,
+  createWorkingCopy,
+  removeWorkingCopy,
+} from '@plone/volto/actions';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import userSVG from '@plone/volto/icons/user.svg';
+import applySVG from '@plone/volto/icons/ready.svg';
+import removeSVG from '@plone/volto/icons/circle-dismiss.svg';
+
+const messages = defineMessages({
+  personalTools: {
+    id: 'Personal tools',
+    defaultMessage: 'Personal tools',
+  },
+  history: {
+    id: 'History',
+    defaultMessage: 'History',
+  },
+  sharing: {
+    id: 'Sharing',
+    defaultMessage: 'Sharing',
+  },
+  rules: {
+    id: 'Rules',
+    defaultMessage: 'Rules',
+  },
+  aliases: {
+    id: 'URL Management',
+    defaultMessage: 'URL Management',
+  },
+  ManageTranslations: {
+    id: 'Manage Translations',
+    defaultMessage: 'Manage Translations',
+  },
+  manageContent: {
+    id: 'Manage content…',
+    defaultMessage: 'Manage content…',
+  },
+  CreateWorkingCopy: {
+    id: 'Create working copy',
+    defaultMessage: 'Create working copy',
+  },
+  applyWorkingCopy: {
+    id: 'Apply working copy',
+    defaultMessage: 'Apply working copy',
+  },
+  removeWorkingCopy: {
+    id: 'Remove working copy',
+    defaultMessage: 'Remove working copy',
+  },
+  viewWorkingCopy: {
+    id: 'View working copy',
+    defaultMessage: 'View working copy',
+  },
+  workingAppliedTitle: {
+    id: 'Changes applied.',
+    defaultMessage: 'Changes applied',
+  },
+  workingCopyAppliedBy: {
+    id: 'Made by {creator} on {date}. This is not a working copy anymore, but the main content.',
+    defaultMessage:
+      'Made by {creator} on {date}. This is not a working copy anymore, but the main content.',
+  },
+  workingCopyRemovedTitle: {
+    id: 'The working copy was discarded',
+    defaultMessage: 'The working copy was discarded',
+  },
+  Unauthorized: {
+    id: 'Unauthorized',
+    defaultMessage: 'Unauthorized',
+  },
+  workingCopyErrorUnauthorized: {
+    id: 'workingCopyErrorUnauthorized',
+    defaultMessage: 'You are not authorized to perform this operation.',
+  },
+  Error: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  workingCopyGenericError: {
+    id: 'workingCopyGenericError',
+    defaultMessage: 'An error occurred while performing this operation.',
+  },
+});
+
+/**
+ * More container class.
+ * @class More
+ * @extends Component
+ */
+class More extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    pathname: PropTypes.string.isRequired,
+    content: PropTypes.shape({
+      title: PropTypes.string,
+      '@type': PropTypes.string,
+      is_folderish: PropTypes.bool,
+      review_state: PropTypes.string,
+    }),
+    loadComponent: PropTypes.func.isRequired,
+    closeMenu: PropTypes.func.isRequired,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    content: null,
+  };
+  state = {
+    openManageTranslations: false,
+    pushed: false,
+  };
+
+  push = (selector) => {
+    this.setState(() => ({
+      pushed: true,
+    }));
+    this.props.loadComponent(selector);
+    document.removeEventListener('mousedown', this.handleClickOutside, false);
+  };
+
+  componentDidUpdate(prevProps, prevState) {
+    let erroredAction = '';
+    if (
+      prevProps.workingCopy.apply.loading &&
+      this.props.workingCopy.apply.error
+    ) {
+      erroredAction = 'apply';
+    } else if (
+      prevProps.workingCopy.create.loading &&
+      this.props.workingCopy.create.error
+    ) {
+      erroredAction = 'create';
+    } else if (
+      prevProps.workingCopy.remove.loading &&
+      this.props.workingCopy.remove.error
+    ) {
+      erroredAction = 'remove';
+    }
+
+    if (erroredAction) {
+      const errorStatus = this.props.workingCopy[erroredAction].error.status;
+      if (errorStatus === 401 || errorStatus === 403) {
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.Unauthorized)}
+            content={this.props.intl.formatMessage(
+              messages.workingCopyErrorUnauthorized,
+            )}
+          />,
+          {
+            toastId: 'workingCopyErrorUnauthorized',
+            autoClose: 10000,
+          },
+        );
+      } else {
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.Error)}
+            content={this.props.intl.formatMessage(
+              messages.workingCopyGenericError,
+            )}
+          />,
+          {
+            toastId: 'workingCopyGenericError',
+            autoClose: 10000,
+          },
+        );
+      }
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const path = getBaseUrl(this.props.pathname);
+    const editAction = find(this.props.actions.object, { id: 'edit' });
+    const historyAction = find(this.props.actions.object, { id: 'history' });
+    const sharingAction = find(this.props.actions.object, {
+      id: 'local_roles',
+    });
+
+    const rulesAction = find(this.props.actions.object, {
+      id: 'contentrules',
+    });
+
+    const aliasesAction = find(this.props.actions.object_buttons, {
+      id: 'redirection',
+    });
+    const { content, intl } = this.props;
+
+    const dateOptions = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
+
+    return (
+      <div
+        className="menu-more pastanaga-menu"
+        style={{
+          flex: this.props.theToolbar.current
+            ? `0 0 ${
+                this.props.theToolbar.current.getBoundingClientRect().width
+              }px`
+            : null,
+        }}
+      >
+        <header>
+          <h2>{this.props.content.title}</h2>
+          <button
+            className="more-user"
+            aria-label={this.props.intl.formatMessage(messages.personalTools)}
+            onClick={() => this.push('personalTools')}
+            tabIndex={0}
+          >
+            <Icon
+              name={userSVG}
+              size="30px"
+              title={this.props.intl.formatMessage(messages.personalTools)}
+            />
+          </button>
+        </header>
+        <div className="pastanaga-menu-list">
+          <ul>
+            <Pluggable name="toolbar-more-menu-list" />
+            <Plug pluggable="toolbar-more-menu-list" id="state">
+              {this.props.content['@type'] !== 'Plone Site' && (
+                // Plone Site does not have workflow
+                <li className="state-select">
+                  <Workflow pathname={path} />
+                </li>
+              )}
+            </Plug>
+            <Plug pluggable="toolbar-more-menu-list" id="view">
+              {this.props.content['@type'] !== 'Plone Site' && (
+                // Plone Site does not have view (yet)
+                <li className="display-select">
+                  {editAction && <Display pathname={path} />}
+                </li>
+              )}
+            </Plug>
+            <Plug pluggable="toolbar-more-menu-list" id="history">
+              {this.props.content['@type'] !== 'Plone Site' && (
+                // Plone Site does not have history (yet)
+                <li>
+                  <Link to={`${path}/historyview`}>
+                    <div>
+                      <span className="pastanaga-menu-label">
+                        {historyAction?.title ||
+                          this.props.intl.formatMessage(messages.history)}
+                      </span>
+                      <span className="pastanaga-menu-value" />
+                    </div>
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              )}
+            </Plug>
+            <Plug pluggable="toolbar-more-menu-list" id="sharing">
+              {sharingAction && (
+                <li>
+                  <Link to={`${path}/sharing`}>
+                    {this.props.intl.formatMessage(messages.sharing)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              )}
+            </Plug>
+            <Plug pluggable="toolbar-more-menu-list" id="aliases">
+              {aliasesAction && (
+                <li>
+                  <Link to={`${path}/aliases`}>
+                    {this.props.intl.formatMessage(messages.aliases)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              )}
+            </Plug>
+            <Plug pluggable="toolbar-more-menu-list" id="rules">
+              {rulesAction && (
+                <li>
+                  <Link to={`${path}/rules`}>
+                    {this.props.intl.formatMessage(messages.rules)}
+                    <Icon name={rightArrowSVG} size="24px" />
+                  </Link>
+                </li>
+              )}
+            </Plug>
+          </ul>
+        </div>
+        <Pluggable name="toolbar-more-manage-content">
+          {(pluggables) => (
+            <>
+              {pluggables.length > 0 && (
+                <>
+                  <header>
+                    <h2>
+                      {this.props.intl.formatMessage(messages.manageContent)}
+                    </h2>
+                  </header>
+                  <div className="pastanaga-menu-list">
+                    <ul>
+                      {pluggables.map((p) => (
+                        <React.Fragment key={p.id}>{p()}</React.Fragment>
+                      ))}
+                    </ul>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </Pluggable>
+        {config.settings.hasWorkingCopySupport &&
+          this.props.content['@type'] !== 'Plone Site' &&
+          this.props.content['@type'] !== 'ims_indicator' && (
+            <>
+              {!this.props.content.working_copy && (
+                <Plug pluggable="toolbar-more-manage-content" id="workingcopy">
+                  <li>
+                    <button
+                      aria-label={this.props.intl.formatMessage(
+                        messages.CreateWorkingCopy,
+                      )}
+                      onClick={() => {
+                        this.props.createWorkingCopy(path).then((response) => {
+                          this.props.history.push(
+                            flattenToAppURL(response['@id']),
+                          );
+                          this.props.closeMenu();
+                        });
+                      }}
+                    >
+                      {this.props.intl.formatMessage(
+                        messages.CreateWorkingCopy,
+                      )}
+
+                      <Icon name={rightArrowSVG} size="24px" />
+                    </button>
+                  </li>
+                </Plug>
+              )}
+              {this.props.content.working_copy &&
+                this.props.content.working_copy_of && (
+                  <Plug
+                    pluggable="toolbar-more-manage-content"
+                    id="workingcopy"
+                  >
+                    <li>
+                      <button
+                        aria-label={this.props.intl.formatMessage(
+                          messages.applyWorkingCopy,
+                        )}
+                        onClick={() => {
+                          this.props.applyWorkingCopy(path).then((response) => {
+                            this.props.history.push(
+                              flattenToAppURL(
+                                this.props.content.working_copy_of['@id'],
+                              ),
+                            );
+                            this.props.closeMenu();
+                            toast.info(
+                              <Toast
+                                info
+                                title={intl.formatMessage(
+                                  messages.workingAppliedTitle,
+                                )}
+                                content={intl.formatMessage(
+                                  messages.workingCopyAppliedBy,
+                                  {
+                                    creator: content.working_copy?.creator_name,
+                                    date: (
+                                      <FormattedDate
+                                        date={content.working_copy?.created}
+                                        format={dateOptions}
+                                      />
+                                    ),
+                                  },
+                                )}
+                              />,
+                              {
+                                toastId: 'workingcopyapplyinfo',
+                                autoClose: 10000,
+                              },
+                            );
+                          });
+                        }}
+                      >
+                        {this.props.intl.formatMessage(
+                          messages.applyWorkingCopy,
+                        )}
+
+                        <Icon
+                          name={applySVG}
+                          size="24px"
+                          title={this.props.intl.formatMessage(
+                            messages.applyWorkingCopy,
+                          )}
+                        />
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        aria-label={this.props.intl.formatMessage(
+                          messages.removeWorkingCopy,
+                        )}
+                        onClick={() => {
+                          this.props
+                            .removeWorkingCopy(path)
+                            .then((response) => {
+                              this.props.history.push(
+                                flattenToAppURL(
+                                  this.props.content.working_copy_of['@id'],
+                                ),
+                              );
+                              this.props.closeMenu();
+                              toast.info(
+                                <Toast
+                                  info
+                                  title={intl.formatMessage(
+                                    messages.workingCopyRemovedTitle,
+                                  )}
+                                />,
+                                {
+                                  toastId: 'workingcopyremovednotice',
+                                  autoClose: 10000,
+                                },
+                              );
+                            });
+                        }}
+                      >
+                        {this.props.intl.formatMessage(
+                          messages.removeWorkingCopy,
+                        )}
+
+                        <Icon
+                          name={removeSVG}
+                          size="24px"
+                          color="#e40166"
+                          title={this.props.intl.formatMessage(
+                            messages.removeWorkingCopy,
+                          )}
+                        />
+                      </button>
+                    </li>
+                  </Plug>
+                )}
+              {this.props.content.working_copy &&
+                !this.props.content.working_copy_of && (
+                  <Plug
+                    pluggable="toolbar-more-manage-content"
+                    id="workingcopy"
+                  >
+                    <li>
+                      <Link
+                        to={flattenToAppURL(
+                          this.props.content.working_copy['@id'],
+                        )}
+                        onClick={() => this.props.closeMenu()}
+                      >
+                        {this.props.intl.formatMessage(
+                          messages.viewWorkingCopy,
+                        )}
+                        <Icon name={rightArrowSVG} size="24px" />
+                      </Link>
+                    </li>
+                  </Plug>
+                )}
+            </>
+          )}
+        {editAction &&
+          config.settings.isMultilingual &&
+          this.props.content['@type'] !== 'ims_indicator' && (
+            <Plug pluggable="toolbar-more-manage-content" id="multilingual">
+              <li>
+                <Link to={`${path}/manage-translations`}>
+                  {this.props.intl.formatMessage(messages.ManageTranslations)}
+
+                  <Icon name={rightArrowSVG} size="24px" />
+                </Link>
+              </li>
+            </Plug>
+          )}
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  withRouter,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      pathname: props.pathname,
+      content: state.content.data,
+      lang: state.intl.locale,
+      workingCopy: state.workingCopy,
+    }),
+    { applyWorkingCopy, createWorkingCopy, removeWorkingCopy },
+  ),
+)(More);

package/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx

@@ -74,7 +74,9 @@ const UniversalLink = ({
 
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
 
-  url = checkedURL.url;
+  // we can receive an item with a linkWithHash property set from ObjectBrowserWidget
+  // if so, we use that instead of the url prop
+  url = (item && item['linkWithHash']) || checkedURL.url;
   let tag = (
     <Link
       to={flattenToAppURL(url)}

package/src/customizations/volto/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -105,7 +105,8 @@ export class ObjectBrowserWidgetComponent extends Component {
     this.placeholderRef = React.createRef();
   }
   renderLabel(item) {
-    const href = item['@id'];
+    // show linkWithHash if available, otherwise @id
+    const href = item['linkWithHash'] || item['@id'];
     return (
       <Popup
         key={flattenToAppURL(href)}
@@ -163,6 +164,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     }
     let exists = false;
     let index = -1;
+
     value.forEach((_item, _index) => {
       if (flattenToAppURL(_item['@id']) === flattenToAppURL(item['@id'])) {
         exists = true;
@@ -181,6 +183,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           ...this.props.selectedItemAttrs,
           // Add the required attributes for the widget to work
           '@id',
+          'linkWithHash', // add linkWithHash to the allowed attributes
           'title',
         ];
         resultantItem = Object.keys(item)
@@ -222,16 +225,28 @@ export class ObjectBrowserWidgetComponent extends Component {
     }
   };
 
+  /**
+   * Splits a URL into its link and hash components.
+   * @param {string} url - The URL to split.
+   * @returns {[string, string]} - An array containing the link and hash components of the URL.
+   */
+  getHashAndLinkFromUrl = (url) => {
+    return url.split('#');
+  };
+
   onSubmitManualLink = () => {
     if (this.validateManualLink(this.state.manualLinkInput)) {
       if (isInternalURL(this.state.manualLinkInput)) {
-        const link = this.state.manualLinkInput;
+        const [link, hash] = this.getHashAndLinkFromUrl(
+          this.state.manualLinkInput,
+        );
+        const relative_link = flattenToAppURL(link);
         // convert it into an internal on if possible
         this.props
           .searchContent(
             '/',
             {
-              'path.query': flattenToAppURL(this.state.manualLinkInput),
+              'path.query': relative_link,
               'path.depth': '0',
               sort_on: 'getObjPositionInParent',
               metadata_fields: '_all',
@@ -241,6 +256,10 @@ export class ObjectBrowserWidgetComponent extends Component {
           )
           .then((resp) => {
             if (resp.items?.length > 0) {
+              // if there is a hash within the url, add it to the item as linkWithHash
+              if (hash) {
+                resp.items[0]['linkWithHash'] = `${relative_link}#${hash}`;
+              }
               this.onChange(resp.items[0]);
             } else {
               this.props.onChange(this.props.id, [
@@ -312,15 +331,8 @@ export class ObjectBrowserWidgetComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      id,
-      description,
-      fieldSet,
-      value,
-      mode,
-      onChange,
-      isDisabled,
-    } = this.props;
+    const { id, description, fieldSet, value, mode, onChange, isDisabled } =
+      this.props;
 
     let items = compact(!isArray(value) && value ? [value] : value || []);
 
@@ -379,7 +391,6 @@ export class ObjectBrowserWidgetComponent extends Component {
             <Button.Group>
               <Button
                 basic
-                icon
                 className="cancel"
                 onClick={(e) => {
                   e.stopPropagation();
@@ -390,7 +401,6 @@ export class ObjectBrowserWidgetComponent extends Component {
               </Button>
               <Button
                 basic
-                icon
                 primary
                 disabled={!this.state.validURL}
                 onClick={(e) => {

package/src/customizations/volto/components/manage/Widgets/README.md

@@ -0,0 +1 @@
+Customized ObjectBrowserWidget to preserve anchor links in the manually pasted internal URL.

package/src/customizations/volto/components/manage/Workflow/README.txt

@@ -0,0 +1 @@
+Workflow.jsx - copied from @plone/volto 16.22.2 - refs #256563