@eeacms/volto-cca-policy 1.0.35 → 1.0.37

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

@@ -7,6 +7,7 @@ import {
   Icon,
   Loader,
   Message,
+  Popup,
   Table,
   Button,
 } from 'semantic-ui-react';
@@ -84,10 +85,20 @@ const messages = defineMessages({
     id: 'Usability',
     defaultMessage: 'Usability',
   },
+  usabilityTooltip: {
+    id: 'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+    defaultMessage:
+      'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+  },
   functionality: {
     id: 'Functionality',
     defaultMessage: 'Functionality',
   },
+  functionalityTooltip: {
+    id: 'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+    defaultMessage:
+      'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+  },
   spatialScale: {
     id: 'Spatial scale',
     defaultMessage: 'Spatial scale',
@@ -231,6 +242,53 @@ const FunctionalityScore = ({ value }) => {
   );
 };
 
+const UsabilityTooltipContent = ({ text }) => {
+  const parts = text.match(
+    /^(.* with) low = (.*), moderate = (.*), high = (.*)$/,
+  );
+
+  if (!parts) return text;
+
+  const [, introduction, low, moderate, high] = parts;
+  const levels = [
+    ['low', low],
+    ['moderate', moderate],
+    ['high', high],
+  ];
+
+  return (
+    <div className="usability-tooltip-content">
+      <div className="usability-tooltip-introduction">{introduction}:</div>
+      {levels.map(([level, description]) => (
+        <div className="usability-tooltip-level" key={level}>
+          <strong>{level}</strong>
+          <span>{` = ${description}`}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const CriterionLabel = ({ label, tooltip, tooltipContent }) => (
+  <div className="compare-criteria-title">
+    <span>{label}</span>
+    <Popup
+      className="compare-criteria-popup"
+      content={tooltipContent || tooltip}
+      position="top left"
+      trigger={
+        <button
+          type="button"
+          className="compare-criteria-tooltip"
+          aria-label={tooltip}
+        >
+          <Icon className="ri-information-line" aria-hidden="true" />
+        </button>
+      }
+    />
+  </div>
+);
+
 const getCompareUids = (search) => {
   const params = new URLSearchParams(search);
 
@@ -297,6 +355,7 @@ const CompareToolsView = () => {
   const registry = config.settings.searchlib;
   const landingPageURL = getNavigatorCataloguePageURL(currentLang);
   const compareToolsTitle = intl.formatMessage(messages.compareTools);
+  const usabilityTooltip = intl.formatMessage(messages.usabilityTooltip);
   const returnURL =
     location.state?.returnURL ||
     getReturnURL(location.search) ||
@@ -519,11 +578,19 @@ const CompareToolsView = () => {
 
             <Table.Body>
               <Table.Row>
-                <Table.Cell as="th" scope="row">
+                <Table.Cell
+                  as="th"
+                  scope="row"
+                  aria-label={intl.formatMessage(messages.usability)}
+                >
                   <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.usability)}
-                    </div>
+                    <CriterionLabel
+                      label={intl.formatMessage(messages.usability)}
+                      tooltip={usabilityTooltip}
+                      tooltipContent={
+                        <UsabilityTooltipContent text={usabilityTooltip} />
+                      }
+                    />
                   </div>
                 </Table.Cell>
 
@@ -537,11 +604,18 @@ const CompareToolsView = () => {
               </Table.Row>
 
               <Table.Row>
-                <Table.Cell as="th" scope="row">
+                <Table.Cell
+                  as="th"
+                  scope="row"
+                  aria-label={intl.formatMessage(messages.functionality)}
+                >
                   <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.functionality)}
-                    </div>
+                    <CriterionLabel
+                      label={intl.formatMessage(messages.functionality)}
+                      tooltip={intl.formatMessage(
+                        messages.functionalityTooltip,
+                      )}
+                    />
                   </div>
                 </Table.Cell>
 

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

@@ -128,6 +128,16 @@ describe('CompareToolsView', () => {
     expect(
       screen.getByRole('rowheader', { name: 'Functionality' }),
     ).toHaveAttribute('scope', 'row');
+    expect(
+      screen.getByRole('button', {
+        name: 'This indicates how easy the tool and its outputs are to understand and interpret, with low = high-level expertise needed, moderate = some prior technical/scientific knowledge needed, high = general user-friendly, minimal technical knowledge needed.',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: 'Number of adaptation support cycle steps supported, from 1 to 6 steps.',
+      }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', {
         name: 'Remove Tool one from comparison',

package/src/components/theme/Footer/Footer.jsx

@@ -0,0 +1,137 @@
+/**
+ * Policy Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useSelector, shallowEqual } from 'react-redux';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
+import config from '@plone/volto/registry';
+import isArray from 'lodash/isArray';
+import messages from '@eeacms/volto-cca-policy/messages';
+
+const footerMessages = [
+  messages.sitemap,
+  messages.managedBy,
+  messages.exploreEnvironmentalInformationSystems,
+  messages.about,
+  messages.aboutUs,
+  messages.contact,
+  messages.contactUs,
+  messages.help,
+  messages.privacy,
+  messages.privacyStatement,
+  messages.accessibility,
+  messages.legalNotice,
+  messages.dashboard,
+  messages.login,
+  messages.cmsLogin,
+].reduce((result, message) => ({ ...result, [message.id]: message }), {});
+
+const Footer = () => {
+  const intl = useIntl();
+  const { eea } = config.settings;
+  const {
+    footerActions,
+    copyrightActions,
+    socialActions,
+    contactActions,
+    contactExtraActions,
+  } = useSelector(
+    (state) => ({
+      footerActions: state.actions?.actions?.footer_actions,
+      copyrightActions: state.actions?.actions?.copyright_actions,
+      socialActions: state.actions?.actions?.social_actions,
+      contactActions: state.actions?.actions?.contact_actions,
+      contactExtraActions: state.actions?.actions?.contact_extra_actions,
+    }),
+    shallowEqual,
+  );
+
+  const translate = (text) =>
+    footerMessages[text] ? intl.formatMessage(footerMessages[text]) : text;
+
+  // ZMI > portal_actions > footer_actions
+  const actions = isArray(footerActions)
+    ? footerActions.map((action) => ({
+        title: translate(action.title),
+        url: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.actions?.map((action) => ({
+        ...action,
+        title: translate(action.title),
+      }));
+
+  // ZMI > portal_actions > copyright_actions
+  const copyright = isArray(copyrightActions)
+    ? copyrightActions.map((action) => ({
+        title: translate(action.title),
+        site: translate(action.title),
+        url: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.copyright?.map((action) => ({
+        ...action,
+        title: translate(action.title),
+        site: translate(action.site),
+      }));
+
+  // ZMI > portal_actions > social_actions
+  const social = isArray(socialActions)
+    ? socialActions.map((action) => ({
+        name: action.id,
+        icon: action.icon,
+        url: action.url,
+      }))
+    : eea.footerOpts.social;
+
+  // ZMI > portal_actions > contact_actions
+  const contacts = isArray(contactActions)
+    ? contactActions.map((action, idx) => ({
+        text: translate(action.title),
+        icon: action.icon,
+        url: flattenToAppURL(action.url),
+        children:
+          idx === 0
+            ? (contactExtraActions || []).map((child) => ({
+                text: translate(child.title),
+                icon: child.icon,
+                url: flattenToAppURL(child.url),
+              }))
+            : [],
+      }))
+    : eea.footerOpts.contacts?.map((contact) => ({
+        ...contact,
+        text: translate(contact.text),
+        children: contact.children?.map((child) => ({
+          ...child,
+          text: translate(child.text),
+        })),
+      }));
+
+  // Update options with actions from backend
+  const options = {
+    ...eea.footerOpts,
+    social,
+    contacts,
+  };
+
+  return (
+    <EEAFooter>
+      <EEAFooter.Header>
+        {translate(eea.footerOpts.logosHeader)}
+      </EEAFooter.Header>
+      <EEAFooter.SubFooter {...options} />
+      <EEAFooter.Header>{translate(eea.footerOpts.header)}</EEAFooter.Header>
+      <EEAFooter.SitesButton
+        buttonName={translate(eea.footerOpts.buttonName)}
+        hrefButton={eea.footerOpts.hrefButton}
+      />
+      <EEAFooter.Social {...options} />
+      <EEAFooter.Actions actions={actions} copyright={copyright} />
+    </EEAFooter>
+  );
+};
+
+export default Footer;

package/src/customizations/volto/components/theme/App/App.jsx

@@ -25,7 +25,7 @@ import { injectIntl } from 'react-intl';
 import Error from '@plone/volto/error';
 
 import Breadcrumbs from '@plone/volto/components/theme/Breadcrumbs/Breadcrumbs';
-import Footer from '@plone/volto/components/theme/Footer/Footer';
+import Footer from '@eeacms/volto-cca-policy/components/theme/Footer/Footer';
 import Header from '@plone/volto/components/theme/Header/Header';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import OutdatedBrowser from '@plone/volto/components/theme/OutdatedBrowser/OutdatedBrowser';

package/src/index.js

@@ -3,6 +3,7 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
 import loadable from '@loadable/component';
 import { compose } from 'redux';
+import { buildTermFacetAggregationRequest } from '@eeacms/search/lib/search';
 import Sitemap from '@plone/volto/components/theme/Sitemap/Sitemap';
 import DefaultView from '@plone/volto/components/theme/View/DefaultView';
 import SelectAutoCompleteWidget from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
@@ -57,6 +58,7 @@ import NavigatorCatalogueContentView from './components/Search/NavigatorCatalogu
 import NavigatorGeographicCoverageFacet from './components/Search/NavigatorCatalogue/NavigatorGeographicCoverageFacet';
 import NavigatorGuideLayout from './components/Search/NavigatorGuide/NavigatorGuideLayout';
 import NavigatorGuideContentView from './components/Search/NavigatorGuide/NavigatorGuideContentView';
+import { getGeographicCoverageFacetValue } from './search/navigator_catalogue/geographicCoverage';
 
 import { langRedirection } from './store/middleware';
 
@@ -437,7 +439,9 @@ const applyConfig = (config) => {
   };
   config.settings.searchlib.resolve.NavigatorGeographicCoverageFacet = {
     ...config.settings.searchlib.resolve.MultiTermFacet,
+    buildRequest: buildTermFacetAggregationRequest,
     component: NavigatorGeographicCoverageFacet,
+    getValue: getGeographicCoverageFacetValue,
   };
   config.settings.searchlib.resolve.NavigatorGuideLayout = {
     component: NavigatorGuideLayout,

package/src/messages.js

@@ -21,6 +21,14 @@ const messages = defineMessages({
     id: 'Managed by',
     defaultMessage: 'Managed by',
   },
+  exploreEnvironmentalInformationSystems: {
+    id: 'Explore our environmental information systems',
+    defaultMessage: 'Explore our environmental information systems',
+  },
+  about: {
+    id: 'About',
+    defaultMessage: 'About',
+  },
   aboutUs: {
     id: 'About us',
     defaultMessage: 'About us',
@@ -29,6 +37,14 @@ const messages = defineMessages({
     id: 'Contact us',
     defaultMessage: 'Contact us',
   },
+  contact: {
+    id: 'Contact',
+    defaultMessage: 'Contact',
+  },
+  privacy: {
+    id: 'Privacy',
+    defaultMessage: 'Privacy',
+  },
   help: {
     id: 'Help',
     defaultMessage: 'Help',
@@ -53,6 +69,10 @@ const messages = defineMessages({
     id: 'Login',
     defaultMessage: 'Login',
   },
+  cmsLogin: {
+    id: 'CMS Login',
+    defaultMessage: 'CMS Login',
+  },
   phNews: {
     id: 'News',
     defaultMessage: 'News',

package/src/search/navigator_catalogue/config.js

@@ -4,6 +4,7 @@ import { getClientProxyAddress } from './../utils';
 import { vocab } from './../vocabulary';
 
 import facets from './facets';
+import { geographicCoverageRuntimeMappings } from './geographicCoverage';
 import views from './views';
 
 const navigatorCatalogueConfig = {
@@ -46,7 +47,10 @@ export default function installNavigatorCatalogueSearch(config) {
     index_name: 'data_searchui',
     host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
     vocab,
-    runtime_mappings: build_runtime_mappings(clusters),
+    runtime_mappings: {
+      ...build_runtime_mappings(clusters),
+      ...geographicCoverageRuntimeMappings,
+    },
   };
 
   const { navigatorCatalogueSearch } = config.searchui;

package/src/search/navigator_catalogue/facets.js

@@ -5,6 +5,7 @@ import {
   geographic_countries,
   language,
 } from './../common';
+import { CHARACTERISATION_FIELD } from './geographicCoverage';
 
 const messages = defineMessages({
   geographicCoverage: {
@@ -68,7 +69,7 @@ const facets = [
     alwaysVisible: false,
   }),
   multiTermFacet({
-    field: 'cca_geographic_characterisation.keyword',
+    field: CHARACTERISATION_FIELD,
     factory: 'NavigatorGeographicCoverageFacet',
     isFilterable: false,
     isMulti: true,

package/src/search/navigator_catalogue/geographicCoverage.js

@@ -0,0 +1,47 @@
+export const CHARACTERISATION_FIELD = 'cca_navigator_geographic_scope';
+export const TRANSNATIONAL_REGION_FIELD =
+  'cca_geographic_transnational_region.keyword';
+export const COUNTRIES_FIELD = 'cca_geographic_countries.keyword';
+
+export const geographicCoverageRuntimeMappings = {
+  [CHARACTERISATION_FIELD]: {
+    type: 'keyword',
+    script: {
+      source: `
+        boolean hasCountries = doc.containsKey('cca_geographic_countries.keyword') && doc['cca_geographic_countries.keyword'].size() != 0;
+        boolean hasTransnational = doc.containsKey('cca_geographic_transnational_region.keyword') && doc['cca_geographic_transnational_region.keyword'].size() != 0;
+        boolean hasSubnational = doc.containsKey('cca_sub_nationals.keyword') && doc['cca_sub_nationals.keyword'].size() != 0;
+        boolean hasCity = doc.containsKey('cca_city.keyword') && doc['cca_city.keyword'].size() != 0;
+
+        if (!hasCountries && !hasTransnational && !hasSubnational && !hasCity) {
+          for (def value : doc['cca_geographic_characterisation.keyword']) {
+            emit(value);
+          }
+        }
+      `,
+    },
+  },
+};
+
+export const getGeographicCoverageFacetValue = ({
+  aggregations,
+  fieldName,
+}) => {
+  const aggregation = aggregations?.[fieldName];
+  if (!aggregation) return undefined;
+
+  const counts = Object.fromEntries(
+    (aggregation.buckets || []).map(({ key, doc_count }) => [key, doc_count]),
+  );
+
+  return [
+    {
+      field: fieldName,
+      type: 'value',
+      data: ['Europe', 'Global'].map((value) => ({
+        value,
+        count: counts[value] || 0,
+      })),
+    },
+  ];
+};

package/src/search/navigator_catalogue/geographicCoverage.test.js

@@ -0,0 +1,65 @@
+import {
+  CHARACTERISATION_FIELD,
+  geographicCoverageRuntimeMappings,
+  getGeographicCoverageFacetValue,
+} from './geographicCoverage';
+
+describe('geographic coverage runtime mapping', () => {
+  it('defines an exclusive keyword scope from all specific location fields', () => {
+    const mapping = geographicCoverageRuntimeMappings[CHARACTERISATION_FIELD];
+
+    expect(mapping.type).toBe('keyword');
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_countries.keyword']",
+    );
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_transnational_region.keyword']",
+    );
+    expect(mapping.script.source).toContain("doc['cca_sub_nationals.keyword']");
+    expect(mapping.script.source).toContain("doc['cca_city.keyword']");
+    expect(mapping.script.source).toContain(
+      "doc['cca_geographic_characterisation.keyword']",
+    );
+  });
+});
+
+describe('geographic coverage facet value', () => {
+  it('keeps the facet available with zero counts when its buckets are empty', () => {
+    expect(
+      getGeographicCoverageFacetValue({
+        aggregations: {
+          [CHARACTERISATION_FIELD]: { buckets: [] },
+        },
+        fieldName: CHARACTERISATION_FIELD,
+      }),
+    ).toEqual([
+      {
+        field: CHARACTERISATION_FIELD,
+        type: 'value',
+        data: [
+          { value: 'Europe', count: 0 },
+          { value: 'Global', count: 0 },
+        ],
+      },
+    ]);
+  });
+
+  it('returns Europe and Global alphabetically with their counts', () => {
+    expect(
+      getGeographicCoverageFacetValue({
+        aggregations: {
+          [CHARACTERISATION_FIELD]: {
+            buckets: [
+              { key: 'Global', doc_count: 25 },
+              { key: 'Europe', doc_count: 20 },
+            ],
+          },
+        },
+        fieldName: CHARACTERISATION_FIELD,
+      })[0].data,
+    ).toEqual([
+      { value: 'Europe', count: 20 },
+      { value: 'Global', count: 25 },
+    ]);
+  });
+});

package/theme/globals/navigator.less

@@ -354,6 +354,22 @@
   margin-left: 0.5rem !important;
 }
 
+.ui.popup.compare-criteria-popup {
+  max-width: min(450px, calc(100vw - 2rem));
+
+  .usability-tooltip-introduction {
+    margin-bottom: 0.65rem;
+  }
+
+  .usability-tooltip-level {
+    strong {
+      font-weight: 700;
+      text-transform: capitalize;
+      color: @secondaryColor;
+    }
+  }
+}
+
 .navigator-catalogue-compare-view {
   overflow-x: auto;
 
@@ -431,6 +447,20 @@
     font-weight: 500;
   }
 
+  .compare-criteria-tooltip {
+    padding: 0;
+    border: 0;
+    margin-left: 0.4rem;
+    background: transparent;
+    color: @primaryColor;
+    cursor: pointer;
+    line-height: 1;
+
+    i.icon {
+      margin: 0;
+    }
+  }
+
   .usability-value,
   .functionality-value {
     color: @secondaryColor;