@plone/volto 17.0.0-alpha.24 → 17.0.0-alpha.26

package/src/components/manage/Sharing/Sharing.jsx

@@ -145,6 +145,7 @@ class SharingComponent extends Component {
     this.onToggleInherit = this.onToggleInherit.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       inherit: props.inherit,
       entries: props.entries,
       isClient: false,
@@ -225,7 +226,17 @@ class SharingComponent extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isLoading: true });
+    this.props
+      .getSharing(getBaseUrl(this.props.pathname), this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users or groups', error);
+      });
   }
 
   /**
@@ -246,9 +257,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -296,7 +307,10 @@ class SharingComponent extends Component {
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Pluggable name="sharing-component" />
+          <Pluggable
+            name="sharing-component"
+            params={{ isLoading: this.state.isLoading }}
+          />
           <Plug pluggable="sharing-component" id="sharing-component-title">
             <Segment className="primary">
               <FormattedMessage
@@ -318,20 +332,29 @@ class SharingComponent extends Component {
             </Segment>
           </Plug>
           <Plug pluggable="sharing-component" id="sharing-component-search">
-            <Segment>
-              <Form onSubmit={this.onSearch}>
-                <Form.Field>
-                  <Input
-                    name="SearchableText"
-                    action={{ icon: 'search' }}
-                    placeholder={this.props.intl.formatMessage(
-                      messages.searchForUserOrGroup,
-                    )}
-                    onChange={this.onChangeSearch}
-                  />
-                </Form.Field>
-              </Form>
-            </Segment>
+            {({ isLoading }) => {
+              return (
+                <Segment>
+                  <Form onSubmit={this.onSearch}>
+                    <Form.Field>
+                      <Input
+                        name="SearchableText"
+                        action={{
+                          icon: 'search',
+                          loading: isLoading,
+                          disabled: isLoading,
+                        }}
+                        placeholder={this.props.intl.formatMessage(
+                          messages.searchForUserOrGroup,
+                        )}
+                        onChange={this.onChangeSearch}
+                        id="sharing-component-search"
+                      />
+                    </Form.Field>
+                  </Form>
+                </Segment>
+              );
+            }}
           </Plug>
           <Plug
             pluggable="sharing-component"
@@ -404,9 +427,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -14,6 +14,7 @@ import {
 } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
+import cx from 'classnames';
 
 const UniversalLink = ({
   href,
@@ -88,19 +89,16 @@ const UniversalLink = ({
   );
 
   if (isExternal) {
+    const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
     tag = (
       <a
         href={url}
         title={title}
         target={
-          !checkedURL.isMail &&
-          !checkedURL.isTelephone &&
-          !(openLinkInNewTab === false)
-            ? '_blank'
-            : null
+          !isTelephoneOrMail && !(openLinkInNewTab === false) ? '_blank' : null
         }
         rel="noopener noreferrer"
-        className={className}
+        className={cx({ external: !isTelephoneOrMail }, className)}
         {...props}
       >
         {children}

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

@@ -325,7 +325,9 @@ class ArrayWidget extends Component {
               : this.props.choices
               ? [
                   ...choices,
-                  ...(this.props.noValueOption && !this.props.default
+                  ...(this.props.noValueOption &&
+                  (this.props.default === undefined ||
+                    this.props.default === null)
                     ? [
                         {
                           label: this.props.intl.formatMessage(

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

@@ -2,7 +2,7 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { waitFor } from '@testing-library/react';
+import { waitFor, render, fireEvent } from '@testing-library/react';
 
 import ArrayWidget from './ArrayWidget';
 
@@ -41,3 +41,47 @@ test('renders an array widget component', async () => {
   await waitFor(() => {});
   expect(component.toJSON()).toMatchSnapshot();
 });
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <ArrayWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        noValueOption={true}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -96,7 +96,7 @@ class FormFieldWrapper extends Component {
         {this.props.children}
 
         {map(error, (message) => (
-          <Label key={message} basic color="red" pointing>
+          <Label key={message} basic color="red" className="form-error-label">
             {message}
           </Label>
         ))}

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

@@ -0,0 +1,210 @@
+/**
+ * RegistryImageWidget component.
+ * @module components/manage/Widgets/RegistryImageWidget
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Image, Dimmer } from 'semantic-ui-react';
+import { readAsDataURL } from 'promise-file-reader';
+import { injectIntl } from 'react-intl';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import loadable from '@loadable/component';
+import { defineMessages, useIntl } from 'react-intl';
+import { toPublicURL, validateFileUploadSize } from '@plone/volto/helpers';
+
+const imageMimetypes = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/jpg',
+  'image/gif',
+  'image/svg+xml',
+];
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  releaseDrag: {
+    id: 'Drop files here ...',
+    defaultMessage: 'Drop files here ...',
+  },
+  editFile: {
+    id: 'Drop file here to replace the existing file',
+    defaultMessage: 'Drop file here to replace the existing file',
+  },
+  fileDrag: {
+    id: 'Drop file here to upload a new file',
+    defaultMessage: 'Drop file here to upload a new file',
+  },
+  replaceFile: {
+    id: 'Replace existing file',
+    defaultMessage: 'Replace existing file',
+  },
+  addNewFile: {
+    id: 'Choose a file',
+    defaultMessage: 'Choose a file',
+  },
+});
+
+/**
+ * RegistryImageWidget component class.
+ * @function RegistryImageWidget
+ * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  widget: 'file',
+ * }
+ * ```
+ * or:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  type: 'object',
+ * }
+ * ```
+ *
+ */
+const RegistryImageWidget = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const intl = useIntl();
+
+  const fileName = value?.split(';')[0];
+  const imgsrc = fileName
+    ? `${toPublicURL('/')}@@site-logo/${atob(
+        fileName.replace('filenameb64:', ''),
+      )}`
+    : '';
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  const onDrop = (files) => {
+    const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
+
+    readAsDataURL(file).then((data) => {
+      const fields = data.match(/^data:(.*);(.*),(.*)$/);
+      onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+    });
+
+    let reader = new FileReader();
+    reader.onload = function () {
+      const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
+      if (imageMimetypes.includes(fields[1])) {
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        imagePreview.src = reader.result;
+      }
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Dropzone onDrop={onDrop}>
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div className="file-widget-dropzone" {...getRootProps()}>
+            {isDragActive && <Dimmer active></Dimmer>}
+            {imgsrc ? (
+              <Image
+                className="image-preview"
+                id={`field-${id}-image`}
+                size="small"
+                src={imgsrc}
+              />
+            ) : (
+              <div className="dropzone-placeholder">
+                {isDragActive ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.releaseDrag)}
+                  </p>
+                ) : value ? (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.editFile)}
+                  </p>
+                ) : (
+                  <p className="dropzone-text">
+                    {intl.formatMessage(messages.fileDrag)}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <label className="label-file-widget-input">
+              {value
+                ? intl.formatMessage(messages.replaceFile)
+                : intl.formatMessage(messages.addNewFile)}
+            </label>
+            <input
+              {...getInputProps({
+                type: 'file',
+                style: { display: 'none' },
+              })}
+              id={`field-${id}`}
+              name={id}
+              type="file"
+              disabled={isDisabled}
+            />
+          </div>
+        )}
+      </Dropzone>
+      <div className="field-file-name">
+        {value && (
+          <Button
+            icon
+            basic
+            className="delete-button"
+            aria-label="delete file"
+            disabled={isDisabled}
+            onClick={() => {
+              onChange(id, '');
+            }}
+          >
+            <Icon name={deleteSVG} size="20px" />
+          </Button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+RegistryImageWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.shape({
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+RegistryImageWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+};
+
+export default injectIntl(RegistryImageWidget);

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Provider } from 'react-intl-redux';
+import { render, waitFor } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import RegistryImageWidget from './RegistryImageWidget';
+
+import config from '@plone/volto/registry';
+
+jest.spyOn(global.Date, 'now').mockImplementation(() => '0');
+
+const mockStore = configureStore();
+
+beforeAll(() => {
+  config.settings.publicURL = 'http://localhost:3000';
+});
+
+describe('RegistryImageWidget', () => {
+  test('renders an empty file widget component', async () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <RegistryImageWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {});
+    expect(container).toMatchSnapshot();
+  });
+  test('renders a file widget component with value', async () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <RegistryImageWidget
+          id="my-field"
+          title="My field"
+          fieldSet="default"
+          onChange={() => {}}
+          value={
+            'filenameb64:bG9nby5jYWI5NDVkOC5zdmc=;datab64:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1OC4yNTNweCIgaGVpZ2h0PSI0MC42ODZweCIgdmlld0JveD0iMCAwIDE1OC4yNTMgNDAuNjg2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNTguMjUzIDQwLjY4NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgICAgICAgICAgPGc+PHBhdGggZmlsbD0iIzAwODZDMyIgZD0iTTY1LjMyNywyMy4yMDhoLTYuNTg5djExLjM4OGgtNC4zOTNWNS42MzhoMTAuOTgxYzUuNjUzLDAsOS4yNzEsMy43NDIsOS4yNzEsOC43ODUgICAgICAgICAgICAgICAgIFM3MC45NzksMjMuMjA4LDY1LjMyNywyMy4yMDh6IE02NS4wODIsOS41ODNoLTYuMzQ1djkuNjM5aDYuMzQ1YzMuMDUsMCw1LjEyNC0xLjc0OSw1LjEyNC00Ljc5OSAgICAgICAgICAgICAgICAgQzcwLjIwNiwxMS4zNzIsNjguMTMyLDkuNTgzLDY1LjA4Miw5LjU4M3oiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNODMuOTY5LDM0LjU5NmMtMy45MDQsMC01LjY1Mi0yLjY0NC01LjY1Mi01LjY5M1Y1LjYzOGg0LjE0OHYyMy4wMjFjMCwxLjU4NywwLjU2NywyLjM5OSwyLjIzNSwyLjM5OWgxLjgzICAgICAgICAgICAgICAgICB2My41MzhIODMuOTY5eiIvPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xMDQuNzYyLDMyLjM5OWMtMS4zNDQsMS4zODQtMy4zNzcsMi40NC02LjE4NCwyLjQ0Yy0yLjgwNSwwLTQuNzk5LTEuMDU4LTYuMTQxLTIuNDQgICAgICAgICAgICAgICAgIGMtMS45NTEtMi4wMzItMi40MzktNC42MzctMi40MzktOC4xMzRjMC0zLjQ1NywwLjQ4OC02LjA2MSwyLjQzOS04LjA5NGMxLjM0Mi0xLjM4MywzLjMzNi0yLjQ0LDYuMTQxLTIuNDQgICAgICAgICAgICAgICAgIGMyLjgwNywwLDQuODQsMS4wNTksNi4xODQsMi40NGMxLjk1MSwyLjAzMywyLjQzOSw0LjYzNywyLjQzOSw4LjA5NEMxMDcuMjAzLDI3Ljc2MywxMDYuNzEzLDMwLjM2NiwxMDQuNzYyLDMyLjM5OXogICAgICAgICAgICAgICAgICBNMTAxLjYyOSwxOC42MTNjLTAuNzczLTAuNzczLTEuODMtMS4xODEtMy4wNTEtMS4xODFjLTEuMjE5LDAtMi4yMzYsMC40MDYtMy4wMSwxLjE4MWMtMS4yNiwxLjI2MS0xLjQyMiwzLjQxNi0xLjQyMiw1LjY1MiAgICAgICAgICAgICAgICAgczAuMTYyLDQuMzkzLDEuNDIyLDUuNjUzYzAuNzczLDAuNzcxLDEuNzkxLDEuMjIsMy4wMSwxLjIyYzEuMjIxLDAsMi4yNzctMC40NDcsMy4wNTEtMS4yMmMxLjI2Mi0xLjI2MiwxLjQyNC0zLjQxNywxLjQyNC01LjY1MyAgICAgICAgICAgICAgICAgUzEwMi44OTEsMTkuODczLDEwMS42MjksMTguNjEzeiIvPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xMjMuNjQzLDM0LjU5NlYyMi4wMjljMC0zLjIxNC0xLjgzLTQuNTk3LTQuMTQ3LTQuNTk3cy00LjI3MSwxLjQyMy00LjI3MSw0LjU5N3YxMi41NjZoLTQuMTQ3di0yMC42MiAgICAgICAgICAgICAgICAgaDQuMDY1djIuMDc0YzEuNDI1LTEuNTQ2LDMuNDE2LTIuMzE4LDUuNDktMi4zMThjMi4xMTUsMCwzLjg2NSwwLjY5MSw1LjA4NCwxLjg3MWMxLjU4NiwxLjU0NSwyLjA3NCwzLjQ5NywyLjA3NCw1LjgxNXYxMy4xNzggICAgICAgICAgICAgICAgIEwxMjMuNjQzLDM0LjU5NkwxMjMuNjQzLDM0LjU5NnoiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNMTM1Ljc3MiwyNS40ODZjMCwzLjUzNywxLjg3MSw1Ljc3NCw1LjI0Niw1Ljc3NGMyLjMxNywwLDMuNTM5LTAuNjQ5LDUuMDA0LTIuMTE1bDIuNjQzLDIuNDgxICAgICAgICAgICAgICAgICBjLTIuMTE1LDIuMTE0LTQuMTA3LDMuMjEzLTcuNzI3LDMuMjEzYy01LjE2NiwwLTkuMjczLTIuNzI1LTkuMjczLTEwLjU3NGMwLTYuNjcxLDMuNDU3LTEwLjUzNCw4Ljc0NC0xMC41MzQgICAgICAgICAgICAgICAgIGM1LjUzMSwwLDguNzQ0LDQuMDY3LDguNzQ0LDkuOTI1djEuODNIMTM1Ljc3MnogTTE0NC40NzUsMTkuNzkxYy0wLjY1LTEuNTQ1LTIuMTEzLTIuNjA0LTQuMDY2LTIuNjA0ICAgICAgICAgICAgICAgICBjLTEuOTUxLDAtMy40NTcsMS4wNTktNC4xMDcsMi42MDRjLTAuNDA2LDAuOTM2LTAuNDg4LDEuNTQ2LTAuNTI5LDIuODA3aDkuMjczQzE0NS4wMDMsMjEuMzM3LDE0NC44ODMsMjAuNzI2LDE0NC40NzUsMTkuNzkxeiIvPjxjaXJjbGUgZmlsbD0iIzAwODZDMyIgY3g9IjE3LjgxNSIgY3k9IjExLjUxNiIgcj0iNC40MDIiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNMzEuMTY3LDIwLjMxMWMwLDIuNDMzLTEuOTY5LDQuNDAxLTQuNDAzLDQuNDAxYy0yLjQyNywwLTQuNDAxLTEuOTctNC40MDEtNC40MDEgICAgICAgICAgICAgICAgIGMwLTIuNDMzLDEuOTc1LTQuNDAxLDQuNDAxLTQuNDAxQzI5LjIsMTUuOTA5LDMxLjE2NywxNy44NzksMzEuMTY3LDIwLjMxMXoiLz48Y2lyY2xlIGZpbGw9IiMwMDg2QzMiIGN4PSIxNy44MDEiIGN5PSIyOS4xMzEiIHI9IjQuNDAyIi8+PGc+PHBhdGggZmlsbD0iIzAwODZDMyIgZD0iTTIwLjQ0MS0wLjA0NUM5LjIwNy0wLjA0NCwwLjEsOS4wNjMsMC4wOTksMjAuMjk4QzAuMSwzMS41MzIsOS4yMDcsNDAuNjM5LDIwLjQ0MSw0MC42NDEgICAgICAgICAgICAgICAgICAgICBjMTEuMjM1LTAuMDAyLDIwLjM0MS05LjEwNywyMC4zNDMtMjAuMzQzQzQwLjc4Myw5LjA2MywzMS42NzctMC4wNDQsMjAuNDQxLTAuMDQ1eiBNMzEuODkxLDMxLjc0NyAgICAgICAgICAgICAgICAgICAgIGMtMi45MzcsMi45MzQtNi45NzIsNC43NDItMTEuNDUsNC43NDNjLTQuNDc4LTAuMDAxLTguNTEzLTEuODExLTExLjQ1LTQuNzQzQzYuMDU4LDI4LjgxLDQuMjUsMjQuNzc1LDQuMjQ5LDIwLjI5OCAgICAgICAgICAgICAgICAgICAgIGMwLjAwMS00LjQ3OCwxLjgwOS04LjUxMyw0Ljc0My0xMS40NWMyLjkzNy0yLjkzNCw2Ljk3Mi00Ljc0MiwxMS40NS00Ljc0M2M0LjQ3OCwwLjAwMSw4LjUxMywxLjgxLDExLjQ1LDQuNzQzICAgICAgICAgICAgICAgICAgICAgYzIuOTM0LDIuOTM4LDQuNzQyLDYuOTczLDQuNzQzLDExLjQ1QzM2LjYzMywyNC43NzUsMzQuODI1LDI4LjgxLDMxLjg5MSwzMS43NDd6Ii8+PC9nPjxnPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xNTMuOTg1LDkuOTVjLTEuMTk1LDAtMi4xNjQsMC45NzEtMi4xNjQsMi4xNjhjMC4wMDIsMS4xOTcsMC45NjksMi4xNjgsMi4xNjQsMi4xNjggICAgICAgICAgICAgICAgICAgICBjMS4xOTksMCwyLjE3Mi0wLjk3MSwyLjE3Mi0yLjE2OFMxNTUuMTg0LDkuOTUsMTUzLjk4NSw5Ljk1eiBNMTUzLjk4NSwxMy45NjhjLTEuMDIxLTAuMDAyLTEuODQ2LTAuODI3LTEuODQ2LTEuODUgICAgICAgICAgICAgICAgICAgICBjMC4wMDItMS4wMjEsMC44MjUtMS44NDksMS44NDYtMS44NTFjMS4wMjMsMC4wMDIsMS44NTIsMC44MjgsMS44NTQsMS44NTFDMTU1LjgzNiwxMy4xNDEsMTU1LjAwOCwxMy45NjYsMTUzLjk4NSwxMy45Njh6Ii8+PC9nPjxnPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xNTQuNTA3LDEzLjQwOWwtMC41NC0xLjA4aC0wLjQ4NnYxLjA4aC0wLjM4OXYtMi41NjRoMC45OTRjMC40ODQsMCwwLjc5NiwwLjMxMywwLjc5NiwwLjc1ICAgICAgICAgICAgICAgICAgICAgYzAsMC4zNjctMC4yMjQsMC42MDItMC41MTMsMC42OGwwLjU5MiwxLjEzNkwxNTQuNTA3LDEzLjQwOUwxNTQuNTA3LDEzLjQwOXogTTE1NC4wNTYsMTEuMTk1aC0wLjU3NXYwLjgwM2gwLjU3NSBjMC4yNjEsMCwwLjQzNy0wLjE0NywwLjQzNy0wLjM5OVMxNTQuMzE3LDExLjE5NSwxNTQuMDU2LDExLjE5NXoiLz48L2c+PC9nPgogICAgICAgICAgICAgICAgICA8L3N2Zz4=}'
+          }
+        />
+      </Provider>,
+    );
+
+    await waitFor(() => {});
+    expect(container).toMatchSnapshot();
+  });
+  // test('renders a file widget component with value in raw data', async () => {
+  //   const store = mockStore({
+  //     intl: {
+  //       locale: 'en',
+  //       messages: {},
+  //     },
+  //   });
+
+  //   const { container } = render(
+  //     <Provider store={store}>
+  //       <RegistryImageWidget
+  //         id="my-field"
+  //         title="My field"
+  //         fieldSet="default"
+  //         onChange={() => {}}
+  //         value={
+  //           'filenameb64:bG9nby5jYWI5NDVkOC5zdmc=;datab64:PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1OC4yNTNweCIgaGVpZ2h0PSI0MC42ODZweCIgdmlld0JveD0iMCAwIDE1OC4yNTMgNDAuNjg2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNTguMjUzIDQwLjY4NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgICAgICAgICAgICAgPGc+PHBhdGggZmlsbD0iIzAwODZDMyIgZD0iTTY1LjMyNywyMy4yMDhoLTYuNTg5djExLjM4OGgtNC4zOTNWNS42MzhoMTAuOTgxYzUuNjUzLDAsOS4yNzEsMy43NDIsOS4yNzEsOC43ODUgICAgICAgICAgICAgICAgIFM3MC45NzksMjMuMjA4LDY1LjMyNywyMy4yMDh6IE02NS4wODIsOS41ODNoLTYuMzQ1djkuNjM5aDYuMzQ1YzMuMDUsMCw1LjEyNC0xLjc0OSw1LjEyNC00Ljc5OSAgICAgICAgICAgICAgICAgQzcwLjIwNiwxMS4zNzIsNjguMTMyLDkuNTgzLDY1LjA4Miw5LjU4M3oiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNODMuOTY5LDM0LjU5NmMtMy45MDQsMC01LjY1Mi0yLjY0NC01LjY1Mi01LjY5M1Y1LjYzOGg0LjE0OHYyMy4wMjFjMCwxLjU4NywwLjU2NywyLjM5OSwyLjIzNSwyLjM5OWgxLjgzICAgICAgICAgICAgICAgICB2My41MzhIODMuOTY5eiIvPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xMDQuNzYyLDMyLjM5OWMtMS4zNDQsMS4zODQtMy4zNzcsMi40NC02LjE4NCwyLjQ0Yy0yLjgwNSwwLTQuNzk5LTEuMDU4LTYuMTQxLTIuNDQgICAgICAgICAgICAgICAgIGMtMS45NTEtMi4wMzItMi40MzktNC42MzctMi40MzktOC4xMzRjMC0zLjQ1NywwLjQ4OC02LjA2MSwyLjQzOS04LjA5NGMxLjM0Mi0xLjM4MywzLjMzNi0yLjQ0LDYuMTQxLTIuNDQgICAgICAgICAgICAgICAgIGMyLjgwNywwLDQuODQsMS4wNTksNi4xODQsMi40NGMxLjk1MSwyLjAzMywyLjQzOSw0LjYzNywyLjQzOSw4LjA5NEMxMDcuMjAzLDI3Ljc2MywxMDYuNzEzLDMwLjM2NiwxMDQuNzYyLDMyLjM5OXogICAgICAgICAgICAgICAgICBNMTAxLjYyOSwxOC42MTNjLTAuNzczLTAuNzczLTEuODMtMS4xODEtMy4wNTEtMS4xODFjLTEuMjE5LDAtMi4yMzYsMC40MDYtMy4wMSwxLjE4MWMtMS4yNiwxLjI2MS0xLjQyMiwzLjQxNi0xLjQyMiw1LjY1MiAgICAgICAgICAgICAgICAgczAuMTYyLDQuMzkzLDEuNDIyLDUuNjUzYzAuNzczLDAuNzcxLDEuNzkxLDEuMjIsMy4wMSwxLjIyYzEuMjIxLDAsMi4yNzctMC40NDcsMy4wNTEtMS4yMmMxLjI2Mi0xLjI2MiwxLjQyNC0zLjQxNywxLjQyNC01LjY1MyAgICAgICAgICAgICAgICAgUzEwMi44OTEsMTkuODczLDEwMS42MjksMTguNjEzeiIvPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xMjMuNjQzLDM0LjU5NlYyMi4wMjljMC0zLjIxNC0xLjgzLTQuNTk3LTQuMTQ3LTQuNTk3cy00LjI3MSwxLjQyMy00LjI3MSw0LjU5N3YxMi41NjZoLTQuMTQ3di0yMC42MiAgICAgICAgICAgICAgICAgaDQuMDY1djIuMDc0YzEuNDI1LTEuNTQ2LDMuNDE2LTIuMzE4LDUuNDktMi4zMThjMi4xMTUsMCwzLjg2NSwwLjY5MSw1LjA4NCwxLjg3MWMxLjU4NiwxLjU0NSwyLjA3NCwzLjQ5NywyLjA3NCw1LjgxNXYxMy4xNzggICAgICAgICAgICAgICAgIEwxMjMuNjQzLDM0LjU5NkwxMjMuNjQzLDM0LjU5NnoiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNMTM1Ljc3MiwyNS40ODZjMCwzLjUzNywxLjg3MSw1Ljc3NCw1LjI0Niw1Ljc3NGMyLjMxNywwLDMuNTM5LTAuNjQ5LDUuMDA0LTIuMTE1bDIuNjQzLDIuNDgxICAgICAgICAgICAgICAgICBjLTIuMTE1LDIuMTE0LTQuMTA3LDMuMjEzLTcuNzI3LDMuMjEzYy01LjE2NiwwLTkuMjczLTIuNzI1LTkuMjczLTEwLjU3NGMwLTYuNjcxLDMuNDU3LTEwLjUzNCw4Ljc0NC0xMC41MzQgICAgICAgICAgICAgICAgIGM1LjUzMSwwLDguNzQ0LDQuMDY3LDguNzQ0LDkuOTI1djEuODNIMTM1Ljc3MnogTTE0NC40NzUsMTkuNzkxYy0wLjY1LTEuNTQ1LTIuMTEzLTIuNjA0LTQuMDY2LTIuNjA0ICAgICAgICAgICAgICAgICBjLTEuOTUxLDAtMy40NTcsMS4wNTktNC4xMDcsMi42MDRjLTAuNDA2LDAuOTM2LTAuNDg4LDEuNTQ2LTAuNTI5LDIuODA3aDkuMjczQzE0NS4wMDMsMjEuMzM3LDE0NC44ODMsMjAuNzI2LDE0NC40NzUsMTkuNzkxeiIvPjxjaXJjbGUgZmlsbD0iIzAwODZDMyIgY3g9IjE3LjgxNSIgY3k9IjExLjUxNiIgcj0iNC40MDIiLz48cGF0aCBmaWxsPSIjMDA4NkMzIiBkPSJNMzEuMTY3LDIwLjMxMWMwLDIuNDMzLTEuOTY5LDQuNDAxLTQuNDAzLDQuNDAxYy0yLjQyNywwLTQuNDAxLTEuOTctNC40MDEtNC40MDEgICAgICAgICAgICAgICAgIGMwLTIuNDMzLDEuOTc1LTQuNDAxLDQuNDAxLTQuNDAxQzI5LjIsMTUuOTA5LDMxLjE2NywxNy44NzksMzEuMTY3LDIwLjMxMXoiLz48Y2lyY2xlIGZpbGw9IiMwMDg2QzMiIGN4PSIxNy44MDEiIGN5PSIyOS4xMzEiIHI9IjQuNDAyIi8+PGc+PHBhdGggZmlsbD0iIzAwODZDMyIgZD0iTTIwLjQ0MS0wLjA0NUM5LjIwNy0wLjA0NCwwLjEsOS4wNjMsMC4wOTksMjAuMjk4QzAuMSwzMS41MzIsOS4yMDcsNDAuNjM5LDIwLjQ0MSw0MC42NDEgICAgICAgICAgICAgICAgICAgICBjMTEuMjM1LTAuMDAyLDIwLjM0MS05LjEwNywyMC4zNDMtMjAuMzQzQzQwLjc4Myw5LjA2MywzMS42NzctMC4wNDQsMjAuNDQxLTAuMDQ1eiBNMzEuODkxLDMxLjc0NyAgICAgICAgICAgICAgICAgICAgIGMtMi45MzcsMi45MzQtNi45NzIsNC43NDItMTEuNDUsNC43NDNjLTQuNDc4LTAuMDAxLTguNTEzLTEuODExLTExLjQ1LTQuNzQzQzYuMDU4LDI4LjgxLDQuMjUsMjQuNzc1LDQuMjQ5LDIwLjI5OCAgICAgICAgICAgICAgICAgICAgIGMwLjAwMS00LjQ3OCwxLjgwOS04LjUxMyw0Ljc0My0xMS40NWMyLjkzNy0yLjkzNCw2Ljk3Mi00Ljc0MiwxMS40NS00Ljc0M2M0LjQ3OCwwLjAwMSw4LjUxMywxLjgxLDExLjQ1LDQuNzQzICAgICAgICAgICAgICAgICAgICAgYzIuOTM0LDIuOTM4LDQuNzQyLDYuOTczLDQuNzQzLDExLjQ1QzM2LjYzMywyNC43NzUsMzQuODI1LDI4LjgxLDMxLjg5MSwzMS43NDd6Ii8+PC9nPjxnPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xNTMuOTg1LDkuOTVjLTEuMTk1LDAtMi4xNjQsMC45NzEtMi4xNjQsMi4xNjhjMC4wMDIsMS4xOTcsMC45NjksMi4xNjgsMi4xNjQsMi4xNjggICAgICAgICAgICAgICAgICAgICBjMS4xOTksMCwyLjE3Mi0wLjk3MSwyLjE3Mi0yLjE2OFMxNTUuMTg0LDkuOTUsMTUzLjk4NSw5Ljk1eiBNMTUzLjk4NSwxMy45NjhjLTEuMDIxLTAuMDAyLTEuODQ2LTAuODI3LTEuODQ2LTEuODUgICAgICAgICAgICAgICAgICAgICBjMC4wMDItMS4wMjEsMC44MjUtMS44NDksMS44NDYtMS44NTFjMS4wMjMsMC4wMDIsMS44NTIsMC44MjgsMS44NTQsMS44NTFDMTU1LjgzNiwxMy4xNDEsMTU1LjAwOCwxMy45NjYsMTUzLjk4NSwxMy45Njh6Ii8+PC9nPjxnPjxwYXRoIGZpbGw9IiMwMDg2QzMiIGQ9Ik0xNTQuNTA3LDEzLjQwOWwtMC41NC0xLjA4aC0wLjQ4NnYxLjA4aC0wLjM4OXYtMi41NjRoMC45OTRjMC40ODQsMCwwLjc5NiwwLjMxMywwLjc5NiwwLjc1ICAgICAgICAgICAgICAgICAgICAgYzAsMC4zNjctMC4yMjQsMC42MDItMC41MTMsMC42OGwwLjU5MiwxLjEzNkwxNTQuNTA3LDEzLjQwOUwxNTQuNTA3LDEzLjQwOXogTTE1NC4wNTYsMTEuMTk1aC0wLjU3NXYwLjgwM2gwLjU3NSBjMC4yNjEsMCwwLjQzNy0wLjE0NywwLjQzNy0wLjM5OVMxNTQuMzE3LDExLjE5NSwxNTQuMDU2LDExLjE5NXoiLz48L2c+PC9nPgogICAgICAgICAgICAgICAgICA8L3N2Zz4=}'
+  //         }
+  //       />
+  //     </Provider>,
+  //   );
+
+  //   await waitFor(() => {});
+  //   expect(container).toMatchSnapshot();
+  // });
+});

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

@@ -167,6 +167,19 @@ class SelectWidget extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
   /**
    * Render method.
    * @method render
@@ -190,7 +203,8 @@ class SelectWidget extends Component {
           })),
           // Only set "no-value" option if there's no default in the field
           // TODO: also if this.props.defaultValue?
-          ...(this.props.noValueOption && !this.props.default
+          ...(this.props.noValueOption &&
+          (this.props.default === undefined || this.props.default === null)
             ? [
                 {
                   label: this.props.intl.formatMessage(messages.no_value),

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

@@ -1,7 +1,7 @@
 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 { waitFor, render, screen, fireEvent } from '@testing-library/react';
 
 import SelectWidget from './SelectWidget';
 
@@ -43,3 +43,47 @@ test('renders a select widget component', async () => {
   await waitFor(() => screen.getByText('My field'));
   expect(container).toMatchSnapshot();
 });
+
+test("No 'No value' option when default value is 0", async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const choices = [
+    ['0', 'None'],
+    ['1', 'One'],
+  ];
+
+  const value = {
+    value: '0',
+    label: 'None',
+  };
+
+  const _default = 0;
+
+  const { container } = render(
+    <Provider store={store}>
+      <SelectWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        choices={choices}
+        default={_default}
+        value={value}
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('None'));
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__dropdown-indicator'),
+    { button: 0 },
+  );
+  expect(container).toMatchSnapshot();
+});