@eeacms/volto-cca-policy 0.2.34 → 0.2.35

package/CHANGELOG.md

@@ -4,11 +4,19 @@ 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.34](https://github.com/eea/volto-cca-policy/compare/0.2.33...0.2.34) - 24 May 2024
+### [0.2.35](https://github.com/eea/volto-cca-policy/compare/0.2.34...0.2.35) - 24 May 2024
+
+#### :bug: Bug Fixes
+
+- fix: don't break view without blocks [kreafox - [`0a63710`](https://github.com/eea/volto-cca-policy/commit/0a63710bb682f033b4a9f0f8df51720c10dc7644)]
 
 #### :hammer_and_wrench: Others
 
-- Fix type in event listing [Tiberiu Ichim - [`09b2456`](https://github.com/eea/volto-cca-policy/commit/09b24565c456fc622d46b4d32029bc74c62e619b)]
+- test: increase coverage [kreafox - [`5a349cf`](https://github.com/eea/volto-cca-policy/commit/5a349cf8f2d04f4e491537c3c6d0ed442ac6481f)]
+- test: fix issues reported by sonarqube [kreafox - [`a84e309`](https://github.com/eea/volto-cca-policy/commit/a84e309de1d8da69832a28c0a9bc037a57cd4ddb)]
+- update snapshot [kreafox - [`0e1b2cc`](https://github.com/eea/volto-cca-policy/commit/0e1b2ccf6d3088d5c3867287050d99adcd93f655)]
+### [0.2.34](https://github.com/eea/volto-cca-policy/compare/0.2.33...0.2.34) - 24 May 2024
+
 ### [0.2.33](https://github.com/eea/volto-cca-policy/compare/0.2.32...0.2.33) - 23 May 2024
 
 #### :bug: Bug Fixes

package/package.json

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

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

@@ -1,13 +1,15 @@
 import React from 'react';
-import {
-  BannerTitle,
-  PortalMessage,
-} from '@eeacms/volto-cca-policy/components';
-import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { Grid, Container, Segment, Button, Icon } from 'semantic-ui-react';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { SubjectTags, EventDetails } from '@eeacms/volto-cca-policy/helpers';
 import { expandToBackendURL } from '@plone/volto/helpers';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+import { Grid, Container, Segment, Button, Icon } from 'semantic-ui-react';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import {
+  SubjectTags,
+  EventDetails,
+  HTMLField,
+} from '@eeacms/volto-cca-policy/helpers';
+import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
+import { PortalMessage } from '@eeacms/volto-cca-policy/components';
 
 const messages = defineMessages({
   downloadEvent: {
@@ -16,20 +18,39 @@ const messages = defineMessages({
   },
 });
 
-function CcaEventView(props) {
-  const { content } = props;
+function EventView(props) {
   const intl = useIntl();
+  const { content } = props;
+  const {
+    blocks: filtered_blocks,
+    blocks_layout: filtered_blocks_layout,
+    hasBlockType,
+  } = filterBlocks(content, 'tabs_block');
 
   return (
     <div className="cca-event-view">
-      <BannerTitle content={content} />
+      <PortalMessage content={content} />
 
       <Container>
-        <PortalMessage content={content} />
         <Grid columns="12">
           <Grid.Row>
             <Grid.Column mobile={12} tablet={12} computer={8}>
-              <RenderBlocks {...props} />
+              {hasBlockType && (
+                <>
+                  <p className="documentDescription">{content.description}</p>
+                  <HTMLField value={content.text} className="content-text" />
+                </>
+              )}
+
+              <RenderBlocks
+                {...props}
+                content={{
+                  ...content,
+                  blocks: filtered_blocks,
+                  blocks_layout: filtered_blocks_layout,
+                }}
+              />
+
               <SubjectTags {...props} />
             </Grid.Column>
             <Grid.Column mobile={12} tablet={12} computer={4}>
@@ -37,9 +58,9 @@ function CcaEventView(props) {
                 <EventDetails {...props} />
                 {content?.event_url && (
                   <>
-                    <h3>
+                    <h4>
                       <FormattedMessage id="Web" defaultMessage="Web" />
-                    </h3>
+                    </h4>
                     <p>
                       <a href={content.event_url} target="_blank">
                         <FormattedMessage
@@ -79,4 +100,4 @@ function CcaEventView(props) {
   );
 }
 
-export default CcaEventView;
+export default EventView;

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import EventView from './EventView';
+import config from '@plone/volto/registry';
+
+config.blocks = {
+  blocksConfig: {
+    title: {
+      view: () => <div>Title Block Component</div>,
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/',
+    hash: '',
+    search: '',
+    state: undefined,
+  }),
+}));
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+const { settings } = config;
+
+test('renders an event view component with all props', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <EventView
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          title: 'Hello World!',
+          description: 'Hi',
+          text: {
+            data: '<p>Hello World!</p>',
+          },
+          attendees: ['John Doe', 'Mario Rossi'],
+          contact_email: 'test@example.com',
+          contact_name: 'John Doe',
+          contact_phone: '0123456789',
+          end: '2019-06-24T15:20:00+00:00',
+          event_url: 'https://www.example.com',
+          location: 'Volto, Plone',
+          open_end: false,
+          recurrence: 'RRULE:FREQ=DAILY;INTERVAL=7;COUNT=7',
+          start: '2019-06-23T15:20:00+00:00',
+          subjects: ['Volto'],
+          whole_day: false,
+          blocks: {
+            '6cc87646-cbd3-40ea-8b18-8a737b4ec803': {
+              '@type': 'title',
+              copyrightIcon: 'ri-copyright-line',
+              styles: {},
+            },
+          },
+          blocks_layout: {
+            items: ['6cc87646-cbd3-40ea-8b18-8a737b4ec803'],
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an event view component with only required props', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <EventView
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          title: 'Hello World!',
+          attendees: [],
+          end: '2019-06-23T16:20:00+00:00',
+          start: '2019-06-23T15:20:00+00:00',
+          subjects: ['Volto'],
+          blocks: {
+            '6cc87646-cbd3-40ea-8b18-8a737b4ec803': {
+              '@type': 'title',
+              copyrightIcon: 'ri-copyright-line',
+              styles: {},
+            },
+          },
+          blocks_layout: {
+            items: ['6cc87646-cbd3-40ea-8b18-8a737b4ec803'],
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an event view component without links to api in the text', () => {
+  const component = renderer.create(
+    <Provider store={store}>
+      <EventView
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          title: 'Hello World!',
+          attendees: [],
+          end: '2019-06-23T16:20:00+00:00',
+          start: '2019-06-23T15:20:00+00:00',
+          subjects: ['Volto'],
+          text: {
+            data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
+          },
+          blocks: {
+            '6cc87646-cbd3-40ea-8b18-8a737b4ec803': {
+              '@type': 'title',
+              copyrightIcon: 'ri-copyright-line',
+              styles: {},
+            },
+          },
+          blocks_layout: {
+            items: ['6cc87646-cbd3-40ea-8b18-8a737b4ec803'],
+          },
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -1,33 +1,51 @@
 import React from 'react';
-import {
-  BannerTitle,
-  PortalMessage,
-} from '@eeacms/volto-cca-policy/components';
 import { Container } from 'semantic-ui-react';
-import { SubjectTags } from '@eeacms/volto-cca-policy/helpers';
+import { filterBlocks } from '@eeacms/volto-cca-policy/utils';
+import { PortalMessage } from '@eeacms/volto-cca-policy/components';
+import { HTMLField, SubjectTags } from '@eeacms/volto-cca-policy/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-// import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 
-// const Date = (props) => {
-//   const date = props.content?.effective;
-//   return date ? (
-//     <>
-//       <When start={date} end={date} whole_day={true} open_end={false} />
-//     </>
-//   ) : null;
-// };
+const PublicationDate = (props) => {
+  const date = props.content?.effective;
+  return date ? (
+    <div className="news-date-info">
+      Date:
+      <When start={date} end={date} whole_day={true} open_end={false} />
+    </div>
+  ) : null;
+};
 
 function NewsItemView(props) {
   const { content } = props;
+  const {
+    blocks: filtered_blocks,
+    blocks_layout: filtered_blocks_layout,
+    hasBlockType,
+  } = filterBlocks(content, 'tabs_block');
 
   return (
     <div className="cca-newsitem-view">
-      <BannerTitle content={content} />
+      <PortalMessage content={content} />
 
       <Container>
-        <PortalMessage content={content} />
-        <RenderBlocks {...props} />
-        {/* <Date {...props} /> */}
+        {hasBlockType && (
+          <>
+            <p className="documentDescription">{content.description}</p>
+            <HTMLField value={content.text} className="content-text" />
+          </>
+        )}
+
+        <RenderBlocks
+          {...props}
+          content={{
+            ...content,
+            blocks: filtered_blocks,
+            blocks_layout: filtered_blocks_layout,
+          }}
+        />
+
+        <PublicationDate {...props} />
         <SubjectTags {...props} />
       </Container>
     </div>

package/src/helpers/Utils.jsx

@@ -454,9 +454,9 @@ export const EventDetails = (props) => {
 
   return (
     <>
-      <h3>
+      <h4>
         <FormattedMessage id="When" defaultMessage="When" />
-      </h3>
+      </h4>
       <When
         start={content.start}
         end={content.end}
@@ -465,17 +465,17 @@ export const EventDetails = (props) => {
       />
       {content?.location !== null && (
         <>
-          <h3>
+          <h4>
             <FormattedMessage id="Where" defaultMessage="Where" />
-          </h3>
+          </h4>
           <p>{content.location}</p>
         </>
       )}
       {!!content.contact_email && (
         <>
-          <h3>
+          <h4>
             <FormattedMessage id="Info" defaultMessage="Info" />
-          </h3>
+          </h4>
           <p>{content.contact_email}</p>
         </>
       )}

package/src/utils.js

@@ -50,3 +50,23 @@ export const hasTypeOfBlock = (obj, type, name) => {
 
   return false;
 };
+
+export const filterBlocks = (content, block_type) => {
+  const filteredBlocks = { ...content.blocks };
+  const filteredBlocksLayout = { ...content.blocks_layout };
+
+  const filteredBlockUID = Object.keys(filteredBlocks)?.filter(
+    (key) => filteredBlocks[key]['@type'] === block_type,
+  );
+  filteredBlockUID.forEach((key) => delete filteredBlocks[key]);
+  filteredBlocksLayout.items = filteredBlocksLayout?.items?.filter(
+    (item) => !filteredBlockUID.includes(item),
+  );
+  const hasBlockType = filteredBlockUID.length > 0;
+
+  return {
+    blocks: filteredBlocks,
+    blocks_layout: filteredBlocksLayout,
+    hasBlockType,
+  };
+};

package/theme/globals/views.less

@@ -302,3 +302,17 @@ hr {
     }
   }
 }
+
+.cca-newsitem-view,
+.cca-event-view {
+  .news-date-info {
+    display: flex;
+    gap: 3px;
+    justify-content: flex-end;
+  }
+
+  .content-text p {
+    margin: 0em 0em 1em;
+    line-height: 1.5;
+  }
+}