@eeacms/volto-eea-website-theme 1.21.0 → 1.22.0

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+[ -n "$CI" ] && exit 0
+yarn lint-staged

package/CHANGELOG.md

@@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.22.0](https://github.com/eea/volto-eea-website-theme/compare/1.21.0...1.22.0) - 26 September 2023
+
+#### :rocket: New Features
+
+- feat: Sync Sharing component customzation to Volto 16.24.0 - refs #256039 [Alin Voinea - [`5dd215e`](https://github.com/eea/volto-eea-website-theme/commit/5dd215e4782e3ef47d558a8d57f979979496e5d9)]
+
+#### :bug: Bug Fixes
+
+- fix(tests): fix failing cypress tests [kreafox - [`6f729e4`](https://github.com/eea/volto-eea-website-theme/commit/6f729e40780cd02999685382f51903e0b988d647)]
+- fix(tests): fix failing cypress tests [kreafox - [`cccf2c5`](https://github.com/eea/volto-eea-website-theme/commit/cccf2c561621e60ae76b1eab6a34a078f72b6bce)]
+- fix(tests): fix failing cypress tests [kreafox - [`89f7572`](https://github.com/eea/volto-eea-website-theme/commit/89f7572850928501812b7cbaeea2db7346aeda82)]
+- fix(tests): fix failing cypress tests [kreafox - [`fc4d65d`](https://github.com/eea/volto-eea-website-theme/commit/fc4d65de6b437cf699f70babb76de80be9b80681)]
+
+#### :house: Internal changes
+
+- style: lint-staged reorder in package.json [Alin Voinea - [`e9db5f2`](https://github.com/eea/volto-eea-website-theme/commit/e9db5f22d8d6b43383d40d3cb6415ee7ab4c9e70)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.22.0 [Alin Voinea - [`50f6493`](https://github.com/eea/volto-eea-website-theme/commit/50f649344153f7501f6e9f917fc0a44923271bd2)]
+- test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`56b7442`](https://github.com/eea/volto-eea-website-theme/commit/56b744237da1f9ba688b7b2e06a20e1758364c31)]
 ### [1.21.0](https://github.com/eea/volto-eea-website-theme/compare/1.20.0...1.21.0) - 5 September 2023
 
 #### :house: Internal changes

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 8888,
+  defaultCommandTimeout: 5000,
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,
   retries: {
-    runMode: 8,
+    runMode: 1,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,9 +31,32 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "*",
+    "lint-staged": "*",
     "md5": "^2.3.0",
     "postcss-less": "6.0.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
@@ -51,6 +74,7 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open"
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

package/src/components/manage/Blocks/Title/schema.js

@@ -55,6 +55,7 @@ export default {
         'hideCreationDate',
         'hidePublishingDate',
         'hideModificationDate',
+        'subtitle',
         'info',
       ],
     },
@@ -94,6 +95,9 @@ export default {
       title: 'Hide download button',
       type: 'boolean',
     },
+    subtitle: {
+      title: 'Subtitle',
+    },
     rssLinks: {
       title: 'RSS Links',
       widget: 'object_list',

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

@@ -80,6 +80,7 @@ const View = (props) => {
     copyrightIcon,
     copyrightPosition,
     rssLinks,
+    subtitle,
     // contentType,
   } = props.data;
   const copyrightPrefix =
@@ -199,6 +200,7 @@ const View = (props) => {
           </>
         }
       >
+        {subtitle && <Banner.Subtitle>{subtitle}</Banner.Subtitle>}
         <Title config={banner.title} properties={metadata} />
         <Banner.Metadata>
           <Banner.MetadataField

package/src/customizations/@root/theme.js

@@ -0,0 +1,2 @@
+import '@eeacms/volto-eea-design-system/semantic.less';
+import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';

package/src/customizations/volto/components/manage/Sharing/Sharing.jsx

@@ -14,7 +14,7 @@ import { Portal } from 'react-portal';
 import {
   Button,
   Checkbox,
-  Container,
+  Container as SemanticContainer,
   Form,
   Icon as IconOld,
   Input,
@@ -28,6 +28,7 @@ import { updateSharing, getSharing } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Icon, Toolbar, Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
+import config from '@plone/volto/registry';
 
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -144,6 +145,7 @@ class SharingComponent extends Component {
     this.onToggleInherit = this.onToggleInherit.bind(this);
     this.state = {
       search: '',
+      isLoading: false,
       inherit: props.inherit,
       entries: props.entries,
       isClient: false,
@@ -224,7 +226,17 @@ class SharingComponent extends Component {
    */
   onSearch(event) {
     event.preventDefault();
-    this.props.getSharing(getBaseUrl(this.props.pathname), this.state.search);
+    this.setState({ isLoading: true });
+    this.props
+      .getSharing(getBaseUrl(this.props.pathname), this.state.search)
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+      .catch((error) => {
+        this.setState({ isLoading: false });
+        // eslint-disable-next-line no-console
+        console.error('Error searching users or groups', error);
+      });
   }
 
   /**
@@ -245,9 +257,9 @@ class SharingComponent extends Component {
    * @returns {undefined}
    */
   onToggleInherit() {
-    this.setState({
-      inherit: !this.state.inherit,
-    });
+    this.setState((state) => ({
+      inherit: !state.inherit,
+    }));
   }
 
   /**
@@ -288,11 +300,17 @@ class SharingComponent extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const Container =
+      config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
     return (
       <Container id="page-sharing">
         <Helmet title={this.props.intl.formatMessage(messages.sharing)} />
         <Segment.Group raised>
-          <Pluggable name="sharing-component" />
+          <Pluggable
+            name="sharing-component"
+            params={{ isLoading: this.state.isLoading }}
+          />
           <Plug pluggable="sharing-component" id="sharing-component-title">
             <Segment className="primary">
               <FormattedMessage
@@ -314,20 +332,29 @@ class SharingComponent extends Component {
             </Segment>
           </Plug>
           <Plug pluggable="sharing-component" id="sharing-component-search">
-            <Segment>
-              <Form onSubmit={this.onSearch}>
-                <Form.Field>
-                  <Input
-                    name="SearchableText"
-                    action={{ icon: 'search' }}
-                    placeholder={this.props.intl.formatMessage(
-                      messages.searchForUserOrGroup,
-                    )}
-                    onChange={this.onChangeSearch}
-                  />
-                </Form.Field>
-              </Form>
-            </Segment>
+            {({ isLoading }) => {
+              return (
+                <Segment>
+                  <Form onSubmit={this.onSearch}>
+                    <Form.Field>
+                      <Input
+                        name="SearchableText"
+                        action={{
+                          icon: 'search',
+                          loading: isLoading,
+                          disabled: isLoading,
+                        }}
+                        placeholder={this.props.intl.formatMessage(
+                          messages.searchForUserOrGroup,
+                        )}
+                        onChange={this.onChangeSearch}
+                        id="sharing-component-search"
+                      />
+                    </Form.Field>
+                  </Form>
+                </Segment>
+              );
+            }}
           </Plug>
           <Plug
             pluggable="sharing-component"
@@ -400,9 +427,15 @@ class SharingComponent extends Component {
               <Segment attached>
                 <Form.Field>
                   <Checkbox
-                    checked={this.state.inherit}
+                    id="inherit-permissions-checkbox"
+                    name="inherit-permissions-checkbox"
+                    defaultChecked={this.state.inherit}
                     onChange={this.onToggleInherit}
-                    label={this.props.intl.formatMessage(messages.inherit)}
+                    label={
+                      <label htmlFor="inherit-permissions-checkbox">
+                        {this.props.intl.formatMessage(messages.inherit)}
+                      </label>
+                    }
                   />
                 </Form.Field>
                 <p className="help">

package/src/customizations/volto/components/manage/Sharing/Sharing.test.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import jwt from 'jsonwebtoken';
+import { MemoryRouter } from 'react-router-dom';
+import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
+
+import Sharing from './Sharing';
+
+const mockStore = configureStore();
+
+jest.mock('react-portal', () => ({
+  Portal: jest.fn(() => <div id="Portal" />),
+}));
+
+describe('Sharing', () => {
+  it('renders a sharing component', () => {
+    const store = mockStore({
+      userSession: {
+        token: jwt.sign({ sub: 'john-doe' }, 'secret'),
+      },
+      sharing: {
+        data: {
+          entries: [
+            {
+              id: 'john-doe',
+              disabled: false,
+              login: 'john-doe',
+              roles: {
+                Contributer: true,
+              },
+              title: 'John Doe',
+              type: 'user',
+            },
+          ],
+          inherit: true,
+          available_roles: [
+            {
+              id: 'Contributor',
+              title: 'Can add',
+            },
+          ],
+        },
+        update: {
+          loading: false,
+          loaded: true,
+        },
+      },
+      content: {
+        data: {
+          title: 'Blog',
+        },
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <Sharing location={{ pathname: '/blog' }} />
+          </MemoryRouter>
+        </PluggablesProvider>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});