@plone/volto 19.0.0-alpha.1 → 19.0.0-alpha.3

package/src/helpers/Utils/withSaveAsDraft.jsx

@@ -0,0 +1,241 @@
+import React from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import isEqual from 'react-fast-compare';
+import { toast } from 'react-toastify';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
+import { Button } from 'semantic-ui-react';
+import checkSVG from '@plone/volto/icons/check.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import { useIntl, defineMessages } from 'react-intl';
+import { useLocation } from 'react-router-dom';
+
+const messages = defineMessages({
+  autoSaveFound: {
+    id: 'Autosaved content found',
+    defaultMessage: 'Autosaved content found',
+  },
+  loadData: {
+    id: 'Do you want to restore your autosaved content?',
+    defaultMessage: 'Do you want to restore your autosaved content?',
+  },
+  loadExpiredData: {
+    id: "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?",
+    defaultMessage:
+      "Another person edited this content, and it's currently displayed. Do you want to replace it with your autosaved content?",
+  },
+});
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const mapSchemaToData = (schema, data) => {
+  if (!data) return {};
+  const dataKeys = Object.keys(data);
+  return Object.assign(
+    {},
+    ...Object.keys(schema.properties)
+      .filter((k) => dataKeys.includes(k))
+      .map((k) => ({ [k]: data[k] })),
+  );
+};
+
+// will be used to avoid using the first mount call if there is a second call
+let mountTime;
+
+const getFormId = (props, location) => {
+  const { type, pathname = location.pathname, isEditForm, schema } = props;
+  const id = isEditForm
+    ? ['form', type, pathname].join('-')
+    : type
+      ? ['form', pathname, type].join('-')
+      : schema?.properties?.comment
+        ? ['form', pathname, 'comment'].join('-')
+        : ['form', pathname].join('-');
+
+  return id;
+};
+
+/**
+ * Toast content that has OK and Cancel buttons
+ * @param {function} onUpdate
+ * @param {function} onClose
+ * @param {string} userMessage
+ * @returns
+ */
+const ConfirmAutoSave = ({ onUpdate, onClose, userMessage }) => {
+  const handleClickOK = () => onUpdate();
+  const handleClickCancel = () => onClose();
+
+  return (
+    <div className="toast-box-center">
+      <div>{userMessage}</div>
+      <Button
+        icon
+        aria-label="Unchecked"
+        className="save toast-box"
+        onClick={handleClickOK}
+      >
+        <Icon
+          name={checkSVG}
+          size="24px"
+          className="circled toast-box-blue-icon"
+        />
+      </Button>
+      <Button
+        icon
+        aria-label="Unchecked"
+        className="save toast-box"
+        onClick={handleClickCancel}
+      >
+        <Icon
+          name={clearSVG}
+          size="24px"
+          className="circled toast-box-blue-icon"
+        />
+      </Button>
+    </div>
+  );
+};
+
+/**
+ * Will remove localStorage item using debounce
+ * @param {string} id
+ * @param {number} timerForDeletion
+ */
+const clearStorage = (id, timerForDeletion) => {
+  timerForDeletion.current && clearTimeout(timerForDeletion.current);
+  timerForDeletion.current = setTimeout(() => {
+    localStorage.removeItem(id);
+  }, 500);
+};
+
+/**
+ * Stale if server date is more recent
+ * @param {string} serverModifiedDate
+ * @param {string} autoSaveDate
+ * @returns {Boolean}
+ */
+const autoSaveFoundIsStale = (serverModifiedDate, autoSaveDate) => {
+  const result = !serverModifiedDate
+    ? false
+    : new Date(serverModifiedDate) > new Date(autoSaveDate);
+  return result;
+};
+
+const draftApi = (id, schema, timer, timerForDeletion, intl) => ({
+  // - since Add Content Type will call componentDidMount twice, we will
+  // use the second call (using debounce)- the first will ignore any setState comands;
+  // - Delete local data only if user confirms Cancel
+  // - Will tell user that it has local stored data, even if its less recent than the server data
+  checkSavedDraft(state, updateCallback) {
+    if (!schema) return;
+    const saved = localStorage.getItem(id);
+
+    if (saved && Object.keys(JSON.parse(saved)).length > 1) {
+      const formData = mapSchemaToData(schema, state);
+      // includes autoSaveDate
+      const foundSavedData = JSON.parse(saved);
+      // includes only form data found in schema (no autoSaveDate)
+      const foundSavedSchemaData = mapSchemaToData(schema, foundSavedData);
+
+      if (!isEqual(formData, foundSavedSchemaData)) {
+        // eslint-disable-next-line no-alert
+        // cancel existing setTimeout to avoid using first call if
+        // successive calls are made
+        mountTime && clearTimeout(mountTime);
+        mountTime = setTimeout(() => {
+          toast.info(
+            <Toast
+              position="top-right"
+              info
+              autoClose={false}
+              title={intl.formatMessage(messages.autoSaveFound)}
+              content={
+                <ConfirmAutoSave
+                  onUpdate={() => updateCallback(foundSavedSchemaData)}
+                  onClose={() => clearStorage(id, timerForDeletion)}
+                  userMessage={
+                    autoSaveFoundIsStale(
+                      state.modified,
+                      foundSavedData.autoSaveDate,
+                    )
+                      ? intl.formatMessage(messages.loadExpiredData)
+                      : intl.formatMessage(messages.loadData)
+                  }
+                />
+              }
+            />,
+          );
+        }, 300);
+      }
+    }
+  },
+  // use debounce mode
+  onSaveDraft(state) {
+    if (!schema) return;
+    timer.current && clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const formData = mapSchemaToData(schema, state);
+      const saved = localStorage.getItem(id);
+      const newData = JSON.parse(saved);
+
+      localStorage.setItem(
+        id,
+        JSON.stringify({
+          ...newData,
+          ...formData,
+          autoSaveDate: new Date(),
+        }),
+      );
+    }, 300);
+  },
+
+  onCancelDraft() {
+    if (!schema) return;
+    clearStorage(id, timerForDeletion);
+  },
+});
+
+export default function withSaveAsDraft(options) {
+  const { forwardRef } = options;
+
+  return (WrappedComponent) => {
+    function WithSaveAsDraft(props) {
+      const { schema } = props;
+      const intl = useIntl();
+      const location = useLocation();
+      const id = getFormId(props, location);
+      const timmeRef = React.useRef();
+      const timmerForDeletionRef = React.useRef();
+      const api = React.useMemo(
+        () => draftApi(id, schema, timmeRef, timmerForDeletionRef, intl),
+        [id, schema, timmeRef, timmerForDeletionRef, intl],
+      );
+
+      return (
+        <WrappedComponent
+          {...props}
+          {...api}
+          ref={forwardRef ? props.forwardedRef : null}
+        />
+      );
+    }
+
+    WithSaveAsDraft.displayName = `WithSaveAsDraft(${getDisplayName(
+      WrappedComponent,
+    )})`;
+
+    if (forwardRef) {
+      return hoistNonReactStatics(
+        React.forwardRef((props, ref) => (
+          <WithSaveAsDraft {...props} forwardedRef={ref} />
+        )),
+        WrappedComponent,
+      );
+    }
+
+    return hoistNonReactStatics(WithSaveAsDraft, WrappedComponent);
+  };
+}

package/src/middleware/Api.test.js

@@ -25,6 +25,8 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath(
       '/de/mypage?expand=translations',
       GET_CONTENT,
+      false,
+      true,
     );
     expect(result).toEqual('/de/mypage?expand=translations,mycustomexpander');
   });
@@ -183,6 +185,8 @@ describe('api middleware helpers', () => {
     const result = addExpandersToPath(
       '/de/mypage/@navigation?expand=translations&expand.navigation.depth=3&someotherquery=1&someotherquery=2',
       GET_CONTENT,
+      false,
+      true,
     );
     // No need to stringify
     expect(result).toEqual(

package/src/middleware/api.js

@@ -35,7 +35,7 @@ let socket = null;
  *
  * - 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 preserve (and add) any expand parameter (if present)
  * - It should take use the correct codification for arrays in querystring (repeated parameter for each member of the array)
  *
  * @function addExpandersToPath
@@ -43,7 +43,7 @@ let socket = null;
  * @param {*} type The action type
  * @returns {string} The url/path with the configured expanders added to the query string
  */
-export function addExpandersToPath(path, type, isAnonymous) {
+export function addExpandersToPath(path, type, isAnonymous, isMultilingual) {
   const { settings } = config;
   const { apiExpanders = [] } = settings;
 
@@ -58,7 +58,14 @@ export function addExpandersToPath(path, type, isAnonymous) {
 
   const expandMerge = compact(
     union([expand, ...flatten(expandersFromConfig)]),
-  ).filter((item) => !(item === 'types' && isAnonymous)); // Remove types expander if isAnonymous
+  ).filter(
+    // Remove types for anonymous, translations unless multilingual
+    (item) =>
+      !(
+        (item === 'types' && isAnonymous) ||
+        (item === 'translations' && !isMultilingual)
+      ),
+  );
 
   const stringifiedExpand = qs.stringify(
     { expand: expandMerge },
@@ -128,6 +135,8 @@ function sendOnSocket(request) {
  * @param {Object} api Api object.
  * @returns {Promise} Action promise.
  */
+let isHydrating = __CLIENT__ ? true : false;
+
 const apiMiddlewareFactory =
   (api) =>
   ({ dispatch, getState }) =>
@@ -135,14 +144,17 @@ const apiMiddlewareFactory =
   (action) => {
     const { settings } = config;
 
-    const token = getState().userSession.token;
-    let uploadedFiles = getState().content.uploadedFiles;
+    const state = getState();
+    const token = state.userSession.token;
+    let uploadedFiles = state.content.uploadedFiles;
+    const isMultilingual = state.site.data.features?.multilingual;
     let isAnonymous = true;
     if (token) {
       const tokenExpiration = jwtDecode(token).exp;
       const currentTime = new Date().getTime() / 1000;
       isAnonymous = !token || currentTime > tokenExpiration;
     }
+    const hasExistingError = state.content.get?.error;
 
     if (typeof action === 'function') {
       return action(dispatch, getState);
@@ -164,14 +176,24 @@ const apiMiddlewareFactory =
             request.map((item) =>
               sendOnSocket({
                 ...item,
-                path: addExpandersToPath(item.path, type, isAnonymous),
+                path: addExpandersToPath(
+                  item.path,
+                  type,
+                  isAnonymous,
+                  isMultilingual,
+                ),
                 id: type,
               }),
             ),
           )
         : sendOnSocket({
             ...request,
-            path: addExpandersToPath(request.path, type, isAnonymous),
+            path: addExpandersToPath(
+              request.path,
+              type,
+              isAnonymous,
+              isMultilingual,
+            ),
             id: type,
           });
     } else {
@@ -180,7 +202,12 @@ const apiMiddlewareFactory =
           ? request.reduce((prevPromise, item) => {
               return prevPromise.then((acc) => {
                 return api[item.op](
-                  addExpandersToPath(item.path, type, isAnonymous),
+                  addExpandersToPath(
+                    item.path,
+                    type,
+                    isAnonymous,
+                    isMultilingual,
+                  ),
                   {
                     data: item.data,
                     type: item.type,
@@ -201,28 +228,42 @@ const apiMiddlewareFactory =
             }, Promise.resolve([]))
           : Promise.all(
               request.map((item) =>
-                api[item.op](addExpandersToPath(item.path, type, isAnonymous), {
-                  data: item.data,
-                  type: item.type,
-                  headers: item.headers,
-                  params: request.params,
-                  checkUrl: settings.actions_raising_api_errors.includes(
-                    action.type,
+                api[item.op](
+                  addExpandersToPath(
+                    item.path,
+                    type,
+                    isAnonymous,
+                    isMultilingual,
                   ),
-                  attach: item.attach,
-                }),
+                  {
+                    data: item.data,
+                    type: item.type,
+                    headers: item.headers,
+                    params: request.params,
+                    checkUrl: settings.actions_raising_api_errors.includes(
+                      action.type,
+                    ),
+                    attach: item.attach,
+                  },
+                ),
               ),
             )
-        : api[request.op](addExpandersToPath(request.path, type, isAnonymous), {
-            data: request.data,
-            type: request.type,
-            headers: request.headers,
-            params: request.params,
-            checkUrl: settings.actions_raising_api_errors.includes(action.type),
-            attach: request.attach,
-          });
+        : api[request.op](
+            addExpandersToPath(request.path, type, isAnonymous, isMultilingual),
+            {
+              data: request.data,
+              type: request.type,
+              headers: request.headers,
+              params: request.params,
+              checkUrl: settings.actions_raising_api_errors.includes(
+                action.type,
+              ),
+              attach: request.attach,
+            },
+          );
       actionPromise.then(
         (result) => {
+          isHydrating = false;
           if (uploadedFiles !== 0) {
             dispatch(updateUploadedFiles(0));
           }
@@ -298,6 +339,14 @@ const apiMiddlewareFactory =
           }
         },
         (error) => {
+          // Make sure an error during hydration
+          // (for example when serving an archived page)
+          // doesn't hide the SSR content.
+          if (isHydrating && !hasExistingError) {
+            isHydrating = false;
+            return;
+          }
+
           // Only SSR can set ECONNREFUSED
           if (error.code === 'ECONNREFUSED') {
             next({

package/src/routes.js

@@ -127,7 +127,7 @@ export function getExternalRoutes() {
 export const defaultRoutes = [
   // redirect to external links if path is in blacklist
   ...getExternalRoutes(),
-  ...((config.settings?.isMultilingual && multilingualRoutes) || []),
+  ...(config.settings?.isMultilingual !== false ? multilingualRoutes : []),
   {
     path: '/',
     component: View,

package/src/server.jsx

@@ -43,6 +43,7 @@ import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect';
 
 let locales = {};
 
+// Load locales listed in supportedLanguages setting
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
@@ -107,7 +108,6 @@ function setupServer(req, res, next) {
   const lang = toReactIntlLang(
     new locale.Locales(
       req.universalCookies.get('I18N_LANGUAGE') ||
-        config.settings.defaultLanguage ||
         req.headers['accept-language'],
     )
       .best(supported)
@@ -184,7 +184,6 @@ server.get('/*', (req, res) => {
   const lang = toReactIntlLang(
     new locale.Locales(
       req.universalCookies.get('I18N_LANGUAGE') ||
-        config.settings.defaultLanguage ||
         req.headers['accept-language'],
     )
       .best(supported)
@@ -224,9 +223,10 @@ server.get('/*', (req, res) => {
 
   loadOnServer({ store, location, routes, api })
     .then(() => {
+      const state = store.getState();
       const initialLang =
         req.universalCookies.get('I18N_LANGUAGE') ||
-        config.settings.defaultLanguage ||
+        state.site.data['plone.default_language'] ||
         req.headers['accept-language'];
 
       // The content info is in the store at this point thanks to the asynconnect
@@ -236,10 +236,9 @@ server.get('/*', (req, res) => {
       // TODO: there is a bug here with content that, for any reason, doesn't
       // present the language token field, for some reason. In this case, we
       // should follow the cookie rather then switching the language
-      const contentLang = store.getState().content.get?.error
+      const contentLang = state.content.get?.error
         ? initialLang
-        : store.getState().content.data?.language?.token ||
-          config.settings.defaultLanguage;
+        : state.content.data?.language?.token || initialLang;
 
       if (toBackendLang(initialLang) !== contentLang && url !== '/') {
         const newLang = toReactIntlLang(

package/src/start-client.jsx

@@ -58,10 +58,6 @@ export default function client() {
   if (window.env.RAZZLE_LEGACY_TRAVERSE) {
     config.settings.legacyTraverse = true;
   }
-  // Support for setting the default language from a server environment variable
-  if (window.env.defaultLanguage) {
-    config.settings.defaultLanguage = window.env.defaultLanguage;
-  }
 
   loadableReady(() => {
     hydrateRoot(

package/test-setup-config.jsx

@@ -30,12 +30,10 @@ import { registerValidators } from '@plone/volto/config/validation';
 config.set('settings', {
   apiPath: 'http://localhost:8080/Plone',
   publicURL: 'http://localhost:3000',
-  defaultLanguage: 'en',
   supportedLanguages: ['en'],
   defaultPageSize: 25,
   showTags: true,
   showRelatedItems: true,
-  isMultilingual: false,
   nonContentRoutes,
   nonContentRoutesPublic,
   contentIcons: contentIcons,

package/theme/themes/pastanaga/collections/table.overrides

@@ -19,6 +19,15 @@
   vertical-align: @headerVerticalAlign;
 }
 
+// use sorting icons from icons.woff instead of assuming it's font awesome
+.ui.sortable.table thead th.ascending::after {
+  content: '\E9EC';
+}
+
+.ui.sortable.table thead th.descending::after {
+  content: '\E9EB';
+}
+
 .ui.table tr > th:first-child {
   border-left: none;
 }

package/theme/themes/pastanaga/extras/blocks.less

@@ -56,6 +56,13 @@
   background-color: rgba(120, 192, 215, 0.375);
 }
 
+.block.selected.error::before,
+.block.selected.error:hover::before,
+.block.error:hover::before,
+.block.error::before {
+  border-color: #ff0000 !important;
+}
+
 #toolbar .toolbar-actions .blockCount {
   position: absolute;
   margin-top: 18px;

package/theme/themes/pastanaga/extras/contents.less

@@ -149,8 +149,12 @@
   .ui.table .button-margin {
     padding: 4px;
     margin-right: 1em;
-    background-color: rgb(228, 1, 102);
+    background-color: #007eb1;
     color: white;
+
+    &.expired-past {
+      background-color: rgb(228, 1, 102);
+    }
   }
 }
 
@@ -185,10 +189,6 @@
     white-space: normal;
     word-break: break-all;
   }
-
-  .broken-links-list {
-    margin-top: 30px;
-  }
 }
 
 .contenttype-event {

package/theme/themes/pastanaga/extras/main.less

@@ -659,6 +659,21 @@ img.responsive {
   margin-top: 20px;
 }
 
+.toast-box-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .save.toast-box {
+    background: transparent;
+    color: #007eb1;
+
+    .circled.toast-box-blue-icon {
+      color: #007eb1;
+    }
+  }
+}
+
 // Deprecated as per https://github.com/plone/volto/issues/1265
 // @import 'utils';
 @import (multiple) '../extras/fonts';

package/types/components/manage/Blocks/Teaser/schema.d.ts

@@ -27,6 +27,7 @@ export function TeaserSchema({ data, intl }: {
         };
         head_title: {
             title: any;
+            description: any;
         };
         description: {
             title: any;

package/types/components/theme/FormattedDate/FormattedDate.stories.d.ts

@@ -10,9 +10,9 @@ declare namespace _default {
     export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     export namespace argTypes {
         namespace locale {
+            let options: string[];
             namespace control {
                 let type: string;
-                let options: string[];
             }
         }
     }