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

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -53,6 +53,7 @@ const DragDropList = (props) => {
   const {
     childList,
     children,
+    direction = 'vertical',
     onMoveItem,
     as = 'div',
     style,
@@ -128,6 +129,7 @@ const DragDropList = (props) => {
     >
       <Droppable
         droppableId={uid}
+        direction={direction}
         renderClone={(provided, snapshot, rubric) => {
           const index = rubric.source.index;
           return children({
@@ -160,19 +162,22 @@ const DragDropList = (props) => {
                 </Draggable>
               ))}
             {provided.placeholder}
-            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: placeholderProps.clientY,
-                  left: placeholderProps.clientX,
-                  height: placeholderProps.clientHeight,
-                  background: '#eee',
-                  width: placeholderProps.clientWidth,
-                  borderRadius: '3px',
-                }}
-              />
-            )}
+            {/* TODO: Fix the ghost problem if horizontal dnd is present */}
+            {direction !== 'horizontal' &&
+              !isEmpty(placeholderProps) &&
+              snapshot.isDraggingOver && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: placeholderProps.clientY,
+                    left: placeholderProps.clientX,
+                    height: placeholderProps.clientHeight,
+                    background: '#eee',
+                    width: placeholderProps.clientWidth,
+                    borderRadius: '3px',
+                  }}
+                />
+              )}
           </AsDomComponent>
         )}
       </Droppable>

package/src/components/manage/Form/BlockDataForm.jsx

@@ -5,7 +5,7 @@ import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
 const EnhancedBlockDataForm = withVariationSchemaEnhancer(InlineForm);
 
 export default function BlockDataForm(props) {
-  const { onChangeBlock, block } = props;
+  const { onChangeBlock, block, applySchemaEnhancers = true } = props;
 
   if (!onChangeBlock) {
     // eslint-disable-next-line no-console
@@ -19,8 +19,9 @@ export default function BlockDataForm(props) {
     [block, onChangeBlock],
   );
 
+  const Form = applySchemaEnhancers ? EnhancedBlockDataForm : InlineForm;
   return (
-    <EnhancedBlockDataForm
+    <Form
       {...props}
       onChangeFormData={onChangeBlock ? onChangeFormData : undefined}
     />

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -8,23 +8,25 @@ import { Provider } from 'react-intl-redux';
 
 const mockStore = configureStore();
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
-  };
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
 
-  // NOTE: onChangeBlock here is not "really" implemented
+    // NOTE: onChangeBlock here is not "really" implemented
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeBlock={(block, data) => onChangeFormData(data)}
-      formData={formData}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeBlock={(block, data) => onChangeFormData(data)}
+        formData={formData}
+      />
+    );
+  };
 
 beforeAll(() => {
   config.widgets = {
@@ -72,7 +74,7 @@ beforeAll(() => {
 });
 
 describe('BlockDataForm', () => {
-  it('should does not add variations to schema when unneeded', () => {
+  it('should not add variations to schema when unneeded', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -103,7 +105,7 @@ describe('BlockDataForm', () => {
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
 
-  it('should does not add variations when only one variation', () => {
+  it('should not add variations when only one variation', () => {
     const WrappedBlockDataForm = withStateManagement(BlockDataForm);
     const store = mockStore({
       intl: {
@@ -164,4 +166,36 @@ describe('BlockDataForm', () => {
     // schema is cloned, not mutated in place
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
+
+  it('should not add variations to schema when explicitly disabled', () => {
+    const WrappedBlockDataForm = withStateManagement(BlockDataForm);
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <WrappedBlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+          applySchemaEnhancers={false}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+
+    // schema is cloned, not mutated in place
+    expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
+  });
 });

package/src/components/manage/Form/Form.jsx

@@ -31,7 +31,7 @@ import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
 import {
   Button,
-  Container,
+  Container as SemanticContainer,
   Form as UiForm,
   Message,
   Segment,
@@ -229,9 +229,8 @@ class Form extends Component {
     let activeIndex = 0;
 
     if (requestError && prevProps.requestError !== requestError) {
-      errors = FormValidation.giveServerErrorsToCorrespondingFields(
-        requestError,
-      );
+      errors =
+        FormValidation.giveServerErrorsToCorrespondingFields(requestError);
       activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
@@ -545,12 +544,14 @@ class Form extends Component {
     const { schema: originalSchema, onCancel, onSubmit } = this.props;
     const { formData } = this.state;
     const schema = this.removeBlocksLayoutFields(originalSchema);
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
     return this.props.visual ? (
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up
       this.state.isClient && (
-        <div className="ui container">
+        <Container>
           <BlocksToolbar
             formData={this.state.formData}
             selectedBlock={this.state.selected}
@@ -639,7 +640,7 @@ class Form extends Component {
               </UiForm>
             </Portal>
           )}
-        </div>
+        </Container>
       )
     ) : (
       <Container>

package/src/components/manage/Form/InlineForm.jsx

@@ -4,13 +4,21 @@ import { Accordion, Segment, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
-
+import { useAtom } from 'jotai';
+import { inlineFormFieldsetsState } from './InlineFormState';
+import {
+  insertInArray,
+  removeFromArray,
+  arrayRange,
+} from '@plone/volto/helpers/Utils/Utils';
 import { Field, Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   editValues: {
     id: 'Edit values',
@@ -70,12 +78,34 @@ const InlineForm = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [currentActiveFieldset, setCurrentActiveFieldset] = React.useState(0);
+  const [currentActiveFieldset, setCurrentActiveFieldset] = useAtom(
+    inlineFormFieldsetsState({
+      name: block,
+      fielsetList: other,
+      initialState: config.settings.blockSettingsTabFieldsetsInitialStateOpen
+        ? arrayRange(0, other.length - 1, 1)
+        : [],
+    }),
+  );
+
   function handleCurrentActiveFieldset(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = currentActiveFieldset === index ? -1 : index;
-
-    setCurrentActiveFieldset(newIndex);
+    if (currentActiveFieldset.includes(index)) {
+      setCurrentActiveFieldset(
+        removeFromArray(
+          currentActiveFieldset,
+          currentActiveFieldset.indexOf(index),
+        ),
+      );
+    } else {
+      setCurrentActiveFieldset(
+        insertInArray(
+          currentActiveFieldset,
+          index,
+          currentActiveFieldset.length + 1,
+        ),
+      );
+    }
   }
 
   return (
@@ -136,22 +166,22 @@ const InlineForm = (props) => {
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
             <Accordion.Title
-              active={currentActiveFieldset === index}
+              active={currentActiveFieldset.includes(index)}
               index={index}
               onClick={handleCurrentActiveFieldset}
             >
               {fieldset.title && <>{fieldset.title}</>}
-              {currentActiveFieldset === index ? (
+              {currentActiveFieldset.includes(index) ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
             </Accordion.Title>
-            <Accordion.Content active={currentActiveFieldset === index}>
+            <Accordion.Content active={currentActiveFieldset.includes(index)}>
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={currentActiveFieldset === index ? 'auto' : 0}
+                height={currentActiveFieldset.includes(index) ? 'auto' : 0}
               >
                 <Segment className="attached">
                   {map(fieldset.fields, (field) => (

package/src/components/manage/Form/InlineForm.test.jsx

@@ -19,22 +19,24 @@ function NewBaseWidget(name) {
   );
 }
 
-const withStateManagement = (Component) => ({ ...props }) => {
-  const [formData, onChangeFormData] = React.useState(props.formData || {});
-  const onChangeField = (id, value) => {
-    onChangeFormData({ ...formData, [id]: value });
+const withStateManagement =
+  (Component) =>
+  ({ ...props }) => {
+    const [formData, onChangeFormData] = React.useState(props.formData || {});
+    const onChangeField = (id, value) => {
+      onChangeFormData({ ...formData, [id]: value });
+    };
+
+    return (
+      <Component
+        {...props}
+        onChangeField={onChangeField}
+        onChangeFormData={onChangeFormData}
+        formData={formData}
+      />
+    );
   };
 
-  return (
-    <Component
-      {...props}
-      onChangeField={onChangeField}
-      onChangeFormData={onChangeFormData}
-      formData={formData}
-    />
-  );
-};
-
 beforeAll(() => {
   config.widgets.default = NewBaseWidget('default');
   config.widgets.type.boolean = NewBaseWidget('boolean');

package/src/components/manage/Form/InlineFormState.js

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { isEqual } from 'lodash';
+
+export const inlineFormFieldsetsState = atomFamily(
+  ({ name, initialState }) => atom(initialState),
+  (a, b) => a.name === b.name && isEqual(a.fielsetList, b.fielsetList),
+);

package/src/components/manage/History/History.jsx

@@ -9,7 +9,13 @@ import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  Dropdown,
+  Icon,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
 import { concat, map, reverse, find } from 'lodash';
 import { Portal } from 'react-portal';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
@@ -24,6 +30,7 @@ import {
 } from '@plone/volto/components';
 import { getHistory, revertHistory, listActions } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -147,6 +154,9 @@ class History extends Component {
     });
     const entries = this.processHistoryEntries();
 
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return !historyAction ? (
       <>
         {this.props.token ? (

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

@@ -0,0 +1,209 @@
+/**
+ * LinksToItem component
+ * @module components/manage/LinksToItem/LinksToItem
+ */
+import { useEffect } from 'react';
+import { find } from 'lodash';
+import { Helmet } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import { Portal } from 'react-portal';
+import { Container, Segment, Table } from 'semantic-ui-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { getContent, queryRelations } from '@plone/volto/actions';
+import {
+  Icon as IconNext,
+  Toolbar,
+  UniversalLink,
+} from '@plone/volto/components';
+
+import { getBaseUrl } from '@plone/volto/helpers';
+import backSVG from '@plone/volto/icons/back.svg';
+import settingsSVG from '@plone/volto/icons/settings.svg';
+
+const messages = defineMessages({
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  linkstoitem: {
+    id: 'Links and references',
+    defaultMessage: 'Links and references',
+  },
+  helpLinkRelationsControlPanel: {
+    id: 'Overview of relations of all content items',
+    defaultMessage: 'Overview of relations of all content items',
+  },
+});
+
+const LinksToItem = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const pathname = props.location.pathname;
+  const itempath = getBaseUrl(pathname);
+
+  const title = useSelector((state) => state.content.data?.title || '');
+  const myrelations = useSelector(
+    (state) => state.relations.subrequests[itempath]?.data,
+  );
+  const actions = useSelector((state) => state.actions?.actions ?? {});
+  const ploneSetupAction = find(actions.user, {
+    id: 'plone_setup',
+  });
+
+  useEffect(() => {
+    dispatch(queryRelations(null, false, itempath, null, [itempath]));
+  }, [dispatch, itempath]);
+
+  useEffect(() => {
+    if (!title) dispatch(getContent(itempath));
+  }, [dispatch, itempath, title]);
+
+  let links = {};
+  if (myrelations) {
+    Object.keys(myrelations).forEach((relationtype) => {
+      links[relationtype] = {};
+      myrelations[relationtype].items.forEach((item) => {
+        links[relationtype][item.source.UID] = item.source;
+      });
+    });
+  }
+
+  let links_ordered = {};
+  Object.keys(links).forEach((relationtype) => {
+    links_ordered[relationtype] = Object.values(links[relationtype]).sort(
+      (link) => link['@id'],
+    );
+  });
+
+  const relations_found = Object.keys(links_ordered).length > 0;
+  return (
+    <Container id="linkstoitem">
+      <Helmet title={intl.formatMessage(messages.linkstoitem)} />
+      <Segment.Group raised>
+        <Segment className="primary">
+          <FormattedMessage
+            id="Content that links to or references {title}"
+            defaultMessage="Content that links to or references {title}"
+            values={{ title: <q>{title}</q> }}
+          />
+        </Segment>
+        {relations_found ? (
+          <Table selectable compact singleLine attached>
+            {
+              <Table.Body>
+                {Object.keys(links_ordered).map((relationtype) => {
+                  return [].concat(
+                    [
+                      <Table.Row>
+                        <Table.HeaderCell>
+                          {relationtype === 'isReferencing' ? (
+                            <FormattedMessage
+                              id="Linking this item with hyperlink in text"
+                              defaultMessage="Linking this item with hyperlink in text"
+                            />
+                          ) : relationtype === 'relatedItems' ? (
+                            <FormattedMessage
+                              id="Referencing this item as related item"
+                              defaultMessage="Referencing this item as related item"
+                            />
+                          ) : (
+                            <>
+                              <FormattedMessage
+                                id="Referencing this item with {relationship}"
+                                defaultMessage="Referencing this item with {relationship}"
+                                values={{ relationship: <q>{relationtype}</q> }}
+                              />
+                            </>
+                          )}
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage
+                            id="Review state"
+                            defaultMessage="Review state"
+                          />
+                        </Table.HeaderCell>
+                        <Table.HeaderCell>
+                          <FormattedMessage id="Type" defaultMessage="Type" />
+                        </Table.HeaderCell>
+                      </Table.Row>,
+                    ],
+                    links_ordered[relationtype].map((link) => {
+                      return (
+                        <Table.Row key={link['@id']}>
+                          <Table.Cell>
+                            <UniversalLink
+                              href={link['@id']}
+                              className={`source ${link.review_state}`}
+                            >
+                              <span className="label" title={link.type_title}>
+                                {link.title}
+                              </span>
+                            </UniversalLink>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.review_state}</span>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <span>{link.type_title || ''}</span>
+                          </Table.Cell>
+                        </Table.Row>
+                      );
+                    }),
+                  );
+                })}
+              </Table.Body>
+            }
+          </Table>
+        ) : (
+          <Segment secondary>
+            <FormattedMessage
+              id="No links to this item found."
+              defaultMessage="No links to this item found."
+            />
+          </Segment>
+        )}
+      </Segment.Group>
+      {__CLIENT__ && (
+        <Portal node={document.getElementById('toolbar')}>
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Link to={itempath} className="item">
+                  <IconNext
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
+                    title={intl.formatMessage(messages.back)}
+                  />
+                </Link>
+
+                <>
+                  {ploneSetupAction ? (
+                    <Link to="/controlpanel/relations" className="relations">
+                      <IconNext
+                        name={settingsSVG}
+                        className="circled"
+                        aria-label={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                        size="30px"
+                        title={intl.formatMessage(
+                          messages.helpLinkRelationsControlPanel,
+                        )}
+                      />
+                    </Link>
+                  ) : null}
+                </>
+              </>
+            }
+          />
+        </Portal>
+      )}
+    </Container>
+  );
+};
+
+export default LinksToItem;