@eeacms/volto-eea-website-policy 1.9.1 → 1.10.0

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.10.0](https://github.com/eea/volto-eea-website-policy/compare/1.9.2...1.10.0) - 2 November 2023
+
+#### :rocket: New Features
+
+- feat: remove working copy and translations for ims indicators - refs #258076 [dobri1408 - [`52d588d`](https://github.com/eea/volto-eea-website-policy/commit/52d588df35dc644eba1268309d95126700c0b6e5)]
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`44ac62e`](https://github.com/eea/volto-eea-website-policy/commit/44ac62e6f8b7e5b7d57edfbf82812c91dc5d6bba)]
+- chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`b9a46d8`](https://github.com/eea/volto-eea-website-policy/commit/b9a46d85a64739188a3df9e8cbe645418b5d8b0a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.10.0 [Alin Voinea - [`de84955`](https://github.com/eea/volto-eea-website-policy/commit/de849552ee81a311563f2d89641832abdc79c8c6)]
+### [1.9.2](https://github.com/eea/volto-eea-website-policy/compare/1.9.1...1.9.2) - 29 September 2023
+
+#### :house: Documentation changes
+
+- docs: Update README and DEVELOP [Alin Voinea - [`552a79b`](https://github.com/eea/volto-eea-website-policy/commit/552a79ba30db6327bbf102e33650b24df7f71161)]
+
 ### [1.9.1](https://github.com/eea/volto-eea-website-policy/compare/1.9.0...1.9.1) - 22 September 2023
 
 #### :bug: Bug Fixes

package/DEVELOP.md

@@ -16,12 +16,14 @@
 
 1. Go to http://localhost:3000
 
-1.  Happy hacking!
+1. Initialize git hooks
 
     ```Bash
-    cd src/addons/volto-eea-website-policy/
+    yarn prepare
     ```
 
+1. Happy hacking!
+
 ### Or add @eeacms/volto-eea-website-policy to your Volto project
 
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
@@ -48,18 +50,15 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Install
 
-        yarn develop
+        make develop
         yarn
 
 1.  Start backend
 
-        docker pull plone
-        docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        docker logs -f plone
-
     ...you can also check http://localhost:8080/Plone
 
 1.  Start frontend

package/README.md

@@ -50,7 +50,7 @@ Go to http://localhost:3000
    ],
 
    "dependencies": {
-       "@eeacms/volto-eea-website-policy": "^1.0.0"
+       "@eeacms/volto-eea-website-policy": "*"
    }
    ```
 
@@ -58,7 +58,7 @@ Go to http://localhost:3000
 
    ```
    npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --addon @eeacms/volto-eea-website-policy
+   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-website-policy
    cd my-volto-project
    ```
 

package/RELEASE.md

@@ -20,9 +20,9 @@ You need to first install the [release-it](https://github.com/release-it/release
    ```
    npm install -g release-it
    ```
-   
+
 Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-   
+
 Release-it is a tool that automates 4 important steps in the release process:
 
 1. Version increase in `package.json` ( increased from the current version in `package.json`)
@@ -30,45 +30,45 @@ Release-it is a tool that automates 4 important steps in the release process:
 3. GitHub release on the commit with the changelog and package.json modification on the develop branch
 4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
 
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
 
    ```
    export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
    ```
- 
+
  To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
- 
+
    ```
    echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
    ```
 
 #### Using release-it tool
-  
+
 There are 3 yarn scripts that can be run to do the release
 
 ##### yarn release-beta
 
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
 
 ```
-? Select increment (next version): 
-❯ prepatch (0.1.1-beta.0) 
-  preminor (0.2.0-beta.0) 
-  premajor (1.0.0-beta.0) 
-  Other, please specify... 
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
 ```
 
 ##### yarn release-major-beta
 
 Same as `yarn release-beta`, but with premajor version pre-selected.
-    
+
 ##### yarn release
 
 Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
 
 #### Important notes
 
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
 
 > Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,8 +26,8 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {

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

@@ -0,0 +1,542 @@
+/**
+ * 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) => (
+                        <>{p()}</>
+                      ))}
+                    </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);