@eeacms/volto-cca-policy 0.2.7 → 0.2.9

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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.2.9](https://github.com/eea/volto-cca-policy/compare/0.2.8...0.2.9) - 25 April 2024
+
+#### :bug: Bug Fixes
+
+- fix(menu): remove menu layout configuration and show hidden children in the menu [kreafox - [`7b8001b`](https://github.com/eea/volto-cca-policy/commit/7b8001b4d4860d0469d9deded380735843763aad)]
+- fix: Add ArrayWidget customization [kreafox - [`60bad7e`](https://github.com/eea/volto-cca-policy/commit/60bad7e3acd59b03322b56d33e6856f356d82e9b)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`64b254f`](https://github.com/eea/volto-cca-policy/commit/64b254f14959c73a7154e1a4ad921f8b2f075ae4)]
+
+### [0.2.8](https://github.com/eea/volto-cca-policy/compare/0.2.7...0.2.8) - 23 April 2024
+
+#### :bug: Bug Fixes
+
+- fix(tabs): disable hover on Spotlight view [kreafox - [`4ec2545`](https://github.com/eea/volto-cca-policy/commit/4ec25452bcf4702e779d6af7165b99054b4dd012)]
+- fix(block): change icon type and fix icon size in Case Study Explorer block [kreafox - [`a65e4bc`](https://github.com/eea/volto-cca-policy/commit/a65e4bc6d3dee7dc39a05e008e7ee4fc5db53939)]
+
+#### :nail_care: Enhancements
+
+- change: improve Spotlight tab variation [kreafox - [`a7d2eb9`](https://github.com/eea/volto-cca-policy/commit/a7d2eb9e6c49eef986f53f2daa08114f27de3313)]
+- change(block): improve accordion icon [kreafox - [`79d4a7e`](https://github.com/eea/volto-cca-policy/commit/79d4a7e2cad1cbf50cc77e550a4c9494670dd9e8)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`74ecf1e`](https://github.com/eea/volto-cca-policy/commit/74ecf1eb58c613913f0deb6d218ff4c156477e27)]
+
 ### [0.2.7](https://github.com/eea/volto-cca-policy/compare/0.2.6...0.2.7) - 19 April 2024
 
 #### :rocket: New Features

package/package.json

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

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -2,6 +2,15 @@ import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Accordion, Icon, Checkbox } from 'semantic-ui-react';
 
+const AccordionIcon = ({ active }) => {
+  return (
+    <Icon
+      size="small"
+      className={active ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}
+    />
+  );
+};
+
 export default function CaseStudyFilters(props) {
   const { filters, activeFilters, setActiveFilters } = props;
 
@@ -55,7 +64,7 @@ export default function CaseStudyFilters(props) {
           index={0}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(0)} />
           <FormattedMessage
             id="Adaptation sectors"
             defaultMessage="Adaptation sectors"
@@ -80,7 +89,7 @@ export default function CaseStudyFilters(props) {
           index={1}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(1)} />
           <FormattedMessage
             id="Climate impacts"
             defaultMessage="Climate impacts"
@@ -105,7 +114,7 @@ export default function CaseStudyFilters(props) {
           index={2}
           onClick={handleClick}
         >
-          <Icon name="dropdown" />
+          <AccordionIcon active={activeIndex.includes(2)} />
           <FormattedMessage
             id="Key type measures"
             defaultMessage="Key type measures"

package/src/components/manage/Blocks/TabsBlock/Spotlight.jsx

@@ -52,8 +52,7 @@ export const AssetTab = ({ props, tabIndex, tabTitle }) => {
           src={
             isInternalURL(imageObject['@id'])
               ? `${flattenToAppURL(imageObject['@id'])}/${
-                  imageObject?.image_scales?.image?.[0].scales?.[imageSize]
-                    ?.download || imageObject?.image_scales?.image?.[0].download
+                  imageObject?.image_scales?.image?.[0].download
                 }`
               : imageObject['@id']
           }
@@ -123,7 +122,7 @@ const MenuItem = (props) => {
         aria-selected={tab === activeTab}
         tabIndex={0}
         role={'tab'}
-        onMouseOver={focusTab}
+        // onMouseOver={focusTab}
         onFocus={focusTab}
         onClick={focusTab}
         onKeyDown={(e) => {

package/src/components/manage/Blocks/TabsBlock/spotlight.less

@@ -6,14 +6,35 @@
   // this is the menu
   flex-wrap: wrap;
   border: none;
+  margin: 1em 0 !important;
   box-shadow: none;
-  // background: #cc000033;
+
+  .ui.image.thumb {
+    width: 190px;
+    height: auto;
+  }
 
   .item {
-    flex-grow: 2;
+    padding: 0.5em;
+    border: 1px solid transparent !important;
+    margin: 10px 0;
+
+    &:not(:last-child) {
+      margin-right: 15px !important;
+    }
+
+    &:hover {
+      border: 1px solid #ddd !important;
+      border-radius: 4px;
+    }
+
+    &.active,
+    &.active:hover {
+      border: 1px solid #ddd !important;
+      border-radius: 5px;
+    }
 
     &:before {
-      // border: 0px !important;
       background: none;
     }
   }

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp.js

@@ -28,13 +28,13 @@ const ItemGrid = ({
   item,
   columns,
   renderMenuItem,
-  hideChildrenFromNavigation,
+  // hideChildrenFromNavigation,
 }) => {
   const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
   return (
     <>
       {renderMenuItem(item, { className: 'sub-title', id: item_id })}
-      {item.items.length && !hideChildrenFromNavigation ? (
+      {item.items.length ? (
         <List
           aria-labelledby={item_id}
           className={columns && columns > 1 ? `has--${columns}--columns` : ''}
@@ -51,7 +51,7 @@ const Item = ({
   icon = false,
   iconName,
   renderMenuItem,
-  hideChildrenFromNavigation,
+  // hideChildrenFromNavigation,
 }) => {
   const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
   return (
@@ -60,22 +60,21 @@ const Item = ({
         className: 'sub-title',
         id: item_id,
       })}
-      {!hideChildrenFromNavigation && (
-        <List className="menu-list" aria-labelledby={item_id}>
-          {item.items.map((listItem, index) => (
-            <React.Fragment key={index}>
-              {renderMenuItem(
-                listItem,
-                {
-                  className: 'item',
-                  key: index,
-                },
-                { children: icon && <Icon className={iconName} /> },
-              )}
-            </React.Fragment>
-          ))}
-        </List>
-      )}
+
+      <List className="menu-list" aria-labelledby={item_id}>
+        {item.items.map((listItem, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(
+              listItem,
+              {
+                className: 'item',
+                key: index,
+              },
+              { children: icon && <Icon className={iconName} /> },
+            )}
+          </React.Fragment>
+        ))}
+      </List>
     </>
   );
 };

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

@@ -0,0 +1,428 @@
+/**
+ * ArrayWidget component.
+ * @module components/manage/Widgets/ArrayWidget
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { find, isObject } from 'lodash';
+
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { getVocabulary } from '@plone/volto/actions';
+
+import {
+  Option,
+  DropdownIndicator,
+  ClearIndicator,
+  selectTheme,
+  customSelectStyles,
+  MenuList,
+  SortableMultiValue,
+  SortableMultiValueLabel,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+function arrayMove(array, from, to) {
+  const slicedArray = array.slice();
+  slicedArray.splice(
+    to < 0 ? array.length + to : to,
+    0,
+    slicedArray.splice(from, 1)[0],
+  );
+  return slicedArray;
+}
+
+function normalizeArrayValue(choices, value) {
+  if (!value || !Array.isArray(value)) return [];
+  if (value.length === 0) return value;
+
+  if (typeof value[0] === 'string') {
+    // raw value like ['foo', 'bar']
+    return value.map((v) => {
+      return {
+        label: find(choices, (c) => c.value === v)?.label || v,
+        value: v,
+      };
+    });
+  }
+
+  if (
+    isObject(value[0]) &&
+    Object.keys(value[0]).includes('token') // Array of objects, w/ label+value
+  ) {
+    return value
+      .map((v) => {
+        const item = find(choices, (c) => c.value === v.token);
+        return item
+          ? {
+              label: item.label || item.title || item.token,
+              value: v.token,
+            }
+          : {
+              // avoid a crash if choices doesn't include this item
+              label: v.label,
+              value: v.token,
+            };
+      })
+      .filter((f) => !!f);
+  }
+
+  return [];
+}
+
+function normalizeChoices(choices) {
+  if (Array.isArray(choices) && choices.length && Array.isArray(choices[0])) {
+    return choices.map((option) => ({
+      value: option[0],
+      label:
+        // Fix "None" on the serializer, to remove when fixed in p.restapi
+        option[1] !== 'None' && option[1] ? option[1] : option[0],
+    }));
+  }
+
+  return choices;
+}
+
+/**
+ * Compare values and return true if equal.
+ * Consider upper and lower case.
+ * @method compareOption
+ * @param {*} inputValue
+ * @param {*} option
+ * @param {*} accessors
+ * @returns {boolean}
+ */
+const compareOption = (inputValue = '', option, accessors) => {
+  const candidate = String(inputValue);
+  const optionValue = String(accessors.getOptionValue(option));
+  const optionLabel = String(accessors.getOptionLabel(option));
+  return optionValue === candidate || optionLabel === candidate;
+};
+
+/**
+ * ArrayWidget component class.
+ * @class ArrayWidget
+ * @extends Component
+ *
+ * A createable select array widget will be rendered if the named vocabulary is
+ * in the widget definition (hint) like:
+ *
+ * ```
+ * list_field_voc_unconstrained = schema.List(
+ *     title=u"List field with values from vocabulary but not constrained to them.",
+ *     description=u"zope.schema.List",
+ *     value_type=schema.TextLine(),
+ *     required=False,
+ *     missing_value=[],
+ * )
+ * directives.widget(
+ *     "list_field_voc_unconstrained",
+ *     AjaxSelectFieldWidget,
+ *     vocabulary="plone.app.vocabularies.PortalTypes",
+ * )
+ * ```
+ */
+class ArrayWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    vocabLoading: PropTypes.bool,
+    vocabLoaded: PropTypes.bool,
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    ),
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    creatable: false,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Actions
+   */
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabLoading === undefined &&
+      !this.props.vocabLoaded &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Handle the field change, store it in the local state and back to simple
+   * array of tokens for correct serialization
+   * @method handleChange
+   * @param {array} selectedOption The selected options (already aggregated).
+   * @returns {undefined}
+   */
+  handleChange(selectedOption) {
+    this.props.onChange(
+      this.props.id,
+      selectedOption ? selectedOption.map((item) => item.value) : null,
+    );
+  }
+
+  onSortEnd = (selectedOption, { oldIndex, newIndex }) => {
+    const newValue = arrayMove(selectedOption, oldIndex, newIndex);
+
+    this.handleChange(newValue);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const choices = normalizeChoices(this.props?.choices || []);
+    const selectedOption = normalizeArrayValue(choices, this.props.value);
+
+    const CreatableSelect = this.props.reactSelectCreateable.default;
+    const { SortableContainer } = this.props.reactSortableHOC;
+    const Select = this.props.reactSelect.default;
+    const SortableSelect =
+      // It will be only createable if the named vocabulary is in the widget definition
+      // (hint) like:
+      // list_field_voc_unconstrained = schema.List(
+      //     title=u"List field with values from vocabulary but not constrained to them.",
+      //     description=u"zope.schema.List",
+      //     value_type=schema.TextLine(),
+      //     required=False,
+      //     missing_value=[],
+      // )
+      // directives.widget(
+      //     "list_field_voc_unconstrained",
+      //     AjaxSelectFieldWidget,
+      //     vocabulary="plone.app.vocabularies.PortalTypes",
+      // )
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
+        ? SortableContainer(Select)
+        : SortableContainer(CreatableSelect);
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={this.onSortEnd}
+          menuShouldScrollIntoView={false}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          id={`field-${this.props.id}`}
+          key={this.props.id}
+          isDisabled={this.props.disabled || this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          /* eslint-disable jsx-a11y/no-autofocus */
+          // start customization
+          // autoFocus={this.props.focus}
+          // end customization
+          /* eslint-enable jsx-a11y/no-autofocus */
+          options={
+            this.props.vocabBaseUrl
+              ? choices
+              : this.props.choices
+              ? [
+                  ...choices,
+                  ...(this.props.noValueOption &&
+                  (this.props.default === undefined ||
+                    this.props.default === null)
+                    ? [
+                        {
+                          label: this.props.intl.formatMessage(
+                            messages.no_value,
+                          ),
+                          value: 'no-value',
+                        },
+                      ]
+                    : []),
+                ]
+              : [
+                  {
+                    label: this.props.intl.formatMessage(messages.no_value),
+                    value: 'no-value',
+                  },
+                ]
+          }
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(this.props.choices?.length > 25 && {
+              MenuList,
+            }),
+            MultiValueContainer,
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel,
+            DropdownIndicator,
+            ClearIndicator,
+            Option,
+          }}
+          value={selectedOption || []}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={this.handleChange}
+          isValidNewOption={(
+            inputValue,
+            selectValue,
+            selectOptions,
+            accessors,
+          ) =>
+            !(
+              !inputValue ||
+              selectValue.some((option) =>
+                compareOption(inputValue, option, accessors),
+              ) ||
+              selectOptions.some((option) =>
+                compareOption(inputValue, option, accessors),
+              )
+            )
+          }
+          isClearable
+          isMulti
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const ArrayWidgetComponent = injectIntl(ArrayWidget);
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelect', 'reactSelectCreateable', 'reactSortableHOC']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl =
+        getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props);
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.items?.choices) {
+        return {
+          choices: props.items.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          choices: vocabState.items,
+          vocabBaseUrl,
+          vocabLoading: vocabState.loading,
+          vocabLoaded: vocabState.loaded,
+          lang: state.intl.locale,
+        };
+      }
+      return { vocabBaseUrl, lang: state.intl.locale };
+    },
+    { getVocabulary },
+  ),
+)(ArrayWidget);

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

@@ -0,0 +1,5 @@
+Original: https://github.com/plone/volto/blob/16.x.x/src/components/manage/Widgets/ArrayWidget.jsx
+
+The issue can be reproduce in the metadata section block. The Select widget from the edit sidebar steals the focus when you try to edit a slate text after you edit the Select widget in the metadata section block.
+The quick solution was to comment the "autoFocus" prop in the Select component (see the customization part in ArrayWidget.jsx, line 321).
+This is a temporary fix until it is properly tested and fixed the issue in this ticket: https://taskman.eionet.europa.eu/issues/268852

package/src/index.js

@@ -323,60 +323,6 @@ const applyConfig = (config) => {
     },
   ];
 
-  const hideChildren = {
-    hideChildrenFromNavigation: false,
-  };
-
-  // mega menu layout settings
-  config.settings.menuItemsLayouts = {
-    // '*': {
-    //   hideChildrenFromNavigation: false,
-    // },
-    '/en/eu-policy': hideChildren,
-    '/de/eu-policy': hideChildren,
-    '/fr/eu-policy': hideChildren,
-    '/es/eu-policy': hideChildren,
-    '/it/eu-policy': hideChildren,
-    '/pl/eu-policy': hideChildren,
-    '/en/knowledge-1': hideChildren,
-    '/de/knowledge-1': hideChildren,
-    '/fr/knowledge-1': hideChildren,
-    '/es/knowledge-1': hideChildren,
-    '/it/knowledge-1': hideChildren,
-    '/pl/knowledge-1': hideChildren,
-    // observatory
-    '/en/observatory/about': hideChildren,
-    '/de/observatory/about': hideChildren,
-    '/fr/observatory/about': hideChildren,
-    '/es/observatory/about': hideChildren,
-    '/it/observatory/about': hideChildren,
-    '/pl/observatory/about': hideChildren,
-    '/en/observatory/policy-context-1': hideChildren,
-    '/de/observatory/policy-context-1': hideChildren,
-    '/fr/observatory/policy-context-1': hideChildren,
-    '/es/observatory/policy-context-1': hideChildren,
-    '/it/observatory/policy-context-1': hideChildren,
-    '/pl/observatory/policy-context-1': hideChildren,
-    '/en/observatory/evidence-on-climate-and-health': hideChildren,
-    '/de/observatory/evidence-on-climate-and-health': hideChildren,
-    '/fr/observatory/evidence-on-climate-and-health': hideChildren,
-    '/es/observatory/evidence-on-climate-and-health': hideChildren,
-    '/it/observatory/evidence-on-climate-and-health': hideChildren,
-    '/pl/observatory/evidence-on-climate-and-health': hideChildren,
-    '/en/observatory/resource-catalogue-1': hideChildren,
-    '/de/observatory/resource-catalogue-1': hideChildren,
-    '/fr/observatory/resource-catalogue-1': hideChildren,
-    '/es/observatory/resource-catalogue-1': hideChildren,
-    '/it/observatory/resource-catalogue-1': hideChildren,
-    '/pl/observatory/resource-catalogue-1': hideChildren,
-    '/en/observatory/publications-and-outreach': hideChildren,
-    '/de/observatory/publications-and-outreach': hideChildren,
-    '/fr/observatory/publications-and-outreach': hideChildren,
-    '/es/observatory/publications-and-outreach': hideChildren,
-    '/it/observatory/publications-and-outreach': hideChildren,
-    '/pl/observatory/publications-and-outreach': hideChildren,
-  };
-
   // Custom results
   config.settings.searchlib.resolve.HealthHorizontalCardItem = {
     component: HealthHorizontalCardItem,