@eeacms/volto-cca-policy 0.3.104 → 0.3.106

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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).
 
+### [0.3.106](https://github.com/eea/volto-cca-policy/compare/0.3.105...0.3.106) - 20 March 2026
+
+#### :rocket: New Features
+
+- feat(teaser): preserve query strings in CardTitle.jsx [kreafox - [`a0b70ea`](https://github.com/eea/volto-cca-policy/commit/a0b70ea9055a8b1d3a6d7c93aedad6e5b36bf3a1)]
+
+#### :hammer_and_wrench: Others
+
+- core: add CardTitle.jsx for customization [kreafox - [`c6b34db`](https://github.com/eea/volto-cca-policy/commit/c6b34db474de98f5a04e4d69a5b754c508c85b2d)]
+### [0.3.105](https://github.com/eea/volto-cca-policy/compare/0.3.104...0.3.105) - 19 March 2026
+
+#### :rocket: New Features
+
+- feat(teaser): preserve query strings in SimpleItemTemplates.jsx [kreafox - [`dec6b82`](https://github.com/eea/volto-cca-policy/commit/dec6b82b60e50e881a352e910227ef32ef2812a2)]
+- feat(teaser): modified ObjectBrowserWidget to show links with query strings for manual links [kreafox - [`a1141ee`](https://github.com/eea/volto-cca-policy/commit/a1141eec28f6731b715f3cece352df11e3cf3ee6)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c93a86b`](https://github.com/eea/volto-cca-policy/commit/c93a86be5bb37bc5b736d574baac0b6bc489fb2c)]
+
+#### :hammer_and_wrench: Others
+
+- core: added original SimpleItemTemplates.jsx for customization [kreafox - [`d707919`](https://github.com/eea/volto-cca-policy/commit/d7079194a82a4a91b9d91345c765156360706608)]
+- core: added ObjectBrowserWidget.jsx customization [kreafox - [`50cd014`](https://github.com/eea/volto-cca-policy/commit/50cd014f4ca7bfb070b5760cbf7186388bf9ab6d)]
 ### [0.3.104](https://github.com/eea/volto-cca-policy/compare/0.3.103...0.3.104) - 5 March 2026
 
 #### :rocket: Dependency updates

package/package.json

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

package/src/customizations/@eeacms/volto-listing-block/README.md

@@ -0,0 +1 @@
+Customized SimpleItemTemplates.jsx and CardTitle.jsx to preserve query strings. (refs #299560)

package/src/customizations/@eeacms/volto-listing-block/blocks/Listing/item-templates/SimpleItemTemplates.jsx

@@ -0,0 +1,62 @@
+import cx from 'classnames';
+import { ConditionalLink } from '@plone/volto/components';
+import { getBaseUrl } from '@plone/volto/helpers';
+import { getVoltoStyles } from '@eeacms/volto-listing-block/schema-utils';
+
+const getStyles = (props) => {
+  const { itemModel = {} } = props;
+  const res = {};
+  if (itemModel.maxDescription) {
+    res[`max-${itemModel.maxDescription}-lines`] = true;
+  }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
+  return res;
+};
+
+const getItemHref = (item) => {
+  const preservedHref = item?.linkHref || item?.linkWithHash;
+  if (preservedHref) {
+    return preservedHref;
+  }
+  return item?.['@id'] ? getBaseUrl(item['@id']) : undefined;
+};
+
+const BasicItem = (props) => {
+  const { item, className, isEditMode = false } = props;
+  const { hasMetaType } = props.itemModel;
+  const styles = getStyles(props);
+  const href = getItemHref(item);
+
+  return (
+    <div
+      className={cx(
+        'u-item listing-item simple-listing-item',
+        getVoltoStyles(styles),
+        className,
+      )}
+    >
+      <div className="wrapper">
+        <div className="slot-top">
+          <ConditionalLink to={href} condition={!isEditMode && !!href}>
+            <div className="listing-body">
+              <p className="listing-header">
+                {item.title ? item.title : item.id}
+              </p>
+            </div>
+          </ConditionalLink>
+        </div>
+        <div className="simple-item-meta">
+          {hasMetaType && (
+            <span className="text-left">{item['type_title']}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SimpleItemLayout = (props) => {
+  return <BasicItem {...props} />;
+};

package/src/customizations/@eeacms/volto-listing-block/components/UniversalCard/fragments/CardTitle.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Card as UiCard } from 'semantic-ui-react';
+import { ConditionalLink } from '@plone/volto/components';
+
+const getItemHref = (item) =>
+  item?.linkHref || item?.linkWithHash || item?.['@id'];
+
+const CardTitle = (props) => {
+  const { item, isEditMode, itemModel } = props;
+  const { title, Title } = item;
+  const t = title || Title;
+
+  const href = getItemHref(item);
+
+  return t && !itemModel?.titleOnImage ? (
+    <UiCard.Header>
+      <ConditionalLink
+        className="header-link"
+        to={href}
+        condition={!isEditMode && itemModel?.hasLink && !!href}
+      >
+        {t}
+      </ConditionalLink>
+    </UiCard.Header>
+  ) : null;
+};
+
+export default CardTitle;

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

@@ -0,0 +1,453 @@
+/**
+ * ObjectBrowserWidget component.
+ * @module components/manage/Widgets/ObjectBrowserWidget
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { compact, isArray, isEmpty, remove } from 'lodash';
+import { connect } from 'react-redux';
+import { Label, Popup, Button } from 'semantic-ui-react';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  isUrl,
+  normalizeUrl,
+  removeProtocol,
+} from '@plone/volto/helpers/Url/Url';
+import { searchContent } from '@plone/volto/actions/search/search';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import { defineMessages, injectIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import homeSVG from '@plone/volto/icons/home.svg';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+import blankSVG from '@plone/volto/icons/blank.svg';
+import { withRouter } from 'react-router';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'No items selected',
+    defaultMessage: 'No items selected',
+  },
+  edit: {
+    id: 'Edit',
+    defaultMessage: 'Edit',
+  },
+  delete: {
+    id: 'Delete',
+    defaultMessage: 'Delete',
+  },
+  openObjectBrowser: {
+    id: 'Open object browser',
+    defaultMessage: 'Open object browser',
+  },
+});
+
+/**
+ * ObjectBrowserWidget component class.
+ * @class ObjectBrowserWidget
+ * @extends Component
+ */
+export class ObjectBrowserWidgetComponent extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    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([
+      PropTypes.arrayOf(PropTypes.object),
+      PropTypes.object,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    openObjectBrowser: PropTypes.func.isRequired,
+    allowExternals: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    error: [],
+    value: [],
+    mode: 'multiple',
+    return: 'multiple',
+    initialPath: '',
+    allowExternals: false,
+  };
+
+  state = {
+    manualLinkInput: '',
+    validURL: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.selectedItemsRef = React.createRef();
+    this.placeholderRef = React.createRef();
+  }
+  renderLabel(item) {
+    // Prefer fully preserved href if present
+    const href = item.linkHref || item.linkWithHash || item['@id'];
+
+    return (
+      <Popup
+        key={href}
+        content={
+          <div style={{ display: 'flex' }}>
+            {isInternalURL(href) ? (
+              <Icon name={homeSVG} size="18px" />
+            ) : (
+              <Icon name={blankSVG} size="18px" />
+            )}
+            &nbsp;
+            {href}
+          </div>
+        }
+        trigger={
+          <Label>
+            <div className="item-title">{item.title}</div>
+            <div>
+              {this.props.mode === 'multiple' && (
+                <Icon
+                  name={clearSVG}
+                  size="12px"
+                  className="right"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    this.removeItem(item);
+                  }}
+                />
+              )}
+            </div>
+          </Label>
+        }
+      />
+    );
+  }
+
+  removeItem = (item) => {
+    let value = [...this.props.value];
+    remove(value, function (_item) {
+      return _item['@id'] === item['@id'];
+    });
+    this.props.onChange(this.props.id, value);
+  };
+
+  onChange = (item) => {
+    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;
+    if (maxSize === 1 && value.length === 1) {
+      value = []; //enable replace of selected item with another value, if maxsize is 1
+    }
+    let exists = false;
+    let index = -1;
+
+    value.forEach((_item, _index) => {
+      if (flattenToAppURL(_item['@id']) === flattenToAppURL(item['@id'])) {
+        exists = true;
+        index = _index;
+      }
+    });
+    //find(value, {
+    //   '@id': flattenToAppURL(item['@id']),
+    // });
+    if (!exists) {
+      // add item
+      // Check if we want to filter the attributes of the selected item
+      let resultantItem = item;
+      if (this.props.selectedItemAttrs) {
+        const allowedItemKeys = [
+          ...this.props.selectedItemAttrs,
+          // Add the required attributes for the widget to work
+          '@id',
+          'linkHref', // add linkHref to the allowed attributes
+          'linkWithHash', // add linkWithHash to the allowed attributes
+          'title',
+        ];
+        resultantItem = Object.keys(item)
+          .filter((key) => allowedItemKeys.includes(key))
+          .reduce((obj, key) => {
+            obj[key] = item[key];
+            return obj;
+          }, {});
+      }
+      // Add required @id field, just in case
+      resultantItem = { ...resultantItem, '@id': item['@id'] };
+      value.push(resultantItem);
+      if (this.props.return === 'single') {
+        this.props.onChange(this.props.id, value[0]);
+      } else {
+        this.props.onChange(this.props.id, value);
+      }
+    } else {
+      //remove item
+      value.splice(index, 1);
+      this.props.onChange(this.props.id, value);
+    }
+  };
+
+  onManualLinkInput = (e) => {
+    this.setState({ manualLinkInput: e.target.value });
+    this.setState({
+      validURL: this.validateManualLink(e.target.value),
+    });
+  };
+
+  validateManualLink = (url) => {
+    if (this.props.allowExternals) {
+      return isUrl(url);
+    } else {
+      return isInternalURL(url);
+    }
+  };
+
+  hasQueryOrHash = (url) => {
+    return url.includes('?') || url.includes('#');
+  };
+
+  /**
+   * Returns the clean path used to resolve a Plone object,
+   * stripping query string and hash fragment.
+   */
+  getLookupPathFromUrl = (url) => {
+    return url.split('?')[0].split('#')[0];
+  };
+
+  onSubmitManualLink = () => {
+    if (!this.validateManualLink(this.state.manualLinkInput)) {
+      return;
+    }
+
+    if (isInternalURL(this.state.manualLinkInput)) {
+      const originalUrl = this.state.manualLinkInput;
+      const lookupPath = this.getLookupPathFromUrl(originalUrl);
+      const relativeLink = flattenToAppURL(lookupPath);
+      const shouldPreserveOriginal = this.hasQueryOrHash(originalUrl);
+
+      this.props
+        .searchContent(
+          '/',
+          {
+            'path.query': relativeLink,
+            'path.depth': '0',
+            sort_on: 'getObjPositionInParent',
+            metadata_fields: '_all',
+            b_size: 1000,
+          },
+          `${this.props.block}-${this.props.mode}`,
+        )
+        .then((resp) => {
+          if (resp.items?.length > 0) {
+            const resolvedItem = {
+              ...resp.items[0],
+              ...(shouldPreserveOriginal ? { linkHref: originalUrl } : {}),
+            };
+            this.onChange(resolvedItem);
+          } else {
+            this.props.onChange(this.props.id, [
+              {
+                '@id': relativeLink,
+                ...(shouldPreserveOriginal ? { linkHref: originalUrl } : {}),
+                title: removeProtocol(originalUrl),
+              },
+            ]);
+          }
+        });
+    } else {
+      this.props.onChange(this.props.id, [
+        {
+          '@id': normalizeUrl(this.state.manualLinkInput),
+          title: removeProtocol(this.state.manualLinkInput),
+        },
+      ]);
+    }
+
+    this.setState({ validURL: true, manualLinkInput: '' });
+  };
+
+  onKeyDownManualLink = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.onSubmitManualLink();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      // TODO: Do something on ESC key
+    }
+  };
+
+  showObjectBrowser = (ev) => {
+    ev.preventDefault();
+    this.props.openObjectBrowser({
+      mode: this.props.mode,
+      currentPath: this.props.initialPath || this.props.location.pathname,
+      propDataName: 'value',
+      onSelectItem: (url, item) => {
+        this.onChange(item);
+      },
+      selectableTypes:
+        this.props.widgetOptions?.pattern_options?.selectableTypes ||
+        this.props.selectableTypes,
+      maximumSelectionSize:
+        this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
+        this.props.maximumSelectionSize,
+    });
+  };
+
+  handleSelectedItemsRefClick = (e) => {
+    if (this.props.isDisabled) {
+      return;
+    }
+
+    if (
+      e.target.contains(this.selectedItemsRef.current) ||
+      e.target.contains(this.placeholderRef.current)
+    ) {
+      this.showObjectBrowser(e);
+    }
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, description, fieldSet, value, mode, onChange, isDisabled } =
+      this.props;
+
+    let items = compact(!isArray(value) && value ? [value] : value || []);
+
+    let icon =
+      mode === 'multiple' || items.length === 0 ? navTreeSVG : clearSVG;
+    let iconAction =
+      mode === 'multiple' || items.length === 0
+        ? this.showObjectBrowser
+        : (e) => {
+            e.preventDefault();
+            onChange(id, this.props.return === 'single' ? null : []);
+          };
+
+    return (
+      <FormFieldWrapper
+        {...this.props}
+        className={description ? 'help text' : 'text'}
+      >
+        <div
+          className="objectbrowser-field"
+          aria-labelledby={`fieldset-${
+            fieldSet || 'default'
+          }-field-label-${id}`}
+        >
+          <div
+            className="selected-values"
+            onClick={this.handleSelectedItemsRefClick}
+            onKeyDown={this.handleSelectedItemsRefClick}
+            role="searchbox"
+            tabIndex={0}
+            ref={this.selectedItemsRef}
+          >
+            {items.map((item) => this.renderLabel(item))}
+
+            {items.length === 0 && this.props.mode === 'multiple' && (
+              <div className="placeholder" ref={this.placeholderRef}>
+                {this.props.placeholder ??
+                  this.props.intl.formatMessage(messages.placeholder)}
+              </div>
+            )}
+            {this.props.allowExternals &&
+              items.length === 0 &&
+              this.props.mode !== 'multiple' && (
+                <input
+                  onKeyDown={this.onKeyDownManualLink}
+                  onChange={this.onManualLinkInput}
+                  value={this.state.manualLinkInput}
+                  placeholder={
+                    this.props.placeholder ??
+                    this.props.intl.formatMessage(messages.placeholder)
+                  }
+                />
+              )}
+          </div>
+          {this.state.manualLinkInput && isEmpty(items) && (
+            <Button.Group>
+              <Button
+                basic
+                className="cancel"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  this.setState({ manualLinkInput: '' });
+                }}
+              >
+                <Icon name={clearSVG} size="18px" color="#e40166" />
+              </Button>
+              <Button
+                basic
+                primary
+                disabled={!this.state.validURL}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  this.onSubmitManualLink();
+                }}
+              >
+                <Icon name={aheadSVG} size="18px" />
+              </Button>
+            </Button.Group>
+          )}
+          {!this.state.manualLinkInput && (
+            <Button
+              aria-label={this.props.intl.formatMessage(
+                messages.openObjectBrowser,
+              )}
+              onClick={iconAction}
+              className="action"
+              disabled={isDisabled}
+            >
+              <Icon name={icon} size="18px" />
+            </Button>
+          )}
+        </div>
+      </FormFieldWrapper>
+    );
+  }
+}
+
+const ObjectBrowserWidgetMode = (mode) =>
+  compose(
+    injectIntl,
+    withObjectBrowser,
+    withRouter,
+    connect(null, { searchContent }),
+  )((props) => <ObjectBrowserWidgetComponent {...props} mode={mode} />);
+export { ObjectBrowserWidgetMode };
+export default compose(
+  injectIntl,
+  withObjectBrowser,
+  withRouter,
+  connect(null, { searchContent }),
+)(ObjectBrowserWidgetComponent);

package/src/customizations/volto/components/manage/Widgets/README.md

@@ -0,0 +1 @@
+Customized ObjectBrowserWidget to preserve query strings in the manually pasted internal URL. (refs #299560)