@eeacms/volto-clms-theme 1.0.184 → 1.0.185

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.185](https://github.com/eea/volto-clms-theme/compare/1.0.184...1.0.185) - 13 March 2023
+
+#### :hammer_and_wrench: Others
+
+- comment MenuList [Unai - [`b8dfeff`](https://github.com/eea/volto-clms-theme/commit/b8dfeff240130c803fd6c33dd6460cd8252f90af)]
+- volto 16 array widget [Unai - [`a29aab8`](https://github.com/eea/volto-clms-theme/commit/a29aab86c035f352e32ca1c20edd926591566094)]
 ### [1.0.184](https://github.com/eea/volto-clms-theme/compare/1.0.183...1.0.184) - 10 March 2023
 
 #### :rocket: New Features
@@ -940,6 +946,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
+- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1090,6 +1097,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -1994,11 +2002,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
+- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
+- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.184",
+  "version": "1.0.185",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

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

@@ -0,0 +1,424 @@
+/**
+ * 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 */
+          autoFocus={this.props.focus}
+          /* eslint-enable jsx-a11y/no-autofocus */
+          options={
+            this.props.vocabBaseUrl
+              ? choices
+              : this.props.choices
+              ? [
+                  ...choices,
+                  ...(this.props.noValueOption && !this.props.default
+                    ? [
+                        {
+                          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);