@eeacms/volto-cca-policy 1.0.16 → 1.0.17

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.17](https://github.com/eea/volto-cca-policy/compare/1.0.16...1.0.17) - 8 September 2026
+
+#### :rocket: New Features
+
+- feat(navigator):  add back to search link on tool view; code refactoring & cleanup - refs #304608 [kreafox - [`b80edc4`](https://github.com/eea/volto-cca-policy/commit/b80edc476f073a4023a06759765cb1ed1da874eb)]
+- feat: add MetadataTags component to display tool output types - refs #304612 [kreafox - [`da36a73`](https://github.com/eea/volto-cca-policy/commit/da36a7340da0d36a807b619e1da57d246b11b07d)]
+
+#### :nail_care: Enhancements
+
+- change: remove sectors from CompareToolsView - refs #304612 [kreafox - [`9b9352f`](https://github.com/eea/volto-cca-policy/commit/9b9352fa116a951ceef64511bc7c75779a7f0ec4)]
+
+#### :hammer_and_wrench: Others
+
+- test: remove sectors from CompareToolsView accessibility tests [kreafox - [`b3df4e2`](https://github.com/eea/volto-cca-policy/commit/b3df4e21aa79c6d9c726ad498fee2ce9af7f17a0)]
 ### [1.0.16](https://github.com/eea/volto-cca-policy/compare/1.0.15...1.0.16) - 4 September 2026
 
 ### [1.0.15](https://github.com/eea/volto-cca-policy/compare/1.0.14...1.0.15) - 4 September 2026

package/package.json

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

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

@@ -158,7 +158,7 @@ const NavigatorCatalogueContentView = (props) => {
         {children.length === 0 && !isLoading && wasSearched && <NoResults />}
 
         <ResultViewComponent>{children}</ResultViewComponent>
-        <CompareToolsPanel appConfig={appConfig} />
+        <CompareToolsPanel />
 
         {children.length > 0 && activeNavigatorViewId !== 'map' && (
           <div className="search-body-footer">

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

@@ -97,19 +97,16 @@ export const downloadCsv = (filename, rows) => {
   URL.revokeObjectURL(url);
 };
 
-export const getLocalizedLandingPageURL = (appConfig, currentLang = 'en') => {
+export const getNavigatorCataloguePageURL = (currentLang = 'en') => {
   const lang = currentLang || 'en';
-  const landingPageURL =
-    appConfig?.landingPageURL || '/en/navigator/tool-catalogue';
 
-  return landingPageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+  return `/${lang}/navigator/tool-catalogue`;
 };
 
-export const getComparePageURL = (appConfig, currentLang = 'en') => {
+export const getComparePageURL = (currentLang = 'en') => {
   const lang = currentLang || 'en';
-  const comparePageURL = appConfig?.comparePageURL || '/en/navigator/compare';
 
-  return comparePageURL.replace(/^\/en(?=\/|$)/, `/${lang}`);
+  return `/${lang}/navigator/compare`;
 };
 
 export const exportComparisonTable = (tools, getToolField) => {

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

@@ -6,7 +6,7 @@ import {
   exportComparisonTable,
   formatFunctionalityScore,
   getComparePageURL,
-  getLocalizedLandingPageURL,
+  getNavigatorCataloguePageURL,
   rawValueAsArray,
 } from './utils';
 
@@ -86,27 +86,16 @@ describe('Navigator Catalogue utilities', () => {
     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.each([undefined, '', 'en', 'fr', 'de'])(
+    'builds catalogue and comparison URLs for locale %s',
+    (locale) => {
+      const lang = locale || 'en';
+      expect(getNavigatorCataloguePageURL(locale)).toBe(
+        `/${lang}/navigator/tool-catalogue`,
+      );
+      expect(getComparePageURL(locale)).toBe(`/${lang}/navigator/compare`);
+    },
+  );
 
   it('exports every comparison criterion', () => {
     const tools = [

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

@@ -10,6 +10,7 @@ import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
 import { mergeGuideOptions } from './utils';
 import useGuideFacetOptions from './useGuideFacetOptions';
+import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 
 const messages = defineMessages({
   noSteps: {
@@ -177,9 +178,7 @@ const NavigatorGuideContentView = ({ appConfig }) => {
       allowedFields.has(field),
     );
     const query = new URLManager().stateToUrl({ filters: resultFilters });
-    const pathname = (
-      appConfig.resultsPageURL || '/en/navigator/tool-catalogue'
-    ).replace(/^\/en(?=\/|$)/, `/${currentLang}`);
+    const pathname = getNavigatorCataloguePageURL(currentLang);
 
     history.push({ pathname, search: query ? `?${query}` : '' });
   };

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

@@ -8,6 +8,7 @@ import {
   MAX_COMPARE_TOOLS,
   compareToolsAtom,
   getCompareLocation,
+  useHasMounted,
 } from './utils';
 
 const messages = defineMessages({
@@ -41,19 +42,21 @@ const messages = defineMessages({
   },
 });
 
-export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
+export const CompareToolsPanel = () => {
   const intl = useIntl();
   const history = useHistory();
   const currentLang = useSelector((state) => state.intl.locale);
-  const appConfig = suppliedAppConfig || {
-    landingPageURL: '/en/navigator/tool-catalogue',
-  };
   const [selectedTools, setSelectedTools] = useAtom(compareToolsAtom);
-  const resolvableSelectedTools = selectedTools.filter((tool) => tool.uid);
+  const hasMounted = useHasMounted();
+
+  const effectiveSelectedTools = hasMounted ? selectedTools : [];
+  const resolvableSelectedTools = effectiveSelectedTools.filter(
+    (tool) => tool.uid,
+  );
   const isReadyToCompare = resolvableSelectedTools.length >= 2;
-  const emptySlots = MAX_COMPARE_TOOLS - selectedTools.length;
+  const emptySlots = MAX_COMPARE_TOOLS - effectiveSelectedTools.length;
 
-  if (selectedTools.length === 0) return null;
+  if (!hasMounted || effectiveSelectedTools.length === 0) return null;
 
   const removeTool = (toolUid) => {
     setSelectedTools((tools) => tools.filter((tool) => tool.uid !== toolUid));
@@ -67,7 +70,7 @@ export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
     ].join('');
 
     history.push(
-      getCompareLocation(selectedTools, appConfig, returnURL, currentLang),
+      getCompareLocation(effectiveSelectedTools, returnURL, currentLang),
     );
   };
 
@@ -77,14 +80,14 @@ export const CompareToolsPanel = ({ appConfig: suppliedAppConfig }) => {
         <h2>
           {intl.formatMessage(messages.compareTools)}
           <span className="compare-panel-count">
-            {selectedTools.length}/{MAX_COMPARE_TOOLS}
+            {effectiveSelectedTools.length}/{MAX_COMPARE_TOOLS}
           </span>
         </h2>
       </div>
 
       <div className="compare-panel-content">
         <div className="compare-panel-tools">
-          {selectedTools.map((tool) => (
+          {effectiveSelectedTools.map((tool) => (
             <div key={tool.uid} className="compare-panel-tool">
               <span className="navigator-tool-icon small" aria-hidden="true">
                 <Icon className="ri-file-line" />

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

@@ -3,12 +3,13 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Provider as JotaiProvider } from 'jotai';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { CompareToolsPanel } from './CompareToolsPanel';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useSelector: (selector) => selector({ intl: { locale: 'en' } }),
+  useSelector: jest.fn(),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -16,7 +17,7 @@ jest.mock('react-router-dom', () => ({
   useHistory: jest.fn(),
 }));
 
-const renderPanel = (selectedTools, appConfig) => {
+const renderPanel = (selectedTools) => {
   window.localStorage.setItem(
     'cca-compare-tools',
     JSON.stringify(selectedTools),
@@ -25,7 +26,7 @@ const renderPanel = (selectedTools, appConfig) => {
   return render(
     <IntlProvider locale="en">
       <JotaiProvider>
-        <CompareToolsPanel appConfig={appConfig} />
+        <CompareToolsPanel />
       </JotaiProvider>
     </IntlProvider>,
   );
@@ -38,6 +39,8 @@ describe('CompareToolsPanel', () => {
     jest.clearAllMocks();
     window.localStorage.clear();
     useHistory.mockReturnValue({ push });
+    useSelector.mockReturnValue('en');
+    window.history.replaceState({}, '', '/');
   });
 
   it('does not render without selected tools', () => {
@@ -61,14 +64,17 @@ describe('CompareToolsPanel', () => {
     expect(screen.queryByText('Compare tools')).not.toBeInTheDocument();
   });
 
-  it('shows the ready state and opens the comparison page', () => {
-    renderPanel(
-      [
-        { uid: 'one', title: 'Tool one' },
-        { uid: 'two', title: 'Tool two' },
-      ],
-      { landingPageURL: '/en/navigator/tool-catalogue' },
+  it.each(['en', 'fr'])('opens the comparison page in %s', (locale) => {
+    useSelector.mockReturnValue(locale);
+    window.history.replaceState(
+      {},
+      '',
+      `/${locale}/navigator/tool-catalogue?q=water#results`,
     );
+    renderPanel([
+      { uid: 'one', title: 'Tool one' },
+      { uid: 'two', title: 'Tool two' },
+    ]);
 
     expect(screen.getByText('Ready to compare')).toHaveClass(
       'compare-panel-status',
@@ -78,9 +84,11 @@ describe('CompareToolsPanel', () => {
     fireEvent.click(screen.getByText('Compare selected tools'));
 
     expect(push).toHaveBeenCalledWith({
-      pathname: '/en/navigator/compare',
+      pathname: `/${locale}/navigator/compare`,
       search: '?uid=one&uid=two',
-      state: { returnURL: '/' },
+      state: {
+        returnURL: `/${locale}/navigator/tool-catalogue?q=water#results`,
+      },
     });
   });
 

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

@@ -28,7 +28,7 @@ import {
   asArray,
   exportComparisonTable,
   formatFunctionalityScore,
-  getLocalizedLandingPageURL,
+  getNavigatorCataloguePageURL,
 } from '../../Search/NavigatorCatalogue/utils';
 
 const messages = defineMessages({
@@ -99,10 +99,6 @@ const messages = defineMessages({
     id: 'Adaptation support cycle step',
     defaultMessage: 'Adaptation support cycle step',
   },
-  sector: {
-    id: 'Sector',
-    defaultMessage: 'Sector',
-  },
 });
 
 const getToolField = (tool, field) =>
@@ -111,6 +107,25 @@ const getToolField = (tool, field) =>
 const getToolFieldDisplay = (tool, field) =>
   asArray(getToolField(tool, field)).join(', ') || '—';
 
+const MetadataTags = ({ value }) => {
+  const intl = useIntl();
+  const items = asArray(value)
+    .map((item) => item?.title || item?.token || item)
+    .filter(Boolean);
+
+  return items.length ? (
+    <div className="metadata-tags">
+      {items.map((item, index) => (
+        <span className="metadata-tag" key={`${item}-${index}`}>
+          {intl.formatMessage({ id: item, defaultMessage: item })}
+        </span>
+      ))}
+    </div>
+  ) : (
+    '—'
+  );
+};
+
 const FieldValueList = ({ value, label }) => {
   const values = asArray(value);
 
@@ -205,8 +220,7 @@ const CompareToolsView = () => {
     [location.search],
   );
   const registry = config.settings.searchlib;
-  const appConfig = registry.searchui.navigatorCatalogueSearch;
-  const landingPageURL = getLocalizedLandingPageURL(appConfig, currentLang);
+  const landingPageURL = getNavigatorCataloguePageURL(currentLang);
   const compareToolsTitle = intl.formatMessage(messages.compareTools);
   const returnURL =
     location.state?.returnURL ||
@@ -462,7 +476,9 @@ const CompareToolsView = () => {
                 </Table.Cell>
                 {visibleTools.map((tool) => (
                   <Table.Cell key={`output-type-${tool.id}`}>
-                    {getToolFieldDisplay(tool, 'cca_type_of_outputs')}
+                    <MetadataTags
+                      value={getToolField(tool, 'cca_type_of_outputs')}
+                    />
                   </Table.Cell>
                 ))}
               </Table.Row>
@@ -488,23 +504,6 @@ const CompareToolsView = () => {
                   </Table.Cell>
                 ))}
               </Table.Row>
-              <Table.Row>
-                <Table.Cell as="th" scope="row">
-                  <div className="compare-criteria">
-                    <div className="compare-criteria-title">
-                      {intl.formatMessage(messages.sector)}
-                    </div>
-                  </div>
-                </Table.Cell>
-                {visibleTools.map((tool) => (
-                  <Table.Cell key={`sector-${tool.id}`}>
-                    <FieldValueList
-                      label={intl.formatMessage(messages.sector)}
-                      value={getToolField(tool, 'cca_adaptation_sectors')}
-                    />
-                  </Table.Cell>
-                ))}
-              </Table.Row>
             </Table.Body>
           </Table>
         )}

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

@@ -41,9 +41,7 @@ jest.mock('@plone/volto/registry', () => ({
     settings: {
       searchlib: {
         searchui: {
-          navigatorCatalogueSearch: {
-            landingPageURL: '/en/navigator/tool-catalogue',
-          },
+          navigatorCatalogueSearch: {},
         },
       },
     },
@@ -80,9 +78,6 @@ describe('CompareToolsView accessibility', () => {
         cca_adaptation_support_cycle_step: {
           raw: [{ title: 'Assessing risks' }, { title: 'Monitoring' }],
         },
-        cca_adaptation_sectors: {
-          raw: [{ title: 'Agriculture' }, { title: 'Water management' }],
-        },
       },
       {
         cca_uid: { raw: 'two' },
@@ -125,9 +120,5 @@ describe('CompareToolsView accessibility', () => {
     expect(adaptationSteps).toHaveTextContent('Assessing risks');
     expect(adaptationSteps).toHaveTextContent('Monitoring');
     expect(adaptationSteps.children).toHaveLength(2);
-    const sectors = screen.getByRole('list', { name: 'Sector' });
-    expect(sectors).toHaveTextContent('Agriculture');
-    expect(sectors).toHaveTextContent('Water management');
-    expect(sectors.children).toHaveLength(2);
   });
 });

package/src/components/theme/CompareTools/utils.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import { applyConfigurationSchema, rebind } from '@eeacms/search';
@@ -9,6 +10,16 @@ export const MAX_COMPARE_TOOLS = 4;
 export const compareToolsAtom = atomWithStorage('cca-compare-tools', []);
 const searchAppName = 'navigatorCatalogueSearch';
 
+export const useHasMounted = () => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  return hasMounted;
+};
+
 const getRawValue = (value) =>
   value?.raw !== undefined ? value.raw : value || '';
 
@@ -27,11 +38,14 @@ export const getPathname = (url) => {
 
 export const useCompareTools = (compareTool) => {
   const [selectedTools, setSelectedTools] = useAtom(compareToolsAtom);
-  const isSelected = selectedTools.some(
+  const hasMounted = useHasMounted();
+
+  const effectiveSelectedTools = hasMounted ? selectedTools : [];
+  const isSelected = effectiveSelectedTools.some(
     (tool) => tool.uid === compareTool?.uid,
   );
   const isLimitReached =
-    selectedTools.length >= MAX_COMPARE_TOOLS && !isSelected;
+    effectiveSelectedTools.length >= MAX_COMPARE_TOOLS && !isSelected;
 
   const setSelected = (selected) => {
     if (!compareTool?.uid) return;
@@ -57,15 +71,11 @@ export const useCompareTools = (compareTool) => {
     isLimitReached,
     setSelected,
     toggle: () => setSelected(!isSelected),
+    hasMounted,
   };
 };
 
-export const getCompareLocation = (
-  tools,
-  appConfig,
-  returnURL,
-  currentLang = 'en',
-) => {
+export const getCompareLocation = (tools, returnURL, currentLang = 'en') => {
   const params = new URLSearchParams();
 
   tools.slice(0, MAX_COMPARE_TOOLS).forEach((tool) => {
@@ -75,7 +85,7 @@ export const getCompareLocation = (
   });
 
   const query = params.toString();
-  const path = getComparePageURL(appConfig, currentLang);
+  const path = getComparePageURL(currentLang);
 
   return {
     pathname: path,

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

@@ -12,6 +12,7 @@ import {
   getCompareToolUid,
   getPathname,
   useCompareTools,
+  useHasMounted,
 } from './utils';
 
 jest.mock('@eeacms/search', () => ({
@@ -26,11 +27,12 @@ jest.mock('@plone/volto/helpers/Url/Url', () => ({
 }));
 
 const CompareHarness = ({ tool }) => {
-  const { isLimitReached, isSelected, setSelected, toggle } =
+  const { hasMounted, isLimitReached, isSelected, setSelected, toggle } =
     useCompareTools(tool);
 
   return (
     <>
+      <span data-testid="mounted">{String(hasMounted)}</span>
       <span data-testid="selected">{String(isSelected)}</span>
       <span data-testid="limit">{String(isLimitReached)}</span>
       <button type="button" onClick={toggle}>
@@ -95,19 +97,14 @@ describe('Compare Tools utilities', () => {
     ];
 
     expect(
-      getCompareLocation(
-        tools,
-        { landingPageURL: '/en/navigator/tool-catalogue' },
-        '/en/navigator/tool-catalogue?q=test',
-        'ro',
-      ),
+      getCompareLocation(tools, '/en/navigator/tool-catalogue?q=test', 'ro'),
     ).toEqual({
       pathname: '/ro/navigator/compare',
       search: '?uid=one&uid=two&uid=three',
       state: { returnURL: '/en/navigator/tool-catalogue?q=test' },
     });
     expect(MAX_COMPARE_TOOLS).toBe(4);
-    expect(getCompareLocation([], {}, undefined)).toEqual({
+    expect(getCompareLocation([])).toEqual({
       pathname: '/en/navigator/compare',
       search: '',
       state: { returnURL: undefined },
@@ -214,4 +211,20 @@ describe('Compare Tools utilities', () => {
     fireEvent.click(screen.getByText('Select'));
     expect(screen.getByTestId('selected')).toHaveTextContent('false');
   });
+
+  it('exposes hasMounted state to safely coordinate client hydration', () => {
+    renderCompareHarness({ uid: 'one', title: 'Tool one' });
+
+    expect(screen.getByTestId('mounted')).toHaveTextContent('true');
+  });
+
+  it('tracks mounting status with useHasMounted', () => {
+    const MountedComponent = () => {
+      const mounted = useHasMounted();
+      return <div data-testid="mounted-flag">{String(mounted)}</div>;
+    };
+
+    render(<MountedComponent />);
+    expect(screen.getByTestId('mounted-flag')).toHaveTextContent('true');
+  });
 });

package/src/components/theme/Views/ExtendedToolView.jsx

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
 import { Button, Container, Grid, Icon, Segment } from 'semantic-ui-react';
+import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import {
   CompareToolsPanel,
   ExtendedToolGeographicMetadata,
@@ -12,6 +14,7 @@ import { FormattedMessage } from 'react-intl';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
 import { useCompareTools } from '../CompareTools/utils';
+import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 import RelatedTools from './RelatedTools';
 
 const ExtendedToolView = (props) => {
@@ -55,6 +58,8 @@ const ExtendedToolView = (props) => {
   const hasGeoChars = Boolean(geochars || spatial_layer?.length);
   const hasHyperlink = Boolean(hyperlink && hyperlink.length > 0);
   const hasCompareTool = Boolean(content.UID);
+  const history = useHistory();
+  const currentLang = useSelector((state) => state.intl.locale);
 
   const compareTool = {
     uid: content.UID,
@@ -75,6 +80,10 @@ const ExtendedToolView = (props) => {
     return () => clearTimeout(timeout);
   }, [isLinkCopied, setIsLinkCopied]);
 
+  const checkNavigatorCatalogue = () => {
+    history.push(getNavigatorCataloguePageURL(currentLang));
+  };
+
   return (
     <div className="extended-tool-view">
       <BodyClass className="extended-tool" />
@@ -226,6 +235,17 @@ const ExtendedToolView = (props) => {
               className="col-right"
             >
               <Segment className="metadata">
+                <Button
+                  className="primary inverted"
+                  onClick={checkNavigatorCatalogue}
+                >
+                  <Icon className="ri-arrow-left-line" />
+                  <FormattedMessage
+                    id="Check Navigator Catalogue"
+                    defaultMessage="Check Navigator Catalogue"
+                  />
+                </Button>
+
                 <h4 className="metadata-header">Metadata</h4>
 
                 {intended_user_groups?.length > 0 && (

package/src/components/theme/Views/ExtendedToolView.test.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 
 import ExtendedToolView from './ExtendedToolView';
 import { useCompareTools } from '../CompareTools/utils';
@@ -11,8 +13,18 @@ jest.mock('../CompareTools/utils', () => ({
   useCompareTools: jest.fn(),
 }));
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
 jest.mock('@plone/volto/hooks/clipboard/useClipboard', () => jest.fn());
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: jest.fn(),
+}));
+
 jest.mock(
   '@plone/volto/components/manage/UniversalLink/UniversalLink',
   () =>
@@ -51,6 +63,7 @@ jest.mock('@eeacms/volto-cca-policy/components', () => ({
 const toggle = jest.fn();
 const copyShareUrl = jest.fn();
 const setIsLinkCopied = jest.fn();
+const push = jest.fn();
 
 const renderComponent = (content = {}) =>
   render(
@@ -69,6 +82,19 @@ describe('ExtendedToolView', () => {
       toggle,
     });
     useClipboard.mockReturnValue([false, copyShareUrl, setIsLinkCopied]);
+    useHistory.mockReturnValue({ push });
+    useSelector.mockReturnValue('en');
+  });
+
+  it.each(['en', 'fr'])('opens the Navigator Catalogue in %s', (locale) => {
+    useSelector.mockReturnValue(locale);
+    renderComponent({ title: 'Climate Tool' });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /check navigator catalogue/i }),
+    );
+
+    expect(push).toHaveBeenCalledWith(`/${locale}/navigator/tool-catalogue`);
   });
 
   it('renders the title', () => {

package/src/hocs/withClientOnly.jsx

@@ -1,6 +1,18 @@
+import React, { useEffect, useState } from 'react';
+
 export default function withClientOnly(WrappedComponent) {
   const WithClientWrappedComponent = (props) => {
-    return __SERVER__ ? null : <WrappedComponent {...props} />;
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+      setHasMounted(true);
+    }, []);
+
+    if (!hasMounted) {
+      return null;
+    }
+
+    return <WrappedComponent {...props} />;
   };
 
   return WithClientWrappedComponent;

package/src/hocs/withClientOnly.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import withClientOnly from './withClientOnly';
+
+describe('withClientOnly', () => {
+  it('renders the wrapped component after mount', () => {
+    const Component = (props) => (
+      <div data-testid="wrapped-content">{props.text}</div>
+    );
+    const ClientOnlyComponent = withClientOnly(Component);
+
+    render(<ClientOnlyComponent text="Client Hello" />);
+
+    expect(screen.getByTestId('wrapped-content')).toHaveTextContent(
+      'Client Hello',
+    );
+  });
+});

package/src/search/navigator_guide/config.js

@@ -8,7 +8,6 @@ const previewResultsLimit = 3;
 
 const navigatorGuideConfig = {
   title: 'Navigator Guide',
-  landingPageURL: '/en/navigator',
   alwaysSearchOnInitialLoad: true,
   resultsPerPage: previewResultsLimit,
   previewResultsLimit,
@@ -16,7 +15,6 @@ const navigatorGuideConfig = {
   showLandingPage: false,
   layoutComponent: 'NavigatorGuideLayout',
   contentBodyComponent: 'NavigatorGuideContentView',
-  resultsPageURL: '/en/navigator/tool-catalogue',
 };
 
 export default function installNavigatorGuideSearch(config) {

package/theme/globals/views.less

@@ -481,7 +481,6 @@ hr {
   }
 
   .metadata-header {
-    margin: 0;
     padding-bottom: 0.75rem;
     border-bottom: 1px dashed #dde3e9;
   }
@@ -519,28 +518,6 @@ hr {
     }
   }
 
-  .metadata-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  .metadata-tag {
-    padding: 0.35rem 0.75rem;
-    border: 1px solid #d5dde5;
-    border-radius: 2px;
-    color: #4c5a6b;
-    font-weight: 600;
-    line-height: 1.25;
-    font-size: 14px;
-  }
-
-  .metadata-tag-more {
-    background: transparent;
-    cursor: pointer;
-    font-family: inherit;
-  }
-
   .extended-tool-related {
     padding: 2.5rem;
     margin-top: 3rem;
@@ -663,14 +640,6 @@ hr {
     gap: 1rem;
   }
 
-  // .extended-tool-related-reason {
-  //   padding: 0.3rem 0.6rem;
-  //   background: #e4f2d8;
-  //   color: #0a7b6c;
-  //   font-size: 12px;
-  //   font-weight: 500;
-  // }
-
   .extended-tool-related-view {
     display: inline-flex;
     align-items: center;
@@ -697,6 +666,28 @@ hr {
   }
 }
 
+.metadata-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.metadata-tag {
+  padding: 0.35rem 0.75rem;
+  border: 1px solid #d5dde5;
+  border-radius: 2px;
+  color: #4c5a6b;
+  font-weight: 600;
+  line-height: 1.25;
+  font-size: 14px;
+}
+
+.metadata-tag-more {
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
 .extended-tool {
   .ui.segment.breadcrumbs {
     background-color: #f7f8fa;