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

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

@@ -0,0 +1,324 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { uniqBy } from 'lodash';
+import { toast } from 'react-toastify';
+import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { Icon, Toast } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components';
+import {
+  flattenToAppURL,
+  getWorkflowOptions,
+  getCurrentStateMapping,
+} 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',
+  },
+  notAllowedToUpdateWorkflow: {
+    id: 'notAllowedToUpdateWorkflow',
+    defaultMessage: 'Please fill out all the required fields',
+  },
+  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',
+    },
+  }),
+};
+
+function useWorkflow() {
+  const history = useSelector((state) => state.workflow.history, shallowEqual);
+  const transitions = useSelector(
+    (state) => state.workflow.transitions,
+    shallowEqual,
+  );
+  const editingProgressSteps = useSelector((state) =>
+    state?.editingProgress?.editing?.loaded === true
+      ? state?.editingProgress?.result?.steps
+      : [],
+  );
+  const workflowLoaded = useSelector((state) => state.workflow.get?.loaded);
+  const loaded = useSelector((state) => state.workflow.transition.loaded);
+  const currentStateValue = useSelector(
+    (state) => getCurrentStateMapping(state.workflow.currentState),
+    shallowEqual,
+  );
+
+  return {
+    loaded,
+    history,
+    transitions,
+    currentStateValue,
+    workflowLoaded,
+    editingProgressSteps,
+  };
+}
+
+const filter_remaining_steps = (values, key) => {
+  return values.filter((value) => {
+    const is_not_ready = !value.is_ready;
+
+    if (!is_not_ready) {
+      return false;
+    }
+
+    const states = value.states;
+    const required_for_all = states?.indexOf('all') !== -1;
+
+    return (
+      (is_not_ready && required_for_all) ||
+      (is_not_ready && states?.indexOf(key) !== -1)
+    );
+  });
+};
+
+const Workflow = (props) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const {
+    loaded,
+    currentStateValue,
+    transitions,
+    workflowLoaded,
+    editingProgressSteps,
+  } = useWorkflow();
+  const content = useSelector((state) => state.content?.data, shallowEqual);
+  const [selectedOption, setSelectedOption] = React.useState(currentStateValue);
+  const { pathname } = props;
+
+  useEffect(() => {
+    dispatch(getWorkflow(pathname));
+    dispatch(getContent(pathname));
+  }, [dispatch, pathname, loaded]);
+
+  const transition = (selectedOption) => {
+    if (
+      filter_remaining_steps(
+        editingProgressSteps,
+        props?.content?.review_state || '',
+      ).length === 0
+    ) {
+      dispatch(transitionWorkflow(flattenToAppURL(selectedOption.url)));
+      setSelectedOption(selectedOption);
+      toast.success(
+        <Toast
+          success
+          title={intl.formatMessage(messages.messageUpdated)}
+          content=""
+        />,
+      );
+    } else {
+      toast.error(
+        <Toast
+          error
+          title={intl.formatMessage(messages.notAllowedToUpdateWorkflow)}
+          content=""
+        />,
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (selectedOption?.value === 'createNewVersion' && workflowLoaded) {
+      history.push(`${pathname}.1`);
+    }
+  }, [history, pathname, selectedOption?.value, workflowLoaded]);
+
+  const { Placeholder } = props.reactSelect.components;
+  const Select = props.reactSelect.default;
+
+  const filterd_transitions = transitions.filter((transition) => {
+    if (
+      transition?.['@id']?.endsWith('markForDeletion') &&
+      props.content?.review_state === 'published'
+    ) {
+      return false;
+    }
+    return true;
+  });
+
+  return (
+    <FormFieldWrapper
+      id="state-select"
+      title={intl.formatMessage(messages.state)}
+      intl={intl}
+      {...props}
+    >
+      <Select
+        name="state-select"
+        className="react-select-container"
+        classNamePrefix="react-select"
+        isDisabled={!content.review_state || filterd_transitions.length === 0}
+        options={uniqBy(
+          filterd_transitions.map((transition) =>
+            getWorkflowOptions(transition),
+          ),
+          'label',
+        ).concat(currentStateValue)}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{
+          DropdownIndicator,
+          Placeholder,
+          Option,
+          SingleValue,
+        }}
+        onChange={transition}
+        value={
+          content.review_state
+            ? currentStateValue
+            : {
+                label: intl.formatMessage(messages.messageNoWorkflow),
+                value: 'noworkflow',
+              }
+        }
+        isSearchable={false}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+Workflow.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
+
+export default compose(injectLazyLibs(['reactSelect']))(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/customizations/volto/components/theme/Comments/Comments.jsx

@@ -33,8 +33,7 @@ const messages = defineMessages({
     defaultMessage: 'Comments',
   },
   commentDescription: {
-    id:
-      'You can add a comment by filling out the form below. Plain text formatting.',
+    id: 'You can add a comment by filling out the form below. Plain text formatting.',
     defaultMessage:
       'You can add a comment by filling out the form below. Plain text formatting.',
   },

package/src/customizations/volto/components/theme/ContactForm/ContactForm.jsx

@@ -12,7 +12,7 @@ export class ContactFormComponent extends Component {
   }
 
   render() {
-    const remoteUrl = config.settings.contactForm;
+    const remoteUrl = config.settings.contactForm || '/';
     return (
       <Container id="page-document">
         <p>

package/src/customizations/volto/components/theme/EventDetails/EventDetails.jsx

@@ -143,6 +143,7 @@ const EventDetails = ({ content, display_as = 'aside' }) => {
           className="ics-download"
           target="_blank"
           href={`${expandToBackendURL(content['@id'])}/ics_view`}
+          rel="noopener"
         >
           {intl.formatMessage(messages.downloadEvent)}
         </a>

package/src/index.js

@@ -35,11 +35,7 @@ import { v4 as uuid } from 'uuid';
 import * as eea from './config';
 import React from 'react';
 
-const restrictedBlocks = [
-  '__grid', // Grid/Teaser block (kitconcept)
-  'imagesGrid',
-  'teaser',
-];
+const restrictedBlocks = ['imagesGrid', 'teaser', 'dataFigure', 'plotly_chart'];
 
 /**
  * Customizes the variations of a tabs block by modifying their schema and semantic icons.
@@ -131,6 +127,12 @@ const applyConfig = (config) => {
     ...(config.settings.eea || {}),
   };
 
+  //include site title in <title>
+  if (!config.settings.siteTitleFormat) {
+    config.settings.siteTitleFormat = { includeSiteTitle: true };
+  } else config.settings.siteTitleFormat.includeSiteTitle = true;
+  config.settings.titleAndSiteTitleSeparator = '|';
+
   // #160689 Redirect contact-form to contact-us
   config.settings.contactForm = '/contact';
 
@@ -185,11 +187,13 @@ const applyConfig = (config) => {
 
   //Apply the image position style for image and leadimage blocks
   if (config.blocks.blocksConfig.leadimage) {
-    config.blocks.blocksConfig.leadimage.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+    config.blocks.blocksConfig.leadimage.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancerImagePosition;
   }
 
   if (config.blocks.blocksConfig.image) {
-    config.blocks.blocksConfig.image.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+    config.blocks.blocksConfig.image.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancerImagePosition;
   }
 
   // Set Languages in nextcloud-video-block
@@ -197,9 +201,8 @@ const applyConfig = (config) => {
     config?.blocks?.blocksConfig?.nextCloudVideo?.subtitlesLanguages &&
     config?.settings?.eea?.languages?.length > 0
   )
-    config.blocks.blocksConfig.nextCloudVideo.subtitlesLanguages = config.settings.eea.languages.map(
-      (el) => [el.code, el.name],
-    );
+    config.blocks.blocksConfig.nextCloudVideo.subtitlesLanguages =
+      config.settings.eea.languages.map((el) => [el.code, el.name]);
 
   // Enable Title block
   config.blocks.blocksConfig.title.restricted = false;
@@ -224,7 +227,7 @@ const applyConfig = (config) => {
   };
   config.views.errorViews = {
     ...config.views.errorViews,
-    '404': NotFound,
+    404: NotFound,
   };
   // Apply slate text block customization
   if (config.blocks.blocksConfig.slate) {
@@ -467,19 +470,22 @@ const applyConfig = (config) => {
 
   // Group
   if (config.blocks.blocksConfig.group) {
-    config.blocks.blocksConfig.group.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.group.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
   // Columns
   if (config.blocks.blocksConfig.columnsBlock) {
     config.blocks.blocksConfig.columnsBlock.mostUsed = true;
-    config.blocks.blocksConfig.columnsBlock.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.columnsBlock.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
   // Listing
   if (config.blocks.blocksConfig.listing) {
     config.blocks.blocksConfig.listing.title = 'Listing (Content)';
-    config.blocks.blocksConfig.listing.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+    config.blocks.blocksConfig.listing.schemaEnhancer =
+      addStylingFieldsetSchemaEnhancer;
   }
 
   // Block chooser

package/src/middleware/ok.js

@@ -7,9 +7,11 @@ const ok = function (req, res, next) {
   res.send('ok');
 };
 
-export default function (express) {
+const okMiddleware = function (express) {
   const middleware = express.Router();
   middleware.all(config?.settings?.okRoute || '/ok', ok);
   middleware.id = 'ok';
   return middleware;
-}
+};
+
+export default okMiddleware;

package/src/middleware/voltoCustom.js

@@ -29,9 +29,11 @@ function voltoCustomMiddleware(req, res, next) {
     });
 }
 
-export default function (express) {
+const registervoltoCustomMiddleware = function (express) {
   const middleware = express.Router();
   middleware.all(['**/voltoCustom.css$'], voltoCustomMiddleware);
   middleware.id = 'voltoCustom.css';
   return middleware;
-}
+};
+
+export default registervoltoCustomMiddleware;

package/src/slate.js

@@ -150,8 +150,8 @@ export default function installSlate(config) {
     config = installCallout(config);
 
     try {
-      renderLinkElement = require('@eeacms/volto-anchors/helpers')
-        .renderLinkElement;
+      renderLinkElement =
+        require('@eeacms/volto-anchors/helpers').renderLinkElement;
     } catch {}
 
     installSlateToolbarButton({
@@ -190,14 +190,16 @@ export default function installSlate(config) {
     );
 
     // Remove blockquote, italic, strikethrough slate button from toolbarButtons
-    config.settings.slate.toolbarButtons = config.settings.slate.toolbarButtons.filter(
-      (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
-    );
+    config.settings.slate.toolbarButtons =
+      config.settings.slate.toolbarButtons.filter(
+        (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
+      );
 
     // Remove blockquote, italic, strikethrough slate button from expandedToolbarButtons
-    config.settings.slate.expandedToolbarButtons = config.settings.slate.expandedToolbarButtons.filter(
-      (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
-    );
+    config.settings.slate.expandedToolbarButtons =
+      config.settings.slate.expandedToolbarButtons.filter(
+        (item) => !['blockquote', 'italic', 'strikethrough'].includes(item),
+      );
 
     // Remove 'underline' and 'italic' hotkeys
     config.settings.slate.hotkeys = Object.keys(config.settings.slate.hotkeys)

package/src/customizations/@plone/volto-slate/editor/plugins/StyleMenu/README.txt

@@ -1 +0,0 @@
-This customization fixes bugs with styleMenu not highlighting selected styles in some scenarios. This should be removed after https://github.com/plone/volto/pull/4852