@eeacms/volto-n2k 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -4,11 +4,15 @@ 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.12](https://github.com/eea/volto-n2k/compare/0.1.11...0.1.12) - 30 September 2022
+### [0.1.14](https://github.com/eea/volto-n2k/compare/0.1.13...0.1.14) - 18 October 2022
+
+#### :hammer_and_wrench: Others
 
-#### :rocket: New Features
+- Prettier fix [Miu Razvan - [`0a9192d`](https://github.com/eea/volto-n2k/commit/0a9192dd9d51620f68b4adcc76aa0a58435700ca)]
+- Multilanguage landing page [Miu Razvan - [`a7ceedf`](https://github.com/eea/volto-n2k/commit/a7ceedf0fe304f0a220aa1b6f2737c86537e15da)]
+### [0.1.13](https://github.com/eea/volto-n2k/compare/0.1.12...0.1.13) - 30 September 2022
 
-- feat: Set font size to 16px on N2K [Miu Razvan - [`b11e184`](https://github.com/eea/volto-n2k/commit/b11e1840689232b778f9421e94369d0de64134ce)]
+### [0.1.12](https://github.com/eea/volto-n2k/compare/0.1.11...0.1.12) - 30 September 2022
 
 #### :hammer_and_wrench: Others
 

package/Jenkinsfile

@@ -108,62 +108,62 @@ pipeline {
       }
     }
 
-    // stage('Integration tests') {
-    //   when {
-    //     allOf {
-    //       environment name: 'CHANGE_ID', value: ''
-    //       anyOf {
-    //        not { changelog '.*^Automated release [0-9\\.]+$' }
-    //        branch 'master'
-    //       }
-    //     }
-    //   }
-    //   steps {
-    //     parallel(
-
-    //       "Cypress": {
-    //         node(label: 'docker') {
-    //           script {
-    //             try {
-    //               sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
-    //               sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
-    //             } finally {
-    //               try {
-    //                 sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
-    //                 sh '''mkdir -p cypress-reports cypress-results cypress-coverage'''
-    //                 sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/'''
-    //                 sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/'''
-    //                 coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true
-    //                 if ( coverage == 0 ) {
-    //                      publishHTML (target : [allowMissing: false,
-    //                          alwaysLinkToLastBuild: true,
-    //                          keepAll: true,
-    //                          reportDir: 'cypress-coverage/coverage/lcov-report',
-    //                          reportFiles: 'index.html',
-    //                          reportName: 'CypressCoverage',
-    //                          reportTitles: 'Integration Tests Code Coverage'])
-    //                 }
-    //                 sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
-    //                 archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
-    //                 stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
-    //               }
-    //               finally {
-    //                 catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
-    //                     junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
-    //                 }
-    //                 sh script: "docker stop $BUILD_TAG-plone", returnStatus: true
-    //                 sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true
-    //                 sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true
-
-    //               }
-    //             }
-    //           }
-    //         }
-    //       }
-
-    //     )
-    //   }
-    // }
+    stage('Integration tests') {
+      when {
+        allOf {
+          environment name: 'CHANGE_ID', value: ''
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
+        }
+      }
+      steps {
+        parallel(
+
+          "Cypress": {
+            node(label: 'docker') {
+              script {
+                try {
+                  sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
+                } finally {
+                  try {
+                    sh '''rm -rf cypress-reports cypress-results cypress-coverage'''
+                    sh '''mkdir -p cypress-reports cypress-results cypress-coverage'''
+                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/videos cypress-reports/'''
+                    sh '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/cypress/reports cypress-results/'''
+                    coverage = sh script: '''docker cp $BUILD_TAG-cypress:/opt/frontend/my-volto-project/src/addons/$GIT_NAME/coverage cypress-coverage/''', returnStatus: true
+                    if ( coverage == 0 ) {
+                         publishHTML (target : [allowMissing: false,
+                             alwaysLinkToLastBuild: true,
+                             keepAll: true,
+                             reportDir: 'cypress-coverage/coverage/lcov-report',
+                             reportFiles: 'index.html',
+                             reportName: 'CypressCoverage',
+                             reportTitles: 'Integration Tests Code Coverage'])
+                    }
+                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
+                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
+                    stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
+                  }
+                  finally {
+                    catchError(buildResult: 'SUCCESS', stageResult: 'SUCCESS') {
+                        junit testResults: 'cypress-results/**/*.xml', allowEmptyResults: true
+                    }
+                    sh script: "docker stop $BUILD_TAG-plone", returnStatus: true
+                    sh script: "docker rm -v $BUILD_TAG-plone", returnStatus: true
+                    sh script: "docker rm -v $BUILD_TAG-cypress", returnStatus: true
+
+                  }
+                }
+              }
+            }
+          }
+
+        )
+      }
+    }
 
     stage('Report to SonarQube') {
       when {
@@ -183,12 +183,12 @@ pipeline {
           script{
             checkout scm
             unstash "xunit-reports"
-            // unstash "cypress-coverage"
+            unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
             def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              // sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
+    "md5": "^2.3.0",
     "babel-plugin-transform-class-properties": "^6.24.1"
   },
   "scripts": {

package/src/components/manage/Blocks/Landing/DefalutView.jsx

@@ -4,6 +4,7 @@ import { generatePath } from 'react-router';
 import { Grid } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { withLocalStorage } from '@eeacms/volto-n2k/hocs';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import hiker from './images/hiker.webp';
 import { tiles, tileProps, getStyle } from './index';
 
@@ -18,6 +19,21 @@ const DefaultView = (props) => {
       >
         <Grid className="landing-page" container columns="12">
           <Grid.Row>
+            <Grid.Column
+              {...{
+                mobile: 12,
+                tablet: 12,
+                computer: 12,
+                largeScreen: 12,
+                widescreen: 12,
+              }}
+              style={{ zIndex: 1, marginBottom: '1rem' }}
+            >
+              <LanguageSelector
+                navigation={props.navigation}
+                className="landingpage-variation"
+              />
+            </Grid.Column>
             <Grid.Column
               className="landing-page-description"
               widescreen="6"
@@ -79,5 +95,6 @@ const DefaultView = (props) => {
 };
 
 export default connect((state) => ({
+  navigation: state.navigation,
   screen: state.screen,
 }))(withLocalStorage(DefaultView));

package/src/components/manage/Blocks/Landing/Edit.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Grid, Button } from 'semantic-ui-react';
 import { isEmpty } from 'lodash';
 import EditBlockWrapper from './EditBlockWrapper';
@@ -8,6 +9,7 @@ import { SidebarPortal, UniversalLink } from '@plone/volto/components';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import config from '@plone/volto/registry';
 import settingsSVG from '@plone/volto/icons/settings.svg';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import getSchema from './schema';
 import hiker from './images/hiker.webp';
@@ -98,6 +100,21 @@ const Edit = (props) => {
         >
           <Grid className="landing-page" container columns="12">
             <Grid.Row>
+              <Grid.Column
+                {...{
+                  mobile: 12,
+                  tablet: 12,
+                  computer: 12,
+                  largeScreen: 12,
+                  widescreen: 12,
+                }}
+                style={{ zIndex: 1, marginBottom: '1rem' }}
+              >
+                <LanguageSelector
+                  navigation={props.navigation}
+                  className="landingpage-variation"
+                />
+              </Grid.Column>
               <Grid.Column
                 className="landing-page-description"
                 widescreen="6"
@@ -216,4 +233,6 @@ const Edit = (props) => {
   );
 };
 
-export default Edit;
+export default connect((state) => ({
+  navigation: state.navigation,
+}))(Edit);

package/src/components/manage/Blocks/Landing/View.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Grid } from 'semantic-ui-react';
 import { RenderBlocks, UniversalLink } from '@plone/volto/components';
+import LanguageSelector from '@eeacms/volto-n2k/components/theme/LanguageSelector/LanguageSelector';
 import DefaultView from './DefalutView';
 import hiker from './images/hiker.webp';
 import { tileProps, getStyle } from './index';
@@ -17,6 +19,21 @@ const View = (props) => {
   ) : (
     <div className="landing-page-wrapper full-width" style={getStyle(props)}>
       <Grid className="landing-page" container columns="12">
+        <Grid.Column
+          {...{
+            mobile: 12,
+            tablet: 12,
+            computer: 12,
+            largeScreen: 12,
+            widescreen: 12,
+          }}
+          style={{ zIndex: 1, marginBottom: '1rem' }}
+        >
+          <LanguageSelector
+            navigation={props.navigation}
+            className="landingpage-variation"
+          />
+        </Grid.Column>
         <Grid.Row>
           <Grid.Column
             className="landing-page-description"
@@ -62,4 +79,6 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default connect((state) => ({
+  navigation: state.navigation,
+}))(View);

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

@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useContext } from 'react';
-import { withRouter } from 'react-router';
+import { matchPath, withRouter } from 'react-router';
 import { Container, Sticky } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { Portal } from 'react-portal';
@@ -47,6 +47,11 @@ const Navbar = (props) => {
 const Header = (props) => {
   const [isSticky, setIsSticky] = React.useState(false);
   const { stickyRef } = useContext(StickyContext);
+  const isRoot = !!matchPath(props.pathname, {
+    path: config.settings.multilingualRoot,
+    exact: true,
+    strict: false,
+  });
 
   useEffect(() => {
     if (!props.localStorage.get('N2K_LANGUAGE')) {
@@ -55,7 +60,7 @@ const Header = (props) => {
     /* eslint-disable-next-line */
   }, []);
 
-  return props.location.pathname === '/natura2000' ? (
+  return isRoot ? (
     ''
   ) : (
     <>

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import { withRouter, matchPath, generatePath } from 'react-router';
 import { useSelector } from 'react-redux';
+import cx from 'classnames';
 import { langmap } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Dropdown } from 'semantic-ui-react';
@@ -21,21 +22,31 @@ const LanguageSelector = (props) => {
   const localStorage = props.localStorage;
   const pathname = props.location.pathname;
   const currentLang = localStorage.get('N2K_LANGUAGE');
-  const match = matchPath(pathname, {
+  const matchRoot = matchPath(pathname, {
+    path: settings.multilingualRoot,
+    exact: true,
+    strict: false,
+  });
+  const matchChild = matchPath(pathname, {
     path: settings.multilingualPath,
     exact: true,
     strict: false,
   });
+  const match = matchRoot || matchChild;
   const hasMultilingualSupport =
     match && settings.supportedLanguages.includes(match.params.lang);
   const translations = hasMultilingualSupport
-    ? settings.supportedLanguages.map((lang) => ({
-        path: generatePath(settings.multilingualPath, {
-          ...match.params,
+    ? settings.supportedLanguages.map((lang) => {
+        return {
+          path: matchRoot
+            ? `/natura2000/${lang}`
+            : generatePath(settings.multilingualPath, {
+                ...match.params,
+                lang,
+              }),
           lang,
-        }),
-        lang,
-      }))
+        };
+      })
     : [];
   const supportedLanguagesOptions = settings.supportedLanguages.map((lang) => ({
     key: lang,
@@ -44,7 +55,7 @@ const LanguageSelector = (props) => {
   }));
 
   return (
-    <div className="language-selector">
+    <div className={cx('language-selector', props.className)}>
       <Dropdown
         aria-label="Language selector"
         disabled={content.get.loading}

package/src/components/theme/LanguageSelector/styles.less

@@ -41,4 +41,11 @@
       }
     }
   }
+
+  &.landingpage-variation {
+    .divider.text {
+      color: #fff !important;
+      font-size: 20px;
+    }
+  }
 }

package/src/components/theme/Navigation/Navigation.jsx

@@ -102,6 +102,7 @@ class Navigation extends Component {
     this.state = {
       isMobileMenuOpen: false,
       isSdf: false,
+      language: this.props.localStorage.get('N2K_LANGUAGE'),
     };
     this.container = React.createRef();
   }
@@ -260,7 +261,7 @@ class Navigation extends Component {
             />
           </div>
           <Menu.Item className="home-button logo">
-            <Link title="Natura 2000" to="/natura2000">
+            <Link title="Natura 2000" to={`/natura2000/${this.state.language}`}>
               <Icon name={n2kLogo} size={44} />
             </Link>
           </Menu.Item>