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

package/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx

@@ -17,7 +17,11 @@ import {
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { messages } from '@plone/volto/helpers';
 import { Icon, Toast } from '@plone/volto/components';
-import { rebuildRelations, queryRelations } from '@plone/volto/actions';
+import {
+  getRelationStats,
+  queryRelations,
+  rebuildRelations,
+} from '@plone/volto/actions';
 import RelationsListing from './RelationsListing';
 import BrokenRelations from './BrokenRelations';
 import helpSVG from '@plone/volto/icons/help.svg';
@@ -39,12 +43,14 @@ const RelationsMatrix = (props) => {
     id: 'plone_setup',
   });
 
-  const relationtypes = useSelector((state) => state.relations?.stats?.stats);
+  const relationtypes = useSelector(
+    (state) => state.relations?.stats?.data?.stats,
+  );
   const relationsListError = useSelector(
-    (state) => state.relations?.list?.error?.response?.body?.error,
+    (state) => state.relations?.stats?.error?.response?.body?.error,
   );
   const brokenRelations = useSelector(
-    (state) => state.relations?.stats?.broken,
+    (state) => state.relations?.stats?.data?.broken,
   );
 
   let filter_options = useSelector((state) => state.groups.filter_groups);
@@ -67,7 +73,7 @@ const RelationsMatrix = (props) => {
   }
 
   useEffect(() => {
-    dispatch(queryRelations());
+    dispatch(getRelationStats());
   }, [dispatch]);
 
   const onReset = (event) => {
@@ -128,9 +134,7 @@ const RelationsMatrix = (props) => {
   const rebuildRelationsHandler = (flush = false) => {
     dispatch(rebuildRelations(flush))
       .then(() => {
-        dispatch(queryRelations());
-      })
-      .then(() => {
+        dispatch(getRelationStats());
         dispatch(queryRelations(null, true, 'broken'));
       })
       .then(() => {
@@ -443,7 +447,9 @@ const RelationsMatrix = (props) => {
               ) : null}
             </div>
           ) : (
-            <p>{relationsListError?.message}</p>
+            <p>
+              <b>{relationsListError?.type}</b> {relationsListError?.message}
+            </p>
           )}
         </Tab.Pane>
       ),

package/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx

@@ -107,6 +107,7 @@ class UsersControlpanel extends Component {
       isClient: false,
       currentPage: 0,
       pageSize: 10,
+      loginUsingEmail: false,
     };
   }
 
@@ -122,6 +123,14 @@ class UsersControlpanel extends Component {
     }
   };
 
+  // Because username field needs to be disabled if email login is enabled!
+  checkLoginUsingEmailStatus = async () => {
+    await this.props.getControlpanel('security');
+    this.setState({
+      loginUsingEmail: this.props.controlPanelData?.data.use_email_as_login,
+    });
+  };
+
   /**
    * Component did mount
    * @method componentDidMount
@@ -132,6 +141,7 @@ class UsersControlpanel extends Component {
       isClient: true,
     });
     this.fetchData();
+    this.checkLoginUsingEmailStatus();
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -425,7 +435,7 @@ class UsersControlpanel extends Component {
                     id: 'default',
                     title: 'FIXME: User Data',
                     fields: [
-                      'username',
+                      ...(!this.state.loginUsingEmail ? ['username'] : []),
                       'fullname',
                       'email',
                       'password',
@@ -436,15 +446,19 @@ class UsersControlpanel extends Component {
                   },
                 ],
                 properties: {
-                  username: {
-                    title: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameTitle,
-                    ),
-                    type: 'string',
-                    description: this.props.intl.formatMessage(
-                      messages.addUserFormUsernameDescription,
-                    ),
-                  },
+                  ...(!this.state.loginUsingEmail
+                    ? {
+                        username: {
+                          title: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameTitle,
+                          ),
+                          type: 'string',
+                          description: this.props.intl.formatMessage(
+                            messages.addUserFormUsernameDescription,
+                          ),
+                        },
+                      }
+                    : {}),
                   fullname: {
                     title: this.props.intl.formatMessage(
                       messages.addUserFormFullnameTitle,
@@ -670,6 +684,7 @@ export default compose(
       createRequest: state.users.create,
       loadRolesRequest: state.roles,
       inheritedRole: state.authRole.authenticatedRole,
+      controlPanelData: state.controlpanels?.controlpanel,
     }),
     (dispatch) =>
       bindActionCreators(

package/src/components/manage/Diff/DiffField.jsx

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
 import { DefaultView } from '@plone/volto/components/';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -69,7 +70,7 @@ const DiffField = ({
             .replace('\u202F', ' '),
         );
         break;
-      case 'json':
+      case 'json': {
         const api = new Api();
         const history = createBrowserHistory();
         const store = configureStore(window.__data, history, api);
@@ -90,6 +91,29 @@ const DiffField = ({
           ),
         );
         break;
+      }
+      case 'slate': {
+        const api = new Api();
+        const history = createBrowserHistory();
+        const store = configureStore(window.__data, history, api);
+        parts = diffWords(
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(one)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+          ReactDOMServer.renderToStaticMarkup(
+            <Provider store={store}>
+              <ConnectedRouter history={history}>
+                {serializeNodes(two)}
+              </ConnectedRouter>
+            </Provider>,
+          ),
+        );
+        break;
+      }
       case 'textarea':
       default:
         parts = diffWords(one, two);

package/src/components/manage/LinksToItem/LinksToItem.jsx

@@ -44,7 +44,7 @@ const LinksToItem = (props) => {
 
   const title = useSelector((state) => state.content.data?.title || '');
   const myrelations = useSelector(
-    (state) => state.relations.subrequests[itempath]?.relations,
+    (state) => state.relations.subrequests[itempath]?.data,
   );
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {

package/src/components/manage/LinksToItem/LinksToItem.test.jsx

@@ -20,7 +20,7 @@ describe('LinksToItem', () => {
       relations: {
         subrequests: {
           '/page-1': {
-            relations: {
+            data: {
               isReferencing: {
                 items: [
                   {

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

@@ -246,9 +246,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -404,9 +404,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/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/theme/Comments/Comment.stories.jsx

@@ -0,0 +1,84 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import CommentsComponent from './Comments';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlCommentsComponent = injectIntl(CommentsComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        comments: {
+          items: [
+            {
+              '@id': 'someurl',
+              comment_id: '1614094601171408',
+              ...args,
+              is_deletable: true,
+              is_editable: true,
+              can_reply: true,
+            },
+          ],
+          permissions: {
+            view_comments: true,
+            can_reply: true,
+          },
+          add: {
+            loading: false,
+            loaded: true,
+          },
+          delete: {
+            loading: false,
+            loaded: true,
+          },
+          update: {
+            loading: false,
+            loaded: true,
+          },
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlCommentsComponent {...args} />
+    </Wrapper>
+  );
+}
+
+export const CommentsModal = StoryComponent.bind({});
+CommentsModal.args = {
+  author_name: 'admin',
+  creation_date: '2017-11-06T19:36:01',
+  text: { data: 'Plone 6' },
+};
+export default {
+  title: 'Public components/Comments/Comments Modal',
+  component: CommentsComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    creation_date: {
+      control: 'date',
+      description: 'Date comment was created',
+    },
+    author_name: {
+      control: 'text',
+      description: 'Comment author name',
+    },
+    text: {
+      data: {
+        control: 'date',
+      },
+      description: 'Comment text',
+    },
+  },
+};