@eeacms/volto-embed 2.0.9 → 3.0.1

package/CHANGELOG.md

@@ -4,10 +4,50 @@ 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).
 
+#### [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)
+
+#### [3.0.0](https://github.com/eea/volto-embed/compare/3.0.0-beta.0...3.0.0)
+
+> 7 February 2022
+
+- Make this compatible with volto-datablocks@3.x [`#19`](https://github.com/eea/volto-embed/pull/19)
+
+#### [3.0.0-beta.0](https://github.com/eea/volto-embed/compare/2.0.11...3.0.0-beta.0)
+
+> 7 February 2022
+
+- Release 3.0.0-beta.0 [`c9af803`](https://github.com/eea/volto-embed/commit/c9af80319bc89b1a579d14538ac5509e71db813f)
+- Updated cypress [`9112bee`](https://github.com/eea/volto-embed/commit/9112bee538e457e9f19a687c3442d222129eb95c)
+- Update [`c5c1251`](https://github.com/eea/volto-embed/commit/c5c1251a69c76c341c8deb28e0f2ccc940b2411b)
+- Make this compatible with volto-datablocks@3.x [`3457ee9`](https://github.com/eea/volto-embed/commit/3457ee9e3f5c78cf483525a274f03e6941d06f6f)
+
+#### [2.0.11](https://github.com/eea/volto-embed/compare/2.0.10...2.0.11)
+
+> 11 January 2022
+
+- use latest volto-slate [`#17`](https://github.com/eea/volto-embed/pull/17)
+- add cy tests [`#16`](https://github.com/eea/volto-embed/pull/16)
+- improve arcgis map view [`#14`](https://github.com/eea/volto-embed/pull/14)
+- Update package.json [`0ec673a`](https://github.com/eea/volto-embed/commit/0ec673a8178731b8c1e010101caee2a3c9fafaca)
+- Update package.json [`b8b94ec`](https://github.com/eea/volto-embed/commit/b8b94ec64672229f464b9108b4ac01a848827c00)
+- Refs #142010 - Optimize Volto-addons gitflow pipelines [`bf197dd`](https://github.com/eea/volto-embed/commit/bf197dd6516f9c18994add19b1141e061a96e2b6)
+- no hardcoded text [`4001bb4`](https://github.com/eea/volto-embed/commit/4001bb414df05c1516f95e4dcec4a328406dc63f)
+- fix [`a41ca9a`](https://github.com/eea/volto-embed/commit/a41ca9a2795a59f2633fb97938244e335dca8c43)
+- Update package.json [`a95b014`](https://github.com/eea/volto-embed/commit/a95b014a26651e11224b2f6531add7a599812d2a)
+
+#### [2.0.10](https://github.com/eea/volto-embed/compare/2.0.9...2.0.10)
+
+> 23 November 2021
+
+- Develop [`#15`](https://github.com/eea/volto-embed/pull/15)
+
 #### [2.0.9](https://github.com/eea/volto-embed/compare/2.0.8...2.0.9)
 
-- Update package.json [`6e7344d`](https://github.com/eea/volto-embed/commit/6e7344d2bb9ce89de68cd4d1044a665814ad3b54)
-- Update package.json [`e618b5d`](https://github.com/eea/volto-embed/commit/e618b5db3f564f67563c0b7cd9aa5a3200ae1734)
+> 11 November 2021
+
+- Update package.json [`#13`](https://github.com/eea/volto-embed/pull/13)
 
 #### [2.0.8](https://github.com/eea/volto-embed/compare/2.0.7...2.0.8)
 

package/Jenkinsfile

@@ -4,13 +4,37 @@ pipeline {
   environment {
         GIT_NAME = "volto-embed"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,water.europa.eu-freshwater"
         DEPENDENCIES = "volto-slate"
     }
 
   stages {
 
+    stage('Release') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          branch 'master'
+        }
+      }
+      steps {
+        node(label: 'docker') {
+          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
+            sh '''docker pull eeacms/gitflow'''
+            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
+          }
+        }
+      }
+    }
+
     stage('Code') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
+        }
+      }
       steps {
         parallel(
 
@@ -36,6 +60,15 @@ pipeline {
     }
 
     stage('Tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -75,6 +108,15 @@ pipeline {
     }
 
     stage('Integration tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
       steps {
         parallel(
 
@@ -82,7 +124,7 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
+                  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'''
                 } finally {
                   try {
@@ -100,7 +142,8 @@ pipeline {
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
                     }
-                    archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
+                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                     stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
                   }
                   finally {
@@ -122,10 +165,16 @@ pipeline {
     }
 
     stage('Report to SonarQube') {
-      // Exclude Pull-Requests
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
+          anyOf {
+            branch 'master'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
+          }
         }
       }
       steps {
@@ -156,8 +205,8 @@ pipeline {
       steps {
         node(label: 'docker') {
           script {
-            if ( env.CHANGE_BRANCH != "develop" &&  !( env.CHANGE_BRANCH.startsWith("hotfix")) ) {
-                error "Pipeline aborted due to PR not made from develop or hotfix branch"
+            if ( env.CHANGE_BRANCH != "develop" ) {
+                error "Pipeline aborted due to PR not made from develop branch"
             }
            withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN')]) {
             sh '''docker pull eeacms/gitflow'''
@@ -168,23 +217,6 @@ pipeline {
       }
     }
 
-    stage('Release') {
-      when {
-        allOf {
-          environment name: 'CHANGE_ID', value: ''
-          branch 'master'
-        }
-      }
-      steps {
-        node(label: 'docker') {
-          withCredentials([string(credentialsId: 'eea-jenkins-token', variable: 'GITHUB_TOKEN'),string(credentialsId: 'eea-jenkins-npm-token', variable: 'NPM_TOKEN')]) {
-            sh '''docker pull eeacms/gitflow'''
-            sh '''docker run -i --rm --name="$BUILD_TAG-gitflow-master" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" -e GIT_TOKEN="$GITHUB_TOKEN" -e NPM_TOKEN="$NPM_TOKEN" -e LANGUAGE=javascript eeacms/gitflow'''
-          }
-        }
-      }
-    }
-
   }
 
   post {

package/README.md

@@ -1,7 +1,18 @@
 # volto-embed
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-embed)](https://github.com/eea/volto-embed/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-embed%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-embed/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-embed%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-embed/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-embed-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-embed-develop)
 
 GDPR-compliant external resource embedding components for Volto.
 
@@ -51,6 +62,81 @@ See `src/Iframe/ViewIframe` for details on how to implement.
 
 1. Happy editing!
 
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-embed/blob/master/DEVELOP.md).

package/cypress/integration/block-basics.js

@@ -1,6 +1,7 @@
 import { setupBeforeEach, tearDownAfterEach } from '../support';
 import { changePageTitle, addBlock, selectBlock } from '../helpers';
 import { openSidebarTab } from '../helpers';
+import 'cypress-file-upload';
 
 const group = {
   title: 'Common',
@@ -22,6 +23,42 @@ describe('Blocks Tests', () => {
       cy.get('#sidebar-properties header > h2')
         .first()
         .contains('Embed external content');
+
+      cy.get('.field-wrapper-privacy_statement-0-dataprotection p')
+        .first()
+        .clear()
+        .type('Test text for privacy protection');
+      cy.get('.field-wrapper-privacy_cookie_key-1-dataprotection');
+      cy.get('.field-wrapper-enabled-2-dataprotection .checkbox').click();
+
+      const imageFile = 'cat.jpg';
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
+      const embed_url =
+        '<div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.embedgooglemap.net/blog/divi-discount-code-elegant-themes-coupon/"></a><br></div></div>';
+      cy.get('.block.maps input').click().type(embed_url, { force: true });
+
+      cy.get('.block-editor-text').last().click();
+      cy.get('.block-add-button').first().click();
+      cy.get('.blocks-chooser .title').contains('Common').click();
+      cy.get('.ui.basic.icon.button.maps').contains('Maps').click();
+
+      cy.get('.align-widget.field-wrapper-align button').first().click();
+      cy.get('.block.maps input')
+        .last()
+        .click()
+        .type(embed_url, { force: true });
+      cy.get(
+        '.field-wrapper-background_image-3-dataprotection .dropzone-placeholder',
+      ).attachFile(imageFile);
+
+      // Save
+      cy.get('#toolbar-save').click();
+      cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+      // then the page view should contain our changes
+      // cy.get('.ui.loader');
     });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "2.0.9",
+  "version": "3.0.1",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,6 +31,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -11,13 +11,15 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
 import config from '@plone/volto/registry';
-import '../css/embed-styles.css';
-import { createImageUrl } from './helpers';
-
 import { getBaseUrl } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
 import { getConnectedDataParametersForContext } from '@eeacms/volto-datablocks/helpers';
 
+import { createImageUrl } from './helpers';
+import { ProtectionSchema } from './schema';
+
+import './styles.less';
+
 const messages = defineMessages({
   success: {
     id: 'Success',
@@ -67,6 +69,27 @@ 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,
@@ -85,33 +108,24 @@ export default injectIntl(
     const [visible, setVisibility] = useState(false);
     const defaultShow = canShow(dataprotection.privacy_cookie_key);
     const [show, setShow] = useState(defaultShow);
-    const [remember, setRemember] = useState(defaultShow);
+    const [remember, setRemember] = useState(
+      cookieExist(dataprotection.privacy_cookie_key) ? defaultShow : true,
+    );
     const dispatch = useDispatch();
     const checkExistance = CookieWatcher(dataprotection.privacy_cookie_key);
-    const queryParam = useSelector((state) => {
-      return {
-        connected_data_parameters: getConnectedDataParametersForContext(
-          state?.connected_data_parameters,
-          state.router?.location?.pathname,
-        ),
-      };
+    const connected_data_parameters = useSelector((state) => {
+      return getConnectedDataParametersForContext(
+        state?.connected_data_parameters,
+        state.router?.location?.pathname,
+      );
     });
-    const param = queryParam
-      ? queryParam.connected_data_parameters?.[0]?.query?.[0]?.v?.[0] ||
-        queryParam.connected_data_parameters?.[0]?.v?.[0]
-      : null;
 
-    // create a url with params
-    const url =
-      param && data.url
-        ? decodeURIComponent(data.url).replace('<<NUTS_CODE>>', param)
-        : data.url;
+    const url = getFilteredURL(data.url, connected_data_parameters);
 
     const styles = {
-      height: `${height}px`,
+      minHeight: `${height || 200}px`,
       position: 'relative',
     };
-
     React.useEffect(() => {
       if (bgImg) {
         setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
@@ -151,6 +165,12 @@ export default injectIntl(
                 />,
               );
             }
+          })
+          .catch(() => {
+            if (__DEVELOPMENT__) {
+              /* eslint-disable-next-line */
+              console.log('Please enable your VPN!');
+            }
           });
       }
     }, [enabled, url, path, dispatch, bgImg, show, intl, isEditMode]);
@@ -164,10 +184,10 @@ export default injectIntl(
         offset={{ bottom: 200 }}
       >
         {visible ? (
-          <div style={height ? styles : {}}>
+          <div className="privacy-protection-wrapper" style={styles}>
             {!dataprotection.enabled || show ? (
               children
-            ) : !image ? (
+            ) : !__DEVELOPMENT__ && !image ? (
               <Dimmer active>
                 <Loader />
               </Dimmer>
@@ -180,17 +200,14 @@ export default injectIntl(
                     ? {
                         backgroundImage: `url(${image})`,
                         backgroundRepeat: 'no-repeat',
-                        backgroundPosition: 'center',
                         backgroundSize: 'cover',
+                        backgroundPosition: 'center -70px',
                       }
                     : {}
                 }
               >
                 <div className="overlay">
                   <div className="wrapped">
-                    <div className="privacy-statement">
-                      {serializeNodes(dataprotection.privacy_statement || [])}
-                    </div>
                     <div className="privacy-button">
                       <Button
                         primary
@@ -224,6 +241,13 @@ export default injectIntl(
                       {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>
                 </div>
               </div>

package/src/PrivacyProtection/schema.js

@@ -20,6 +20,29 @@ export const ProtectionSchema = () => ({
       description: 'Defined in template. Change only if necessary',
       widget: 'slate_richtext',
       className: 'slate-Widget',
+      defaultValue: [
+        {
+          children: [
+            {
+              text:
+                'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
+            },
+            {
+              type: 'a',
+              url: 'https://www.esri.com',
+              children: [
+                {
+                  text: 'esri.com',
+                },
+              ],
+            },
+            {
+              text:
+                '. This includes their cookie policies, which we have no control over.',
+            },
+          ],
+        },
+      ],
     },
     privacy_cookie_key: {
       title: 'Privacy cookie key',

package/src/{css/embed-styles.css → PrivacyProtection/styles.less}

@@ -1,3 +1,13 @@
+.privacy-protection-wrapper {
+  .ui.dimmer {
+    z-index: 9;
+
+    .ui.loader {
+      padding: 0;
+    }
+  }
+}
+
 .privacy-protection {
   display: flex;
   height: 100%;
@@ -16,20 +26,21 @@
 }
 
 .wrapped {
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
   width: 300px;
   padding: 1.4rem;
   margin: 0 auto;
   background: white;
   border-radius: 5px;
-  opacity: 0.6;
-  -ms-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  opacity: 1;
+  // -ms-transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
 }
 
-.discreet {
+.discreet,
+.discreet > p {
   color: grey;
   font-size: 14px;
 }