@plone/volto 14.0.2 → 14.2.1

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

@@ -1,25 +1,30 @@
 /**
- * ArrayWidget component.
- * @module components/manage/Widgets/ArrayWidget
+ * SelectAutoComplete component.
+ * @module components/manage/Widgets/SelectAutoComplete
  */
 
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { isObject } from 'lodash';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  normalizeValue,
+  normalizeChoices,
+  convertValueToVocabQuery,
+} from './SelectUtils';
 
 import {
   getVocabFromHint,
   getVocabFromField,
   getVocabFromItems,
 } from '@plone/volto/helpers';
-import { getVocabulary } from '@plone/volto/actions';
+import { getVocabulary, getVocabularyTokenTitle } from '@plone/volto/actions';
 
 import {
   Option,
+  ClearIndicator,
   DropdownIndicator,
   selectTheme,
   customSelectStyles,
@@ -44,8 +49,8 @@ const messages = defineMessages({
 });
 
 /**
- * ArrayWidget component class.
- * @class ArrayWidget
+ * SelectAutoComplete component class.
+ * @class SelectAutoComplete
  * @extends Component
  */
 class SelectAutoComplete extends Component {
@@ -75,6 +80,7 @@ class SelectAutoComplete extends Component {
     ),
     onChange: PropTypes.func.isRequired,
     wrapped: PropTypes.bool,
+    isDisabled: PropTypes.bool,
   };
 
   /**
@@ -108,17 +114,39 @@ class SelectAutoComplete extends Component {
     this.handleChange = this.handleChange.bind(this);
 
     this.state = {
-      selectedOption: props.value
-        ? props.value.map((item) =>
-            isObject(item)
-              ? { label: item.title || item.token, value: item.token }
-              : { label: item, value: item },
-          )
-        : [],
       searchLength: 0,
+      termsPairsCache: [],
     };
   }
 
+  componentDidMount() {
+    const { id, intl, 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}-${intl.locale}`,
+        ...tokensQuery,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { value, choices = [] } = this.props;
+    if (
+      this.state.termsPairsCache.length === 0 &&
+      value?.length > 0 &&
+      choices.length > 0
+    ) {
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...choices],
+      }));
+    }
+  }
+
   /**
    * Handle the field change, store it in the local state and back to simple
    * array of tokens for correct serialization
@@ -127,12 +155,13 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.setState({ selectedOption });
-
     this.props.onChange(
       this.props.id,
       selectedOption ? selectedOption.map((item) => item.value) : null,
     );
+    this.setState((state) => ({
+      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+    }));
   }
 
   timeoutRef = React.createRef();
@@ -146,21 +175,8 @@ class SelectAutoComplete extends Component {
       if (this.timeoutRef.current) clearTimeout(this.timeoutRef.current);
       return new Promise((resolve) => {
         this.timeoutRef.current = setTimeout(async () => {
-          resolve(
-            await this.props
-              .getVocabulary({
-                vocabNameOrURL: this.props.vocabBaseUrl,
-                query,
-                size: -1,
-                subrequest: this.props.intl.locale,
-              })
-              .then((resp) => {
-                return resp.items.map((item) => ({
-                  label: item.title,
-                  value: item.token,
-                }));
-              }),
-          );
+          const res = await this.fetchAvailableChoices(query);
+          resolve(res);
         }, 400);
       });
     } else {
@@ -168,13 +184,28 @@ class SelectAutoComplete extends Component {
     }
   };
 
+  fetchAvailableChoices = async (query) => {
+    const resp = await this.props.getVocabulary({
+      vocabNameOrURL: this.props.vocabBaseUrl,
+      query,
+      size: -1,
+      subrequest: this.props.intl.locale,
+    });
+
+    return normalizeChoices(resp.items || [], this.props.intl);
+  };
+
   /**
    * Render method.
    * @method render
    * @returns {string} Markup for the component.
    */
   render() {
-    const { selectedOption } = this.state;
+    const selectedOption = normalizeValue(
+      this.state.termsPairsCache,
+      this.props.value,
+      this.props.intl,
+    );
     const SelectAsync = this.props.reactSelectAsync.default;
 
     return (
@@ -182,7 +213,7 @@ class SelectAutoComplete extends Component {
         <SelectAsync
           id={`field-${this.props.id}`}
           key={this.props.id}
-          isDisabled={this.props.isDisabled}
+          isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"
           classNamePrefix="react-select"
           cacheOptions
@@ -204,6 +235,7 @@ class SelectAutoComplete extends Component {
             ...(this.props.choices?.length > 25 && {
               MenuList,
             }),
+            ClearIndicator,
             DropdownIndicator,
             Option,
           }}
@@ -230,22 +262,21 @@ export default compose(
         getVocabFromItems(props);
 
       const vocabState =
-        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[props.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,
-        };
-      } else if (vocabState) {
-        return {
-          choices: vocabState.items,
-          vocabBaseUrl,
-        };
-      }
-      return { vocabBaseUrl };
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[
+          `widget-${props.id}-${props.intl.locale}`
+        ]?.items;
+
+      // If the schema already has the choices in it, then do not try to get
+      // the vocab, even if there is one
+      return props.items?.choices
+        ? { choices: props.items.choices }
+        : vocabState
+        ? {
+            choices: vocabState,
+            vocabBaseUrl,
+          }
+        : { vocabBaseUrl };
     },
-    { getVocabulary },
+    { getVocabulary, getVocabularyTokenTitle },
   ),
 )(SelectAutoComplete);

package/src/components/manage/Widgets/SelectAutoComplete.test.jsx

@@ -27,9 +27,25 @@ test('renders a select widget component', async () => {
     },
   });
 
+  const props = {
+    getVocabulary: () => {
+      return Promise.resolve({
+        items: [
+          { token: 'foo', title: 'Foo' },
+          { token: 'bar', title: 'Bar' },
+          { token: 'fooBar', title: 'FooBar' },
+        ],
+      });
+    },
+    widgetOptions: {
+      vocabulary: { '@id': 'plone.app.vocabularies.Keywords' },
+    },
+  };
+
   const { container } = render(
     <Provider store={store}>
       <SelectAutoComplete
+        {...props}
         id="my-field"
         title="My field"
         fieldSet="default"

package/src/components/manage/Widgets/SelectAutocompleteWidget.stories.jsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { SelectAutoCompleteComponent } from './SelectAutoComplete';
+import WidgetStory from './story';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const SelectAutocompleteWidget = injectLazyLibs(['reactSelectAsync'])(
+  SelectAutoCompleteComponent,
+);
+
+const props = {
+  choices: [
+    { token: 'foo', title: 'Foo' },
+    { token: 'bar', title: 'Bar' },
+    { token: 'fooBar', title: 'FooBar' },
+  ],
+
+  getVocabulary: () => {
+    return Promise.resolve({ items: props.choices });
+  },
+  getVocabularyTokenTitle: () => {},
+};
+
+export const Default = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+Default.args = {
+  ...props,
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+};
+
+export const Required = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+Required.args = {
+  ...props,
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  required: true,
+};
+
+export const FilledWithToken = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+FilledWithToken.args = {
+  ...props,
+  id: 'field-filled',
+  title: 'Filled field title',
+  description: 'Optional help text',
+  value: [{ token: 'foo', title: 'Foo' }],
+  placeholder: 'Type something…',
+  required: true,
+};
+
+export const FilledWithString = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+FilledWithString.args = {
+  ...props,
+  id: 'field-filled',
+  title: 'Filled field title',
+  description: 'Optional help text',
+  value: ['foo'],
+  placeholder: 'Type something…',
+  required: true,
+};
+
+export const Errored = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+Errored.args = {
+  ...props,
+  id: 'field-errored',
+  title: 'Errored field title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  value: [{ token: 'foo', title: 'Foo' }],
+  error: ['This is the error'],
+  required: true,
+};
+
+export const NoPlaceholder = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+NoPlaceholder.args = {
+  ...props,
+  id: 'field-without-novalue',
+  title: 'Field title',
+  description: 'This field has no value option',
+  required: true,
+};
+
+export const Disabled = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+Disabled.args = {
+  ...props,
+  id: 'field-disabled',
+  title: 'Disabled field title',
+  description: 'This select field is disabled',
+  disabled: true,
+};
+
+const getOptionsGenerator = (count) => {
+  const options = [];
+  for (let i = 0; i < count; i = i + 1) {
+    options.push({ token: i.toString(), title: `Option ${i}` });
+  }
+  return options;
+};
+
+const manyOptions1000 = getOptionsGenerator(1000);
+
+export const ManyOptions1000 = WidgetStory.bind({
+  widget: SelectAutocompleteWidget,
+});
+ManyOptions1000.args = {
+  ...props,
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  placeholder: 'Type something…',
+  choices: manyOptions1000.slice(0, 20),
+  getVocabulary: () => {
+    return Promise.resolve({
+      items: manyOptions1000,
+    });
+  },
+};
+
+export default {
+  title: 'Widgets/SelectAutocomplete Widget',
+  component: SelectAutoCompleteComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+    getVocabulary: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  // excludeStories: ['searchResults'],
+  // subcomponents: { ArgsTable },
+};

package/src/components/manage/Widgets/SelectUtils.js

@@ -1,4 +1,4 @@
-import { find, isBoolean, isObject, isArray } from 'lodash';
+import { isBoolean, isObject, isString } from 'lodash';
 import { getBoolean } from '@plone/volto/helpers';
 import { defineMessages } from 'react-intl';
 
@@ -9,6 +9,67 @@ const messages = defineMessages({
   },
 });
 
+/**
+ * Prepares a vocab endpoint query for tokens based on passed value.
+ *
+ * This can be used to facilitate querying a vocabulary endpoint for labels,
+ * given some token values. This assumes that the value has already been
+ * normalized by normalizeValue.
+ */
+export function convertValueToVocabQuery(value) {
+  if (isString(value) || isBoolean(value)) return { token: value.toString() };
+
+  if (!value) return {};
+
+  if (Array.isArray(value)) {
+    return {
+      tokens: value
+        .map((v) =>
+          isObject(v)
+            ? v.value ?? v.token
+            : isString(v) || isBoolean(v)
+            ? v
+            : null,
+        )
+        .filter((f) => f !== null),
+    };
+  }
+
+  const token = value.value ?? value.token;
+  return isString(token) ? { token } : {};
+}
+
+/**
+ * Normalizes provided value to a "best representation" value, as accepted by
+ * react-select. In this case, it is an object of shape `{ label, value }`
+ */
+export function 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] };
+
+    throw new Error(`Unknown value type of select widget: ${value}`);
+  }
+
+  const token = value.token ?? value.value ?? '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,
+  };
+}
+
+export const normalizeChoices = (items, intl) =>
+  items.map((item) => normalizeSingleSelectOption(item, intl));
+
 /**
  * Given the value from the API, it normalizes to a value valid to use in react-select.
  * This is necessary because of the inconsistencies in p.restapi vocabularies implementations as
@@ -16,50 +77,49 @@ const messages = defineMessages({
  * @function normalizeValue
  * @param {array} choices The choices
  * @param {string|object|boolean|array} value The value
- * @returns {Object} An object of shape {label: "", value: ""}.
+ * @returns {Object} An object of shape {label: "", value: ""} (or an array)
  */
-export function normalizeValue(choices, value) {
+export function normalizeValue(choices, value, intl) {
+  choices = normalizeChoices(choices || [], intl);
+  const choiceMap = Object.assign(
+    {},
+    ...choices.map(({ label, value }) => ({
+      [value]: label,
+    })),
+  );
+
   if (!isObject(value) && isBoolean(value)) {
     // We have a boolean value, which means we need to provide a "No value"
     // option
-    const label = find(choices, (o) => getBoolean(o[0]) === value);
+    const label = choiceMap[getBoolean(value)];
     return label
       ? {
-          label: label[1],
+          label,
           value,
         }
       : {};
   }
-  if (value === undefined) return null;
-  if (!value || value.length === 0) return null;
   if (value === 'no-value') {
     return {
-      label: this.props.intl.formatMessage(messages.no_value),
+      label: intl.formatMessage(messages.no_value),
       value: 'no-value',
     };
   }
 
-  if (isArray(value) && choices.length > 0) {
-    return value.map((v) => ({
-      label: find(choices, (o) => o[0] === v)?.[1] || v,
-      value: v,
-    }));
-  } else if (isObject(value)) {
-    return {
-      label: value.title !== 'None' && value.title ? value.title : value.token,
-      value: value.token,
-    };
-  } else if (value && choices && choices.length > 0 && isArray(choices[0])) {
-    return { label: find(choices, (o) => o[0] === value)?.[1] || value, value };
-  } else if (
-    value &&
-    choices &&
-    choices.length > 0 &&
-    Object.keys(choices[0]).includes('value') &&
-    Object.keys(choices[0]).includes('label')
-  ) {
-    return find(choices, (o) => o.value === value) || null;
-  } else {
-    return null;
+  if (value === undefined || !value || value.length === 0) return null;
+
+  if (Array.isArray(value)) {
+    // a list of values, like ['foo', 'bar'];
+    return value.map((v) => normalizeValue(choices, v));
   }
+
+  if (isObject(value)) {
+    // an object like `{label, value}` or `{ title, value }`
+    return normalizeSingleSelectOption(value, intl);
+  }
+
+  // fallback: treat value as a token and look it up in choices
+  return Object.keys(choiceMap).includes(value)
+    ? { label: choiceMap[value], value }
+    : { label: value, value };
 }

package/src/components/manage/Widgets/SelectUtils.test.jsx

@@ -1,4 +1,4 @@
-import { normalizeValue } from './SelectUtils';
+import { normalizeValue, convertValueToVocabQuery } from './SelectUtils';
 
 describe('normalizeValue', () => {
   it('Given an object/object, p.restapi title/token', () => {
@@ -98,4 +98,79 @@ describe('normalizeValue', () => {
     const value = undefined;
     expect(normalizeValue(choices, value)).toStrictEqual(null);
   });
+
+  it('Given an array of tokenized value objects, with no choices', () => {
+    const choices = [];
+    const value = [
+      { title: 'Option 1', value: 'opt1' },
+      { title: 'Option 2', value: 'opt2' },
+    ];
+    expect(normalizeValue(choices, value)).toStrictEqual([
+      { label: 'Option 1', value: 'opt1' },
+      { label: 'Option 2', value: 'opt2' },
+    ]);
+  });
+
+  it('Given an array of strings, with no choices', () => {
+    const choices = [];
+    const value = ['opt1', 'opt2'];
+    expect(normalizeValue(choices, value)).toStrictEqual([
+      { label: 'opt1', value: 'opt1' },
+      { label: 'opt2', value: 'opt2' },
+    ]);
+  });
+});
+
+describe('convertValueToVocabQuery', () => {
+  it('converts an array of token/title to token query', () => {
+    const value = [
+      {
+        title: 'Option 1',
+        token: 'option1',
+      },
+      {
+        title: 'Option 100',
+        token: 'option100',
+      },
+      {
+        title: 'Option 103',
+        token: 'option103',
+      },
+    ];
+    expect(convertValueToVocabQuery(value)).toStrictEqual({
+      tokens: ['option1', 'option100', 'option103'],
+    });
+  });
+
+  it('converts an array of label/value to tokens query', () => {
+    const value = [
+      {
+        label: 'Option 1',
+        value: 'option1',
+      },
+      {
+        label: 'Option 100',
+        value: 'option100',
+      },
+      {
+        label: 'Option 103',
+        value: 'option103',
+      },
+    ];
+    expect(convertValueToVocabQuery(value)).toStrictEqual({
+      tokens: ['option1', 'option100', 'option103'],
+    });
+  });
+
+  it('converts arrays of strings to tokens query', () => {
+    const value = ['option1', 'option100', 'option103'];
+    expect(convertValueToVocabQuery(value)).toStrictEqual({
+      tokens: ['option1', 'option100', 'option103'],
+    });
+  });
+
+  it('converts a string to token query', () => {
+    const value = 'option1';
+    expect(convertValueToVocabQuery(value)).toStrictEqual({ token: 'option1' });
+  });
 });