@eeacms/volto-bise-policy 1.3.11 → 1.3.13

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

@@ -0,0 +1,366 @@
+import './mockJsdom';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import CaseStudyCard from './CaseStudyCard';
+
+const item = {
+  geometry: { type: 'Point', coordinates: [14.4, 50.1] },
+  properties: {
+    title: 'Restored peatlands in the Bohemian Forest',
+    path: '/catalogue/peatlands-bohemian-forest',
+    image: 'https://example.com/image.jpg',
+    current_status: 'ongoing',
+    nrr_legislation: [
+      'Article 4 - Restoration of terrestrial ecosystems',
+      'Article 11 - Restoration of agricultural ecosystems',
+      'Habitats Directive (HD)',
+    ],
+    habitat_ecosystem_type: [
+      'Inland wetlands',
+      'Forest and woodland',
+      'Grassland (pastures, semi-natural and natural grasslands)',
+    ],
+    measures: [
+      {
+        id: 'measure-a',
+        title: 'Restore degraded peatlands',
+        path: '/catalogue/measures/restore-degraded-peatlands',
+      },
+      {
+        id: 'measure-b',
+        title: 'Rewetting of drained soils',
+        path: '/catalogue/measures/re-wetting',
+      },
+      {
+        id: 'measure-c',
+        title: 'Restore rivers and floodplains',
+        path: '/catalogue/measures/restore-rivers',
+      },
+    ],
+  },
+};
+
+const renderCard = (props = {}) =>
+  render(
+    <IntlProvider locale="en">
+      <CaseStudyCard item={item} {...props} />
+    </IntlProvider>,
+  );
+
+/**
+ * jsdom does not lay anything out: fake a 300px wide list where 90px chips
+ * wrap every three per row and the "+N" trigger is 40px wide, so the two-row
+ * fit has something real to measure.
+ */
+function mockChipLayout({
+  width = 300,
+  chipWidth = 90,
+  moreWidth = 40,
+  perRow = 3,
+  gap = 8,
+  rowHeight = 24,
+} = {}) {
+  const indexOf = (element) =>
+    Array.prototype.indexOf.call(element.parentNode.children, element);
+  const descriptors = {
+    clientWidth: { get: () => width },
+    offsetWidth: {
+      get() {
+        if (!this.classList?.contains('cse-card-chip')) return 0;
+        return this.textContent.startsWith('+') ? moreWidth : chipWidth;
+      },
+    },
+    offsetTop: {
+      get() {
+        return Math.floor(indexOf(this) / perRow) * rowHeight;
+      },
+    },
+    offsetLeft: {
+      get() {
+        return (indexOf(this) % perRow) * (chipWidth + gap);
+      },
+    },
+  };
+  const original = {};
+
+  Object.entries(descriptors).forEach(([property, descriptor]) => {
+    original[property] = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      property,
+    );
+    Object.defineProperty(HTMLElement.prototype, property, {
+      configurable: true,
+      ...descriptor,
+    });
+  });
+
+  return () => {
+    Object.entries(original).forEach(([property, descriptor]) => {
+      if (descriptor) {
+        Object.defineProperty(HTMLElement.prototype, property, descriptor);
+      } else {
+        delete HTMLElement.prototype[property];
+      }
+    });
+  };
+}
+
+describe('CaseStudyCard', () => {
+  test('renders the title as a link to the case study, opening a new tab', () => {
+    renderCard();
+
+    const link = screen.getByRole('link', {
+      name: /Restored peatlands in the Bohemian Forest/,
+    });
+
+    expect(link).toHaveAttribute('href', item.properties.path);
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  test('renders the image with an empty alt (the title carries the meaning)', () => {
+    const { container } = renderCard();
+
+    const image = container.querySelector('.cse-card-media img');
+
+    expect(image).toHaveAttribute('src', item.properties.image);
+    expect(image).toHaveAttribute('alt', '');
+    // An empty alt makes the image decorative, so it is not exposed as an image
+    // in the accessibility tree: the title carries the meaning instead.
+    expect(screen.queryByRole('img')).toBeNull();
+  });
+
+  test('renders the status as a colored dot next to the title', () => {
+    renderCard();
+
+    const dot = document.querySelector('.cse-card-status-dot');
+
+    expect(dot).toHaveStyle({ backgroundColor: '#ff9933' });
+    expect(dot.closest('.cse-card-title')).not.toBeNull();
+  });
+
+  test('does not render the measure count in the meta row', () => {
+    renderCard();
+
+    expect(
+      screen.getByRole('button', { name: 'Show on map' }),
+    ).toBeInTheDocument();
+    expect(
+      within(document.querySelector('.cse-card-meta')).queryByText(
+        /NRR measures?$/,
+      ),
+    ).toBeNull();
+    expect(screen.getAllByText('3', { exact: true })).toHaveLength(1);
+  });
+
+  test('shows every ecosystem when the card cannot be measured', () => {
+    renderCard();
+
+    const list = document.querySelector(
+      '.cse-card-ecosystems:not(.cse-card-ecosystems-measure)',
+    );
+
+    item.properties.habitat_ecosystem_type.forEach((ecosystem) => {
+      expect(within(list).getByText(ecosystem)).toBeInTheDocument();
+    });
+    expect(within(list).queryByText(/^\+\d+$/)).toBeNull();
+  });
+
+  test('collapses the ecosystems that overflow two rows into a +N popup', () => {
+    const restore = mockChipLayout();
+    const ecosystems = [
+      'Coastal beaches, dunes and wetlands',
+      'Cropland',
+      'Forest and woodland',
+      'Grassland',
+      'Heathland and shrub',
+      'Inland wetlands',
+      'Rivers and lakes',
+      'Sparsely vegetated habitats',
+    ];
+
+    try {
+      render(
+        <IntlProvider locale="en">
+          <CaseStudyCard
+            item={{
+              ...item,
+              properties: {
+                ...item.properties,
+                habitat_ecosystem_type: ecosystems,
+              },
+            }}
+          />
+        </IntlProvider>,
+      );
+
+      const list = document.querySelector(
+        '.cse-card-ecosystems:not(.cse-card-ecosystems-measure)',
+      );
+      const visible = [...list.querySelectorAll('.cse-card-chip')].map(
+        (chip) => chip.textContent,
+      );
+
+      // Five chips plus the trigger still fit in two rows of three.
+      expect(visible.slice(0, 5)).toEqual(ecosystems.slice(0, 5));
+      expect(visible[5]).toMatch(/^\+3/);
+      expect(list.querySelectorAll('.cse-card-chip')).toHaveLength(6);
+
+      const trigger = screen.getByRole('button', { name: /^\+3/ });
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+      fireEvent.click(trigger);
+
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+      const dialog = screen.getByRole('dialog', {
+        name: 'More habitat/ecosystem values',
+      });
+      // Only the hidden values: the visible chips already speak for themselves.
+      ecosystems.slice(0, 5).forEach((ecosystem) => {
+        expect(within(dialog).queryByText(ecosystem)).toBeNull();
+      });
+      ecosystems.slice(5).forEach((ecosystem) => {
+        expect(within(dialog).getByText(ecosystem)).toBeInTheDocument();
+      });
+      expect(dialog.querySelectorAll('.cse-card-chip')).toHaveLength(3);
+
+      fireEvent.keyDown(document, { key: 'Escape' });
+      expect(screen.queryByRole('dialog')).toBeNull();
+    } finally {
+      restore();
+    }
+  });
+
+  test('collapses the related measures behind a bar owning the count', () => {
+    renderCard();
+
+    const toggle = screen.getByRole('button', {
+      name: /Related NRR measure\(s\)/,
+    });
+
+    expect(toggle).toHaveTextContent('Related NRR measure(s)');
+    expect(toggle).toHaveTextContent('3');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('keeps the collapsed measures panel inert and out of the tab order', () => {
+    renderCard();
+
+    const toggle = screen.getByRole('button', {
+      name: /Related NRR measure\(s\)/,
+    });
+    const panel = document.getElementById(toggle.getAttribute('aria-controls'));
+
+    expect(panel).toHaveAttribute('inert');
+    expect(panel).toHaveAttribute('data-open', 'false');
+  });
+
+  test('expands to every related measure, with no truncation', () => {
+    renderCard();
+
+    const toggle = screen.getByRole('button', {
+      name: /Related NRR measure\(s\)/,
+    });
+
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    expect(
+      document.getElementById(toggle.getAttribute('aria-controls')),
+    ).not.toHaveAttribute('inert');
+
+    item.properties.measures.forEach((measure) => {
+      expect(
+        screen.getByRole('link', { name: new RegExp(measure.title) }),
+      ).toHaveAttribute('href', measure.path);
+    });
+    expect(screen.queryByText(/\+\d+ more/)).toBeNull();
+  });
+
+  test('collapses again on a second click', () => {
+    renderCard();
+
+    const toggle = screen.getByRole('button', {
+      name: /Related NRR measure\(s\)/,
+    });
+
+    fireEvent.click(toggle);
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    expect(
+      document.getElementById(toggle.getAttribute('aria-controls')),
+    ).toHaveAttribute('inert');
+  });
+
+  test('renders the open-in-new-tab affordance next to the title', () => {
+    renderCard();
+
+    const open = screen.getByRole('link', { name: 'Open the case study' });
+
+    expect(open).toHaveAttribute('href', item.properties.path);
+    expect(open.closest('.cse-card-head')).not.toBeNull();
+    expect(
+      open.closest('.cse-card-head').querySelector('.cse-card-title'),
+    ).not.toBeNull();
+  });
+
+  test('marks the card as selected', () => {
+    renderCard({ selected: true });
+
+    expect(screen.getByRole('article')).toHaveAttribute(
+      'data-selected',
+      'true',
+    );
+  });
+
+  test('asks the map to show the case study', () => {
+    const onShowOnMap = jest.fn();
+    renderCard({ onShowOnMap });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show on map' }));
+
+    expect(onShowOnMap).toHaveBeenCalledWith(item);
+  });
+
+  test('offers to reset the map once the card is the selected one', () => {
+    const onShowOnMap = jest.fn();
+    const onResetMap = jest.fn();
+    renderCard({ selected: true, onShowOnMap, onResetMap });
+
+    expect(screen.queryByRole('button', { name: 'Show on map' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Reset map' }));
+
+    expect(onResetMap).toHaveBeenCalledWith(item);
+    expect(onShowOnMap).not.toHaveBeenCalled();
+  });
+
+  test('survives a case study with no measures, ecosystems or legislation', () => {
+    const bare = {
+      geometry: { type: 'Point', coordinates: [0, 0] },
+      properties: { title: 'Bare case', path: '/bare' },
+    };
+
+    render(
+      <IntlProvider locale="en">
+        <CaseStudyCard item={bare} />
+      </IntlProvider>,
+    );
+
+    expect(screen.getByText('Bare case')).toBeInTheDocument();
+    expect(
+      within(document.querySelector('.cse-card-meta')).queryByText(
+        /NRR measures?$/,
+      ),
+    ).toBeNull();
+    expect(
+      within(screen.getByRole('article')).queryByRole('button', {
+        name: /Related NRR measure\(s\)/,
+      }),
+    ).toBeNull();
+  });
+});

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

@@ -1,113 +1,214 @@
 import React from 'react';
-import { Grid } from 'semantic-ui-react'; // Dropdown,
+import { useIntl } from 'react-intl';
 import { addAppURL } from '@plone/volto/helpers/Url/Url';
-// import config from '@plone/volto/registry';
-import CaseStudyMap from './CaseStudyMap';
-import { ActiveFilters, CaseStudyFilters, SearchBox } from './CaseStudyFilters';
-// import CaseStudyList from './CaseStudyListing';
 
-import { filterCases, filterCasesByPath, getFilters } from './utils';
+import CaseStudyMap from './CaseStudyMapLazy';
+import CaseStudyResults from './CaseStudyResults';
+import FilterPanel from './FilterPanel';
+import {
+  EMPTY_FILTERS,
+  buildFacets,
+  clearFilters,
+  filterCases,
+  sortCases,
+} from './filters';
 import { useCases } from './hooks';
+// import { prefersReducedMotion } from './utils';
+import messages from './messages';
 
 import './styles.less';
 
+const measureIdFromLocation = () => {
+  if (typeof window === 'undefined') return null;
+
+  return new URLSearchParams(window.location.search).get('measure');
+};
+
+const withoutSelection = (filters, facet, value) => {
+  const selected = filters[facet] || [];
+
+  return {
+    ...filters,
+    [facet]: selected.includes(value)
+      ? selected.filter((item) => item !== value)
+      : [...selected, value],
+  };
+};
+
 export default function CaseStudyExplorerView(props) {
-  const cases_url = '/@@case-studies-map.arcgis.json';
-  let cases = useCases(addAppURL(cases_url));
-  const { caseStudiesIds, data } = props; // case studies from measure view
-  const { filter_path } = data || {};
-  const [selectedCase, onSelectedCase] = React.useState(null);
-  const [searchInput, setSearchInput] = React.useState('');
-  const hideFilters = caseStudiesIds ? true : false;
-
-  const [activeFilters, setActiveFilters] = React.useState({
-    nrr_legislation: [],
-    nrr_biogeographical_region: [],
-    measures_implemented: [],
-    typology_of_measures: [],
-    current_status: [],
-    habitat_ecosystem_type: [],
-    scale_of_planning: [],
-  });
-
-  const [activeItems, setActiveItems] = React.useState(cases);
-  const [filters, setFilters] = React.useState([]);
+  const intl = useIntl();
+  // const cases_url = 'http://localhost:3000/@@case-studies-map.arcgis.json';
+  const cases_url = addAppURL('/@@case-studies-map.arcgis.json');
+  const { cases, loading, error, reload } = useCases(cases_url);
+
+  const { filter_path } = props.data || {};
+  const filterPath = filter_path;
+  const [measureId] = React.useState(measureIdFromLocation);
+
+  const [filters, setFilters] = React.useState(EMPTY_FILTERS);
+  const [selectedPath, setSelectedPath] = React.useState(null);
+  const [sortBy, setSortBy] = React.useState('title');
+  const [perPage, setPerPage] = React.useState(4);
+  const [page, setPage] = React.useState(1);
+  const [focusRequest, setFocusRequest] = React.useState(null);
+  const [resetRequest, setResetRequest] = React.useState(null);
   const [map, setMap] = React.useState();
-  const pathFilteredCases = React.useMemo(
-    () => filterCasesByPath(cases, filter_path),
-    [cases, filter_path],
-  );
+  // The explorer only exists on the client (it fetches its own data and the map
+  // needs OpenLayers), but the first client render has to match the empty
+  // server output. `mounted` keeps both sides in sync: SSR and hydration
+  // render nothing, the next render shows the explorer.
+  const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
-    const _filters = getFilters(pathFilteredCases);
-    setFilters(_filters);
-  }, [pathFilteredCases, activeFilters, activeItems.length]);
+    setMounted(true);
+  }, []);
 
-  React.useEffect(() => {
-    let activeItems = filterCases(
-      cases,
-      activeFilters,
-      caseStudiesIds,
-      searchInput,
-      filter_path,
-    );
+  const narrowing = React.useMemo(
+    () => ({ filterPath, measureId }),
+    [filterPath, measureId],
+  );
+  const facets = React.useMemo(
+    () => buildFacets(cases, filters, narrowing),
+    [cases, filters, narrowing],
+  );
+  const narrowedResults = React.useMemo(
+    () => sortCases(filterCases(cases, filters, narrowing), sortBy),
+    [cases, filters, narrowing, sortBy],
+  );
+
+  // Every filter change is applied immediately: there is no Apply step.
+  const toggleFacet = React.useCallback((facet, value) => {
+    setFilters((current) => withoutSelection(current, facet, value));
+    setPage(1);
+  }, []);
+
+  const changeQuery = React.useCallback((query) => {
+    setFilters((current) => ({ ...current, query }));
+    setPage(1);
+  }, []);
+
+  const resetFilters = React.useCallback(() => {
+    setFilters(clearFilters());
+    setPage(1);
+    setSelectedPath(null);
+  }, []);
 
-    setActiveItems(activeItems);
-  }, [caseStudiesIds, activeFilters, cases, searchInput, filter_path]);
+  // Selecting a case study on the map also brings its card into view: if it
+  // lives on another page of the results, jump to that page first.
+  const selectCase = React.useCallback(
+    (path) => {
+      setSelectedPath(path);
+      if (!path) return;
 
-  if (__SERVER__) return '';
+      const index = narrowedResults.findIndex(
+        (item) => item.properties?.path === path,
+      );
+      if (index === -1) return;
+
+      setPage(Math.floor(index / perPage) + 1);
+
+      // const card = document.getElementById(
+      //   `cse-card-${encodeURIComponent(path)}`,
+      // );
+      // card?.scrollIntoView({
+      //   behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+      //   block: 'center',
+      // });
+    },
+    [narrowedResults, perPage],
+  );
+
+  const showOnMap = React.useCallback((item) => {
+    const path = item?.properties?.path;
+    if (!path) return;
+
+    setSelectedPath(path);
+    setFocusRequest({ path, nonce: Date.now() });
+    // scrollToElement('cse-map-container');
+  }, []);
+
+  // "Reset map" on an already selected card: drop the selection and send the
+  // map back to its default extent, exactly like the map's own reset button.
+  const resetMap = React.useCallback(() => {
+    setSelectedPath(null);
+    setResetRequest({ nonce: Date.now() });
+  }, []);
+
+  if (!mounted) return null;
+
+  // The explorer is empty until the backend answers, so say what is going on
+  // instead of flashing an empty map and a "no results" message.
+  if (loading) {
+    return (
+      <div className="cse-explorer">
+        <div className="cse-loading" role="status" aria-live="polite">
+          <span className="cse-loading-spinner" aria-hidden="true" />
+          {intl.formatMessage(messages.loadingCaseStudies)}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="cse-explorer">
+        <div className="cse-loading" role="alert">
+          <p className="cse-loading-message">
+            {intl.formatMessage(messages.errorCaseStudies)}
+          </p>
+          <button type="button" className="cse-loading-retry" onClick={reload}>
+            {intl.formatMessage(messages.retry)}
+          </button>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className="searchlib-block">
-      <Grid.Row>
-        {hideFilters ? null : (
-          <SearchBox
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            searchInput={searchInput}
-            setSearchInput={setSearchInput}
+    <div className="cse-explorer">
+      <FilterPanel
+        facets={facets}
+        filters={filters}
+        onToggle={toggleFacet}
+        onQueryChange={changeQuery}
+        onReset={resetFilters}
+      />
+
+      <div className="cse-layout">
+        <div className="cse-layout-map">
+          <CaseStudyMap
+            items={narrowedResults}
+            selectedPath={selectedPath}
+            onSelect={selectCase}
             map={map}
+            setMap={setMap}
+            focusRequest={focusRequest}
+            resetRequest={resetRequest}
           />
-        )}
-      </Grid.Row>
-      <Grid.Row>
-        {hideFilters ? null : (
-          <ActiveFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-          />
-        )}
-      </Grid.Row>
-      <Grid.Row stretched={true} id="cse-filter">
-        {hideFilters ? null : (
-          <CaseStudyFilters
-            filters={filters}
-            activeFilters={activeFilters}
-            setActiveFilters={setActiveFilters}
-            map={map}
+        </div>
+
+        <div className="cse-layout-results" id="cse-results">
+          <CaseStudyResults
+            items={narrowedResults}
+            selectedPath={selectedPath}
+            onShowOnMap={showOnMap}
+            onResetMap={resetMap}
+            sortBy={sortBy}
+            onSortChange={(value) => {
+              setSortBy(value);
+              setPage(1);
+            }}
+            perPage={perPage}
+            onPerPageChange={(value) => {
+              setPerPage(value);
+              setPage(1);
+            }}
+            page={page}
+            onPageChange={setPage}
+            onResetFilters={resetFilters}
           />
-        )}
-      </Grid.Row>
-      <Grid.Row>
-        {pathFilteredCases.length ? (
-          <Grid columns={12}>
-            <Grid.Column mobile={12} tablet={12} computer={12}>
-              <CaseStudyMap
-                items={pathFilteredCases}
-                activeItems={activeItems}
-                hideFilters={hideFilters}
-                selectedCase={selectedCase}
-                onSelectedCase={onSelectedCase}
-                searchInput={searchInput}
-                map={map}
-                setMap={setMap}
-              />
-            </Grid.Column>
-          </Grid>
-        ) : null}
-      </Grid.Row>
+        </div>
+      </div>
     </div>
   );
 }