@eeacms/volto-n2k 1.0.28 → 1.0.30

package/CHANGELOG.md

@@ -4,12 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.30](https://github.com/eea/volto-n2k/compare/1.0.29...1.0.30) - 12 June 2023
+
+#### :bug: Bug Fixes
+
+- fix: Solve issues identified by Sonarqube [dana-cfc4 - [`be9e367`](https://github.com/eea/volto-n2k/commit/be9e367923fe953aed879e51b078026224a2c817)]
+
+#### :hammer_and_wrench: Others
+
+- fix maps [Miu Razvan - [`cfd8805`](https://github.com/eea/volto-n2k/commit/cfd8805df86da18c2ecf5140223830f128157f74)]
+- Add country profile maps [Miu Razvan - [`830542a`](https://github.com/eea/volto-n2k/commit/830542aa28253c0265c966808e1c38193fc40383)]
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`1e24dce`](https://github.com/eea/volto-n2k/commit/1e24dce7789c9a1436fd6a52e79c69119a9ef45a)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`2a0ad87`](https://github.com/eea/volto-n2k/commit/2a0ad8776363f7dce37422660235dceeae151667)]
+### [1.0.29](https://github.com/eea/volto-n2k/compare/1.0.28...1.0.29) - 8 June 2023
+
 ### [1.0.28](https://github.com/eea/volto-n2k/compare/1.0.27...1.0.28) - 7 June 2023
 
 #### :hammer_and_wrench: Others
 
 - prettier fix [Miu Razvan - [`3bf6510`](https://github.com/eea/volto-n2k/commit/3bf651046ff9f7cfb7e26fe97a2ac61f4ce00a48)]
-- add more custom blocks [Miu Razvan - [`a94fe36`](https://github.com/eea/volto-n2k/commit/a94fe366dbd4fe5c679489e85950437dbed881e5)]
 ### [1.0.27](https://github.com/eea/volto-n2k/compare/1.0.26...1.0.27) - 6 June 2023
 
 ### [1.0.26](https://github.com/eea/volto-n2k/compare/1.0.25...1.0.26) - 29 May 2023
@@ -232,7 +245,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update [razvanMiu - [`42ab50e`](https://github.com/eea/volto-n2k/commit/42ab50e6681a47251d15ac06b836c6f8c27157fa)]
 - Added bubble chart [razvanMiu - [`89fba5e`](https://github.com/eea/volto-n2k/commit/89fba5e5db41aa955ba2d0ed58c9f0042c461504)]
 - Group species by id_eunis in species list [razvanMiu - [`543c957`](https://github.com/eea/volto-n2k/commit/543c9573b53acd8eecc9afbb6ae7beeddba53966)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2ca3e4c`](https://github.com/eea/volto-n2k/commit/2ca3e4c092211f92339791d71db81f5b4ca2d562)]
 - update maps - species and habitats distribution maps [Claudia Ifrim - [`ad12eb1`](https://github.com/eea/volto-n2k/commit/ad12eb141907d6f28444f1eafc3f687735d2a68d)]
 - update format for common name and author [Claudia Ifrim - [`26b7a2f`](https://github.com/eea/volto-n2k/commit/26b7a2f3d20c7701b57fb24f39fc7dfeceec3ce8)]
 - update format for species name (common / scientific) [Claudia Ifrim - [`abdedcf`](https://github.com/eea/volto-n2k/commit/abdedcfe645665031dedf050fd2c5cdde8c14a50)]

package/jest-addon.config.js

@@ -5,19 +5,19 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/BubbleChart/Chart.jsx

@@ -17,11 +17,6 @@ function Chart(props) {
   const popupRef = useRef();
   const { margin = { top: 20, right: 30, bottom: 70, left: 40 } } = props;
 
-  // const dispose = () => {
-  //   const svg = select(svgRef.current);
-  //   svg.selectAll('*').remove();
-  // };
-
   return (
     <ChartContext.Provider
       value={{

package/src/components/manage/Blocks/CDDACountryProfileMap/Edit.jsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import getSchema from './schema';
+import View from './View';
+import './style.less';
+
+const Edit = (props) => {
+  const schema = useMemo(() => getSchema(props), [props]);
+
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/CDDACountryProfileMap/View.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+
+// layer definitions
+const smallScaleLayerId = 1;
+const smallScaleMinScale = 0;
+const smallScaleMaxScale = 3000000;
+
+const mediumScaleLayerId = 3;
+const mediumScaleMinScale = 2999999;
+const mediumScaleMaxScale = 1000000;
+
+const largeScaleLayerId = 4;
+const largeScaleMinScale = 999999;
+const largeScaleMaxScale = 0;
+
+const dynamicLayerDefinition = `
+[
+  {
+    "id":"{layerId}",
+    "source":{
+      "type":"mapLayer",
+      "mapLayerId":"{layerId}"
+    },
+    "definitionExpression":"cddaCountryCode = '{country}'",
+    "drawingInfo":{
+      "renderer":{
+        "type":"uniqueValue",
+        "field1":"cddaCountryCode",
+        "uniqueValueInfos":[
+          {
+            "value":"{country}",
+            "label":"{country}",
+            "symbol":{
+              "color":[40,149,136,100],
+              "outline":{
+                "color":[40,149,136,100],
+                "width": 0.75,
+                "type":"esriSLS",
+                "style":"esriSLSSolid"
+              },
+              "type":"esriSFS",
+              "style":"esriSFSSolid"
+            }
+          }
+        ]
+      },
+      "showLabels":false
+    },
+    "minScale":{minScale},
+    "maxScale":{maxScale}
+  }
+]`;
+
+const View = (props) => {
+  const [sources, setSources] = useState([]);
+  const [tiles, setTiles] = useState([]);
+  const [extent, setExtent] = useState(null);
+  const { proj, source } = openlayers;
+
+  const country = useMemo(() => {
+    const query = (props.properties.data_query || []).filter(
+      (query) => query.i === 'iso2',
+    )[0];
+    if (!query) return null;
+    const value = query.v;
+    if (isArray(value)) {
+      return value[0];
+    }
+    if (isString(value)) {
+      return value;
+    }
+    return null;
+  }, [props.properties]);
+
+  useEffect(() => {
+    setTiles([
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
+      }),
+      new source.XYZ({
+        url:
+          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+          'Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}',
+      }),
+    ]);
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    setSources([
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${largeScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', largeScaleLayerId)
+            .replace('{minScale}', largeScaleMinScale)
+            .replace('{maxScale}', largeScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${mediumScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', mediumScaleLayerId)
+            .replace('{minScale}', mediumScaleMinScale)
+            .replace('{maxScale}', mediumScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+      new source.ImageArcGISRest({
+        ratio: 1,
+        params: {
+          LAYERS: `${smallScaleLayerId}`,
+          dynamicLayers: dynamicLayerDefinition
+            .replace(/(\r\n|\n|\r)/gm, '')
+            .replaceAll(' ', '')
+            .replaceAll('{country}', country)
+            .replaceAll('{layerId}', smallScaleLayerId)
+            .replace('{minScale}', smallScaleMinScale)
+            .replace('{maxScale}', smallScaleMaxScale),
+        },
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer',
+      }),
+    ]);
+    fetch(
+      `https://geoenrich.arcgis.com/arcgis/rest/services/World/geoenrichmentserver/Geoenrichment/countries/${country}?f=pjson`,
+    )
+      .then(function (response) {
+        return response.json();
+      })
+      .then(async (data) => {
+        const { fromExtent } = await import('ol/geom/Polygon');
+        if (data && data.countries.length > 0) {
+          const countryInfo = data.countries[0];
+          const countryExtent = [
+            countryInfo.defaultExtent.xmin,
+            countryInfo.defaultExtent.ymin,
+            countryInfo.defaultExtent.xmax,
+            countryInfo.defaultExtent.ymax,
+          ];
+
+          const reprojectedExtent = proj.transformExtent(
+            countryExtent,
+            'EPSG:4326',
+            'EPSG:3857',
+          );
+
+          const polygon = fromExtent(reprojectedExtent);
+          polygon.scale(1.2);
+
+          setExtent(polygon.getExtent());
+        }
+      })
+      .catch(function () {
+        // handle the error
+        setExtent(null);
+      });
+    /* eslint-disable-next-line */
+  }, [country]);
+
+  return (
+    <div className="n2k-country-profile-map">
+      <Map
+        view={{
+          center: [0, 0],
+          extent: extent || [
+            -6319125.804807394,
+            3070702.923644739,
+            9584655.106275197,
+            12091128.659149397,
+          ],
+          zoom: 2,
+          showFullExtent: true,
+        }}
+        pixelRatio={1}
+      >
+        <Layers>
+          <Layer.Tile source={tiles[1]} zIndex={0} opacity={1} />
+          <Layer.Tile source={tiles[0]} zIndex={1} opacity={0.7} />
+          <Layer.Image source={sources[0]} zIndex={2} />
+          <Layer.Image source={sources[1]} zIndex={2} />
+          <Layer.Image source={sources[2]} zIndex={2} />
+        </Layers>
+      </Map>
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,24 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import Edit from './Edit';
+import View from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.cdda_country_profile_map = {
+    id: 'cdda_country_profile_map',
+    title: 'CDDA country profile map',
+    icon: worldSVG,
+    group: 'custom_blocks',
+    edit: Edit,
+    view: View,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    blockHasOwnFocusManagement: false,
+  };
+  return config;
+};

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

@@ -0,0 +1,19 @@
+const getSchema = () => {
+  return {
+    title: 'CDDA country profile map',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/CDDACountryProfileMap/style.less

@@ -0,0 +1,240 @@
+@type: extra;
+@element: custom;
+
+@import (multiple, reference, optional) '../../theme.config';
+
+@import 'swiper/swiper.less';
+
+@{view} {
+  .species-banner-details {
+    &::before {
+      .full-width();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidth - 2rem) !important;
+      }
+    }
+  }
+}
+
+@{edit} {
+  .species-banner-details {
+    &::before {
+      .full-width-edit();
+      position: absolute;
+      z-index: -1;
+    }
+
+    .carousel {
+      .half-width-edit(960px);
+
+      @media @mobile {
+        width: calc(@pageFullWidthEdit - 2rem) !important;
+      }
+    }
+  }
+}
+
+div#view .species-banner-details .ui.container > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.species-banner-details {
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: #fff !important;
+  font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+  &::before {
+    display: block;
+    height: 100%;
+    background-color: #00a390;
+    content: '';
+  }
+
+  .species-details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .species-metadata {
+      display: flex;
+      width: 50%;
+      height: 320px !important;
+      flex: 0 0 50%;
+      flex-direction: column;
+      justify-content: center;
+      word-wrap: break-word;
+
+      .name {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+
+        font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 54px;
+        line-height: 54px;
+        text-transform: uppercase;
+
+        > * {
+          font-family: RajdhaniB, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+      }
+
+      h3 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      h4 {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        color: #fff !important;
+        font-family: inherit;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+      }
+
+      .info,
+      .info > * {
+        font-family: 'RajdhaniR', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 18px;
+
+        a {
+          color: #fff;
+
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .carousel {
+      display: flex;
+      height: 320px;
+
+      p {
+        font-family: 'RajdhaniB', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      &.one-slide .swiper {
+        width: 100%;
+      }
+
+      &.two-slides .swiper {
+        width: 50%;
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      &.three-slides .swiper {
+        width: 33.33%;
+
+        @media @tablet {
+          width: 50%;
+
+          &.preview.preview-two {
+            display: none;
+          }
+        }
+
+        @media @mobile {
+          width: 100%;
+
+          &.preview.preview-two,
+          &.preview.preview-one {
+            display: none;
+          }
+        }
+      }
+
+      .swiper {
+        &.preview .swiper-slide {
+          filter: grayscale(100%);
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .arrows {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        button {
+          padding: 0;
+          border: none;
+          margin: 0;
+          background-color: transparent;
+        }
+
+        .icon {
+          display: block;
+          width: 32px;
+          background-color: #fff;
+          cursor: pointer;
+        }
+
+        p {
+          overflow: hidden;
+          width: calc(100% - 64px);
+          padding: 0.25rem 0.25rem 0.25rem 1rem;
+          margin: 0;
+          backdrop-filter: brightness(0.5);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    @media @mobile {
+      flex-flow: column;
+
+      .species-metadata {
+        width: 100%;
+        margin-top: 2rem;
+      }
+
+      .carousel {
+        margin: 0 1rem 1rem 1rem;
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/CddaShape/View.jsx

@@ -60,7 +60,6 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [vectorSource, site_code?.[0]]);
 
-  if (__SERVER__ || !vectorSource) return '';
   return (
     <div className="site-shape-wrapper full-width">
       <div className="site-shape">
@@ -71,9 +70,9 @@ const View = (props) => {
             maxZoom: 10,
             minZoom: 10,
             zoom: 10,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ContactBlock/View.jsx

@@ -31,7 +31,7 @@ const View = (props) => {
     : [];
 
   return contacts.length ? (
-    <div className="contact-block">
+    <div className="_contact-block">
       {contacts.map((index) => (
         <div key={`contact-${index}`} className="contact">
           {contactFields.map((field) => (

package/src/components/manage/Blocks/ContactBlock/styles.less

@@ -1,4 +1,4 @@
-.contact-block {
+._contact-block {
   margin-left: 1rem;
 
   &.no-data:not(.edit) {

package/src/components/manage/Blocks/ExploreHabitats/View.jsx

@@ -109,7 +109,6 @@ const View = (props) => {
     /* eslint-disable-next-line */
   }, [JSON.stringify(activePageResults)]);
 
-  if (__SERVER__ || !vectorSource) return '';
   return (
     <div className="explore-habitats-wrapper full-width">
       <div className="explore-habitats">
@@ -118,9 +117,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ExploreSites/View.jsx

@@ -113,9 +113,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -116,9 +116,9 @@ const View = (props) => {
             center: proj.fromLonLat([20, 50]),
             showFullExtent: true,
             zoom: 5,
+            ...(options.extent ? { extent: options.extent } : {}),
           }}
           pixelRatio={1}
-          {...options}
         >
           <Layers>
             <Layer.Tile source={tileWMSSources[0]} zIndex={0} />