@eeacms/volto-bise-policy 1.3.11 → 1.3.13

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

@@ -0,0 +1,181 @@
+import './mockJsdom';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import FilterPanel from './FilterPanel';
+import { EMPTY_FILTERS } from './filters';
+
+const facets = {
+  legislation: [
+    {
+      value: 'Article 4 - Terrestrial',
+      label: 'Article 4 - Terrestrial',
+      count: 20,
+    },
+  ],
+  ecosystem: [{ value: 'Grassland', label: 'Grassland', count: 18 }],
+  bioregion: [{ value: 'Atlantic', label: 'Atlantic', count: 30 }],
+  scale: [{ value: 'National Scale', label: 'National Scale', count: 25 }],
+  status: [
+    { value: 'planned', label: 'planned', count: 12 },
+    { value: 'ongoing', label: 'ongoing', count: 74 },
+    { value: 'completed', label: 'completed', count: 42 },
+  ],
+};
+
+const renderPanel = (props = {}) =>
+  render(
+    <IntlProvider locale="en">
+      <FilterPanel
+        facets={facets}
+        filters={EMPTY_FILTERS}
+        onToggle={jest.fn()}
+        onQueryChange={jest.fn()}
+        onReset={jest.fn()}
+        {...props}
+      />
+    </IntlProvider>,
+  );
+
+describe('FilterPanel', () => {
+  test('renders the title, the search field and every facet', () => {
+    renderPanel();
+
+    expect(screen.getByText('Filter and explore')).toBeInTheDocument();
+    expect(
+      screen.getByRole('searchbox', { name: /Search measures and typology/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Measure or typology/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Legislation/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Habitat\/ecosystem/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Biogeographical region/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Scale of planning/i }),
+    ).toBeInTheDocument();
+  });
+
+  test('renders no Apply button - changes take effect immediately', () => {
+    renderPanel();
+
+    expect(
+      screen.queryByRole('button', { name: /Apply filters/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText(/Filters changed/)).not.toBeInTheDocument();
+  });
+
+  test('renders the three status toggles with counts, nothing pressed', () => {
+    renderPanel();
+
+    expect(screen.getByRole('button', { name: /Planned/ })).toHaveAttribute(
+      'aria-pressed',
+      'false',
+    );
+    expect(screen.getByRole('button', { name: /Ongoing/ })).toHaveTextContent(
+      '74',
+    );
+    expect(
+      screen.getByRole('button', { name: /Completed/ }),
+    ).toBeInTheDocument();
+  });
+
+  test('reports free-text searches through onQueryChange', () => {
+    const onQueryChange = jest.fn();
+    renderPanel({ onQueryChange });
+
+    fireEvent.change(
+      screen.getByRole('searchbox', { name: /Search measures and typology/i }),
+      { target: { value: 'restore rivers' } },
+    );
+
+    expect(onQueryChange).toHaveBeenCalledWith('restore rivers');
+  });
+
+  test('offers a clear button only while the search has a value', () => {
+    const onQueryChange = jest.fn();
+    const { rerender } = renderPanel();
+    expect(
+      screen.queryByRole('button', { name: 'Clear the search' }),
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <IntlProvider locale="en">
+        <FilterPanel
+          facets={facets}
+          filters={{ ...EMPTY_FILTERS, query: 'peat' }}
+          onToggle={jest.fn()}
+          onQueryChange={onQueryChange}
+          onReset={jest.fn()}
+        />
+      </IntlProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear the search' }));
+
+    expect(onQueryChange).toHaveBeenCalledWith('');
+  });
+
+  test('toggles a status filter through onToggle', () => {
+    const onToggle = jest.fn();
+    renderPanel({ onToggle });
+
+    fireEvent.click(screen.getByRole('button', { name: /Planned/ }));
+
+    expect(onToggle).toHaveBeenCalledWith('status', 'planned');
+  });
+
+  test('marks a selected status as pressed', () => {
+    renderPanel({ filters: { ...EMPTY_FILTERS, status: ['ongoing'] } });
+
+    expect(screen.getByRole('button', { name: /Ongoing/ })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    );
+  });
+
+  test('opens a dropdown and toggles an option', () => {
+    const onToggle = jest.fn();
+    renderPanel({ onToggle });
+
+    fireEvent.click(screen.getByRole('button', { name: /Legislation/i }));
+    fireEvent.click(screen.getByLabelText(/Article 4 - Terrestrial/));
+
+    expect(onToggle).toHaveBeenCalledWith(
+      'legislation',
+      'Article 4 - Terrestrial',
+    );
+  });
+
+  test('disables Reset when no filter is selected', () => {
+    renderPanel();
+    expect(
+      screen.getByRole('button', { name: /Reset filters/ }),
+    ).toBeDisabled();
+  });
+
+  test('enables Reset as soon as one filter is selected', () => {
+    renderPanel({ filters: { ...EMPTY_FILTERS, status: ['planned'] } });
+    expect(screen.getByRole('button', { name: /Reset filters/ })).toBeEnabled();
+  });
+
+  test('calls onReset', () => {
+    const onReset = jest.fn();
+    renderPanel({
+      filters: { ...EMPTY_FILTERS, status: ['planned'] },
+      onReset,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /Reset filters/ }));
+
+    expect(onReset).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from './messages';
+
+const range = (from, to) =>
+  Array.from({ length: to - from + 1 }, (_, index) => from + index);
+
+/**
+ * Page numbers to show: all of them when the list is short, otherwise first,
+ * last and the neighbours of the current page, with ellipsis markers.
+ */
+export function paginationItems(page, pageCount) {
+  if (pageCount <= 7) return range(1, pageCount);
+
+  const items = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(pageCount - 1, page + 1);
+
+  if (start > 2) items.push('start-ellipsis');
+  items.push(...range(start, end));
+  if (end < pageCount - 1) items.push('end-ellipsis');
+  items.push(pageCount);
+
+  return items;
+}
+
+export default function Pagination({ page, pageCount, onPageChange }) {
+  const intl = useIntl();
+  if (pageCount < 1) return null;
+
+  return (
+    <nav
+      className="cse-pagination"
+      aria-label={intl.formatMessage(messages.pagination)}
+    >
+      <button
+        type="button"
+        className="cse-pagination-step"
+        onClick={() => onPageChange(page - 1)}
+        disabled={page <= 1}
+        aria-label={intl.formatMessage(messages.previousPage)}
+      >
+        <i className="icon ri-arrow-left-s-line" aria-hidden="true" />
+      </button>
+
+      {paginationItems(page, pageCount).map((item) =>
+        typeof item === 'number' ? (
+          <button
+            type="button"
+            key={item}
+            className="cse-pagination-page"
+            aria-current={item === page ? 'page' : undefined}
+            aria-label={intl.formatMessage(messages.pageNumber, { page: item })}
+            onClick={() => onPageChange(item)}
+          >
+            {item}
+          </button>
+        ) : (
+          <span
+            className="cse-pagination-ellipsis"
+            key={item}
+            aria-hidden="true"
+          >
+            …
+          </span>
+        ),
+      )}
+
+      <button
+        type="button"
+        className="cse-pagination-step"
+        onClick={() => onPageChange(page + 1)}
+        disabled={page >= pageCount}
+        aria-label={intl.formatMessage(messages.nextPage)}
+      >
+        <i className="icon ri-arrow-right-s-line" aria-hidden="true" />
+      </button>
+    </nav>
+  );
+}

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

@@ -0,0 +1,350 @@
+/**
+ * Case study facet model.
+ *
+ * Pure functions behind the explorer's filter panel: normalising payload
+ * values, free-text search over measures and typology, building facet options
+ * with counts, applying a set of filters and ordering the results. Kept free of React and of the map so the behaviour
+ * can be tested without a browser.
+ *
+ * See docs/adr/0002-case-study-explorer-filter-model.md.
+ */
+
+/**
+ * Facets offered as dropdowns. The measures and the typology of measures are
+ * not facets any more: they are searched as free text (`query`), see
+ * `caseMatchesQuery`.
+ */
+export const FACET_NAMES = [
+  'legislation',
+  'ecosystem',
+  'bioregion',
+  'scale',
+  'status',
+];
+
+export const EMPTY_FILTERS = Object.freeze({
+  ...FACET_NAMES.reduce((accumulator, name) => {
+    accumulator[name] = [];
+    return accumulator;
+  }, {}),
+  query: '',
+});
+
+// The backend renamed several fields over time: the ecosystem facet was
+// serialised as `ecosystem_typology`, later as `nrr_habitat_ecosystem_type`,
+// and the map endpoint currently emits `habitat_ecosystem_type`. Accept all of
+// them so the card and the facet do not silently render empty.
+const FIELD_ALIASES = {
+  ecosystem: [
+    'habitat_ecosystem_type',
+    'nrr_habitat_ecosystem_type',
+    'ecosystem_typology',
+  ],
+  scale: ['scale_of_planning', 'nrr_scale_of_planning'],
+};
+
+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.code ??
+        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.code ??
+        value.value ??
+        value,
+    );
+  }
+
+  return String(value);
+}
+
+const MEASURE_CODE_PREFIX = /^([A-Za-z]+)/;
+
+/**
+ * Turn a typology choice label ("NRPM_001 - MA01 - Prevent conversion ...")
+ * into its structured parts. The backend sends `typology` already split; this
+ * is the fallback for payloads that only carry the legacy string list.
+ */
+export function toTypologyEntry(label) {
+  const text = String(label ?? '').trim();
+  const parts = text.split(' - ', 3).map((part) => part.trim());
+
+  if (parts.length < 2 || !(parts[0] && parts[1])) {
+    return { code: text, family: '', title: text };
+  }
+
+  const [code, measureCode] = parts;
+  const title = parts.length === 3 && parts[2] ? parts[2] : text;
+  const family = MEASURE_CODE_PREFIX.exec(measureCode);
+
+  return { code, family: family ? family[1] : '', title };
+}
+
+/**
+ * Raw values of one facet for one case study's properties. Returns the
+ * payload values (strings or objects), never codes or labels.
+ */
+export function getFacetValues(properties, facetName) {
+  const data = properties || {};
+
+  switch (facetName) {
+    case 'measures':
+      return asValues(data.measures);
+    case 'typology':
+      return asValues(data.typology)?.length
+        ? asValues(data.typology)
+        : asValues(data.typology_of_measures).map(toTypologyEntry);
+    case 'legislation':
+      return asValues(data.nrr_legislation);
+    case 'ecosystem':
+      return asValues(getCaseProperty(data, 'ecosystem'));
+    case 'bioregion':
+      return asValues(data.nrr_biogeographical_region);
+    case 'scale':
+      return asValues(getCaseProperty(data, 'scale'));
+    case 'status':
+      return asValues(data.current_status);
+    default:
+      return [];
+  }
+}
+
+const normalizeSearch = (value) =>
+  String(value ?? '')
+    .trim()
+    .toLowerCase();
+
+/**
+ * Everything a free-text search may match on: the case study's implemented
+ * measures (title, id, path) and its typology of measures (title, code,
+ * family). Rendered as one lower-cased haystack so a query can mix both.
+ */
+export function getSearchText(properties) {
+  const measures = getFacetValues(properties, 'measures').flatMap((measure) =>
+    measure && typeof measure === 'object'
+      ? [measure.title, measure.id, measure.path]
+      : [measure],
+  );
+  const typology = getFacetValues(properties, 'typology').flatMap((entry) => [
+    valueLabel(entry),
+    valueCode(entry),
+    entry?.family,
+    entry?.title,
+  ]);
+
+  return [measures, typology].flat().filter(Boolean).join(' ').toLowerCase();
+}
+
+/**
+ * Free-text filter over the measures implemented and the typology of
+ * measures. Whitespace separates terms and every term has to appear, so
+ * "restore rivers" finds a case whose measure title contains both words.
+ */
+export function caseMatchesQuery(properties, query) {
+  const terms = normalizeSearch(query).split(/\s+/).filter(Boolean);
+  if (!terms.length) return true;
+
+  const haystack = getSearchText(properties);
+
+  return terms.every((term) => haystack.includes(term));
+}
+
+export function caseMatchesFacet(properties, facetName, selected) {
+  if (!selected?.length) return true;
+
+  const values = getFacetValues(properties, facetName).map(valueCode);
+
+  return selected.some((choice) => values.includes(String(choice)));
+}
+
+export function filterCasesByPath(cases, filterPath) {
+  const path = filterPath?.trim();
+  if (!path) return cases;
+
+  return cases.filter((item) =>
+    String(item.properties?.path || '').includes(path),
+  );
+}
+
+/**
+ * Apply the free-text query and every facet (OR inside a facet, AND between
+ * facets), optionally narrowed to a path or to the case studies implementing
+ * one measure.
+ */
+export function filterCases(cases, filters, options = {}) {
+  const { filterPath, measureId } = options || {};
+  const active = filters || EMPTY_FILTERS;
+
+  return filterCasesByPath(cases, filterPath).filter((item) => {
+    const properties = item.properties || {};
+
+    if (measureId) {
+      const measures = getFacetValues(properties, 'measures').map(valueCode);
+      if (!measures.includes(String(measureId))) return false;
+    }
+
+    if (!caseMatchesQuery(properties, active.query)) return false;
+
+    return FACET_NAMES.every((facetName) =>
+      caseMatchesFacet(properties, facetName, active[facetName]),
+    );
+  });
+}
+
+/**
+ * How many cases each value of a facet would match, given the *other* facets
+ * currently selected. A facet does not narrow itself, otherwise a value would
+ * always read as its own selection count.
+ */
+export function countFacetValues(cases, filters, facetName, options = {}) {
+  const otherFilters = FACET_NAMES.reduce((accumulator, name) => {
+    accumulator[name] = name === facetName ? [] : filters?.[name] || [];
+    return accumulator;
+  }, {});
+  otherFilters.query = filters?.query || '';
+
+  const visible = filterCases(cases, otherFilters, options);
+
+  return visible.reduce((counts, item) => {
+    getFacetValues(item.properties, facetName).forEach((value) => {
+      const code = valueCode(value);
+      counts[code] = (counts[code] || 0) + 1;
+    });
+
+    return counts;
+  }, {});
+}
+
+function collectFacetIndex(cases, facetName) {
+  const index = new Map();
+
+  (cases || []).forEach((item) => {
+    getFacetValues(item.properties, facetName).forEach((value) => {
+      const code = valueCode(value);
+      if (index.has(code)) return;
+
+      index.set(code, {
+        value: code,
+        label: valueLabel(value),
+        ...(facetName === 'typology' && value?.family
+          ? { family: value.family }
+          : {}),
+      });
+    });
+  });
+
+  return index;
+}
+
+/**
+ * Facet options (label, count, typology family) for every facet, ordered by
+ * label. Only values present in the data are offered: the typology facet
+ * alone has 162 possible codes.
+ */
+export function buildFacets(cases, filters = EMPTY_FILTERS, options = {}) {
+  return FACET_NAMES.reduce((facets, facetName) => {
+    const index = collectFacetIndex(cases, facetName);
+    const counts = countFacetValues(cases, filters, facetName, options);
+
+    facets[facetName] = Object.entries(counts)
+      .map(([value, count]) => ({
+        value,
+        label: index.get(value)?.label ?? value,
+        ...(index.get(value)?.family
+          ? { family: index.get(value).family }
+          : {}),
+        count,
+      }))
+      .sort((first, second) => first.label.localeCompare(second.label));
+
+    return facets;
+  }, {});
+}
+
+export function hasActiveFilters(filters) {
+  return (
+    Boolean(filters?.query?.trim()) ||
+    FACET_NAMES.some((name) => (filters?.[name] || []).length > 0)
+  );
+}
+
+export function clearFilters() {
+  return {
+    ...FACET_NAMES.reduce((cleared, name) => {
+      cleared[name] = [];
+      return cleared;
+    }, {}),
+    query: '',
+  };
+}
+
+function effectiveTime(item) {
+  const time = Date.parse(item.properties?.effective ?? '');
+  return Number.isNaN(time) ? null : time;
+}
+
+export function sortCases(cases, sortBy = 'title') {
+  const sorted = [...(cases || [])];
+
+  if (sortBy === 'newest') {
+    return sorted.sort((first, second) => {
+      const firstTime = effectiveTime(first);
+      const secondTime = effectiveTime(second);
+      if (firstTime === null && secondTime === null) return 0;
+      if (firstTime === null) return 1;
+      if (secondTime === null) return -1;
+      return secondTime - firstTime;
+    });
+  }
+
+  return sorted.sort((first, second) =>
+    String(first.properties?.title || '').localeCompare(
+      String(second.properties?.title || ''),
+    ),
+  );
+}
+
+const NRR_ARTICLE_PREFIX = /^article\b/i;
+
+/**
+ * The card shows how many NRR articles a case study cites. The payload stores
+ * them in `nrr_legislation`, mixed with directives (Habitats, Birds), which
+ * are not NRR articles and are shown separately.
+ */
+export function getArticleInfo(properties) {
+  const legislation = asValues(properties?.nrr_legislation).map(String);
+
+  return {
+    articles: legislation.filter((value) => NRR_ARTICLE_PREFIX.test(value)),
+    directives: legislation.filter((value) => !NRR_ARTICLE_PREFIX.test(value)),
+    count: legislation.filter((value) => NRR_ARTICLE_PREFIX.test(value)).length,
+  };
+}