@eeacms/volto-cca-policy 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -0,0 +1,224 @@
+import React from 'react';
+import { Checkbox, Icon, Popup } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
+import ResultContext from '@eeacms/search/components/Result/ResultContext';
+import {
+  getCompareToolTitle,
+  getCompareToolUid,
+  useCompareTools,
+} from '../../theme/CompareTools/utils';
+
+const messages = defineMessages({
+  sector: {
+    id: 'Sector',
+    defaultMessage: 'Sector',
+  },
+  hazard: {
+    id: 'Hazard',
+    defaultMessage: 'Hazard',
+  },
+  cycle: {
+    id: 'Cycle',
+    defaultMessage: 'Cycle',
+  },
+  license: {
+    id: 'License',
+    defaultMessage: 'License',
+  },
+  type: {
+    id: 'Type',
+    defaultMessage: 'Type',
+  },
+  compare: {
+    id: 'Compare',
+    defaultMessage: 'Compare',
+  },
+  viewTool: {
+    id: 'View tool',
+    defaultMessage: 'View tool',
+  },
+});
+
+const asArray = (value) => {
+  if (!value) return [];
+  const raw = value.raw !== undefined ? value.raw : value;
+  if (!raw) return [];
+  return Array.isArray(raw) ? raw.filter(Boolean) : [raw].filter(Boolean);
+};
+
+const publicationDateFormatter = new Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  year: '2-digit',
+  timeZone: 'UTC',
+});
+
+const TagGroup = ({ typeLabel, values, type }) => {
+  const visible = values.slice(0, 3);
+  const hidden = values.slice(3);
+  const remaining = values.length - visible.length;
+
+  return (
+    <div className="navigator-catalogue-tags">
+      {visible.map((value) => (
+        <span key={`${type}-${value}`} className={`navigator-tag ${type}`}>
+          {value}
+        </span>
+      ))}
+      {remaining > 0 && (
+        <Popup
+          className="catalogue-tag-popup"
+          content={
+            <div className="catalogue-tag-tooltip">
+              <ul>
+                {hidden.map((value) => (
+                  <li key={`${type}-hidden-${value}`}>{value}</li>
+                ))}
+              </ul>
+            </div>
+          }
+          position="bottom left"
+          trigger={
+            <button
+              type="button"
+              className={`navigator-tag ${type} more`}
+              aria-label={`${typeLabel}: ${hidden.join(', ')}`}
+            >
+              + {remaining}
+            </button>
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+const CycleElements = ({ intl, values }) => {
+  const visible = values.slice(0, 3);
+
+  if (!visible.length) return null;
+
+  return (
+    <div className="navigator-catalogue-cycle-elements">
+      <span className="cycle-elements-label">
+        {intl.formatMessage(messages.cycle)}
+      </span>
+      {visible.map((value, index) => (
+        <span
+          key={`cycle-element-${index}`}
+          className="navigator-tag cycle-element"
+        >
+          {value}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+const NavigatorCatalogueCardItem = (props) => {
+  const { result } = props;
+  const intl = useIntl();
+  const sectors = asArray(result.cca_adaptation_sectors);
+  const hazards = asArray(result.cca_climate_impacts);
+  const licenseStatus = asArray(result.cca_license_status)
+    .map((value) => value?.title || value)
+    .filter(Boolean)
+    .join(', ');
+  const toolProvider = result?._result?.tool_provider?.raw;
+  const adaptationSupportCycleSteps = asArray(
+    result.adaptation_support_cycle_step,
+  )
+    .map((value) => value?.title?.split(':')[0])
+    .filter(Boolean);
+  const publicationDate =
+    result.publication_date?.raw || result.publication_date;
+  const formattedPublicationDate = publicationDate
+    ? publicationDateFormatter.format(new Date(publicationDate))
+    : '';
+  const sectorLabel = intl.formatMessage(messages.sector);
+  const hazardLabel = intl.formatMessage(messages.hazard);
+  const compareTool = {
+    uid: getCompareToolUid(result),
+    title: getCompareToolTitle(result),
+    href: result.href,
+  };
+  const { isSelected, isLimitReached, setSelected } =
+    useCompareTools(compareTool);
+
+  const onCompareChange = (event, { checked }) => {
+    setSelected(checked);
+  };
+
+  return (
+    <div className={`navigator-catalogue-item${isSelected ? ' selected' : ''}`}>
+      <div className="navigator-tool-icon large" aria-hidden="true">
+        <Icon className="ri-file-line" />
+      </div>
+
+      <div className="catalogue-item-main">
+        <div className="catalogue-item-top">
+          <div className="navigator-tool-provider" title={toolProvider}>
+            {toolProvider}
+          </div>
+          {formattedPublicationDate && (
+            <span className="catalogue-date">{formattedPublicationDate}</span>
+          )}
+        </div>
+        <div className="catalogue-item-heading">
+          <h4>
+            <ExternalLink href={result.href} title={result.title}>
+              {result.title || '[Tool name]'}
+            </ExternalLink>
+          </h4>
+        </div>
+
+        <p className="catalogue-description">
+          <ResultContext {...props} />
+        </p>
+
+        <div className="catalogue-taxonomy">
+          <TagGroup typeLabel={sectorLabel} values={sectors} type="sector" />
+          <TagGroup typeLabel={hazardLabel} values={hazards} type="hazard" />
+        </div>
+
+        <div className="catalogue-item-footer">
+          <div className="catalogue-meta">
+            <CycleElements intl={intl} values={adaptationSupportCycleSteps} />
+          </div>
+
+          <div className="catalogue-meta license-type">
+            {licenseStatus && (
+              <>
+                <span className="catalogue-licence" title={licenseStatus}>
+                  {intl.formatMessage(messages.license)}: {licenseStatus}
+                </span>
+                <span aria-hidden="true">·</span>
+              </>
+            )}
+            <span className="catalogue-type">
+              {intl.formatMessage(messages.type)}: Tool
+            </span>
+          </div>
+
+          <div className="catalogue-actions">
+            <label className="catalogue-compare">
+              <Checkbox
+                checked={isSelected}
+                disabled={isLimitReached || !compareTool.uid}
+                onChange={onCompareChange}
+              />
+              <span>{intl.formatMessage(messages.compare)}</span>
+            </label>
+            <ExternalLink href={result.href} className="ui button primary icon">
+              {intl.formatMessage(messages.viewTool)}
+              <Icon className="ri-arrow-right-line" />
+            </ExternalLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NavigatorCatalogueCardItem;

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import NavigatorCatalogueCardItem from './NavigatorCatalogueCardItem';
+import {
+  getCompareToolTitle,
+  getCompareToolUid,
+  useCompareTools,
+} from '../../theme/CompareTools/utils';
+
+jest.mock('semantic-ui-react', () => {
+  return {
+    Checkbox: ({ checked, disabled, onChange }) => (
+      <input
+        aria-label="compare"
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange(event, { checked: event.target.checked })}
+      />
+    ),
+    Icon: ({ className }) => <i className={className} />,
+    Popup: ({ content, trigger }) => (
+      <div>
+        {trigger}
+        {content}
+      </div>
+    ),
+  };
+});
+
+jest.mock('@eeacms/search/components/Result/ExternalLink', () => ({
+  __esModule: true,
+  default: ({ children, href, title }) => (
+    <a href={href} title={title}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock('@eeacms/search/components/Result/ResultContext', () => ({
+  __esModule: true,
+  default: () => <span>Tool description</span>,
+}));
+
+jest.mock('../../theme/CompareTools/utils', () => ({
+  getCompareToolTitle: jest.fn((result) => result.title || ''),
+  getCompareToolUid: jest.fn(
+    (result) => result.cca_uid?.raw || result.cca_uid || '',
+  ),
+  useCompareTools: jest.fn(),
+}));
+
+const renderCard = (result) =>
+  render(
+    <IntlProvider locale="en">
+      <NavigatorCatalogueCardItem result={result} />
+    </IntlProvider>,
+  );
+
+describe('NavigatorCatalogueCardItem', () => {
+  const setSelected = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useCompareTools.mockReturnValue({
+      isSelected: false,
+      isLimitReached: false,
+      setSelected,
+    });
+  });
+
+  it('renders complete tool metadata and selects the tool for comparison', () => {
+    const result = {
+      cca_uid: { raw: 'tool-uid' },
+      title: 'Climate planning tool',
+      href: 'https://example.com/tool',
+      publication_date: { raw: '2026-07-24' },
+      cca_adaptation_sectors: {
+        raw: ['Agriculture', 'Water', 'Health', 'Energy'],
+      },
+      cca_climate_impacts: {
+        raw: ['Drought', 'Flooding', 'Heat', 'Wildfires'],
+      },
+      cca_license_status: {
+        raw: [
+          'Open data with attribution requirements',
+          { title: 'Restricted' },
+        ],
+      },
+      adaptation_support_cycle_step: {
+        raw: [
+          { title: 'Step 1: Preparing the ground' },
+          { title: 'Step 2: Assessing risks' },
+          { title: 'Step 3: Identifying options' },
+          { title: 'Step 4: Assessing options' },
+        ],
+      },
+      _result: {
+        tool_provider: { raw: 'A provider with a long official name' },
+      },
+    };
+
+    renderCard(result);
+
+    expect(screen.getByText('Climate planning tool')).toHaveAttribute(
+      'href',
+      'https://example.com/tool',
+    );
+    expect(
+      screen.getByText('A provider with a long official name'),
+    ).toHaveAttribute('title', 'A provider with a long official name');
+    expect(screen.getByText('24 Jul 26')).toBeInTheDocument();
+    expect(screen.getByText('Agriculture')).toBeInTheDocument();
+    expect(screen.getByText('Energy')).toBeInTheDocument();
+    expect(screen.getByText('Wildfires')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Sector: Energy' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Hazard: Wildfires' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Step 1')).toBeInTheDocument();
+    expect(screen.queryByText('Step 4')).not.toBeInTheDocument();
+    expect(
+      screen.getByTitle('Open data with attribution requirements, Restricted'),
+    ).toHaveTextContent(
+      'License: Open data with attribution requirements, Restricted',
+    );
+    expect(screen.getByText('Type: Tool')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('compare'));
+    expect(setSelected).toHaveBeenCalledWith(true);
+    expect(getCompareToolUid).toHaveBeenCalledWith(result);
+    expect(getCompareToolTitle).toHaveBeenCalledWith(result);
+    expect(useCompareTools).toHaveBeenCalledWith({
+      uid: 'tool-uid',
+      title: 'Climate planning tool',
+      href: 'https://example.com/tool',
+    });
+  });
+
+  it('renders sparse results and disables comparison without a UID', () => {
+    useCompareTools.mockReturnValue({
+      isSelected: true,
+      isLimitReached: true,
+      setSelected,
+    });
+
+    renderCard({ title: '', href: '/tool' });
+
+    expect(screen.getByText('[Tool name]')).toBeInTheDocument();
+    expect(screen.queryByText('License:')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('compare')).toBeDisabled();
+    expect(screen.getByLabelText('compare')).toBeChecked();
+  });
+
+  it('supports scalar and explicitly empty raw metadata', () => {
+    renderCard({
+      cca_uid: 'tool-uid',
+      title: 'Scalar metadata tool',
+      href: '/tool',
+      cca_adaptation_sectors: 'Water',
+      cca_climate_impacts: { raw: null },
+      cca_license_status: { raw: '' },
+      adaptation_support_cycle_step: { raw: null },
+    });
+
+    expect(screen.getByText('Water')).toBeInTheDocument();
+    expect(screen.queryByText('License:')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,189 @@
+import React from 'react';
+import { Sorting } from '@elastic/react-search-ui';
+import { Grid, Icon, Menu } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useAtomValue } from 'jotai';
+
+import ResultsPerPageSelector from '@eeacms/search/components/ResultsPerPageSelector/ResultsPerPageSelector';
+import Paging from '@eeacms/search/components/Paging/Paging';
+import {
+  ActiveFilterList,
+  Component,
+  DownloadButton,
+  DropdownFacetsList,
+  SectionTabs,
+  SortingDropdownWithLabel,
+} from '@eeacms/search/components';
+import { NoResults } from '@eeacms/search/components/Result/NoResults';
+import { useSearchContext, useViews } from '@eeacms/search/lib/hocs';
+import { loadingFamily } from '@eeacms/search/state';
+import registry from '@eeacms/search/registry';
+import { CompareToolsPanel } from '@eeacms/volto-cca-policy/components';
+
+const NAVIGATOR_VIEW_IDS = ['listing', 'map'];
+
+const messages = defineMessages({
+  'Title a-z': {
+    id: 'Title a-z',
+    defaultMessage: 'Title a-z',
+  },
+  'Title z-a': {
+    id: 'Title z-a',
+    defaultMessage: 'Title z-a',
+  },
+  Newest: {
+    id: 'Newest',
+    defaultMessage: 'Newest',
+  },
+  Oldest: {
+    id: 'Oldest',
+    defaultMessage: 'Oldest',
+  },
+  Relevance: {
+    id: 'Relevance',
+    defaultMessage: 'Relevance',
+  },
+  'List view': {
+    id: 'List view',
+    defaultMessage: 'List view',
+  },
+  'Map view': {
+    id: 'Map view',
+    defaultMessage: 'Map view',
+  },
+  activeFiltersEditMode: {
+    id: 'Active filters are always shown in edit mode',
+    defaultMessage: 'Active filters are always shown in edit mode',
+  },
+});
+
+const NavigatorCatalogueContentView = (props) => {
+  const { appConfig, children, wasInteracted } = props;
+  const { sortOptions, resultViews } = appConfig;
+  const views = useViews();
+  const searchContext = useSearchContext();
+  const intl = useIntl();
+
+  const { showFilters, showFacets, showClusters, showSorting } = appConfig;
+
+  const navigatorResultViews = NAVIGATOR_VIEW_IDS.map((id) =>
+    resultViews.find((view) => view.id === id),
+  ).filter(Boolean);
+
+  const activeNavigatorViewId = NAVIGATOR_VIEW_IDS.includes(views.activeViewId)
+    ? views.activeViewId
+    : navigatorResultViews[0]?.id;
+
+  React.useEffect(() => {
+    if (activeNavigatorViewId && views.activeViewId !== activeNavigatorViewId) {
+      views.setActiveViewId(activeNavigatorViewId);
+    }
+  }, [activeNavigatorViewId, views]);
+
+  const listingViewDef = resultViews.find(
+    (view) => view.id === activeNavigatorViewId,
+  );
+
+  const ResultViewComponent =
+    registry.resolve[listingViewDef?.factories.view]?.component;
+
+  const layoutMode =
+    activeNavigatorViewId === 'listing' ? 'fixed' : 'fullwidth';
+
+  const { wasSearched } = searchContext;
+
+  const loadingAtom = loadingFamily(appConfig.appName);
+  const isLoading = useAtomValue(loadingAtom);
+
+  const showPaging = appConfig.showLandingPage === false ? true : wasInteracted;
+
+  const sortOptions2 = sortOptions.map((item) => ({
+    ...item,
+    name: messages[item.name?.id]
+      ? intl.formatMessage(messages[item.name.id])
+      : item.name,
+  }));
+
+  if (!ResultViewComponent) return null;
+
+  return (
+    <>
+      {appConfig.mode === 'edit' && (
+        <div>{intl.formatMessage(messages.activeFiltersEditMode)}</div>
+      )}
+
+      {(showFilters || appConfig.mode === 'edit') && <ActiveFilterList />}
+
+      {showClusters && <SectionTabs />}
+
+      <div className={`results-layout ${layoutMode}`}>
+        <div className="navigator-catalogue-above-results">
+          <Menu pointing secondary className="navigator-view-tabs">
+            {navigatorResultViews.map((view) => (
+              <Menu.Item
+                key={view.id}
+                active={activeNavigatorViewId === view.id}
+                onClick={() => views.setActiveViewId(view.id)}
+              >
+                {view.icon && <Icon className={view.icon} />}
+                {messages[view.title]
+                  ? intl.formatMessage(messages[view.title])
+                  : view.title}
+              </Menu.Item>
+            ))}
+          </Menu>
+        </div>
+
+        {(showFacets || showSorting) && (
+          <div className="above-results">
+            <div className="above-left">
+              {showFacets && <DropdownFacetsList />}
+            </div>
+
+            <div className="above-right">
+              {showSorting && (
+                <>
+                  <Component factoryName="SecondaryFacetsList" {...props} />
+                  <Sorting
+                    label=""
+                    sortOptions={sortOptions2}
+                    view={SortingDropdownWithLabel}
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {children.length === 0 && !isLoading && wasSearched && <NoResults />}
+
+        <ResultViewComponent>{children}</ResultViewComponent>
+        <CompareToolsPanel appConfig={appConfig} />
+
+        {children.length > 0 && activeNavigatorViewId !== 'map' && (
+          <div className="search-body-footer">
+            <Grid columns={2}>
+              <Grid.Column>
+                <ResultsPerPageSelector />
+              </Grid.Column>
+              <Grid.Column textAlign="right" />
+            </Grid>
+
+            <Grid centered>
+              <Grid.Column textAlign="center">
+                <div className="prev-next-paging">
+                  {!!showPaging && <Paging />}
+                </div>
+                <div>
+                  <DownloadButton appConfig={appConfig} />
+                </div>
+              </Grid.Column>
+            </Grid>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default NavigatorCatalogueContentView;