@plone/volto 14.0.0 → 14.1.1

package/src/components/manage/Widgets/VocabularyTermsWidget.stories.js

@@ -1,17 +1,19 @@
 import VocabularyTermsWidget from './VocabularyTermsWidget';
-import Wrapper from '@plone/volto/storybook';
 import React from 'react';
 
-const customStore = {
-  userSession: { token: '1234' },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-};
+import WidgetStory from './story';
 
-const WrappedJSONField = (args) => {
-  const [value, setValue] = React.useState({
+export const JSONField = WidgetStory.bind({
+  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
+  widget: VocabularyTermsWidget,
+  customStore: {
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  },
+  initialValue: {
     items: [
       {
         token: 'talk',
@@ -30,60 +32,24 @@ const WrappedJSONField = (args) => {
         },
       },
     ],
-  });
-  const onChange = (block, value) => setValue(value);
-
-  return (
-    <Wrapper
-      location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStore}
-    >
-      <div className="ui segment form attached">
-        <VocabularyTermsWidget
-          {...args}
-          id="simplevocabulary"
-          title="Vocabulary terms"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-        <pre>{JSON.stringify(value, null, 4)}</pre>
-      </div>
-    </Wrapper>
-  );
-};
+  },
+});
 
-const WrappedSimple = (args) => {
-  const [value, setValue] = React.useState({
+export const Simple = WidgetStory.bind({
+  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
+  widget: VocabularyTermsWidget,
+  customStore: {
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  },
+  initialValue: {
     '001': 'manual',
     '002': 'questions & answers',
-  });
-  const onChange = (block, value) => setValue(value);
-
-  return (
-    <Wrapper
-      location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStore}
-    >
-      <div className="ui segment form attached">
-        <VocabularyTermsWidget
-          {...args}
-          id="Simple"
-          title="Vocabulary terms"
-          block="testBlock"
-          value={value}
-          value_type={{
-            schema: {
-              type: 'string',
-            },
-          }}
-          onChange={onChange}
-        />
-        <pre>{JSON.stringify(value, null, 4)}</pre>
-      </div>
-    </Wrapper>
-  );
-};
+  },
+});
 
 export default {
   title: 'Widgets/Vocabulary',
@@ -96,6 +62,3 @@ export default {
     ),
   ],
 };
-
-export const JSONField = () => <WrappedJSONField />;
-export const Simple = () => <WrappedSimple />;

package/src/components/manage/Widgets/WysiwygWidget.stories.jsx

@@ -1,28 +1,11 @@
 import React from 'react';
 import WysiwygWidget from './WysiwygWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const WysiwygWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <WysiwygWidget
-          {...args}
-          id="field"
-          title="Wysiwyg"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Wysiwyg = WysiwygWidgetComponent.bind({});
+export const Wysiwyg = WidgetStory.bind({
+  props: { id: 'text', title: 'Rich text' },
+  widget: WysiwygWidget,
+});
 
 export default {
   title: 'Widgets/Wysiwyg',

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+export default function StoryComponent({ children, ...args }) {
+  const Widget = this.widget;
+  const props = this.props || {};
+  return (
+    <Wrapper
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={this.customStore}
+    >
+      <FormUndoWrapper
+        initialState={{
+          value: args.value || args.initialValue || this.initialValue,
+        }}
+        showControls={this.showUndoControls ?? true}
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <Widget
+              id="field"
+              title="Field"
+              block="block"
+              {...args}
+              {...props}
+              value={state.value}
+              onChange={(block, value) => onChange({ value })}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 4)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+}

package/src/components/theme/ContactForm/ContactForm.jsx

@@ -221,6 +221,7 @@ export class ContactFormComponent extends Component {
             <Portal node={document.getElementById('toolbar')}>
               <Toolbar
                 pathname={this.props.pathname}
+                hideDefaultViewButtons
                 inner={
                   <Link
                     to={`${getBaseUrl(this.props.pathname)}`}

package/src/components/theme/ContactForm/ContactForm.stories.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ContactFormComponent } from './ContactForm';
+import { injectIntl } from 'react-intl';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContactFormComponent = injectIntl(ContactFormComponent);
+
+const actions = {
+  actions: {
+    error: null,
+    actions: {
+      document_actions: [],
+      object: [
+        {
+          icon: '',
+          id: 'view',
+          title: 'View',
+        },
+        {
+          icon: '',
+          id: 'edit',
+          title: 'Edit',
+        },
+        {
+          icon: '',
+          id: 'folderContents',
+          title: 'Contents',
+        },
+        {
+          icon: '',
+          id: 'history',
+          title: 'History',
+        },
+        {
+          icon: '',
+          id: 'local_roles',
+          title: 'Sharing',
+        },
+      ],
+      object_buttons: [],
+      portal_tabs: [
+        {
+          icon: '',
+          id: 'index_html',
+          title: 'Home',
+        },
+      ],
+      site_actions: [
+        {
+          icon: '',
+          id: 'sitemap',
+          title: 'Site Map',
+        },
+        {
+          icon: '',
+          id: 'accessibility',
+          title: 'Accessibility',
+        },
+        {
+          icon: '',
+          id: 'contact',
+          title: 'Contact',
+        },
+      ],
+      user: [
+        {
+          icon: '',
+          id: 'preferences',
+          title: 'Preferences',
+        },
+        {
+          icon: '',
+          id: 'dashboard',
+          title: 'Dashboard',
+        },
+        {
+          icon: '',
+          id: 'plone_setup',
+          title: 'Site Setup',
+        },
+        {
+          icon: '',
+          id: 'logout',
+          title: 'Log out',
+        },
+      ],
+    },
+    loaded: true,
+    loading: false,
+  },
+};
+
+function StoryComponent(props) {
+  return (
+    <Wrapper customStore={{ actions, unlockRequest: {} }}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContactFormComponent
+        {...props}
+        pathname="/contact"
+        error={props.error ? { message: props.error } : null}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContactForm = StoryComponent.bind({});
+ContactForm.args = {
+  error: { message: 'Something' },
+  loading: false,
+  loaded: true,
+};
+
+export default {
+  title: 'Public components/Contact Form',
+  component: ContactFormComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    error: { control: 'text' },
+  },
+};

package/src/components/theme/CorsError/CorsError.jsx

@@ -61,8 +61,8 @@ const CorsError = () => (
           }}
         >
           <FormattedMessage
-            id="The backend server of your website is not anwering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
-            defaultMessage="The backend server of your website is not anwering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
+            id="The backend server of your website is not answering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
+            defaultMessage="The backend server of your website is not answering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
           />
         </p>
 

package/src/config/Loadables.jsx

@@ -27,4 +27,6 @@ export const loadables = {
     },
   ),
   diffLib: loadable.lib(() => import('diff')),
+  moment: loadable.lib(() => import('moment')),
+  reactDates: loadable.lib(() => import('react-dates')),
 };

package/src/config/index.js

@@ -157,6 +157,7 @@ let config = {
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
     hasWorkingCopySupport: false,
+    maxUndoLevels: 200, // undo history size for the main form
   },
   widgets: {
     ...widgetMapping,

package/src/helpers/Html/Html.jsx

@@ -123,23 +123,13 @@ class Html extends Component {
             }}
           />
 
+          <link rel="icon" href="/favicon.ico" sizes="any" />
+          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
             href="/apple-touch-icon.png"
           />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/favicon-16x16.png"
-          />
           <link rel="manifest" href="/site.webmanifest" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />

package/src/helpers/UndoManager/useUndoManager.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import Undoo from 'undoo';
+
+// Code based on Apache-2.0 License
+// https://github.com/reaviz/reaflow/blob/78d60aa04f514947a17097c906efdbbd6bae5080/src/helpers/useUndo.ts
+
+const useUndoManager = (
+  state,
+  onUndoRedo,
+  { maxUndoLevels, enableHotKeys = true },
+) => {
+  const [canUndo, setCanUndo] = React.useState(false);
+  const [canRedo, setCanRedo] = React.useState(false);
+  const manager = React.useRef(new Undoo({ maxLength: maxUndoLevels }));
+  // Reference:
+  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+  const callbackRef = React.useRef(onUndoRedo);
+  React.useEffect(() => {
+    callbackRef.current = onUndoRedo;
+  }, [onUndoRedo]);
+
+  const doUndo = React.useCallback(() => {
+    manager.current.undo(({ state }) => {
+      const nextUndo = manager.current.canUndo();
+      const nextRedo = manager.current.canRedo();
+      setCanUndo(nextUndo);
+      setCanRedo(nextRedo);
+
+      callbackRef.current({
+        state,
+        type: 'undo',
+        canUndo: nextUndo,
+        canRedo: nextRedo,
+      });
+    });
+  }, []);
+
+  React.useEffect(() => {
+    manager.current.save({
+      state,
+    });
+
+    setCanUndo(manager.current.canUndo());
+    setCanRedo(manager.current.canRedo());
+  }, [state]);
+
+  const doRedo = React.useCallback(() => {
+    manager.current.redo(({ state }) => {
+      const nextUndo = manager.current.canUndo();
+      const nextRedo = manager.current.canRedo();
+      setCanUndo(nextUndo);
+      setCanRedo(nextRedo);
+
+      callbackRef.current({
+        state,
+        type: 'redo',
+        canUndo: nextUndo,
+        canRedo: nextRedo,
+      });
+    });
+  }, []);
+
+  const handleKeys = React.useCallback(
+    (event) => {
+      const keyName = event.key;
+
+      if (keyName === 'Control' || keyName === 'Meta') {
+        // do not alert when only Control key is pressed.
+        return;
+      }
+      if (event.ctrlKey || event.metaKey) {
+        if (keyName === 'z') {
+          event.preventDefault();
+          event.stopPropagation();
+          doUndo();
+        } else if (keyName === 'y') {
+          event.preventDefault();
+          event.stopPropagation();
+          doRedo();
+        }
+      } else {
+        return;
+      }
+    },
+    [doUndo, doRedo],
+  );
+
+  React.useEffect(() => {
+    if (!enableHotKeys) return;
+    document.addEventListener('keydown', handleKeys);
+    return () => document.removeEventListener('keydown', handleKeys);
+  }, [enableHotKeys, handleKeys]);
+
+  return {
+    doUndo,
+    doRedo,
+    canUndo,
+    canRedo,
+  };
+};
+
+export default useUndoManager;

package/src/helpers/index.js

@@ -89,3 +89,4 @@ export { userHasRoles } from './User/User';
 export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
+export useUndoManager from './UndoManager/useUndoManager';

package/src/middleware/Api.test.js

@@ -14,7 +14,7 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath('/de/mypage', GET_CONTENT);
     expect(result).toEqual('/de/mypage?expand=mycustomexpander');
   });
-  it('addExpandersToPath with expanders already present (multilingual)', () => {
+  it('addExpandersToPath - Custom expander from settings, with expander (translation) already present (multilingual) in query', () => {
     config.settings.apiExpanders = [
       {
         match: '/',
@@ -28,7 +28,7 @@ describe('api middleware helpers', () => {
     );
     expect(result).toEqual('/de/mypage?expand=translations,mycustomexpander');
   });
-  it('addExpandersToPath not matching', () => {
+  it('addExpandersToPath - Path not matching', () => {
     config.settings.apiExpanders = [
       {
         match: '/de/otherpath',
@@ -39,7 +39,7 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath('/de/mypage', GET_CONTENT);
     expect(result).toEqual('/de/mypage');
   });
-  it('addExpandersToPath not matching, preserve query', () => {
+  it('addExpandersToPath - Path not matching, preserve query', () => {
     config.settings.apiExpanders = [
       {
         match: '/de/otherpath',
@@ -53,7 +53,7 @@ describe('api middleware helpers', () => {
     );
     expect(result).toEqual('/de/mypage/@navigation?expand.navigation.depth=3');
   });
-  it('addExpandersToPath should work as expected, several', () => {
+  it('addExpandersToPath - Two custom expanders from settings', () => {
     config.settings.apiExpanders = [
       {
         match: '/',
@@ -67,7 +67,7 @@ describe('api middleware helpers', () => {
       '/de/mypage?expand=mycustomexpander,mycustomexpander2',
     );
   });
-  it('addExpandersToPath should work as expected, already query present', () => {
+  it('addExpandersToPath - Two custom expanders from settings, expansion nested (with dots notation) present', () => {
     config.settings.apiExpanders = [
       {
         match: '/',
@@ -84,7 +84,7 @@ describe('api middleware helpers', () => {
       '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3',
     );
   });
-  it('addExpandersToPath should work as expected, already query present', () => {
+  it('addExpandersToPath - Two custom expanders from settings, query present ', () => {
     config.settings.apiExpanders = [
       {
         match: '/',
@@ -101,4 +101,55 @@ describe('api middleware helpers', () => {
       '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3&someotherquery=1',
     );
   });
+  it('addExpandersToPath - Two custom expanders from settings, a list parameter present', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+      GET_CONTENT,
+    );
+    // No need to stringify
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=mycustomexpander,mycustomexpander2&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+    );
+  });
+  it('addExpandersToPath - Two custom expanders from settings, a list parameter present, and a translation expand already in query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand=translations&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+      GET_CONTENT,
+    );
+    // No need to stringify
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=translations,mycustomexpander,mycustomexpander2&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+    );
+  });
+  it('addExpandersToPath - Two custom expanders from settings, a list parameter present, and a two expand present already in query', () => {
+    config.settings.apiExpanders = [
+      {
+        match: '/',
+        GET_CONTENT: ['mycustomexpander', 'mycustomexpander2'],
+      },
+    ];
+
+    const result = addExpandersToPath(
+      '/de/mypage/@navigation?expand=translations,secondexpand&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+      GET_CONTENT,
+    );
+    // No need to stringify
+    expect(result).toEqual(
+      '/de/mypage/@navigation?expand=translations,secondexpand,mycustomexpander,mycustomexpander2&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
+    );
+  });
 });

package/src/middleware/api.js

@@ -22,6 +22,13 @@ let socket = null;
 /**
  *
  * Add configured expanders to an api call for an action
+ * Requirements:
+ *
+ * - It should add the expanders set in the config settings
+ * - It should preserve any query if present
+ * - It should preserve (and add) any expand parameter (if present) e.g. translations
+ * - It should take use the correct codification for arrays in querystring (repeated parameter for each member of the array)
+ *
  * @function addExpandersToPath
  * @param {string} path The url/path including the querystring
  * @param {*} type The action type
@@ -31,24 +38,38 @@ export function addExpandersToPath(path, type) {
   const { settings } = config;
   const { apiExpanders = [] } = settings;
 
-  const pathPart = path.split('?')[0] || '';
-  const expanders = apiExpanders
-    .filter((expand) => matchPath(pathPart, expand.match) && expand[type])
+  const {
+    url,
+    query: { expand, ...query },
+  } = qs.parseUrl(path);
+
+  const expandersFromConfig = apiExpanders
+    .filter((expand) => matchPath(url, expand.match) && expand[type])
     .map((expand) => expand[type]);
-  const query = qs.parse(qs.extract(path));
-  const expand = compact(union([query.expand, ...flatten(expanders)]));
-  if (expand) {
-    query.expand = expand;
-  }
+
+  const expandMerge = compact(union([expand, ...flatten(expandersFromConfig)]));
+
+  const stringifiedExpand = qs.stringify(
+    { expand: expandMerge },
+    {
+      arrayFormat: 'comma',
+      encode: false,
+    },
+  );
+
   const stringifiedQuery = qs.stringify(query, {
-    arrayFormat: 'comma',
     encode: false,
   });
-  if (!stringifiedQuery) {
-    return pathPart;
-  }
 
-  return `${pathPart}?${stringifiedQuery}`;
+  if (stringifiedQuery && stringifiedExpand) {
+    return `${url}?${stringifiedExpand}&${stringifiedQuery}`;
+  } else if (!stringifiedQuery && stringifiedExpand) {
+    return `${url}?${stringifiedExpand}`;
+  } else if (stringifiedQuery && !stringifiedExpand) {
+    return `${url}?${stringifiedQuery}`;
+  } else {
+    return url;
+  }
 }
 
 /**

package/src/reducers/vocabularies/vocabularies.js

@@ -71,6 +71,7 @@ export default function vocabularies(state = initialState, action = {}) {
             [action.vocabulary]: {
               ...vocabState,
               subrequests: {
+                ...vocabState.subrequests,
                 [action.subrequest]: {
                   ...subrequestState,
                   error: null,
@@ -141,8 +142,18 @@ export default function vocabularies(state = initialState, action = {}) {
                   ...subrequestState,
                   error: null,
                   loaded: true,
-                  loading: !!(vocabState[action.subrequest].loading - 1),
-                  [action.token]: action.result.items[0].title,
+                  loading: !!(subrequestState.loading - 1),
+                  ...(action.token && {
+                    [action.token]: action.result.items[0].title,
+                  }),
+                  ...(action.tokens && {
+                    items: [
+                      ...action.result.items.map((item) => ({
+                        label: item.title,
+                        value: item.token,
+                      })),
+                    ],
+                  }),
                 },
               },
             },