@eeacms/volto-eea-website-theme 3.5.4 → 3.6.0

package/src/components/theme/Widgets/UserSelectWidget.jsx

@@ -0,0 +1,331 @@
+/**
+ * UserSelectWidget component.
+ * @module components/manage/Widgets/UserSelectWidget
+ */
+
+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 { Popup } from 'semantic-ui-react';
+import {
+  normalizeValue,
+  convertValueToVocabQuery,
+} from '@plone/volto/components/manage/Widgets/SelectUtils';
+import checkSVG from '@plone/volto/icons/check.svg';
+import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
+import { Icon } from '@plone/volto/components';
+
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
+
+import {
+  ClearIndicator,
+  DropdownIndicator,
+  MultiValueContainer,
+  selectTheme,
+  customSelectStyles,
+  MenuList,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+  type_text: {
+    id: 'Type text...',
+    defaultMessage: 'Type text...',
+  },
+});
+
+export const normalizeSingleSelectOption = (value, intl) => {
+  if (!value) return value;
+
+  if (Array.isArray(value)) {
+    // Assuming [token, title] pair.
+    if (value.length === 2)
+      return { value: value[0], label: value[1] || value[0], email: '' };
+
+    throw new Error(`Unknown value type of select widget: ${value}`);
+  }
+
+  const token = value.token ?? value.value ?? value.UID ?? 'no-value';
+  const label =
+    (value.title && value.title !== 'None' ? value.title : undefined) ??
+    value.label ??
+    value.token ??
+    intl.formatMessage(messages.no_value);
+  return {
+    value: token,
+    label,
+    email: value.email ? value.email : label || token,
+  };
+};
+
+export const normalizeChoices = (items, intl) =>
+  items.map((item) => normalizeSingleSelectOption(item, intl));
+
+/**
+ * Custom Option component with a tooltip
+ */
+const CustomOption = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  const color = props.isFocused && !props.isSelected ? '#b8c6c8' : '#007bc1';
+  const svgIcon =
+    props.isFocused || props.isSelected ? checkSVG : checkBlankSVG;
+
+  const { data, innerRef, innerProps } = props;
+  const { label, email } = data;
+
+  return (
+    <Option {...props}>
+      <div ref={innerRef} {...innerProps}>
+        <Popup
+          content={email}
+          position="top center"
+          trigger={
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '0.5rem',
+              }}
+            >
+              <span>{label}</span>
+              <Icon name={svgIcon} size="20px" color={color} />
+            </div>
+          }
+        />
+      </div>
+    </Option>
+  );
+});
+
+/**
+ * UserSelectWidget component class.
+ * @class UserSelectWidget
+ * @extends Component
+ */
+class UserSelectWidget extends Component {
+  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]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    ),
+    onChange: PropTypes.func.isRequired,
+    wrapped: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    placeholder: PropTypes.string,
+  };
+
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {
+      searchLength: 0,
+      termsPairsCache: [],
+    };
+  }
+
+  componentDidMount() {
+    const { id, lang, value, choices } = this.props;
+    if (value && value?.length > 0) {
+      const tokensQuery = convertValueToVocabQuery(
+        normalizeValue(choices, value, this.props.intl),
+      );
+
+      this.props.getVocabularyTokenTitle({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        subrequest: `widget-${id}-${lang}`,
+        ...tokensQuery,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { value, choices } = this.props;
+    if (
+      this.state.termsPairsCache.length === 0 &&
+      value?.length > 0 &&
+      choices?.length > 0 &&
+      (value !== prevProps.value || choices !== prevProps.choices)
+    ) {
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...choices],
+      }));
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeoutRef.current) {
+      clearTimeout(this.timeoutRef.current);
+    }
+  }
+
+  /**
+   * 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,
+    );
+    this.setState((state) => ({
+      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+    }));
+  }
+
+  timeoutRef = React.createRef();
+  // How many characters to hold off searching from. Search tarts at this plus one.
+  SEARCH_HOLDOFF = 2;
+
+  loadOptions = (query) => {
+    // Implement a debounce of 400ms and a min search of 3 chars
+    if (query.length > this.SEARCH_HOLDOFF) {
+      if (this.timeoutRef.current) clearTimeout(this.timeoutRef.current);
+      return new Promise((resolve) => {
+        this.timeoutRef.current = setTimeout(async () => {
+          const res = await this.fetchAvailableChoices(query);
+          resolve(res);
+        }, 400);
+      });
+    } else {
+      return Promise.resolve([]);
+    }
+  };
+
+  fetchAvailableChoices = async (query) => {
+    const resp = await this.props.getVocabulary({
+      vocabNameOrURL: this.props.vocabBaseUrl,
+      query,
+      size: -1,
+      subrequest: this.props.lang,
+    });
+    return normalizeChoices(resp.items || [], this.props.intl);
+  };
+
+  render() {
+    const selectedOption = normalizeValue(
+      this.state.termsPairsCache,
+      this.props.value,
+      this.props.intl,
+    );
+    const SelectAsync = this.props.reactSelectAsync.default;
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <SelectAsync
+          id={`field-${this.props.id}`}
+          key={this.props.id}
+          isDisabled={this.props.disabled || this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          cacheOptions
+          defaultOptions={[]}
+          loadOptions={this.loadOptions}
+          onInputChange={(search) =>
+            this.setState({ searchLength: search.length })
+          }
+          noOptionsMessage={() =>
+            this.props.intl.formatMessage(
+              this.state.searchLength > this.SEARCH_HOLDOFF
+                ? messages.no_options
+                : messages.type_text,
+            )
+          }
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(this.props.choices?.length > 25 && { MenuList }),
+            MultiValueContainer,
+            ClearIndicator,
+            DropdownIndicator,
+            Option: CustomOption,
+          }}
+          value={selectedOption || []}
+          placeholder={
+            this.props.placeholder ??
+            this.props.intl.formatMessage(messages.select)
+          }
+          onChange={this.handleChange}
+          isMulti
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelectAsync']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl =
+        getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props);
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[
+          `widget-${props.id}-${state.intl.locale}`
+        ]?.items;
+
+      return props.items?.choices
+        ? { choices: props.items.choices, lang: state.intl.locale }
+        : vocabState
+        ? {
+            choices: vocabState,
+            vocabBaseUrl,
+            lang: state.intl.locale,
+          }
+        : { vocabBaseUrl, lang: state.intl.locale };
+    },
+    { getVocabulary, getVocabularyTokenTitle },
+  ),
+)(UserSelectWidget);

package/src/components/theme/Widgets/UserSelectWidget.test.jsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import UserSelectWidget, {
+  normalizeChoices,
+  normalizeSingleSelectOption,
+} from './UserSelectWidget';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a select widget component', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    vocabularies: {
+      'plone.app.vocabularies.Keywords': {
+        items: [
+          { email: 'myemail@provider.com', title: 'My item', value: 'myitem' },
+        ],
+        itemsTotal: 1,
+      },
+    },
+  });
+
+  const props = {
+    getVocabulary: () => {
+      return Promise.resolve({
+        items: [
+          { email: 'foo@provider.com', token: 'foo', title: 'Foo' },
+          { email: 'bar@provider.com', token: 'bar', title: 'Bar' },
+          { email: 'foobar@provider.com', token: 'fooBar', title: 'FooBar' },
+        ],
+      });
+    },
+    widgetOptions: {
+      vocabulary: { '@id': 'plone.app.vocabularies.Keywords' },
+    },
+  };
+
+  const { container } = render(
+    <Provider store={store}>
+      <UserSelectWidget
+        {...props}
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('My field'));
+  expect(container).toMatchSnapshot();
+});
+
+// Test normalization of choices
+test('normalizes vocabulary API response correctly', () => {
+  const mockData = [
+    { email: 'charlie@example.com', token: 'charlie', title: 'Charlie' },
+    { email: 'dana@example.com', token: 'dana', title: 'Dana' },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    { value: 'charlie', label: 'Charlie', email: 'charlie@example.com' },
+    { value: 'dana', label: 'Dana', email: 'dana@example.com' },
+  ]);
+});
+
+// Test missing email default handling
+test('defaults missing email to label or token', () => {
+  const mockData = [{ token: 'no-email', title: 'No Email User' }];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    { value: 'no-email', label: 'No Email User', email: 'No Email User' },
+  ]);
+});
+
+// Test search logic (filters results based on query)
+test('filters choices based on search query', () => {
+  const mockData = [
+    { email: 'george@example.com', token: 'george', title: 'George' },
+    { email: 'hannah@example.com', token: 'hannah', title: 'Hannah' },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  const filteredResults = result.filter((item) =>
+    item.label.toLowerCase().includes('geo'),
+  );
+
+  expect(filteredResults).toEqual([
+    { value: 'george', label: 'George', email: 'george@example.com' },
+  ]);
+});
+
+test('normalizes a valid object with email', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user1', title: 'User One', email: 'user1@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user1',
+    label: 'User One',
+    email: 'user1@example.com',
+  });
+});
+
+test('normalizes an object with missing email using label fallback', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user2', title: 'User Two' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user2',
+    label: 'User Two',
+    email: 'User Two',
+  });
+});
+
+test('normalizes an array [token, title]', () => {
+  const result = normalizeSingleSelectOption(['user3', 'User Three'], {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual({
+    value: 'user3',
+    label: 'User Three',
+    email: '',
+  });
+});
+
+test('throws an error for unexpected array format', () => {
+  expect(() => {
+    normalizeSingleSelectOption(['wrongFormat'], {
+      formatMessage: (msg) => msg.defaultMessage,
+    });
+  }).toThrow('Unknown value type of select widget: wrongFormat');
+});
+
+test('normalizes an object with only token and falls back correctly', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user4' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user4',
+    label: 'user4',
+    email: 'user4',
+  });
+});
+
+test('returns input when value is null or undefined', () => {
+  expect(normalizeSingleSelectOption(null, {})).toBe(null);
+  expect(normalizeSingleSelectOption(undefined, {})).toBe(undefined);
+});
+
+// Test normalizeSingleSelectOption with an object missing title
+test('normalizes an object with missing title and fallback to token', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user5', email: 'user5@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user5',
+    label: 'user5',
+    email: 'user5@example.com',
+  });
+});
+
+// Test normalizeChoices with an empty array
+test('handles empty array correctly in normalizeChoices', () => {
+  const result = normalizeChoices([], {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([]);
+});
+
+// Test normalizeSingleSelectOption when title is "None"
+test('defaults label to token when title is "None"', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user6', title: 'None', email: 'user6@example.com' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user6',
+    label: 'user6',
+    email: 'user6@example.com',
+  });
+});
+
+// Test normalizeSingleSelectOption with both token and value fields
+test('handles object with both token and value fields', () => {
+  const result = normalizeSingleSelectOption(
+    { token: 'user7', value: 'actualValue', title: 'User Seven' },
+    { formatMessage: (msg) => msg.defaultMessage },
+  );
+
+  expect(result).toEqual({
+    value: 'user7',
+    label: 'User Seven',
+    email: 'User Seven',
+  });
+});
+
+// Test normalizeChoices with nested objects
+test('ignores extra nested data in normalizeChoices', () => {
+  const mockData = [
+    {
+      email: 'nested@example.com',
+      token: 'nestedUser',
+      title: 'Nested User',
+      extraField: { something: 'should be ignored' },
+    },
+  ];
+
+  const result = normalizeChoices(mockData, {
+    formatMessage: (msg) => msg.defaultMessage,
+  });
+
+  expect(result).toEqual([
+    {
+      value: 'nestedUser',
+      label: 'Nested User',
+      email: 'nested@example.com',
+    },
+  ]);
+});

package/src/customizations/volto/actions/vocabularies/vocabularies.js

@@ -0,0 +1,89 @@
+/**
+ * Vocabularies actions.
+ * @module actions/vocabularies/vocabularies
+ */
+
+import {
+  GET_VOCABULARY,
+  GET_VOCABULARY_TOKEN_TITLE,
+} from '@plone/volto/constants/ActionTypes';
+import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import qs from 'query-string';
+
+/**
+ * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
+ * @function getVocabulary
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} query Only include results containing this string.
+ * @param {number} start Start of result batch.
+ * @param {number} b_size The size of the batch.
+ * @param {string} subrequest Name of the subrequest.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabulary({
+  vocabNameOrURL,
+  query = null,
+  start = 0,
+  size,
+  subrequest,
+}) {
+  const vocabPath = vocabNameOrURL.includes('/')
+    ? flattenToAppURL(vocabNameOrURL)
+    : `/@vocabularies/${vocabNameOrURL}`;
+
+  let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
+
+  if (query) {
+    queryString = `${queryString}&title=${query}`;
+  }
+  return {
+    type: GET_VOCABULARY,
+    vocabulary: vocabNameOrURL,
+    start,
+    request: {
+      op: 'get',
+      path: `${vocabPath}?${queryString}`,
+    },
+    subrequest,
+  };
+}
+
+/**
+ * Get the title value given a token from vocabulary given a vocabulary URL
+ * (coming from a Schema) or from a vocabulary name.
+ * @function getVocabularyTokenTitle
+ * @param {string} vocabNameOrURL Full API URL of vocabulary or vocabulary name
+ * @param {string} token Only include results containing this string.
+ * @returns {Object} Get vocabulary action.
+ */
+export function getVocabularyTokenTitle({
+  vocabNameOrURL,
+  token = null,
+  tokens = null,
+  subrequest,
+}) {
+  // In case we have a URL, we have to get the vocabulary name
+  const vocabulary = getVocabName(vocabNameOrURL);
+  const queryString = {
+    ...(token && { token }),
+    ...(tokens && { tokens }),
+  };
+
+  return {
+    type: GET_VOCABULARY_TOKEN_TITLE,
+    vocabulary: vocabNameOrURL,
+    token,
+    tokens,
+    subrequest,
+    request: {
+      op: 'get',
+      path: `/@vocabularies/${vocabulary}?b_size=-1&${qs.stringify(
+        queryString,
+        {
+          encode: false,
+        },
+      )}`,
+    },
+  };
+}

package/src/customizations/volto/actions/vocabularies/vocabularies.js.diff

@@ -0,0 +1,32 @@
+diff --git a/src/customizations/volto/actions/vocabularies/vocabularies.js b/src/customizations/volto/actions/vocabularies/vocabularies.js
+index 811aee2..ec60589 100644
+--- a/src/customizations/volto/actions/vocabularies/vocabularies.js
++++ b/src/customizations/volto/actions/vocabularies/vocabularies.js
+@@ -8,6 +8,7 @@ import {
+   GET_VOCABULARY_TOKEN_TITLE,
+ } from '@plone/volto/constants/ActionTypes';
+ import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
++import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+ import qs from 'query-string';
+
+ /**
+@@ -27,7 +28,9 @@ export function getVocabulary({
+   size,
+   subrequest,
+ }) {
+-  const vocabulary = getVocabName(vocabNameOrURL);
++  const vocabPath = vocabNameOrURL.includes('/')
++    ? flattenToAppURL(vocabNameOrURL)
++    : `/@vocabularies/${vocabNameOrURL}`;
+
+   let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
+
+@@ -40,7 +43,7 @@ export function getVocabulary({
+     start,
+     request: {
+       op: 'get',
+-      path: `/@vocabularies/${vocabulary}?${queryString}`,
++      path: `${vocabPath}?${queryString}`,
+     },
+     subrequest,
+   };

package/src/customizations/volto/actions/vocabularies/vocabularies.js.md

@@ -0,0 +1,4 @@
+Backport vocabularies actions from Volto 19.x. See:
+
+- https://github.com/plone/volto/pull/6935
+- https://github.com/plone/volto/issues/3216