@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

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

@@ -100,6 +100,7 @@ export const InternalUrlWidget = (props) => {
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
               aria-label="clearUrlBrowser"
@@ -115,6 +116,7 @@ export const InternalUrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
               aria-label="openUrlBrowser"

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

@@ -82,6 +82,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
     placeholder: PropTypes.string,
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -98,6 +99,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     return: 'multiple',
     initialPath: '',
     allowExternals: false,
+    onlyFolderishSelectable: false,
   };
 
   state = {
@@ -315,6 +317,9 @@ export class ObjectBrowserWidgetComponent extends Component {
       maximumSelectionSize:
         this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
         this.props.maximumSelectionSize,
+      onlyFolderishSelectable:
+        this.props.widgetOptions?.pattern_options?.onlyFolderishSelectable ||
+        this.props.onlyFolderishSelectable,
     });
   };
 
@@ -399,6 +404,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           {this.state.manualLinkInput && isEmpty(items) && (
             <Button.Group>
               <Button
+                type="button"
                 basic
                 className="cancel"
                 onClick={(e) => {
@@ -409,6 +415,7 @@ export class ObjectBrowserWidgetComponent extends Component {
                 <Icon name={clearSVG} size="18px" color="#e40166" />
               </Button>
               <Button
+                type="button"
                 basic
                 primary
                 disabled={!this.state.validURL}
@@ -423,6 +430,7 @@ export class ObjectBrowserWidgetComponent extends Component {
           )}
           {!this.state.manualLinkInput && (
             <Button
+              type="button"
               aria-label={this.props.intl.formatMessage(
                 messages.openObjectBrowser,
               )}

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

@@ -4,17 +4,8 @@ import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import ObjectListWidget from './ObjectListWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -5,11 +5,7 @@ import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
 import ObjectWidget from './ObjectWidget';
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 

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

@@ -15,8 +15,12 @@ import groupBy from 'lodash/groupBy';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import { defineMessages, injectIntl } from 'react-intl';
+import { withRouter } from 'react-router';
 import { getQuerystring } from '@plone/volto/actions/querystring/querystring';
+import { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
+import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
@@ -43,8 +47,27 @@ const messages = defineMessages({
     id: 'querystring-widget-select',
     defaultMessage: 'Select…',
   },
+  currentPath: {
+    id: 'query-widget-currentPath',
+    defaultMessage: 'Current path (./)',
+  },
+  parentPath: {
+    id: 'query-widget-parentPath',
+    defaultMessage: 'Parent path (../)',
+  },
 });
 
+const parseUidDepth = (val) => {
+  if (typeof val !== 'string') return { uid: '', depth: 1 };
+  const lastSep = String(val).lastIndexOf('::');
+  if (lastSep !== -1) {
+    const uid = val.substring(0, lastSep);
+    const parsed = parseInt(val.substring(lastSep + 2), 10);
+    return { uid, depth: Number.isNaN(parsed) ? 1 : parsed };
+  }
+  return { uid: val, depth: 1 };
+};
+
 /**
  * Widget for a querystring value, to define a catalog search criteria.
  */
@@ -97,6 +120,7 @@ export class QuerystringWidgetComponent extends Component {
     };
     this.onChangeValue = this.onChangeValue.bind(this);
     this.getWidget = this.getWidget.bind(this);
+    this.loadReferenceWidgetItem = this.loadReferenceWidgetItem.bind(this);
   }
 
   /**
@@ -111,6 +135,27 @@ export class QuerystringWidgetComponent extends Component {
     this.props.getQuerystring();
   }
 
+  loadReferenceWidgetItem(v) {
+    const loading =
+      this.props.reference[`${v}_query_reference`]?.loading ?? false;
+    if (!loading && v?.length > 0) {
+      this.props.getQueryStringResults(
+        '/',
+        {
+          b_size: 1,
+          query: [
+            {
+              i: 'path',
+              o: 'plone.app.querystring.operation.string.absolutePath',
+              v: v + '::0',
+            },
+          ],
+        },
+        v + '_query_reference',
+      );
+    }
+  }
+
   /**
    * Get correct widget
    * @method getWidget
@@ -118,15 +163,16 @@ export class QuerystringWidgetComponent extends Component {
    * @param {number} index Row index.
    * @returns {Object} Widget.
    */
-  getWidget(row, index, Select) {
+  getWidget(row, index, Select, intl) {
     const props = {
       fluid: true,
       value: row.v,
       onChange: (data) => this.onChangeValue(index, data.target.value),
     };
     const values = this.props.indexes[row.i].values;
+    const operator = this.props.indexes[row.i].operators[row.o];
 
-    switch (this.props.indexes[row.i].operators[row.o].widget) {
+    switch (operator.widget) {
       case null:
         return <span />;
       case 'DateWidget':
@@ -217,13 +263,93 @@ export class QuerystringWidgetComponent extends Component {
           </Form.Field>
         );
       case 'ReferenceWidget':
+        const { uid: uidValue, depth: depthValue } = parseUidDepth(props.value);
+        if (!this.props.reference[`${uidValue}_query_reference`]) {
+          this.loadReferenceWidgetItem(uidValue);
+        }
+        const referenceItem = this.props.reference[
+          `${uidValue}_query_reference`
+        ]
+          ? this.props.reference[`${uidValue}_query_reference`].items[0]
+          : null;
+        return (
+          <div className="location-object-browser">
+            <Form.Field className="object-browser-field">
+              <ObjectBrowserWidget
+                id={`query-reference-widget-${index}`}
+                mode="link"
+                onChange={(id, data) => {
+                  const itemSelected = data.length > 0 ? data[0] : {};
+                  const uid = itemSelected.UID ?? '';
+                  this.onChangeValue(index, uid ? `${uid}::${depthValue}` : '');
+                  this.loadReferenceWidgetItem(uid);
+                }}
+                value={uidValue && this.props.reference ? [referenceItem] : []}
+                wrapped={false}
+                onlyFolderishSelectable={true}
+                allowExternals={true}
+              />
+            </Form.Field>
+
+            {uidValue && (
+              <Form.Field className="reference-widget-depth">
+                <NumberWidget
+                  title={intl.formatMessage({
+                    id: 'Depth',
+                    defaultMessage: 'Depth',
+                  })}
+                  min={1}
+                  step={1}
+                  value={depthValue}
+                  onChange={(id, value) => {
+                    const newDepth = parseInt(value, 10) || 1;
+                    const curUid = uidValue || '';
+                    this.onChangeValue(index, `${curUid}::${newDepth}`);
+                  }}
+                />
+              </Form.Field>
+            )}
+          </div>
+        );
+      case 'RelativePathWidget':
+        const relativePathOptions = [
+          {
+            label: intl.formatMessage(messages.currentPath),
+            value: './',
+          },
+          {
+            label: intl.formatMessage(messages.parentPath),
+            value: '../',
+          },
+        ];
+        return (
+          <Form.Field style={{ flex: '1 0 auto', maxWidth: '92%' }}>
+            <Select
+              {...props}
+              className="react-select-container"
+              classNamePrefix="react-select"
+              options={relativePathOptions}
+              styles={customSelectStyles}
+              placeholder={this.props.intl.formatMessage(messages.select)}
+              theme={selectTheme}
+              components={{ DropdownIndicator, Option }}
+              onChange={(data) => {
+                this.onChangeValue(index, data.value);
+              }}
+              isMulti={false}
+              value={
+                relativePathOptions.filter((p) => p.value === props.value)?.[0]
+              }
+            />
+          </Form.Field>
+        );
       default:
         // if (row.o === 'plone.app.querystring.operation.string.relativePath') {
         //   props.onChange = data => this.onChangeValue(index, data.target.value);
         // }
         return (
           <Form.Field style={{ flex: '1 0 auto' }}>
-            <Input {...props} />
+            <Input {...props} description={operator.description} />
           </Form.Field>
         );
     }
@@ -334,7 +460,7 @@ export class QuerystringWidgetComponent extends Component {
                             value: row.i,
                             label: indexes[row.i]?.title,
                           }}
-                          onChange={(data) =>
+                          onChange={(data) => {
                             onChange(
                               id,
                               map(value, (curRow, curIndex) =>
@@ -346,8 +472,8 @@ export class QuerystringWidgetComponent extends Component {
                                     }
                                   : curRow,
                               ),
-                            )
-                          }
+                            );
+                          }}
                         />
                       </Form.Field>
                       <Form.Field style={{ flex: '1 0 auto' }}>
@@ -408,7 +534,7 @@ export class QuerystringWidgetComponent extends Component {
                         </Button>
                       )}
                     </div>
-                    {this.getWidget(row, index, Select)}
+                    {this.getWidget(row, index, Select, intl)}
                     {this.props.indexes[row.i].operators[row.o].widget && (
                       <Button
                         onClick={(event) => {
@@ -500,10 +626,12 @@ export class QuerystringWidgetComponent extends Component {
 export default compose(
   injectIntl,
   injectLazyLibs(['reactSelect']),
+  withRouter,
   connect(
-    (state) => ({
+    (state, props) => ({
       indexes: state.querystring.indexes,
+      reference: state.querystringsearch.subrequests,
     }),
-    { getQuerystring },
+    { getQuerystring, getQueryStringResults },
   ),
 )(QuerystringWidgetComponent);

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

@@ -7,12 +7,7 @@ import RadioGroupWidget from './RadioGroupWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -5,12 +5,7 @@ import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
 import RecurrenceWidget from './RecurrenceWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -99,7 +99,7 @@ const RegistryImageWidget = (props) => {
 
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}`);
     });
 
     let reader = new FileReader();

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

@@ -20,6 +20,7 @@ const createStore = () =>
       locale: 'en',
       messages: {},
     },
+    site: { data: { 'plone.image_scales': { preview: {}, listing: {} } } },
   });
 
 describe('RegistryImageWidget', () => {
@@ -82,10 +83,11 @@ describe('RegistryImageWidget', () => {
         const dropzone = container.querySelector('.file-widget-dropzone');
         const preview = container.querySelector('.image-preview');
         const filename = container.querySelector('.field-file-name');
+        const img = container.querySelector('img[src*="logo"]');
 
-        return dropzone && preview && filename;
+        return dropzone && preview && filename && img && img.complete;
       },
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     expect(container).toMatchSnapshot();

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

@@ -5,12 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import SchemaWidget from './SchemaWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -3,12 +3,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -105,6 +105,7 @@ class SelectAutoComplete extends Component {
     error: [],
     choices: [],
     value: null,
+    isMulti: true,
   };
 
   /**
@@ -127,10 +128,16 @@ class SelectAutoComplete extends Component {
   componentDidMount() {
     const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
-      const tokensQuery = convertValueToVocabQuery(
-        normalizeValue(choices, value, this.props.intl),
-      );
-
+      let tokensQuery;
+      if (typeof value === 'string') {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, [value], this.props.intl),
+        );
+      } else {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, value, this.props.intl),
+        );
+      }
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
         subrequest: `widget-${id}-${lang}`,
@@ -160,13 +167,22 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
-      selectedOption ? selectedOption.map((item) => item.value) : null,
-    );
-    this.setState((state) => ({
-      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
-    }));
+    if (!Array.isArray(selectedOption)) {
+      this.props.onChange(this.props.id, selectedOption?.value || null);
+      if (selectedOption) {
+        this.setState((state) => ({
+          termsPairsCache: [...state.termsPairsCache, selectedOption],
+        }));
+      }
+    } else {
+      this.props.onChange(
+        this.props.id,
+        selectedOption ? selectedOption.map((item) => item.value) : null,
+      );
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+      }));
+    }
   }
 
   timeoutRef = React.createRef();
@@ -251,7 +267,8 @@ class SelectAutoComplete extends Component {
             this.props.intl.formatMessage(messages.select)
           }
           onChange={this.handleChange}
-          isMulti
+          isMulti={this.props.isMulti}
+          isClearable={!this.props.isMulti}
         />
       </FormFieldWrapper>
     );

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

@@ -6,12 +6,7 @@ import SelectAutoComplete from './SelectAutoComplete';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -6,12 +6,7 @@ import SelectWidget from './SelectWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/Size.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof Size> = {
+  title: 'Edit Widgets/Size',
+  component: Size,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Size widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Size>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof Size> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <Size
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultSize: Story = {
+  render: Template,
+  args: {
+    id: 'size',
+    title: 'Size',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};

package/src/components/manage/Widgets/Size.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const onChange = props.onChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'size',
+    title: 'Size',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...props,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <Size {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('Size widget', () => {
+  it('renders the default size options', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Small' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Medium' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Large' })).toBeInTheDocument();
+  });
+
+  it('returns the selected size name', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Medium' }));
+
+    expect(onChange).toHaveBeenCalledWith('size', 'm');
+  });
+});