From f915261ea8831fc34f8187a5bd21f083c4288946 Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Wed, 6 Jul 2022 17:12:42 +0300 Subject: [PATCH 1/6] Fix route parameters --- src/actions/routeParameters.js | 9 ++-- .../manage/Blocks/RouteParameter/View.jsx | 41 ++++++++++++----- src/helpers.js | 12 ++++- src/reducers/connected_data_parameters.js | 45 ++++++++----------- 4 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/actions/routeParameters.js b/src/actions/routeParameters.js index f7b30116..064e0297 100644 --- a/src/actions/routeParameters.js +++ b/src/actions/routeParameters.js @@ -1,16 +1,15 @@ import { SET_ROUTE_PARAMETER, DELETE_ROUTE_PARAMETER } from '../constants'; -export const setRouteParameter = (parameter, value) => { +export const setRouteParameter = (data_query) => { return { type: SET_ROUTE_PARAMETER, - parameter, - value, + data_query, }; }; -export const deleteRouteParameter = (parameter) => { +export const deleteRouteParameter = (parameterKey) => { return { type: DELETE_ROUTE_PARAMETER, - parameter, + parameterKey, }; }; diff --git a/src/components/manage/Blocks/RouteParameter/View.jsx b/src/components/manage/Blocks/RouteParameter/View.jsx index 541f34f8..0603cb0e 100644 --- a/src/components/manage/Blocks/RouteParameter/View.jsx +++ b/src/components/manage/Blocks/RouteParameter/View.jsx @@ -1,29 +1,48 @@ import React from 'react'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { withRouter } from 'react-router'; import { flattenToAppURL } from '@plone/volto/helpers'; import { setRouteParameter, deleteRouteParameter } from '../../../../actions'; const View = (props) => { + const dispatch = useDispatch(); + const mounted = React.useRef(false); const { parameterKey = null, defaultValue = null } = props.data; - const route_parameters = props.route_parameters; const parameters = props.match.params; const contentPath = flattenToAppURL(props.properties['@id']); const path = props.mode === 'edit' ? contentPath : props.path; React.useEffect(() => { + if (!mounted.current) return; if (parameterKey && defaultValue && path === contentPath) { - props.dispatch( - setRouteParameter( - parameterKey, - parameters[parameterKey] || defaultValue, - ), + dispatch(deleteRouteParameter(parameterKey)); + dispatch( + setRouteParameter({ + i: parameterKey, + o: 'plone.app.querystring.operation.selection.any', + v: [parameters[parameterKey] || defaultValue], + }), + ); + } + /* eslint-disable-next-line */ + }, [parameterKey, defaultValue]); + + React.useEffect(() => { + mounted.current = true; + if (parameterKey && defaultValue && path === contentPath) { + dispatch( + setRouteParameter({ + i: parameterKey, + o: 'plone.app.querystring.operation.selection.any', + v: [parameters[parameterKey] || defaultValue], + }), ); } return () => { - if (parameterKey && route_parameters[parameterKey]) { - props.dispatch(deleteRouteParameter(parameterKey)); + mounted.current = false; + if (parameterKey) { + dispatch(deleteRouteParameter(parameterKey)); } }; /* eslint-disable-next-line */ @@ -51,6 +70,4 @@ const View = (props) => { ); }; -export default connect((state) => ({ - route_parameters: state.route_parameters, -}))(withRouter(View)); +export default withRouter(View); diff --git a/src/helpers.js b/src/helpers.js index c9dd8ce8..7c7c465d 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -48,18 +48,28 @@ export function getDataQuery({ const path = location.pathname.replace('/edit', ''); const has_data_query_by_context = data.has_data_query_by_context ?? true; const has_data_query_by_provider = data.has_data_query_by_provider ?? true; + const has_data_query_by_route_parameter = + data.has_data_query_by_route_parameter ?? true; const byContextPath = has_data_query_by_context ? connected_data_parameters?.byContextPath?.[path] || [] : []; const byProviderPath = has_data_query_by_provider ? connected_data_parameters?.byProviderPath?.[provider_url] || {} : {}; + const byRouteParameters = has_data_query_by_route_parameter + ? connected_data_parameters?.byRouteParameters || [] + : []; const filters = Object.keys(byProviderPath).map((key) => byProviderPath[key]) || []; // if (pagination.enabled) { // return [...(data?.data_query || []), ...byContextPath, ...filters]; // } - return [...(data?.data_query || []), ...byContextPath, ...filters]; + return [ + ...(data?.data_query || []), + ...byContextPath, + ...byRouteParameters, + ...filters, + ]; // return [...(data?.data_query || []), ...byContextPath]; } diff --git a/src/reducers/connected_data_parameters.js b/src/reducers/connected_data_parameters.js index a0edfe33..414c3849 100644 --- a/src/reducers/connected_data_parameters.js +++ b/src/reducers/connected_data_parameters.js @@ -6,21 +6,21 @@ import { flattenToAppURL } from '@plone/volto/helpers'; import { SET_CONNECTED_DATA_PARAMETERS, DELETE_CONNECTED_DATA_PARAMETERS, - // SET_ROUTE_PARAMETER, - // DELETE_ROUTE_PARAMETER, + SET_ROUTE_PARAMETER, + DELETE_ROUTE_PARAMETER, } from '../constants'; const initialState = { byProviderPath: {}, byContextPath: {}, - byRouteParameters: {}, + byRouteParameters: [], }; export default function connected_data_parameters( state = initialState, action = {}, ) { - // let byRouteParameters; + let byRouteParameters; let path, byProviderPath; const { providerPath, data_query, index } = action; switch (action.type) { @@ -46,29 +46,20 @@ export default function connected_data_parameters( ...state, byProviderPath, }; - // case SET_ROUTE_PARAMETER: - // byRouteParameters = { - // ...state.byRouteParameters, - // [action.path]: [...(state.byRouteParameters[action.path] || [])], - // }; - // byRouteParameters[action.path][action.index] = action.parameter; - // return { - // ...state, - // byRouteParameters, - // }; - // case DELETE_ROUTE_PARAMETER: - // byRouteParameters = { - // ...state.byRouteParameters, - // }; - // if (byRouteParameters?.[action.path]?.length > 1) { - // delete byRouteParameters?.[action.path]?.[action.index]; - // } else { - // delete byRouteParameters?.[action.path]; - // } - // return { - // ...state, - // byRouteParameters, - // }; + case SET_ROUTE_PARAMETER: + byRouteParameters = [...state.byRouteParameters, action.data_query]; + return { + ...state, + byRouteParameters, + }; + case DELETE_ROUTE_PARAMETER: + byRouteParameters = [...state.byRouteParameters].filter( + (routeParam) => routeParam.i !== action.parameterKey, + ); + return { + ...state, + byRouteParameters, + }; case 'GET_CONTENT_SUCCESS': const content = action.result; From 343de71ba0ffa91df086e9f68c1eedef514a7770 Mon Sep 17 00:00:00 2001 From: valentinab25 Date: Fri, 8 Jul 2022 02:54:08 +0300 Subject: [PATCH 2/6] [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967 --- Jenkinsfile | 5 +++-- cypress.json | 7 ++++++- cypress/support/index.js | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index b5b976a6..b6eb9906 100644 --- a/Jenkinsfile +++ b/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''' diff --git a/cypress.json b/cypress.json index aef675e8..78f4e1c1 100644 --- a/cypress.json +++ b/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 } } diff --git a/cypress/support/index.js b/cypress/support/index.js index a3fd9352..9f56e52f 100644 --- a/cypress/support/index.js +++ b/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', }); From a2e118825464c2fae2ffda2aa37de97d97e42fbc Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Thu, 14 Jul 2022 23:44:16 +0300 Subject: [PATCH 3/6] Improved visibility sensor + improved route parameters --- cypress/integration/block-basics.js | 1 - package.json | 3 +- .../DataConnectedValue/DataConnectedValue.jsx | 2 +- src/actions/index.js | 1 - src/actions/routeParameters.js | 15 ---- src/components/index.js | 4 +- .../Blocks/CustomConnectedBlock/Edit.jsx | 11 ++- .../Blocks/CustomConnectedBlock/View.jsx | 18 ++++- .../manage/Blocks/RouteParameter/Edit.jsx | 31 -------- .../manage/Blocks/RouteParameter/View.jsx | 73 ------------------- .../manage/Blocks/RouteParameter/index.js | 22 ------ .../manage/Blocks/RouteParameter/schema.js | 26 ------- .../manage/Blocks/SimpleDataTable/Edit.jsx | 13 +++- .../manage/Blocks/SimpleDataTable/View.jsx | 12 ++- src/components/theme/Placeholder/View.jsx | 32 -------- .../VisibilitySensor/VisibilitySensor.jsx | 45 ++++++++++++ src/constants.js | 2 - src/helpers.js | 31 ++++---- src/hocs/connectToMultipleProviders.js | 11 ++- src/hocs/connectToProviderData.js | 8 +- src/index.js | 2 - src/reducers/connected_data_parameters.js | 18 ----- src/reducers/index.js | 1 - src/reducers/route_parameters.js | 26 ------- 24 files changed, 125 insertions(+), 283 deletions(-) delete mode 100644 src/actions/routeParameters.js delete mode 100644 src/components/manage/Blocks/RouteParameter/Edit.jsx delete mode 100644 src/components/manage/Blocks/RouteParameter/View.jsx delete mode 100644 src/components/manage/Blocks/RouteParameter/index.js delete mode 100644 src/components/manage/Blocks/RouteParameter/schema.js delete mode 100644 src/components/theme/Placeholder/View.jsx create mode 100644 src/components/theme/VisibilitySensor/VisibilitySensor.jsx delete mode 100644 src/reducers/route_parameters.js diff --git a/cypress/integration/block-basics.js b/cypress/integration/block-basics.js index 58395534..f8d58440 100644 --- a/cypress/integration/block-basics.js +++ b/cypress/integration/block-basics.js @@ -15,7 +15,6 @@ const groups = { const data_blocks_ids = [ 'dataqueryfilter', 'dottedTableChart', - // 'routeParameter', 'simpleDataConnectedTable', ]; diff --git a/package.json b/package.json index 2820eda1..b23fd42d 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,13 @@ ], "dependencies": { "@eeacms/volto-embed": "*", - "@eeacms/volto-matomo": "*", "@eeacms/volto-group-block": "*", + "@eeacms/volto-matomo": "*", "d3": "7.1.1", "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" }, diff --git a/src/Utils/DataConnectedValue/DataConnectedValue.jsx b/src/Utils/DataConnectedValue/DataConnectedValue.jsx index 4f383b80..8bc00939 100644 --- a/src/Utils/DataConnectedValue/DataConnectedValue.jsx +++ b/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) ? ( <> diff --git a/src/actions/index.js b/src/actions/index.js index c7fbf8de..6ab0f212 100644 --- a/src/actions/index.js +++ b/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'; diff --git a/src/actions/routeParameters.js b/src/actions/routeParameters.js deleted file mode 100644 index 064e0297..00000000 --- a/src/actions/routeParameters.js +++ /dev/null @@ -1,15 +0,0 @@ -import { SET_ROUTE_PARAMETER, DELETE_ROUTE_PARAMETER } from '../constants'; - -export const setRouteParameter = (data_query) => { - return { - type: SET_ROUTE_PARAMETER, - data_query, - }; -}; - -export const deleteRouteParameter = (parameterKey) => { - return { - type: DELETE_ROUTE_PARAMETER, - parameterKey, - }; -}; diff --git a/src/components/index.js b/src/components/index.js index d6970732..4a60cb60 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,5 +1,5 @@ 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'; @@ -7,7 +7,6 @@ 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'; @@ -15,7 +14,6 @@ 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'; diff --git a/src/components/manage/Blocks/CustomConnectedBlock/Edit.jsx b/src/components/manage/Blocks/CustomConnectedBlock/Edit.jsx index e71b2f08..ba2c0258 100644 --- a/src/components/manage/Blocks/CustomConnectedBlock/Edit.jsx +++ b/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 ( + + + + ); +}; diff --git a/src/components/manage/Blocks/CustomConnectedBlock/View.jsx b/src/components/manage/Blocks/CustomConnectedBlock/View.jsx index 63b8e9e8..4e03d998 100644 --- a/src/components/manage/Blocks/CustomConnectedBlock/View.jsx +++ b/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) => { ); }; -export { View }; - -export default compose( +const BlockView = compose( connectToProviderData((props) => ({ provider_url: props.data?.provider_url, })), )(View); + +export { View }; + +export default (props) => { + return ( +
loading.... 
}> + + + ); +}; diff --git a/src/components/manage/Blocks/RouteParameter/Edit.jsx b/src/components/manage/Blocks/RouteParameter/Edit.jsx deleted file mode 100644 index 2cc44401..00000000 --- a/src/components/manage/Blocks/RouteParameter/Edit.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { SidebarPortal } from '@plone/volto/components'; -import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; -import getSchema from './schema'; -import View from './View'; - -const Edit = (props) => { - const schema = getSchema(); - - return ( - <> - - - - { - props.onChangeBlock(props.block, { - ...props.data, - [id]: value, - }); - }} - formData={props.data} - /> - - - ); -}; - -export default Edit; diff --git a/src/components/manage/Blocks/RouteParameter/View.jsx b/src/components/manage/Blocks/RouteParameter/View.jsx deleted file mode 100644 index 0603cb0e..00000000 --- a/src/components/manage/Blocks/RouteParameter/View.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { useDispatch } from 'react-redux'; -import { withRouter } from 'react-router'; -import { flattenToAppURL } from '@plone/volto/helpers'; -import { setRouteParameter, deleteRouteParameter } from '../../../../actions'; - -const View = (props) => { - const dispatch = useDispatch(); - const mounted = React.useRef(false); - const { parameterKey = null, defaultValue = null } = props.data; - const parameters = props.match.params; - const contentPath = flattenToAppURL(props.properties['@id']); - const path = props.mode === 'edit' ? contentPath : props.path; - - React.useEffect(() => { - if (!mounted.current) return; - if (parameterKey && defaultValue && path === contentPath) { - dispatch(deleteRouteParameter(parameterKey)); - dispatch( - setRouteParameter({ - i: parameterKey, - o: 'plone.app.querystring.operation.selection.any', - v: [parameters[parameterKey] || defaultValue], - }), - ); - } - /* eslint-disable-next-line */ - }, [parameterKey, defaultValue]); - - React.useEffect(() => { - mounted.current = true; - if (parameterKey && defaultValue && path === contentPath) { - dispatch( - setRouteParameter({ - i: parameterKey, - o: 'plone.app.querystring.operation.selection.any', - v: [parameters[parameterKey] || defaultValue], - }), - ); - } - - return () => { - mounted.current = false; - if (parameterKey) { - dispatch(deleteRouteParameter(parameterKey)); - } - }; - /* eslint-disable-next-line */ - }, []); - - return ( - <> - {props.mode === 'edit' ? ( - <> - {!parameterKey ?

Set parameter key

: ''} - {!defaultValue ?

Set default value

: ''} - {parameterKey && defaultValue ? ( -

- Router parameter is up and running for '{parameterKey}' with ' - {defaultValue}' as default value -

- ) : ( - '' - )} - - ) : ( - '' - )} - - ); -}; - -export default withRouter(View); diff --git a/src/components/manage/Blocks/RouteParameter/index.js b/src/components/manage/Blocks/RouteParameter/index.js deleted file mode 100644 index 18cb3072..00000000 --- a/src/components/manage/Blocks/RouteParameter/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import worldSVG from '@plone/volto/icons/world.svg'; -import View from './View'; -import Edit from './Edit'; - -export default (config) => { - config.blocks.blocksConfig.routeParameter = { - id: 'routeParameter', - title: 'Route parameter', - icon: worldSVG, - group: 'data_blocks', - view: View, - edit: Edit, - restricted: false, - mostUsed: false, - sidebarTab: 1, - security: { - addPermission: [], - view: [], - }, - }; - return config; -}; diff --git a/src/components/manage/Blocks/RouteParameter/schema.js b/src/components/manage/Blocks/RouteParameter/schema.js deleted file mode 100644 index deb434d8..00000000 --- a/src/components/manage/Blocks/RouteParameter/schema.js +++ /dev/null @@ -1,26 +0,0 @@ -const getSchema = () => ({ - title: 'Route parameter', - - fieldsets: [ - { - id: 'default', - title: 'Default', - fields: ['parameterKey', 'defaultValue'], - }, - ], - - properties: { - parameterKey: { - title: 'Parameter key', - type: 'title', - }, - defaultValue: { - title: 'Default value', - type: 'title', - }, - }, - - required: ['parameterKey', 'defaultValue'], -}); - -export default getSchema; diff --git a/src/components/manage/Blocks/SimpleDataTable/Edit.jsx b/src/components/manage/Blocks/SimpleDataTable/Edit.jsx index 378b96b4..bcfc62e6 100644 --- a/src/components/manage/Blocks/SimpleDataTable/Edit.jsx +++ b/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 ( + + + + ); +}; diff --git a/src/components/manage/Blocks/SimpleDataTable/View.jsx b/src/components/manage/Blocks/SimpleDataTable/View.jsx index ba8af896..600a0ae9 100644 --- a/src/components/manage/Blocks/SimpleDataTable/View.jsx +++ b/src/components/manage/Blocks/SimpleDataTable/View.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { compose } from 'redux'; import config from '@plone/volto/registry'; import { DefaultView } from './templates/default'; - +import { VisibilitySensor } from '@eeacms/volto-datablocks/components'; import { connectToProviderData } from '@eeacms/volto-datablocks/hocs'; import { serializeNodes } from '@eeacms/volto-datablocks/serialize'; @@ -103,7 +103,7 @@ const SimpleDataTableView = (props) => { export { SimpleDataTableView }; -export default compose( +const SimpleDataTableViewWrapper = compose( connectToProviderData((props) => { const { max_count = 5 } = props.data; return { @@ -116,3 +116,11 @@ export default compose( }; }), )(SimpleDataTableView); + +export default (props) => { + return ( + + + + ); +}; diff --git a/src/components/theme/Placeholder/View.jsx b/src/components/theme/Placeholder/View.jsx deleted file mode 100644 index bbc19ca5..00000000 --- a/src/components/theme/Placeholder/View.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import VisibilitySensor from 'react-visibility-sensor'; - -export const Placeholder = ({ children, onChange, ...rest }) => { - const [active, setActive] = React.useState(true); - - return ( - { - if (visible && active) { - setActive(false); - } - }} - active={active} - {...rest} - > - {({ isVisible }) => { - if (isVisible) { - return children(); - } - - // Without the character inside the div (non-breaking white space) - // the size of the
is wrong. - return
 
; - }} - - ); -}; - -export default Placeholder; diff --git a/src/components/theme/VisibilitySensor/VisibilitySensor.jsx b/src/components/theme/VisibilitySensor/VisibilitySensor.jsx new file mode 100644 index 00000000..683aa3a2 --- /dev/null +++ b/src/components/theme/VisibilitySensor/VisibilitySensor.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import ReactVisibilitySensor from 'react-visibility-sensor'; + +const VisibilitySensor = ({ + children, + scrollCheck = true, + resizeCheck = true, + partialVisibility = true, + delayedCall = true, + offset = { top: -50, bottom: -50 }, + Placeholder = () =>
 
, + ...rest +}) => { + const [active, setActive] = React.useState(true); + + return ( + { + if (visible && active) { + setActive(false); + } + }} + active={active} + getDOMElement={(val) => { + return val?.el; + }} + offset={offset} + {...rest} + > + {({ isVisible }) => { + if (isVisible || !active) { + return children; + } + + return ; + }} + + ); +}; + +export default VisibilitySensor; diff --git a/src/constants.js b/src/constants.js index 349d0dbe..b7ef278e 100644 --- a/src/constants.js +++ b/src/constants.js @@ -12,5 +12,3 @@ export const DATA_PROVIDER_TYPES = [ ]; export const DATACONNECTOR_PARAMS_GROUP = 'DataConnector Parameter'; -export const SET_ROUTE_PARAMETER = 'SET_ROUTE_PARAMETER'; -export const DELETE_ROUTE_PARAMETER = 'DELETE_ROUTE_PARAMETER'; diff --git a/src/helpers.js b/src/helpers.js index 7c7c465d..9cf4a4f3 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -3,8 +3,6 @@ import { useEffect, useState } from 'react'; import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers'; import qs from 'querystring'; -export * from './components/manage/Blocks/RouteParameter'; - export function getBasePath(url) { return flattenToAppURL(getBaseUrl(url)); } @@ -40,25 +38,31 @@ export function getForm({ data = {}, location, pagination, extraQuery = {} }) { export function getDataQuery({ connected_data_parameters, + content = {}, data = {}, location, - // pagination, + params, provider_url, }) { - const path = location.pathname.replace('/edit', ''); - const has_data_query_by_context = data.has_data_query_by_context ?? true; + let byContextPath = []; + let byRouteParameters = []; + const path = + flattenToAppURL(content?.['@id']) || location.pathname.replace('/edit', ''); const has_data_query_by_provider = data.has_data_query_by_provider ?? true; - const has_data_query_by_route_parameter = - data.has_data_query_by_route_parameter ?? true; - const byContextPath = has_data_query_by_context - ? connected_data_parameters?.byContextPath?.[path] || [] - : []; const byProviderPath = has_data_query_by_provider ? connected_data_parameters?.byProviderPath?.[provider_url] || {} : {}; - const byRouteParameters = has_data_query_by_route_parameter - ? connected_data_parameters?.byRouteParameters || [] - : []; + + (connected_data_parameters?.byContextPath?.[path] || []).forEach( + (data_query) => { + if (!params[data_query.i]) { + byContextPath.push(data_query); + } else { + byRouteParameters.push({ ...data_query, v: [params[data_query.i]] }); + } + }, + ); + const filters = Object.keys(byProviderPath).map((key) => byProviderPath[key]) || []; // if (pagination.enabled) { @@ -70,7 +74,6 @@ export function getDataQuery({ ...byRouteParameters, ...filters, ]; - // return [...(data?.data_query || []), ...byContextPath]; } /* diff --git a/src/hocs/connectToMultipleProviders.js b/src/hocs/connectToMultipleProviders.js index 656c83e4..744ce400 100644 --- a/src/hocs/connectToMultipleProviders.js +++ b/src/hocs/connectToMultipleProviders.js @@ -1,4 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react'; +import { useParams } from 'react-router-dom'; import { withRouter } from 'react-router'; import { connect, useDispatch } from 'react-redux'; import hash from 'object-hash'; @@ -14,11 +15,13 @@ import { getConnectorPath, getForm, getDataQuery } from '../helpers'; export function connectToMultipleProviders(getConfig = () => ({})) { return (WrappedComponent) => { return connect((state) => ({ + content: state.content.data, connected_data_parameters: state.connected_data_parameters, data_providers: state.data_providers, }))( withRouter((props) => { const dispatch = useDispatch(); + const params = useParams(); const config = useMemo(() => getConfig(props), [props]); const [mounted, setMounted] = useState(false); const [state, setState] = useState({ @@ -50,6 +53,7 @@ export function connectToMultipleProviders(getConfig = () => ({})) { // Get data query newState.data_query.push( getDataQuery({ + params, provider_url, location: props.location, connected_data_parameters: props.connected_data_parameters, @@ -71,7 +75,12 @@ export function connectToMultipleProviders(getConfig = () => ({})) { ); }); setState({ ...newState }); - }, [providers, props.location, props.connected_data_parameters]); + }, [ + providers, + params, + props.location, + props.connected_data_parameters, + ]); const providers_data = useMemo(() => { const data = {}; diff --git a/src/hocs/connectToProviderData.js b/src/hocs/connectToProviderData.js index f17b5f4b..0cae4766 100644 --- a/src/hocs/connectToProviderData.js +++ b/src/hocs/connectToProviderData.js @@ -5,6 +5,7 @@ import React, { useState, useRef, } from 'react'; +import { useParams } from 'react-router-dom'; import { withRouter } from 'react-router'; import { connect, useDispatch } from 'react-redux'; import { isEqual } from 'lodash'; @@ -34,12 +35,13 @@ const getInitialPagination = (config = {}) => { export function connectToProviderData(getConfig = () => ({})) { return (WrappedComponent) => { return connect((state) => ({ - route_parameters: state.route_parameters, + content: state.content.data, connected_data_parameters: state.connected_data_parameters, data_providers: state.data_providers, }))( withRouter((props) => { const dispatch = useDispatch(); + const params = useParams(); const config = useMemo(() => getConfig(props), [props]); const [mounted, setMounted] = useState(false); const [state, setState] = useState({}); @@ -63,8 +65,8 @@ export function connectToProviderData(getConfig = () => ({})) { [props, pagination, state.extraQuery], ); const data_query = useMemo( - () => getDataQuery({ ...props, pagination, provider_url }), - [props, pagination, provider_url], + () => getDataQuery({ ...props, params, pagination, provider_url }), + [props, params, pagination, provider_url], ); const hashValue = useMemo(() => { diff --git a/src/index.js b/src/index.js index 91842dda..52be3b70 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,6 @@ import installDataConnectedEmbedBlock from './components/manage/Blocks/DataConne import installDataTable from './components/manage/Blocks/SimpleDataTable'; import installDottedTableChart from './components/manage/Blocks/DottedTableChart'; import installCountryFlag from './components/manage/Blocks/CountryFlag'; -import installRouteParameter from './components/manage/Blocks/RouteParameter'; import installCustomConnectedBlock from './components/manage/Blocks/CustomConnectedBlock'; import installConditionalDataBlock from './components/manage/Blocks/ConditionalDataBlock'; @@ -48,7 +47,6 @@ export default (config) => { installDataTable, installDottedTableChart, installCountryFlag, - installRouteParameter, installCustomConnectedBlock, installConditionalDataBlock, ].reduce((acc, apply) => apply(acc), config); diff --git a/src/reducers/connected_data_parameters.js b/src/reducers/connected_data_parameters.js index 414c3849..dbeb9d4b 100644 --- a/src/reducers/connected_data_parameters.js +++ b/src/reducers/connected_data_parameters.js @@ -6,21 +6,17 @@ import { flattenToAppURL } from '@plone/volto/helpers'; import { SET_CONNECTED_DATA_PARAMETERS, DELETE_CONNECTED_DATA_PARAMETERS, - SET_ROUTE_PARAMETER, - DELETE_ROUTE_PARAMETER, } from '../constants'; const initialState = { byProviderPath: {}, byContextPath: {}, - byRouteParameters: [], }; export default function connected_data_parameters( state = initialState, action = {}, ) { - let byRouteParameters; let path, byProviderPath; const { providerPath, data_query, index } = action; switch (action.type) { @@ -46,20 +42,6 @@ export default function connected_data_parameters( ...state, byProviderPath, }; - case SET_ROUTE_PARAMETER: - byRouteParameters = [...state.byRouteParameters, action.data_query]; - return { - ...state, - byRouteParameters, - }; - case DELETE_ROUTE_PARAMETER: - byRouteParameters = [...state.byRouteParameters].filter( - (routeParam) => routeParam.i !== action.parameterKey, - ); - return { - ...state, - byRouteParameters, - }; case 'GET_CONTENT_SUCCESS': const content = action.result; diff --git a/src/reducers/index.js b/src/reducers/index.js index ab71fec4..0e3a1025 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,6 +1,5 @@ export sparql_data from './sparql_data'; export data_providers from './data_providers'; export connected_data_parameters from './connected_data_parameters'; -export route_parameters from './route_parameters'; export blockdata from './blockdata'; export table_search from './table_search'; diff --git a/src/reducers/route_parameters.js b/src/reducers/route_parameters.js deleted file mode 100644 index 8fa5b65a..00000000 --- a/src/reducers/route_parameters.js +++ /dev/null @@ -1,26 +0,0 @@ -import { SET_ROUTE_PARAMETER, DELETE_ROUTE_PARAMETER } from '../constants'; - -const initialState = {}; - -export default function connected_data_parameters( - state = initialState, - action = {}, -) { - const newParams = { ...state }; - - switch (action.type) { - case SET_ROUTE_PARAMETER: - newParams[action.parameter] = action.value; - return { - ...newParams, - }; - case DELETE_ROUTE_PARAMETER: - delete newParams[action.parameter]; - return { - ...newParams, - }; - - default: - return state; - } -} From e1f142699ad00776f6c34d1d84458ad43de0c34c Mon Sep 17 00:00:00 2001 From: Miu Razvan Date: Fri, 15 Jul 2022 10:48:24 +0300 Subject: [PATCH 4/6] Add date-fns dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index b23fd42d..4b5c1260 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@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", From 91507aebd34ac8d74448b5989ad8f1b5f0d03582 Mon Sep 17 00:00:00 2001 From: valentinab25 <30239069+valentinab25@users.noreply.github.com> Date: Fri, 15 Jul 2022 11:37:13 +0300 Subject: [PATCH 5/6] Update cypress.json --- cypress.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress.json b/cypress.json index 78f4e1c1..a8894dd5 100644 --- a/cypress.json +++ b/cypress.json @@ -12,6 +12,6 @@ "chromeWebSecurity": false, "retries": { "runMode": 8, - "OpenMode": 0 + "openMode": 0 } } From 38b67c27d56a65d71d2eb4d2ff0ce5da10f26657 Mon Sep 17 00:00:00 2001 From: EEA Jenkins <@users.noreply.github.com> Date: Fri, 15 Jul 2022 08:48:07 +0000 Subject: [PATCH 6/6] Automated release 3.0.13 --- CHANGELOG.md | 11 ++++++++++- package.json | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2af6991d..6903076c 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index 4b5c1260..e3b1347e 100644 --- a/package.json +++ b/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",