@eeacms/volto-eea-website-theme 1.34.0 → 2.0.1

package/.eslintrc.js

@@ -48,8 +48,13 @@ const defaultConfig = {
     },
   },
   rules: {
-    'react/jsx-no-target-blank': 'off',
-  },
+    'react/jsx-no-target-blank': [
+      'error',
+      {
+        allowReferrer: true,
+      },
+    ],
+  }
 };
 
 const config = addonExtenders.reduce(

package/CHANGELOG.md

@@ -4,7 +4,59 @@ 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.33.2](https://github.com/eea/volto-eea-website-theme/compare/1.33.1...1.33.2) - 13 April 2024
+### [2.0.1](https://github.com/eea/volto-eea-website-theme/compare/2.0.0...2.0.1) - 14 May 2024
+
+#### :nail_care: Enhancements
+
+- change(draft-image): check if parent has effective date in future for draft image showing [David Ichim - [`608cbb0`](https://github.com/eea/volto-eea-website-theme/commit/608cbb0d06d014c3dc8ba99e2b79cf9103291d68)]
+
+#### :hammer_and_wrench: Others
+
+- modified param of dateIsInFuture to signal it's a string and not a date [David Ichim - [`e3243a0`](https://github.com/eea/volto-eea-website-theme/commit/e3243a075969a379462ba0b7889fe0d8b52af62a)]
+## [2.0.0](https://github.com/eea/volto-eea-website-theme/compare/1.34.0...2.0.0) - 13 May 2024
+
+#### :rocket: New Features
+
+- feat: Volto 17 support - refs #259049 [Teodor Voicu - [`79ce620`](https://github.com/eea/volto-eea-website-theme/commit/79ce6202469523c21462a86cb72b93016b10a2b6)]
+
+#### :bug: Bug Fixes
+
+- fix(draft_image): added fixes from 1.x.x branch [David Ichim - [`b62de0a`](https://github.com/eea/volto-eea-website-theme/commit/b62de0a8fd9c953210f4b371b5117d70f9e04040)]
+
+#### :nail_care: Enhancements
+
+- change(draft_image): added comments to DraftBackground code [David Ichim - [`0cb4304`](https://github.com/eea/volto-eea-website-theme/commit/0cb430424281f0d0a78e2f9b1326b6bc4128a6f3)]
+- refactor: Disable data figure  and plotly chart - refs #269278 [dobri1408 - [`d8fd0da`](https://github.com/eea/volto-eea-website-theme/commit/d8fd0dab10aceebf57cff5c1e777b795117b5a04)]
+- change(draft-image): to remove image when published date is set to the future [David Ichim - [`9b9e023`](https://github.com/eea/volto-eea-website-theme/commit/9b9e0232fe6cd624c19dc87bc8152477f1ee83fd)]
+- refactor: Move all customizations from volto-eea-website-policy [alin - [`07650fe`](https://github.com/eea/volto-eea-website-theme/commit/07650fe1c55571ec628dbe2cf8394709f0c7ae2d)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`e671c83`](https://github.com/eea/volto-eea-website-theme/commit/e671c834773f9091e1dafb8ec7a1cbea88e53ee2)]
+- style: Automated code fix [eea-jenkins - [`5156bb5`](https://github.com/eea/volto-eea-website-theme/commit/5156bb54b48f9731278ea860847a019fff10a84f)]
+
+#### :hammer_and_wrench: Others
+
+- Bump package version to 2.0.0 to signal major release due to Volto 17 jump [David Ichim - [`ffe3049`](https://github.com/eea/volto-eea-website-theme/commit/ffe3049b3b656093a44f05044dbe7cd63bac495f)]
+### [1.34.0](https://github.com/eea/volto-eea-website-theme/compare/1.33.2...1.34.0) - 9 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: Make sure effectiveDate is not null/undefined [alin - [`43400bc`](https://github.com/eea/volto-eea-website-theme/commit/43400bcce422049d9d38f17c7cc29e88062da902)]
+- fix: DraftBackground for effectiveDate in the future [alin - [`da7fa80`](https://github.com/eea/volto-eea-website-theme/commit/da7fa806e5d6edbb7b016f0356d5a886b75ba892)]
+
+#### :nail_care: Enhancements
+
+- refactor: Disable data figure  and plotly chart - refs #269278 [dobri1408 - [`002ef00`](https://github.com/eea/volto-eea-website-theme/commit/002ef003ad872ea8dd5c74acf74a85ca1fd1992b)]
+- change(draft-image): show draft image for items with publishing date in the future [David Ichim - [`59a3873`](https://github.com/eea/volto-eea-website-theme/commit/59a387364f40d8d66a747921ccff946e7f8814e1)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.34.0 [alin - [`92cc065`](https://github.com/eea/volto-eea-website-theme/commit/92cc065730f44412a04b2df7159c540d858f4607)]
+- Revert "Release 1.40.0" [alin - [`c1a4f30`](https://github.com/eea/volto-eea-website-theme/commit/c1a4f3042a91ebb4a1d674914d3bccf68954c94f)]
+- Revert "fix: DraftBackground for effectiveDate in the future" [alin - [`ed2ca9b`](https://github.com/eea/volto-eea-website-theme/commit/ed2ca9b5881c6991d82bb2a8d3f0fe8e29f1a6d7)]
+- Release 1.40.0 [alin - [`210f833`](https://github.com/eea/volto-eea-website-theme/commit/210f83384b6401f7c9a0e08070d69dd1fed690b1)]
+### [1.33.2](https://github.com/eea/volto-eea-website-theme/compare/1.33.1...1.33.2) - 16 April 2024
 
 #### :bug: Bug Fixes
 

package/docker-compose.yml

@@ -15,7 +15,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17}
     ports:
     - "3000:3000"
     - "3001:3001"

package/jest-addon.config.js

@@ -14,6 +14,8 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
+    '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
+    '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
@@ -28,6 +30,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.34.0",
+  "version": "2.0.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -34,6 +34,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
+    "jsonwebtoken": "9.0.0",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0",
     "postcss-less": "6.0.0"

package/src/components/manage/Blocks/LayoutSettings/index.js

@@ -3,7 +3,7 @@ import LayoutSettingsView from './LayoutSettingsView';
 import LayoutSettingsEdit from './LayoutSettingsEdit';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 
-export default (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig.layoutSettings = {
     id: 'layoutSettings',
     title: 'Layout settings',
@@ -19,3 +19,5 @@ export default (config) => {
 
   return config;
 };
+
+export default applyConfig;

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

@@ -1,7 +1,7 @@
 import Edit from './Edit';
 import View from './View';
 
-export default (config) => {
+const applyConfig = (config) => {
   config.blocks.blocksConfig.title = {
     ...config.blocks.blocksConfig.title,
     edit: Edit,
@@ -12,3 +12,5 @@ export default (config) => {
 
   return config;
 };
+
+export default applyConfig;

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

@@ -54,7 +54,7 @@ const RSSLink = {
   required: [],
 };
 
-export default {
+const titleSchema = {
   title: 'Page header',
   fieldsets: [
     {
@@ -175,3 +175,5 @@ export default {
 
   required: [],
 };
+
+export default titleSchema;

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

@@ -89,6 +89,9 @@ const View = (props) => {
   const copyrightPrefix =
     config.blocks.blocksConfig.title.copyrightPrefix || '';
 
+  const contentTypesWithoutHeaderImage =
+    config.settings?.eea?.contentTypesWithoutHeaderImage || [];
+
   // Set dates
   const getDate = useCallback(
     (hidden, key) => {
@@ -96,10 +99,10 @@ const View = (props) => {
     },
     [metadata],
   );
-  const creationDate = useMemo(() => getDate(hideCreationDate, 'created'), [
-    getDate,
-    hideCreationDate,
-  ]);
+  const creationDate = useMemo(
+    () => getDate(hideCreationDate, 'created'),
+    [getDate, hideCreationDate],
+  );
   const publishingDate = useMemo(
     () => getDate(hidePublishingDate, 'effective'),
     [getDate, hidePublishingDate],
@@ -110,7 +113,11 @@ const View = (props) => {
   );
 
   // Set image source
-  const image = getImageSource(metadata['image']);
+  const image = contentTypesWithoutHeaderImage.includes(
+    props.properties['@type'],
+  )
+    ? false
+    : getImageSource(metadata['image']);
   // Get type
   const type = metadata.type_title || friendlyId(metadata['@type']);
 

package/src/components/theme/DraftBackground/DraftBackground.jsx

@@ -1,10 +1,8 @@
-import React from 'react';
+import { BodyClass, flattenToAppURL } from '@plone/volto/helpers';
 import { connect } from 'react-redux';
-import './draft.css';
-import { BodyClass } from '@plone/volto/helpers';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import './draft.css';
 
 /**
  * Removes any trailing slashes from the given string.
@@ -16,6 +14,18 @@ const removeTrailingSlash = (str) => {
   return str.replace(/\/+$/, '');
 };
 
+/**
+ * Checks if a given date is in the future.
+ *
+ * @param {string} date - The date to check.
+ * @returns {boolean} `true` if the date is in the future, `false` otherwise.
+ */
+const dateIsInFuture = (date) => {
+  return (
+    date && date !== 'None' && new Date(date).getTime() > new Date().getTime()
+  );
+};
+
 /**
  * Checks if the current content is published.
  *
@@ -38,36 +48,35 @@ export const checkIfPublished = (props) => {
   // set draft image if effective date is set and is in the future
   // regardless of review_state
   const effectiveDate = props?.content?.effective;
-  if (
-    effectiveDate &&
-    effectiveDate !== 'None' &&
-    new Date(effectiveDate).getTime() > new Date().getTime()
-  ) {
+  if (dateIsInFuture(effectiveDate)) {
     return false;
   }
 
+  const reviewState = props?.review_state;
+
   //case 1 : review_state published
-  if (props?.review_state === 'published') return true;
+  if (reviewState === 'published') return true;
 
   //case 2: review_state null, but parent is published eg:Image in published folder
-  if (
-    !props?.review_state &&
-    props?.content?.parent?.review_state === 'published'
-  )
+  // is marked as published, or not published if the effective date of parent
+  // is in the future
+  const parent = props?.content?.parent;
+  const parentReviewState = parent?.review_state;
+  if (!reviewState && parentReviewState === 'published') {
+    if (dateIsInFuture(parent?.effective)) {
+      return false;
+    }
     return true;
+  }
 
   //case 3: review_state null, but there is no parent eg: PloneSite
-  if (
-    !props?.review_state &&
-    Object.keys(props?.content?.parent || {}).length === 0
-  )
-    return true;
+  if (!reviewState && Object.keys(parent || {}).length === 0) return true;
 
   //case 4: review_state null, and review state of parent is null, eg: Image in PloneSite
-  if (!props?.review_state && !props?.content?.parent?.review_state)
-    return true;
+  if (!reviewState && !parentReviewState) return true;
   return false;
 };
+
 const DraftBackground = (props) => {
   let draftClass = 'wf-state-is-draft';
   if (checkIfPublished(props)) {

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

@@ -0,0 +1,85 @@
+import { checkIfPublished } from './DraftBackground';
+describe('checkIfPublished', () => {
+  it('should return true if contentId does not match pathname', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page2',
+    };
+
+    expect(checkIfPublished(props)).toBe(true);
+  });
+
+  it('should return false if effective date is in the future', () => {
+    const futureDate = new Date();
+    futureDate.setDate(futureDate.getDate() + 10);
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      content: {
+        effective: futureDate.toISOString(),
+      },
+    };
+    expect(checkIfPublished(props)).toBe(false);
+  });
+
+  it('should return true if review_state is published', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      review_state: 'published',
+    };
+    expect(checkIfPublished(props)).toBe(true);
+  });
+
+  it('should return true if review_state is null and parent is published', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      review_state: null,
+      content: {
+        parent: {
+          review_state: 'published',
+        },
+      },
+    };
+    expect(checkIfPublished(props)).toBe(true);
+  });
+
+  it('should return true if review_state is null and parent is empty', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      review_state: null,
+      content: {
+        parent: {},
+      },
+    };
+    expect(checkIfPublished(props)).toBe(true);
+  });
+
+  it('should return true if review_state is null and parent review_state is null', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      review_state: null,
+      content: {
+        parent: {
+          review_state: null,
+        },
+      },
+    };
+    expect(checkIfPublished(props)).toBe(true);
+  });
+
+  it('should return false if review_state is not published and effective date is not in the future', () => {
+    const props = {
+      contentId: '/page1',
+      pathname: '/page1',
+      review_state: 'private',
+      content: {
+        effective: '2023-01-01T00:00:00Z',
+      },
+    };
+    expect(checkIfPublished(props)).toBe(false);
+  });
+});

package/src/config.js

@@ -342,3 +342,5 @@ export const colors = [
   '#F9F9F9',
   '#FFFFFF',
 ];
+
+export const contentTypesWithoutHeaderImage = ['Image'];

package/src/customizations/@plone/volto-slate/blocks/Text/TextBlockView.jsx

@@ -0,0 +1,32 @@
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import config from '@plone/volto/registry';
+import { isEqual } from 'lodash';
+import Slugger from 'github-slugger';
+import { normalizeString } from '@plone/volto/helpers';
+
+const TextBlockView = (props) => {
+  const { id, data, styling = {} } = props;
+  const { value, override_toc } = data;
+  const metadata = props.metadata || props.properties;
+  const { topLevelTargetElements } = config.settings.slate;
+
+  const getAttributes = (node, path) => {
+    const res = { ...styling };
+    if (node.type && isEqual(path, [0])) {
+      if (topLevelTargetElements.includes(node.type) || override_toc) {
+        const text = serializeNodesToText([node] || []);
+        const slug = Slugger.slug(normalizeString(text));
+        res.id = slug || id;
+        res['data-block'] = id;
+      }
+    }
+    return res;
+  };
+
+  return serializeNodes(value, getAttributes, { metadata: metadata });
+};
+
+export default TextBlockView;

package/src/customizations/@plone/volto-slate/editor/render.jsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { useLocation } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { Node, Text } from 'slate';
 import cx from 'classnames';
 import { isEmpty, isEqual, omit } from 'lodash';
+import { UniversalLink, Toast } from '@plone/volto/components';
+import { messages, addAppURL } from '@plone/volto/helpers';
+import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import config from '@plone/volto/registry';
+import linkSVG from '@plone/volto/icons/link.svg';
+
+import '@plone/volto-slate/editor/less/slate.less';
 
 const OMITTED = ['editor', 'path'];
 
@@ -177,3 +187,68 @@ export const serializeNodesToText = (nodes) => {
 
 export const serializeNodesToHtml = (nodes) =>
   renderToStaticMarkup(serializeNodes(nodes));
+
+export const renderLinkElement = (tagName) => {
+  function LinkElement({
+    attributes,
+    children,
+    mode = 'edit',
+    className = null,
+  }) {
+    const { slate = {} } = config.settings;
+    const Tag = tagName;
+    const slug = attributes.id || '';
+    const location = useLocation();
+    const token = useSelector((state) => state.userSession.token);
+    const appPathname = addAppURL(location.pathname);
+    // eslint-disable-next-line no-unused-vars
+    const [copied, copy, setCopied] = useClipboard(
+      appPathname.concat(`#${slug}`),
+    );
+    const intl = useIntl();
+    return !token || slate.useLinkedHeadings === false ? (
+      <Tag {...attributes} className={className} tabIndex={0}>
+        {children}
+      </Tag>
+    ) : (
+      <Tag {...attributes} className={className} tabIndex={0}>
+        {children}
+        {mode === 'view' && slug && (
+          <UniversalLink
+            className="anchor"
+            aria-hidden="true"
+            tabIndex={-1}
+            href={`#${slug}`}
+          >
+            <style>
+              {/* Prettify the unstyled flash of the link icon on development */}
+              {`
+                a.anchor svg {
+                  height: var(--anchor-svg-height, 24px);
+                }
+                `}
+            </style>
+            <svg
+              {...linkSVG.attributes}
+              dangerouslySetInnerHTML={{ __html: linkSVG.content }}
+              height={null}
+              onClick={() => {
+                copy();
+
+                toast.info(
+                  <Toast
+                    info
+                    title={intl.formatMessage(messages.success)}
+                    content={intl.formatMessage(messages.urlClipboardCopy)}
+                  />,
+                );
+              }}
+            ></svg>
+          </UniversalLink>
+        )}
+      </Tag>
+    );
+  }
+  LinkElement.displayName = `${tagName}LinkElement`;
+  return LinkElement;
+};

package/src/customizations/@plone/volto-slate/elementEditor/utils.js

@@ -158,88 +158,89 @@ export const _isActiveElement = (elementType) => (editor) => {
  * @param {string|Object[]} elementType - this can be a string or an array of strings
  * @returns {Object|null} - found node
  */
-export const _getActiveElement = (elementType) => (
-  editor,
-  direction = 'any',
-) => {
-  const selection = editor.selection || editor.getSavedSelection();
-  let found = [];
-
-  try {
-    found = Array.from(
-      Editor.nodes(editor, {
-        match: (n) =>
-          Array.isArray(elementType)
-            ? elementType.includes(n.type)
-            : n.type === elementType,
-        at: selection,
-      }),
-    );
-  } catch (e) {
-    return null;
-  }
-
-  if (found.length) return found[0];
-
-  if (!selection) return null;
+export const _getActiveElement =
+  (elementType) =>
+  (editor, direction = 'any') => {
+    const selection = editor.selection || editor.getSavedSelection();
+    let found = [];
 
-  if (direction === 'any' || direction === 'backward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
+    try {
+      found = Array.from(
+        Editor.nodes(editor, {
+          match: (n) =>
+            Array.isArray(elementType)
+              ? elementType.includes(n.type)
+              : n.type === elementType,
+          at: selection,
+        }),
+      );
+    } catch (e) {
+      return null;
+    }
 
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.previous(editor, {
-          at: path,
-        });
-      } catch (ex) {
-        // eslint-disable-next-line no-console
-        console.warn('Unable to find previous node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
+    if (found.length) return found[0];
+
+    if (!selection) return null;
+
+    if (direction === 'any' || direction === 'backward') {
+      const { path } = selection.anchor;
+      const isAtStart =
+        selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+      if (isAtStart) {
+        let found;
+        try {
+          found = Editor.previous(editor, {
+            at: path,
+          });
+        } catch (ex) {
+          // eslint-disable-next-line no-console
+          console.warn('Unable to find previous node', editor, path);
+          return;
+        }
+        if (found && found[0] && found[0].type === elementType) {
+          if (
+            (Array.isArray(elementType) &&
+              elementType.includes(found[0].type)) ||
+            found[0].type === elementType
+          ) {
+            return found;
+          }
+        } else {
+          return null;
         }
-      } else {
-        return null;
       }
     }
-  }
-
-  if (direction === 'any' || direction === 'forward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
 
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.next(editor, {
-          at: path,
-        });
-      } catch (e) {
-        // eslint-disable-next-line
-        console.warn('Unable to find next node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
+    if (direction === 'any' || direction === 'forward') {
+      const { path } = selection.anchor;
+      const isAtStart =
+        selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+      if (isAtStart) {
+        let found;
+        try {
+          found = Editor.next(editor, {
+            at: path,
+          });
+        } catch (e) {
+          // eslint-disable-next-line
+          console.warn('Unable to find next node', editor, path);
+          return;
+        }
+        if (found && found[0] && found[0].type === elementType) {
+          if (
+            (Array.isArray(elementType) &&
+              elementType.includes(found[0].type)) ||
+            found[0].type === elementType
+          ) {
+            return found;
+          }
+        } else {
+          return null;
         }
-      } else {
-        return null;
       }
     }
-  }
 
-  return null;
-};
+    return null;
+  };