@eeacms/volto-eea-website-policy 1.7.3 → 1.9.0

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.9.0](https://github.com/eea/volto-eea-website-policy/compare/1.8.0...1.9.0) - 1 September 2023
+
+#### :rocket: New Features
+
+- feat: Create new version workflow redirect - refs #256563 [Alin Voinea - [`1fede39`](https://github.com/eea/volto-eea-website-policy/commit/1fede390b90f3a66a60031a106e78d50cc430cd6)]
+
+#### :house: Internal changes
+
+- style: Fix eslint [Alin Voinea - [`a634acf`](https://github.com/eea/volto-eea-website-policy/commit/a634acf05c0279fafa825783dd236123c2edc0f6)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.9.0 [Alin Voinea - [`428c55b`](https://github.com/eea/volto-eea-website-policy/commit/428c55b1fd9603a6ed57d858d704fc9337421f41)]
+- test: Add cypress test for customized Workflow - refs #256563 [Alin Voinea - [`e9eab09`](https://github.com/eea/volto-eea-website-policy/commit/e9eab09f53393589fe6c0d4a318638e3eb7b7eae)]
+- test: Add jest tests for FrequencyOfDissemination widget [Alin Voinea - [`d28b2fe`](https://github.com/eea/volto-eea-website-policy/commit/d28b2febb74f6846ebba277d32d38deffe2fc023)]
+- i18n: Add en [Alin Voinea - [`d5be8b1`](https://github.com/eea/volto-eea-website-policy/commit/d5be8b12e7c007fb88ae9d240ab45ba81d427772)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`b2ee189`](https://github.com/eea/volto-eea-website-policy/commit/b2ee18920646dc1854a69faf931c87e814eddb5a)]
+### [1.8.0](https://github.com/eea/volto-eea-website-policy/compare/1.7.3...1.8.0) - 15 August 2023
+
+#### :nail_care: Enhancements
+
+- refactor: Move DataProvenance code to dedicated widget addon - refs #256379 [Alin Voinea - [`3e7b046`](https://github.com/eea/volto-eea-website-policy/commit/3e7b046f3396c9aa73757916c6f02156aa18a6c2)]
+
 ### [1.7.3](https://github.com/eea/volto-eea-website-policy/compare/1.7.2...1.7.3) - 1 August 2023
 
 #### :house: Documentation changes

package/docker-compose.yml

@@ -1,11 +1,12 @@
 version: "3"
 services:
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: eeacms/plone-backend
     ports:
       - "8080:8080"
     environment:
       SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
 
   frontend: 
     build:
@@ -23,6 +24,9 @@ services:
     volumes:
       - ./:/app/src/addons/${ADDON_PATH}
     environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
       RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
       RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
       HOST: "0.0.0.0"

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "1.7.3",
+  "version": "1.9.0",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Widgets/FrequencyOfDissemination.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FrequencyOfDissemination } from './FrequencyOfDissemination';
+
+describe('FrequencyOfDissemination', () => {
+  it('renders "Once a year" when value is 1', () => {
+    const { getByText } = render(<FrequencyOfDissemination value={1} />);
+    expect(getByText('Once a year')).toMatchSnapshot();
+  });
+
+  it('renders "Every 2 years" when value is 2', () => {
+    const { getByText } = render(<FrequencyOfDissemination value={2} />);
+    expect(getByText('Every 2 years')).toMatchSnapshot();
+  });
+
+  it('renders custom text when children prop is provided', () => {
+    const { getByText } = render(
+      <FrequencyOfDissemination value={3}>
+        {(text) => `Frequency: ${text}`}
+      </FrequencyOfDissemination>,
+    );
+    expect(getByText('Frequency: Every 3 years')).toMatchSnapshot();
+  });
+
+  it('renders nothing when value is falsy', () => {
+    const { container } = render(<FrequencyOfDissemination value={0} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

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

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

@@ -0,0 +1,380 @@
+/**
+ * Workflow component.
+ * @module components/manage/Workflow/Workflow
+ */
+
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { uniqBy } from 'lodash';
+import { toast } from 'react-toastify';
+import { defineMessages, injectIntl } from 'react-intl';
+import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+import {
+  flattenToAppURL,
+  getCurrentStateMapping,
+  getWorkflowOptions,
+} from '@plone/volto/helpers';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import {
+  getContent,
+  getWorkflow,
+  transitionWorkflow,
+} from '@plone/volto/actions';
+
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const messages = defineMessages({
+  messageUpdated: {
+    id: 'Workflow updated.',
+    defaultMessage: 'Workflow updated.',
+  },
+  messageNoWorkflow: {
+    id: 'No workflow',
+    defaultMessage: 'No workflow',
+  },
+  state: {
+    id: 'State',
+    defaultMessage: 'State',
+  },
+});
+
+const SingleValue = injectLazyLibs('reactSelect')(({ children, ...props }) => {
+  const stateDecorator = {
+    marginRight: '10px',
+    display: 'inline-block',
+    backgroundColor: props.selectProps.value.color || null,
+    content: ' ',
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+  };
+  const { SingleValue } = props.reactSelect.components;
+  return (
+    <SingleValue {...props}>
+      <span style={stateDecorator} />
+      {children}
+    </SingleValue>
+  );
+});
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const stateDecorator = {
+    marginRight: '10px',
+    display: 'inline-block',
+    backgroundColor:
+      props.selectProps.value.value === props.data.value
+        ? props.selectProps.value.color
+        : null,
+    content: ' ',
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+    border:
+      props.selectProps.value.value !== props.data.value
+        ? `1px solid ${props.data.color}`
+        : null,
+  };
+
+  const { Option } = props['reactSelect'].components;
+  return (
+    <Option {...props}>
+      <span style={stateDecorator} />
+      <div style={{ marginRight: 'auto' }}>{props.label}</div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="18px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="18px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const { DropdownIndicator } = props.reactSelect.components;
+  return (
+    <DropdownIndicator {...props} data-testid="workflow-select-dropdown">
+      {props.selectProps.menuIsOpen ? (
+        <Icon name={upSVG} size="24px" color="#007bc1" />
+      ) : (
+        <Icon name={downSVG} size="24px" color="#007bc1" />
+      )}
+    </DropdownIndicator>
+  );
+});
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    border: 'none',
+    borderBottom: '2px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: null,
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+/**
+ * Workflow container class.
+ * @class Workflow
+ * @extends Component
+ */
+class Workflow extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getContent: PropTypes.func.isRequired,
+    getWorkflow: PropTypes.func.isRequired,
+    transitionWorkflow: PropTypes.func.isRequired,
+    workflowLoaded: PropTypes.func,
+    loaded: PropTypes.bool.isRequired,
+    pathname: PropTypes.string.isRequired,
+    contentHistory: PropTypes.arrayOf(
+      PropTypes.shape({
+        review_state: PropTypes.string,
+      }),
+    ),
+    transitions: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+        title: PropTypes.string,
+      }),
+    ),
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    history: [],
+    transitions: [],
+  };
+
+  state = {
+    selectedOption: this.props.currentStateValue,
+  };
+
+  componentDidMount() {
+    this.props.getWorkflow(this.props.pathname);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.getWorkflow(nextProps.pathname);
+    }
+    if (!this.props.loaded && nextProps.loaded) {
+      this.props.getWorkflow(nextProps.pathname);
+      this.props.getContent(nextProps.pathname);
+    }
+    if (!this.props.workflowLoaded && nextProps.workflowLoaded) {
+      this.props.getContent(nextProps.pathname);
+      // #153145 - Redirect to the newly created version
+      if (this.state?.selectedOption?.value === 'createNewVersion') {
+        this.props.history.push(`${nextProps.pathname}.1`);
+      }
+    }
+  }
+
+  /**
+   * On transition handler
+   * @method transition
+   * @param {string} event Event object
+   * @returns {undefined}
+   */
+  transition = (selectedOption) => {
+    this.props.transitionWorkflow(flattenToAppURL(selectedOption.url));
+    this.setState({ selectedOption });
+    toast.success(
+      <Toast
+        success
+        title={this.props.intl.formatMessage(messages.messageUpdated)}
+        content=""
+      />,
+    );
+  };
+
+  selectValue = (option) => {
+    const stateDecorator = {
+      marginLeft: '10px',
+      marginRight: '10px',
+      display: 'inline-block',
+      backgroundColor: option.color || null,
+      content: ' ',
+      height: '10px',
+      width: '10px',
+      borderRadius: '50%',
+    };
+    return (
+      <Fragment>
+        <span style={stateDecorator} />
+        <span className="Select-value-label">{option.label}</span>
+      </Fragment>
+    );
+  };
+
+  optionRenderer = (option) => {
+    const stateDecorator = {
+      marginLeft: '10px',
+      marginRight: '10px',
+      display: 'inline-block',
+      backgroundColor:
+        this.props.currentStateValue.value === option.value
+          ? option.color
+          : null,
+      content: ' ',
+      height: '10px',
+      width: '10px',
+      borderRadius: '50%',
+      border:
+        this.props.currentStateValue.value !== option.value
+          ? `1px solid ${option.color}`
+          : null,
+    };
+
+    return (
+      <Fragment>
+        <span style={stateDecorator} />
+        <span style={{ marginRight: 'auto' }}>{option.label}</span>
+        <Icon name={checkSVG} size="24px" />
+      </Fragment>
+    );
+  };
+
+  render() {
+    const { Placeholder } = this.props.reactSelect.components;
+    const Select = this.props.reactSelect.default;
+    // Remove markForDeletion transition if item is published
+    // in order not to un-publish items by mistake. This transition
+    // can still be executed from /contents - refs #256563, #153145
+    const transitions = this.props.transitions.filter((transition) => {
+      if (
+        transition?.['@id']?.endsWith('markForDeletion') &&
+        this.props?.content?.review_state === 'published'
+      ) {
+        return false;
+      }
+      return true;
+    });
+
+    return (
+      <FormFieldWrapper
+        id="state-select"
+        title={this.props.intl.formatMessage(messages.state)}
+        {...this.props}
+      >
+        <Select
+          name="state-select"
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isDisabled={
+            !this.props.content.review_state || transitions.length === 0
+          }
+          options={uniqBy(
+            transitions.map((transition) => getWorkflowOptions(transition)),
+            'label',
+          ).concat(this.props.currentStateValue)}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            DropdownIndicator,
+            Placeholder,
+            Option,
+            SingleValue,
+          }}
+          onChange={this.transition}
+          value={
+            this.props.content.review_state
+              ? this.props.currentStateValue
+              : {
+                  label: this.props.intl.formatMessage(
+                    messages.messageNoWorkflow,
+                  ),
+                  value: 'noworkflow',
+                }
+          }
+          isSearchable={false}
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelect']),
+  withRouter,
+  connect(
+    (state) => ({
+      loaded: state.workflow.transition.loaded,
+      content: state.content.data,
+      workflowLoaded: state.workflow.get?.loaded,
+      contentHistory: state.workflow.history,
+      transitions: state.workflow.transitions,
+      currentStateValue: getCurrentStateMapping(state.workflow.currentState),
+    }),
+    { getContent, getWorkflow, transitionWorkflow },
+  ),
+)(Workflow);

package/src/customizations/volto/components/manage/Workflow/Workflow.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import Workflow from './Workflow';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+beforeEach(() => {
+  config.settings.workflowMapping = {
+    published: { value: 'published', color: '#007bc1' },
+    publish: { value: 'publish', color: '#007bc1' },
+    private: { value: 'private', color: '#ed4033' },
+    pending: { value: 'pending', color: '#f6a808' },
+    send_back: { value: 'private', color: '#ed4033' },
+    retract: { value: 'private', color: '#ed4033' },
+    submit: { value: 'review', color: '#f4e037' },
+  };
+});
+
+describe('Workflow', () => {
+  it('renders an empty workflow component', async () => {
+    const store = mockStore({
+      workflow: {
+        currentState: { id: 'published', title: 'Published' },
+        history: [],
+        transition: { loaded: true },
+        transitions: [],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: { data: { review_state: 'published' } },
+    });
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Workflow pathname="/test" />
+        </MemoryRouter>
+      </Provider>,
+    );
+    await waitFor(() => screen.getByText(/Published/));
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a workflow component', async () => {
+    const store = mockStore({
+      workflow: {
+        currentState: { id: 'private', title: 'Private' },
+        history: [{ review_state: 'private' }],
+        transition: { loaded: true },
+        transitions: [{ '@id': 'http://publish', title: 'Publish' }],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      content: { data: { review_state: 'private' } },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Workflow pathname="/test" />
+        </MemoryRouter>
+      </Provider>,
+    );
+    await waitFor(() => screen.getByText('Private'));
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/index.js

@@ -2,8 +2,6 @@ import { runtimeConfig } from '@plone/volto/runtime_config';
 import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 import { appendGroup } from './helpers';
 import { FrequencyOfDissemination } from '@eeacms/volto-eea-website-policy/components/Widgets/FrequencyOfDissemination';
-import { DataProvenance } from '@eeacms/volto-eea-website-policy/components/Widgets/DataProvenance';
-import { InstitutionalMandate } from '@eeacms/volto-eea-website-policy/components/Widgets/InstitutionalMandate';
 
 const restrictedBlocks = [
   'imagecards',
@@ -120,8 +118,6 @@ const applyConfig = (config) => {
   });
 
   // Custom widgets
-  config.widgets.id.data_provenance = DataProvenance;
-  config.widgets.id.institutional_mandate = InstitutionalMandate;
   config.widgets.views.id.frequency_of_dissemination = FrequencyOfDissemination;
 
   // Subsite

package/src/components/Widgets/DataProvenance.jsx

@@ -1,12 +0,0 @@
-import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
-import { DataProvenance as NextDataProvenance } from '@eeacms/volto-widget-dataprovenance/components/theme/Widgets/DataProvenance';
-
-export const DataProvenance = (props) => {
-  if (props.behavior === 'eea.coremetadata.behavior') {
-    return <NextDataProvenance {...props} />;
-  }
-  if (props.behavior === 'eea.dexterity.indicators.metadata') {
-    return <RichTextWidget {...props} />;
-  }
-  return ' Data Provenance ';
-};

package/src/components/Widgets/InstitutionalMandate.jsx

@@ -1,5 +0,0 @@
-import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
-
-export const InstitutionalMandate = (props) => {
-  return <RichTextWidget {...props} readOnly={true} />;
-};