@eeacms/volto-cca-policy 0.1.90 → 0.1.91

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+### [0.1.91](https://github.com/eea/volto-cca-policy/compare/0.1.90...0.1.91) - 5 March 2024
+
+#### :bug: Bug Fixes
+
+- fix(test): update tests for UniversalLink + generate snapshot [kreafox - [`4b2e0c2`](https://github.com/eea/volto-cca-policy/commit/4b2e0c265601f1420a95a9cf0056fc3ea73baf59)]
+
+#### :hammer_and_wrench: Others
+
+- Add test file [Tiberiu Ichim - [`282e32c`](https://github.com/eea/volto-cca-policy/commit/282e32cde07122150379df996b19d37eed3e0260)]
+- Add override for UniversalLink, see #266263 [Tiberiu Ichim - [`63242f5`](https://github.com/eea/volto-cca-policy/commit/63242f5fc4b0e54d1170b8f8ee31dba46e997eee)]
 ### [0.1.90](https://github.com/eea/volto-cca-policy/compare/0.1.89...0.1.90) - 5 March 2024
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/volto/components/manage/UniversalLink/README.md

@@ -0,0 +1,3 @@
+Customization of https://github.com/eea/volto-eea-website-theme/blob/e12e85279d0973ed17ffadf9897f0bc8f4368227/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
+
+Because we always want to open external links in new tabs

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

@@ -0,0 +1,152 @@
+/*
+ * UniversalLink
+ * @module components/UniversalLink
+ * Removed noreferrer from rel attribute
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HashLink as Link } from 'react-router-hash-link';
+import { useSelector } from 'react-redux';
+import {
+  flattenToAppURL,
+  isInternalURL,
+  URLUtils,
+} from '@plone/volto/helpers/Url/Url';
+
+import config from '@plone/volto/registry';
+
+const UniversalLink = ({
+  href,
+  item = null,
+  openLinkInNewTab,
+  download = false,
+  children,
+  className = null,
+  title = null,
+  ...props
+}) => {
+  const token = useSelector((state) => state.userSession?.token);
+
+  let url = href;
+  if (!href && item) {
+    if (!item['@id']) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Invalid item passed to UniversalLink',
+        item,
+        props,
+        children,
+      );
+      url = '#';
+    } else {
+      //case: generic item
+      url = flattenToAppURL(item['@id']);
+
+      //case: item like a Link
+      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
+      if (!token && remoteUrl) {
+        url = remoteUrl;
+      }
+
+      //case: item of type 'File'
+      if (
+        !token &&
+        config.settings.downloadableObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@download/file`;
+      }
+
+      if (
+        !token &&
+        config.settings.viewableInBrowserObjects.includes(item['@type'])
+      ) {
+        url = `${url}/@@display-file/file`;
+      }
+    }
+  }
+
+  const isExternal = !isInternalURL(url);
+
+  const isDownload = (!isExternal && url.includes('@@download')) || download;
+  const isDisplayFile =
+    (!isExternal && url.includes('@@display-file')) || false;
+
+  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
+
+  url = checkedURL.url;
+  let tag = (
+    <Link
+      to={flattenToAppURL(url)}
+      target={openLinkInNewTab ?? false ? '_blank' : null}
+      title={title}
+      className={className}
+      smooth={config.settings.hashLinkSmoothScroll}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+
+  const isBlank =
+    (isExternal || openLinkInNewTab) &&
+    (!checkedURL.isMail || !checkedURL.isTelephone);
+
+  if (isExternal) {
+    tag = (
+      <a
+        href={url}
+        title={title}
+        target={isBlank ? '_blank' : null}
+        rel="noopener"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDownload) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        download
+        title={title}
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  } else if (isDisplayFile) {
+    tag = (
+      <a
+        href={flattenToAppURL(url)}
+        title={title}
+        rel="noopener"
+        className={className}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+  return tag;
+};
+
+UniversalLink.propTypes = {
+  href: PropTypes.string,
+  openLinkInNewTab: PropTypes.bool,
+  download: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  item: PropTypes.shape({
+    '@id': PropTypes.string.isRequired,
+    remoteUrl: PropTypes.string, //of plone @type 'Link'
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};
+
+export default UniversalLink;

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

@@ -0,0 +1,229 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import UniversalLink from './UniversalLink';
+import config from '@plone/volto/registry';
+
+const mockStore = configureStore();
+const store = mockStore({
+  userSession: {
+    token: null,
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+global.console.error = jest.fn();
+
+describe('UniversalLink', () => {
+  it('renders a UniversalLink component with internal link', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href={'/en/welcome-to-volto'}>
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UniversalLink component with external link', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink href="https://github.com/plone/volto">
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a UniversalLink component if no external(href) link passed', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            item={{
+              '@id': 'http://localhost:3000/en/welcome-to-volto',
+            }}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('check UniversalLink set rel attribute for ext links', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('rel')).toBe(
+      'noopener',
+    );
+  });
+
+  it('check UniversalLink set target attribute for ext links', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('target')).toBe(
+      '_blank',
+    );
+  });
+
+  it('check UniversalLink can unset target for ext links with prop', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="https://github.com/plone/volto"
+            title="Volto GitHub repository"
+            openLinkInNewTab={false}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Volto GitHub repository').getAttribute('target')).toBe(
+      '_blank',
+    );
+  });
+
+  it('check UniversalLink renders ext link for blacklisted urls', () => {
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: '/external-app',
+          exact: true,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/external-app"
+            title="Blacklisted route"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('Blacklisted route').getAttribute('target')).toBe(
+      '_blank',
+    );
+  });
+
+  it('UniversalLink renders external link where link is blacklisted', () => {
+    const notInEN = /^(?!.*(#|\/en|\/static|\/controlpanel|\/cypress|\/login|\/logout|\/contact-form)).*$/;
+    config.settings.externalRoutes = [
+      {
+        match: {
+          path: notInEN,
+          exact: false,
+          strict: false,
+        },
+        url(payload) {
+          return payload.location.pathname;
+        },
+      },
+    ];
+
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            href="http://localhost:3000/blacklisted-app"
+            title="External blacklisted app"
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByTitle('External blacklisted app').getAttribute('target')).toBe(
+      '_blank',
+    );
+    expect(getByTitle('External blacklisted app').getAttribute('rel')).toBe(
+      'noopener',
+    );
+  });
+
+  it('check UniversalLink does not break with error in item', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <UniversalLink
+            item={{
+              error: 'Error while fetching content',
+              message: 'Something went wrong',
+            }}
+          >
+            <h1>Title</h1>
+          </UniversalLink>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+    expect(global.console.error).toHaveBeenCalled();
+  });
+});
+
+it('renders a UniversalLink component when url ends with @@display-file', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <UniversalLink href="http://localhost:3000/en/welcome-to-volto/@@display-file">
+          <h1>Title</h1>
+        </UniversalLink>
+      </MemoryRouter>
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});