@eeacms/volto-clms-theme 1.0.45 → 1.0.49

package/CHANGELOG.md

@@ -4,8 +4,61 @@ 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.49](https://github.com/eea/volto-clms-theme/compare/1.0.48...1.0.49)
+
+- labels and conformity pass [`59be2fd`](https://github.com/eea/volto-clms-theme/commit/59be2fd5034fdfed211c4e0b0872504432e254e9)
+- image [`47cc7dc`](https://github.com/eea/volto-clms-theme/commit/47cc7dc37974848f2d90cdf6a035970620489cf8)
+
+#### [1.0.48](https://github.com/eea/volto-clms-theme/compare/1.0.47...1.0.48)
+
+> 16 December 2021
+
+- Develop [`#156`](https://github.com/eea/volto-clms-theme/pull/156)
+- dataset view [`38faa9d`](https://github.com/eea/volto-clms-theme/commit/38faa9d291e22c92a1c9049c7241555b2300f830)
+- tab editor [`cfbcf74`](https://github.com/eea/volto-clms-theme/commit/cfbcf742b370cc665c689a2480a09d3b640dc318)
+- remove required to description in proptypes [`9f6da1d`](https://github.com/eea/volto-clms-theme/commit/9f6da1d9c2125865c329a263d0a7b3e771baa287)
+- map keys [`6be4246`](https://github.com/eea/volto-clms-theme/commit/6be424624a61f867f85b6d914811111405ebeb98)
+- add resolutions to package.json volto-slate and react-slick [`54460ad`](https://github.com/eea/volto-clms-theme/commit/54460addb4c4644a03e6af2f94e5c75ee5154bf3)
+- check if items is not null [`26b4399`](https://github.com/eea/volto-clms-theme/commit/26b439981ca354b0f372bdf09a112a58482f2d4b)
+- fix subtab functionality and show subtab in editor [`ece4408`](https://github.com/eea/volto-clms-theme/commit/ece4408bd557a1d2f2868733e1560e2853da1822)
+
+#### [1.0.47](https://github.com/eea/volto-clms-theme/compare/1.0.46...1.0.47)
+
+> 16 December 2021
+
+- Develop [`#155`](https://github.com/eea/volto-clms-theme/pull/155)
+- use smaller images in Cards [`#147`](https://github.com/eea/volto-clms-theme/pull/147)
+- Demo modifications [`#154`](https://github.com/eea/volto-clms-theme/pull/154)
+- Geonetwork fields [`#153`](https://github.com/eea/volto-clms-theme/pull/153)
+- Sub tab option created [`#152`](https://github.com/eea/volto-clms-theme/pull/152)
+- add Role label [`ae98fda`](https://github.com/eea/volto-clms-theme/commit/ae98fdac159d385554a67d3a0690ba17b5dfa244)
+- show all the fields of geonetwork [`9eae556`](https://github.com/eea/volto-clms-theme/commit/9eae55614a26e84613dd747451e9a3fb864a6ac4)
+- if parent tab is clicked sub tab is opened [`5cc5d1c`](https://github.com/eea/volto-clms-theme/commit/5cc5d1c93691985965640499951e0a905da8acbb)
+- add the content url to the simple line listing template [`6ad396f`](https://github.com/eea/volto-clms-theme/commit/6ad396fdaf1850a3d509f4f640e421278341b74b)
+- pretier fix on text carousel [`5e18334`](https://github.com/eea/volto-clms-theme/commit/5e183349cf13b6f2739dbbfbbd48617bc6c9c34c)
+- SubTab style set [`73d9fa8`](https://github.com/eea/volto-clms-theme/commit/73d9fa85b05055b180409927583b71dc0a562f0f)
+- remove default image from New and Event view [`0ef541d`](https://github.com/eea/volto-clms-theme/commit/0ef541dbede5316c46f48585b9728a672f03b7ad)
+- use smaller images [`a545b9e`](https://github.com/eea/volto-clms-theme/commit/a545b9ed547fa124903b66987e6d7b3e46c17146)
+
+#### [1.0.46](https://github.com/eea/volto-clms-theme/compare/1.0.45...1.0.46)
+
+> 15 December 2021
+
+- Develop [`#151`](https://github.com/eea/volto-clms-theme/pull/151)
+- volto-form-block style [`#150`](https://github.com/eea/volto-clms-theme/pull/150)
+- Bugs n improvements [`#149`](https://github.com/eea/volto-clms-theme/pull/149)
+- Develop [`#148`](https://github.com/eea/volto-clms-theme/pull/148)
+- li styles [`3b01bbf`](https://github.com/eea/volto-clms-theme/commit/3b01bbf09c1b60bde0bf101f8ca5382ded58763b)
+- h1 display block [`5e922f6`](https://github.com/eea/volto-clms-theme/commit/5e922f60c4e5ce19c5b6949dab494add2140dd6e)
+- dataset catalogue h1 display [`e88a6c8`](https://github.com/eea/volto-clms-theme/commit/e88a6c88b6ed3ddad765f9d4161ca405de04ecb4)
+- fixed CclLoginModal PropTypes [`09db647`](https://github.com/eea/volto-clms-theme/commit/09db647d09af66ea717c0b9be1650bd99882c6e6)
+- ESLint fix [`e4d19cd`](https://github.com/eea/volto-clms-theme/commit/e4d19cd1d78a8a1e82d606d6f3ac586c6122b8e2)
+
 #### [1.0.45](https://github.com/eea/volto-clms-theme/compare/1.0.44...1.0.45)
 
+> 13 December 2021
+
+- Develop [`#143`](https://github.com/eea/volto-clms-theme/pull/143)
 - Geonetwork importer [`#146`](https://github.com/eea/volto-clms-theme/pull/146)
 - @userschema endpoint based dynamic user profile form [`#145`](https://github.com/eea/volto-clms-theme/pull/145)
 - Changes after the release of ftw.tokenauth 2.0+cs5 [`#144`](https://github.com/eea/volto-clms-theme/pull/144)

package/Jenkinsfile

@@ -31,8 +31,8 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { branch 'master' }
           not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
         }
       }
       steps {
@@ -63,7 +63,10 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
         }
       }
       steps {
@@ -108,7 +111,10 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
         }
       }
       steps {
@@ -159,12 +165,16 @@ pipeline {
 
     stage('Report to SonarQube') {
       when {
+        allOf {
           environment name: 'CHANGE_ID', value: ''
           anyOf {
             branch 'master'
-            branch 'develop'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
           }
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
       }
       steps {
         node(label: 'swarm') {

package/README.md

@@ -1,7 +1,18 @@
 # volto-clms-theme
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-clms-theme)](https://github.com/eea/volto-clms-theme/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-clms-theme%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-clms-theme/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-clms-theme%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-clms-theme/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
 
 [Volto](https://github.com/plone/volto) add-on
 
@@ -46,6 +57,81 @@ Demo GIF
 
 1. Happy editing!
 
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-clms-theme/blob/master/DEVELOP.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.45",
+  "version": "1.0.49",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,6 +29,10 @@
     "volto-form-block",
     "@eeacms/volto-taxonomy"
   ],
+  "resolutions": {
+    "volto-slate": "4.2.1",
+    "react-slick": "0.28.1"
+  },
   "dependencies": {
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-accordion-block": "3.4.7",
@@ -101,6 +105,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:theme": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'theme/**/*.{css,less}'",

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -1,12 +1,14 @@
+import './fontawesome';
+
+import { NavLink, Route } from 'react-router-dom';
+
 import React from 'react';
-import { connect } from 'react-redux';
+import { RenderBlocks } from '@plone/volto/components';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { withRouter } from 'react-router';
-import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalTabsView = (props) => {
   const { metadata = {}, tabsList = [], ExtraComponent = null } = props;
@@ -47,16 +49,28 @@ const CclVerticalTabsView = (props) => {
               setActiveTab = () => {},
             } = props;
             const title = tabs[tab].title;
+            const subTab = tabs[tab]?.subTab?.subtab || false;
             const tabIndex = index + 1;
+            const nextTabIndex = index + 2;
+            const nextSubTab =
+              tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
             const defaultTitle = `Tab ${tabIndex}`;
             return (
               <div
                 key={index}
                 id={tabIndex}
-                className={cx('card', tab === activeTab && 'active')}
+                className={cx(
+                  'card',
+                  tab === activeTab && 'active',
+                  subTab && 'subcard',
+                )}
               >
                 <NavLink
-                  to={'#tab' + tabIndex}
+                  to={
+                    subTab === false && nextSubTab !== false
+                      ? '#tab' + nextTabIndex
+                      : '#tab' + tabIndex
+                  }
                   className="collapsed"
                   onClick={(e) => {
                     if (activeTab !== tab) {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -1,23 +1,28 @@
-import React from 'react';
-import { v4 as uuid } from 'uuid';
+import './fontawesome';
+
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Grid, Header } from 'semantic-ui-react';
+import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 import { omit, without } from 'lodash';
-import move from 'lodash-move';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+
 import { DragDropList } from '@plone/volto/components';
-import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import React from 'react';
+import { SidebarPopup } from '@plone/volto/components';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
+import clearSVG from '@plone/volto/icons/clear.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
+import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { fontAwesomeSchema } from './fontAwesomeSchema';
+import leftMenuSVG from '@plone/volto/icons/nav.svg';
+import move from 'lodash-move';
+import plusSVG from '@plone/volto/icons/circle-plus.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+import { subTabSchema } from './subTabSchema';
 import themeSVG from '@plone/volto/icons/theme.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faIcons, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import plusSVG from '@plone/volto/icons/circle-plus.svg';
-import { SidebarPopup } from '@plone/volto/components';
-import { fontAwesomeSchema } from './fontAwesomeSchema';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import './fontawesome';
-import { Header, Grid } from 'semantic-ui-react';
+import { v4 as uuid } from 'uuid';
 
 export function moveColumn(formData, source, destination) {
   return {
@@ -36,6 +41,7 @@ const TabsWidget = (props) => {
   const [blockStyleVisible, setBlockStyleVisible] = React.useState(false);
   const [activeTabId, setActiveTabId] = React.useState(0);
   const [activeFontAwesomePopup, setActiveFontAwesomePopup] = React.useState(0);
+  const [activeSubTabPopup, setActiveSubTabPopup] = React.useState(0);
 
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
@@ -83,7 +89,18 @@ const TabsWidget = (props) => {
                     <Icon name={dragSVG} size="18px" />
                   </div>
                   <div className="tab-area">
-                    <div className="label">
+                    <div
+                      className="label"
+                      style={{
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        maxWidth: '65%',
+                      }}
+                    >
+                      {child.subTab?.subtab === true && (
+                        <Icon name={rightSVG} size="18px" />
+                      )}
                       {child.title || `Tab ${index + 1}`}
                     </div>
                     <button
@@ -190,6 +207,52 @@ const TabsWidget = (props) => {
                       />
                     </SidebarPopup>
 
+                    <button
+                      onClick={() => {
+                        setActiveTabId(childId);
+                        setActiveSubTabPopup(true);
+                      }}
+                      title="Sub Tab"
+                    >
+                      <Icon size={'24px'} name={leftMenuSVG} />
+                    </button>
+                    <SidebarPopup open={activeSubTabPopup}>
+                      <InlineForm
+                        schema={subTabSchema()}
+                        title={
+                          <>
+                            {subTabSchema().title}
+                            <button
+                              onClick={() => {
+                                setActiveSubTabPopup(false);
+                              }}
+                              style={{ float: 'right' }}
+                            >
+                              <Icon name={clearSVG} size="24px" />
+                            </button>
+                          </>
+                        }
+                        formData={{
+                          ...activeTabData?.subTab,
+                        }}
+                        onChangeField={(idTab, formValue) => {
+                          onChange(id, {
+                            ...value,
+                            blocks: {
+                              ...value.blocks,
+                              [activeTabId]: {
+                                ...(activeTabData || {}),
+                                subTab: {
+                                  ...activeTabData?.subTab,
+                                  [idTab]: formValue,
+                                },
+                              },
+                            },
+                          });
+                        }}
+                      />
+                    </SidebarPopup>
+
                     {value.blocks_layout?.items?.length > 1 ? (
                       <button
                         onClick={() => {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less

@@ -76,3 +76,8 @@ p.styled-slate {
     margin-top: -4rem;
   }
 }
+
+div.tabs-block.edit a.item.active p.menu-item-text {
+  border-style: none none solid none;
+  font-weight: bold;
+}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/subTabSchema.js

@@ -0,0 +1,19 @@
+export const subTabSchema = () => ({
+  title: 'Vertical tab block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['subtab'],
+    },
+  ],
+  properties: {
+    subtab: {
+      title: 'Is subtab',
+      description: 'Define if this tab is a subTab',
+      type: 'boolean',
+      default: false,
+    },
+  },
+  required: [],
+});

package/src/components/CLMSDatasetDetailView/BoundingBoxComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const BoundingBoxComponent = (props) => {
+  const { north, south, east, west } = props.bbox;
+
+  return (
+    <div className="bounding-box-container">
+      <h3>Bounding Box</h3>
+      <div className="bounding-box-item">
+        {east && <div className="bounding-box-item">East: {east}</div>}
+        {west && <div className="bounding-box-item">West: {west}</div>}
+        {north && <div className="bounding-box-item">North: {north}</div>}
+        {south && <div className="bounding-box-item">South: {south}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default BoundingBoxComponent;

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -125,36 +125,30 @@ const CLMSDatasetDetailView = ({ content, token }) => {
                           this dataset.
                           <br />
                           <br />
-                          {item.type === 'EEA' && (
-                            <a
-                              target="_blank"
-                              rel="noreferrer"
-                              href={
-                                'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
-                                item.id
-                              }
-                            >
+                          <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href={
+                              item.type === 'EEA'
+                                ? 'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
+                                  item.id
+                                : 'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
+                                  item.id
+                            }
+                          >
+                            {item.type === 'EEA' && (
                               <FormattedMessage
                                 id="EEA Geonetwork element"
                                 defaultMessage="EEA Geonetwork element"
                               />
-                            </a>
-                          )}
-                          {item.type === 'VITO' && (
-                            <a
-                              target="_blank"
-                              rel="noreferrer"
-                              href={
-                                'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
-                                item.id
-                              }
-                            >
+                            )}
+                            {item.type === 'VITO' && (
                               <FormattedMessage
                                 id="VITO Geonetwork element"
                                 defaultMessage="VITO Geonetwork element"
                               />
-                            </a>
-                          )}
+                            )}
+                          </a>
                         </div>
                         <CclButton
                           onClick={() => {

package/src/components/CLMSDatasetDetailView/ContactComponent.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const ContactComponent = (props) => {
+  const {
+    organisationName,
+    deliveryPoint,
+    city,
+    administrativeArea,
+    postalCode,
+    country,
+    electronicMailAddress,
+    url,
+    urlTitle,
+    roleCode,
+  } = props.contact;
+
+  return (
+    <div className="contact-container">
+      <h3>Contact</h3>
+      <div className="contact-item">
+        {city && <div className="contact-item">{city}</div>}
+        {organisationName && (
+          <div className="contact-item">{organisationName}</div>
+        )}
+        {deliveryPoint && <div className="contact-item">{deliveryPoint}</div>}
+        {city && <div className="contact-item">{city}</div>}
+        {administrativeArea && (
+          <div className="contact-item">{administrativeArea}</div>
+        )}
+        {postalCode && <div className="contact-item">{postalCode}</div>}
+        {country && <div className="contact-item">{country}</div>}
+        {electronicMailAddress && (
+          <div className="contact-item">{electronicMailAddress}</div>
+        )}
+        {url && <div className="contact-item">{url}</div>}
+        {urlTitle && <div className="contact-item">{urlTitle}</div>}
+        {roleCode && <div className="contact-item">Role: {roleCode}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default ContactComponent;

package/src/components/CLMSDatasetDetailView/DistributionInfoComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const DistributionInfoComponent = (props) => {
+  const { resourceLocator, services } = props.resource;
+
+  return (
+    <div className="distribution-info-container">
+      <h3>Resource</h3>
+      <div className="distribution-info-item">
+        {resourceLocator && (
+          <div className="distribution-info-item">{resourceLocator}</div>
+        )}
+        {services && <div className="distribution-info-item">{services}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default DistributionInfoComponent;