@eeacms/volto-embed 3.0.1 → 4.0.2

package/CHANGELOG.md

@@ -4,9 +4,36 @@ 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).
 
+#### [4.0.2](https://github.com/eea/volto-embed/compare/4.0.1...4.0.2)
+
+- Fix destructure of undefined [`a15b86f`](https://github.com/eea/volto-embed/commit/a15b86f71f4a5ccf3a37b7a8b98683d669c18d14)
+- Backward compatibility [`68abd0e`](https://github.com/eea/volto-embed/commit/68abd0eea6635f104b4668edc1fba33a9322f71b)
+
+#### [4.0.1](https://github.com/eea/volto-embed/compare/4.0.0...4.0.1)
+
+> 29 April 2022
+
+- Release: fix and use `getfilteredUrl` method from datablocks [`#23`](https://github.com/eea/volto-embed/pull/23)
+- dedupe getFiltered method, use from datablocks [`7f7b1b5`](https://github.com/eea/volto-embed/commit/7f7b1b51b280edc856e19d6b02a37f3f8894bd04)
+- fix regex [`1dc059f`](https://github.com/eea/volto-embed/commit/1dc059fa58f7a1789e4b570d1631226b404fa805)
+- early return [`467e6fc`](https://github.com/eea/volto-embed/commit/467e6fc2c053d2e17526ad6fb4cbf34c2bb8abe1)
+- safari: don't use lookbehind [`a4e4ece`](https://github.com/eea/volto-embed/commit/a4e4ece2891a5e2bcbf7f47a4345d0adca5258e6)
+
+### [4.0.0](https://github.com/eea/volto-embed/compare/3.0.1...4.0.0)
+
+> 5 April 2022
+
+- Breaking. Volto 15.x compatibility [`#22`](https://github.com/eea/volto-embed/pull/22)
+- Prettier [`fffa1c9`](https://github.com/eea/volto-embed/commit/fffa1c9f42c9dacc7de1fed730e0a4494c04d2f8)
+- Prettier [`f9ca05d`](https://github.com/eea/volto-embed/commit/f9ca05d3c55d204080f8769bd7d556b4d8f0ce21)
+- Breaking changes. Bumped to version 4.0.0 [`eb78abf`](https://github.com/eea/volto-embed/commit/eb78abf98103ee8831814b3df4c441279c586da2)
+- Volto 15.x compatibility: updated react-cookie library [`a480372`](https://github.com/eea/volto-embed/commit/a480372f47e6e34d6f3e14d7b54b345dc83fd328)
+
 #### [3.0.1](https://github.com/eea/volto-embed/compare/3.0.0...3.0.1)
 
-- fix query case [`a4dbd50`](https://github.com/eea/volto-embed/commit/a4dbd50ca703efe31dd8a9deb386f668581aa136)
+> 11 February 2022
+
+- fix query case [`#20`](https://github.com/eea/volto-embed/pull/20)
 
 #### [3.0.0](https://github.com/eea/volto-embed/compare/3.0.0-beta.0...3.0.0)
 

package/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,water.europa.eu-freshwater"
         DEPENDENCIES = "volto-slate"
+        VOLTO = "alpha"
     }
 
   stages {
@@ -124,8 +125,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
@@ -184,10 +185,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/cypress/support/index.js

@@ -27,7 +27,7 @@ coverage-end */
 export const setupBeforeEach = () => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package/cypress.json

@@ -1,12 +1,17 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
-  "defaultCommandTimeout": 15000,
+  "defaultCommandTimeout": 8888,
   "reporter": "junit",
   "video": true,
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
     "jenkinsMode": true,
     "toConsole": true
+  },
+  "chromeWebSecurity": false,
+  "retries": {
+    "runMode": 8,
+    "openMode": 0
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "3.0.1",
+  "version": "4.0.2",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Iframe/EditIframe.jsx

@@ -4,6 +4,7 @@
  */
 
 import React, { Component } from 'react';
+import { isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { Button, Input, Message } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
@@ -16,6 +17,7 @@ import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
 import schema from './schema';
 import { addPrivacyProtectionToSchema } from '../PrivacyProtection';
+import { PrivacyProtection } from '../PrivacyProtection';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -86,6 +88,32 @@ class Edit extends Component {
     this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
   }
 
+  /**
+   * Backward compatibility
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    const { privacy_statement } = this.props.data.dataprotection || {};
+    if (isString(privacy_statement)) {
+      this.props.onChangeBlock(this.props.block, {
+        ...this.props.data,
+        dataprotection: {
+          ...(this.props.data.dataprotection || {}),
+          privacy_statement: [
+            {
+              children: [
+                {
+                  text: privacy_statement,
+                },
+              ],
+            },
+          ],
+        },
+      });
+    }
+  }
+
   /**
    * Change url handler
    * @method onChangeUrl
@@ -182,15 +210,20 @@ class Edit extends Component {
               'full-width': this.props.data.align === 'full',
             })}
           >
-            <iframe
-              title={this.props.intl.formatMessage(
-                messages.GoogleMapsEmbeddedBlock,
-              )}
-              src={this.props.data.url}
-              className="google-map"
-              frameBorder="0"
-              allowFullScreen
-            />
+            <PrivacyProtection
+              data={this.props.data}
+              editable={this.props.editable}
+            >
+              <iframe
+                title={this.props.intl.formatMessage(
+                  messages.GoogleMapsEmbeddedBlock,
+                )}
+                src={this.props.data.url}
+                className="google-map"
+                frameBorder="0"
+                allowFullScreen
+              />
+            </PrivacyProtection>
           </div>
         ) : (
           <Message>

package/src/Iframe/ViewIframe.jsx

@@ -22,7 +22,7 @@ const messages = defineMessages({
  * @extends Component
  */
 
-const View = ({ data, intl }) => {
+const View = ({ data, intl, id }) => {
   return (
     <div
       className={cx(
@@ -42,7 +42,7 @@ const View = ({ data, intl }) => {
         })}
         style={{ height: '100%' }}
       >
-        <PrivacyProtection data={data}>
+        <PrivacyProtection data={data} id={id}>
           <iframe
             title={intl.formatMessage(messages.EmbededGoogleMaps)}
             src={data.url}

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
+import { compose } from 'redux';
 import { useSelector } from 'react-redux';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
-import cookie from 'react-cookie';
-
+import { withCookies } from 'react-cookie';
 //import { find, without } from 'lodash';
 import { serializeNodes } from 'volto-slate/editor/render';
 import { Button, Checkbox } from 'semantic-ui-react';
@@ -13,7 +13,10 @@ import { toast } from 'react-toastify';
 import config from '@plone/volto/registry';
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
-import { getConnectedDataParametersForContext } from '@eeacms/volto-datablocks/helpers';
+import {
+  getConnectedDataParametersForContext,
+  getFilteredURL,
+} from '@eeacms/volto-datablocks/helpers';
 
 import { createImageUrl } from './helpers';
 import { ProtectionSchema } from './schema';
@@ -38,29 +41,29 @@ const getExpDays = () =>
     ? config.settings.embedCookieExpirationDays
     : 90;
 
-function saveCookie(domain_key) {
+function saveCookie(domain_key, cookies) {
   const date = new Date();
   date.setDate(date.getDate() + getExpDays());
 
-  cookie.save(key(domain_key), 'true', {
+  cookies.set(key(domain_key), 'true', {
     path: '/',
     expires: date,
   });
 }
 
-function canShow(domain_key) {
-  return cookie.load(key(domain_key)) === 'true';
+function canShow(domain_key, cookies) {
+  return cookies.get(key(domain_key)) === 'true';
 }
 
-const cookieExist = (domain_key) => cookie.load(key(domain_key));
+const cookieExist = (domain_key, cookies) => cookies.get(key(domain_key));
 
-const CookieWatcher = (cookie, pollingRate = 250) => {
+const CookieWatcher = (domain_key, cookies, pollingRate = 250) => {
   // state for cookie existence
-  const [exist, setExist] = useState(cookieExist(cookie));
+  const [exist, setExist] = useState(cookieExist(domain_key, cookies));
 
   React.useEffect(() => {
     const interval = setInterval(
-      () => setExist(cookieExist(cookie)),
+      () => setExist(cookieExist(domain_key, cookies)),
       pollingRate,
     );
     return () => clearInterval(interval);
@@ -69,196 +72,168 @@ const CookieWatcher = (cookie, pollingRate = 250) => {
   return exist;
 };
 
-const getFilteredURL = (url, connected_data_parameters = []) => {
-  if (!connected_data_parameters?.length) return url;
-  let decodedURL = decodeURIComponent(url);
-  const queries = decodedURL.match(/(?<=(<<))(.*?)(?=(>>))/g);
-  if (!queries?.length) return url;
-  const keys = connected_data_parameters.map((param) => param.i);
-  for (let poz in queries) {
-    const key = queries[poz];
-    const paramPoz = keys.indexOf(key);
-    if (paramPoz > -1) {
-      decodedURL = decodedURL.replace(
-        `<<${key}>>`,
-        connected_data_parameters[paramPoz].v[0],
-      );
-
-      continue;
-    }
-  }
-  return decodedURL;
-};
-
-export default injectIntl(
-  ({
-    children,
-    data = {},
-    id,
-    isEditMode,
-    onChangeBlock,
-    intl,
-    path,
-    properties,
-    ...rest
-  }) => {
-    const { dataprotection = {}, height } = data;
-    const { background_image: bgImg, enabled = false } = dataprotection;
-    const [image, setImage] = React.useState(null);
-    const [visible, setVisibility] = useState(false);
-    const defaultShow = canShow(dataprotection.privacy_cookie_key);
-    const [show, setShow] = useState(defaultShow);
-    const [remember, setRemember] = useState(
-      cookieExist(dataprotection.privacy_cookie_key) ? defaultShow : true,
+const PrivacyProtection = (props) => {
+  const { children, data = {}, id, editable, intl, path, cookies } = props;
+  const {
+    enabled = false,
+    privacy_statement,
+    background_image: bgImg,
+    privacy_cookie_key = 'esri-maps',
+  } = data.dataprotection || {};
+
+  const [image, setImage] = React.useState(null);
+  const [visible, setVisibility] = useState(false);
+  const defaultShow = canShow(privacy_cookie_key, cookies);
+  const [show, setShow] = useState(defaultShow);
+  const [remember, setRemember] = useState(
+    cookieExist(privacy_cookie_key, cookies) ? defaultShow : true,
+  );
+  const dispatch = useDispatch();
+  const checkExistance = CookieWatcher(privacy_cookie_key, cookies);
+  const connected_data_parameters = useSelector((state) => {
+    return getConnectedDataParametersForContext(
+      state?.connected_data_parameters,
+      state.router?.location?.pathname,
     );
-    const dispatch = useDispatch();
-    const checkExistance = CookieWatcher(dataprotection.privacy_cookie_key);
-    const connected_data_parameters = useSelector((state) => {
-      return getConnectedDataParametersForContext(
-        state?.connected_data_parameters,
-        state.router?.location?.pathname,
-      );
-    });
+  });
+  const url = getFilteredURL(data.url, connected_data_parameters);
 
-    const url = getFilteredURL(data.url, connected_data_parameters);
+  React.useEffect(() => {
+    if (bgImg) {
+      setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
+    }
+  }, [bgImg]);
 
-    const styles = {
-      minHeight: `${height || 200}px`,
-      position: 'relative',
-    };
-    React.useEffect(() => {
-      if (bgImg) {
-        setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
+  //Effect hook for polling the cookie_key
+  React.useEffect(
+    () => {
+      if (!editable && defaultShow) {
+        setShow(true);
       }
-    }, [bgImg]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [checkExistance],
+  );
 
-    //Effect hook for polling the cookie_key
-    React.useEffect(
-      () => {
-        if (!isEditMode && defaultShow) {
-          setShow(true);
-        }
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [checkExistance],
-    );
-
-    //screenshot api
-    React.useEffect(() => {
-      if (enabled && !bgImg && !show) {
-        fetch(
-          `${getBaseUrl(
-            '',
-          )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
-            url,
-          )}&w=1920&waitfor=4000`,
-        )
-          .then((e) => e.blob())
-          .then((blob) => {
-            setImage(URL.createObjectURL(blob));
-            if (isEditMode) {
-              toast.success(
-                <Toast
-                  success
-                  title={intl.formatMessage(messages.success)}
-                  content={intl.formatMessage(messages.image)}
-                />,
-              );
-            }
-          })
-          .catch(() => {
-            if (__DEVELOPMENT__) {
-              /* eslint-disable-next-line */
-              console.log('Please enable your VPN!');
-            }
-          });
-      }
-    }, [enabled, url, path, dispatch, bgImg, show, intl, isEditMode]);
+  //screenshot api
+  React.useEffect(() => {
+    if (enabled && !bgImg && !show) {
+      fetch(
+        `${getBaseUrl(
+          '',
+        )}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${encodeURIComponent(
+          url,
+        )}&w=1920&waitfor=4000`,
+      )
+        .then((e) => e.blob())
+        .then((blob) => {
+          setImage(URL.createObjectURL(blob));
+          if (editable) {
+            toast.success(
+              <Toast
+                success
+                title={intl.formatMessage(messages.success)}
+                content={intl.formatMessage(messages.image)}
+              />,
+            );
+          }
+        })
+        .catch(() => {
+          if (__DEVELOPMENT__) {
+            /* eslint-disable-next-line */
+            console.log('Please enable your VPN!');
+          }
+        });
+    }
+  }, [enabled, url, path, dispatch, bgImg, show, intl, editable]);
+
+  return (
+    <VisibilitySensor
+      onChange={(isVisible) => {
+        !visible && isVisible && setVisibility(true);
+      }}
+      partialVisibility={true}
+      offset={{ bottom: 200 }}
+    >
+      {visible ? (
+        <div
+          className="privacy-protection-wrapper"
+          style={{ position: 'relative', minHeight: '200px' }}
+        >
+          {!enabled || show ? (
+            children
+          ) : !__DEVELOPMENT__ && !image ? (
+            <Dimmer active>
+              <Loader />
+            </Dimmer>
+          ) : (
+            <div
+              className="privacy-protection"
+              style={
+                image
+                  ? {
+                      backgroundImage: `url(${image})`,
+                      backgroundRepeat: 'no-repeat',
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center -70px',
+                    }
+                  : {}
+              }
+            >
+              <div className="overlay">
+                <div className="wrapped">
+                  <div className="privacy-button">
+                    <Button
+                      primary
+                      onClick={() => {
+                        setShow(true);
+                        if (remember) {
+                          saveCookie(privacy_cookie_key, cookies);
+                        }
+                      }}
+                    >
+                      Show external content
+                    </Button>
+                  </div>
 
-    return (
-      <VisibilitySensor
-        onChange={(isVisible) => {
-          !visible && isVisible && setVisibility(true);
-        }}
-        partialVisibility={true}
-        offset={{ bottom: 200 }}
-      >
-        {visible ? (
-          <div className="privacy-protection-wrapper" style={styles}>
-            {!dataprotection.enabled || show ? (
-              children
-            ) : !__DEVELOPMENT__ && !image ? (
-              <Dimmer active>
-                <Loader />
-              </Dimmer>
-            ) : (
-              <div
-                className="privacy-protection"
-                {...rest}
-                style={
-                  image
-                    ? {
-                        backgroundImage: `url(${image})`,
-                        backgroundRepeat: 'no-repeat',
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center -70px',
-                      }
-                    : {}
-                }
-              >
-                <div className="overlay">
-                  <div className="wrapped">
-                    <div className="privacy-button">
-                      <Button
-                        primary
-                        onClick={() => {
-                          setShow(true);
-                          if (remember) {
-                            saveCookie(dataprotection.privacy_cookie_key);
-                          }
+                  {!editable && (
+                    <div className="privacy-toggle">
+                      <Checkbox
+                        toggle
+                        label="Remember my choice"
+                        id={`remember-choice-${id}`}
+                        onChange={(ev, { checked }) => {
+                          setRemember(checked);
                         }}
-                      >
-                        Show external content
-                      </Button>
+                        checked={remember}
+                      />
                     </div>
-
-                    {!isEditMode && (
-                      <div className="privacy-toggle">
-                        <Checkbox
-                          toggle
-                          label="Remember my choice"
-                          id={`remember-choice-${id}`}
-                          onChange={(ev, { checked }) => {
-                            setRemember(checked);
-                          }}
-                          checked={remember}
-                        />
-                      </div>
+                  )}
+
+                  <p className="discreet">
+                    Your choice will be saved in a cookie managed by{' '}
+                    {config.settings.ownDomain || '.eea.europa.eu'} that will
+                    expire in {getExpDays()} days.
+                  </p>
+                  <p className="discreet">
+                    {serializeNodes(
+                      privacy_statement ||
+                        ProtectionSchema().properties.privacy_statement
+                          .defaultValue,
                     )}
-
-                    <p className="discreet">
-                      Your choice will be saved in a cookie managed by{' '}
-                      {config.settings.ownDomain || '.eea.europa.eu'} that will
-                      expire in {getExpDays()} days.
-                    </p>
-                    <p className="discreet">
-                      {serializeNodes(
-                        dataprotection.privacy_statement ||
-                          ProtectionSchema().properties.privacy_statement
-                            .defaultValue,
-                      )}
-                    </p>
-                  </div>
+                  </p>
                 </div>
               </div>
-            )}
-          </div>
-        ) : (
-          <Placeholder style={{ height: '100%', width: '100%' }}>
-            <Placeholder.Image rectangular />
-          </Placeholder>
-        )}
-      </VisibilitySensor>
-    );
-  },
-);
+            </div>
+          )}
+        </div>
+      ) : (
+        <Placeholder style={{ height: '100%', width: '100%' }}>
+          <Placeholder.Image rectangular />
+        </Placeholder>
+      )}
+    </VisibilitySensor>
+  );
+};
+
+export default compose(injectIntl, withCookies)(PrivacyProtection);

package/src/PrivacyProtection/styles.less

@@ -18,7 +18,7 @@
 }
 
 .privacy-button {
-  margin-top: 2rem;
+  margin-top: 0.5rem;
 }
 
 .privacy-toggle {