@eeacms/volto-cca-policy 0.2.43 → 0.2.45

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.2.45](https://github.com/eea/volto-cca-policy/compare/0.2.44...0.2.45) - 24 June 2024
+
+### [0.2.44](https://github.com/eea/volto-cca-policy/compare/0.2.43...0.2.44) - 20 June 2024
+
+#### :nail_care: Enhancements
+
+- change(block):  RAST svg styling [kreafox - [`da47397`](https://github.com/eea/volto-cca-policy/commit/da47397a0513b8ff55a3796712b7f70c64ec2966)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`b41cc24`](https://github.com/eea/volto-cca-policy/commit/b41cc24fcaf25a32af2fed778af7183b942c2dbd)]
+
+#### :hammer_and_wrench: Others
+
+- Fix bugs [Tiberiu Ichim - [`9585833`](https://github.com/eea/volto-cca-policy/commit/9585833739e2e951bff24c5a33c2d99ab36fb0c1)]
+- Update snapshots [Tiberiu Ichim - [`15a62cf`](https://github.com/eea/volto-cca-policy/commit/15a62cf96d5b112e1d3cf1df44c6758ce0e2d73c)]
 ### [0.2.43](https://github.com/eea/volto-cca-policy/compare/0.2.42...0.2.43) - 13 June 2024
 
 #### :rocket: New Features
@@ -1393,10 +1409,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
@@ -1413,6 +1432,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)]
@@ -1629,6 +1651,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
 
@@ -2109,6 +2132,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.2.43",
+  "version": "0.2.45",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CaseStudyExplorer/CaseStudyFilters.jsx

@@ -84,31 +84,6 @@ export default function CaseStudyFilters(props) {
             ),
           )}
         </Accordion.Content>
-        <Accordion.Title
-          active={activeIndex.includes(3)}
-          index={3}
-          onClick={handleClick}
-        >
-          <AccordionIcon active={activeIndex.includes(3)} />
-          <FormattedMessage
-            id="Adaptation elements"
-            defaultMessage="Adaptation elements"
-          />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex.includes(3)}>
-          {Object.entries(filters?.elements || {}).map(
-            ([value, label], index) => (
-              <Checkbox
-                label={intl.formatMessage({ id: label })}
-                value={value}
-                checked={activeFilters.elements.includes(value)}
-                name="elements"
-                onChange={checkboxChangeHandler}
-                key={'element' + index}
-              />
-            ),
-          )}
-        </Accordion.Content>
         <Accordion.Title
           active={activeIndex.includes(1)}
           index={1}
@@ -166,6 +141,31 @@ export default function CaseStudyFilters(props) {
             ),
           )}
         </Accordion.Content>
+        <Accordion.Title
+          active={activeIndex.includes(3)}
+          index={3}
+          onClick={handleClick}
+        >
+          <AccordionIcon active={activeIndex.includes(3)} />
+          <FormattedMessage
+            id="Adaptation elements"
+            defaultMessage="Adaptation elements"
+          />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex.includes(3)}>
+          {Object.entries(filters?.elements || {}).map(
+            ([value, label], index) => (
+              <Checkbox
+                label={intl.formatMessage({ id: label })}
+                value={value}
+                checked={activeFilters.elements.includes(value)}
+                name="elements"
+                onChange={checkboxChangeHandler}
+                key={'element' + index}
+              />
+            ),
+          )}
+        </Accordion.Content>
       </Accordion>
       {nrActiveFilters ? (
         <button

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsEdit.jsx

@@ -6,7 +6,7 @@ import View from './CollectionStatsView';
 import TransparentOverlay from '../../TransparentOverlay';
 
 const Edit = (props) => {
-  const schema = Schema();
+  const schema = Schema(props.data);
   return (
     <>
       <TransparentOverlay>

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -66,21 +66,29 @@ const makeSearchBlockQuery = ({ base, query, field, value }) => {
   return `${base}?${params}`;
 };
 
-const makeEEASearchQuery = ({ base, field, value }) => {
+const makeEEASearchQuery = ({ base, field, value, extraFilters }) => {
   // TODO: don't hardcode the language
-  const rest =
-    'filters[1][field]=issued.date' +
-    '&filters[1][values][0]=Last 5 years' +
-    '&filters[1][type]=any' +
-    '&filters[2][field]=language' +
-    '&filters[2][values][0]=en' +
-    '&filters[2][type]=any' +
-    '&sort-field=issued.date' +
-    '&sort-direction=desc';
-
-  const filter = `filters[0][field]=${field}&filters[0][type]=any&filters[0][values][0]=${value}`;
-
-  return `${base}?size=n_10_n&${filter}&${rest}`;
+  const allFields = [
+    ['issued.date', 'Last 5 years'],
+    ['language', 'en'],
+    [field, value],
+    ...(extraFilters?.map(({ id, value }) => [id, value]) || []),
+  ];
+
+  const rest = '&sort-field=issued.date&sort-direction=desc';
+
+  // See FilterAceContentView
+  const filters = allFields
+    .map(([name, anyValue], index) =>
+      [
+        `filters[${index}][field]=${name}`,
+        `filters[${index}][type]=any`,
+        `filters[${index}][values][0]=${anyValue}`,
+      ].join('&'),
+    )
+    .join('&');
+
+  return `${base}?size=n_10_n&${filters}&${rest}`;
 };
 
 const urlBuilders = {
@@ -116,6 +124,7 @@ export default function CollectionStatsView(props) {
 
   const keys = Object.keys(stats);
   const urlHandler = urlBuilders[queryParameterStyle] || nop;
+  const extraFilters = data?.extraFilters || [];
 
   return (
     (field && keys.length > 0 && (
@@ -133,6 +142,7 @@ export default function CollectionStatsView(props) {
                   query: query.query,
                   field: groupDefinition.searchFieldName || field,
                   value: kV,
+                  extraFilters,
                 })}
               >
                 <IconComponent

package/src/components/manage/Blocks/CollectionStatistics/schema.js

@@ -3,14 +3,36 @@ import {
   hasDateOperation,
 } from '@plone/volto/components/manage/Blocks/Search/utils';
 
-const Schema = () => {
+const ExtraFilter = (_) => ({
+  title: 'Extra Filters',
+  fieldsets: [{ id: 'default', fields: ['id', 'value'], title: 'Default' }],
+  properties: {
+    id: {
+      title: 'Field ID',
+    },
+    value: {
+      title: 'Filter value',
+    },
+  },
+  required: [],
+});
+
+const Schema = (formData) => {
+  const isEEASearch = formData?.queryParameterStyle === 'EEASemanticSearch';
+
   return {
     title: 'Collection Statistics',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['aggregateField', 'queryParameterStyle', 'href', 'showLabel'],
+        fields: [
+          'aggregateField',
+          'queryParameterStyle',
+          'href',
+          'showLabel',
+          ...(isEEASearch ? ['extraFilters'] : []),
+        ],
       },
       {
         id: 'query',
@@ -68,6 +90,12 @@ const Schema = () => {
         selectedItemAttrs: [],
         allowExternals: true,
       },
+      extraFilters: {
+        title: 'Extra filters',
+        widget: 'object_list',
+        schema: ExtraFilter({ formData }),
+        // schemaExtender: (schema) => schema,
+      },
     },
     required: [],
   };

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
 import './styles.less';
 
-const LinkWrap = ({ item, pathname, children, isActive }) => {
+const LinkWrap = ({ item, children, isActive, className }) => {
   return item ? (
-    <UniversalLink item={item} className="step-link">
-      <g className={isActive ? 'link-active' : ''}>
+    <UniversalLink
+      item={item}
+      className={cx('step-link', className, {
+        active: isActive,
+      })}
+    >
+      <g>
         <title>{item.title}</title>
         {children}
       </g>
@@ -15,8 +21,6 @@ const LinkWrap = ({ item, pathname, children, isActive }) => {
   );
 };
 
-// export default function RASTView(props) {
-// const RASTView = (props) => {
 export default function RASTMap(props) {
   const { path, pathname, activeMenu, skip_items } = props;
   const currentPath = path || pathname;
@@ -29,7 +33,7 @@ export default function RASTMap(props) {
 
   if (activeMenu !== null) {
     if (data.includes(activeMenu.toString())) {
-      currentMenu = -1;
+      currentMenu = null;
     } else {
       let activeMenuMinus = 0;
       for (let i = 0; i < data.length; i++) {
@@ -40,7 +44,11 @@ export default function RASTMap(props) {
   }
 
   return (
-    <div className="rast-map-block">
+    <div
+      className={cx('rast-map-block', {
+        landing: currentMenu === null,
+      })}
+    >
       <svg
         width="290"
         height="280"
@@ -337,6 +345,7 @@ export default function RASTMap(props) {
             item={items[0]}
             pathname={currentPath}
             isActive={currentMenu === 0 ? true : false}
+            className="step-0"
           >
             <path
               d="M210.5 32C222.4 32 232 41.6 232 53.5C232 65.4 222.4 75 210.5 75C198.6 75 189 65.4 189 53.5C189 41.6 198.6 32 210.5 32Z"
@@ -356,6 +365,7 @@ export default function RASTMap(props) {
             item={items[1]}
             pathname={currentPath}
             isActive={currentMenu === 1 ? true : false}
+            className="step-1"
           >
             <path
               d="M260.5 128C272.4 128 282 137.6 282 149.5C282 161.4 272.4 171 260.5 171C248.6 171 239 161.4 239 149.5C239 137.6 248.6 128 260.5 128Z"
@@ -375,6 +385,7 @@ export default function RASTMap(props) {
             item={items[2]}
             pathname={currentPath}
             isActive={currentMenu === 2 ? true : false}
+            className="step-2"
           >
             <path
               d="M210.5 228C222.4 228 232 237.6 232 249.5C232 261.4 222.4 271 210.5 271C198.6 271 189 261.4 189 249.5C189 237.6 198.6 228 210.5 228Z"
@@ -394,6 +405,7 @@ export default function RASTMap(props) {
             item={items[3]}
             pathname={currentPath}
             isActive={currentMenu === 3 ? true : false}
+            className="step-3"
           >
             <path
               d="M82.5 228C94.4 228 104 237.6 104 249.5C104 261.4 94.4 271 82.5 271C70.6 271 61 261.4 61 249.5C61 237.6 70.6 228 82.5 228Z"
@@ -413,6 +425,7 @@ export default function RASTMap(props) {
             item={items[4]}
             pathname={currentPath}
             isActive={currentMenu === 4 ? true : false}
+            className="step-4"
           >
             <path
               d="M29.5 128C41.4 128 51 137.6 51 149.5C51 161.4 41.4 171 29.5 171C17.6 171 8 161.4 8 149.5C8 137.6 17.6 128 29.5 128Z"
@@ -432,6 +445,7 @@ export default function RASTMap(props) {
             item={items[5]}
             pathname={currentPath}
             isActive={currentMenu === 5 ? true : false}
+            className="step-5"
           >
             <path
               d="M82.5 32C94.4 32 104 41.6 104 53.5C104 65.4 94.4 75 82.5 75C70.6 75 61 65.4 61 53.5C61 41.6 70.6 32 82.5 32Z"

package/src/components/manage/Blocks/RASTBlock/styles.less

@@ -3,52 +3,104 @@
 
 @import (multiple, reference, optional) '../../theme.config';
 
-.rast-block {
-  a rect.circle:hover {
-    fill: #183 !important;
-  }
+.rast-map-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2em;
 
-  // a rect.circle {
-  //   pointer-events: all !important;
-  // }
+  &:not(.landing) {
+    .step-0:not(.active) g path:nth-of-type(1) {
+      fill: #0c3330;
+    }
 
-  // svg,
-  // svg * {
-  //   pointer-events: none;
-  // }
+    .step-1:not(.active) g path:nth-of-type(1) {
+      fill: #031624;
+    }
 
-  .step-link:hover {
-    .circle {
-      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
+    .step-2:not(.active) g path:nth-of-type(1) {
+      fill: #081936;
     }
-  }
 
-  .link-active {
-    .circle {
-      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
+    .step-3:not(.active) g path:nth-of-type(1) {
+      fill: #262c4e;
     }
+
+    .step-4:not(.active) g path:nth-of-type(1) {
+      fill: #534022;
+    }
+
+    .step-5:not(.active) g path:nth-of-type(1) {
+      fill: #39531f;
+    }
+
+    .step-link {
+      path:nth-of-type(2),
+      path:nth-of-type(3) {
+        fill: #929eaf;
+      }
+    }
+  }
+
+  .step-link {
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+    transition: 0.3s all;
+  }
+
+  .step-0.step-link:hover g path:nth-of-type(1),
+  .step-0.step-link.active g path:nth-of-type(1) {
+    fill: #155246;
+  }
+
+  .step-1.step-link:hover g path:nth-of-type(1),
+  .step-1.step-link.active g path:nth-of-type(1) {
+    fill: #062435;
   }
 
-  .item.active a {
-    font-weight: bold;
+  .step-2.step-link:hover g path:nth-of-type(1),
+  .step-2.step-link.active g path:nth-of-type(1) {
+    fill: #0d284f;
   }
 
-  .ui.accordion .active.content {
-    padding: 1rem 1rem !important;
+  .step-3.step-link:hover g path:nth-of-type(1),
+  .step-3.step-link.active g path:nth-of-type(1) {
+    fill: #434772;
   }
 
-  .substep a {
-    color: inherit;
+  .step-4.step-link:hover g path:nth-of-type(1),
+  .step-4.step-link.active g path:nth-of-type(1) {
+    fill: #926830;
   }
 
-  .substep:not(:last-child) {
-    padding-bottom: 0.8em;
+  .step-5.step-link:hover g path:nth-of-type(1),
+  .step-5.step-link.active g path:nth-of-type(1) {
+    fill: #64862c;
   }
 
-  .rast-map-block {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 2em;
+  .step-link:hover,
+  .step-link.active {
+    transform: scale(1.3, 1.3);
+
+    path:nth-of-type(2),
+    path:nth-of-type(3) {
+      fill: #fff;
+    }
+
+    .step-link .item.active a {
+      font-weight: bold;
+    }
+
+    .ui.accordion .active.content {
+      padding: 1rem 1rem !important;
+    }
+
+    .substep a {
+      color: inherit;
+    }
+
+    .substep:not(:last-child) {
+      padding-bottom: 0.8em;
+    }
   }
 }

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { expandToBackendURL } from '@plone/volto/helpers';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Grid, Container, Segment, Button, Icon } from 'semantic-ui-react';
+import { Grid, Container, Segment } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import {
   SubjectTags,
@@ -11,15 +9,7 @@ import {
 import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
 import { PortalMessage } from '@eeacms/volto-cca-policy/components';
 
-const messages = defineMessages({
-  downloadEvent: {
-    id: 'Download this event in iCal format',
-    defaultMessage: 'Download this event in iCal format',
-  },
-});
-
 function EventView(props) {
-  const intl = useIntl();
   const { content } = props;
   const {
     blocks: filtered_blocks,
@@ -56,41 +46,6 @@ function EventView(props) {
             <Grid.Column mobile={12} tablet={12} computer={4}>
               <Segment>
                 <EventDetails {...props} />
-                {content?.event_url && (
-                  <>
-                    <h4>
-                      <FormattedMessage id="Web" defaultMessage="Web" />
-                    </h4>
-                    <p>
-                      <a href={content.event_url} target="_blank">
-                        <FormattedMessage
-                          id="Visit external website"
-                          defaultMessage="Visit external website"
-                        />
-                      </a>
-                    </p>
-                  </>
-                )}
-
-                <div className="download-event">
-                  <a
-                    className="ics-download"
-                    target="_blank"
-                    rel="noreferrer"
-                    href={`${expandToBackendURL(content['@id'])}/ics_view`}
-                  >
-                    <Button
-                      className="icon inverted primary labeled"
-                      title={intl.formatMessage(messages.downloadEvent)}
-                    >
-                      <Icon name="calendar alternate outline" />
-                      <FormattedMessage
-                        id="Download Event"
-                        defaultMessage="Download Event"
-                      />
-                    </Button>
-                  </a>
-                </div>
               </Segment>
             </Grid.Column>
           </Grid.Row>

package/src/helpers/Utils.jsx

@@ -1,17 +1,18 @@
 import React, { Fragment } from 'react';
+import { expandToBackendURL } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import {
   Segment,
   Image,
   ListItem,
   List,
-  Button,
   Icon,
   Label,
+  Button,
 } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 import {
   CASE_STUDY,
   PUBLICATION_REPORT,
@@ -22,9 +23,12 @@ import {
 } from '@eeacms/volto-cca-policy/helpers/Constants';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { makeContributionsSearchQuery } from '@eeacms/volto-cca-policy/helpers';
-import { useIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
+  downloadEvent: {
+    id: 'Download this event in iCal format',
+    defaultMessage: 'Download this event in iCal format',
+  },
   documents: {
     id: 'Documents',
     defaultMessage: 'Documents',
@@ -449,8 +453,29 @@ export const SubjectTags = (props) => {
   ) : null;
 };
 
+export const WebDetails = (props) => {
+  const { content } = props;
+  const eventUrl = content?.event_url;
+  return eventUrl ? (
+    <>
+      <h4>
+        <FormattedMessage id="Web" defaultMessage="Web" />
+      </h4>
+      <p>
+        <a href={eventUrl} target="_blank">
+          <FormattedMessage
+            id="Visit external website"
+            defaultMessage="Visit external website"
+          />
+        </a>
+      </p>
+    </>
+  ) : null;
+};
+
 export const EventDetails = (props) => {
   const { content } = props;
+  const intl = useIntl();
 
   return (
     <>
@@ -479,6 +504,28 @@ export const EventDetails = (props) => {
           <p>{content.contact_email}</p>
         </>
       )}
+
+      <WebDetails {...props} />
+
+      <div className="download-event">
+        <a
+          className="ics-download"
+          target="_blank"
+          rel="noreferrer"
+          href={`${expandToBackendURL(content['@id'])}/ics_view`}
+        >
+          <Button
+            className="icon inverted primary labeled"
+            title={intl.formatMessage(messages.downloadEvent)}
+          >
+            <Icon name="calendar alternate outline" />
+            <FormattedMessage
+              id="Download Event"
+              defaultMessage="Download Event"
+            />
+          </Button>
+        </a>
+      </div>
     </>
   );
 };