@eeacms/volto-bise-policy 1.3.11 → 1.3.13

package/src/components/manage/Blocks/CaseStudyExplorer/testUtils.js

@@ -1,40 +1,48 @@
-export const createMockMap = (additionalProps = {}) => ({
-  on: jest.fn(),
-  un: jest.fn(),
-  addInteraction: jest.fn(),
-  removeInteraction: jest.fn(),
-  getView: jest.fn(() => ({
+export const createMockMap = (additionalProps = {}) => {
+  const view = {
     getZoom: () => 4,
     getCenter: () => [111, 222],
-  })),
-  getInteractions: jest.fn(() => ({
-    array_: [
-      {},
-      {},
-      {},
-      {},
-      {},
-      {},
-      {},
-      {},
-      {},
-      {
-        getFeatures: jest.fn(() => ({
-          clear: jest.fn(),
-          push: jest.fn(),
-        })),
-      },
-    ],
-  })),
-  getEventPixel: jest.fn(() => [10, 20]),
-  hasFeatureAtPixel: jest.fn(() => true),
-  getViewport: jest.fn(() => ({ style: {} })),
-  getPixelFromCoordinate: jest.fn(() => [100, 200]),
-  getFeaturesAtPixel: jest.fn(() => ['mockFeature']),
-  addOverlay: jest.fn(),
-  removeOverlay: jest.fn(),
-  ...additionalProps,
-});
+    fit: jest.fn(),
+    animate: jest.fn(),
+  };
+
+  return {
+    on: jest.fn(),
+    un: jest.fn(),
+    addInteraction: jest.fn(),
+    removeInteraction: jest.fn(),
+    getView: jest.fn(() => view),
+    view,
+    getInteractions: jest.fn(() => ({
+      array_: [
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {
+          getFeatures: jest.fn(() => ({
+            clear: jest.fn(),
+            push: jest.fn(),
+          })),
+        },
+      ],
+    })),
+    getEventPixel: jest.fn(() => [10, 20]),
+    hasFeatureAtPixel: jest.fn(() => true),
+    getViewport: jest.fn(() => ({ style: {} })),
+    getPixelFromCoordinate: jest.fn(() => [100, 200]),
+    getFeaturesAtPixel: jest.fn(() => ['mockFeature']),
+    updateSize: jest.fn(),
+    addOverlay: jest.fn(),
+    removeOverlay: jest.fn(),
+    ...additionalProps,
+  };
+};
 
 export const createMockOl = (additionalProps = {}) => ({
   source: {
@@ -42,6 +50,7 @@ export const createMockOl = (additionalProps = {}) => ({
     Vector: jest.fn(() => ({
       clear: jest.fn(),
       addFeatures: jest.fn(),
+      changed: jest.fn(),
     })),
     Cluster: jest.fn(() => ({})),
   },
@@ -71,14 +80,3 @@ export const createMockOl = (additionalProps = {}) => ({
   })),
   ...additionalProps,
 });
-
-export const createMockPointsSource = (features = []) => ({
-  getFeatures: () => features,
-  clear: jest.fn(),
-  addFeatures: jest.fn(),
-});
-
-export const createMockFilters = () => ({
-  measures_implemented: { m1: 'Measure 1', m2: 'Measure 2' },
-  typology_of_measures: { sector1: 'Sector 1', sector2: 'Sector 2' },
-});

package/src/components/manage/Blocks/CaseStudyExplorer/utils.js

@@ -1,224 +1,108 @@
+// EEA design system tokens: link-default, warning, secondary.
 export const STATUS_COLORS = {
-  planned: '#006bb8',
-  ongoing: '#ff9933',
-  completed: '#00a390',
+  planned: '#006BB8',
+  ongoing: '#FF9933',
+  completed: '#007B6C',
 };
 
 export const FALLBACK_STATUS_COLOR = '#6B7280';
 export const CLUSTER_COLOR = '#007B6C';
-
-const FIELD_ALIASES = {
-  habitat_ecosystem_type: ['habitat_ecosystem_type', 'ecosystem_typology'],
-};
-
-export function getCaseProperty(properties, fieldName) {
-  if (properties?.[fieldName] !== undefined) return properties[fieldName];
-  return (FIELD_ALIASES[fieldName] || [])
-    .map((field) => properties?.[field])
-    .find((value) => value !== undefined);
-}
-
-export function asValues(value) {
-  if (value === undefined || value === null || value === '') return [];
-  return Array.isArray(value) ? value : [value];
-}
-
-export function valueCode(value) {
-  if (value && typeof value === 'object') {
-    return String(
-      value.id ?? value.value ?? value.token ?? value.title ?? value,
-    );
-  }
-  return String(value);
-}
-
-export function valueLabel(value) {
-  if (value && typeof value === 'object') {
-    return String(
-      value.title ?? value.name ?? value.label ?? value.value ?? value.id,
-    );
-  }
-  return String(value);
-}
+// Design system `@cse-green-dark`: the pin of the selected case study.
+export const SELECTED_COLOR = '#005248';
 
 export function getStatusColor(status) {
   return STATUS_COLORS[status] || FALLBACK_STATUS_COLOR;
 }
 
+export function prefersReducedMotion() {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+}
+
 export function centerAndResetMapZoom({ map, ol }) {
-  map.getView().animate({
-    zoom: 4,
-    duration: 1000,
-    center: ol.proj.transform([10, 49], 'EPSG:4326', 'EPSG:3857'),
+  map?.getView().animate({
+    zoom: 4.5,
+    duration: prefersReducedMotion() ? 0 : 1000,
+    center: ol.proj.transform([8, 55], 'EPSG:4326', 'EPSG:3857'),
   });
 }
 
-export function scrollToElement(elementId) {
-  const element = document.getElementById(elementId);
-  element?.scrollIntoView({ behavior: 'smooth' });
-}
+/**
+ * How many wrapping chips to keep visible before a trailing "+N" trigger has
+ * to stand in for the rest.
+ *
+ * `chips` are the measured boxes of every chip in render order: `right` is the
+ * chip's right edge measured from the left edge of the list and `row` its
+ * 0-based row index in the full, untruncated layout. The trigger takes the
+ * place right after the last visible chip, so dropping a chip may let the
+ * trigger fit on a row it did not fit on before; the scan goes from the full
+ * list downwards and stops at the first count whose last chip plus the trigger
+ * still fit in `rows` rows.
+ *
+ * Returns the number of chips to show (0 for an empty list).
+ */
+export function visibleChipCount(
+  chips,
+  { rows = 2, gap = 0, moreWidth = 0, width = 0 } = {},
+) {
+  const total = chips.length;
+  if (!total) return 0;
 
-export function getSelectInteraction(map) {
-  const interactions = map?.getInteractions?.();
-  const interactionArray =
-    interactions?.getArray?.() || interactions?.array_ || [];
+  const maxRow = rows - 1;
 
-  return interactionArray.find(
-    (interaction) => typeof interaction?.getFeatures === 'function',
-  );
-}
+  // Everything already fits: nothing is hidden, so no trigger is needed.
+  if (chips[total - 1].row <= maxRow) return total;
+
+  for (let count = total - 1; count > 0; count -= 1) {
+    const last = chips[count - 1];
+    const triggerRow =
+      last.right + gap + moreWidth <= width ? last.row : last.row + 1;
+
+    if (triggerRow <= maxRow) return count;
+  }
 
-export function getExtentOfFeatures({ features, ol }) {
-  const points = features.map((f) => f.getGeometry().flatCoordinates);
-  const point = new ol.geom.MultiPoint(points);
-  return point.getExtent();
+  // Too narrow for any chip next to the trigger: keep one rather than hide
+  // everything behind a bare "+N".
+  return 1;
 }
 
-export function zoomMapToFeatures({ map, features, threshold = 500, ol }) {
-  const extent = getExtentOfFeatures({ features, ol });
-  let extentBuffer = (extent[3] - extent[1] + extent[2] - extent[0]) / 4;
-  extentBuffer = extentBuffer < threshold ? threshold : extentBuffer;
-  const paddedExtent = ol.extent.buffer(extent, extentBuffer);
-  map.getView().fit(paddedExtent, { ...map.getSize(), duration: 1000 });
+export function scrollToElement(elementId) {
+  const element = document.getElementById(elementId);
+  element?.scrollIntoView({
+    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+  });
 }
 
+/**
+ * GeoJSON features -> OpenLayers point features carrying the properties the
+ * map style and the map/list coupling need.
+ */
 export function getFeatures({ cases, ol }) {
   const Feature = ol.ol.Feature;
 
-  return cases.map((c, index) => {
+  return cases.map((item, index) => {
     const point = new Feature(
-      new ol.geom.Point(ol.proj.fromLonLat(c.geometry.coordinates)),
+      new ol.geom.Point(ol.proj.fromLonLat(item.geometry.coordinates)),
     );
-    const properties = c.properties || {};
+    const properties = item.properties || {};
     const status = properties.current_status;
+
     point.setId(index);
     point.setProperties(
       {
         title: properties.title,
         image: properties.image,
-        nwrm_type: properties.nwrm_type,
-        measures_implemented: properties.measures,
-        typology_of_measures: properties.typology_of_measures,
-        current_status: status,
-        habitat_ecosystem_type: getCaseProperty(
-          properties,
-          'habitat_ecosystem_type',
-        ),
-        nrr_legislation: properties.nrr_legislation,
-        nrr_biogeographical_region: properties.nrr_biogeographical_region,
-        scale_of_planning: properties.scale_of_planning,
-        description: properties.description,
-        index,
         path: properties.path,
+        current_status: status,
         color: getStatusColor(status),
+        index,
       },
       false,
     );
-    return point;
-  });
-}
-
-// Escape a string so it can be embedded in a RegExp pattern as a literal.
-// Prevents user-provided input from being interpreted as regex syntax
-// (avoids ReDoS via crafted patterns and SyntaxError from malformed ones).
-export function escapeRegExp(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-const WORD_CHAR = /[A-Za-z0-9_]/;
-
-// Case-insensitive whole-word substring match implemented without regular
-// expressions, so the needle is always treated as literal text. Equivalent
-// to /\bneedle\b/i but runs in linear time (indexOf) and is immune to
-// catastrophic backtracking.
-function hasWholeWord(text, needle) {
-  let index = text.indexOf(needle);
-  while (index !== -1) {
-    const before = index === 0 ? '' : text[index - 1];
-    const after =
-      index + needle.length >= text.length ? '' : text[index + needle.length];
-    if (!WORD_CHAR.test(before) && !WORD_CHAR.test(after)) return true;
-    index = text.indexOf(needle, index + 1);
-  }
-  return false;
-}
 
-const FILTER_FIELDS = [
-  'nrr_legislation',
-  'nrr_biogeographical_region',
-  'measures_implemented',
-  'typology_of_measures',
-  'current_status',
-  'habitat_ecosystem_type',
-  'scale_of_planning',
-];
-
-export function filterCasesByPath(cases, filterPath) {
-  const path = filterPath?.trim();
-  if (!path) return cases;
-
-  return cases.filter((_case) =>
-    String(_case.properties?.path || '').includes(path),
-  );
-}
-
-export function filterCases(
-  cases,
-  activeFilters,
-  caseStudiesIds,
-  searchInput,
-  filterPath,
-) {
-  return filterCasesByPath(cases, filterPath).filter((_case) => {
-    const properties = _case.properties || {};
-    const flagCase = caseStudiesIds
-      ? caseStudiesIds.includes(properties.url?.split('/').pop())
-      : true;
-    const searchable = `${properties.title || ''} ${
-      properties.description || ''
-    }`;
-    const flagSearch =
-      !searchInput ||
-      hasWholeWord(searchable.toLowerCase(), searchInput.toLowerCase());
-
-    const matchesFilters = FILTER_FIELDS.every((filterName) => {
-      const selected = activeFilters[filterName] || [];
-      if (!selected.length) return true;
-      const values =
-        filterName === 'measures_implemented'
-          ? asValues(properties.measures).map((item) => valueCode(item))
-          : filterName === 'typology_of_measures'
-            ? asValues(properties.typology_of_measures).map((item) =>
-                valueCode(item),
-              )
-            : asValues(getCaseProperty(properties, filterName)).map((item) =>
-                valueCode(item),
-              );
-      return selected.some((filter) => values.includes(String(filter)));
-    });
-
-    return flagCase && flagSearch && matchesFilters;
-  });
-}
-
-export function getFilters(cases) {
-  const filters = Object.fromEntries(FILTER_FIELDS.map((field) => [field, {}]));
-
-  Object.values(cases || {}).forEach((_case) => {
-    const properties = _case.properties || {};
-    FILTER_FIELDS.forEach((field) => {
-      const source =
-        field === 'measures_implemented'
-          ? properties.measures
-          : field === 'typology_of_measures'
-            ? properties.typology_of_measures
-            : getCaseProperty(properties, field);
-      asValues(source).forEach((item) => {
-        const code = valueCode(item);
-        if (!filters[field][code]) filters[field][code] = valueLabel(item);
-      });
-    });
+    return point;
   });
-
-  return filters;
 }

package/src/components/manage/Blocks/CaseStudyExplorer/utils.test.js

@@ -2,191 +2,124 @@ import './mockJsdom';
 import '@testing-library/jest-dom';
 import {
   FALLBACK_STATUS_COLOR,
+  STATUS_COLORS,
+  centerAndResetMapZoom,
   getFeatures,
   getStatusColor,
-  filterCases,
-  getFilters,
+  scrollToElement,
+  visibleChipCount,
 } from './utils';
 
 describe('utils.js', () => {
-  test('maps exact statuses and unknown statuses to colors', () => {
-    expect(getStatusColor('planned')).toBe('#006bb8');
-    expect(getStatusColor('ongoing')).toBe('#ff9933');
-    expect(getStatusColor('completed')).toBe('#00a390');
+  test('maps exact statuses to design system colours, unknown to fallback', () => {
+    expect(getStatusColor('planned')).toBe('#006BB8');
+    expect(getStatusColor('ongoing')).toBe('#FF9933');
+    expect(getStatusColor('completed')).toBe('#007B6C');
     expect(getStatusColor('Planned')).toBe(FALLBACK_STATUS_COLOR);
     expect(getStatusColor('future')).toBe(FALLBACK_STATUS_COLOR);
+    expect(STATUS_COLORS.completed).toBe('#007B6C');
   });
 
-  const mockCases = [
-    {
-      geometry: { coordinates: [0, 0] },
-      properties: {
-        title: 'test case study',
-        image: '',
-        nwrm_type: 'light',
-        measures: [{ id: 'test-measure1', title: 'test measure 1' }],
-        description: 'test',
-        typology_of_measures: ['testsector'],
-        path: '/test-case-study',
-        url: 'localhost.com/test-case-study',
-      },
-    },
-    {
-      geometry: { coordinates: [0, 0] },
-      properties: {
-        title: 'case study 2',
-        image: '',
-        nwrm_type: 'light',
-        measures: [{ id: 'test-measure1', title: 'test measure 1' }],
-        description: 'test',
-        typology_of_measures: ['testsector'],
-        path: '/test-case-study',
-        url: 'localhost.com/test-case-study',
-      },
-    },
-  ];
-
-  test('getFeatures', () => {
-    const mockFeature = {
+  test('getFeatures carries the properties needed by map and list', () => {
+    const feature = {
       setId: jest.fn(),
       setProperties: jest.fn(),
+      props: null,
     };
+    feature.setProperties.mockImplementation((properties) => {
+      feature.props = properties;
+    });
 
     const ol = {
-      ol: {
-        Feature: jest.fn().mockImplementation(() => mockFeature),
-      },
-      geom: {
-        Point: jest.fn().mockImplementation(() => ({})),
-      },
-      proj: {
-        fromLonLat: jest.fn().mockReturnValue([0, 0]),
-      },
+      ol: { Feature: jest.fn(() => feature) },
+      geom: { Point: jest.fn(() => ({})) },
+      proj: { fromLonLat: jest.fn(() => [1, 2]) },
     };
 
-    expect(() => {
-      getFeatures({ cases: mockCases, ol });
-    }).not.toThrowError();
+    const features = getFeatures({
+      cases: [
+        {
+          geometry: { coordinates: [14.4, 50.1] },
+          properties: {
+            title: 'Peatlands',
+            path: '/case-peatlands',
+            image: 'image.jpg',
+            current_status: 'ongoing',
+          },
+        },
+      ],
+      ol,
+    });
+
+    expect(features).toHaveLength(1);
+    expect(feature.setId).toHaveBeenCalledWith(0);
+    expect(feature.props).toMatchObject({
+      title: 'Peatlands',
+      path: '/case-peatlands',
+      current_status: 'ongoing',
+      color: '#FF9933',
+    });
   });
 
-  test('filterCases', () => {
-    const mockActiveFilters = {
-      measures_implemented: ['test measure 1'],
-      typology_of_measures: ['testsector'],
-    };
-    const mockCaseStudiesIds = ['test-case-study'];
-    const mockCasesFiltered = filterCases(
-      mockCases,
-      mockActiveFilters,
-      mockCaseStudiesIds,
-      'test',
+  test('centerAndResetMapZoom returns to the European extent', () => {
+    const map = { getView: () => ({ animate: jest.fn() }) };
+    const ol = { proj: { transform: jest.fn(() => [111, 222]) } };
+
+    centerAndResetMapZoom({ map, ol });
+
+    expect(map.getView().animate).toBeDefined();
+    expect(ol.proj.transform).toHaveBeenCalledWith(
+      [8, 55],
+      'EPSG:4326',
+      'EPSG:3857',
     );
-    expect(mockCasesFiltered).toStrictEqual([]);
   });
 
-  test('filterCases treats search input as literal text (ReDoS-safe)', () => {
-    const cases = [
-      {
-        geometry: { coordinates: [0, 0] },
-        properties: {
-          title: 'the river project (R1)',
-          description: 'a aaa aaaa aaaaa b',
-          url: '/the-river-project-r1',
-        },
-      },
-    ];
-    const noFilters = {
-      nrr_legislation: [],
-      nrr_biogeographical_region: [],
-      measures_implemented: [],
-      typology_of_measures: [],
-      current_status: [],
-      habitat_ecosystem_type: [],
-      scale_of_planning: [],
-    };
-
-    // Malformed regex input must not throw (previously: SyntaxError)
-    expect(() => filterCases(cases, noFilters, null, '(')).not.toThrow();
-    // Regex metacharacters are matched literally, not interpreted
-    expect(() => filterCases(cases, noFilters, null, '(a+)+$')).not.toThrow();
-    expect(filterCases(cases, noFilters, null, '(a+)+$')).toHaveLength(0);
-    expect(filterCases(cases, noFilters, null, '(r1')).toHaveLength(1);
-    // Whole-word semantics are preserved
-    expect(filterCases(cases, noFilters, null, 'rive')).toHaveLength(0);
-    expect(filterCases(cases, noFilters, null, 'river')).toHaveLength(1);
-    // Case-insensitive
-    expect(filterCases(cases, noFilters, null, 'R1')).toHaveLength(1);
+  test('scrollToElement tolerates missing elements', () => {
+    expect(() => scrollToElement('does-not-exist')).not.toThrow();
   });
 
-  test('filters new scalar and multi-value fields', () => {
-    const cases = [
-      {
-        geometry: { coordinates: [0, 0] },
-        properties: {
-          title: 'planned river case',
-          description: '',
-          url: '/planned-river-case',
-          current_status: 'planned',
-          ecosystem_typology: ['River', 'Wetland'],
-          nrr_legislation: [{ id: 'article-1', title: 'Article 1' }],
-          nrr_biogeographical_region: [{ id: 'region-1', title: 'Alpine' }],
-          scale_of_planning: 'Regional',
-        },
-      },
-      {
-        geometry: { coordinates: [0, 0] },
-        properties: {
-          title: 'future case',
-          description: '',
-          url: '/future-case',
-          current_status: 'Future',
-          ecosystem_typology: ['Forest'],
-          nrr_legislation: ['article-2'],
-          nrr_biogeographical_region: ['region-2'],
-          scale_of_planning: 'National',
-        },
-      },
-    ];
+  describe('visibleChipCount', () => {
+    const CHIP = 90;
+    const GAP = 8;
+    const WIDTH = 300;
+    // Three chips per row: x = 0, 98, 196 and the fourth wraps.
+    const layout = (rows) =>
+      rows.flatMap((aRow) =>
+        [0, 1, 2].map((column) => ({
+          row: aRow,
+          right: column * (CHIP + GAP) + CHIP,
+        })),
+      );
+    const options = { rows: 2, gap: GAP, moreWidth: 40, width: WIDTH };
 
-    expect(
-      filterCases(cases, {
-        nrr_legislation: ['article-1'],
-        nrr_biogeographical_region: ['region-1'],
-        measures_implemented: [],
-        typology_of_measures: [],
-        current_status: ['planned'],
-        habitat_ecosystem_type: ['River'],
-        scale_of_planning: ['Regional'],
-      }),
-    ).toHaveLength(1);
-    expect(getFilters(cases).nrr_legislation).toEqual({
-      'article-1': 'Article 1',
-      'article-2': 'article-2',
+    test('returns 0 for an empty list', () => {
+      expect(visibleChipCount([], options)).toBe(0);
     });
-    expect(getFilters(cases).nrr_biogeographical_region).toEqual({
-      'region-1': 'Alpine',
-      'region-2': 'region-2',
+
+    test('keeps every chip when they all fit in two rows', () => {
+      expect(visibleChipCount(layout([0, 1]), options)).toBe(6);
+      expect(visibleChipCount(layout([0]), options)).toBe(3);
+    });
+
+    test('drops a chip so the trigger fits on the second row', () => {
+      // 6 chips fill two rows, but the trigger no longer fits next to the 6th.
+      expect(visibleChipCount(layout([0, 1, 2]), options)).toBe(5);
     });
-  });
 
-  test('getFilters', () => {
-    const mockCasesObject = mockCases.reduce((acc, item, index) => {
-      acc[index] = item;
-      return acc;
-    }, {});
-    const mockFilters = getFilters(mockCasesObject);
-    expect(mockFilters).toStrictEqual({
-      measures_implemented: {
-        'test-measure1': 'test measure 1',
-      },
-      typology_of_measures: {
-        testsector: 'testsector',
-      },
-      current_status: {},
-      habitat_ecosystem_type: {},
-      nrr_legislation: {},
-      nrr_biogeographical_region: {},
-      scale_of_planning: {},
+    test('keeps one chip rather than hiding everything behind a trigger', () => {
+      const chips = [
+        { row: 0, right: 300 },
+        { row: 1, right: 50 },
+      ];
+      expect(
+        visibleChipCount(chips, {
+          rows: 1,
+          gap: GAP,
+          moreWidth: 200,
+          width: 60,
+        }),
+      ).toBe(1);
     });
   });
 });