@eeacms/volto-bise-policy 1.3.11 → 1.3.13

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

@@ -1,342 +0,0 @@
-import React from 'react';
-import DOMPurify from 'dompurify';
-import { withOpenLayers } from '@eeacms/volto-openlayers-map';
-
-import {
-  centerAndResetMapZoom,
-  escapeRegExp,
-  getSelectInteraction,
-  scrollToElement,
-  zoomMapToFeatures,
-} from './utils';
-
-const showPageNr = (pageNr, currentPage, numberOfPages) => {
-  // show first 5 pages
-  if (currentPage < 4 && pageNr <= 5) {
-    return true;
-  }
-
-  // show last 5 pages
-  if (numberOfPages - currentPage < 4 && numberOfPages - pageNr < 5) {
-    return true;
-  }
-
-  if (
-    currentPage >= 4 &&
-    numberOfPages - currentPage >= 4 &&
-    pageNr >= currentPage - 2 &&
-    pageNr <= currentPage + 2
-  ) {
-    return true;
-  }
-
-  return false;
-};
-
-function CaseStudyList(props) {
-  const { selectedCase, onSelectedCase, pointsSource, map, searchInput, ol } =
-    props;
-  const reSearch = searchInput
-    ? new RegExp(`\\b(${escapeRegExp(searchInput)})\\b`, 'gi')
-    : null;
-  const [currentPage, setCurrentPage] = React.useState(1);
-
-  const features = pointsSource
-    .getFeatures(selectedCase)
-    .sort((item1, item2) =>
-      item1.values_.title.localeCompare(item2.values_.title),
-    );
-  const numberOfPages = Math.ceil(features.length / 10);
-
-  const displayFatures = features.slice(
-    10 * (currentPage - 1),
-    10 * currentPage,
-  );
-
-  return displayFatures.length === 0 ? (
-    <>
-      <h3 style={{ margin: 'calc(2rem - 0.1em) 0 1rem' }}>
-        We could not find any results for your search criteria
-      </h3>
-      <ul>
-        <li>check the selected filters</li>
-      </ul>
-    </>
-  ) : (
-    <>
-      <div className="listing">
-        {selectedCase ? (
-          <div
-            className="content-box u-item listing-item result-item"
-            style={{
-              marginTop: '2em',
-              padding: 'em',
-              // border: '3px solid #f2f2f2',
-              // borderTop: '1em solid #f2f2f2',
-              paddingTop: 0,
-              backgroundColor: '#f2f2f2',
-              border: 'none',
-            }}
-          >
-            <div className="slot-top">
-              <div className="listing-body">
-                <h3 className="listing-header">
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={selectedCase.path}
-                    title={selectedCase.title}
-                    datatest-id="selected-case"
-                  >
-                    {selectedCase.title}
-                  </a>
-                </h3>
-                <p className="listing-description">
-                  {selectedCase.description}
-                </p>
-                <div className="slot-bottom">
-                  <div className="result-bottom">
-                    {/* <div className="result-info">
-                      <span className="result-info-title">Typology of measures:</span>
-                      <span>
-                        {selectedCase.typology_of_measures
-                          ? selectedCase.typology_of_measures.join(', ')
-                          : ''}
-                      </span>
-                    </div> */}
-                    {/* <div className="result-info">
-                      <span className="result-info-title">
-                        Measures implemented:
-                      </span>
-                      {selectedCase.measures_implemented.map((measure, index) => {
-                        return (
-                          <span>
-                            <a
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              href={measure.path}
-                            >
-                              {measure.title}
-                              {index !==
-                              selectedCase.measures_implemented.length - 1
-                                ? ', '
-                                : ''}
-                            </a>
-                          </span>
-                        );
-                      })}
-                    </div> */}
-                    <div
-                      className="result-info show-on-map"
-                      tabIndex="0"
-                      role="button"
-                      onKeyDown={() => {}}
-                      onClick={() => {
-                        // scroll to the map
-                        scrollToElement('search-input');
-                        // reset map zoom
-                        onSelectedCase(null);
-                        centerAndResetMapZoom({ map, ol });
-                        getSelectInteraction(map)?.getFeatures().clear();
-                      }}
-                    >
-                      <span
-                        className="result-info-title"
-                        data-testid="reset-map"
-                      >
-                        Reset map
-                      </span>
-                      <i className="icon ri-map-2-line"></i>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          displayFatures.map((item, index) => {
-            return (
-              <div className="u-item listing-item result-item" key={index}>
-                <div className="slot-top">
-                  <div className="listing-body">
-                    <h3 className="listing-header">
-                      <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href={item.values_.path}
-                        title={item.values_.title}
-                      >
-                        {item.values_.title}
-                      </a>
-                    </h3>
-                    <p
-                      className="listing-description"
-                      dangerouslySetInnerHTML={{
-                        // description is server data and may contain HTML;
-                        // sanitize the highlighted result so no scripts or
-                        // event handlers can reach the DOM
-                        __html: DOMPurify.sanitize(
-                          searchInput && reSearch && item.values_.description
-                            ? item.values_.description.replaceAll(
-                                reSearch,
-                                '<b>$1</b>',
-                              )
-                            : item.values_.description || '',
-                        ),
-                      }}
-                    ></p>
-                    <div className="slot-bottom">
-                      <div className="result-bottom">
-                        {/* <div className="result-info">
-                          <span className="result-info-title">Typology of measures:</span>
-                          <span>{item.values_.typology_of_measures.join(', ')}</span>
-                        </div> */}
-                        {/* <div className="result-info">
-                          <span className="result-info-title">
-                            Measures implemented:
-                          </span>
-
-                          {item.values_.measures_implemented.map(
-                            (measure, index) => {
-                              return (
-                                <span key={index}>
-                                  <a
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    href={measure.path}
-                                  >
-                                    {measure.title}
-                                    {index !==
-                                    item.values_.measures_implemented.length - 1
-                                      ? ', '
-                                      : ''}
-                                  </a>
-                                </span>
-                              );
-                            },
-                          )}
-                        </div> */}
-                        <div
-                          className="result-info show-on-map"
-                          tabIndex="0"
-                          role="button"
-                          onKeyDown={() => {}}
-                          onClick={() => {
-                            const selectInteraction = getSelectInteraction(map);
-                            selectInteraction?.getFeatures().clear();
-
-                            // scroll to the map
-                            scrollToElement('ol-map-container');
-
-                            zoomMapToFeatures({
-                              map,
-                              features: [item],
-                              threshold: 5000,
-                              ol,
-                            });
-                            onSelectedCase(item.values_);
-
-                            setTimeout(() => {
-                              const coords =
-                                item.values_.geometry.flatCoordinates;
-                              const pixel = map.getPixelFromCoordinate(coords);
-                              const selectedFeature =
-                                map.getFeaturesAtPixel(pixel)[0];
-                              if (selectedFeature) {
-                                selectInteraction
-                                  ?.getFeatures()
-                                  .push(selectedFeature);
-                              }
-                            }, 1100);
-                          }}
-                        >
-                          <span className="result-info-title">Show on map</span>
-                          <i className="icon ri-road-map-line"></i>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            );
-          })
-        )}
-      </div>
-      {!selectedCase ? (
-        <div className="search-body-footer">
-          <div className="ui centered grid">
-            <div className="center aligned column">
-              <div className="prev-next-paging">
-                <div className="paging-wrapper">
-                  {currentPage !== 1 ? (
-                    <button
-                      className="ui button prev double-angle"
-                      onClick={() => {
-                        setCurrentPage(1);
-                      }}
-                    ></button>
-                  ) : (
-                    ''
-                  )}
-                  {currentPage !== 1 ? (
-                    <button
-                      className="ui button prev single-angle"
-                      onClick={() => {
-                        setCurrentPage(currentPage - 1);
-                      }}
-                    ></button>
-                  ) : (
-                    ''
-                  )}
-                  {Array.from(Array(numberOfPages).keys()).map((index) => {
-                    const pageNr = index + 1;
-                    return showPageNr(pageNr, currentPage, numberOfPages) ? (
-                      <button
-                        className={
-                          'ui button pagination-item' +
-                          (currentPage === pageNr ? ' active' : '')
-                        }
-                        onClick={() => {
-                          setCurrentPage(pageNr);
-                        }}
-                        key={index}
-                      >
-                        {pageNr}
-                      </button>
-                    ) : (
-                      ''
-                    );
-                  })}
-                  {currentPage !== numberOfPages ? (
-                    <button
-                      className="ui button next single-angle"
-                      onClick={() => {
-                        setCurrentPage(currentPage + 1);
-                      }}
-                    ></button>
-                  ) : (
-                    ''
-                  )}
-                  {currentPage !== numberOfPages ? (
-                    <button
-                      className="ui button next double-angle"
-                      onClick={() => {
-                        setCurrentPage(numberOfPages);
-                      }}
-                    ></button>
-                  ) : (
-                    ''
-                  )}{' '}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        ''
-      )}
-    </>
-  );
-}
-
-export default withOpenLayers(CaseStudyList);

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

@@ -1,196 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import CaseStudyList from './CaseStudyListing';
-import {
-  centerAndResetMapZoom,
-  scrollToElement,
-  zoomMapToFeatures,
-} from './utils';
-import { createMockMap, createMockPointsSource } from './testUtils';
-
-jest.mock('@eeacms/volto-openlayers-map', () => ({
-  withOpenLayers: (Component) => Component,
-}));
-
-jest.mock('./utils', () => ({
-  ...jest.requireActual('./utils'),
-  centerAndResetMapZoom: jest.fn(),
-  scrollToElement: jest.fn(),
-  zoomMapToFeatures: jest.fn(),
-}));
-
-const mockMap = createMockMap();
-const mockPointsSource = createMockPointsSource([
-  {
-    values_: {
-      title: 'Feature 1',
-      path: '/feature1',
-      description: 'Description 1',
-      typology_of_measures: ['SectorA'],
-      measures_implemented: [{ title: 'M1', path: '/m1' }],
-      geometry: { flatCoordinates: [0, 0] },
-    },
-  },
-]);
-
-const selectedCase = {
-  title: 'Selected Title',
-  path: '/selected',
-  description: 'Selected description',
-  typology_of_measures: ['S1', 'S2'],
-  measures_implemented: [{ title: 'M1', path: '/m1' }],
-};
-
-describe('CaseStudyList', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders empty state when no features', () => {
-    const emptyPointsSource = { getFeatures: () => [] };
-    const { getByText } = render(
-      <CaseStudyList
-        selectedCase={null}
-        onSelectedCase={jest.fn()}
-        pointsSource={emptyPointsSource}
-        searchInput=""
-        ol={{}}
-      />,
-    );
-
-    expect(
-      getByText('We could not find any results for your search criteria'),
-    ).toBeInTheDocument();
-    expect(getByText('check the selected filters')).toBeInTheDocument();
-  });
-
-  it('renders selectedCase details', () => {
-    const { getByText } = render(
-      <CaseStudyList
-        selectedCase={selectedCase}
-        onSelectedCase={jest.fn()}
-        pointsSource={mockPointsSource}
-        map={mockMap}
-        searchInput=""
-        ol={{}}
-      />,
-    );
-
-    expect(getByText('Selected Title')).toBeInTheDocument();
-    expect(getByText('Selected description')).toBeInTheDocument();
-    // Note: Sectors and NWRMs sections are commented out in the component
-    // So we only check the title and description render
-  });
-
-  it('calls reset map utils when clicking Reset map', () => {
-    const { getByTestId } = render(
-      <CaseStudyList
-        selectedCase={selectedCase}
-        onSelectedCase={jest.fn()}
-        pointsSource={mockPointsSource}
-        map={mockMap}
-        searchInput=""
-        ol={{}}
-      />,
-    );
-
-    fireEvent.click(getByTestId('reset-map'));
-
-    expect(scrollToElement).toHaveBeenCalledWith('search-input');
-    expect(centerAndResetMapZoom).toHaveBeenCalledWith({
-      map: mockMap,
-      ol: {},
-    });
-  });
-
-  it('renders features and highlights search term', () => {
-    const { getByText } = render(
-      <CaseStudyList
-        selectedCase={null}
-        onSelectedCase={jest.fn()}
-        pointsSource={mockPointsSource}
-        map={mockMap}
-        searchInput="match"
-        ol={{}}
-      />,
-    );
-
-    expect(getByText('Feature 1')).toBeInTheDocument();
-    expect(getByText('Feature 1').getAttribute('href')).toBe('/feature1');
-  });
-
-  it('does not crash on regex metacharacters in search input', () => {
-    const { getByText } = render(
-      <CaseStudyList
-        selectedCase={null}
-        onSelectedCase={jest.fn()}
-        pointsSource={mockPointsSource}
-        map={mockMap}
-        searchInput="("
-        ol={{}}
-      />,
-    );
-
-    // must not throw (previously: SyntaxError from invalid RegExp)
-    expect(getByText('Feature 1')).toBeInTheDocument();
-    expect(getByText('Description 1')).toBeInTheDocument();
-  });
-
-  it('sanitizes description HTML and keeps search highlights', () => {
-    const evilPointsSource = createMockPointsSource([
-      {
-        values_: {
-          title: 'Evil Case',
-          path: '/evil',
-          description:
-            '<img src=x onerror=alert(1)> <script>alert(2)</script> a river bed',
-          typology_of_measures: ['SectorA'],
-          measures_implemented: [{ title: 'M1', path: '/m1' }],
-          geometry: { flatCoordinates: [0, 0] },
-        },
-      },
-    ]);
-
-    const { container } = render(
-      <CaseStudyList
-        selectedCase={null}
-        onSelectedCase={jest.fn()}
-        pointsSource={evilPointsSource}
-        map={mockMap}
-        searchInput="river"
-        ol={{}}
-      />,
-    );
-
-    // XSS payloads must not survive into the DOM
-    expect(container.querySelector('img[onerror]')).toBeNull();
-    expect(container.querySelector('script')).toBeNull();
-    // harmless text still renders and the highlight survives sanitization
-    expect(container.textContent).toContain('a river bed');
-    const highlight = container.querySelector('b');
-    expect(highlight).not.toBeNull();
-    expect(highlight.textContent).toBe('river');
-  });
-
-  it('calls zoomMapToFeatures and onSelectedCase when clicking Show on map', async () => {
-    const onSelectedCase = jest.fn();
-
-    const { getByText } = render(
-      <CaseStudyList
-        selectedCase={null}
-        onSelectedCase={onSelectedCase}
-        pointsSource={mockPointsSource}
-        map={mockMap}
-        searchInput=""
-        ol={{}}
-      />,
-    );
-
-    fireEvent.click(getByText('Show on map'));
-
-    expect(scrollToElement).toHaveBeenCalledWith('ol-map-container');
-    expect(zoomMapToFeatures).toHaveBeenCalled();
-    expect(onSelectedCase).toHaveBeenCalled();
-  });
-});

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import Image from '@plone/volto/components/theme/Image/Image';
-
-export default function FeatureDisplay({ feature }) {
-  return feature ? (
-    <div id="csepopup">
-      {feature.image ? (
-        <Image
-          className="csepopup-image"
-          src={feature.image}
-          alt={feature.title || ''}
-        />
-      ) : null}
-      <h3>
-        <strong>
-          <a target="_blank" rel="noopener noreferrer" href={feature.path}>
-            {feature.title}
-            <i class="ri-external-link-line"></i>
-          </a>
-        </strong>
-      </h3>
-    </div>
-  ) : null;
-}

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-import FeatureDisplay from './FeatureDisplay';
-
-describe('FeatureDisplay Component', () => {
-  it('renders correctly with feature data', () => {
-    const feature = {
-      title: 'Sample Feature',
-      path: 'https://example.com/sample-feature',
-      image: 'https://example.com/preview.jpg',
-      measures_implemented: [
-        { path: 'https://example.com/nwrm-1', title: 'NWRM 1' },
-        { path: 'https://example.com/nwrm-2', title: 'NWRM 2' },
-      ],
-      typology_of_measures: ['Sector 1', 'Sector 2'],
-    };
-
-    const { getByRole } = render(<FeatureDisplay feature={feature} />);
-
-    const titleLink = getByRole('link', { name: 'Sample Feature' });
-    expect(titleLink).toHaveAttribute(
-      'href',
-      'https://example.com/sample-feature',
-    );
-    expect(getByRole('img')).toHaveAttribute(
-      'src',
-      'https://example.com/preview.jpg',
-    );
-  });
-
-  it('does not render an image when the feature has none', () => {
-    const { queryByRole, getByRole } = render(
-      <FeatureDisplay feature={{ title: 'No image', path: '/no-image' }} />,
-    );
-
-    expect(queryByRole('img')).not.toBeInTheDocument();
-    expect(getByRole('link', { name: 'No image' })).toHaveAttribute(
-      'href',
-      '/no-image',
-    );
-  });
-
-  it('renders nothing when feature is null', () => {
-    const { container } = render(<FeatureDisplay feature={null} />);
-    expect(container.firstChild).toBeNull();
-  });
-});