@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.10

package/src/server.jsx

@@ -18,8 +18,9 @@ import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 
-import routes from '@root/routes';
+import routes from '@plone/volto/routes';
 import config from '@plone/volto/registry';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import Html from '@plone/volto/helpers/Html/Html';
@@ -39,10 +40,14 @@ import ErrorPage from '@plone/volto/error';
 import languages from '@plone/volto/constants/Languages.cjs';
 
 import configureStore from '@plone/volto/store';
-import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect';
+import {
+  ReduxAsyncConnect,
+  loadOnServer,
+} from '@plone/volto/helpers/AsyncConnect';
 
 let locales = {};
 
+// Load locales listed in supportedLanguages setting
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
@@ -68,10 +73,30 @@ const server = express()
   })
   .use(cookiesMiddleware());
 
+// If Volto is being served under a subpath,
+// make sure the static files are available there too.
+// (The static middleware loads too early to access the config.)
+if (config.settings.subpathPrefix) {
+  server.use(
+    config.settings.subpathPrefix,
+    express.static(
+      process.env.BUILD_DIR
+        ? path.join(process.env.BUILD_DIR, 'public')
+        : process.env.RAZZLE_PUBLIC_DIR,
+      {
+        redirect: false, // Avoid /my-prefix from being redirected to /my-prefix/
+      },
+    ),
+  );
+}
+
 const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
 
 server.all('*', setupServer);
-if (middleware.length) server.use('/', middleware);
+if (middleware.length) {
+  server.use(config.settings.subpathPrefix || '/', middleware);
+}
+server.use('/', okMiddleware());
 
 server.use(function (err, req, res, next) {
   if (err) {
@@ -107,7 +132,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)
@@ -160,8 +184,10 @@ function setupServer(req, res, next) {
     res.locals.detectedHost = `${
       req.headers['x-forwarded-proto'] || req.protocol
     }://${req.headers.host}`;
-    config.settings.apiPath = res.locals.detectedHost;
-    config.settings.publicURL = res.locals.detectedHost;
+    config.settings.apiPath =
+      res.locals.detectedHost + config.settings.subpathPrefix;
+    config.settings.publicURL =
+      res.locals.detectedHost + config.settings.subpathPrefix;
   }
 
   res.locals = {
@@ -184,7 +210,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 +249,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 +262,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(
@@ -254,7 +279,11 @@ server.get('/*', (req, res) => {
         <ChunkExtractorManager extractor={extractor}>
           <CookiesProvider cookies={req.universalCookies}>
             <Provider store={store} onError={reactIntlErrorHandler}>
-              <StaticRouter context={context} location={req.url}>
+              <StaticRouter
+                context={context}
+                location={req.url}
+                basename={config.settings.subpathPrefix}
+              >
                 <ReduxAsyncConnect routes={routes} helpers={api} />
               </StaticRouter>
             </Provider>
@@ -291,8 +320,8 @@ server.get('/*', (req, res) => {
             markup={markup}
             store={store}
             criticalCss={readCriticalCss(req)}
-            apiPath={res.locals.detectedHost || config.settings.apiPath}
-            publicURL={res.locals.detectedHost || config.settings.publicURL}
+            apiPath={config.settings.apiPath}
+            publicURL={config.settings.publicURL}
           />,
         )}
       `,
@@ -335,6 +364,8 @@ export const defaultReadCriticalCss = () => {
 
 // Exposed for the console bootstrap info messages
 server.apiPath = config.settings.apiPath;
+server.internalApiPath = config.settings.internalApiPath;
+server.subpathPrefix = config.settings.subpathPrefix;
 server.devProxyToApiPath = config.settings.devProxyToApiPath;
 server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
 server.publicURL = config.settings.publicURL;

package/src/start-client.jsx

@@ -18,8 +18,6 @@ import Api from '@plone/volto/helpers/Api/Api';
 import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 
-export const history = createBrowserHistory();
-
 function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
@@ -27,6 +25,15 @@ function reactIntlErrorHandler(error) {
 export default function client() {
   const api = new Api();
 
+  if (window.env.RAZZLE_SUBPATH_PREFIX) {
+    config.settings.subpathPrefix = window.env.RAZZLE_SUBPATH_PREFIX;
+  }
+  const history = createBrowserHistory({
+    basename: config.settings.subpathPrefix
+      ? config.settings.subpathPrefix
+      : '/',
+  });
+
   const store = configureStore(window.__data, history, api);
   persistAuthToken(store);
 
@@ -58,10 +65,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/src/start-server.js

@@ -18,14 +18,20 @@ export default function server() {
 
   server
     .listen(port, bind_address, () => {
-      console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
-
-      if (app.devProxyToApiPath)
+      console.log(
+        `The Volto server will make API requests to: ${app.internalApiPath || app.apiPath}/++api++`,
+      );
+      console.log(
+        `The Volto client will make API requests to: ${app.apiPath}/++api++`,
+      );
+
+      if (app.devProxyToApiPath) {
         console.log(
           `Proxying API requests from ${app.publicURL}/++api++ to ${
             app.devProxyToApiPath
           }${app.proxyRewriteTarget || ''}`,
         );
+      }
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 
       if (!process.env.RAZZLE_PUBLIC_URL)

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/test-setup-globals-vitest.js

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom';
+import { expect, describe, it, vi } from 'vitest';
+
+global.describe = describe;
+global.it = it;
+global.expect = expect;
+global.vi = vi;
+
+global.__CLIENT__ = true;
+global.__DEVELOPMENT__ = false;
+global.__SERVER__ = false;
+global.__TEST__ = true;
+
+window.matchMedia =
+  window.matchMedia ||
+  function (query) {
+    return {
+      matches: query === '(min-width: 1024px)',
+      addListener: function () {},
+      removeListener: function () {},
+    };
+  };
+
+vi.stubGlobal(
+  'fetch',
+  vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({}),
+      text: () => Promise.resolve(''),
+    }),
+  ),
+);
+
+vi.stubGlobal('localStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});
+
+vi.stubGlobal('sessionStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});

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;
@@ -427,10 +434,18 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   top: 1em;
   right: 1em;
 
+  .sidebar-container & .ui.icon.button:hover {
+    background: transparent !important;
+  }
+
   .icon.circled {
     border: 1px solid #e4e8ec;
     background: #f3f5f7;
     box-shadow: inset 0 0 0 0.14285714rem transparent !important;
+
+    &:hover {
+      background-color: #e4e8ec;
+    }
   }
 }
 
@@ -983,6 +998,17 @@ div.image-upload-widget-image {
   }
 }
 
+// In the sidebar, the height is forced on all .ui.input T_T
+.ui.form .ui.input.input-anchorlink-theme,
+.ui.form
+  .inline.field
+  .link-form-container
+  .wrapper
+  .ui.input.input-anchorlink-theme
+  input {
+  height: 34px;
+}
+
 .block.image.align.left,
 .block.image.align.right {
   img {

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

@@ -107,6 +107,18 @@
       top: auto;
       bottom: 100%;
     }
+
+    .search-feedback {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      border: 0;
+      margin: -1px;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+    }
   }
 
   .ui.table .icon-align,
@@ -149,8 +161,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 +201,6 @@
     white-space: normal;
     word-break: break-all;
   }
-
-  .broken-links-list {
-    margin-top: 30px;
-  }
 }
 
 .contenttype-event {

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

@@ -443,6 +443,10 @@ fieldset.invisible {
   padding: 0;
   border: none;
   margin: 0;
+  // Reset visibility, this 'invisible' is not meant to hide the fieldset
+  // This prevents issues when used along other CSS framworks that might
+  // have this utility class defined (e.g. TailwindCSS)
+  visibility: initial;
 }
 
 .vertical-form {
@@ -659,8 +663,34 @@ img.responsive {
   margin-top: 20px;
 }
 
-// Deprecated as per https://github.com/plone/volto/issues/1265
-// @import 'utils';
+.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;
+    }
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(1px, 1px, 1px, 1px); /* IE-style CSS for compatibility */
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
 @import (multiple) '../extras/fonts';
 @import 'toolbar';
 @import 'draftjs';

package/tsconfig.declarations.json

@@ -10,11 +10,22 @@
     "jsx": "react-jsx",
     "preserveSymlinks": true,
     "downlevelIteration": true,
+    "types": ["vitest/globals", "jest"],
     "paths": {
       "@plone/volto/*": ["./src/*"],
       "react": ["./node_modules/@types/react"],
       "react-dom": ["./node_modules/@types/react-dom"]
     }
   },
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "coverage",
+    "dist",
+    "types",
+    "**/*.test.js",
+    "**/*.test.tsx",
+    "**/*.test.ts"
+  ]
 }

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "commonjs",
+    "target": "es2022",
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "types": ["vitest/globals", "jest"],
+    "module": "preserve",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -10,7 +11,6 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
@@ -21,7 +21,7 @@
       "@root/*": ["./src/*"]
     }
   },
-  "include": ["src", "packages"],
+  "include": ["src", "packages", "types", "vitest.config.ts"],
   "exclude": [
     "node_modules",
     "build",

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/manage/ConditionalLink/ConditionalLink.d.ts

@@ -1,15 +1,11 @@
-export default ConditionalLink;
-declare function ConditionalLink({ condition, to, item, ...props }: {
-    [x: string]: any;
-    condition: any;
-    to: any;
-    item: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ConditionalLink {
-    namespace propTypes {
-        let condition: any;
-        let to: any;
-        let item: any;
-        let children: any;
-    }
-}
+import React from 'react';
+import type { UniversalLinkProps } from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    condition?: boolean;
+    to?: string;
+    children: React.ReactNode;
+} & Omit<UniversalLinkProps, "href" | "item"> & {
+    href?: string;
+    item?: UniversalLinkProps["item"];
+} & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>>;
+export default _default;

package/types/components/manage/Contents/__mocks__/index.vitest.d.ts

@@ -0,0 +1,2 @@
+export declare const Contents: any;
+export declare const ContentsRenameModal: any;

package/types/components/manage/Controlpanels/Users/RenderUsers.d.ts

@@ -1,2 +1,18 @@
-declare const _default: any;
-export default _default;
+export default RenderUsers;
+/**
+ * RenderUsers functional component.
+ * @function RenderUsers
+ */
+declare function RenderUsers(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RenderUsers {
+    namespace propTypes {
+        let user: any;
+        let roles: any;
+        let onDelete: any;
+        let isUserManager: any;
+        let listUsers: any;
+        let updateUser: any;
+        let inheritedRole: any;
+        let userschema: any;
+    }
+}

package/types/components/manage/Controlpanels/Users/UsersControlpanel.d.ts

@@ -1,2 +1,6 @@
-declare const _default: any;
-export default _default;
+export default UsersControlpanel;
+/**
+ * UsersControlpanel functional component.
+ * @function UsersControlpanel
+ */
+declare function UsersControlpanel(): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Controlpanels/index.d.ts

@@ -4,8 +4,8 @@ export declare const RulesControlpanel: import("@loadable/component").LoadableCl
 export declare const AddRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const EditRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const ConfigureRuleControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const UsersControlpanel: import("@loadable/component").LoadableClassComponent<any>;
-export declare const RenderUsers: import("@loadable/component").LoadableClassComponent<any>;
+export declare const UsersControlpanel: import("@loadable/component").LoadableComponent<unknown>;
+export declare const RenderUsers: import("@loadable/component").LoadableComponent<any>;
 export declare const UserGroupMembershipControlPanel: import("@loadable/component").LoadableComponent<unknown>;
 export declare const GroupsControlpanel: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RenderGroups: import("@loadable/component").LoadableComponent<any>;

package/types/components/manage/Form/__mocks__/index.vitest.d.ts

@@ -0,0 +1,8 @@
+export declare const Field: any;
+export declare const InlineForm: any;
+export declare const ModalForm: any;
+export declare const UndoToolbar: any;
+export declare const BlocksToolbar: any;
+export declare const BlockDataForm: any;
+export declare const BlocksForm: any;
+export declare const Form: any;

package/types/components/manage/MaybeWrap/MaybeWrap.d.ts

@@ -1,5 +1,7 @@
-export default function MaybeWrap({ condition, as: Component, ...props }: {
-    [x: string]: any;
-    condition: any;
-    as?: string;
-}): any;
+import React, { ComponentPropsWithoutRef } from 'react';
+type MaybeWrapProps<T extends React.ElementType> = {
+    condition: boolean;
+    as: T;
+} & ComponentPropsWithoutRef<React.ElementType extends T ? 'div' : T>;
+declare function MaybeWrap<T extends React.ElementType = 'div'>(props: MaybeWrapProps<T>): any;
+export default MaybeWrap;

package/types/components/manage/Sidebar/SidebarPortal.d.ts

@@ -1,16 +1,8 @@
-export default SidebarPortal;
-/**
- * Portal that wraps Sidebar components
- * @param {React.ReactNode} children Sidebar content
- * @param {bool} selected Sidebar needs to know when the related block is selected
- * @param {string} tab Element id where to insert sidebar content, default: sidebar-properties
- * @returns {string} Rendered sidebar
- */
-declare function SidebarPortal({ children, selected, tab }: React.ReactNode): string;
-declare namespace SidebarPortal {
-    namespace propTypes {
-        let children: any;
-        let selected: any;
-    }
-}
 import React from 'react';
+type SidebarPortalProps = {
+    children?: React.ReactNode;
+    selected: boolean;
+    tab?: string;
+};
+declare const SidebarPortal: ({ children, selected, tab, }: SidebarPortalProps) => React.ReactPortal;
+export default SidebarPortal;