@eeacms/volto-embed 6.0.1 → 7.0.0

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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).
 
+### [7.0.0](https://github.com/eea/volto-embed/compare/6.0.1...7.0.0) - 6 November 2023
+
+#### :rocket: New Features
+
+- feat: add toolbar + refactor [Miu Razvan - [`d439f87`](https://github.com/eea/volto-embed/commit/d439f87045cfea1554319fe05ec2a9d8b0c141cf)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c34d6f4`](https://github.com/eea/volto-embed/commit/c34d6f47fd33f728d40254a12c05fe385b27f2e9)]
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`31169f7`](https://github.com/eea/volto-embed/commit/31169f73887837463daee76d63b6516046ad49aa)]
+
+#### :hammer_and_wrench: Others
+
+- update tests [Miu Razvan - [`c906b79`](https://github.com/eea/volto-embed/commit/c906b79149e853f718d924871ce2e633e5e427c8)]
+- update tests [Miu Razvan - [`11625b6`](https://github.com/eea/volto-embed/commit/11625b65846388a846d1bdf7ebb2e1f8bd103c91)]
+- Release 7.0.0 [Alin Voinea - [`cbc5c79`](https://github.com/eea/volto-embed/commit/cbc5c79f1b66daf0d599d9de5a1bc7d137bafed8)]
+- add act in unit tests [Miu Razvan - [`ecf5b2f`](https://github.com/eea/volto-embed/commit/ecf5b2fe553d99ad6a11570d3d34852d557fbe85)]
+- update [Miu Razvan - [`049cc14`](https://github.com/eea/volto-embed/commit/049cc140bb6ffea4eb3f1555e693e9973ef63d0e)]
+- update [Miu Razvan - [`124acea`](https://github.com/eea/volto-embed/commit/124acea1784d25c562d3271cba295927d38de8f8)]
+- update unit tests [Miu Razvan - [`52c3be5`](https://github.com/eea/volto-embed/commit/52c3be5b0b56ba5b17fd88e3ff99949b3636e727)]
 ### [6.0.1](https://github.com/eea/volto-embed/compare/6.0.0...6.0.1) - 12 October 2023
 
 #### :house: Internal changes

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-embed",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Embed external content",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,8 +27,8 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {
@@ -72,4 +72,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

package/src/{Iframe/EditIframe.jsx → Blocks/Maps/Edit.jsx}

@@ -9,17 +9,15 @@ 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';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 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';
-import schema from './schema';
-import {
-  PrivacyProtection,
-  addPrivacyProtectionToSchema,
-} from '../PrivacyProtection';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
+import MapsSidebar from './MapsSidebar';
 
 const messages = defineMessages({
   MapsBlockInputPlaceholder: {
@@ -90,6 +88,19 @@ class Edit extends Component {
     this.onKeyDownVariantMenuForm = this.onKeyDownVariantMenuForm.bind(this);
   }
 
+  /**
+   * @param {*} nextProps
+   * @returns {boolean}
+   * @memberof Edit
+   */
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.selected ||
+      nextProps.selected ||
+      !isEqual(this.props.data, nextProps.data)
+    );
+  }
+
   /**
    * Backward compatibility
    * @method componentDidMount
@@ -196,6 +207,9 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const placeholder =
+      this.props.data.placeholder ||
+      this.props.intl.formatMessage(messages.MapsBlockInputPlaceholder);
     return (
       <div
         className={cx(
@@ -224,6 +238,11 @@ class Edit extends Component {
                 className="google-map"
                 frameBorder="0"
                 allowFullScreen
+                style={
+                  this.props.data.height
+                    ? { height: this.props.data.height }
+                    : {}
+                }
               />
             </PrivacyProtection>
           </div>
@@ -235,9 +254,7 @@ class Edit extends Component {
                 <Input
                   onKeyDown={this.onKeyDownVariantMenuForm}
                   onChange={this.onChangeUrl}
-                  placeholder={this.props.intl.formatMessage(
-                    messages.MapsBlockInputPlaceholder,
-                  )}
+                  placeholder={placeholder}
                   value={this.state.url}
                   // Prevents propagation to the Dropzone and the opening
                   // of the upload browser dialog
@@ -287,22 +304,13 @@ class Edit extends Component {
             </center>
           </Message>
         )}
+        {!this.props.selected && <div className="map-overlay" />}
         <SidebarPortal selected={this.props.selected}>
-          <InlineForm
-            schema={addPrivacyProtectionToSchema(schema)}
-            title={schema.title}
-            onChangeField={(id, value) => {
-              this.props.onChangeBlock(this.props.block, {
-                ...this.props.data,
-                [id]: value,
-              });
-            }}
-            formData={this.props.data}
-          />
+          <MapsSidebar {...this.props} resetSubmitUrl={this.resetSubmitUrl} />
         </SidebarPortal>
       </div>
     );
   }
 }
 
-export default injectIntl(Edit);
+export default compose(injectIntl, withBlockExtensions)(Edit);

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

@@ -0,0 +1,119 @@
+/* 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);
+  });
+});

package/src/Blocks/Maps/MapsSidebar.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { useIntl, defineMessages } from 'react-intl';
+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';
+
+const messages = defineMessages({
+  Maps: {
+    id: 'Maps',
+    defaultMessage: 'Maps',
+  },
+  NoMaps: {
+    id: 'No map selected',
+    defaultMessage: 'No map selected',
+  },
+});
+
+const MapsSidebar = (props) => {
+  const { data, block, onChangeBlock } = props;
+  const intl = useIntl();
+  const schema = addPrivacyProtectionToSchema(MapsSchema({ ...props, intl }));
+
+  return (
+    <>
+      {!data.url ? (
+        <Segment className="sidebar-metadata-container" secondary>
+          {props.intl.formatMessage(messages.NoMaps)}
+          <Icon name={globeSVG} size="100px" color="#b8c6c8" />
+        </Segment>
+      ) : (
+        <BlockDataForm
+          schema={schema}
+          title={intl.formatMessage(messages.Maps)}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          block={block}
+        />
+      )}
+    </>
+  );
+};
+
+export default MapsSidebar;

package/src/{Iframe/ViewIframe.jsx → Blocks/Maps/View.jsx}

@@ -7,7 +7,9 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { PrivacyProtection } from '../PrivacyProtection';
+import { compose } from 'redux';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import PrivacyProtection from '@eeacms/volto-embed/PrivacyProtection/PrivacyProtection';
 
 const messages = defineMessages({
   EmbededGoogleMaps: {
@@ -32,17 +34,11 @@ const View = ({ data, intl, id }) => {
         },
         data.align,
       )}
-      style={
-        data.align === 'full'
-          ? { position: 'static', height: data.height }
-          : { height: data.height }
-      }
     >
       <div
-        className={cx({
-          'full-width-block': data.align === 'full',
+        className={cx('maps-inner', {
+          'full-width': data.align === 'full',
         })}
-        style={{ height: '100%' }}
       >
         <PrivacyProtection data={data} id={id}>
           <iframe
@@ -51,7 +47,7 @@ const View = ({ data, intl, id }) => {
             className="google-map"
             frameBorder="0"
             allowFullScreen
-            style={{ height: data.height }}
+            style={data.height ? { height: data.height } : {}}
           />
         </PrivacyProtection>
       </div>
@@ -68,4 +64,4 @@ View.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(View);
+export default compose(injectIntl, withBlockExtensions)(View);

package/src/Blocks/Maps/index.js

@@ -0,0 +1,12 @@
+import Edit from './Edit';
+import View from './View';
+
+export default function installHeroBlock(config) {
+  config.blocks.blocksConfig.maps = {
+    ...config.blocks.blocksConfig.maps,
+    edit: Edit,
+    view: View,
+  };
+
+  return config;
+}

package/src/Blocks/Maps/schema.js

@@ -0,0 +1,67 @@
+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: 'CSSHeight',
+    defineMessages: 'CSS height',
+  },
+  CSSHeightDescription: {
+    id: 'CSSHeightDescription',
+    defineMessages: 'Iframe height',
+  },
+});
+
+export const MapsSchema = (props) => ({
+  title: props.intl.formatMessage(messages.Maps),
+  block: 'Maps',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['url', 'title', 'align', 'height'],
+    },
+  ],
+
+  properties: {
+    url: {
+      title: props.intl.formatMessage(messages.MapsURL),
+      widget: 'url',
+    },
+    title: {
+      title: props.intl.formatMessage(messages.AltText),
+    },
+    align: {
+      title: props.intl.formatMessage(messages.Alignment),
+      widget: 'align',
+    },
+    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.CSSHeightDescription),
+    },
+  },
+  required: [],
+});

package/src/Blocks/index.js

@@ -0,0 +1,5 @@
+import installMaps from './Maps';
+
+export default function installBlocks(config) {
+  return [installMaps].reduce((acc, apply) => apply(acc), config);
+}

package/src/PrivacyProtection/PrivacyProtection.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import cx from 'classnames';
 import { compose } from 'redux';
 import { useSelector, useDispatch } from 'react-redux';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -77,6 +78,7 @@ const CookieWatcher = (domain_key, cookies, pollingRate = 250) => {
 
 const PrivacyProtection = (props) => {
   const {
+    className,
     children,
     data = {},
     id,
@@ -168,7 +170,7 @@ const PrivacyProtection = (props) => {
     >
       {visible ? (
         <div
-          className="privacy-protection-wrapper"
+          className={cx('privacy-protection-wrapper', className)}
           style={{
             position: 'relative',
             height: height && (!enabled || !show) ? `${height}px` : 'auto',

package/src/PrivacyProtection/styles.less

@@ -17,17 +17,12 @@
   text-align: center;
 
   .wrapped {
-    // position: absolute;
-    // top: 50%;
-    // left: 50%;
     width: 300px;
     padding: 1.4rem;
     margin: 0 auto;
     background: white;
     border-radius: 5px;
     opacity: 1;
-    // -ms-transform: translate(-50%, -50%);
-    // transform: translate(-50%, -50%);
   }
 
   .discreet,

package/src/Toolbar/Enlarge.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Modal } from 'semantic-ui-react';
+
+const EnlargeWidget = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="enlarge">
+      <button className="trigger-button" onClick={() => setIsOpen(true)}>
+        <i className="ri-fullscreen-line" />
+        Enlarge
+      </button>
+      <Modal
+        open={isOpen}
+        closeIcon={
+          <span className="close icon">
+            <i class="ri-close-line" />
+          </span>
+        }
+        onClose={() => setIsOpen(false)}
+        className="enlarge-modal"
+      >
+        <Modal.Content>{children}</Modal.Content>
+      </Modal>
+    </div>
+  );
+};
+
+export default EnlargeWidget;

package/src/Toolbar/FigureNote.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Popup } from 'semantic-ui-react';
+import { isArray, isString } from 'lodash';
+import cx from 'classnames';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+
+export const serializeText = (notes) => {
+  const content = isArray(notes) ? serializeNodes(notes) : notes;
+  const text = isArray(notes)
+    ? serializeNodesToText(notes)
+    : isString(notes)
+    ? notes
+    : '';
+  if (!text) return <p>There are no notes set for this visualization</p>;
+  return content;
+};
+
+export default function FigureNote({ notes = [] }) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popup
+      popper={{ id: 'vis-toolbar-popup', className: 'figure-note-popup' }}
+      position="bottom left"
+      on="click"
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      trigger={
+        <div className="figure-note">
+          <button className={cx('trigger-button', { open })}>Note</button>
+        </div>
+      }
+    >
+      <Popup.Content>{serializeText(notes)}</Popup.Content>
+    </Popup>
+  );
+}

package/src/Toolbar/MoreInfo.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+export default function MoreInfo({ href }) {
+  return (
+    <div className="more-info">
+      <Link href={href} className="trigger-button">
+        <span>More info</span>
+        <i class="ri-external-link-line" />
+      </Link>
+    </div>
+  );
+}