@eeacms/volto-cca-policy 0.1.96 → 0.1.97

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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).
 
+### [0.1.97](https://github.com/eea/volto-cca-policy/compare/0.1.96...0.1.97) - 19 March 2024
+
+#### :rocket: New Features
+
+- feat: disable language from dropdown if there is no translation available [kreafox - [`016fda3`](https://github.com/eea/volto-cca-policy/commit/016fda3e3896c14a514544dd61c42dc0598c0d40)]
+
+#### :bug: Bug Fixes
+
+- fix: change language on observatory metadata item [kreafox - [`8c70250`](https://github.com/eea/volto-cca-policy/commit/8c70250944fa7619bdc6082a2c7afb0cbe9fb9fd)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`0d2cc5b`](https://github.com/eea/volto-cca-policy/commit/0d2cc5ba821fb00bc8653597698718f9b459128f)]
+- chore: cleanup, remove unused code [kreafox - [`58e9b0f`](https://github.com/eea/volto-cca-policy/commit/58e9b0f00dda8858be02c7afeef6652acb3f55ec)]
+- chore: code cleanup + refactor [kreafox - [`ec71f50`](https://github.com/eea/volto-cca-policy/commit/ec71f50b0da87b28bf36b0ba1d2fee4ad4a55b88)]
+
+#### :hammer_and_wrench: Others
+
+- Add sync translation button [Tiberiu Ichim - [`d1870df`](https://github.com/eea/volto-cca-policy/commit/d1870df49a3c6e0a450904370eaba0e9fa1d9a46)]
+- Add customization that solves adding translations from the web [Tiberiu Ichim - [`af9a8e1`](https://github.com/eea/volto-cca-policy/commit/af9a8e174622e940bb6d8091e7c7bc3befbab05e)]
+- i18n for database item [kreafox - [`6188d2d`](https://github.com/eea/volto-cca-policy/commit/6188d2d4bc50801790d9bb4fad83aebb31e525ff)]
 ### [0.1.96](https://github.com/eea/volto-cca-policy/compare/0.1.95...0.1.96) - 19 March 2024
 
 #### :rocket: New Features
@@ -709,10 +730,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -729,6 +753,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -945,6 +972,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -1425,6 +1453,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.96",
+  "version": "0.1.97",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -41,9 +41,9 @@
     "@eeacms/volto-widget-dataprovenance": "*",
     "@eeacms/volto-widget-geolocation": "*",
     "@eeacms/volto-widget-temporal-coverage": "*",
+    "d3-array": "^2.12.1",
     "jotai": "^1.6.0",
     "query-string": "7.1.0",
-    "d3-array": "^2.12.1",
     "react-visibility-sensor": "5.1.1"
   },
   "devDependencies": {

package/src/components/MigrationButtons.jsx

@@ -1,5 +1,5 @@
 import { Plug } from '@plone/volto/components/manage/Pluggable';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl, toPublicURL } from '@plone/volto/helpers';
 
 const button = (id, title, label, destination) => (
   <button
@@ -15,9 +15,9 @@ const button = (id, title, label, destination) => (
 function MigrationButtons(props) {
   const { content, token, pathname } = props;
   const contentId = content?.['@id'] || '';
-  const show = !!token && contentId && contentId.indexOf('europa.eu') === -1;
+  const show = !!token && contentId;
   const base = getBaseUrl(pathname);
-  const buttons = [
+  let buttons = [
     button(
       'migration',
       'Migrate context',
@@ -48,8 +48,25 @@ function MigrationButtons(props) {
       'P',
       `http://localhost:8080/cca/${base}/@@volto-html?half=1`,
     ),
+    button(
+      'sync-translations',
+      'Sync Translations',
+      'RT',
+      toPublicURL(`${base}/@@translate-this-async`),
+    ),
   ];
 
+  if (contentId.indexOf('europa.eu') > -1) {
+    buttons = [
+      button(
+        'sync-translations',
+        'Sync Translations',
+        'T',
+        `/${base}/@@translate-this-async`,
+      ),
+    ];
+  }
+
   if (!show) return null;
 
   return (

package/src/components/index.js

@@ -2,3 +2,4 @@ export ImageGallery from './theme/ImageGallery/ImageGallery';
 export BannerTitle from './theme/BannerTitle/BannerTitle';
 export PortalMessage from './theme/PortalMessage/PortalMessage';
 export TranslationDisclaimer from './theme/TranslationDisclaimer/TranslationDisclaimer';
+export ShareInfoButton from './theme/ShareInfoButton/ShareInfoButton';

package/src/components/manage/Blocks/Listing/IndicatorCardsListingView.jsx

@@ -5,7 +5,7 @@ import { compose } from 'redux';
 import cx from 'classnames';
 import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
-import { observatoryURL } from './common';
+import { makeObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
 import './styles.less';
 
 const fixedTitles = {
@@ -28,7 +28,9 @@ const IndicatorCardsListingView = ({ items, isEditMode, token }) => {
           <div className="wrapper">
             <div className="slot-top">
               <ConditionalLink
-                to={flattenToAppURL(getBaseUrl(observatoryURL(item)))}
+                to={flattenToAppURL(
+                  getBaseUrl(makeObservatoryMetadataURL(item['@id'])),
+                )}
                 condition={!isEditMode}
               >
                 <div className="listing-body">

package/src/components/manage/Blocks/Listing/OrganisationCardsListingView.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { observatoryURL } from './common';
-import { makeContributionsSearchQuery } from '@eeacms/volto-cca-policy/helpers';
+import {
+  makeContributionsSearchQuery,
+  makeObservatoryMetadataURL,
+} from '@eeacms/volto-cca-policy/helpers';
 import { UniversalLink } from '@plone/volto/components';
 
 import './styles.less';
@@ -23,7 +25,10 @@ const OrganisationCardsListingView = ({ items }) => {
         <div className="ui fluid card u-card" key={item['@id']}>
           <div className="content">
             <div className="header">
-              <UniversalLink className="image" href={observatoryURL(item)}>
+              <UniversalLink
+                className="image"
+                href={makeObservatoryMetadataURL(item['@id'])}
+              >
                 <div className="img-container">
                   <img
                     src={item['@id'] + '/@@images/logo/preview'}
@@ -34,7 +39,7 @@ const OrganisationCardsListingView = ({ items }) => {
               </UniversalLink>
               <UniversalLink
                 className="header-link org-name"
-                href={observatoryURL(item)}
+                href={makeObservatoryMetadataURL(item['@id'])}
               >
                 {item.title}
               </UniversalLink>

package/src/components/theme/Header/LanguageSwitch.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { find } from 'lodash';
+import { useAtom } from 'jotai';
+import { useSelector } from 'react-redux';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import { useLocation } from 'react-router-dom';
+import { Header } from '@eeacms/volto-eea-design-system/ui';
+import {
+  isObservatoryMetadataURL,
+  makeObservatoryMetadataURL,
+} from '@eeacms/volto-cca-policy/helpers';
+import cx from 'classnames';
+
+import { selectedLanguageAtom } from '../../../state';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+
+export default function LanguageSwitch({ history }) {
+  const { eea } = config.settings;
+  const location = useLocation();
+  const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+  const [, setSelectedLanguage] = useAtom(selectedLanguageAtom);
+  const width = useSelector((state) => state.screen?.width);
+
+  const currentLang = useSelector((state) => state.intl.locale);
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  const handlePageRedirect = (item) => {
+    const searchParams = new URLSearchParams();
+    const translation = find(translations, {
+      language: item.code,
+    });
+    const url = translation
+      ? flattenToAppURL(translation['@id'])
+      : `/${item.code}`;
+    const to = isObservatoryItem ? makeObservatoryMetadataURL(url) : url;
+
+    setLanguage(item.code);
+    setSelectedLanguage(item.code);
+    searchParams.set('set_language', item.code);
+
+    history.push({
+      pathname: to,
+      search: searchParams.toString(),
+    });
+  };
+
+  return (
+    <Header.TopDropdownMenu
+      id="language-switcher"
+      className="item"
+      hasLanguageDropdown={
+        config.settings.supportedLanguages.length > 1 &&
+        config.settings.hasLanguageDropdown
+      }
+      text={`${language.toUpperCase()}`}
+      mobileText={`${language.toUpperCase()}`}
+      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
+      viewportWidth={width}
+    >
+      <ul
+        className="wrapper language-list"
+        role="listbox"
+        aria-label="language switcher"
+      >
+        {eea.languages.map((item, index) => {
+          const translated = (translations || []).some(
+            (obj) => obj.language === item.code,
+          );
+          const active = item.code === currentLang;
+          const disabled = !translated && !active;
+
+          return (
+            <Dropdown.Item
+              className={cx({
+                disabled: disabled,
+                active: active,
+              })}
+              as="li"
+              key={index}
+              text={
+                <span>
+                  {item.name}
+                  <span className="country-code">
+                    {item.code.toUpperCase()}
+                  </span>
+                </span>
+              }
+              onClick={(e) =>
+                disabled || active
+                  ? e.preventDefault()
+                  : handlePageRedirect(item)
+              }
+            ></Dropdown.Item>
+          );
+        })}
+      </ul>
+    </Header.TopDropdownMenu>
+  );
+}

package/src/{helpers/ShareInfo.jsx → components/theme/ShareInfoButton/ShareInfoButton.jsx}

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { Button, Icon } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 
-const ShareInfo = (props) => {
+const ShareInfoButton = (props) => {
   const currentLang = useSelector((state) => state.intl.locale);
 
   return (
@@ -23,4 +23,4 @@ const ShareInfo = (props) => {
   );
 };
 
-export default ShareInfo;
+export default ShareInfoButton;

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

@@ -4,13 +4,13 @@ import {
   ContentMetadata,
   ReferenceInfo,
   PublishedModifiedInfo,
-  ShareInfo,
   BannerTitle,
   ItemLogo,
 } from '@eeacms/volto-cca-policy/helpers';
 import { Segment, Divider, Grid, ListItem, List } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import {
+  ShareInfoButton,
   PortalMessage,
   TranslationDisclaimer,
 } from '@eeacms/volto-cca-policy/components';
@@ -230,7 +230,7 @@ function AdaptationOptionView(props) {
               <ReferenceInfo content={content} />
 
               <PublishedModifiedInfo {...props} />
-              <ShareInfo {...props} />
+              <ShareInfoButton {...props} />
             </Grid.Column>
 
             <Grid.Column

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

@@ -5,11 +5,11 @@ import {
   LinksList,
   PublishedModifiedInfo,
   DocumentsList,
-  ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
 import { Divider, Grid, Icon, Image, ListItem, List } from 'semantic-ui-react';
 import {
+  ShareInfoButton,
   ImageGallery,
   PortalMessage,
   TranslationDisclaimer,
@@ -399,7 +399,7 @@ function CaseStudyView(props) {
                 </span>
                 )
               </p>
-              <ShareInfo {...props} />
+              <ShareInfoButton {...props} />
             </Grid.Column>
             <Grid.Column
               mobile={12}

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

@@ -13,24 +13,25 @@ import {
   ContentMetadata,
   PublishedModifiedInfo,
   ItemLogo,
-  ShareInfo,
   ContentRelatedItems,
   DocumentsList,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
 import {
+  ShareInfoButton,
   PortalMessage,
   TranslationDisclaimer,
 } from '@eeacms/volto-cca-policy/components';
-import { isObservatoryURL } from '@eeacms/volto-cca-policy/helpers/Utils';
+import { isObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
 import { Divider, Grid } from 'semantic-ui-react';
 import { useLocation } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
 
 const DatabaseItemView = (props) => {
   const { content } = props;
   const type = content['@type'];
   const location = useLocation();
-  const isObservatoryItem = isObservatoryURL(location.pathname);
+  const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
   const {
     title,
     acronym,
@@ -105,7 +106,12 @@ const DatabaseItemView = (props) => {
                 <>
                   {organisational_key_activities && (
                     <>
-                      <h3>Key activities within climate change and health</h3>
+                      <h3>
+                        <FormattedMessage
+                          id="Key activities within climate change and health"
+                          defaultMessage=" Key activities within climate change and health"
+                        />
+                      </h3>
                       <HTMLField value={organisational_key_activities} />
                     </>
                   )}
@@ -132,14 +138,24 @@ const DatabaseItemView = (props) => {
                 <>
                   {organisational_websites && (
                     <>
-                      <h5>Links to further information</h5>
+                      <h5>
+                        <FormattedMessage
+                          id="Links to further information"
+                          defaultMessage="Links to further information"
+                        />
+                      </h5>
                       <HTMLField value={organisational_websites} />
                     </>
                   )}
 
                   {organisational_contact_information && (
                     <>
-                      <h5>Contact information for the Observatory</h5>
+                      <h5>
+                        <FormattedMessage
+                          id="Contact information for the Observatory"
+                          defaultMessage="Contact information for the Observatory"
+                        />
+                      </h5>
                       <HTMLField value={organisational_contact_information} />
                     </>
                   )}
@@ -148,7 +164,7 @@ const DatabaseItemView = (props) => {
 
               <ContentRelatedItems {...props} />
               <PublishedModifiedInfo {...props} />
-              <ShareInfo {...props} />
+              <ShareInfoButton {...props} />
             </Grid.Column>
 
             <Grid.Column

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

@@ -3,12 +3,12 @@ import {
   HTMLField,
   ContentMetadata,
   PublishedModifiedInfo,
-  ShareInfo,
   ItemLogo,
   ReferenceInfo,
 } from '@eeacms/volto-cca-policy/helpers';
 import { Divider, Grid } from 'semantic-ui-react';
 import {
+  ShareInfoButton,
   PortalMessage,
   TranslationDisclaimer,
 } from '@eeacms/volto-cca-policy/components';
@@ -93,7 +93,7 @@ function ProjectView(props) {
               <Divider />
               <ReferenceInfo content={content} />
               <PublishedModifiedInfo {...props} />
-              <ShareInfo {...props} />
+              <ShareInfoButton {...props} />
             </Grid.Column>
             <Grid.Column
               mobile={12}

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

@@ -4,11 +4,11 @@ import {
   ReferenceInfo,
   ContentMetadata,
   ExternalLink,
-  ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
 import { Divider, Image, Grid } from 'semantic-ui-react';
 import {
+  ShareInfoButton,
   PortalMessage,
   TranslationDisclaimer,
 } from '@eeacms/volto-cca-policy/components';
@@ -90,7 +90,7 @@ function VideoView(props) {
               )}
 
               <ReferenceInfo content={content} />
-              <ShareInfo {...props} />
+              <ShareInfoButton {...props} />
             </Grid.Column>
             <Grid.Column
               mobile={12}

package/src/components/theme/Widgets/GeocharsWidget.jsx

@@ -6,7 +6,7 @@ import {
   WIDGET_MACRO_TRANS_REGIONS,
   WIDGET_BIOGEOGRAPHICAL_REGIONS,
   WIDGET_SUBNATIONAL_REGIONS_OPTIONS,
-} from '@eeacms/volto-cca-policy/helpers';
+} from './utils';
 
 import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';

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

@@ -0,0 +1,43 @@
+import {
+  ACE_COUNTRIES,
+  BIOREGIONS,
+  SUBNATIONAL_REGIONS,
+  EU_COUNTRIES,
+} from '@eeacms/volto-cca-policy/helpers';
+
+export const WIDGET_COUNTRIES = Object.entries(ACE_COUNTRIES)
+  .map(([code, name]) => ({
+    code,
+    name,
+    label: 'chk_countries_' + code,
+  }))
+  .filter((country) => EU_COUNTRIES.includes(country.code))
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+export const WIDGET_MACRO_TRANS_REGIONS = Object.entries(BIOREGIONS)
+  .map(([key, value]) => ({
+    key,
+    value: key,
+    text: value,
+  }))
+  .filter((macro) => macro.key.startsWith('TRANS_MACRO_'))
+  .sort((a, b) => a.text.localeCompare(b.name));
+
+export const WIDGET_BIOGEOGRAPHICAL_REGIONS = Object.entries(BIOREGIONS)
+  .map(([key, value]) => ({
+    key,
+    value: key,
+    text: value,
+  }))
+  .filter((macro) => macro.key.startsWith('TRANS_BIO_'))
+  .sort((a, b) => a.text.localeCompare(b.name));
+
+export const WIDGET_SUBNATIONAL_REGIONS_OPTIONS = Object.entries(
+  SUBNATIONAL_REGIONS,
+)
+  .map(([key, value]) => ({
+    key,
+    value: key,
+    text: value,
+  }))
+  .sort((a, b) => a.text.localeCompare(b.name));

package/src/customizations/volto/components/manage/Multilingual/README.md

@@ -0,0 +1,5 @@
+Customization of because in CCA the translationObject.language is a string
+
+```
+  const lang = translationObject.language.token || translationObject.language;
+```

package/src/customizations/volto/components/manage/Multilingual/TranslationObject.jsx

@@ -0,0 +1,157 @@
+/**
+ * Add container.
+ * @module components/manage/Add/Add
+ */
+
+import React, { useEffect, useState } from 'react';
+import { map } from 'lodash';
+import { defineMessages, useIntl } from 'react-intl';
+import { Form as UiForm, Menu, Segment } from 'semantic-ui-react';
+import { Provider } from 'react-intl-redux';
+import { Form, Field } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import configureStore from '@plone/volto/store';
+import {
+  Api,
+  flattenToAppURL,
+  langmap,
+  toGettextLang,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
+import { createBrowserHistory } from 'history';
+const messages = defineMessages({
+  document: {
+    id: 'Document',
+    defaultMessage: 'Document',
+  },
+});
+
+/**
+ * TranslationObject class.
+ * @class TranslationObject
+ * @extends Component
+ */
+const TranslationObject = ({
+  translationObject,
+  schema,
+  pathname,
+  visual,
+  isFormSelected,
+  onSelectForm,
+}) => {
+  const intl = useIntl();
+
+  const [locales, setLocales] = useState({});
+  const [loadingLocale, setLoadingLocale] = useState(false);
+  const [activeMenu, setActiveMenu] = useState('language');
+  const handleMenuClick = (e, { name }) => {
+    setActiveMenu(name);
+  };
+
+  useEffect(() => {
+    if (
+      !loadingLocale &&
+      Object.keys(locales).length < config.settings.supportedLanguages.length
+    ) {
+      setLoadingLocale(true);
+      let lang =
+        config.settings.supportedLanguages[Object.keys(locales).length];
+      const langFileName = toGettextLang(lang);
+      import('@root/../locales/' + langFileName + '.json').then((locale) => {
+        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
+        setLoadingLocale(false);
+      });
+    }
+  }, [loadingLocale, locales]);
+
+  const api = new Api();
+  const history = createBrowserHistory();
+  const store = configureStore(
+    {
+      ...window.__data,
+      intl: {
+        defaultLocale: config.settings.defaultLanguage,
+        locale: translationObject.language.token,
+        messages: locales[translationObject.language.token],
+      },
+    },
+    history,
+    api,
+  );
+
+  const lang = translationObject.language.token || translationObject.language;
+
+  return translationObject && Object.keys(locales).length > 0 ? (
+    <Provider store={store}>
+      <>
+        <Menu pointing secondary attached tabular>
+          <Menu.Item
+            name="language"
+            active={activeMenu === 'language'}
+            onClick={handleMenuClick}
+          >
+            {langmap[lang].nativeName}
+          </Menu.Item>
+          {visual && (
+            <Menu.Item
+              name="properties"
+              active={activeMenu === 'properties'}
+              onClick={handleMenuClick}
+            >
+              {intl.formatMessage(messages.document)}
+            </Menu.Item>
+          )}
+        </Menu>
+        {activeMenu === 'language' && (
+          <Form
+            key="translation-object-form"
+            schema={schema}
+            formData={translationObject}
+            type={translationObject['@type']}
+            onSubmit={() => {
+              /*do nothing*/
+            }}
+            hideActions
+            pathname={flattenToAppURL(translationObject['@id'])}
+            visual={visual}
+            title={langmap[lang].nativeName}
+            loading={false}
+            isFormSelected={isFormSelected}
+            onSelectForm={onSelectForm}
+            editable={false}
+            onChange={() => {}}
+          />
+        )}
+        {activeMenu === 'properties' && (
+          <UiForm method="post" onSubmit={() => {}}>
+            <fieldset className="invisible">
+              {schema &&
+                map(schema.fieldsets, (item) => [
+                  <Segment secondary attached key={item.title}>
+                    {item.title}
+                  </Segment>,
+                  <Segment attached key={`fieldset-contents-${item.title}`}>
+                    {map(item.fields, (field, index) => (
+                      <Field
+                        {...schema.properties[field]}
+                        isDisabled={true}
+                        id={field}
+                        formData={translationObject}
+                        focus={false}
+                        value={translationObject[field]}
+                        required={schema.required.indexOf(field) !== -1}
+                        key={field}
+                        onChange={() => {}}
+                      />
+                    ))}
+                  </Segment>,
+                ])}
+            </fieldset>
+          </UiForm>
+        )}
+      </>
+    </Provider>
+  ) : null;
+};
+
+export default TranslationObject;

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

@@ -1,3 +1,3 @@
-import Header from '@eeacms/volto-cca-policy/components/theme/Header';
+import Header from '@eeacms/volto-cca-policy/components/theme/Header/Header';
 
 export default Header;

package/src/express-middleware.js

@@ -35,6 +35,7 @@ export default function (config) {
       '**/@@case-studies-map.arcgis.json',
       '**@countries-metadata-extract',
       '**@@countries-heat-index-json',
+      '**@@translate-this-async',
     ],
     viewMiddleware,
   );

package/src/helpers/Constants.jsx

@@ -531,40 +531,3 @@ export const EU_COUNTRIES = [
   'SI',
   'SK',
 ];
-
-export const WIDGET_COUNTRIES = Object.entries(ACE_COUNTRIES)
-  .map(([code, name]) => ({
-    code,
-    name,
-    label: 'chk_countries_' + code,
-  }))
-  .filter((country) => EU_COUNTRIES.includes(country.code))
-  .sort((a, b) => a.name.localeCompare(b.name));
-
-export const WIDGET_MACRO_TRANS_REGIONS = Object.entries(BIOREGIONS)
-  .map(([key, value]) => ({
-    key,
-    value: key,
-    text: value,
-  }))
-  .filter((macro) => macro.key.startsWith('TRANS_MACRO_'))
-  .sort((a, b) => a.text.localeCompare(b.name));
-
-export const WIDGET_BIOGEOGRAPHICAL_REGIONS = Object.entries(BIOREGIONS)
-  .map(([key, value]) => ({
-    key,
-    value: key,
-    text: value,
-  }))
-  .filter((macro) => macro.key.startsWith('TRANS_BIO_'))
-  .sort((a, b) => a.text.localeCompare(b.name));
-
-export const WIDGET_SUBNATIONAL_REGIONS_OPTIONS = Object.entries(
-  SUBNATIONAL_REGIONS,
-)
-  .map(([key, value]) => ({
-    key,
-    value: key,
-    text: value,
-  }))
-  .sort((a, b) => a.text.localeCompare(b.name));

package/src/helpers/ContentMetadata.jsx

@@ -11,7 +11,7 @@ import {
 } from '@eeacms/volto-cca-policy/helpers/Constants';
 import { Fragment } from 'react';
 import { Popup, Segment } from 'semantic-ui-react';
-import { isObservatoryURL } from '@eeacms/volto-cca-policy/helpers/Utils';
+import { isObservatoryMetadataURL } from '@eeacms/volto-cca-policy/helpers';
 import { useLocation } from 'react-router-dom';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
@@ -350,7 +350,7 @@ function ContentMetadata(props) {
   } = content;
   const type = content['@type'];
   const location = useLocation();
-  const isObservatoryItem = isObservatoryURL(location.pathname);
+  const isObservatoryItem = isObservatoryMetadataURL(location.pathname);
   const hasGeoChars = geochars !== null || spatial_layer.length > 0;
 
   const intl = useIntl();

package/src/helpers/Utils.jsx

@@ -419,7 +419,3 @@ export const ItemLogo = (props) => {
     </LogoWrapper>
   );
 };
-
-export const isObservatoryURL = (url) => {
-  return url.indexOf('/observatory/++aq++metadata') > -1;
-};

package/src/helpers/index.js

@@ -1,6 +1,4 @@
-import superagent from 'superagent';
 import config from '@plone/volto/registry';
-import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy';
 import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { OBSERVATORY_PARTNERS } from './Constants';
@@ -17,51 +15,15 @@ export {
   ItemLogo,
 } from './Utils';
 export { default as ContentMetadata } from './ContentMetadata';
-export { default as ShareInfo } from './ShareInfo';
 export {
   ACE_COUNTRIES,
   BIOREGIONS,
   OTHER_REGIONS,
   SUBNATIONAL_REGIONS,
   EU_COUNTRIES,
-  WIDGET_COUNTRIES,
-  WIDGET_MACRO_TRANS_REGIONS,
-  WIDGET_BIOGEOGRAPHICAL_REGIONS,
-  WIDGET_SUBNATIONAL_REGIONS_OPTIONS,
 } from './Constants';
 export clientOnly from './clientOnly';
 
-/**
- * Get a resource image/file with authenticated (if token exist) API headers
- * @function getBackendResourceWithAuth
- * @param {Object} req Request object
- * @return {string} The response with the image
- */
-export const getBackendResourceWithAuth = (req) =>
-  new Promise((resolve, reject) => {
-    const { settings } = config;
-
-    let apiPath = '';
-    if (settings.internalApiPath && __SERVER__) {
-      apiPath = settings.internalApiPath;
-    } else if (__DEVELOPMENT__ && settings.devProxyToApiPath) {
-      apiPath = settings.devProxyToApiPath;
-    } else {
-      apiPath = settings.apiPath;
-    }
-    const backendURL = `${apiPath}${req.path}`;
-    const request = superagent
-      .get(backendURL)
-      .maxResponseSize(settings.maxResponseSize)
-      .responseType('blob');
-    const authToken = req.universalCookies.get('auth_token');
-    if (authToken) {
-      request.set('Authorization', `Bearer ${authToken}`);
-    }
-    request.use(addHeadersFactory(req));
-    request.then(resolve).catch(reject);
-  });
-
 export const createSlateParagraph = (text) => {
   return isArray(text) ? text : config.settings.slate.defaultValue();
 };
@@ -91,3 +53,11 @@ export const makeContributionsSearchQuery = (props) => {
 
   return url;
 };
+
+export const isObservatoryMetadataURL = (url) => {
+  return url.indexOf('/observatory/++aq++metadata') > -1;
+};
+
+export const makeObservatoryMetadataURL = (url) => {
+  return url.replace('/metadata/', '/observatory/++aq++metadata/');
+};

package/theme/extras/header.overrides

@@ -17,3 +17,20 @@
   opacity: 0.6;
   pointer-events: none;
 }
+
+.language-list {
+  li.item.disabled {
+    color: #a1a1a1 !important;
+
+    &:hover {
+      background: none !important;
+      cursor: auto !important;
+    }
+  }
+
+  li.item.active {
+    background: @dropdownMenuItemBackgroundColorHover !important;
+    color: @dropdownMenuItemColorHover !important;
+    cursor: auto !important;
+  }
+}

package/src/components/manage/Blocks/Listing/common.js

@@ -1,3 +0,0 @@
-export const observatoryURL = (item) => {
-  return item['@id'].replace('/metadata/', '/observatory/++aq++metadata/');
-};

package/src/components/theme/LanguageSwitch.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { Header } from '@eeacms/volto-eea-design-system/ui';
-import { find } from 'lodash';
-import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
-import { useSelector } from 'react-redux';
-import config from '@plone/volto/registry';
-import { Dropdown, Image } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { useAtom } from 'jotai';
-import { selectedLanguageAtom } from './../../state';
-
-// dispatch(changeLanguage(redirectToLanguage, locale.default));
-export default function LanguageSwitch({ history }) {
-  const { eea } = config.settings;
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-  const [, setSelectedLanguage] = useAtom(selectedLanguageAtom);
-  const width = useSelector((state) => state.screen?.width);
-
-  const currentLang = useSelector((state) => state.intl.locale);
-  const [language, setLanguage] = React.useState(
-    currentLang || eea.defaultLanguage,
-  );
-
-  return (
-    <Header.TopDropdownMenu
-      id="language-switcher"
-      className="item"
-      hasLanguageDropdown={
-        config.settings.supportedLanguages.length > 1 &&
-        config.settings.hasLanguageDropdown
-      }
-      text={`${language.toUpperCase()}`}
-      mobileText={`${language.toUpperCase()}`}
-      icon={<Image src={globeIcon} alt="language dropdown globe icon"></Image>}
-      viewportWidth={width}
-    >
-      <ul
-        className="wrapper language-list"
-        role="listbox"
-        aria-label="language switcher"
-      >
-        {eea.languages.map((item, index) => (
-          <Dropdown.Item
-            as="li"
-            key={index}
-            text={
-              <span>
-                {item.name}
-                <span className="country-code">{item.code.toUpperCase()}</span>
-              </span>
-            }
-            onClick={() => {
-              const translation = find(translations, {
-                language: item.code,
-              });
-              const to = translation
-                ? flattenToAppURL(translation['@id'])
-                : `/${item.code}`;
-              setLanguage(item.code);
-              setSelectedLanguage(item.code);
-              const searchParams = new URLSearchParams();
-              searchParams.set('set_language', item.code);
-              history.push({
-                pathname: to,
-                search: searchParams.toString(),
-              });
-            }}
-          ></Dropdown.Item>
-        ))}
-      </ul>
-    </Header.TopDropdownMenu>
-  );
-}