@plone/volto 19.0.0-alpha.9 → 19.1.0

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,9 @@ const messages = defineMessages({
 });
 
 export function getSitemapPath(pathname = '', lang) {
+  /* This function is deprecated
+   * We keep it for backwards compatibility.
+   */
   const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
   const path = prefix || lang || '';
   return path;
@@ -32,18 +35,12 @@ export function getSitemapPath(pathname = '', lang) {
  * @returns {JSX.Element} - Rendered component.
  */
 function Sitemap(props) {
-  const {
-    location: { pathname },
-    lang,
-    getNavigation,
-    isMultilingual,
-  } = props;
-
+  const { getNavigation, navroot } = props;
   useEffect(() => {
-    const language = isMultilingual ? `${toBackendLang(lang)}` : null;
-    const path = getSitemapPath(pathname, language);
-    getNavigation(path, 4);
-  }, [pathname, lang, getNavigation, isMultilingual]);
+    const { settings } = config;
+    const path = `${expandToBackendURL(navroot?.navroot?.['@id'])}`;
+    getNavigation(path, settings.siteMapDepth);
+  }, [navroot, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -64,12 +61,13 @@ function Sitemap(props) {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+  const items = useSelector((state) => state.navigation.items);
   return (
     <div id="page-sitemap">
       <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
       <Container className="view-wrapper">
         <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
-        {props.items && renderItems(props.items)}
+        {items && renderItems(items)}
       </Container>
     </div>
   );
@@ -77,18 +75,15 @@ function Sitemap(props) {
 
 Sitemap.propTypes = {
   getNavigation: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
+  navroot: PropTypes.object.isRequired,
   intl: PropTypes.object.isRequired,
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
 };
 
 export const __test__ = compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
@@ -98,25 +93,22 @@ export default compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
-      isMultilingual: state.site.data.features?.multilingual,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
   asyncConnect([
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch, getState } }) => {
+      promise: ({ store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const state = getState();
-        const path = getSitemapPath(
-          location.pathname,
-          state.site.data.features?.multilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(
+            expandToBackendURL(navroot),
+            config.settings.siteMapDepth,
+          ),
         );
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -0,0 +1,82 @@
+import { injectIntl } from 'react-intl';
+import SitemapComponent from './Sitemap';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSitemapComponent = injectIntl(SitemapComponent);
+
+function StoryComponent(args) {
+  // Add mock location object
+  const mockLocation = {
+    pathname: '/sitemap',
+    search: '',
+    hash: '',
+    state: null,
+  };
+  return (
+    <Wrapper
+      customStore={{
+        navigation: {
+          url: 'http://localhost:8080/Plone/@navigation',
+          ...args,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSitemapComponent
+        location={mockLocation}
+        getNavigation={() => {}}
+        lang="en"
+        items={args.items}
+      />
+    </Wrapper>
+  );
+}
+
+export const Sitemap = StoryComponent.bind({});
+Sitemap.args = {
+  items: [
+    {
+      url: 'http://localhost:8080/Plone/page-1',
+      description: '',
+      items: [
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-2',
+          description: '',
+          title: 'Page 1-2',
+        },
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-3',
+          description: '',
+          title: 'Page 1-3',
+        },
+      ],
+      title: 'Page 1-3',
+    },
+    {
+      url: 'http://localhost:8080/Plone/page-2',
+      description: '',
+      title: 'Page 2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/Sitemap',
+  component: Sitemap,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'url,description,title of the pages mentioned',
+    },
+  },
+};

package/src/components/theme/Sitemap/Sitemap.test.jsx

@@ -43,6 +43,15 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/`,
+            '@type': 'Plone Site',
+            title: 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -93,6 +102,15 @@ describe('Sitemap in a multilingual site', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/en`,
+            '@type': 'LRF',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/SlotRenderer/SlotRenderer.tsx

@@ -1,6 +1,10 @@
 import { useLocation } from 'react-router-dom';
 import config from '@plone/volto/registry';
-import type { Content } from '@plone/types';
+import type { GetSlotArgs } from '@plone/types';
+
+export interface SlotRendererProps extends GetSlotArgs {
+  name: string;
+}
 
 /*
 Usage:
@@ -11,20 +15,20 @@ const SlotRenderer = ({
   name,
   content,
   navRoot,
-}: {
-  name: string;
-  content: Content;
-  navRoot?: Content;
-}) => {
+  data,
+  ...rest
+}: SlotRendererProps) => {
   const location = useLocation();
 
   let slots = config.getSlot(name, {
+    ...rest,
     content,
     location: location as any, // Since we are using an older version of history, we need to cast it to any
     // This is to cover the use case while adding a new content and we don't have
     // have the navRoot information in the initial content. This will be
     // useful for SlotRenderers rendered in the `Add` route.
     navRoot: content?.['@components']?.navroot?.navroot || navRoot,
+    data,
   });
 
   if (!slots) {
@@ -45,10 +49,12 @@ const SlotRenderer = ({
           const SlotComponent = component;
           return (
             <SlotComponent
+              {...rest}
               key={name}
               content={content}
               location={location}
               navRoot={navRoot}
+              data={data}
             />
           );
         },

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -1,43 +1,45 @@
 import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
+  const token = useSelector((state) => state.userSession.token);
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
 
+  if (!token) {
+    return (
+      <Redirect
+        to={{
+          pathname: `${location.pathname.replace(/\/$/, '')}/login`,
+          search: `?return_url=${encodeURIComponent(location.pathname)}`,
+          state: {
+            // This is needed to cover the use case of being logged in in
+            // another backend (eg. in development), having a token for
+            // localhost and try to use it, the login route has to know that
+            // it's the same as it comes from a logout
+            isLogout: true,
+          },
+        }}
+      />
+    );
+  }
+
   return (
     <Container className="view-wrapper">
+      <BodyClass className="view-unauthorized" />
       <h1>
         <FormattedMessage id="Unauthorized" defaultMessage="Unauthorized" />
       </h1>
       <h3>{error_message}</h3>
       <p className="description">
         <FormattedMessage
-          id="You are trying to access a protected resource, please {login} first."
-          defaultMessage="You are trying to access a protected resource, please {login} first."
-          values={{
-            login: (
-              <Link
-                to={{
-                  pathname: `${getBaseUrl(location.pathname)}/login`,
-                  state: {
-                    // This is needed to cover the use case of being logged in in
-                    // another backend (eg. in development), having a token for
-                    // localhost and try to use it, the login route has to know that
-                    // it's the same as it comes from a logout
-                    isLogout: true,
-                  },
-                }}
-              >
-                <FormattedMessage id="log in" defaultMessage="log in" />
-              </Link>
-            ),
-          }}
+          id="You are trying to access a protected resource."
+          defaultMessage="You are trying to access a protected resource."
         />
       </p>
       <p>
@@ -62,5 +64,6 @@ const Unauthorized = () => {
     </Container>
   );
 };
-
-export default withServerErrorCode(401)(Unauthorized);
+const UnauthorizedWithCode = withServerErrorCode(401)(Unauthorized);
+UnauthorizedWithCode.displayName = 'unauthorized';
+export default UnauthorizedWithCode;

package/src/components/theme/Unauthorized/Unauthorized.test.jsx

@@ -2,15 +2,44 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, StaticRouter } from 'react-router-dom';
 
 import Unauthorized from './Unauthorized';
 
 const mockStore = configureStore();
 
 describe('Unauthorized', () => {
-  it('renders a not found component', () => {
+  it('redirects to login', () => {
     const store = mockStore({
+      userSession: {
+        token: null,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      apierror: {
+        message: 'You are not authorized to access this resource',
+      },
+    });
+    const context = {};
+    const component = renderer.create(
+      <Provider store={store}>
+        <StaticRouter context={context} location="/private">
+          <Unauthorized />
+        </StaticRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+    expect(context.url).toEqual('/private/login?return_url=%2Fprivate');
+  });
+
+  it('renders an unauthorized component for authenticated user', () => {
+    const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/VideoEmbed/VideoEmbed.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useCallback } from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Image from '@plone/volto/components/theme/Image/Image';
+import cx from 'classnames';
+
+import PlayIcon from '@plone/volto/icons/play.svg';
+
+const VideoEmbed = (props) => {
+  const {
+    aspectRatio = '16:9',
+    autoplay,
+    brandedUI = false,
+    className,
+    color = '#444444',
+    hd = true,
+    id,
+    placeholder,
+    source,
+    title,
+    url,
+  } = props;
+
+  const [isActive, setIsActive] = useState(false);
+  const PlayVideo = useCallback(() => {
+    setIsActive(true);
+  }, []);
+
+  const getSrc = useCallback(() => {
+    if (source === 'youtube') {
+      return [
+        `https://www.youtube.com/embed/${id}`,
+        '?autohide=true',
+        `&autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&mute=${autoplay ? 1 : 0}`,
+        `&color=${encodeURIComponent(color)}`,
+        `&hq=${hd}`,
+        '&jsapi=false',
+        `&modestbranding=${brandedUI}`,
+        `&rel=${brandedUI ? 0 : 1}`,
+      ].join('');
+    }
+
+    if (source === 'vimeo') {
+      return [
+        `https://player.vimeo.com/video/${id}`,
+        '?api=false',
+        `&autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&muted=${autoplay ? 1 : 0}`,
+        `&byline=false`,
+        `&color=${encodeURIComponent(color)}`,
+        `&portrait=false`,
+        `&title=false`,
+      ].join('');
+    }
+
+    if (source === 'peertube') {
+      return [
+        `${url}`,
+        `?autoplay=${isActive || autoplay ? 1 : 0}`,
+        `&muted=${autoplay ? 1 : 0}`,
+      ].join('');
+    }
+
+    return '';
+  }, [source, id, isActive, autoplay, color, hd, brandedUI, url]);
+
+  return (
+    <div className={cx('ui embed video-embed', aspectRatio, className)}>
+      {isActive || autoplay ? (
+        <iframe
+          allowFullScreen={false}
+          frameBorder="0"
+          height="100%"
+          scrolling="no"
+          src={getSrc()}
+          title={`Embedded content from ${source}.`}
+          width="100%"
+          allow="autoplay; encrypted-media"
+        />
+      ) : (
+        <>
+          {placeholder ? (
+            <Image className="placeholder" src={placeholder} alt="" />
+          ) : (
+            <div className="fallback-placeholder"></div>
+          )}
+          <button
+            className="video-play-button"
+            onClick={PlayVideo}
+            aria-label={title ? `Play video ${title}` : 'Play video'}
+          >
+            <Icon name={PlayIcon} color="white" size="100%" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default VideoEmbed;

package/src/components/theme/View/EventDatesInfo.test.jsx

@@ -5,12 +5,7 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/EventView.stories.jsx

@@ -0,0 +1,89 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import EventViewComponent from './EventView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import config from '@plone/volto/registry';
+const IntlEventViewComponent = injectIntl(EventViewComponent);
+const { settings } = config;
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlEventViewComponent
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  attendees: [],
+  subjects: [],
+};
+
+export const EventViewAllProps = StoryComponent.bind({});
+EventViewAllProps.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+  attendees: ['John Doe', 'Mario Rossi'],
+  contact_email: 'test@example.com',
+  contact_name: 'John Doe',
+  contact_phone: '0123456789',
+  end: '2019-06-24T15:20:00+00:00',
+  event_url: 'https://www.example.com',
+  location: 'Volto, Plone',
+  open_end: false,
+  recurrence: 'RRULE:FREQ=DAILY;INTERVAL=7;COUNT=7',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: ['Guillotina', 'Volto'],
+  whole_day: false,
+};
+
+export const EventViewWithoutLinkToApiInTheText = StoryComponent.bind({});
+EventViewWithoutLinkToApiInTheText.args = {
+  title: 'Hello World!',
+  attendees: [],
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: [],
+  text: {
+    data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
+  },
+};
+export default {
+  title: 'Public components/View/EventView',
+  component: EventViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    end: {
+      control: 'date',
+    },
+    start: {
+      control: 'date',
+    },
+  },
+};

package/src/components/theme/View/EventView.test.jsx

@@ -14,12 +14,7 @@ const store = mockStore({
   },
 });
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/View/FileView.stories.jsx

@@ -0,0 +1,50 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import FileViewComponent from './FileView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlFileViewComponent = injectIntl(FileViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper customStore={{}}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlFileViewComponent
+        content={{
+          ...args,
+          file: {
+            download: 'file:///preview.pdf',
+            ...args,
+          },
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  filename: 'preview.pdf',
+};
+
+export default {
+  title: 'Public components/View/FileView',
+  component: FileViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    filename: {
+      description: 'Name of the file',
+    },
+  },
+};