@eeacms/volto-cca-policy 1.0.1 → 1.0.3

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

@@ -0,0 +1,101 @@
+export const asArray = (value) => {
+  if (!value) return [];
+  const raw = value.raw !== undefined ? value.raw : value;
+  if (!raw) return [];
+  const values = Array.isArray(raw)
+    ? raw.filter(Boolean)
+    : [raw].filter(Boolean);
+
+  return values.map((value) => value?.title || value?.token || value);
+};
+
+export const arrayFieldToString = (value) => asArray(value).join(', ');
+
+export const formatFunctionalityScore = (value) => {
+  const raw = value?.raw !== undefined ? value.raw : value;
+  const score = raw === null || raw === undefined ? Number.NaN : Number(raw);
+
+  return Number.isFinite(score) ? `${Math.min(6, Math.max(0, score))}/6` : '—';
+};
+
+export const escapeCsvValue = (value) => {
+  const stringValue = value === undefined || value === null ? '' : `${value}`;
+  return `"${stringValue.replace(/"/g, '""')}"`;
+};
+
+export const downloadCsv = (filename, rows) => {
+  const csv = rows.map((row) => row.map(escapeCsvValue).join(',')).join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+
+  link.href = url;
+  link.setAttribute('download', filename);
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+
+  URL.revokeObjectURL(url);
+};
+
+export const getLocalizedLandingPageURL = (appConfig, currentLang = 'en') => {
+  const lang = currentLang || 'en';
+  const landingPageURL =
+    appConfig?.landingPageURL || '/en/navigator/tool-catalogue';
+
+  return landingPageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+};
+
+export const getComparePageURL = (appConfig, currentLang = 'en') => {
+  const lang = currentLang || 'en';
+  const comparePageURL = appConfig?.comparePageURL || '/en/navigator/compare';
+
+  return comparePageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+};
+
+export const exportComparisonTable = (tools, getToolField) => {
+  const rows = [
+    ['Criteria', ...tools.map((tool) => tool.title)],
+    [
+      'Usability',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'accessibility_and_usability')),
+      ),
+    ],
+    [
+      'Functionality',
+      ...tools.map((tool) =>
+        formatFunctionalityScore(getToolField(tool, 'functionality')),
+      ),
+    ],
+    [
+      'Spatial scale',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_geographical_scale')),
+      ),
+    ],
+    [
+      'Output type',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_type_of_outputs')),
+      ),
+    ],
+    [
+      'Adaptation support cycle step',
+      ...tools.map((tool) =>
+        arrayFieldToString(
+          getToolField(tool, 'cca_adaptation_support_cycle_step'),
+        ),
+      ),
+    ],
+    [
+      'Sector',
+      ...tools.map((tool) =>
+        arrayFieldToString(getToolField(tool, 'cca_adaptation_sectors')),
+      ),
+    ],
+  ];
+
+  downloadCsv('navigator-catalogue-comparison.csv', rows);
+};

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

@@ -0,0 +1,132 @@
+import {
+  arrayFieldToString,
+  asArray,
+  downloadCsv,
+  escapeCsvValue,
+  exportComparisonTable,
+  formatFunctionalityScore,
+  getComparePageURL,
+  getLocalizedLandingPageURL,
+} from './utils';
+
+describe('Navigator Catalogue utilities', () => {
+  let clickSpy;
+  let createObjectURL;
+  let originalBlob;
+  let revokeObjectURL;
+
+  beforeEach(() => {
+    originalBlob = global.Blob;
+    global.Blob = jest.fn((parts, options) => ({ parts, options }));
+    clickSpy = jest
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {});
+    createObjectURL = jest.fn(() => 'blob:test');
+    revokeObjectURL = jest.fn();
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: createObjectURL,
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: revokeObjectURL,
+    });
+  });
+
+  afterEach(() => {
+    global.Blob = originalBlob;
+    clickSpy.mockRestore();
+    jest.restoreAllMocks();
+  });
+
+  it('normalizes raw, scalar, title, token, and empty values', () => {
+    expect(asArray()).toEqual([]);
+    expect(asArray({ raw: null })).toEqual([]);
+    expect(asArray({ raw: ['One', null, { title: 'Two' }] })).toEqual([
+      'One',
+      'Two',
+    ]);
+    expect(asArray({ token: 'TOKEN' })).toEqual(['TOKEN']);
+    expect(asArray('Value')).toEqual(['Value']);
+    expect(arrayFieldToString({ raw: ['One', 'Two'] })).toBe('One, Two');
+  });
+
+  it('formats functionality scores and clamps invalid ranges', () => {
+    expect(formatFunctionalityScore({ raw: 4 })).toBe('4/6');
+    expect(formatFunctionalityScore(-2)).toBe('0/6');
+    expect(formatFunctionalityScore(9)).toBe('6/6');
+    expect(formatFunctionalityScore(null)).toBe('—');
+    expect(formatFunctionalityScore('invalid')).toBe('—');
+  });
+
+  it('escapes CSV values', () => {
+    expect(escapeCsvValue()).toBe('""');
+    expect(escapeCsvValue(null)).toBe('""');
+    expect(escapeCsvValue('A "quoted" value')).toBe('"A ""quoted"" value"');
+  });
+
+  it('downloads CSV data and cleans up the temporary link', () => {
+    const appendSpy = jest.spyOn(document.body, 'appendChild');
+    const removeSpy = jest.spyOn(HTMLAnchorElement.prototype, 'remove');
+
+    downloadCsv('comparison.csv', [
+      ['Title', 'Tool'],
+      ['Sector', 'Water'],
+    ]);
+
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    expect(appendSpy).toHaveBeenCalledWith(expect.any(HTMLAnchorElement));
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    expect(removeSpy).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:test');
+  });
+
+  it('localizes catalogue and comparison URLs', () => {
+    expect(getLocalizedLandingPageURL(undefined)).toBe(
+      '/en/navigator/tool-catalogue',
+    );
+    expect(
+      getLocalizedLandingPageURL({ landingPageURL: '/en/tools' }, 'fr'),
+    ).toBe('/fr/tools');
+    expect(getLocalizedLandingPageURL({ landingPageURL: '/tools' }, '')).toBe(
+      '/tools',
+    );
+    expect(
+      getComparePageURL({ comparePageURL: '/en/tools/compare' }, 'de'),
+    ).toBe('/de/tools/compare');
+    expect(
+      getComparePageURL(
+        { landingPageURL: '/en/navigator/tool-catalogue' },
+        'de',
+      ),
+    ).toBe('/de/navigator/compare');
+    expect(getComparePageURL()).toBe('/en/navigator/compare');
+  });
+
+  it('exports every comparison criterion', () => {
+    const tools = [
+      {
+        title: 'Tool A',
+        values: {
+          accessibility_and_usability: 'High',
+          functionality: 5,
+          cca_geographical_scale: ['Local'],
+          cca_type_of_outputs: ['Maps'],
+          cca_adaptation_support_cycle_step: ['Step 1'],
+          cca_adaptation_sectors: ['Water'],
+        },
+      },
+    ];
+
+    exportComparisonTable(tools, (tool, field) => tool.values[field]);
+
+    const csv = global.Blob.mock.calls[0][0][0];
+    expect(csv).toContain('"Criteria","Tool A"');
+    expect(csv).toContain('"Usability","High"');
+    expect(csv).toContain('"Functionality","5/6"');
+    expect(csv).toContain('"Spatial scale","Local"');
+    expect(csv).toContain('"Output type","Maps"');
+    expect(csv).toContain('"Adaptation support cycle step","Step 1"');
+    expect(csv).toContain('"Sector","Water"');
+  });
+});

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

@@ -0,0 +1,409 @@
+import React from 'react';
+import { useAtom } from 'jotai';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Checkbox, Icon, Loader, Message } from 'semantic-ui-react';
+import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
+import { useSearchContext } from '@eeacms/search/lib/hocs';
+import guideSteps from '../../../search/navigator_guide/guideSteps';
+import { navigatorGuideStepAtom } from '../../../state';
+
+const messages = defineMessages({
+  noSteps: {
+    id: 'No Navigator Guide steps are configured.',
+    defaultMessage: 'No Navigator Guide steps are configured.',
+  },
+  guideMe: {
+    id: 'Guide me',
+    defaultMessage: 'Guide me',
+  },
+  findTheRightTool: {
+    id: 'Find the right tool',
+    defaultMessage: 'Find the right tool',
+  },
+  introduction: {
+    id: 'Navigator Guide introduction',
+    defaultMessage:
+      'Answer a few guided questions. The catalogue on the right narrows as you go - you can skip to the results at any point.',
+  },
+  stepProgress: {
+    id: 'Step {current} of {total}',
+    defaultMessage: 'Step {current} of {total}',
+  },
+  selectAllThatApply: {
+    id: 'Select all that apply',
+    defaultMessage: 'Select all that apply',
+  },
+  noOptions: {
+    id: 'No options are available for this step.',
+    defaultMessage: 'No options are available for this step.',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  skipToResults: {
+    id: 'Skip to results',
+    defaultMessage: 'Skip to results',
+  },
+  seeResults: {
+    id: 'See results',
+    defaultMessage: 'See results',
+  },
+  nextStep: {
+    id: 'Next step',
+    defaultMessage: 'Next step',
+  },
+  livePreview: {
+    id: 'Live preview · results based on your selection',
+    defaultMessage: 'Live preview · results based on your selection',
+  },
+  previewEmpty: {
+    id: 'Navigator Guide preview empty state',
+    defaultMessage:
+      'Start by selecting the categories that interest you. The tools filtered by your chosen categories will appear in this box.',
+  },
+  toolsMatch: {
+    id: '{count, plural, one {tool matches} other {tools match}}',
+    defaultMessage: '{count, plural, one {tool matches} other {tools match}}',
+  },
+  refinedBy: {
+    id: 'Refined by {criteria}',
+    defaultMessage: 'Refined by {criteria}',
+  },
+  seeAllMatchingTools: {
+    id: 'See all matching tools',
+    defaultMessage: 'See all matching tools',
+  },
+});
+
+const getFacetOptions = (facets, field) =>
+  (facets?.[field]?.[0]?.data || []).map(({ value, count }) => ({
+    value,
+    count,
+  }));
+
+const isStepSelected = (filters, field) =>
+  (filters || []).some(
+    (filter) => filter.field === field && filter.values?.length,
+  );
+
+const previewTagTypes = {
+  adaptationSectors: 'sector',
+  climateImpacts: 'hazard',
+  adaptationStage: 'adaptation-stage',
+  coverage: 'coverage',
+};
+
+const NavigatorGuideContentView = ({ appConfig }) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const currentLang = useSelector((state) => state.intl.locale || 'en');
+  const searchContext = useSearchContext();
+  const {
+    addFilter,
+    facets,
+    filters,
+    isLoading,
+    removeFilter,
+    results,
+    totalResults,
+  } = searchContext;
+  const steps = guideSteps;
+  const [storedActiveStep, setActiveStep] = useAtom(navigatorGuideStepAtom);
+  const activeStep =
+    Number.isInteger(storedActiveStep) &&
+    storedActiveStep >= 0 &&
+    storedActiveStep < steps.length
+      ? storedActiveStep
+      : 0;
+  const step = steps[activeStep];
+  const selectedValues =
+    (filters || []).find((filter) => filter.field === step?.field)?.values ||
+    [];
+  const options = getFacetOptions(facets, step?.field);
+  const isLastStep = activeStep === steps.length - 1;
+  const hasSelections = steps.some(({ field }) =>
+    isStepSelected(filters, field),
+  );
+  const selectedStepLabels = steps
+    .filter(({ field }) => isStepSelected(filters, field))
+    .map(({ label }) =>
+      intl.formatMessage(label).toLocaleLowerCase(currentLang),
+    );
+  const selectedPreviewTags = steps.flatMap((item) => {
+    const values =
+      (filters || []).find((filter) => filter.field === item.field)?.values ||
+      [];
+
+    return values.map((value) => ({
+      label: item.id === 'adaptationStage' ? value.split(':')[0] : value,
+      type: previewTagTypes[item.id],
+    }));
+  });
+  const visiblePreviewTags = selectedPreviewTags.slice(0, 3);
+  const remainingPreviewTags =
+    selectedPreviewTags.length - visiblePreviewTags.length;
+
+  React.useEffect(() => {
+    if (storedActiveStep !== activeStep) {
+      setActiveStep(activeStep);
+    }
+  }, [activeStep, setActiveStep, storedActiveStep]);
+
+  const toggleValue = (value) => {
+    if (selectedValues.includes(value)) {
+      removeFilter(step.field, value, step.filterType);
+    } else {
+      addFilter(step.field, value, step.filterType);
+    }
+  };
+
+  const showResults = () => {
+    const allowedFields = new Set([
+      'language',
+      ...steps.map(({ field }) => field),
+    ]);
+    const resultFilters = (filters || []).filter(({ field }) =>
+      allowedFields.has(field),
+    );
+    const query = new URLManager().stateToUrl({ filters: resultFilters });
+    const pathname = (
+      appConfig.resultsPageURL || '/en/navigator/tool-catalogue'
+    ).replace(/^\/en(?=\/|$)/, `/${currentLang}`);
+
+    history.push({ pathname, search: query ? `?${query}` : '' });
+  };
+
+  if (!step) {
+    return <Message warning>{intl.formatMessage(messages.noSteps)}</Message>;
+  }
+
+  return (
+    <div className="navigator-guide-search">
+      <header className="navigator-guide-header">
+        <div className="navigator-guide-eyebrow">
+          {intl.formatMessage(messages.guideMe)}
+        </div>
+        <h2>
+          {appConfig.headline || intl.formatMessage(messages.findTheRightTool)}
+        </h2>
+        <p>
+          {appConfig.subheadline || intl.formatMessage(messages.introduction)}
+        </p>
+      </header>
+
+      <div className="navigator-guide-layout">
+        <section className="navigator-guide-wizard">
+          <div className="navigator-guide-progress">
+            {steps.map((item, index) => (
+              <React.Fragment key={item.id}>
+                <Button
+                  className={`navigator-guide-progress-step${
+                    index === activeStep ? ' active' : ''
+                  }${index < activeStep ? ' completed' : ''}`}
+                  aria-current={index === activeStep ? 'step' : undefined}
+                  onClick={() => setActiveStep(index)}
+                >
+                  <span>
+                    {isStepSelected(filters, item.field) ? (
+                      <Icon className="ri-check-line" />
+                    ) : (
+                      index + 1
+                    )}
+                  </span>
+                  {intl.formatMessage(item.label)}
+                </Button>
+                {index < steps.length - 1 && (
+                  <span
+                    className={`navigator-guide-progress-connector${
+                      index < activeStep ? ' completed' : ''
+                    }`}
+                    aria-hidden="true"
+                  />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+          <div
+            className="navigator-guide-progress-bar"
+            role="progressbar"
+            aria-valuemin="1"
+            aria-valuemax={steps.length}
+            aria-valuenow={activeStep + 1}
+          >
+            <div
+              className="navigator-guide-progress-bar-fill"
+              style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
+            />
+          </div>
+
+          <div className="navigator-guide-step-meta">
+            <span className="navigator-guide-step-number">
+              {intl.formatMessage(messages.stepProgress, {
+                current: activeStep + 1,
+                total: steps.length,
+              })}
+            </span>
+            <span>{intl.formatMessage(messages.selectAllThatApply)}</span>
+          </div>
+          <h3>{intl.formatMessage(step.title)}</h3>
+          {step.description && <p>{intl.formatMessage(step.description)}</p>}
+
+          {isLoading ? (
+            <div className="navigator-guide-options-loading">
+              <Loader active inline />
+            </div>
+          ) : options.length > 0 ? (
+            <div className="navigator-guide-options">
+              {options.map((option) => (
+                <label
+                  key={option.value}
+                  className={`navigator-guide-option${
+                    selectedValues.includes(option.value) ? ' selected' : ''
+                  }`}
+                >
+                  <Checkbox
+                    checked={selectedValues.includes(option.value)}
+                    onChange={() => toggleValue(option.value)}
+                  />
+                  <span>{option.value}</span>
+                  <small>{option.count}</small>
+                </label>
+              ))}
+            </div>
+          ) : (
+            <Message>{intl.formatMessage(messages.noOptions)}</Message>
+          )}
+
+          <div className="navigator-guide-actions">
+            <Button
+              disabled={activeStep === 0}
+              onClick={() => setActiveStep((value) => value - 1)}
+            >
+              <Icon className="ri-arrow-left-line" />
+              {intl.formatMessage(messages.back)}
+            </Button>
+            <div>
+              <Button className="primary inverted" onClick={showResults}>
+                {intl.formatMessage(messages.skipToResults)}
+              </Button>
+              <Button
+                labelPosition="right"
+                className="primary icon"
+                onClick={() =>
+                  isLastStep
+                    ? showResults()
+                    : setActiveStep((value) => value + 1)
+                }
+              >
+                {intl.formatMessage(
+                  isLastStep ? messages.seeResults : messages.nextStep,
+                )}
+                <Icon className="ri-arrow-right-line" />
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <aside className="navigator-guide-preview">
+          <div className="navigator-guide-preview-header">
+            <Icon className="ri-stack-line" />
+            <div className="navigator-guide-preview-label">
+              {intl.formatMessage(messages.livePreview)}
+            </div>
+          </div>
+          <div className="navigator-guide-result-count">
+            <span className="navigator-guide-result-count-value">
+              {isLoading ? '…' : totalResults || 0}
+            </span>
+            <p>
+              {intl.formatMessage(messages.toolsMatch, {
+                count: totalResults || 0,
+              })}
+            </p>
+          </div>
+          {selectedStepLabels.length > 0 && (
+            <p className="navigator-guide-preview-refinements">
+              {intl.formatMessage(messages.refinedBy, {
+                criteria: selectedStepLabels.join(' · '),
+              })}
+            </p>
+          )}
+          {hasSelections ? (
+            <>
+              <div className="navigator-guide-preview-results">
+                {(results || [])
+                  .slice(0, appConfig.previewResultsLimit)
+                  .map((result) => (
+                    <div
+                      className="navigator-guide-preview-result"
+                      key={result._original?._id || result.href}
+                    >
+                      <div
+                        className="navigator-tool-icon medium"
+                        aria-hidden="true"
+                      >
+                        <Icon className="ri-stack-line" />
+                      </div>
+                      <div className="navigator-guide-preview-result-content">
+                        <small
+                          className="navigator-tool-provider"
+                          title={result?._result?.tool_provider?.raw}
+                        >
+                          {result?._result?.tool_provider?.raw}
+                        </small>
+                        <a
+                          href={result.href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="navigator-guide-preview-result-title"
+                          title={result.title}
+                        >
+                          <h5>{result.title}</h5>
+                        </a>
+                        {selectedPreviewTags.length > 0 && (
+                          <div className="navigator-guide-preview-tags">
+                            {visiblePreviewTags.map(
+                              ({ label, type }, index) => (
+                                <span
+                                  className={`navigator-tag ${type}`}
+                                  key={`${type}-${label}-${index}`}
+                                >
+                                  {label}
+                                </span>
+                              ),
+                            )}
+                            {remainingPreviewTags > 0 && (
+                              <span className="navigator-guide-preview-tag-more">
+                                + {remainingPreviewTags}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+              <Button
+                labelPosition="right"
+                className="primary icon inverted"
+                onClick={showResults}
+              >
+                {intl.formatMessage(messages.seeAllMatchingTools)}
+                <Icon className="ri-arrow-right-line" />
+              </Button>
+            </>
+          ) : (
+            <p className="navigator-guide-preview-empty">
+              {intl.formatMessage(messages.previewEmpty)}
+            </p>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+export default NavigatorGuideContentView;

package/src/components/Search/NavigatorGuide/NavigatorGuideLayout.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+const NavigatorGuideLayout = ({ bodyContent }) => (
+  <Container className="navigator-guide-search-layout">{bodyContent}</Container>
+);
+
+export default NavigatorGuideLayout;

package/src/components/index.js

@@ -7,6 +7,8 @@ export { default as ASTNavigation } from './theme/ASTNavigation/ASTNavigation';
 export { default as RedirectToLogin } from './theme/RedirectToLogin/RedirectToLogin';
 export { default as MissionSignatoryProfileView } from './theme/MissionSignatoryProfile/MissionSignatoryProfileView';
 export { default as AccordionList } from './theme/AccordionList/AccordionList';
+export { default as CompareToolsView } from './theme/CompareTools/CompareToolsView';
+export { CompareToolsPanel } from './theme/CompareTools/CompareToolsPanel';
 
 // Widgets
 export { default as RASTWidgetView } from './theme/Widgets/RASTWidgetView';

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.test.jsx

@@ -17,6 +17,7 @@ import {
   ACE_PROJECT,
   PUBLICATION_REPORT,
   TOOL,
+  EXTENDED_TOOL,
   VIDEO,
   C3S_INDICATOR,
   NEWS_ITEM,
@@ -89,6 +90,7 @@ describe('CollectionStatsView', () => {
             [ORGANISATION]: 22,
             [PUBLICATION_REPORT]: 187,
             [TOOL]: 14,
+            [EXTENDED_TOOL]: 10,
             [VIDEO]: 17,
           },
         },