@eeacms/volto-embed 8.0.0 → 9.0.1

package/src/Widgets/MapsViewWidget.jsx

@@ -1,5 +1,20 @@
-import Map from '@eeacms/volto-embed/Map/Map';
+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 <Map 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

@@ -5,7 +5,7 @@ import { Button, Modal, Grid, Label, Input, Message } from 'semantic-ui-react';
 import { map } from 'lodash';
 import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 import { addPrivacyProtectionToSchema } from '@eeacms/volto-embed';
-import Map from '@eeacms/volto-embed/Map/Map';
+import EmbedMap from '@eeacms/volto-embed/EmbedMap/EmbedMap';
 import { MapsSchema } from '@eeacms/volto-embed/Blocks/Maps/schema';
 
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -103,7 +103,7 @@ function MapEditorModal({ id, onClose, onChange, ...rest }) {
                 computer={8}
                 className="tableau-visualization-column"
               >
-                <Map data={value} id={id} />
+                <EmbedMap data={value} id={id} />
               </Grid.Column>
             </Grid>
           )}
@@ -204,7 +204,7 @@ export default function MapsWidget(props) {
         </Button>
       </div>
       {description && <p className="help">{description}</p>}
-      {value.url && <Map {...props} data={value} />}
+      {value.url && <EmbedMap {...props} data={value} />}
       {mapEditor && (
         <MapEditorModal
           id={id}

package/src/helpers.js

@@ -0,0 +1,16 @@
+import { pick } from 'lodash';
+
+export function pickMetadata(content) {
+  return {
+    ...pick(content, [
+      '@id',
+      'title',
+      'data_provenance',
+      'figure_note',
+      'other_organisations',
+      'temporan_coverage',
+      'publisher',
+      'geo_coverage',
+    ]),
+  };
+}

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

@@ -1,119 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React from 'react';
-import config from '@plone/volto/registry';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { Provider } from 'react-intl-redux';
-import configureStore from 'redux-mock-store';
-import Edit from './Edit';
-import '@testing-library/jest-dom/extend-expect';
-
-const mockStore = configureStore();
-
-const store = mockStore(() => ({
-  connected_data_parameters: {},
-  router: {
-    location: {
-      pathname: '',
-    },
-  },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-}));
-
-config.blocks.blocksConfig = {
-  ...config.blocks.blocksConfig,
-  maps: {
-    id: 'maps',
-    title: 'Maps',
-    group: 'media',
-    extensions: {},
-    variations: [],
-    restricted: false,
-    mostUsed: true,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-  },
-};
-
-jest.mock(
-  '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection',
-  () => ({ children }) => children,
-);
-
-describe('Edit', () => {
-  it('renders without crashing', () => {
-    render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          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',
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-  });
-
-  it('submits url when button is clicked', async () => {
-    const 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';
-
-    const { container, getByPlaceholderText } = render(
-      <Provider store={store}>
-        <Edit
-          selected={false}
-          block="block"
-          index={1}
-          data={{
-            '@type': 'maps',
-            dataprotection: {
-              privacy_statement: 'test',
-            },
-          }}
-          pathname="/"
-          onChangeBlock={() => {}}
-          onSelectBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          handleKeyDown={() => {}}
-        />
-      </Provider>,
-    );
-
-    const input = getByPlaceholderText('Enter map Embed Code');
-
-    fireEvent.click(input);
-    fireEvent.change(input, { target: { value: url } });
-    // screen.debug();
-    // expect(input.value).toBe(url);
-
-    // fireEvent.click(container.querySelector('button.cancel'));
-
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    // fireEvent.keyDown(input, { key: 'Escape', code: 'Escape' });
-    // fireEvent.keyDown(input, { key: 'KeyA', code: 'KeyA' });
-
-    // fireEvent.change(input, { target: { value: '<iframe src="test"/>' } });
-    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-
-    // const button = container.querySelector('button.ui.basic.primary.button');
-    // fireEvent.click(button);
-  });
-});