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

package/src/reducers/diff/diff.test.js

@@ -1,5 +1,5 @@
-import diff from './diff';
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import diff from './diff';
 
 describe('Diff reducer', () => {
   it('should return the initial state', () => {
@@ -24,15 +24,71 @@ describe('Diff reducer', () => {
     });
   });
 
-  it('should handle GET_DIFF_SUCCESS', () => {
+  it('should handle GET_DIFF_SUCCESS with array result with static behaviors', () => {
+    expect(
+      diff(undefined, {
+        type: `${GET_DIFF}_SUCCESS`,
+        result: [
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test page',
+            },
+          },
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test second page',
+            },
+          },
+        ],
+      }),
+    ).toEqual({
+      error: null,
+      data: [
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+
+          'guillotina.behaviors.dublincore.IDublinCore.title': 'test page',
+        },
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+          'guillotina.behaviors.dublincore.IDublinCore.title':
+            'test second page',
+        },
+      ],
+      loaded: true,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_DIFF_SUCCESS with array result without static behaviors', () => {
+    const data = [
+      {
+        title: 'test page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test page',
+        },
+      },
+      {
+        title: 'test second page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test second page',
+        },
+      },
+    ];
     expect(
       diff(undefined, {
         type: `${GET_DIFF}_SUCCESS`,
-        result: 'result',
+        result: data,
       }),
     ).toEqual({
       error: null,
-      data: 'result',
+      data: data,
       loaded: true,
       loading: false,
     });

package/src/reducers/index.js

@@ -53,6 +53,7 @@ import upgrade from './upgrade/upgrade';
 import userschema from './userschema/userschema';
 import site from './site/site';
 import navroot from './navroot/navroot';
+import blockTypes from './blockTypes/blockTypes';
 
 /**
  * Root reducer.
@@ -111,6 +112,7 @@ const reducers = {
   userschema,
   site,
   navroot,
+  blockTypes,
 };
 
 export default reducers;

package/src/reducers/querystring/querystring.js

@@ -30,10 +30,17 @@ export default function querystring(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_QUERYSTRING}_SUCCESS`:
+      let indexes = action.result.indexes;
+      if (indexes?.path?.operations) {
+        //remove path operation, to remove unhandled 'Navigation path' option from QueryWidget
+        indexes.path.operations = indexes.path.operations.filter(
+          (o) => o !== 'plone.app.querystring.operation.string.path',
+        );
+      }
       return {
         ...state,
         error: null,
-        indexes: action.result.indexes,
+        indexes: indexes,
         sortable_indexes: action.result.sortable_indexes,
         loaded: true,
         loading: false,

package/src/reducers/users/users.js

@@ -117,7 +117,7 @@ export default function users(state = initialState, action = {}) {
     case `${LIST_USERS}_SUCCESS`:
       return {
         ...state,
-        users: action.result,
+        users: action.result.items ? action.result.items : action.result,
         [getRequestKey(action.type)]: {
           loading: false,
           loaded: true,

package/src/routes.js

@@ -51,6 +51,10 @@ import {
   UndoControlpanel,
   UpgradeControlPanel,
 } from '@plone/volto/components/manage/Controlpanels';
+import BlockTypesControlpanel from './components/manage/Controlpanels/BlockTypes';
+import BlockTypeControlpanel from './components/manage/Controlpanels/BlockType';
+
+import withClientSideContent from '@plone/volto/helpers/Content/withClientSideContent';
 
 import App from '@plone/volto/components/theme/App/App';
 import View from '@plone/volto/components/theme/View/View';
@@ -230,6 +234,14 @@ export const defaultRoutes = [
     path: '/controlpanel/relations',
     component: RelationsControlpanel,
   },
+  {
+    path: '/controlpanel/block-types/:id',
+    component: BlockTypeControlpanel,
+  },
+  {
+    path: '/controlpanel/block-types',
+    component: BlockTypesControlpanel,
+  },
   {
     path: '/controlpanel/:id',
     component: Controlpanel,
@@ -244,7 +256,7 @@ export const defaultRoutes = [
   },
   {
     path: ['/edit', '/**/edit'],
-    component: Edit,
+    component: withClientSideContent(Edit),
   },
   {
     path: ['/contents', '/**/contents'],

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,7 +40,10 @@ 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 = {};
 
@@ -47,11 +51,13 @@ let locales = {};
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
-    import(
-      /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-    ).then((locale) => {
-      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
-    });
+    import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+      .then((locale) => {
+        locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+      })
+      .catch((error) => {
+        // Error loading locale file
+      });
   });
 }
 
@@ -69,10 +75,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) {
@@ -160,8 +186,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 = {
@@ -253,7 +281,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>
@@ -290,8 +322,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}
           />,
         )}
       `,
@@ -334,6 +366,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);
 

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-addons-loader.js

@@ -0,0 +1,3 @@
+export default function install(config) {
+  return config;
+}

package/test-setup-globals.js

@@ -1,12 +1,66 @@
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
 global.__CLIENT__ = true;
 global.__DEVELOPMENT__ = false;
+global.__SERVER__ = false;
+global.__TEST__ = true;
 
 window.matchMedia =
   window.matchMedia ||
-  function () {
+  function (query) {
     return {
-      matches: false,
+      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(),
+});
+
+global.jest = {
+  fn: vi.fn.bind(vi),
+};
+
+// Mock IntersectionObserver for Vitest
+const IntersectionObserverMock = vi.fn((callback, options = {}) => {
+  const instance = {
+    thresholds: Array.isArray(options.threshold)
+      ? options.threshold
+      : [options.threshold ?? 0],
+    root: options.root ?? null,
+    rootMargin: options.rootMargin ?? '',
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+    takeRecords: vi.fn(() => []),
+  };
+
+  return instance;
+});
+
+vi.stubGlobal('IntersectionObserver', IntersectionObserverMock);
+global.IntersectionObserver = IntersectionObserverMock;
+window.IntersectionObserver = IntersectionObserverMock;

package/theme/themes/default/elements/segment.variables

@@ -57,7 +57,6 @@
 @placeholderContentMaxWidth: 15rem;
 @placeholderContentInlineButtonMargin: 0px @5px 0px 0px;
 
-
 /* Piled */
 @piledZIndex: auto;
 @piledMargin: 3em;
@@ -86,12 +85,10 @@
 @loaderSize: 3em;
 @loaderLineZIndex: 101;
 
-
 /*******************************
             Variations
 *******************************/
 
-
 /* Raised */
 @raisedBoxShadow: @floatingShadow;
 
@@ -106,10 +103,7 @@
 @attachedWidth: calc(100% - (@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
-@attachedBottomBoxShadow:
-  @boxShadow,
-  @attachedBoxShadow
-;
+@attachedBottomBoxShadow: @boxShadow, @attachedBoxShadow;
 
 /* Inverted */
 @invertedBackground: @black;
@@ -130,25 +124,24 @@
 @secondaryBackground: @darkWhite;
 @secondaryColor: @mutedTextColor;
 
-@tertiaryBackground:  @midWhite;
+@tertiaryBackground: @midWhite;
 @tertiaryColor: @mutedTextColor;
 
 @secondaryInvertedLightness: 0.2;
-@secondaryInvertedBackground:
-  lighten(@black, (@secondaryInvertedLightness * 100))
+@secondaryInvertedBackground: lighten(
+    @black,
+    (@secondaryInvertedLightness * 100)
+  )
   linear-gradient(
     rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
     rgba(255, 255, 255, @secondaryInvertedLightness) 100%
-  )
-;
+  );
 @secondaryInvertedColor: @invertedMutedTextColor;
 
 @tertiaryInvertedLightness: 0.35;
-@tertiaryInvertedBackground:
-  lighten(@black, (@tertiaryInvertedLightness * 100))
+@tertiaryInvertedBackground: lighten(@black, (@tertiaryInvertedLightness * 100))
   linear-gradient(
     rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
     rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
-  )
-;
+  );
 @tertiaryInvertedColor: @invertedMutedTextColor;

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

@@ -25,7 +25,7 @@
 }
 
 .ui.form p.help {
-  color: #878f93;
+  color: @inputColor;
   font-size: @13px;
   font-weight: 300;
   line-height: initial;

package/theme/themes/pastanaga/elements/segment.variables

@@ -14,14 +14,12 @@
 
 @groupedSegmentDivider: none;
 
-
 /*-------------------
        Coupling
 --------------------*/
 
 /* Page Grid Segment */
 
-
 /*******************************
             States
 *******************************/
@@ -30,7 +28,6 @@
 
 /* Loading Spinner */
 
-
 /*******************************
             Variations
 *******************************/
@@ -61,4 +58,4 @@
 
 /* Ordinality */
 @secondaryBackground: @tealBackground;
-@secondaryColor: @teal;
+@secondaryColor: @textColor;

package/theme/themes/pastanaga/extras/block-types.less

@@ -0,0 +1,17 @@
+.react-aria-Table.cmsui-table {
+  --plone-table-cell-border-bottom: 1px solid var(--quanta-smoke);
+  --plone-table-header-border-bottom: 2px solid var(--quanta-silver);
+  width: 100%;
+  border-radius: 0;
+
+  .react-aria-Row {
+    --radius-top: 0px;
+    --radius-bottom: 0px;
+    border-bottom: none;
+  }
+
+  .react-aria-Column[data-key$='occurrences'],
+  .react-aria-Cell[data-key$=':occurrences'] {
+    text-align: right;
+  }
+}

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

@@ -434,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;
+    }
   }
 }
 
@@ -990,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,
@@ -255,3 +267,66 @@
   overflow: auto;
   max-height: 75vh;
 }
+
+.contents-dropzone {
+  position: relative;
+
+  &.drag-over {
+    overflow: hidden;
+  }
+}
+
+.dropzone-overlay {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px dashed black;
+  animation: fadeIn 0.3s ease-in;
+  backdrop-filter: blur(2px);
+  inset: 0;
+}
+
+.dropzone-content {
+  animation: scaleIn 0.3s ease-out;
+  color: black;
+  text-align: center;
+
+  h3 {
+    margin-top: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  h3,
+  p {
+    color: black;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}