@eeacms/volto-embed 9.0.1 → 9.0.3

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

@@ -8,7 +8,7 @@ const applyConfig = (config) => {
     id: 'embed_maps',
     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();
 });

package/src/Blocks/Maps/schema.js

@@ -1,19 +1,35 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
+  Maps: {
+    id: 'Maps',
+    defaultMessage: 'Maps',
+  },
+  AltText: {
+    id: 'Alt text',
+    defaultMessage: 'Alt text',
+  },
+  MapsURL: {
+    id: 'Maps URL',
+    defaultMessage: 'Maps URL',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
   CSSHeight: {
     id: 'CSS height',
-    defineMessages: 'CSS height',
+    defaultMessage: 'CSS height',
   },
-  CSSHeightDescription: {
-    id: 'Iframe height',
-    defineMessages: 'Iframe height',
+  CSSMapHeightDescription: {
+    id: 'Map height',
+    defaultMessage: 'Map height',
   },
 });
 
 export const MapsSchema = (props) => {
   return {
-    title: props.intl.messages['Maps'],
+    title: props.intl.formatMessage(messages.Maps),
     block: 'Maps',
     fieldsets: [
       {
@@ -25,14 +41,14 @@ export const MapsSchema = (props) => {
 
     properties: {
       url: {
-        title: props.intl.messages['Maps URL'],
+        title: props.intl.formatMessage(messages.MapsURL),
         widget: 'url',
       },
       title: {
-        title: props.intl.messages['Alt text'],
+        title: props.intl.formatMessage(messages.AltText),
       },
       align: {
-        title: props.intl.messages['Alignment'],
+        title: props.intl.formatMessage(messages.Alignment),
         widget: 'align',
       },
       height: {
@@ -45,7 +61,7 @@ export const MapsSchema = (props) => {
             {props.intl.formatMessage(messages.CSSHeight)}
           </a>
         ),
-        description: props.intl.formatMessage(messages.CSSHeightDescription),
+        description: props.intl.formatMessage(messages.CSSMapHeightDescription),
       },
     },
     required: [],

package/src/Blocks/index.js

@@ -1,7 +1,16 @@
+import { uniqBy } from 'lodash';
 import installMaps from './Maps';
 import installEmbedMaps from './EmbedMaps';
 
 export default function installBlocks(config) {
+  config.blocks.groupBlocksOrder = uniqBy(
+    [
+      ...config.blocks.groupBlocksOrder,
+      { id: 'data_visualizations', title: 'Data Visualizations' },
+    ],
+    'id',
+  );
+
   return [installMaps, installEmbedMaps].reduce(
     (acc, apply) => apply(acc),
     config,

package/src/EmbedMap/EmbedMap.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { isNaN, isNumber } from 'lodash';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -21,6 +22,14 @@ const messages = defineMessages({
   },
 });
 
+function getHeight(height) {
+  const asNumber = isNumber(Number(height)) && !isNaN(Number(height));
+  if (asNumber) {
+    return `${height}px`;
+  }
+  return height;
+}
+
 function EmbedMap({ data, intl, id, screen }) {
   const el = useRef();
   const [mobile, setMobile] = useState(false);
@@ -58,7 +67,7 @@ function EmbedMap({ data, intl, id, screen }) {
         <PrivacyProtection
           data={data}
           id={id}
-          height={data.height}
+          height={getHeight(data.height)}
           useVisibilitySensor={data.useVisibilitySensor ?? true}
         >
           <iframe
@@ -67,7 +76,7 @@ function EmbedMap({ data, intl, id, screen }) {
             className="google-map"
             frameBorder="0"
             allowFullScreen
-            style={data.height ? { height: data.height } : {}}
+            style={data.height ? { height: getHeight(data.height) } : {}}
           />
         </PrivacyProtection>
       </div>
@@ -80,6 +89,7 @@ function EmbedMap({ data, intl, id, screen }) {
           {data.with_more_info && <MoreInfo href={data['@id']} />}
         </div>
         <div className="right-col">
+          {data.with_share && <Share href={data['@id']} />}
           {data.with_enlarge && (
             <Enlarge className="enlarge-embed-maps">
               <EmbedMap
@@ -97,7 +107,6 @@ function EmbedMap({ data, intl, id, screen }) {
               />
             </Enlarge>
           )}
-          {data.with_share && <Share href={data['@id']} />}
         </div>
       </div>
     </div>

package/src/EmbedMap/EmbedMap.test.js

@@ -1,20 +1,10 @@
 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 EmbedMap from './EmbedMap';
 
-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: {
@@ -34,18 +24,8 @@ config.blocks.blocksConfig = {
 };
 
 test('renders map component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-    content: {
-      create: {},
-    },
-    connected_data_parameters: {},
-  });
   const component = renderer.create(
-    <Provider store={store}>
+    <Provider store={global.store}>
       <EmbedMap
         id="my-map"
         data={{

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -110,7 +110,8 @@ const PrivacyProtection = (props) => {
       state.router?.location?.pathname,
     );
   });
-  const url = getFilteredURL(data.url, connected_data_parameters);
+  const mapUrl = data.url || data.vis_url;
+  const url = getFilteredURL(mapUrl, connected_data_parameters);
 
   const height = React.useMemo(() => {
     if (!props.height || enabled || !show) return 'auto';
@@ -187,7 +188,7 @@ const PrivacyProtection = (props) => {
       >
         {!enabled || show ? (
           children
-        ) : !__DEVELOPMENT__ && !image ? (
+        ) : !__DEVELOPMENT__ && !image && !process.env.JEST_WORKER_ID ? (
           <Dimmer active>
             <Loader />
           </Dimmer>