@eeacms/volto-cca-policy 0.2.69 → 0.2.71

package/CHANGELOG.md

@@ -4,6 +4,39 @@ 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).
 
+### [0.2.71](https://github.com/eea/volto-cca-policy/compare/0.2.70...0.2.71) - 9 October 2024
+
+#### :hammer_and_wrench: Others
+
+- core: update volto-datablocks version - refs #277718 [kreafox - [`a1dc7c7`](https://github.com/eea/volto-cca-policy/commit/a1dc7c768fe400406854cbc496545034748bad37)]
+### [0.2.70](https://github.com/eea/volto-cca-policy/compare/0.2.69...0.2.70) - 7 October 2024
+
+#### :hammer_and_wrench: Others
+
+- test: increase code coverage [kreafox - [`caa04c2`](https://github.com/eea/volto-cca-policy/commit/caa04c2cf23879d937d19f49fb9be38289a96f4a)]
+- Refs #272477 - add more test [Tripon Eugen - [`65cafca`](https://github.com/eea/volto-cca-policy/commit/65cafca45e03ec27bb9aae3b346bc50a0ed00c20)]
+- Refs #272477 - test update [Tripon Eugen - [`7c99ffc`](https://github.com/eea/volto-cca-policy/commit/7c99ffc6013ebd9a0625acce762f7069648037c7)]
+- Refs #272477 - test [Tripon Eugen - [`c60ab3e`](https://github.com/eea/volto-cca-policy/commit/c60ab3e7e07b0f9493386f74a1c6f3658aef74cf)]
+- Refs #Q272477 - test [Tripon Eugen - [`8a67efa`](https://github.com/eea/volto-cca-policy/commit/8a67efacc1e38801f4d30de28002eae7ef45b61b)]
+- test: increase code coverage [kreafox - [`82e5828`](https://github.com/eea/volto-cca-policy/commit/82e5828d44f7c848fccab13d2e224eb4239b15c3)]
+- Don't need background [Tiberiu Ichim - [`233be07`](https://github.com/eea/volto-cca-policy/commit/233be07bc6208bb37d76678688799a0934be4a78)]
+- Port InfoOverlay from casestudymap [Tiberiu Ichim - [`96f61d7`](https://github.com/eea/volto-cca-policy/commit/96f61d7af9d09d76c74714921d7f8b6b7b277137)]
+- Open link in new window [Tiberiu Ichim - [`3b94048`](https://github.com/eea/volto-cca-policy/commit/3b94048b4d5c23b5faa97bd5d8ae3a01d146a215)]
+- Add test [Tiberiu Ichim - [`31b3a80`](https://github.com/eea/volto-cca-policy/commit/31b3a8053388cdcdd0b4b2d7fc90ea0e39aaf18f)]
+- Remove unused file [Tiberiu Ichim - [`915dbf4`](https://github.com/eea/volto-cca-policy/commit/915dbf4e06cd46fbea5b36d8f7f31e72f3610f27)]
+- Remove console.log [Tiberiu Ichim - [`9cf77d8`](https://github.com/eea/volto-cca-policy/commit/9cf77d8cc5999cf52ce231e1179dfd54538d0b4d)]
+- Remove console.log [Tiberiu Ichim - [`04949b7`](https://github.com/eea/volto-cca-policy/commit/04949b70ee741aa54aacccd2eebe8c529b0367f1)]
+- WIP [Tiberiu Ichim - [`101d459`](https://github.com/eea/volto-cca-policy/commit/101d459ad818f274f8e74fd77e8847e6c6c09384)]
+- WIP [Tiberiu Ichim - [`9f18518`](https://github.com/eea/volto-cca-policy/commit/9f18518021a3750626bdff9e3f6f78344c5b8e9a)]
+- WIP [Tiberiu Ichim - [`2cb4ecb`](https://github.com/eea/volto-cca-policy/commit/2cb4ecb052f3ba951b317a8830ecbb09c7d388b6)]
+- eslint [Tripon Eugen - [`e1f3bb2`](https://github.com/eea/volto-cca-policy/commit/e1f3bb252c6e3e615f63cb7747324c569b832b11)]
+- Refs #272477 - view horizontal card eslint [Tripon Eugen - [`da0df68`](https://github.com/eea/volto-cca-policy/commit/da0df6829296b33d483c3880a7c39ecdf803caee)]
+- Refs #272477 - view horizontal card cluster [Tripon Eugen - [`d9fbd97`](https://github.com/eea/volto-cca-policy/commit/d9fbd97e3a9566ef6a9da62f283dd8639d7d00f0)]
+- Better style [Tiberiu Ichim - [`d05b49b`](https://github.com/eea/volto-cca-policy/commit/d05b49b762e9970fa51fe811322a81aacc75570f)]
+- Zoom to map center [Tiberiu Ichim - [`1b55019`](https://github.com/eea/volto-cca-policy/commit/1b5501940733e451d4870b0b2b29963e5f7ff655)]
+- add cluster [Tripon Eugen - [`8e25736`](https://github.com/eea/volto-cca-policy/commit/8e257363f173d6b09f0548ad0ec6a03ff47f1f13)]
+- checkpoint [Tiberiu Ichim - [`49595c1`](https://github.com/eea/volto-cca-policy/commit/49595c11d1eaf74924d1eed48f0d20594dbdcd1f)]
+- Refs #273188 - openDB link move to item title [Tripon Eugen - [`b4d66d6`](https://github.com/eea/volto-cca-policy/commit/b4d66d6874958659474057e7a1df5c28067b870a)]
 ### [0.2.69](https://github.com/eea/volto-cca-policy/compare/0.2.68...0.2.69) - 26 September 2024
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-block-style": "github:eea/volto-block-style#6.x.x",
-    "@eeacms/volto-datablocks": "^7.2.2",
+    "@eeacms/volto-datablocks": "^7.2.5",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "^1.33.2",
     "@eeacms/volto-embed": "^9.1.1",

package/src/components/Result/ClusterHorizontalCardItem.jsx

@@ -0,0 +1,136 @@
+// Original: https://github.com/eea/volto-searchlib/blob/master/searchlib/components/Result/HorizontalCardItem.jsx
+// We need custom href for results.
+import React from 'react';
+import { Label } from 'semantic-ui-react';
+import {
+  SegmentedBreadcrumb,
+  StringList,
+  DateTime,
+} from '@eeacms/search/components';
+import { useAppConfig } from '@eeacms/search/lib/hocs';
+
+import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
+import ResultContext from '@eeacms/search/components/Result/ResultContext';
+import ContentClusters from '@eeacms/search/components/Result/ContentClusters';
+
+const healthURL = (href, is_observatory) => {
+  if (is_observatory) {
+    return href.replace(/\/metadata\//, '/observatory/++aq++metadata/');
+  }
+  return href;
+};
+
+const healthBreadcrumb = (href, is_observatory) => {
+  // It's only cosmetic. We don't want to show ++aq...
+  if (is_observatory) {
+    return href.replace(/\/metadata\//, '/observatory/');
+  }
+  return href;
+};
+
+const ExtraContent = (props) => {
+  const { result, is_mission, is_observatory } = props;
+  let title = 'Climate-ADAPT';
+  if (is_mission) {
+    title = 'Mission Portal';
+  }
+  if (is_observatory) {
+    title = 'Health Observatory';
+  }
+  return (
+    <div>
+      <div className="result-bottom">
+        <div className="result-info">
+          {/* <span className="result-info-title">Published: </span> */}
+          <DateTime format="DATE_MED" value={result.issued} />
+        </div>
+        <div className="result-info">
+          <span className="result-info-title">Topics: </span>
+          <StringList value={result.tags} />
+        </div>
+      </div>
+      <div>
+        <div className="result-info result-source">
+          <span className="result-info-title">Source: </span>
+          <ExternalLink href={healthURL(result.href, is_observatory)}>
+            <strong title={result.source} className="source">
+              {title}
+              {/* {firstWords(
+                getTermDisplayValue({
+                  vocab,
+                  field: 'cluster_name',
+                  term: result.source,
+                }),
+                8,
+              )} */}
+            </strong>
+            <SegmentedBreadcrumb
+              href={healthBreadcrumb(result.href, is_observatory)}
+              short={true}
+              maxChars={40}
+            />
+          </ExternalLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ClusterHorizontalCardItem = (props) => {
+  const { result } = props;
+  const { registry } = useAppConfig();
+  const clusters = result.clusterInfo;
+
+  const UniversalCard = registry.resolve['UniversalCard'].component;
+
+  let is_mission = false;
+  let is_observatory = false;
+  if (
+    result.cca_include_in_mission.raw === 'true' ||
+    result.href.includes('climate-adapt.eea.europa.eu/en/mission')
+  ) {
+    is_mission = true;
+  }
+  if (result.cca_include_in_search_observatory.raw === 'true') {
+    is_observatory = true;
+  }
+
+  const item = {
+    '@id': result.href,
+    title: (
+      <>
+        <ExternalLink
+          href={healthURL(result.href, is_observatory)}
+          title={result.title}
+        >
+          {result.title}
+          {result.isNew && <Label className="new-item">New</Label>}
+          {result.isExpired && (
+            <Label className="archived-item">Archived</Label>
+          )}
+        </ExternalLink>
+      </>
+    ),
+    meta: <ContentClusters clusters={clusters} item={result} />,
+    description: props.children ? props.children : <ResultContext {...props} />,
+    preview_image_url: result.hasImage ? result.thumbUrl : undefined,
+    extra: (
+      <ExtraContent
+        result={result}
+        is_mission={is_mission}
+        is_observatory={is_observatory}
+      />
+    ),
+  };
+
+  const itemModel = {
+    hasImage: result.hasImage,
+    hasDescription: true,
+    imageOnRightSide: true,
+    '@type': 'searchItem',
+  };
+
+  return <UniversalCard item={item} itemModel={itemModel} />;
+};
+
+export default ClusterHorizontalCardItem;

package/src/components/manage/Blocks/C3SIndicatorsGlossaryBlock/C3SIndicatorsGlossaryBlockView.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import C3SIndicatorsGlossaryBlockView from './C3SIndicatorsGlossaryBlockView';
+
+const mockStore = configureStore();
+
+describe('C3SIndicatorsGlossaryBlockView', () => {
+  it('should render the component', () => {
+    const data = {
+      mode: 'test',
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <C3SIndicatorsGlossaryBlockView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/C3SIndicatorsListingBlock/C3SIndicatorsListingBlockView.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import C3SIndicatorsListingBlockView from './C3SIndicatorsListingBlockView';
+
+const mockStore = configureStore();
+
+describe('C3SIndicatorsListingBlockView', () => {
+  it('should render the component', () => {
+    const data = {
+      metadata: {
+        '@components': {
+          c3s_indicators_listing: {
+            items: [
+              { url: 'https://www.europa.eu', title: 'Europa' },
+              { url: 'https://www.copernicus.eu/en', title: 'Copernicus' },
+            ],
+          },
+        },
+      },
+    };
+
+    const store = mockStore({
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <C3SIndicatorsListingBlockView {...data} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerEdit.test.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyExplorerEdit from './CaseStudyExplorerEdit';
+import { useCases } from './hooks';
+import * as utils from './utils';
+
+const mockStore = configureStore();
+
+jest.mock('./CaseStudyExplorerView', () => (props) => (
+  <div>Mock Case Study Explorer View {JSON.stringify(props)}</div>
+));
+jest.mock('./CaseStudyMap', () => () => <div>Mock Case Study Map</div>);
+jest.mock('./CaseStudyFilters', () => () => <div>Mock Case Study Filters</div>);
+
+jest.mock('./hooks', () => ({
+  useCases: jest.fn(),
+}));
+
+jest.mock('./utils', () => ({
+  filterCases: jest.fn(),
+  getFilters: jest.fn(),
+}));
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('CaseStudyExplorerEdit', () => {
+  const mockCasesData = {
+    features: [
+      {
+        properties: {
+          title: 'Case Study 1',
+          image: 'image1.jpg',
+          sectors_str: 'Sector1',
+          impacts_str: 'Impact1',
+          adaptation_options_links: 'link1',
+          url: 'https://example.com/case-study-1',
+          origin_adaptecca: 20,
+          sectors: '1,2',
+          impacts: '1',
+          elements: '1',
+        },
+        geometry: {
+          coordinates: [-123.3656, 48.4284],
+        },
+      },
+    ],
+    filters: {
+      measures: [],
+    },
+  };
+
+  beforeEach(() => {
+    useCases.mockReturnValue(mockCasesData);
+
+    utils.getFilters.mockReturnValue({
+      impacts: { 1: 'Impact 1' },
+      sectors: { 1: 'Sector 1' },
+      elements: { 1: 'Element 1' },
+      measures: {},
+    });
+
+    utils.filterCases.mockImplementation((cases, activeFilters) => {
+      return activeFilters.sectors.length ? cases : [];
+    });
+  });
+
+  it('renders the CaseStudyExplorerEdit component', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyExplorerEdit />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByText(/Mock Case Study Explorer View/i)).toBeInTheDocument();
+    expect(getByText(/"mode":"edit"/i)).toBeInTheDocument(); // Check for the mode prop
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.test.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-intl-redux';
+import CaseStudyExplorerView from './CaseStudyExplorerView';
+import { useCases } from './hooks';
+import * as utils from './utils';
+
+const mockStore = configureStore();
+
+jest.mock('./CaseStudyMap', () => () => <div>Mock Case Study Map</div>);
+jest.mock('./CaseStudyFilters', () => () => <div>Mock Case Study Filters</div>);
+
+jest.mock('./hooks', () => ({
+  useCases: jest.fn(),
+}));
+
+jest.mock('./utils', () => ({
+  filterCases: jest.fn(),
+  getFilters: jest.fn(),
+}));
+
+jest.mock('@plone/volto/helpers', () => ({
+  addAppURL: jest.fn((url) => url),
+}));
+
+const store = mockStore({
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+// Define the __SERVER__ variable for testing
+global.__SERVER__ = false; // Set it to false to avoid server-side return
+
+describe('CaseStudyExplorerView', () => {
+  const mockCasesData = {
+    features: [
+      {
+        properties: {
+          title: 'Case Study 1',
+          image: 'image1.jpg',
+          sectors_str: 'Sector1',
+          impacts_str: 'Impact1',
+          adaptation_options_links: 'link1',
+          url: 'https://example.com/case-study-1',
+          origin_adaptecca: 20,
+          sectors: '1,2',
+          impacts: '1',
+          elements: '1',
+        },
+        geometry: {
+          coordinates: [-123.3656, 48.4284],
+        },
+      },
+    ],
+    filters: {
+      measures: [],
+    },
+  };
+
+  beforeEach(() => {
+    useCases.mockReturnValue(mockCasesData);
+    utils.filterCases.mockImplementation((cases, filters) => cases);
+    utils.getFilters.mockReturnValue({
+      impacts: { 1: 'Impact 1' },
+      sectors: { 1: 'Sector 1' },
+      elements: { 1: 'Element 1' },
+      measures: {},
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the CaseStudyExplorerView with case studies', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CaseStudyExplorerView />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(getByText('Mock Case Study Map')).toBeInTheDocument();
+    expect(getByText('Mock Case Study Filters')).toBeInTheDocument();
+  });
+});

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyMap.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Map, Layer, Layers } from '@eeacms/volto-openlayers-map/api';
 import { openlayers as ol } from '@eeacms/volto-openlayers-map';
 
-import InfoOverlay from './InfoOverlay';
 import FeatureInteraction from './FeatureInteraction';
 
 import { getFeatures } from './utils';
@@ -12,7 +11,7 @@ export default function CaseStudyMap(props) {
   const { items, activeItems } = props;
   const [selectedCase, onSelectedCase] = React.useState();
 
-  const features = getFeatures(items);
+  const features = React.useMemo(() => getFeatures(items), [items]);
 
   const [tileWMSSources] = React.useState([
     new ol.source.TileWMS({
@@ -26,97 +25,32 @@ export default function CaseStudyMap(props) {
       transition: 0,
     }),
   ]);
-  const [pointsSource] = React.useState(
-    new ol.source.Vector({
-      features,
-    }),
-  );
 
-  const [clusterSource] = React.useState(
-    new ol.source.Cluster({
-      distance: 50,
-      source: pointsSource,
+  const mapCenter = React.useMemo(
+    () => ({
+      center: ol.proj.fromLonLat([20, 50]),
+      showFullExtent: true,
+      zoom: 4,
     }),
+    [],
   );
 
-  React.useEffect(() => {
-    if (activeItems) {
-      pointsSource.clear();
-      pointsSource.addFeatures(getFeatures(activeItems));
-    }
-  }, [activeItems, pointsSource]);
-
   return features.length > 0 ? (
     <Map
-      view={{
-        center: ol.proj.fromLonLat([20, 50]),
-        showFullExtent: true,
-        zoom: 4,
-      }}
+      view={mapCenter}
       pixelRatio={1}
       controls={ol.control.defaults({ attribution: false })}
     >
       <Layers>
-        <InfoOverlay
-          selectedFeature={selectedCase}
+        <FeatureInteraction
           onFeatureSelect={onSelectedCase}
-          layerId={tileWMSSources[0]}
-          hasCusters={true}
+          selectedFeature={selectedCase}
+          mapCenter={mapCenter}
+          features={features}
+          activeItems={activeItems}
         />
-        <FeatureInteraction onFeatureSelect={onSelectedCase} />
         <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
-        <Layer.Vector style={clusterStyle} source={clusterSource} zIndex={1} />
       </Layers>
     </Map>
   ) : null;
 }
-
-const _cached = {};
-
-function getStyle(size, haveAdaptecca) {
-  let style = _cached[size + '_' + haveAdaptecca];
-
-  if (!style) {
-    style =
-      size === 1
-        ? new ol.style.Style({
-            image: new ol.style.Circle({
-              radius: 5,
-              stroke: new ol.style.Stroke({
-                color: '#fff',
-              }),
-              fill: new ol.style.Fill({
-                color: haveAdaptecca ? '#00ffff' : '#005c96',
-              }),
-            }),
-          })
-        : new ol.style.Style({
-            image: new ol.style.Circle({
-              radius: 10 + Math.min(Math.floor(size / 3), 10),
-              stroke: new ol.style.Stroke({
-                color: '#fff',
-              }),
-              fill: new ol.style.Fill({
-                color: haveAdaptecca ? '#318CE7' : '#005c96',
-              }),
-            }),
-            text: new ol.style.Text({
-              text: size.toString(),
-              fill: new ol.style.Fill({
-                color: '#fff',
-              }),
-            }),
-          });
-    _cached[size + '_' + haveAdaptecca] = style;
-  }
-  return style;
-}
-
-function clusterStyle(feature) {
-  const size = feature.get('features').length;
-  const cases = feature
-    .get('features')
-    .filter((_case) => _case['values_']['origin_adaptecca'] < 20);
-
-  return getStyle(size, cases.length > 0 ? 1 : 0);
-}