Improved visibility sensor + improved route parameters

CHANGELOG.md

@@ -4,9 +4,18 @@ 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.13](https://github.com/eea/volto-datablocks/compare/3.0.12...3.0.13)
+
+- Update cypress.json [`91507ae`](https://github.com/eea/volto-datablocks/commit/91507aebd34ac8d74448b5989ad8f1b5f0d03582)
+- Add date-fns dependency [`e1f1426`](https://github.com/eea/volto-datablocks/commit/e1f142699ad00776f6c34d1d84458ad43de0c34c)
+- Improved visibility sensor + improved route parameters [`a2e1188`](https://github.com/eea/volto-datablocks/commit/a2e118825464c2fae2ffda2aa37de97d97e42fbc)
+- Fix route parameters [`f915261`](https://github.com/eea/volto-datablocks/commit/f915261ea8831fc34f8187a5bd21f083c4288946)
+
 #### [3.0.12](https://github.com/eea/volto-datablocks/compare/3.0.11...3.0.12)
 
-- Check URL protocol and add if not present [`68277e5`](https://github.com/eea/volto-datablocks/commit/68277e5fee32760e7b52aab49475fe6580055fbf)
+> 20 May 2022
+
+- Check URL protocol and add if not present [`#52`](https://github.com/eea/volto-datablocks/pull/52)
 
 #### [3.0.11](https://github.com/eea/volto-datablocks/compare/3.0.10...3.0.11)
 

Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater"
         DEPENDENCIES = "@eeacms/volto-embed"
+        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'''

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
   }
 }

cypress/integration/block-basics.js

@@ -15,7 +15,6 @@ const groups = {
 const data_blocks_ids = [
   'dataqueryfilter',
   'dottedTableChart',
-  // 'routeParameter',
   'simpleDataConnectedTable',
 ];
 

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-datablocks",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "description": "(EEA) Provides primitives for data connectivity to volto-plotlycharts and other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,12 +21,14 @@
   ],
   "dependencies": {
     "@eeacms/volto-embed": "*",
-    "@eeacms/volto-matomo": "*",
     "@eeacms/volto-group-block": "*",
+    "@eeacms/volto-matomo": "*",
     "d3": "7.1.1",
+    "date-fns": "2.28.0",
     "humanize-plus": "^1.8.2",
     "object-hash": "2.2.0",
     "react-countup": "6.1.1",
+    "react-visibility-sensor": "5.1.1",
     "sanitize-html": "^2.3.3",
     "slate": "^0.62.0"
   },

src/Utils/DataConnectedValue/DataConnectedValue.jsx

@@ -50,7 +50,7 @@ const DataConnectedValue = (props) => {
     row,
   ]);
 
-  const collapsable = props.collapsable && value.length > collapseLimit;
+  const collapsable = props.collapsable && value?.length > collapseLimit;
 
   return !isNil(value) ? (
     <>

src/actions/index.js

@@ -1,7 +1,6 @@
 import { GET_SPARQL_DATA, CHANGE_SIDEBAR_STATE } from '../constants';
 
 export * from './blockData';
-export * from './routeParameters';
 export * from './dataProvider';
 export * from './connectedDataParameters';
 

src/components/index.js

@@ -1,21 +1,19 @@
 export DataConnectorView from './theme/DataConnector/View';
-export Placeholder from './theme/Placeholder/View';
+export VisibilitySensor from './theme/VisibilitySensor/VisibilitySensor';
 
 export CountryFlagEdit from './manage/Blocks/CountryFlag/Edit';
 // export DataConnectedEmbedBlockEdit from './manage/Blocks/DataConnectedEmbedBlock/Edit';
 export DataQueryFilterEdit from './manage/Blocks/DataQueryFilter/Edit';
 export DottedTableChartEdit from './manage/Blocks/DottedTableChart/Edit';
 export SimpleDataTableEdit from './manage/Blocks/SimpleDataTable/Edit';
 export SourcesBlockEdit from './manage/Blocks/SourcesBlock/Edit';
-export RouteParameterEdit from './manage/Blocks/RouteParameter/Edit';
 
 export CountryFlagView from './manage/Blocks/CountryFlag/View';
 // export DataConnectedEmbedBlockView from './manage/Blocks/DataConnectedEmbedBlock/View';
 export DataQueryFilterView from './manage/Blocks/DataQueryFilter/View';
 export DottedTableChartView from './manage/Blocks/DottedTableChart/View';
 export SimpleDataTableView from './manage/Blocks/SimpleDataTable/View';
 export SourcesBlockView from './manage/Blocks/SourcesBlock/View';
-export RouteParameterView from './manage/Blocks/RouteParameter/View';
 
 export PickObjectWidget from './manage/Widgets/PickObjectWidget';
 export DataQueryWidget from './manage/Widgets/DataQueryWidget';

src/components/manage/Blocks/CustomConnectedBlock/Edit.jsx

@@ -3,6 +3,7 @@ import { compose } from 'redux';
 import { SidebarPortal } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 import getSchema from './schema';
 import { View } from './View';
@@ -39,8 +40,16 @@ const Edit = (props) => {
   );
 };
 
-export default compose(
+const EditWrapper = compose(
   connectToProviderData((props) => ({
     provider_url: props.data?.provider_url,
   })),
 )(Edit);
+
+export default (props) => {
+  return (
+    <VisibilitySensor>
+      <EditWrapper {...props} />
+    </VisibilitySensor>
+  );
+};

src/components/manage/Blocks/CustomConnectedBlock/View.jsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
+import { isNil } from 'lodash';
 import { compose } from 'redux';
 import config from '@plone/volto/registry';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 import './style.less';
 
@@ -34,15 +36,23 @@ const View = (props) => {
     <RenderCustomConnectedBlock
       {...props}
       mode={props.mode}
-      placeholder={props.data.placeholder}
+      placeholder={!isNil(props.provider_data) ? props.data.placeholder : null}
     />
   );
 };
 
-export { View };
-
-export default compose(
+const BlockView = compose(
   connectToProviderData((props) => ({
     provider_url: props.data?.provider_url,
   })),
 )(View);
+
+export { View };
+
+export default (props) => {
+  return (
+    <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
+      <BlockView {...props} />
+    </VisibilitySensor>
+  );
+};

src/components/manage/Blocks/SimpleDataTable/Edit.jsx

@@ -2,9 +2,8 @@ import React, { Component } from 'react';
 import { compose } from 'redux';
 import { SidebarPortal } from '@plone/volto/components'; // EditBlock
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-
 import config from '@plone/volto/registry';
-
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
 
 import { SimpleDataTableSchema } from './schema';
@@ -91,7 +90,7 @@ class Edit extends Component {
   }
 }
 
-export default compose(
+const EditWrapper = compose(
   connectToProviderData((props) => {
     const { max_count = 5 } = props.data;
     return {
@@ -107,3 +106,11 @@ export default compose(
     };
   }),
 )(Edit);
+
+export default (props) => {
+  return (
+    <VisibilitySensor offset={{ top: -150, bottom: -150 }}>
+      <EditWrapper {...props} />
+    </VisibilitySensor>
+  );
+};