@plone/volto 14.2.1 → 14.4.0

package/src/components/manage/Contents/Contents.jsx

@@ -1491,236 +1491,241 @@ class Contents extends Component {
                           </Dropdown.Menu>
                         </Dropdown>
                       </Segment>
-                      <Table selectable compact singleLine attached>
-                        <Table.Header>
-                          <Table.Row>
-                            <Table.HeaderCell>
-                              <Dropdown
-                                item
-                                upward={false}
-                                className="sort-icon"
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.sort,
-                                )}
-                                icon={
-                                  <Icon
-                                    name={configurationSVG}
-                                    size="24px"
-                                    color="#826a6a"
-                                    className="configuration-svg"
-                                  />
-                                }
-                              >
-                                <Dropdown.Menu>
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.rearrangeBy,
-                                    )}
-                                  />
-                                  {map(
-                                    [
-                                      'id',
-                                      'sortable_title',
-                                      'EffectiveDate',
-                                      'CreationDate',
-                                      'ModificationDate',
-                                      'portal_type',
-                                    ],
-                                    (index) => (
-                                      <Dropdown.Item
-                                        key={index}
-                                        className={`sort_${index} icon-align`}
-                                      >
-                                        <Icon name={downKeySVG} size="24px" />
-                                        <FormattedMessage
-                                          id={Indexes[index].label}
-                                        />
-                                        <Dropdown.Menu>
-                                          <Dropdown.Item
-                                            onClick={this.onSortItems}
-                                            value={`${Indexes[index].sort_on}|ascending`}
-                                            className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
-                                          >
-                                            <Icon
-                                              name={sortDownSVG}
-                                              size="24px"
-                                            />{' '}
-                                            <FormattedMessage
-                                              id="Ascending"
-                                              defaultMessage="Ascending"
-                                            />
-                                          </Dropdown.Item>
-                                          <Dropdown.Item
-                                            onClick={this.onSortItems}
-                                            value={`${Indexes[index].sort_on}|descending`}
-                                            className={`sort_${Indexes[index].sort_on}_descending icon-align`}
-                                          >
-                                            <Icon
-                                              name={sortUpSVG}
-                                              size="24px"
-                                            />{' '}
-                                            <FormattedMessage
-                                              id="Descending"
-                                              defaultMessage="Descending"
-                                            />
-                                          </Dropdown.Item>
-                                        </Dropdown.Menu>
-                                      </Dropdown.Item>
-                                    ),
+                      <div className="contents-table-wrapper">
+                        <Table selectable compact singleLine attached>
+                          <Table.Header>
+                            <Table.Row>
+                              <Table.HeaderCell>
+                                <Dropdown
+                                  item
+                                  upward={false}
+                                  className="sort-icon"
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.sort,
                                   )}
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </Table.HeaderCell>
-                            <Table.HeaderCell>
-                              <Dropdown
-                                upward={false}
-                                trigger={
-                                  <Icon
-                                    name={
-                                      this.state.selected.length === 0
-                                        ? checkboxUncheckedSVG
-                                        : this.state.selected.length ===
-                                          this.state.items.length
-                                        ? checkboxCheckedSVG
-                                        : checkboxIndeterminateSVG
-                                    }
-                                    color={
-                                      this.state.selected.length > 0
-                                        ? '#007eb1'
-                                        : '#826a6a'
-                                    }
-                                    size="24px"
-                                  />
-                                }
-                                icon={null}
-                              >
-                                <Dropdown.Menu>
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.select,
-                                    )}
-                                  />
-                                  <Dropdown.Item onClick={this.onSelectAll}>
+                                  icon={
                                     <Icon
-                                      name={checkboxCheckedSVG}
-                                      color="#007eb1"
+                                      name={configurationSVG}
                                       size="24px"
-                                    />{' '}
-                                    <FormattedMessage
-                                      id="All"
-                                      defaultMessage="All"
+                                      color="#826a6a"
+                                      className="configuration-svg"
                                     />
-                                  </Dropdown.Item>
-                                  <Dropdown.Item onClick={this.onSelectNone}>
+                                  }
+                                >
+                                  <Dropdown.Menu>
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.rearrangeBy,
+                                      )}
+                                    />
+                                    {map(
+                                      [
+                                        'id',
+                                        'sortable_title',
+                                        'EffectiveDate',
+                                        'CreationDate',
+                                        'ModificationDate',
+                                        'portal_type',
+                                      ],
+                                      (index) => (
+                                        <Dropdown.Item
+                                          key={index}
+                                          className={`sort_${index} icon-align`}
+                                        >
+                                          <Icon name={downKeySVG} size="24px" />
+                                          <FormattedMessage
+                                            id={Indexes[index].label}
+                                          />
+                                          <Dropdown.Menu>
+                                            <Dropdown.Item
+                                              onClick={this.onSortItems}
+                                              value={`${Indexes[index].sort_on}|ascending`}
+                                              className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
+                                            >
+                                              <Icon
+                                                name={sortDownSVG}
+                                                size="24px"
+                                              />{' '}
+                                              <FormattedMessage
+                                                id="Ascending"
+                                                defaultMessage="Ascending"
+                                              />
+                                            </Dropdown.Item>
+                                            <Dropdown.Item
+                                              onClick={this.onSortItems}
+                                              value={`${Indexes[index].sort_on}|descending`}
+                                              className={`sort_${Indexes[index].sort_on}_descending icon-align`}
+                                            >
+                                              <Icon
+                                                name={sortUpSVG}
+                                                size="24px"
+                                              />{' '}
+                                              <FormattedMessage
+                                                id="Descending"
+                                                defaultMessage="Descending"
+                                              />
+                                            </Dropdown.Item>
+                                          </Dropdown.Menu>
+                                        </Dropdown.Item>
+                                      ),
+                                    )}
+                                  </Dropdown.Menu>
+                                </Dropdown>
+                              </Table.HeaderCell>
+                              <Table.HeaderCell>
+                                <Dropdown
+                                  upward={false}
+                                  trigger={
                                     <Icon
-                                      name={checkboxUncheckedSVG}
+                                      name={
+                                        this.state.selected.length === 0
+                                          ? checkboxUncheckedSVG
+                                          : this.state.selected.length ===
+                                            this.state.items.length
+                                          ? checkboxCheckedSVG
+                                          : checkboxIndeterminateSVG
+                                      }
+                                      color={
+                                        this.state.selected.length > 0
+                                          ? '#007eb1'
+                                          : '#826a6a'
+                                      }
                                       size="24px"
-                                    />{' '}
-                                    <FormattedMessage
-                                      id="None"
-                                      defaultMessage="None"
                                     />
-                                  </Dropdown.Item>
-                                  <Dropdown.Divider />
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.selected,
-                                      { count: this.state.selected.length },
-                                    )}
-                                  />
-                                  <Input
-                                    icon={<Icon name={zoomSVG} size="24px" />}
-                                    iconPosition="left"
-                                    className="search"
-                                    placeholder={this.props.intl.formatMessage(
-                                      messages.filter,
-                                    )}
-                                    onChange={this.onChangeSelected}
-                                    onClick={(e) => {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                    }}
-                                  />
-                                  <Dropdown.Menu scrolling>
-                                    {map(filteredItems, (item) => (
-                                      <Dropdown.Item
-                                        key={item}
-                                        value={item}
-                                        onClick={this.onDeselect}
-                                      >
-                                        <Icon
-                                          name={deleteSVG}
-                                          color="#e40166"
-                                          size="24px"
-                                        />{' '}
-                                        {this.getFieldById(item, 'title')}
-                                      </Dropdown.Item>
-                                    ))}
+                                  }
+                                  icon={null}
+                                >
+                                  <Dropdown.Menu>
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.select,
+                                      )}
+                                    />
+                                    <Dropdown.Item onClick={this.onSelectAll}>
+                                      <Icon
+                                        name={checkboxCheckedSVG}
+                                        color="#007eb1"
+                                        size="24px"
+                                      />{' '}
+                                      <FormattedMessage
+                                        id="All"
+                                        defaultMessage="All"
+                                      />
+                                    </Dropdown.Item>
+                                    <Dropdown.Item onClick={this.onSelectNone}>
+                                      <Icon
+                                        name={checkboxUncheckedSVG}
+                                        size="24px"
+                                      />{' '}
+                                      <FormattedMessage
+                                        id="None"
+                                        defaultMessage="None"
+                                      />
+                                    </Dropdown.Item>
+                                    <Dropdown.Divider />
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.selected,
+                                        { count: this.state.selected.length },
+                                      )}
+                                    />
+                                    <Input
+                                      icon={<Icon name={zoomSVG} size="24px" />}
+                                      iconPosition="left"
+                                      className="search"
+                                      placeholder={this.props.intl.formatMessage(
+                                        messages.filter,
+                                      )}
+                                      onChange={this.onChangeSelected}
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                      }}
+                                    />
+                                    <Dropdown.Menu scrolling>
+                                      {map(filteredItems, (item) => (
+                                        <Dropdown.Item
+                                          key={item}
+                                          value={item}
+                                          onClick={this.onDeselect}
+                                        >
+                                          <Icon
+                                            name={deleteSVG}
+                                            color="#e40166"
+                                            size="24px"
+                                          />{' '}
+                                          {this.getFieldById(item, 'title')}
+                                        </Dropdown.Item>
+                                      ))}
+                                    </Dropdown.Menu>
                                   </Dropdown.Menu>
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </Table.HeaderCell>
-                            <Table.HeaderCell
-                              width={Math.ceil(
-                                16 / this.state.index.selectedCount,
+                                </Dropdown>
+                              </Table.HeaderCell>
+                              <Table.HeaderCell
+                                width={Math.ceil(
+                                  16 / this.state.index.selectedCount,
+                                )}
+                              >
+                                <FormattedMessage
+                                  id="Title"
+                                  defaultMessage="Title"
+                                />
+                              </Table.HeaderCell>
+                              {map(
+                                this.state.index.order,
+                                (index, order) =>
+                                  this.state.index.values[index].selected && (
+                                    <ContentsIndexHeader
+                                      key={index}
+                                      width={Math.ceil(
+                                        16 / this.state.index.selectedCount,
+                                      )}
+                                      label={
+                                        this.state.index.values[index].label
+                                      }
+                                      order={order}
+                                      onOrderIndex={this.onOrderIndex}
+                                    />
+                                  ),
                               )}
-                            >
-                              <FormattedMessage
-                                id="Title"
-                                defaultMessage="Title"
-                              />
-                            </Table.HeaderCell>
-                            {map(
-                              this.state.index.order,
-                              (index, order) =>
-                                this.state.index.values[index].selected && (
-                                  <ContentsIndexHeader
-                                    key={index}
-                                    width={Math.ceil(
-                                      16 / this.state.index.selectedCount,
-                                    )}
-                                    label={this.state.index.values[index].label}
-                                    order={order}
-                                    onOrderIndex={this.onOrderIndex}
-                                  />
-                                ),
-                            )}
-                            <Table.HeaderCell textAlign="right">
-                              <FormattedMessage
-                                id="Actions"
-                                defaultMessage="Actions"
+                              <Table.HeaderCell textAlign="right">
+                                <FormattedMessage
+                                  id="Actions"
+                                  defaultMessage="Actions"
+                                />
+                              </Table.HeaderCell>
+                            </Table.Row>
+                          </Table.Header>
+                          <Table.Body>
+                            {this.state.items.map((item, order) => (
+                              <ContentsItem
+                                key={item['@id']}
+                                item={item}
+                                order={order}
+                                selected={
+                                  indexOf(this.state.selected, item['@id']) !==
+                                  -1
+                                }
+                                onClick={this.onSelect}
+                                indexes={filter(
+                                  map(this.state.index.order, (index) => ({
+                                    id: index,
+                                    type: this.state.index.values[index].type,
+                                  })),
+                                  (index) =>
+                                    this.state.index.values[index.id].selected,
+                                )}
+                                onCut={this.cut}
+                                onCopy={this.copy}
+                                onDelete={this.delete}
+                                onOrderItem={this.onOrderItem}
+                                onMoveToTop={this.onMoveToTop}
+                                onMoveToBottom={this.onMoveToBottom}
                               />
-                            </Table.HeaderCell>
-                          </Table.Row>
-                        </Table.Header>
-                        <Table.Body>
-                          {this.state.items.map((item, order) => (
-                            <ContentsItem
-                              key={item['@id']}
-                              item={item}
-                              order={order}
-                              selected={
-                                indexOf(this.state.selected, item['@id']) !== -1
-                              }
-                              onClick={this.onSelect}
-                              indexes={filter(
-                                map(this.state.index.order, (index) => ({
-                                  id: index,
-                                  type: this.state.index.values[index].type,
-                                })),
-                                (index) =>
-                                  this.state.index.values[index.id].selected,
-                              )}
-                              onCut={this.cut}
-                              onCopy={this.copy}
-                              onDelete={this.delete}
-                              onOrderItem={this.onOrderItem}
-                              onMoveToTop={this.onMoveToTop}
-                              onMoveToBottom={this.onMoveToBottom}
-                            />
-                          ))}
-                        </Table.Body>
-                      </Table>
+                            ))}
+                          </Table.Body>
+                        </Table>
+                      </div>
 
                       <div className="contents-pagination">
                         <Pagination

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -148,8 +148,8 @@ export class DatetimeWidgetComponent extends Component {
     const moment = this.props.moment.default;
     if (time) {
       const base = (this.getInternalValue() || moment()).set({
-        hours: time.hours(),
-        minutes: time.minutes(),
+        hours: time?.hours() ?? 0,
+        minutes: time?.minutes() ?? 0,
         seconds: 0,
       });
       const dateValue = base.toISOString();

package/src/components/manage/Widgets/FormFieldWrapper.jsx

@@ -18,6 +18,10 @@ const messages = defineMessages({
     id: 'Delete',
     defaultMessage: 'Delete',
   },
+  language_independent: {
+    id: 'Language independent field.',
+    defaultMessage: 'Language independent field.',
+  },
 });
 /**
  * FormFieldWrapper component class.
@@ -85,6 +89,7 @@ class FormFieldWrapper extends Component {
       onDelete,
       intl,
       noForInFieldLabel,
+      multilingual_options,
     } = this.props;
     const wdg = (
       <>
@@ -107,6 +112,9 @@ class FormFieldWrapper extends Component {
           description ? 'help' : '',
           className,
           `field-wrapper-${id}`,
+          multilingual_options?.language_independent
+            ? 'language-independent-field'
+            : null,
         )}
       >
         <Grid>
@@ -160,7 +168,12 @@ class FormFieldWrapper extends Component {
           {description && (
             <Grid.Row stretched>
               <Grid.Column stretched width="12">
-                <p className="help">{description}</p>
+                <p className="help">
+                  {this.props.multilingual_options
+                    ? `${intl.formatMessage(messages.language_independent)} `
+                    : null}
+                  {description}
+                </p>
               </Grid.Column>
             </Grid.Row>
           )}

package/src/components/theme/Anontools/Anontools.jsx

@@ -53,7 +53,7 @@ export class Anontools extends Component {
             <Link
               aria-label="login"
               to={`/login${
-                this.props.content
+                this.props.content?.['@id']
                   ? `?return_url=${this.props.content['@id'].replace(
                       settings.apiPath,
                       '',

package/src/express-middleware/files.js

@@ -4,7 +4,6 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
 function fileMiddleware(req, res, next) {
-  const { errorHandler } = req.app.locals;
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -14,8 +13,8 @@ function fileMiddleware(req, res, next) {
         }
       });
       res.send(resource.body);
-    }, errorHandler)
-    .catch(errorHandler);
+    })
+    .catch(next);
 }
 
 export default function () {

package/src/express-middleware/images.js

@@ -4,7 +4,6 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
 function imageMiddleware(req, res, next) {
-  const { errorHandler } = req.app.locals;
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -13,10 +12,9 @@ function imageMiddleware(req, res, next) {
           res.set(header, resource.headers[header]);
         }
       });
-
       res.send(resource.body);
-    }, errorHandler)
-    .catch(errorHandler);
+    })
+    .catch(next);
 }
 
 export default function () {

package/src/helpers/Api/APIResourceWithAuth.js

@@ -34,11 +34,5 @@ export const getAPIResourceWithAuth = (req) =>
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }
-    request.end((error, res = {}) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve(res);
-      }
-    });
+    request.then(resolve).catch(reject);
   });

package/src/helpers/Content/Content.js

@@ -63,3 +63,19 @@ export function getContentIcon(type, isFolderish) {
   if (type in contentIcons) return contentIcons[type];
   return isFolderish ? contentIcons.Folder : contentIcons.File;
 }
+
+/**
+ * Get the language independent fields presents in a schema.
+ * @description Configurable in config
+ * @function getLanguageIndependentFields
+ * @param {string} schema content type JSON Schema serialization
+ * @returns {array} List of language independent fields
+ */
+export function getLanguageIndependentFields(schema) {
+  const { properties } = schema;
+  return Object.keys(properties).filter(
+    (field) =>
+      Object.keys(properties[field]).includes('multilingual_options') &&
+      properties[field]['multilingual_options']?.['language_independent'],
+  );
+}

package/src/helpers/Content/Content.test.js

@@ -1,4 +1,8 @@
-import { nestContent, getContentIcon } from './Content';
+import {
+  nestContent,
+  getContentIcon,
+  getLanguageIndependentFields,
+} from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import calendarSVG from '@plone/volto/icons/calendar.svg';
@@ -77,4 +81,19 @@ describe('Content', () => {
       expect(getContentIcon('Custom', false)).toBe(fileSVG);
     });
   });
+
+  describe('getLanguageIndependentFields', () => {
+    it('returns the language independenr field', () => {
+      const schema = {
+        properties: {
+          lif: {
+            multilingual_options: {
+              language_independent: true,
+            },
+          },
+        },
+      };
+      expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
+    });
+  });
 });

package/src/helpers/FormValidation/FormValidation.js

@@ -61,7 +61,7 @@ const widgetValidation = {
   },
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
-      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
+      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
       const isValid = urlRegex.test(urlValue);
       return !isValid ? intlFunc(messages.isValidURL) : null;
     },

package/src/helpers/index.js

@@ -33,6 +33,7 @@ export {
   nestContent,
   getLayoutFieldname,
   getContentIcon,
+  getLanguageIndependentFields,
 } from '@plone/volto/helpers/Content/Content';
 export {
   addBlock,