@plone/volto 17.0.0-alpha.17 → 17.0.0-alpha.19

package/src/components/theme/SearchWidget/SearchWidget.jsx

@@ -1,14 +1,7 @@
-/**
- * Search widget component.
- * @module components/theme/SearchWidget/SearchWidget
- */
-
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Form, Input } from 'semantic-ui-react';
-import { compose } from 'redux';
-import { PropTypes } from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from '@plone/volto/components';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
@@ -24,96 +17,43 @@ const messages = defineMessages({
   },
 });
 
-/**
- * SearchWidget component class.
- * @class SearchWidget
- * @extends Component
- */
-class SearchWidget extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    pathname: PropTypes.string,
+const SearchWidget = (props) => {
+  const intl = useIntl();
+  const [text, setText] = useState('');
+  const history = useHistory();
+  const onChangeText = (event, { value }) => {
+    setText(value);
   };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-    this.onChangeText = this.onChangeText.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-    this.state = {
-      text: '',
-    };
-  }
-
-  /**
-   * On change text
-   * @method onChangeText
-   * @param {object} event Event object.
-   * @param {string} value Text value.
-   * @returns {undefined}
-   */
-  onChangeText(event, { value }) {
-    this.setState({
-      text: value,
-    });
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @param {event} event Event object.
-   * @returns {undefined}
-   */
-  onSubmit(event) {
+  const pathname = props.pathname;
+  const onSubmit = (event) => {
     const path =
-      this.props.pathname?.length > 0
-        ? `&path=${encodeURIComponent(this.props.pathname)}`
-        : '';
-    this.props.history.push(
-      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-    );
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    history.push(`/search?SearchableText=${encodeURIComponent(text)}${path}`);
     // reset input value
-    this.setState({
-      text: '',
-    });
+    setText('');
     event.preventDefault();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Form action="/search" onSubmit={this.onSubmit}>
-        <Form.Field className="searchbox">
-          <Input
-            aria-label={this.props.intl.formatMessage(messages.search)}
-            onChange={this.onChangeText}
-            name="SearchableText"
-            value={this.state.text}
-            transparent
-            autoComplete="off"
-            placeholder={this.props.intl.formatMessage(messages.searchSite)}
-            title={this.props.intl.formatMessage(messages.search)}
-          />
-          <button aria-label={this.props.intl.formatMessage(messages.search)}>
-            <Icon name={zoomSVG} size="18px" />
-          </button>
-        </Form.Field>
-      </Form>
-    );
-  }
-}
+  };
 
-export default compose(withRouter, injectIntl)(SearchWidget);
+  return (
+    <Form action="/search" onSubmit={onSubmit}>
+      <Form.Field className="searchbox">
+        <Input
+          aria-label={intl.formatMessage(messages.search)}
+          onChange={onChangeText}
+          name="SearchableText"
+          value={text}
+          transparent
+          autoComplete="off"
+          placeholder={intl.formatMessage(messages.searchSite)}
+          title={intl.formatMessage(messages.search)}
+        />
+        <button aria-label={intl.formatMessage(messages.search)}>
+          <Icon name={zoomSVG} size="18px" />
+        </button>
+      </Form.Field>
+    </Form>
+  );
+};
+
+export default SearchWidget;

package/src/components/theme/View/LinkView.jsx

@@ -1,95 +1,67 @@
-/**
- * Link View.
- * @module components/theme/View/LinkView
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
 import config from '@plone/volto/registry';
 
-/**
- * View container class.
- * @class View
- * @extends Component
- */
-class LinkView extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    content: PropTypes.shape({
-      title: PropTypes.string,
-      description: PropTypes.string,
-      remoteUrl: PropTypes.string,
-    }),
-    token: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    content: null,
-    token: null,
-  };
-
-  componentDidMount() {
-    if (!this.props.token) {
-      const { remoteUrl } = this.props.content;
+const LinkView = ({ token, content }) => {
+  const history = useHistory();
+  useEffect(() => {
+    if (!token) {
+      const { remoteUrl } = content;
       if (isInternalURL(remoteUrl)) {
-        this.props.history.replace(flattenToAppURL(remoteUrl));
+        history.replace(flattenToAppURL(remoteUrl));
       } else if (!__SERVER__) {
         window.location.href = flattenToAppURL(remoteUrl);
       }
     }
-  }
+  }, [content, history, token]);
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { remoteUrl } = this.props.content;
-    const { openExternalLinkInNewTab } = config.settings;
-    const Container =
-      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
 
-    return (
-      <Container id="page-document">
-        <h1 className="documentFirstHeading">{this.props.content.title}</h1>
-        {this.props.content.description && (
-          <p className="documentDescription">
-            {this.props.content.description}
-          </p>
-        )}
-        {remoteUrl && (
-          <p>
-            <FormattedMessage
-              id="The link address is:"
-              defaultMessage="The link address is:"
-            />{' '}
-            <UniversalLink
-              href={remoteUrl}
-              openLinkInNewTab={
-                openExternalLinkInNewTab && !isInternalURL(remoteUrl)
-              }
-            >
-              {flattenToAppURL(remoteUrl)}
-            </UniversalLink>
-          </p>
-        )}
-      </Container>
-    );
-  }
-}
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
 
 export default LinkView;

package/src/config/NonContentRoutes.jsx

@@ -12,6 +12,7 @@ export const nonContentRoutes = [
   '/diff',
   /\/edit$/,
   '/historyview',
+  '/links-to-item',
   '/layout',
   '/login',
   '/logout',

package/src/config/index.js

@@ -74,6 +74,7 @@ let config = {
     port,
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
+    okRoute: '/ok',
     apiPath,
     apiExpanders: [
       // Add the following expanders for only issuing a single request.
@@ -183,6 +184,7 @@ let config = {
     styleClassNameExtenders,
     querystringSearchGet: false,
     blockSettingsTabFieldsetsInitialStateOpen: true,
+    excludeLinksAndReferencesMenuItem: false,
   },
   experimental: {
     addBlockButton: {

package/src/config/server.js

@@ -1,6 +1,7 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -11,6 +12,7 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
+    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/express-middleware/ok.js

@@ -0,0 +1,16 @@
+import express from 'express';
+import config from '@plone/volto/registry';
+
+const ok = function (req, res, next) {
+  res.type('text/plain');
+  res.set('Expires', 'Sat, 1 Jan 2000 00:00:00 GMT');
+  res.set('Cache-Control', 'max-age=0, must-revalidate, private');
+  res.send('ok');
+};
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all(config?.settings?.okRoute || '/ok', ok);
+  middleware.id = 'ok';
+  return middleware;
+}

package/src/hooks/client/useClient.js

@@ -0,0 +1,11 @@
+//useClient hook to replace repetitive delcaration in the components
+import { useEffect, useState } from 'react';
+
+export function useClient() {
+  const [isClient, setisClient] = useState(false);
+  useEffect(() => {
+    setisClient(true);
+  }, []);
+
+  return isClient;
+}

package/src/hooks/index.js

@@ -1 +1,2 @@
 export useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
+export { useClient } from '@plone/volto/hooks/client/useClient';

package/src/routes.js

@@ -23,6 +23,7 @@ import {
   Diff,
   Edit,
   History,
+  LinksToItem,
   Login,
   Logout,
   ManageTranslations,
@@ -285,6 +286,14 @@ export const defaultRoutes = [
     path: '/**/manage-translations',
     component: ManageTranslations,
   },
+  {
+    path: '/links-to-item',
+    component: LinksToItem,
+  },
+  {
+    path: '/**/links-to-item',
+    component: LinksToItem,
+  },
   {
     path: '/register',
     component: Register,

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

@@ -25,7 +25,7 @@ body {
   &.has-toolbar-menu-open,
   &.has-mobile-menu-open {
     // The body scroll locker when the toolbar or the mobile menu are active in mobile.
-    @media only screen and (max-width: @largestMobileScreen) {
+    @media only screen and (max-width: @largestTabletScreen) {
       overflow: hidden;
     }
   }
@@ -667,5 +667,6 @@ body.has-toolbar-collapsed .mobile-menu {
 @import 'login';
 @import 'language-selector';
 @import 'views';
+@import 'toc';
 @import 'grid.less';
 .loadUIOverrides();

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

@@ -0,0 +1,29 @@
+.table-of-contents.horizontalMenu.sticky-toc {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+}
+
+.table-of-contents.horizontalMenu .hidden {
+  z-index: -1;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.table-of-contents.horizontalMenu .hidden-dropdown {
+  display: none !important;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown {
+  position: absolute !important;
+  right: 0;
+}
+
+.table-of-contents.horizontalMenu > .ui.menu {
+  position: relative;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown .focused > a {
+  border: 2px solid black !important;
+  border-radius: 4px;
+}

package/news/4351.bugfix

@@ -1 +0,0 @@
-Fix temporary rendering of folder contents while query results are loading. @davisagli

package/news/4725.bugfix

@@ -1 +0,0 @@
-Fix isBlacklisted method check for volto externalRoutes

package/news/4932.bugfix

@@ -1 +0,0 @@
-Add a marker in the props passed to `RenderBlocks` in the Grid block view @sneridagh

package/news/4941.documentation

@@ -1 +0,0 @@
-Replace broken link for @albertcasado to use GitHub instead of Twitter. @stevepiercy

package/news/4951.breaking

@@ -1 +0,0 @@
-Remove useToken & useContent hooks-@Tishasoumya-02

package/news/4962.feature

@@ -1 +0,0 @@
-Use container from component registry in content type views, if defined. @sneridagh

package/news/4964.bugfix

@@ -1 +0,0 @@
-Fix handling of overriden image in Teaser, improve in case that a custom image component is present. @sneridagh