@eeacms/volto-embed 9.0.0 → 9.0.2

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);
@@ -37,6 +46,8 @@ function EmbedMap({ data, intl, id, screen }) {
     }
   }, [screen, mobile]);
 
+  if (!data.url) return null;
+
   return (
     <div
       ref={el}
@@ -56,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
@@ -65,17 +76,20 @@ 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>
       <div className={cx('visualization-toolbar', { mobile })}>
         <div className="left-col">
           {data.with_notes && <FigureNote notes={data.figure_note || []} />}
-          {data.with_sources && <Sources sources={data.sources} />}
+          {data.with_sources && (
+            <Sources sources={data.data_provenance?.data} />
+          )}
           {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
@@ -93,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

@@ -187,7 +187,7 @@ const PrivacyProtection = (props) => {
       >
         {!enabled || show ? (
           children
-        ) : !__DEVELOPMENT__ && !image ? (
+        ) : !__DEVELOPMENT__ && !image && !process.env.JEST_WORKER_ID ? (
           <Dimmer active>
             <Loader />
           </Dimmer>

package/src/Toolbar/Toolbar.test.js

@@ -1,48 +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 { Enlarge, FigureNote, MoreInfo, Share, Sources } from '.';
 
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/components', () => ({
-  __esModule: true,
-  UniversalLink: ({ children, href }) => {
-    return <a href={href}>{children}</a>;
-  },
-}));
-
-jest.mock('@plone/volto-slate/editor/render', () => ({
-  __esModule: true,
-  serializeNodes: (nodes) => {
-    return nodes.map((node, index) => {
-      const Tag = node.type;
-      return (
-        <Tag key={`node-${index}`}>
-          {node.children.map((item, index) => (
-            <span key={`item-${index}`}>{item.text}</span>
-          ))}
-        </Tag>
-      );
-    });
-  },
-  serializeNodesToText: (nodes) => {
-    return nodes
-      .reduce((texts, node) => {
-        if (node.children) {
-          node.children.forEach((item) => {
-            texts.push(item.text);
-          });
-        }
-        return texts;
-      }, [])
-      .join('');
-  },
-}));
-
 config.blocks.blocksConfig = {
   ...config.blocks.blocksConfig,
   maps: {
@@ -62,18 +24,8 @@ config.blocks.blocksConfig = {
 };
 
 test('renders toolbar components', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-    content: {
-      create: {},
-    },
-    connected_data_parameters: {},
-  });
   const component = renderer.create(
-    <Provider store={store}>
+    <Provider store={global.store}>
       <div className="visualization-toolbar">
         <div className="left-col">
           <FigureNote

package/src/Views/MapView.jsx

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Container } from 'semantic-ui-react';
+import { hasBlocksData } from '@plone/volto/helpers';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 
 const MapView = (props) => {
   return (
-    <Container>
-      <EmbedMap data={props.content.maps} id={props.content['@id']} />
+    <Container id="page-document" className="view-wrapper visualization-view">
+      {hasBlocksData(props.content) ? (
+        <RenderBlocks {...props} />
+      ) : (
+        <EmbedMap
+          data={{
+            ...(props.content.maps || {}),
+            ...pickMetadata(props.content),
+            with_share: true,
+          }}
+          id="map-view"
+        />
+      )}
     </Container>
   );
 };

package/src/Views/MapView.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 MapView from './MapView';
 
-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}>
       <MapView
         content={{
           maps: {

package/src/Widgets/MapsViewWidget.jsx

@@ -1,5 +1,20 @@
+import { connect } from 'react-redux';
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 
-export default function MapsViewWidget({ id, value }) {
-  return <EmbedMap data={value} id={id} />;
+function MapsViewWidget({ id, value, content }) {
+  return (
+    <EmbedMap
+      data={{
+        ...(value || {}),
+        ...pickMetadata(content),
+        with_share: true,
+      }}
+      id={id}
+    />
+  );
 }
+
+export default connect((state) => ({ content: state.content.data }))(
+  MapsViewWidget,
+);

package/src/Widgets/MapsWidget.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
 import { map } from 'lodash';
@@ -12,6 +12,13 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import mapsBlockSVG from '@plone/volto/components/manage/Blocks/Maps/block-maps.svg';
 
+const messages = defineMessages({
+  MapsBlockInputPlaceholder: {
+    id: 'Enter map Embed Code',
+    defaultMessage: 'Enter map Embed Code',
+  },
+});
+
 function MapEditorModal({ id, onClose, onChange, ...rest }) {
   const intl = useIntl();
   const [value, setValue] = useState(rest.value);
@@ -24,7 +31,9 @@ function MapEditorModal({ id, onClose, onChange, ...rest }) {
   );
 
   const placeholder = useMemo(
-    () => value.placeholder || intl.messages?.['Enter map Embed Code'],
+    () =>
+      value.placeholder ||
+      intl.formatMessage(messages.MapsBlockInputPlaceholder),
     [value.placeholder, intl],
   );