@eeacms/volto-eea-website-policy 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.3.0](https://github.com/eea/volto-eea-website-policy/compare/1.2.2...1.3.0) - 7 February 2023
+
+#### :nail_care: Enhancements
+
+- refactor(Toolbar): Upgrade Toolbar.jsx shadow customization to Volto 16.10.0 [Alin Voinea - [`d759206`](https://github.com/eea/volto-eea-website-policy/commit/d759206b48f31e1835da1b5cc99f4b640812b6a0)]
+- refactor(Controlpanel): Cleanup obsolete shadow ContentTypeLayout [Alin Voinea - [`7469ea9`](https://github.com/eea/volto-eea-website-policy/commit/7469ea9670d1dcf9dc98d6e3f4537244069222fa)]
+- refactor(config): Move some common settings to volto-eea-website-theme - refs #160747 [Alin Voinea - [`e7b8508`](https://github.com/eea/volto-eea-website-policy/commit/e7b85082449406962d2e90e0362ac596f127a0e5)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.3.0 [Alin Voinea - [`8a8e906`](https://github.com/eea/volto-eea-website-policy/commit/8a8e9061aedbbec89d7ab7e7493cfcabefdd3bc5)]
+### [1.2.2](https://github.com/eea/volto-eea-website-policy/compare/1.2.1...1.2.2) - 25 January 2023
+
+#### :hammer_and_wrench: Others
+
+- Safely set extractScripts.errorPages [Alin Voinea - [`439fb46`](https://github.com/eea/volto-eea-website-policy/commit/439fb46167aa24fe1ae87c1721894aceb89a1a55)]
 ### [1.2.1](https://github.com/eea/volto-eea-website-policy/compare/1.2.0...1.2.1) - 29 December 2022
 
 ### [1.2.0](https://github.com/eea/volto-eea-website-policy/compare/1.1.0...1.2.0) - 28 December 2022

package/package.json

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

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

@@ -29,7 +29,12 @@ import {
   unlockContent,
 } from '@plone/volto/actions';
 import { Icon } from '@plone/volto/components';
-import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import {
+  BodyClass,
+  getBaseUrl,
+  getCookieOptions,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 import penSVG from '@plone/volto/icons/pen.svg';
@@ -104,7 +109,7 @@ const messages = defineMessages({
   },
 });
 
-const toolbarComponents = {
+let toolbarComponents = {
   personalTools: { component: PersonalTools, wrapper: null },
   more: { component: More, wrapper: null },
   types: { component: Types, wrapper: null, contentAsProps: true },
@@ -197,8 +202,20 @@ class Toolbar extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.listActions(getBaseUrl(this.props.pathname));
-    this.props.getTypes(getBaseUrl(this.props.pathname));
+    // Do not trigger the actions action if the expander is present
+    if (!hasApiExpander('actions', getBaseUrl(this.props.pathname))) {
+      this.props.listActions(getBaseUrl(this.props.pathname));
+    }
+    // Do not trigger the types action if the expander is present
+    if (!hasApiExpander('types', getBaseUrl(this.props.pathname))) {
+      this.props.getTypes(getBaseUrl(this.props.pathname));
+    }
+    toolbarComponents = {
+      ...(config.settings
+        ? config.settings.additionalToolbarComponents || {}
+        : {}),
+      ...toolbarComponents,
+    };
     this.props.setExpandedToolbar(this.state.expanded);
     document.addEventListener('mousedown', this.handleClickOutside, false);
   }
@@ -211,8 +228,14 @@ class Toolbar extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.listActions(getBaseUrl(nextProps.pathname));
-      this.props.getTypes(getBaseUrl(nextProps.pathname));
+      // Do not trigger the actions action if the expander is present
+      if (!hasApiExpander('actions', getBaseUrl(nextProps.pathname))) {
+        this.props.listActions(getBaseUrl(nextProps.pathname));
+      }
+      // Do not trigger the types action if the expander is present
+      if (!hasApiExpander('types', getBaseUrl(nextProps.pathname))) {
+        this.props.getTypes(getBaseUrl(nextProps.pathname));
+      }
     }
 
     // Unlock
@@ -534,9 +557,13 @@ class Toolbar extends Component {
                     </button>
                   </>
                 )}
+                <Pluggable name="main.toolbar.top" />
               </div>
               <div className="toolbar-bottom">
-                <Pluggable name="main.toolbar.bottom" />
+                <Pluggable
+                  name="main.toolbar.bottom"
+                  params={{ onClickHandler: this.toggleMenu }}
+                />
                 {!this.props.hideDefaultViewButtons && (
                   <button
                     className="user"

package/src/index.js

@@ -1,37 +1,9 @@
 import { runtimeConfig } from '@plone/volto/runtime_config';
-import installCallout from '@plone/volto-slate/editor/plugins/Callout';
 import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 import installLayoutSettingsBlock from '@eeacms/volto-eea-website-policy/components/Blocks/LayoutSettings';
 import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-policy/components/Blocks/schema';
 
 const applyConfig = (config) => {
-  // if (process.env.NODE_ENV === 'production') {
-  //   // Restrict block-style to Layout only
-  //   config.settings.layoutOnlyBlockStyles = true;
-  //   // Restrict slate metadata mentions to Layout only
-  //   config.settings.layoutOnlySlateMetadataMentions = true;
-  // }
-  // Callout slate button
-  config = installCallout(config);
-
-  // Remove blockquote slate button
-  config.settings.slate.toolbarButtons = config.settings.slate.toolbarButtons.filter(
-    (item) => item !== 'blockquote',
-  );
-
-  // Disable tags on View
-  config.settings.showTags = false;
-
-  // Enable Title block
-  config.blocks.blocksConfig.title.restricted = false;
-
-  // Enable description block (also for cypress)
-  config.blocks.blocksConfig.description.restricted = false;
-  config.blocks.requiredBlocks = [];
-
-  // Date format for EU
-  config.settings.dateLocale = 'en-gb';
-
   // #137187 Keycloak integration
   if (runtimeConfig['RAZZLE_KEYCLOAK'] === 'Yes') {
     config.settings.externalRoutes = [
@@ -131,6 +103,14 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.imagecards.restricted = true;
   }
 
+  config.settings.apiExpanders = [
+    ...config.settings.apiExpanders,
+    {
+      match: '',
+      GET_CONTENT: ['subsite'],
+    },
+  ];
+
   // Done
   return config;
 };

package/src/customizations/volto/components/manage/Controlpanels/ContentTypeLayout.jsx

@@ -1,520 +0,0 @@
-/**
- * Content Type component.
- * @module components/manage/Controlpanels/ContentTypeLayout
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
-import {
-  getParentUrl,
-  hasBlocksData,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
-import { Portal } from 'react-portal';
-import { Button, Segment } from 'semantic-ui-react';
-import { toast } from 'react-toastify';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { nth, join } from 'lodash';
-import {
-  Error,
-  Form,
-  Icon,
-  Toolbar,
-  Sidebar,
-  Toast,
-} from '@plone/volto/components';
-import {
-  getSchema,
-  updateSchema,
-  getControlpanel,
-  updateControlpanel,
-} from '@plone/volto/actions';
-
-import saveSVG from '@plone/volto/icons/save.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import backSVG from '@plone/volto/icons/back.svg';
-
-const messages = defineMessages({
-  changesSaved: {
-    id: 'Changes saved.',
-    defaultMessage: 'Changes saved.',
-  },
-  back: {
-    id: 'Back',
-    defaultMessage: 'Back',
-  },
-  save: {
-    id: 'Save',
-    defaultMessage: 'Save',
-  },
-  cancel: {
-    id: 'Cancel',
-    defaultMessage: 'Cancel',
-  },
-  info: {
-    id: 'Info',
-    defaultMessage: 'Info',
-  },
-  enable: {
-    id: 'Enable editable Blocks',
-    defaultMessage: 'Enable editable Blocks',
-  },
-});
-
-/**
- * ContentTypeLayout class.
- * @class ContentTypeLayout
- * @extends Component
- */
-class ContentTypeLayout extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateControlpanel: PropTypes.func.isRequired,
-    getControlpanel: PropTypes.func.isRequired,
-    getSchema: PropTypes.func.isRequired,
-    updateSchema: PropTypes.func.isRequired,
-    id: PropTypes.string.isRequired,
-    parent: PropTypes.string.isRequired,
-    pathname: PropTypes.string.isRequired,
-    schemaRequest: PropTypes.objectOf(PropTypes.any).isRequired,
-    cpanelRequest: PropTypes.objectOf(PropTypes.any).isRequired,
-    schema: PropTypes.objectOf(PropTypes.any),
-    controlpanel: PropTypes.shape({
-      '@id': PropTypes.string,
-      data: PropTypes.object,
-      schema: PropTypes.object,
-      title: PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    schema: {},
-    controlpanel: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentTypeLayout
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      visual: false,
-      content: null,
-      readOnlyBehavior: null,
-      error: null,
-      isClient: false,
-    };
-
-    this.onCancel = this.onCancel.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onEnableBlocks = this.onEnableBlocks.bind(this);
-    this.onEnableBlocksBehavior = this.onEnableBlocksBehavior.bind(this);
-    this.onDisableBlocksBehavior = this.onDisableBlocksBehavior.bind(this);
-    this.form = React.createRef();
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    this.props.getControlpanel(join([this.props.parent, this.props.id], '/'));
-    this.props.getSchema(this.props.id);
-    this.setState({ isClient: true });
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Control Panel GET
-    if (
-      this.props.cpanelRequest.get.loading &&
-      nextProps.cpanelRequest.get.error
-    ) {
-      this.setState({
-        error: nextProps.cpanelRequest.get.error,
-      });
-    }
-
-    // Schema GET
-    if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {
-      const properties = nextProps.schema?.properties || {};
-      const content = {};
-      for (const key in properties) {
-        const value = properties[key].default;
-        if (value) {
-          content[key] = value;
-        }
-      }
-
-      if (hasBlocksData(properties)) {
-        this.setState({
-          visual: true,
-        });
-
-        const blocksFieldName = getBlocksFieldname(properties);
-        const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-        content[blocksFieldName] = properties[blocksFieldName]?.default || {};
-        content[blocksLayoutFieldname] = properties[blocksLayoutFieldname]
-          ?.default || { items: [] };
-
-        const blocksBehavior = properties[blocksFieldName]?.behavior || '';
-        this.setState({
-          readOnlyBehavior: !blocksBehavior.includes('generated')
-            ? blocksBehavior
-            : '',
-        });
-      } else {
-        this.setState({
-          visual: false,
-          readOnlyBehavior: '',
-        });
-      }
-
-      this.setState({
-        content: content,
-      });
-    }
-
-    // Schema updated
-    if (
-      this.props.schemaRequest.update.loading &&
-      nextProps.schemaRequest.update.loaded
-    ) {
-      this.props.getSchema(this.props.id);
-      toast.info(
-        <Toast
-          info
-          title={this.props.intl.formatMessage(messages.info)}
-          content={this.props.intl.formatMessage(messages.changesSaved)}
-        />,
-      );
-    }
-
-    // Blocks behavior disabled
-    if (
-      this.props.cpanelRequest.update.loading &&
-      nextProps.cpanelRequest.update.loaded
-    ) {
-      this.onEnableBlocks();
-    }
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {object} data Form data.
-   * @returns {undefined}
-   */
-  onSubmit(data) {
-    const schema = { properties: {} };
-    Object.keys(data)
-      .filter((k) => data[k])
-      .forEach((k) => (schema.properties[k] = { default: data[k] }));
-    this.props.updateSchema(this.props.id, schema);
-  }
-
-  /**
-   * Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    const url = getParentUrl(this.props.pathname);
-    this.props.history.push(getParentUrl(url));
-  }
-
-  /**
-   * Enable blocks handler
-   * @method onEnableBlocks
-   * @returns {undefined}
-   */
-  onEnableBlocks() {
-    const { properties = {} } = this.props.schema;
-    const blocksFieldName = getBlocksFieldname(properties);
-    const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-    const schema = {
-      fieldsets: [
-        {
-          id: 'layout',
-          title: 'Layout',
-          fields: ['blocks', 'blocks_layout'],
-        },
-      ],
-      properties: {
-        blocks: {
-          title: 'Blocks',
-          type: 'dict',
-          widget: 'json',
-          factory: 'JSONField',
-          default: properties[blocksFieldName]?.default || {},
-        },
-        blocks_layout: {
-          title: 'Blocks Layout',
-          type: 'dict',
-          widget: 'json',
-          factory: 'JSONField',
-          default: properties[blocksLayoutFieldname]?.default || { items: [] },
-        },
-      },
-    };
-    this.props.updateSchema(this.props.id, schema);
-  }
-
-  /**
-   * Disable Blocks behavior handler
-   * @method onDisableBlocksBehavior
-   * @returns {undefined}
-   */
-  onDisableBlocksBehavior() {
-    this.props.updateControlpanel(this.props.controlpanel['@id'], {
-      [this.state.readOnlyBehavior]: false,
-      'volto.blocks.editable.layout': true,
-    });
-  }
-
-  /**
-   * Enable Blocks behavior handler
-   * @method onEnableBlocksBehavior
-   * @returns {undefined}
-   */
-  onEnableBlocksBehavior() {
-    this.props.updateControlpanel(this.props.controlpanel['@id'], {
-      'volto.blocks.editable.layout': true,
-    });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    // Error
-    if (this.state.error) {
-      return <Error error={this.state.error} />;
-    }
-
-    if (!this.state.visual) {
-      // Still loading
-      if (!this.state.content) {
-        return <div />;
-      }
-
-      // Blocks are not enabled
-      return (
-        <>
-          <Segment
-            placeholder
-            id="page-controlpanel-layout"
-            className="ui container center aligned"
-          >
-            <div>
-              <FormattedMessage
-                id="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
-                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
-                values={{
-                  strong: (...chunks) => <strong>{chunks}</strong>,
-                  type: this.props?.controlpanel?.title || this.props.id,
-                }}
-              />
-            </div>
-            <div className="ui divider"></div>
-            <Button
-              primary
-              onClick={this.onEnableBlocksBehavior}
-              content={this.props.intl.formatMessage(messages.enable)}
-            />
-          </Segment>
-          <Portal
-            node={this.state.isClient && document.getElementById('toolbar')}
-          >
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link className="item" to="#" onClick={() => this.onCancel()}>
-                    <Icon
-                      name={backSVG}
-                      size="30px"
-                      className="contents circled"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />
-          </Portal>
-        </>
-      );
-    }
-
-    if (this.state.readOnlyBehavior) {
-      return (
-        <>
-          <Segment
-            placeholder
-            id="page-controlpanel-layout"
-            className="ui container center aligned"
-          >
-            <div>
-              <FormattedMessage
-                id="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
-                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
-                values={{
-                  strong: (...chunks) => <strong>{chunks}</strong>,
-                  type: this.props?.controlpanel?.title || this.props.id,
-                }}
-              />
-            </div>
-            <div className="ui divider"></div>
-            <Button
-              primary
-              onClick={this.onDisableBlocksBehavior}
-              content={this.props.intl.formatMessage(messages.enable)}
-            />
-          </Segment>
-          <Portal
-            node={this.state.isClient && document.getElementById('toolbar')}
-          >
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <>
-                  <Link className="item" to="#" onClick={() => this.onCancel()}>
-                    <Icon
-                      name={backSVG}
-                      size="30px"
-                      className="contents circled"
-                      title={this.props.intl.formatMessage(messages.back)}
-                    />
-                  </Link>
-                </>
-              }
-            />
-          </Portal>
-        </>
-      );
-    }
-
-    // Render layout editor
-    const blocksFieldName = getBlocksFieldname(
-      this.props.schema?.properties || {},
-    );
-    const blocksLayoutFieldname = getBlocksLayoutFieldname(
-      this.props.schema?.properties || {},
-    );
-    return (
-      <div id="page-controlpanel-layout">
-        <Form
-          isAdminForm
-          ref={this.form}
-          schema={{
-            fieldsets: [
-              {
-                id: 'layout',
-                title: 'Layout',
-                fields: [blocksFieldName, blocksLayoutFieldname],
-              },
-            ],
-            properties: {
-              ...this.props.schema.properties[blocksFieldName],
-              ...this.props.schema.properties[blocksLayoutFieldname],
-            },
-            required: [],
-          }}
-          formData={this.state.content}
-          onSubmit={this.onSubmit}
-          onCancel={this.onCancel}
-          pathname={this.props.pathname}
-          visual={this.state.visual}
-          hideActions
-        />
-        <Portal
-          node={this.state.isClient && document.getElementById('sidebar')}
-        >
-          <Sidebar settingsTab={true} documentTab={false} />
-        </Portal>
-        <Portal
-          node={this.state.isClient && document.getElementById('toolbar')}
-        >
-          <Toolbar
-            pathname={this.props.pathname}
-            hideDefaultViewButtons
-            inner={
-              <>
-                <Button
-                  id="toolbar-save"
-                  className="save"
-                  aria-label={this.props.intl.formatMessage(messages.save)}
-                  onClick={() => this.form.current.onSubmit()}
-                  disabled={this.props.schemaRequest.update.loading}
-                  loading={this.props.schemaRequest.update.loading}
-                >
-                  <Icon
-                    name={saveSVG}
-                    className="circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.save)}
-                  />
-                </Button>
-                <Button
-                  className="cancel"
-                  aria-label={this.props.intl.formatMessage(messages.cancel)}
-                  onClick={() => this.onCancel()}
-                >
-                  <Icon
-                    name={clearSVG}
-                    className="circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.cancel)}
-                  />
-                </Button>
-              </>
-            }
-          />
-        </Portal>
-      </div>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      schema: state.schema.schema,
-      schemaRequest: state.schema,
-      cpanelRequest: state.controlpanels,
-      controlpanel: state.controlpanels.controlpanel,
-      pathname: props.location.pathname,
-      id: nth(props.location.pathname.split('/'), -2),
-      parent: nth(props.location.pathname.split('/'), -3),
-    }),
-    { getSchema, updateSchema, getControlpanel, updateControlpanel },
-  ),
-)(ContentTypeLayout);