@eeacms/volto-cca-policy 1.0.37 → 1.0.39

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Card, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Term } from '@eeacms/search/components';
-import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { useSearchContext, useViews } from '@eeacms/search/lib/hocs';
 import { markSelectedFacetValuesFromFilters } from '@eeacms/search/lib/search/helpers';
 import {
   CHARACTERISATION_FIELD,
@@ -70,6 +70,7 @@ const FacetOption = ({ field, option, onChange }) => {
 };
 
 const ExpandableFacetGroup = ({
+  defaultOpen = false,
   field,
   id,
   label,
@@ -78,11 +79,11 @@ const ExpandableFacetGroup = ({
   onChange,
 }) => {
   const hasSelection = options.some(({ selected }) => selected);
-  const [isOpen, setIsOpen] = React.useState(hasSelection);
+  const [isOpen, setIsOpen] = React.useState(hasSelection || defaultOpen);
 
   React.useEffect(() => {
-    if (hasSelection) setIsOpen(true);
-  }, [hasSelection]);
+    if (hasSelection || defaultOpen) setIsOpen(true);
+  }, [defaultOpen, hasSelection]);
 
   return (
     <div className="navigator-geographic-facet-group">
@@ -119,16 +120,10 @@ const ExpandableFacetGroup = ({
   );
 };
 
-const NavigatorActiveFilters = ({ filters, onRemove }) => {
+const NavigatorActiveFilters = ({ fields, filters, onRemove }) => {
   const intl = useIntl();
-  const geographicFields = [
-    CHARACTERISATION_FIELD,
-    TRANSNATIONAL_REGION_FIELD,
-    COUNTRIES_FIELD,
-  ];
   const activeFilters = filters.filter(
-    ({ field, values }) =>
-      geographicFields.includes(field) && values?.length > 0,
+    ({ field, values }) => fields.includes(field) && values?.length > 0,
   );
 
   if (!activeFilters.length) return null;
@@ -190,6 +185,8 @@ const NavigatorGeographicCoverageFacet = ({
 }) => {
   const intl = useIntl();
   const { addFilter, facets, filters = [], removeFilter } = useSearchContext();
+  const { activeViewId } = useViews();
+  const isMapView = activeViewId === 'map';
   const transnationalOptions = getFacetOptions(
     facets,
     filters,
@@ -219,6 +216,7 @@ const NavigatorGeographicCoverageFacet = ({
     }
 
     clearFilter(CHARACTERISATION_FIELD);
+    if (isMapView) clearFilter(TRANSNATIONAL_REGION_FIELD);
     addFilter(field, option.value, 'any');
   };
 
@@ -226,25 +224,28 @@ const NavigatorGeographicCoverageFacet = ({
     <fieldset
       className={`sui-facet searchlib-multiterm-facet navigator-geographic-facet ${className}`}
     >
-      <div className="sui-multi-checkbox-facet navigator-geographic-facet-direct-options">
-        {options.map((option) => {
-          const directOption = {
-            ...option,
-            selected:
-              option.selected || selectedDirectValues.includes(option.value),
-          };
+      {!isMapView && (
+        <div className="sui-multi-checkbox-facet navigator-geographic-facet-direct-options">
+          {options.map((option) => {
+            const directOption = {
+              ...option,
+              selected:
+                option.selected || selectedDirectValues.includes(option.value),
+            };
 
-          return (
-            <FacetOption
-              key={valueAsText(option.value)}
-              field={CHARACTERISATION_FIELD}
-              option={directOption}
-              onChange={updateDirectFilter}
-            />
-          );
-        })}
-      </div>
+            return (
+              <FacetOption
+                key={valueAsText(option.value)}
+                field={CHARACTERISATION_FIELD}
+                option={directOption}
+                onChange={updateDirectFilter}
+              />
+            );
+          })}
+        </div>
+      )}
       <ExpandableFacetGroup
+        defaultOpen={isMapView}
         field={COUNTRIES_FIELD}
         id="navigator-geographic-countries"
         label={intl.formatMessage(countriesLabel)}
@@ -252,17 +253,24 @@ const NavigatorGeographicCoverageFacet = ({
         options={countryOptions}
         onChange={(option) => updateChildFilter(COUNTRIES_FIELD, option)}
       />
-      <ExpandableFacetGroup
-        field={TRANSNATIONAL_REGION_FIELD}
-        id="navigator-geographic-transnational-regions"
-        label={intl.formatMessage(transnationalRegionsLabel)}
-        emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
-        options={transnationalOptions}
-        onChange={(option) =>
-          updateChildFilter(TRANSNATIONAL_REGION_FIELD, option)
-        }
-      />
+      {!isMapView && (
+        <ExpandableFacetGroup
+          field={TRANSNATIONAL_REGION_FIELD}
+          id="navigator-geographic-transnational-regions"
+          label={intl.formatMessage(transnationalRegionsLabel)}
+          emptyMessage={intl.formatMessage(messages.noOptionsAvailable)}
+          options={transnationalOptions}
+          onChange={(option) =>
+            updateChildFilter(TRANSNATIONAL_REGION_FIELD, option)
+          }
+        />
+      )}
       <NavigatorActiveFilters
+        fields={[
+          CHARACTERISATION_FIELD,
+          TRANSNATIONAL_REGION_FIELD,
+          COUNTRIES_FIELD,
+        ]}
         filters={filters}
         onRemove={(field, value, type) => removeFilter(field, value, type)}
       />

package/src/components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { useSearchContext } from '@eeacms/search/lib/hocs';
+import { useSearchContext, useViews } from '@eeacms/search/lib/hocs';
 import NavigatorGeographicCoverageFacet from './NavigatorGeographicCoverageFacet';
 import {
   CHARACTERISATION_FIELD,
@@ -15,9 +15,11 @@ jest.mock('@eeacms/search/components', () => ({
 }));
 jest.mock('@eeacms/search/lib/hocs', () => ({
   useSearchContext: jest.fn(),
+  useViews: jest.fn(),
 }));
 
 const renderFacet = ({
+  activeViewId = 'listing',
   detailedOptions = true,
   filters = [],
   onRemove = jest.fn(),
@@ -26,6 +28,8 @@ const renderFacet = ({
   const addFilter = jest.fn();
   const removeFilter = jest.fn();
 
+  useViews.mockReturnValue({ activeViewId });
+
   useSearchContext.mockReturnValue({
     addFilter,
     removeFilter,
@@ -190,4 +194,64 @@ describe('NavigatorGeographicCoverageFacet', () => {
       screen.getByRole('button', { name: 'Transnational regions' }),
     ).toBeEnabled();
   });
+
+  it('shows only countries in the map view', () => {
+    renderFacet({ activeViewId: 'map' });
+
+    expect(screen.queryByLabelText('Europe')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Global')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Countries' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+    expect(screen.getByLabelText('Germany')).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Transnational regions' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('clears hidden geographic filters when selecting a country on the map', () => {
+    const { addFilter, removeFilter } = renderFacet({
+      activeViewId: 'map',
+      filters: [
+        {
+          field: TRANSNATIONAL_REGION_FIELD,
+          values: ['Alpine Space'],
+          type: 'any',
+        },
+      ],
+    });
+
+    fireEvent.click(screen.getByLabelText('Germany'));
+
+    expect(removeFilter).toHaveBeenCalledWith(
+      CHARACTERISATION_FIELD,
+      null,
+      'any',
+    );
+    expect(removeFilter).toHaveBeenCalledWith(
+      TRANSNATIONAL_REGION_FIELD,
+      null,
+      'any',
+    );
+    expect(addFilter).toHaveBeenCalledWith(COUNTRIES_FIELD, 'Germany', 'any');
+  });
+
+  it('shows hidden active geographic filters in the map view', () => {
+    renderFacet({
+      activeViewId: 'map',
+      detailedOptions: false,
+      filters: [
+        {
+          field: CHARACTERISATION_FIELD,
+          values: ['Europe'],
+          type: 'any',
+        },
+      ],
+    });
+
+    expect(screen.queryByLabelText('Europe')).not.toBeInTheDocument();
+    expect(screen.getByText('Active filters:')).toBeInTheDocument();
+    expect(screen.getByText('Europe')).toBeInTheDocument();
+  });
 });

package/src/components/Search/NavigatorCatalogue/utils.js

@@ -3,10 +3,15 @@
  * Used by the map view to color-code countries
  */
 export const mapColorScale = [
-  { minimum: 10, label: '10 or more', color: '#0F6B3F' },
-  { minimum: 7, label: '7 - 9', color: '#007B6C' },
-  { minimum: 4, label: '4 - 6', color: '#84C79A' },
-  { minimum: 1, label: '1 - 3', color: '#C2E3CD' },
+  {
+    minimum: 4,
+    label: '4 or more',
+    messageKey: 'fourOrMore',
+    color: '#0F6B3F',
+  },
+  { minimum: 3, label: '3', color: '#007B6C' },
+  { minimum: 2, label: '2', color: '#84C79A' },
+  { minimum: 1, label: '1', color: '#C2E3CD' },
   { minimum: 0, label: 'None', color: '#E1E7DF' },
 ];
 
@@ -61,6 +66,30 @@ export const filterCountryCounts = (countryCounts, filters) => {
   );
 };
 
+const mapIncompatibleGeographicFields = new Set([
+  'cca_navigator_geographic_scope',
+  'cca_geographic_transnational_region.keyword',
+]);
+
+export const hasMapIncompatibleGeographicSelection = (filters) =>
+  Boolean(
+    filters?.find(
+      ({ field, values }) =>
+        mapIncompatibleGeographicFields.has(field) && values?.length > 0,
+    ),
+  );
+
+export const clearMapIncompatibleGeographicFilters = (searchContext) => {
+  searchContext?.filters
+    ?.filter(
+      ({ field, values }) =>
+        mapIncompatibleGeographicFields.has(field) && values?.length > 0,
+    )
+    .forEach(({ field, type = 'any' }) =>
+      searchContext.removeFilter(field, null, type),
+    );
+};
+
 export const setCountryFilter = (searchContext, countryName) => {
   searchContext?.setFilter(
     'cca_geographic_countries.keyword',
@@ -72,10 +101,13 @@ export const setCountryFilter = (searchContext, countryName) => {
 /**
  * Legend items for the map view
  */
-export const mapLegendItems = mapColorScale.map(({ label, color }) => ({
-  label,
-  color,
-}));
+export const mapLegendItems = mapColorScale.map(
+  ({ label, messageKey, color }) => ({
+    label,
+    messageKey,
+    color,
+  }),
+);
 
 const unwrapRawValue = (value) =>
   value?.raw === undefined ? value : value.raw;

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.test.jsx

@@ -268,3 +268,70 @@ describe('NavigatorGuideContentView climate hazards', () => {
     ).toHaveTextContent('Flooding');
   });
 });
+
+describe('NavigatorGuideContentView actions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSelector.mockReturnValue('en');
+    useSearchDriver.mockReturnValue(undefined);
+    useGuideFacetOptions.mockReturnValue({
+      'cca_adaptation_sectors.keyword': ['Water'],
+    });
+  });
+
+  it('removes a selected option from the current step', () => {
+    const removeFilter = jest.fn();
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useHistory.mockReturnValue({ push: jest.fn() });
+
+    renderGuide(
+      { title: 'Guide tool', href: '/tools/guide-tool' },
+      {
+        removeFilter,
+        facets: {
+          'cca_adaptation_sectors.keyword': [
+            { data: [{ value: 'Water', count: 4 }] },
+          ],
+        },
+      },
+    );
+
+    fireEvent.click(screen.getByText('Water'));
+
+    expect(removeFilter).toHaveBeenCalledWith(
+      'cca_adaptation_sectors.keyword',
+      'Water',
+      'all',
+    );
+  });
+
+  it('opens catalogue results with only supported Guide filters', () => {
+    const history = { push: jest.fn() };
+    useAtom.mockReturnValue([0, jest.fn()]);
+    useHistory.mockReturnValue(history);
+
+    renderGuide(
+      { title: 'Guide tool', href: '/tools/guide-tool' },
+      {
+        filters: [
+          {
+            field: 'cca_adaptation_sectors.keyword',
+            values: ['Water'],
+            type: 'all',
+          },
+          { field: 'unrelated.keyword', values: ['Ignored'], type: 'any' },
+        ],
+      },
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Skip to results' }));
+
+    expect(history.push).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pathname: '/en/navigator/tool-catalogue',
+        search: expect.any(String),
+      }),
+    );
+    expect(history.push.mock.calls[0][0].search).not.toContain('unrelated');
+  });
+});

package/src/components/theme/CompareTools/CompareToolsView.test.jsx

@@ -12,6 +12,7 @@ import { useAtom } from 'jotai';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import CompareToolsView from './CompareToolsView';
+import { exportComparisonTable } from '../../Search/NavigatorCatalogue/utils';
 import { fetchResultsByUid } from './utils';
 
 jest.mock('jotai', () => ({
@@ -62,6 +63,11 @@ jest.mock('./utils', () => ({
   getPathname: (url) => url?.split('?')[0] || '',
 }));
 
+jest.mock('../../Search/NavigatorCatalogue/utils', () => ({
+  ...jest.requireActual('../../Search/NavigatorCatalogue/utils'),
+  exportComparisonTable: jest.fn(),
+}));
+
 describe('CompareToolsView', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -246,4 +252,57 @@ describe('CompareToolsView', () => {
     expect(thumbnail.querySelector('img')).not.toBeInTheDocument();
     expect(thumbnail.querySelector('.ri-file-line')).toBeInTheDocument();
   });
+
+  it('removes a tool from the selection and URL', async () => {
+    const setSelectedTools = jest.fn();
+    const history = { push: jest.fn() };
+    useAtom.mockReturnValue([[], setSelectedTools]);
+    useHistory.mockReturnValue(history);
+
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    await screen.findByRole('table', { name: 'Compare tools' });
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'Remove Tool one from comparison',
+      }),
+    );
+
+    const updateSelection = setSelectedTools.mock.calls[0][0];
+    expect(updateSelection([{ uid: 'one' }, { uid: 'two' }])).toEqual([
+      { uid: 'two' },
+    ]);
+    expect(history.push).toHaveBeenCalledWith({
+      pathname: '/en/navigator/compare',
+      search: '?uid=two',
+      hash: '',
+      state: {},
+    });
+  });
+
+  it('exports comparison data with only applicable table options', async () => {
+    render(
+      <IntlProvider locale="en">
+        <CompareToolsView />
+      </IntlProvider>,
+    );
+    await screen.findByRole('table', { name: 'Compare tools' });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Export table' }));
+
+    expect(exportComparisonTable).toHaveBeenCalledTimes(1);
+    const [exportedTools] = exportComparisonTable.mock.calls[0];
+    expect(exportedTools[0].comparisonOptions).toEqual(
+      expect.objectContaining({
+        cca_type_of_outputs: ['Maps and graphs'],
+        cca_adaptation_support_cycle_step: [
+          'Step 2: Assessing Climate Change Risks and Vulnerabilities',
+        ],
+      }),
+    );
+  });
 });

package/theme/globals/navigator.less

@@ -620,11 +620,89 @@
 }
 
 .navigator-catalogue-map-loading {
-  text-align: center;
   display: flex;
   flex-direction: column;
   gap: 1em;
+  text-align: center;
+}
+
+.navigator-catalogue-map-state {
+  position: relative;
+  min-height: 600px;
+
+  .navigator-catalogue-map-content {
+    transition:
+      filter 0.2s ease,
+      opacity 0.2s ease;
+  }
+
+  &.is-disabled .navigator-catalogue-map-content {
+    filter: grayscale(35%);
+    opacity: 0.4;
+  }
+}
+
+.navigator-catalogue-map-overlay {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: fade(#fff, 55%);
+  inset: 0;
+}
+
+.navigator-catalogue-map-notice {
+  display: flex;
+  width: 100%;
+  max-width: 700px;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  border: 1px solid fade(#dce7ee, 80%);
+  background-color: #fff;
+  box-shadow: 0 10px 28px fade(#dce7ee, 18%);
+  cursor: default;
+  text-align: center;
+
+  // .map-notice-icon {
+  //   display: inline-flex;
+  //   width: 72px;
+  //   height: 72px;
+  //   align-items: center;
+  //   justify-content: center;
+  //   border-radius: 50%;
+  //   background: @secondaryColor;
+  //   color: #fff;
+
+  //   i.icon {
+  //     width: auto;
+  //     height: auto;
+  //     margin: 0 !important;
+  //     font-size: 2rem;
+  //     line-height: 1;
+  //   }
+  // }
+
+  h4 {
+    margin: 0 0 0.75rem;
+  }
+
+  p {
+    max-width: 620px;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+
+  .ui.button.map-notice-clear-button {
+    margin: 1.5rem 0 0;
+  }
 }
+
 .navigator-catalogue-map-tooltip {
   position: absolute;
   z-index: 1000;
@@ -678,7 +756,11 @@
       display: inline-block;
       width: 16px;
       height: 16px;
+      box-sizing: border-box;
       flex-shrink: 0;
+      border: 1px solid color-mix(in srgb, var(--legend-color) 92%, black 8%);
+      border-radius: 2px;
+      background-color: var(--legend-color);
     }
   }
 }