@eeacms/volto-embed 9.0.0 → 9.0.2

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-11-15T18:20:32.637Z\n"
+"POT-Creation-Date: 2023-11-29T13:51:29.116Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -13,13 +13,11 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
-#: Blocks/EmbedMaps/schema
 #: Blocks/Maps/schema
 # defaultMessage: Alignment
 msgid "Alignment"
 msgstr ""
 
-#: Blocks/EmbedMaps/schema
 #: Blocks/Maps/schema
 # defaultMessage: Alt text
 msgid "Alt text"
@@ -27,55 +25,43 @@ msgstr ""
 
 #: Blocks/EmbedMaps/schema
 #: Blocks/Maps/schema
-# defaultMessage: undefined
-msgid "CSSHeight"
-msgstr ""
-
-#: Blocks/EmbedMaps/schema
-#: Blocks/Maps/schema
-# defaultMessage: undefined
-msgid "CSSHeightDescription"
+# defaultMessage: CSS height
+msgid "CSS height"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 # defaultMessage: Center
 msgid "Center"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 #: Widgets/MapsWidget
 # defaultMessage: Embed code error, please follow the instructions and try again.
 msgid "Embed code error, please follow the instructions and try again."
 msgstr ""
 
-#: Blocks/EmbedMaps/View
 #: Blocks/Maps/View
-#: Map/Map
+#: EmbedMap/EmbedMap
 # defaultMessage: Embeded Google Maps
 msgid "Embeded Google Maps"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
+#: Widgets/MapsWidget
 # defaultMessage: Enter map Embed Code
 msgid "Enter map Embed Code"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 # defaultMessage: Full
 msgid "Full"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 # defaultMessage: Google Maps Embedded Block
 msgid "Google Maps Embedded Block"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 # defaultMessage: Left
 msgid "Left"
@@ -86,34 +72,34 @@ msgstr ""
 msgid "Live image generated"
 msgstr ""
 
-#: Blocks/EmbedMaps/MapsSidebar
 #: Blocks/EmbedMaps/schema
+#: Blocks/Maps/schema
+# defaultMessage: Map height
+msgid "Map height"
+msgstr ""
+
 #: Blocks/Maps/MapsSidebar
 #: Blocks/Maps/schema
 # defaultMessage: Maps
 msgid "Maps"
 msgstr ""
 
-#: Blocks/EmbedMaps/schema
 #: Blocks/Maps/schema
 # defaultMessage: Maps URL
 msgid "Maps URL"
 msgstr ""
 
-#: Blocks/EmbedMaps/MapsSidebar
 #: Blocks/Maps/MapsSidebar
 # defaultMessage: No map selected
 msgid "No map selected"
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 #: Widgets/MapsWidget
 # defaultMessage: Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it.
 msgid "Please enter the Embed Code provided by Google Maps -> Share -> Embed map. It should contain the <iframe> code on it."
 msgstr ""
 
-#: Blocks/EmbedMaps/Edit
 #: Blocks/Maps/Edit
 # defaultMessage: Right
 msgid "Right"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,6 +26,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress-fail-fast": "^5.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
@@ -52,6 +53,7 @@
     ]
   },
   "scripts": {
+    "prepare": "husky install",
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
     "release-beta": "release-it --preRelease=beta",
@@ -68,7 +70,6 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open",
-    "prepare": "husky install"
+    "cypress:open": "make cypress-open"
   }
-}
+}

package/src/Blocks/EmbedMaps/Edit.jsx

@@ -1,31 +1,35 @@
 import React from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import { SidebarPortal } from '@plone/volto/components';
 import View from './View';
 import getSchema from './schema';
 
 const Edit = (props) => {
+  const { block, data, selected, onChangeBlock } = props;
   const schema = React.useMemo(() => getSchema(props), [props]);
 
   return (
     <React.Fragment>
       <View {...props} mode="edit" />
-      <SidebarPortal selected={props.selected}>
+      <SidebarPortal selected={selected}>
         <BlockDataForm
-          block={props.block}
+          block={block}
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {
-            props.onChangeBlock(props.block, {
-              ...props.data,
+            onChangeBlock(block, {
+              ...data,
               [id]: value,
             });
           }}
-          formData={props.data}
+          onChangeBlock={onChangeBlock}
+          formData={data}
         />
       </SidebarPortal>
     </React.Fragment>
   );
 };
 
-export default Edit;
+export default compose(injectIntl)(Edit);

package/src/Blocks/EmbedMaps/Edit.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
 
@@ -9,32 +8,9 @@ import installEmbedMaps from '.';
 
 installEmbedMaps(config);
 
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  __esModule: true,
-  SidebarPortal: jest.requireActual(
-    '@plone/volto/components/manage/Sidebar/SidebarPortal',
-  ).default,
-  UniversalLink: ({ children, href }) => {
-    return <a href={href}>{children}</a>;
-  },
-}));
-
-const store = mockStore({
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-  content: {
-    create: {},
-  },
-  connected_data_parameters: {},
-});
-
 test('renders an edit embed map block component', () => {
   const component = renderer.create(
-    <Provider store={store}>
+    <Provider store={global.store}>
       <Edit
         id="my-map"
         data={{
@@ -57,7 +33,7 @@ test('renders an edit embed map block component', () => {
           useVisibilitySensor: false,
         }}
         pathname="/news"
-        selected={false}
+        selected={true}
         block="1234"
         index={1}
         onChangeBlock={() => {}}

package/src/Blocks/EmbedMaps/View.jsx

@@ -51,6 +51,7 @@ function View(props) {
         data={{
           ...maps,
           useVisibilitySensor,
+          height: props.data.height || maps.height,
           with_notes,
           with_sources,
           with_more_info,

package/src/Blocks/EmbedMaps/View.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
 
@@ -9,28 +8,9 @@ import installEmbedMaps from '.';
 
 installEmbedMaps(config);
 
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  __esModule: true,
-  UniversalLink: ({ children, href }) => {
-    return <a href={href}>{children}</a>;
-  },
-}));
-
 test('renders a view embed map block component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-    content: {
-      create: {},
-    },
-    connected_data_parameters: {},
-  });
   const component = renderer.create(
-    <Provider store={store}>
+    <Provider store={global.store}>
       <View
         id="my-map"
         data={{

package/src/Blocks/EmbedMaps/index.js

@@ -6,9 +6,9 @@ import sliderSVG from '@plone/volto/icons/slider.svg';
 const applyConfig = (config) => {
   config.blocks.blocksConfig.embed_maps = {
     id: 'embed_maps',
-    title: 'Embed Map',
+    title: 'Embed interactive Map',
     icon: sliderSVG,
-    group: 'common',
+    group: 'data_visualizations',
     edit: EmbedMap,
     view: EmbedView,
     restricted: false,

package/src/Blocks/EmbedMaps/schema.js

@@ -1,11 +1,24 @@
-export default () => {
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  CSSHeight: {
+    id: 'CSS height',
+    defaultMessage: 'CSS height',
+  },
+  CSSMapHeightDescription: {
+    id: 'Map height',
+    defaultMessage: 'Map height',
+  },
+});
+
+export default (props) => {
   return {
-    title: 'Embed Map',
+    title: 'Embed interactive Map',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['url'],
+        fields: ['url', 'height'],
       },
       {
         id: 'toolbar',
@@ -24,6 +37,18 @@ export default () => {
         title: 'Map url',
         widget: 'url',
       },
+      height: {
+        title: (
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"
+          >
+            {props.intl.formatMessage(messages.CSSHeight)}
+          </a>
+        ),
+        description: props.intl.formatMessage(messages.CSSMapHeightDescription),
+      },
       with_notes: {
         title: 'Show note',
         type: 'boolean',
@@ -50,13 +75,8 @@ export default () => {
         type: 'boolean',
         defaultValue: true,
       },
-      tableau_height: {
-        title: 'Height',
-        type: 'text',
-        defaultValue: '700',
-      },
     },
 
-    required: ['tableau_vis_url'],
+    required: [],
   };
 };

package/src/Blocks/Maps/Edit.jsx

@@ -4,12 +4,11 @@
  */
 
 import React, { Component } from 'react';
-import { isString } from 'lodash';
+import { isEqual, isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { Button, Input, Message } from 'semantic-ui-react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
 import { withBlockExtensions } from '@plone/volto/helpers';
 import { compose } from 'redux';
 import { Icon, SidebarPortal } from '@plone/volto/components';

package/src/Blocks/Maps/Edit.test.js

@@ -1,79 +1,83 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
 
 import Edit from './Edit';
 
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  __esModule: true,
-  SidebarPortal: jest.requireActual(
-    '@plone/volto/components/manage/Sidebar/SidebarPortal',
-  ).default,
-  UniversalLink: ({ children, href }) => {
-    return <a href={href}>{children}</a>;
-  },
-}));
-
-const store = mockStore({
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-  content: {
-    create: {},
-  },
-  connected_data_parameters: {},
-});
+describe('Test Maps Block editing', () => {
+  config.blocks.blocksConfig = {
+    ...config.blocks.blocksConfig,
+    maps: {
+      id: 'maps',
+      title: 'Maps',
+      group: 'media',
+      extensions: {},
+      variations: [],
+      restricted: false,
+      mostUsed: true,
+      sidebarTab: 1,
+      security: {
+        addPermission: [],
+        view: [],
+      },
+    },
+  };
 
-config.blocks.blocksConfig = {
-  ...config.blocks.blocksConfig,
-  maps: {
-    id: 'maps',
-    title: 'Maps',
-    group: 'media',
-    extensions: {},
-    variations: [],
-    restricted: false,
-    mostUsed: true,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
+  const data = {
+    '@type': 'maps',
+    url:
+      '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11255.043736345397!2d24.6862147!3d45.15143895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x474d3248f30cd7b5%3A0x307c5acf21ded9e3!2sHotel%20Posada!5e0!3m2!1sro!2sro!4v1701254795494!5m2!1sro!2sro" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
+    dataprotection: {
+      enabled: false,
+      privacy_statement: 'This is a privacy statement',
     },
-  },
-};
+    useVisibilitySensor: false,
+  };
+
+  test('test-1', () => {
+    const component = renderer.create(
+      <Provider store={global.store}>
+        <Edit
+          data={data}
+          pathname="/news"
+          selected={false}
+          block="1234"
+          index={1}
+          onChangeBlock={() => {}}
+          onSelectBlock={() => {}}
+          onDeleteBlock={() => {}}
+          onFocusPreviousBlock={() => {}}
+          onFocusNextBlock={() => {}}
+          handleKeyDown={() => {}}
+          content={{}}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 
-test('renders an edit map block component', () => {
-  const component = renderer.create(
-    <Provider store={store}>
-      <Edit
-        data={{
-          '@type': 'maps',
-          url:
-            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
-          dataprotection: {
-            enabled: false,
-          },
-          useVisibilitySensor: false,
-        }}
-        pathname="/news"
-        selected={false}
-        block="1234"
-        index={1}
-        onChangeBlock={() => {}}
-        onSelectBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onFocusPreviousBlock={() => {}}
-        onFocusNextBlock={() => {}}
-        handleKeyDown={() => {}}
-        content={{}}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  test('test-2', () => {
+    const component = renderer.create(
+      <Provider store={global.store}>
+        <Edit
+          data={data}
+          pathname="/news"
+          selected={true}
+          block="1234"
+          index={1}
+          onChangeBlock={() => {}}
+          onSelectBlock={() => {}}
+          onDeleteBlock={() => {}}
+          onFocusPreviousBlock={() => {}}
+          onFocusNextBlock={() => {}}
+          handleKeyDown={() => {}}
+          content={{}}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/Blocks/Maps/MapsSidebar.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { BlockDataForm } from '@plone/volto/components';
 import { useIntl, defineMessages } from 'react-intl';
+import { Icon, BlockDataForm } from '@plone/volto/components';
 import globeSVG from '@plone/volto/icons/globe.svg';
-import { Icon } from '@plone/volto/components';
 import { Segment } from 'semantic-ui-react';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
 import { MapsSchema } from './schema';

package/src/Blocks/Maps/View.jsx

@@ -30,7 +30,7 @@ const View = ({ data, intl, id }) => {
       className={cx(
         'block maps align',
         {
-          center: !Boolean(data.align),
+          center: !data.align,
         },
         data.align,
       )}

package/src/Blocks/Maps/View.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { render } from '@testing-library/react';
 import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import config from '@plone/volto/registry';
 
@@ -9,15 +9,6 @@ import installEmbedMaps from '.';
 
 installEmbedMaps(config);
 
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  __esModule: true,
-  UniversalLink: ({ children, href }) => {
-    return <a href={href}>{children}</a>;
-  },
-}));
-
 config.blocks.blocksConfig = {
   ...config.blocks.blocksConfig,
   maps: {
@@ -36,32 +27,65 @@ config.blocks.blocksConfig = {
   },
 };
 
-test('renders a view map block component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
+describe('Test Maps Block rendering', () => {
+  const data = {
+    '@type': 'maps',
+    url:
+      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
+    useVisibilitySensor: false,
+    dataprotection: {
+      enabled: false,
     },
-    content: {
-      create: {},
-    },
-    connected_data_parameters: {},
+  };
+
+  test('test-1', () => {
+    const component = renderer.create(
+      <Provider store={global.store}>
+        <View data={data} />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  test('test-2', () => {
+    const component = renderer.create(
+      <Provider store={global.store}>
+        <View
+          data={{
+            ...data,
+            height: '100vh',
+          }}
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  test('test-3', () => {
+    const Component = (props) => (
+      <Provider store={global.store}>
+        <View
+          data={{
+            ...data,
+            dataprotection: {
+              ...data.dataprotection,
+              enabled: true,
+            },
+            height: '100vh',
+            useVisibilitySensor: false,
+          }}
+        />
+      </Provider>
+    );
+    const { container, rerender } = render(<Component />);
+
+    expect(container).toMatchSnapshot();
+
+    container.querySelector('.privacy-button button').click();
+
+    rerender(<Component />);
+    expect(container).toMatchSnapshot();
   });
-  const component = renderer.create(
-    <Provider store={store}>
-      <View
-        data={{
-          '@type': 'maps',
-          url:
-            'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.7835278268726!2d14.38842915203974!3d40.634655679238854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x133b994881d943cb%3A0x6ab93db57d3272f0!2sHotel+Mediterraneo+Sorrento!5e0!3m2!1sen!2ses!4v1550168740166',
-          useVisibilitySensor: false,
-          dataprotection: {
-            enabled: false,
-          },
-        }}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
 });