@eeacms/volto-eea-website-theme 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -4,7 +4,13 @@ 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.0.0](https://github.com/eea/volto-eea-website-theme/compare/0.7.7...1.0.0) - 28 October 2022
+### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- refactor(customizations): Upgrade to volto 16.alpha.45 [Alin Voinea - [`930b77f`](https://github.com/eea/volto-eea-website-theme/commit/930b77fa6113d423a82704883a349bc1f919bb85)]
+
+## [1.0.0](https://github.com/eea/volto-eea-website-theme/compare/0.7.7...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
 

package/package.json

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

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

@@ -74,6 +74,7 @@ class Form extends Component {
     onCancel: PropTypes.func,
     submitLabel: PropTypes.string,
     resetAfterSubmit: PropTypes.bool,
+    resetOnCancel: PropTypes.bool,
     isEditForm: PropTypes.bool,
     isAdminForm: PropTypes.bool,
     title: PropTypes.string,
@@ -105,6 +106,7 @@ class Form extends Component {
     onCancel: null,
     submitLabel: null,
     resetAfterSubmit: false,
+    resetOnCancel: false,
     isEditForm: false,
     isAdminForm: false,
     title: null,
@@ -399,7 +401,7 @@ class Form extends Component {
     if (event) {
       event.preventDefault();
     }
-    if (this.props.resetAfterSubmit) {
+    if (this.props.resetOnCancel || this.props.resetAfterSubmit) {
       this.setState({
         formData: this.props.formData,
       });
@@ -418,11 +420,13 @@ class Form extends Component {
       event.preventDefault();
     }
 
-    const errors = FormValidation.validateFieldsPerFieldset({
-      schema: this.props.schema,
-      formData: this.state.formData,
-      formatMessage: this.props.intl.formatMessage,
-    });
+    const errors = this.props.schema
+      ? FormValidation.validateFieldsPerFieldset({
+          schema: this.props.schema,
+          formData: this.state.formData,
+          formatMessage: this.props.intl.formatMessage,
+        })
+      : {};
 
     if (keys(errors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
@@ -653,6 +657,11 @@ class Form extends Component {
                             {this.props.title}
                           </Segment>
                         ),
+                        item.description && (
+                          <Message attached="bottom">
+                            {item.description}
+                          </Message>
+                        ),
                         ...map(item.fields, (field, index) => (
                           <Field
                             {...schema.properties[field]}

package/src/customizations/volto/components/manage/Form/ModalForm.jsx

@@ -94,6 +94,7 @@ class ModalForm extends Component {
     loadingMessage: null,
     submitError: null,
     className: null,
+    dimmer: null,
   };
 
   /**
@@ -224,7 +225,11 @@ class ModalForm extends Component {
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
-      <Modal open={this.props.open} className={this.props.className}>
+      <Modal
+        dimmer={this.props.dimmer}
+        open={this.props.open}
+        className={this.props.className}
+      >
         <Header>{this.props.title}</Header>
         <Dimmer active={this.props.loading}>
           <Loader>

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

@@ -4,6 +4,7 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Plug, Pluggable } from '@plone/volto/components/manage/Pluggable';
 import { Helmet } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -291,146 +292,162 @@ class SharingComponent extends Component {
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Segment className="primary">
-            <FormattedMessage
-              id="Sharing for {title}"
-              defaultMessage="Sharing for {title}"
-              values={{ title: <q>{this.props.title}</q> }}
-            />
-          </Segment>
-          <Segment secondary>
-            <FormattedMessage
-              id="You can control who can view and edit your item using the list below."
-              defaultMessage="You can control who can view and edit your item using the list below."
-            />
-          </Segment>
-          <Segment>
-            <Form onSubmit={this.onSearch}>
-              <Form.Field>
-                <Input
-                  name="SearchableText"
-                  action={{ icon: 'search' }}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.searchForUserOrGroup,
-                  )}
-                  onChange={this.onChangeSearch}
-                />
-              </Form.Field>
-            </Form>
-          </Segment>
-          <Form onSubmit={this.onSubmit}>
-            <Table celled padded striped attached>
-              <Table.Header>
-                <Table.Row>
-                  <Table.HeaderCell>
-                    <FormattedMessage id="Name" defaultMessage="Name" />
-                  </Table.HeaderCell>
-                  {this.props.available_roles?.map((role) => (
-                    <Table.HeaderCell key={role.id}>
-                      {role.title}
+          <Pluggable name="sharing-component" />
+          <Plug pluggable="sharing-component" id="sharing-component-title">
+            <Segment className="primary">
+              <FormattedMessage
+                id="Sharing for {title}"
+                defaultMessage="Sharing for {title}"
+                values={{ title: <q>{this.props.title}</q> }}
+              />
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-description"
+          >
+            <Segment secondary>
+              <FormattedMessage
+                id="You can control who can view and edit your item using the list below."
+                defaultMessage="You can control who can view and edit your item using the list below."
+              />
+            </Segment>
+          </Plug>
+          <Plug pluggable="sharing-component" id="sharing-component-search">
+            <Segment>
+              <Form onSubmit={this.onSearch}>
+                <Form.Field>
+                  <Input
+                    name="SearchableText"
+                    action={{ icon: 'search' }}
+                    placeholder={this.props.intl.formatMessage(
+                      messages.searchForUserOrGroup,
+                    )}
+                    onChange={this.onChangeSearch}
+                  />
+                </Form.Field>
+              </Form>
+            </Segment>
+          </Plug>
+          <Plug
+            pluggable="sharing-component"
+            id="sharing-component-form"
+            dependencies={[this.state.entries, this.props.available_roles]}
+          >
+            <Form onSubmit={this.onSubmit}>
+              <Table celled padded striped attached>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell>
+                      <FormattedMessage id="Name" defaultMessage="Name" />
                     </Table.HeaderCell>
-                  ))}
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {this.state.entries?.map((entry) => (
-                  <Table.Row key={entry.id}>
-                    <Table.Cell>
-                      <IconOld
-                        name={entry.type === 'user' ? 'user' : 'users'}
-                        title={
-                          entry.type === 'user'
-                            ? this.props.intl.formatMessage(messages.user)
-                            : this.props.intl.formatMessage(messages.group)
-                        }
-                      />{' '}
-                      {entry.title}
-                      {entry.login && ` (${entry.login})`}
-                    </Table.Cell>
                     {this.props.available_roles?.map((role) => (
-                      <Table.Cell key={role.id}>
-                        {entry.roles[role.id] === 'global' && (
-                          <IconOld
-                            name="check circle outline"
-                            title={this.props.intl.formatMessage(
-                              messages.globalRole,
-                            )}
-                            color="blue"
-                          />
-                        )}
-                        {entry.roles[role.id] === 'acquired' && (
-                          <IconOld
-                            name="check circle outline"
-                            color="green"
-                            title={this.props.intl.formatMessage(
-                              messages.inheritedValue,
-                            )}
-                          />
-                        )}
-                        {typeof entry.roles[role.id] === 'boolean' && (
-                          <Checkbox
-                            onChange={this.onChange}
-                            value={`${entry.id}:${role.id}`}
-                            checked={entry.roles[role.id]}
-                            disabled={entry.login === this.props.login}
-                          />
-                        )}
-                      </Table.Cell>
+                      <Table.HeaderCell key={role.id}>
+                        {role.title}
+                      </Table.HeaderCell>
                     ))}
                   </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-            <Segment attached>
-              <Form.Field>
-                <Checkbox
-                  checked={this.state.inherit}
-                  onChange={this.onToggleInherit}
-                  label={this.props.intl.formatMessage(messages.inherit)}
-                />
-              </Form.Field>
-              <p className="help">
-                <FormattedMessage
-                  id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
-                  values={{
-                    inherited: (
-                      <IconOld name="check circle outline" color="green" />
-                    ),
-                    global: (
-                      <IconOld name="check circle outline" color="blue" />
-                    ),
-                  }}
-                />
-              </p>
-            </Segment>
-            <Segment className="actions" attached clearing>
-              <Button
-                basic
-                icon
-                primary
-                floated="right"
-                type="submit"
-                aria-label={this.props.intl.formatMessage(messages.save)}
-                title={this.props.intl.formatMessage(messages.save)}
-                loading={this.props.updateRequest.loading}
-                onClick={this.onSubmit}
-              >
-                <Icon className="circled" name={aheadSVG} size="30px" />
-              </Button>
-              <Button
-                basic
-                icon
-                secondary
-                aria-label={this.props.intl.formatMessage(messages.cancel)}
-                title={this.props.intl.formatMessage(messages.cancel)}
-                floated="right"
-                onClick={this.onCancel}
-              >
-                <Icon className="circled" name={clearSVG} size="30px" />
-              </Button>
-            </Segment>
-          </Form>
+                </Table.Header>
+                <Table.Body>
+                  {this.state.entries?.map((entry) => (
+                    <Table.Row key={entry.id}>
+                      <Table.Cell>
+                        <IconOld
+                          name={entry.type === 'user' ? 'user' : 'users'}
+                          title={
+                            entry.type === 'user'
+                              ? this.props.intl.formatMessage(messages.user)
+                              : this.props.intl.formatMessage(messages.group)
+                          }
+                        />{' '}
+                        {entry.title}
+                        {entry.login && ` (${entry.login})`}
+                      </Table.Cell>
+                      {this.props.available_roles?.map((role) => (
+                        <Table.Cell key={role.id}>
+                          {entry.roles[role.id] === 'global' && (
+                            <IconOld
+                              name="check circle outline"
+                              title={this.props.intl.formatMessage(
+                                messages.globalRole,
+                              )}
+                              color="blue"
+                            />
+                          )}
+                          {entry.roles[role.id] === 'acquired' && (
+                            <IconOld
+                              name="check circle outline"
+                              color="green"
+                              title={this.props.intl.formatMessage(
+                                messages.inheritedValue,
+                              )}
+                            />
+                          )}
+                          {typeof entry.roles[role.id] === 'boolean' && (
+                            <Checkbox
+                              onChange={this.onChange}
+                              value={`${entry.id}:${role.id}`}
+                              checked={entry.roles[role.id]}
+                              disabled={entry.login === this.props.login}
+                            />
+                          )}
+                        </Table.Cell>
+                      ))}
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+              <Segment attached>
+                <Form.Field>
+                  <Checkbox
+                    checked={this.state.inherit}
+                    onChange={this.onToggleInherit}
+                    label={this.props.intl.formatMessage(messages.inherit)}
+                  />
+                </Form.Field>
+                <p className="help">
+                  <FormattedMessage
+                    id="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    defaultMessage="By default, permissions from the container of this item are inherited. If you disable this, only the explicitly defined sharing permissions will be valid. In the overview, the symbol {inherited} indicates an inherited value. Similarly, the symbol {global} indicates a global role, which is managed by the site administrator."
+                    values={{
+                      inherited: (
+                        <IconOld name="check circle outline" color="green" />
+                      ),
+                      global: (
+                        <IconOld name="check circle outline" color="blue" />
+                      ),
+                    }}
+                  />
+                </p>
+              </Segment>
+              <Segment className="actions" attached clearing>
+                <Button
+                  basic
+                  icon
+                  primary
+                  floated="right"
+                  type="submit"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  title={this.props.intl.formatMessage(messages.save)}
+                  loading={this.props.updateRequest.loading}
+                  onClick={this.onSubmit}
+                >
+                  <Icon className="circled" name={aheadSVG} size="30px" />
+                </Button>
+                <Button
+                  basic
+                  icon
+                  secondary
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  title={this.props.intl.formatMessage(messages.cancel)}
+                  floated="right"
+                  onClick={this.onCancel}
+                >
+                  <Icon className="circled" name={clearSVG} size="30px" />
+                </Button>
+              </Segment>
+            </Form>
+          </Plug>
         </Segment.Group>
         {this.state.isClient && (
           <Portal node={document.getElementById('toolbar')}>

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

@@ -65,6 +65,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     description: PropTypes.string,
     mode: PropTypes.string, // link, image, multiple
     return: PropTypes.string, // single, multiple
+    initialPath: PropTypes.string,
     required: PropTypes.bool,
     error: PropTypes.arrayOf(PropTypes.string),
     value: PropTypes.oneOfType([
@@ -74,6 +75,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     onChange: PropTypes.func.isRequired,
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
+    placeholder: PropTypes.string,
   };
 
   /**
@@ -88,6 +90,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     value: [],
     mode: 'multiple',
     return: 'multiple',
+    initialPath: '',
     allowExternals: false,
   };
 
@@ -148,7 +151,10 @@ export class ObjectBrowserWidgetComponent extends Component {
   };
 
   onChange = (item) => {
-    let value = this.props.mode === 'multiple' ? [...this.props.value] : [];
+    let value =
+      this.props.mode === 'multiple' && this.props.value
+        ? [...this.props.value]
+        : [];
     value = value.filter((item) => item != null);
     const maxSize =
       this.props.widgetOptions?.pattern_options?.maximumSelectionSize || -1;
@@ -239,7 +245,7 @@ export class ObjectBrowserWidgetComponent extends Component {
             } else {
               this.props.onChange(this.props.id, [
                 {
-                  '@id': normalizeUrl(link),
+                  '@id': flattenToAppURL(link),
                   title: removeProtocol(link),
                 },
               ]);
@@ -273,15 +279,17 @@ export class ObjectBrowserWidgetComponent extends Component {
     ev.preventDefault();
     this.props.openObjectBrowser({
       mode: this.props.mode,
-      currentPath: this.props.location.pathname,
+      currentPath: this.props.initialPath || this.props.location.pathname,
       propDataName: 'value',
       onSelectItem: (url, item) => {
         this.onChange(item);
       },
-      selectableTypes: this.props.widgetOptions?.pattern_options
-        ?.selectableTypes,
-      maximumSelectionSize: this.props.widgetOptions?.pattern_options
-        ?.maximumSelectionSize,
+      selectableTypes:
+        this.props.widgetOptions?.pattern_options?.selectableTypes ||
+        this.props.selectableTypes,
+      maximumSelectionSize:
+        this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
+        this.props.maximumSelectionSize,
     });
   };
 
@@ -349,7 +357,8 @@ export class ObjectBrowserWidgetComponent extends Component {
 
             {items.length === 0 && this.props.mode === 'multiple' && (
               <div className="placeholder" ref={this.placeholderRef}>
-                {this.props.intl.formatMessage(messages.placeholder)}
+                {this.props.placeholder ??
+                  this.props.intl.formatMessage(messages.placeholder)}
               </div>
             )}
             {this.props.allowExternals &&
@@ -359,9 +368,10 @@ export class ObjectBrowserWidgetComponent extends Component {
                   onKeyDown={this.onKeyDownManualLink}
                   onChange={this.onManualLinkInput}
                   value={this.state.manualLinkInput}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.placeholder,
-                  )}
+                  placeholder={
+                    this.props.placeholder ??
+                    this.props.intl.formatMessage(messages.placeholder)
+                  }
                 />
               )}
           </div>