Added global form state (#5721) (#5788)

Co-authored-by: Rob Gietema <rob.gietema@gmail.com>

news/5721.feature

@@ -0,0 +1 @@
+Add global form state. @robgietema

packages/volto-slate/news/5779.bugfix

@@ -0,0 +1 @@
+Fix sidebar form update. @robgietema

packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { map, remove } from 'lodash';
+import { isEmpty, map, remove } from 'lodash';
 import { Button, Table } from 'semantic-ui-react';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -227,7 +227,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    if (!this.props.data.table) {
+    if (!this.props.data.table || isEmpty(this.props.data.table)) {
       this.props.onChangeBlock(this.props.block, {
         ...this.props.data,
         table: initialTable,
@@ -243,7 +243,7 @@ class Edit extends Component {
    * @returns {undefined}
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.data.table) {
+    if (!nextProps.data.table || isEmpty(nextProps.data.table)) {
       this.props.onChangeBlock(nextProps.block, {
         ...nextProps.data,
         table: initialTable,
@@ -528,10 +528,7 @@ class Edit extends Component {
                 icon
                 basic
                 onClick={this.onDeleteRow}
-                disabled={
-                  this.props.data.table &&
-                  this.props.data.table.rows.length === 1
-                }
+                disabled={this.props.data.table?.rows?.length === 1}
                 title={this.props.intl.formatMessage(messages.deleteRow)}
                 aria-label={this.props.intl.formatMessage(messages.deleteRow)}
               >
@@ -569,10 +566,7 @@ class Edit extends Component {
                 icon
                 basic
                 onClick={this.onDeleteCol}
-                disabled={
-                  this.props.data.table &&
-                  this.props.data.table.rows[0].cells.length === 1
-                }
+                disabled={this.props.data.table?.rows?.[0].cells.length === 1}
                 title={this.props.intl.formatMessage(messages.deleteCol)}
                 aria-label={this.props.intl.formatMessage(messages.deleteCol)}
               >

packages/volto/news/5779.bugfix

@@ -0,0 +1 @@
+Fix sidebar form update. @robgietema

src/actions/form/form.js

@@ -0,0 +1,19 @@
+/**
+ * Form actions.
+ * @module actions/form/form
+ */
+
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+/**
+ * Set form data function.
+ * @function setFormData
+ * @param {Object} data New form data.
+ * @returns {Object} Set sidebar action.
+ */
+export function setFormData(data) {
+  return {
+    type: SET_FORM_DATA,
+    data,
+  };
+}

src/actions/form/form.test.js

@@ -0,0 +1,14 @@
+import { setFormData } from './form';
+import { SET_FORM_DATA } from '@plone/volto/constants/ActionTypes';
+
+describe('Form action', () => {
+  describe('setFormData', () => {
+    it('should create an action to set the form data', () => {
+      const data = { foo: 'bar' };
+      const action = setFormData(data);
+
+      expect(action.type).toEqual(SET_FORM_DATA);
+      expect(action.data).toEqual(data);
+    });
+  });
+});

src/actions/index.js

@@ -150,6 +150,7 @@ export {
 export { getQuerystring } from '@plone/volto/actions/querystring/querystring';
 export { getQueryStringResults } from '@plone/volto/actions/querystringsearch/querystringsearch';
 export { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
+export { setFormData } from '@plone/volto/actions/form/form';
 export {
   deleteLinkTranslation,
   getTranslationLocator,

src/components/manage/Add/Add.jsx

@@ -359,6 +359,7 @@ class Add extends Component {
             onSelectForm={() => {
               this.setState({ formSelected: 'addForm' });
             }}
+            global
           />
           {this.state.isClient && (
             <Portal node={document.getElementById('toolbar')}>

src/components/manage/Edit/Edit.jsx

@@ -307,6 +307,7 @@ class Edit extends Component {
         onSelectForm={() => {
           this.setState({ formSelected: 'editForm' });
         }}
+        global
       />
     );