@eeacms/volto-bise-policy 1.3.4 → 1.3.6

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

@@ -1,3 +1,50 @@
+export const STATUS_COLORS = {
+  planned: '#006bb8',
+  ongoing: '#ff9933',
+  completed: '#00a390',
+};
+
+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);
+}
+
+export function getStatusColor(status) {
+  return STATUS_COLORS[status] || FALLBACK_STATUS_COLOR;
+}
+
 export function centerAndResetMapZoom({ map, ol }) {
   map.getView().animate({
     zoom: 4,
@@ -8,9 +55,17 @@ export function centerAndResetMapZoom({ map, ol }) {
 
 export function scrollToElement(elementId) {
   const element = document.getElementById(elementId);
-  element.scrollIntoView({
-    behavior: 'smooth',
-  });
+  element?.scrollIntoView({ behavior: 'smooth' });
+}
+
+export function getSelectInteraction(map) {
+  const interactions = map?.getInteractions?.();
+  const interactionArray =
+    interactions?.getArray?.() || interactions?.array_ || [];
+
+  return interactionArray.find(
+    (interaction) => typeof interaction?.getFeatures === 'function',
+  );
 }
 
 export function getExtentOfFeatures({ features, ol }) {
@@ -31,24 +86,30 @@ export function getFeatures({ cases, ol }) {
   const Feature = ol.ol.Feature;
 
   return cases.map((c, index) => {
-    const {
-      geometry: { coordinates },
-    } = c;
     const point = new Feature(
-      new ol.geom.Point(ol.proj.fromLonLat(coordinates)),
+      new ol.geom.Point(ol.proj.fromLonLat(c.geometry.coordinates)),
     );
+    const properties = c.properties || {};
+    const status = properties.current_status;
     point.setId(index);
     point.setProperties(
       {
-        title: c.properties.title,
-        image: c.properties.image,
-        nwrm_type: c.properties.nwrm_type,
-        measures_implemented: c.properties.measures,
-        typology_of_measures: c.properties.typology_of_measures,
-        description: c.properties.description,
-        index: index,
-        path: c.properties.path,
-        color: c.properties.nwrm_type === 'Light' ? '#50B0A4' : '#0083E0',
+        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_article: properties.nrr_article,
+        scale_of_planning: properties.scale_of_planning,
+        description: properties.description,
+        index,
+        path: properties.path,
+        color: getStatusColor(status),
       },
       false,
     );
@@ -56,89 +117,106 @@ export function getFeatures({ cases, ol }) {
   });
 }
 
-export function filterCases(cases, activeFilters, caseStudiesIds, searchInput) {
-  const data = cases.filter((_case) => {
-    let flag_searchInput = false;
-    let flag_implemented = false;
-    let flag_typology_of_measures = false;
-    let flag_case = caseStudiesIds
-      ? caseStudiesIds.includes(_case.properties.url.split('/').pop())
-      : true;
-
-    if (!searchInput) {
-      flag_searchInput = true;
-    } else {
-      if (_case.properties.title.toLowerCase().match(searchInput)) {
-        flag_searchInput = true;
-      } else if (
-        _case.properties.description.toLowerCase().match(searchInput)
-      ) {
-        flag_searchInput = true;
-      }
-    }
-
-    if (!activeFilters.measures_implemented.length) {
-      flag_implemented = true;
-    } else {
-      let measures_implemented = _case.properties.measures?.map((item) => {
-        return item['id'].toString();
-      });
+// 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, '\\$&');
+}
 
-      activeFilters.measures_implemented.forEach((filter) => {
-        if (measures_implemented?.includes(filter)) flag_implemented = true;
-      });
-    }
-
-    if (!activeFilters.typology_of_measures.length) {
-      flag_typology_of_measures = true;
-    } else {
-      let typology_of_measures = _case.properties.typology_of_measures?.map(
-        (item) => {
-          return item.toString();
-        },
-      );
-
-      activeFilters.typology_of_measures.forEach((filter) => {
-        if (typology_of_measures?.includes(filter))
-          flag_typology_of_measures = true;
-      });
-    }
-
-    return flag_case &&
-      flag_implemented &&
-      flag_typology_of_measures &&
-      flag_searchInput
-      ? _case
-      : false;
-  });
+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;
+}
 
-  return data;
+const FILTER_FIELDS = [
+  'measures_implemented',
+  'typology_of_measures',
+  'current_status',
+  'habitat_ecosystem_type',
+  'nrr_article',
+  '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 getFilters(cases) {
-  let _filters = {
-    measures_implemented: {},
-    typology_of_measures: {},
-  };
-
-  for (let key of Object.keys(cases)) {
-    const _case = cases[key];
-    let measures_implemented = _case.properties.measures;
-    measures_implemented.map((item) => {
-      if (!_filters.measures_implemented.hasOwnProperty(item['id'])) {
-        _filters.measures_implemented[item['id']] = item['title'];
-      }
-      return [];
+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)));
     });
 
-    let typology_of_measures = _case.properties.typology_of_measures;
-    typology_of_measures.map((item) => {
-      if (!_filters.typology_of_measures.hasOwnProperty(item)) {
-        _filters.typology_of_measures[item] = item;
-      }
-      return [];
+    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 _filters;
+  return filters;
 }

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

@@ -1,8 +1,22 @@
 import './mockJsdom';
 import '@testing-library/jest-dom';
-import { getFeatures, filterCases, getFilters } from './utils';
+import {
+  FALLBACK_STATUS_COLOR,
+  getFeatures,
+  getStatusColor,
+  filterCases,
+  getFilters,
+} 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');
+    expect(getStatusColor('Planned')).toBe(FALLBACK_STATUS_COLOR);
+    expect(getStatusColor('future')).toBe(FALLBACK_STATUS_COLOR);
+  });
+
   const mockCases = [
     {
       geometry: { coordinates: [0, 0] },
@@ -70,6 +84,83 @@ describe('utils.js', () => {
     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 = {
+      measures_implemented: [],
+      typology_of_measures: [],
+      current_status: [],
+      habitat_ecosystem_type: [],
+      nrr_article: [],
+      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('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_article: [{ id: 'article-1', title: 'Article 1' }],
+          scale_of_planning: 'Regional',
+        },
+      },
+      {
+        geometry: { coordinates: [0, 0] },
+        properties: {
+          title: 'future case',
+          description: '',
+          url: '/future-case',
+          current_status: 'Future',
+          ecosystem_typology: ['Forest'],
+          nrr_article: ['article-2'],
+          scale_of_planning: 'National',
+        },
+      },
+    ];
+
+    expect(
+      filterCases(cases, {
+        measures_implemented: [],
+        typology_of_measures: [],
+        current_status: ['planned'],
+        habitat_ecosystem_type: ['River'],
+        nrr_article: ['article-1'],
+        scale_of_planning: ['Regional'],
+      }),
+    ).toHaveLength(1);
+    expect(getFilters(cases).nrr_article).toEqual({
+      'article-1': 'Article 1',
+      'article-2': 'article-2',
+    });
+  });
+
   test('getFilters', () => {
     const mockCasesObject = mockCases.reduce((acc, item, index) => {
       acc[index] = item;
@@ -83,6 +174,10 @@ describe('utils.js', () => {
       typology_of_measures: {
         testsector: 'testsector',
       },
+      current_status: {},
+      habitat_ecosystem_type: {},
+      nrr_article: {},
+      scale_of_planning: {},
     });
   });
 });

package/theme/globals/eunismarinehabitat.less

@@ -22,23 +22,40 @@
   box-shadow: none;
 }
 
-.contenttype-marine_eunis_habitat .help.slate_wysiwyg p.help {
-  white-space: break-spaces;
+.is-adding-contenttype-marine_eunis_habitat {
+  .slate_wysiwyg_box {
+    background-color: white;
+    padding: 5px;
+    border: 1px solid #c7d5d8;
+  }
 }
 
-.contenttype-marine_eunis_habitat .bise-objectlist-widget p.help {
-  white-space: break-spaces;
+.contenttype-marine_eunis_habitat,
+.is-adding-contenttype-marine_eunis_habitat {
+  .help.slate_wysiwyg p.help {
+    white-space: break-spaces;
+  }
 }
 
-.contenttype-marine_eunis_habitat .eea.banner .gradient {
-  background: none;
+.is-adding-contenttype-marine_eunis_habitat,
+.contenttype-marine_eunis_habitat {
+  .bise-objectlist-widget p.help {
+    white-space: break-spaces;
+  }
+}
+
+.is-adding-contenttype-marine_eunis_habitat,
+.contenttype-marine_eunis_habitat {
+  .eea.banner .gradient {
+    background: none;
+  }
 }
 
 .contenttype-nrr_measure .eea.banner .gradient {
   background: none;
 }
 
-.bise-objectlist-widget .inline.field > .ui.grid {
+.bise-objectlist-widget .inline.field>.ui.grid {
   margin: 0;
 }
 
@@ -46,7 +63,6 @@
   color: var(--text-color-secondary, #289588);
 }
 
-.contenttype-nrr_measure
-  .top.aligned.four.wide.computer.twelve.wide.mobile.four.wide.column {
+.contenttype-nrr_measure .top.aligned.four.wide.computer.twelve.wide.mobile.four.wide.column {
   background-color: #f9f9f9;
-}
+}