@plone/volto 17.0.0-alpha.9 → 17.0.1

package/src/components/manage/Contents/ContentsTagsModal.jsx

@@ -1,15 +1,10 @@
-/**
- * Contents tags modal.
- * @module components/manage/Contents/ContentsTagsModal
- */
-
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { updateContent } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -32,133 +27,91 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ContentsTagsModal class.
- * @class ContentsTagsModal
- * @extends Component
- */
-class ContentsTagsModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    updateContent: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        subjects: PropTypes.arrayOf(PropTypes.string),
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentsUploadModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+const ContentsTagsModal = (props) => {
+  const { items, open, onCancel, onOk } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.content.update);
+  const prevrequestloading = usePrevious(request.loading);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.request.loading && nextProps.request.loaded) {
-      this.props.onOk();
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
     }
-  }
+  }, [onOk, prevrequestloading, request.loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {Object} data Form data
-   * @returns {undefined}
-   */
-  onSubmit({ tags_to_add = [], tags_to_remove = [] }) {
-    this.props.updateContent(
-      map(this.props.items, (item) => item.url),
-      map(this.props.items, (item) => ({
-        subjects: [
-          ...new Set(
-            (item.subjects ?? [])
-              .filter((s) => !tags_to_remove.includes(s))
-              .concat(tags_to_add),
-          ),
-        ],
-      })),
-    );
-  }
+  const onSubmit = useCallback(
+    ({ tags_to_add = [], tags_to_remove = [] }) => {
+      dispatch(
+        updateContent(
+          map(items, (item) => item.url),
+          map(items, (item) => ({
+            subjects: [
+              ...new Set(
+                (item.subjects ?? [])
+                  .filter((s) => !tags_to_remove.includes(s))
+                  .concat(tags_to_add),
+              ),
+            ],
+          })),
+        ),
+      );
+    },
+    [dispatch, items],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const currentSetTags = [
-      ...new Set(this.props.items.map((item) => item.subjects).flat()),
-    ];
+  const currentSetTags = useMemo(
+    () => [...new Set(items.map((item) => item.subjects).flat())],
+    [items],
+  );
 
-    return (
-      this.props.open && (
-        <ModalForm
-          open={this.props.open}
-          onSubmit={this.onSubmit}
-          onCancel={this.props.onCancel}
-          title={this.props.intl.formatMessage(messages.tags)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['tags_to_remove', 'tags_to_add'],
-              },
-            ],
-            properties: {
-              tags_to_remove: {
-                type: 'array',
-                widget: 'array',
-                title: this.props.intl.formatMessage(messages.tagsToRemove),
-                choices: currentSetTags.map((tag) => [tag, tag]),
-              },
-              tags_to_add: {
-                type: 'array',
-                widget: 'token',
-                title: this.props.intl.formatMessage(messages.tagsToAdd),
-                items: {
-                  vocabulary: { '@id': 'plone.app.vocabularies.Keywords' },
-                },
+  return (
+    open && (
+      <ModalForm
+        open={open}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        title={intl.formatMessage(messages.tags)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['tags_to_remove', 'tags_to_add'],
+            },
+          ],
+          properties: {
+            tags_to_remove: {
+              type: 'array',
+              widget: 'array',
+              title: intl.formatMessage(messages.tagsToRemove),
+              choices: currentSetTags.map((tag) => [tag, tag]),
+            },
+            tags_to_add: {
+              type: 'array',
+              widget: 'token',
+              title: intl.formatMessage(messages.tagsToAdd),
+              items: {
+                vocabulary: { '@id': 'plone.app.vocabularies.Keywords' },
               },
             },
-            required: [],
-          }}
-        />
-      )
-    );
-  }
-}
+          },
+          required: [],
+        }}
+      />
+    )
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.content.update,
+ContentsTagsModal.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      subjects: PropTypes.arrayOf(PropTypes.string),
+      url: PropTypes.string,
     }),
-    { updateContent },
-  ),
-)(ContentsTagsModal);
+  ).isRequired,
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+export default ContentsTagsModal;

package/src/components/manage/Contents/ContentsTagsModal.stories.jsx

@@ -0,0 +1,68 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ContentsTagsModalComponent from './ContentsTagsModal';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import { bool } from 'prop-types';
+
+const IntlContentTagsModalComponent = injectIntl(ContentsTagsModalComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        content: {
+          update: {
+            loading: false,
+            loaded: true,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContentTagsModalComponent
+        {...args}
+        onOk={() => {}}
+        onCancel={() => {}}
+        items={[
+          {
+            ...args,
+            url: '/blog',
+          },
+        ]}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContentTagsModal = StoryComponent.bind({});
+
+ContentTagsModal.args = {
+  subjects: ['plone 6 ', 'plone 5', 'plone'],
+  open: true,
+};
+
+export default {
+  title: 'Public components/Contents/Content Tags Modal',
+  component: ContentTagsModal,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    subjects: {
+      context: 'json',
+      description: 'Added tags',
+    },
+    open: {
+      context: bool,
+      description: 'open/close modal',
+    },
+  },
+};

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -25,6 +25,7 @@ import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
+import { validateFileUploadSize } from '@plone/volto/helpers';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -34,8 +35,7 @@ const messages = defineMessages({
     defaultMessage: 'Cancel',
   },
   upload: {
-    id:
-      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
     defaultMessage:
       '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
   },
@@ -121,14 +121,18 @@ class ContentsUploadModal extends Component {
    * @returns {undefined}
    */
   onDrop = async (files) => {
+    const validFiles = [];
     for (let i = 0; i < files.length; i++) {
-      await readAsDataURL(files[i]).then((data) => {
-        const fields = data.match(/^data:(.*);(.*),(.*)$/);
-        files[i].preview = fields[0];
-      });
+      if (validateFileUploadSize(files[i], this.props.intl.formatMessage)) {
+        await readAsDataURL(files[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          files[i].preview = fields[0];
+        });
+        validFiles.push(files[i]);
+      }
     }
     this.setState({
-      files: concat(this.state.files, files),
+      files: concat(this.state.files, validFiles),
     });
   };
 

package/src/components/manage/Contents/ContentsWorkflowModal.jsx

@@ -1,15 +1,10 @@
-/**
- * Contents workflow modal.
- * @module components/manage/Contents/ContentsWorkflowModal
- */
-
-import React, { Component } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { concat, filter, last, map, uniqBy } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import { usePrevious } from '@plone/volto/helpers';
 import { getWorkflow, transitionWorkflow } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
 
@@ -37,158 +32,96 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ContentsWorkflowModal class.
- * @class ContentsWorkflowModal
- * @extends Component
- */
-class ContentsWorkflowModal extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getWorkflow: PropTypes.func.isRequired,
-    transitionWorkflow: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(PropTypes.string).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    workflows: PropTypes.arrayOf(
-      PropTypes.shape({
-        transition: PropTypes.shape({
-          '@id': PropTypes.string,
-          title: PropTypes.string,
-        }),
-      }),
-    ).isRequired,
-    open: PropTypes.bool.isRequired,
-    onOk: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs ContentsUploadModal
-   */
-  constructor(props) {
-    super(props);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
+const ContentsWorkflowModal = (props) => {
+  const { onOk, items, open, onCancel } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const request = useSelector((state) => state.workflow.transition);
+  const workflows = useSelector(
+    (state) => state.workflow.multiple,
+    shallowEqual,
+  );
+  const prevrequestloading = usePrevious(request.loading);
 
-  componentDidMount() {
-    this.props.getWorkflow(this.props.items);
-  }
+  useEffect(() => {
+    dispatch(getWorkflow(items));
+  }, [dispatch, items]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.request.loading && nextProps.request.loaded) {
-      this.props.onOk();
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
     }
-  }
+  }, [onOk, prevrequestloading, request.loaded]);
 
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {string} state New state
-   * @returns {undefined}
-   */
-  onSubmit({ state, include_children }) {
-    if (!state) {
-      return;
-    }
-
-    this.props.transitionWorkflow(
-      filter(
-        map(
-          concat(
-            ...map(this.props.workflows, (workflow) => workflow.transitions),
+  const onSubmit = useCallback(
+    ({ state, include_children }) => {
+      if (!state) {
+        return;
+      }
+      dispatch(
+        transitionWorkflow(
+          filter(
+            map(
+              concat(...map(workflows, (workflow) => workflow.transitions)),
+              (item) => item['@id'],
+            ),
+            (x) => last(x.split('/')) === state,
           ),
-          (item) => item['@id'],
+          include_children,
         ),
-        (x) => last(x.split('/')) === state,
-      ),
-      include_children,
-    );
-  }
+      );
+    },
+    [dispatch, workflows],
+  );
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      this.props.open &&
-      this.props.workflows.length > 0 && (
-        <ModalForm
-          open={this.props.open}
-          loading={this.props.request.loading}
-          loadingMessage={this.props.intl.formatMessage(
-            messages.loadingMessage,
-          )}
-          onSubmit={this.onSubmit}
-          onCancel={this.props.onCancel}
-          title={this.props.intl.formatMessage(messages.stateTitle)}
-          schema={{
-            fieldsets: [
-              {
-                id: 'default',
-                title: this.props.intl.formatMessage(messages.default),
-                fields: ['state', 'include_children'],
-              },
-            ],
-            properties: {
-              state: {
-                description: this.props.intl.formatMessage(
-                  messages.stateDescription,
-                ),
-                title: this.props.intl.formatMessage(messages.stateTitle),
-                type: 'string',
-                choices: map(
-                  uniqBy(
-                    concat(
-                      ...map(
-                        this.props.workflows,
-                        (workflow) => workflow.transitions,
-                      ),
-                    ),
-                    (x) => x.title,
-                  ),
-                  (y) => [last(y['@id'].split('/')), y.title],
-                ),
-              },
-              include_children: {
-                title: this.props.intl.formatMessage(
-                  messages.includeChildrenTitle,
+  return (
+    open &&
+    workflows.length > 0 && (
+      <ModalForm
+        open={open}
+        loading={request.loading}
+        loadingMessage={intl.formatMessage(messages.loadingMessage)}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+        title={intl.formatMessage(messages.stateTitle)}
+        schema={{
+          fieldsets: [
+            {
+              id: 'default',
+              title: intl.formatMessage(messages.default),
+              fields: ['state', 'include_children'],
+            },
+          ],
+          properties: {
+            state: {
+              description: intl.formatMessage(messages.stateDescription),
+              title: intl.formatMessage(messages.stateTitle),
+              type: 'string',
+              choices: map(
+                uniqBy(
+                  concat(...map(workflows, (workflow) => workflow.transitions)),
+                  (x) => x.title,
                 ),
-                type: 'boolean',
-              },
+                (y) => [last(y['@id'].split('/')), y.title],
+              ),
             },
-            required: [],
-          }}
-        />
-      )
-    );
-  }
-}
+            include_children: {
+              title: intl.formatMessage(messages.includeChildrenTitle),
+              type: 'boolean',
+            },
+          },
+          required: [],
+        }}
+      />
+    )
+  );
+};
+
+ContentsWorkflowModal.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+  open: PropTypes.bool.isRequired,
+  onOk: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.workflow.transition,
-      workflows: state.workflow.multiple,
-    }),
-    { getWorkflow, transitionWorkflow },
-  ),
-)(ContentsWorkflowModal);
+export default ContentsWorkflowModal;

package/src/components/manage/Controlpanels/Aliases.jsx

@@ -185,12 +185,8 @@ class Aliases extends Component {
       }
     }
     if (this.props.aliases.add.loading && nextProps.aliases.add.loaded) {
-      const {
-        filterQuery,
-        filterType,
-        createdBefore,
-        itemsPerPage,
-      } = this.state;
+      const { filterQuery, filterType, createdBefore, itemsPerPage } =
+        this.state;
 
       this.props.getAliases(getBaseUrl(this.props.pathname), {
         query: filterQuery,
@@ -212,12 +208,8 @@ class Aliases extends Component {
       }
     }
     if (this.props.aliases.remove.loading && nextProps.aliases.remove.loaded) {
-      const {
-        filterQuery,
-        filterType,
-        createdBefore,
-        itemsPerPage,
-      } = this.state;
+      const { filterQuery, filterType, createdBefore, itemsPerPage } =
+        this.state;
 
       this.props.getAliases(getBaseUrl(this.props.pathname), {
         query: filterQuery,