@eeacms/volto-eea-map 2.0.6 → 3.0.0

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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).
 
+### [3.0.0](https://github.com/eea/volto-eea-map/compare/2.0.7...3.0.0) - 23 November 2023
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`005b994`](https://github.com/eea/volto-eea-map/commit/005b9949a93a9101cf5b88054523e05d03deae05)]
+- clean up [Miu Razvan - [`4144747`](https://github.com/eea/volto-eea-map/commit/4144747b84d1fb0e51614c7a963d750c9b67100d)]
+- clean up [Miu Razvan - [`80c37f9`](https://github.com/eea/volto-eea-map/commit/80c37f9cb8b54e79caf5d147e452a5e88168a218)]
+- bump version + remove uneeded code [Miu Razvan - [`adb8733`](https://github.com/eea/volto-eea-map/commit/adb8733fa4ce3d42a9d16cb7ad19518d49949da2)]
+- update [Miu Razvan - [`6723242`](https://github.com/eea/volto-eea-map/commit/6723242a8507a29194cfc9650ae214d2abca74ad)]
+- fix sonorqube [Dobricean Ioan Dorian - [`02b4406`](https://github.com/eea/volto-eea-map/commit/02b44067598c6cedcfc28c3b7667e4cb23addfc5)]
+- fix prettier [Dobricean Ioan Dorian - [`78fc2ba`](https://github.com/eea/volto-eea-map/commit/78fc2baa2f5264ca1bba61b70bc0bdc5b2788e67)]
+- Fix Sonorqube [dobri1408 - [`e04011a`](https://github.com/eea/volto-eea-map/commit/e04011aa811422f865d0bbb1e66af558a4310e77)]
+- adapt embedeeamap to use serialized data [Dobricean Ioan Dorian - [`005965c`](https://github.com/eea/volto-eea-map/commit/005965c6793a9a9977fef52c08ba9a3173eec348)]
+### [2.0.7](https://github.com/eea/volto-eea-map/compare/2.0.6...2.0.7) - 10 November 2023
+
+#### :rocket: New Features
+
+- feat: mobile toolbar [Miu Razvan - [`0c8d2fa`](https://github.com/eea/volto-eea-map/commit/0c8d2fa66d175f97f5bed3fbb26de5841fa71905)]
+- feat: use toolbar [Miu Razvan - [`d1c76bb`](https://github.com/eea/volto-eea-map/commit/d1c76bba44c7bf357276b908b00224a4d7837eae)]
+- feat: share option, design improvements [dana-cfc4 - [`33a0d5e`](https://github.com/eea/volto-eea-map/commit/33a0d5e4c386b8507cfba4a59ea73131256e25a8)]
+
+#### :bug: Bug Fixes
+
+- fix: same background colour for popups [dana-cfc4 - [`61e465f`](https://github.com/eea/volto-eea-map/commit/61e465f36a272ee76311665d1a249c070524741d)]
+- fix: volto version  16 [dana-cfc4 - [`abe9ac2`](https://github.com/eea/volto-eea-map/commit/abe9ac29e3657ff8773001d8a9e9b03f72c026a4)]
+- fix: display figure note [dana-cfc4 - [`7f3d58f`](https://github.com/eea/volto-eea-map/commit/7f3d58f9828b9a0fd43075aed2c76559a16bd8fe)]
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`0ee38a7`](https://github.com/eea/volto-eea-map/commit/0ee38a7bee84694a5e0230e2d17083fbc071f0c8)]
+- chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`8efeb44`](https://github.com/eea/volto-eea-map/commit/8efeb4423da70e421a88cabdeb559eb3613fb96e)]
+- chore: display legend for content type item, fix case when no note is set [dana-cfc4 - [`ae630a8`](https://github.com/eea/volto-eea-map/commit/ae630a88cffa2a8ef60e0bbfead392508b015497)]
+- chore: display figureNote [dana-cfc4 - [`19fa10c`](https://github.com/eea/volto-eea-map/commit/19fa10c92a96d8362af5fbe460085405c4bad517)]
+- chore: add toggle for more info -refs#257682 [dana-cfc4 - [`65d6b7b`](https://github.com/eea/volto-eea-map/commit/65d6b7ba7ae0a2aaf513c8ced0d2bb977e43ef1b)]
+- chore: add figure note and more info extra views, display legend for content type item -refs#257682 [dana-cfc4 - [`720ab02`](https://github.com/eea/volto-eea-map/commit/720ab022cd99947d71c5b598a1637b12255d17af)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #260203: make background_image required [laszlocseh - [`baa5c4f`](https://github.com/eea/volto-eea-map/commit/baa5c4fa2fe618af51df12d48b4512ecafc357a8)]
+- use toolbar from volto-embed [Miu Razvan - [`29b73fb`](https://github.com/eea/volto-eea-map/commit/29b73fb8378ca56b3634bf1f7d57ce69a242b18e)]
 ### [2.0.6](https://github.com/eea/volto-eea-map/compare/2.0.5...2.0.6) - 29 September 2023
 
 #### :house: Internal changes
@@ -19,7 +59,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4c6d141`](https://github.com/eea/volto-eea-map/commit/4c6d1413b67ffc3fe27a7d09dcc99ef98867cec9)]
 - test: Fix package.json scripts to use makefile [Alin Voinea - [`1cd6751`](https://github.com/eea/volto-eea-map/commit/1cd675118165d8631c41d35c00a8c902c7edd803)]
-- test: Fix eslint and yarn i18n [Alin Voinea - [`0184641`](https://github.com/eea/volto-eea-map/commit/018464116ba5b86b2c1e0a4ebc9b2fd95b772b66)]
 - i18n: Add en [Alin Voinea - [`1d29304`](https://github.com/eea/volto-eea-map/commit/1d293049a21e138fa933cd5ed9a04cceac1a5cff)]
 ### [2.0.5](https://github.com/eea/volto-eea-map/compare/2.0.4...2.0.5) - 23 August 2023
 
@@ -76,14 +115,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 2.0.0 [Alin Voinea - [`7be280d`](https://github.com/eea/volto-eea-map/commit/7be280d4809186e663f422687aca3c33dd732904)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`ba6ed22`](https://github.com/eea/volto-eea-map/commit/ba6ed22118406db979457384d4739cced2096137)]
 ### [1.0.2](https://github.com/eea/volto-eea-map/compare/1.0.1...1.0.2) - 21 July 2023
 
 #### :hammer_and_wrench: Others
 
 - Allow blocks in content type [Tiberiu Ichim - [`2ac09a6`](https://github.com/eea/volto-eea-map/commit/2ac09a613aba07f6cbaf42c386660f2d7d09bd13)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`403b4c0`](https://github.com/eea/volto-eea-map/commit/403b4c009e5aaded58203bc292ba3baa4631488b)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`aedb654`](https://github.com/eea/volto-eea-map/commit/aedb6544fd45b147a3385425aba46ffba108f5ca)]
 ### [1.0.1](https://github.com/eea/volto-eea-map/compare/1.0.0...1.0.1) - 22 June 2023
 
 #### :rocket: New Features
@@ -144,7 +180,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - chore: clear unused #254131 [andreiggr - [`ccec2ea`](https://github.com/eea/volto-eea-map/commit/ccec2eaab173c905cd4ea0190a9c6cfd630250f9)]
 - chore: clear block style #254131 [andreiggr - [`af500bc`](https://github.com/eea/volto-eea-map/commit/af500bc10a5f280eff0335f45bae1596d66a7e6b)]
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`76b29e5`](https://github.com/eea/volto-eea-map/commit/76b29e510f5156590723831a524bc39dfba6deba)]
 
 #### :hammer_and_wrench: Others
 
@@ -154,7 +189,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - * versions [andreiggr - [`6d9ff2b`](https://github.com/eea/volto-eea-map/commit/6d9ff2b26a236b6445678e3d84698d1c3c0826f4)]
 - add razzle-plugin-scss dep [andreiggr - [`d74cee5`](https://github.com/eea/volto-eea-map/commit/d74cee51d30c866afe55730e5b25e0bf11d2caea)]
 - volto-object-widget [andreiggr - [`18d0ed7`](https://github.com/eea/volto-eea-map/commit/18d0ed72c1ba7b0f7159a0eefc09ccea9acee5cb)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`5911d01`](https://github.com/eea/volto-eea-map/commit/5911d01f7f3bc79a2c834fab75a9a4ac05d2d042)]
 ### [0.1.32](https://github.com/eea/volto-eea-map/compare/0.1.31...0.1.32) - 20 February 2023
 
 #### :hammer_and_wrench: Others
@@ -162,7 +196,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - remove console.log [tedw87 - [`3aeb3e8`](https://github.com/eea/volto-eea-map/commit/3aeb3e8ec5474387f3cd22eb9b387c6681e17120)]
 - refactor code [tedw87 - [`6d7830e`](https://github.com/eea/volto-eea-map/commit/6d7830eb934f56c255eea5642bdefba30d892946)]
 - add Blossom basemap layer [tedw87 - [`5226ee2`](https://github.com/eea/volto-eea-map/commit/5226ee218df3401cf467afbc7a4d720dc30719e1)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`1dad5c6`](https://github.com/eea/volto-eea-map/commit/1dad5c6617096ff85223165a6dd2b1d5d7deea6a)]
 ### [0.1.31](https://github.com/eea/volto-eea-map/compare/0.1.30...0.1.31) - 11 November 2022
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -18,24 +18,30 @@
 
 # Configuration
 
-This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/ 
+This addon contains the EEA Embed Map Block & EEA Map Block. It's configured to work with the map visualization content type and give more access to ArcGIS maps. See available maps here https://discomap.eea.europa.eu/
 
-# Enable data queries auto-import 
+# Enable data queries auto-import
 
-To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map. 
+To enable automatic import of queries from the content-type, "Parameters for data connections" should be checked as behavior on the content-type that uses the map.
 
     controlpanel/dexterity-types/{content-type-id}
 
 # Enable Sources
 
-Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be  checked as behavior on the  visualization content-type. 
+Sources (Data provenance) should be set on the visualization. To enable this, "EEA Core Metadata" should be checked as behavior on the visualization content-type.
 
     controlpanel/dexterity-types/map_visualization
-    
+
 After this, sources can be added from the visualization edit interface. "Data Provenance" tab => "Add source"
 
+[EEA MAP](https://raw.githubusercontent.com/eea/volto-eea-map/master/docs/volto-eea-map.gif)
+
 ## Getting started
 
+### Upgrade
+
+#### 3.0.0 -> requires >= eea.api.dataconnector@7.0
+
 ### Try volto-eea-map with Docker
 
       git clone https://github.com/eea/volto-eea-map.git
@@ -55,25 +61,25 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-eea-map"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-eea-map"
+  ],
 
-   "dependencies": {
-       "@eeacms/volto-eea-map": "*"
-   }
-   ```
+  "dependencies": {
+      "@eeacms/volto-eea-map": "*"
+  }
+  ```
 
-* If not, create one:
+- If not, create one:
 
-   ```
-   npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
-   cd my-volto-project
-   ```
+  ```
+  npm install -g yo @plone/generator-volto
+  yo @plone/volto my-volto-project --canary --addon @eeacms/volto-eea-map
+  cd my-volto-project
+  ```
 
 1. Install new add-ons and restart Volto:
 

package/RELEASE.md

@@ -20,9 +20,9 @@ You need to first install the [release-it](https://github.com/release-it/release
    ```
    npm install -g release-it
    ```
-   
+
 Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-   
+
 Release-it is a tool that automates 4 important steps in the release process:
 
 1. Version increase in `package.json` ( increased from the current version in `package.json`)
@@ -30,45 +30,45 @@ Release-it is a tool that automates 4 important steps in the release process:
 3. GitHub release on the commit with the changelog and package.json modification on the develop branch
 4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
 
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
 
    ```
    export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
    ```
- 
+
  To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
- 
+
    ```
    echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
    ```
 
 #### Using release-it tool
-  
+
 There are 3 yarn scripts that can be run to do the release
 
 ##### yarn release-beta
 
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
 
 ```
-? Select increment (next version): 
-❯ prepatch (0.1.1-beta.0) 
-  preminor (0.2.0-beta.0) 
-  premajor (1.0.0-beta.0) 
-  Other, please specify... 
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
 ```
 
 ##### yarn release-major-beta
 
 Same as `yarn release-beta`, but with premajor version pre-selected.
-    
+
 ##### yarn release
 
 Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
 
 #### Important notes
 
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
 
 > Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
 

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-eea-map",
-  "version": "2.0.6",
+  "version": "3.0.0",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -36,8 +36,8 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "cypress": "10.3.1",
     "cypress-fail-fast": "^5.0.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {
@@ -81,4 +81,4 @@
     "cypress:open": "make cypress-open",
     "prepare": "husky install"
   }
-}
+}

package/src/components/Blocks/EmbedEEAMap/Edit.jsx

@@ -1,87 +1,84 @@
-import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-
+import React, { useEffect, useMemo } from 'react';
+import { Message } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 
+import { SidebarPortal } from '@plone/volto/components';
+import { getContent } from '@plone/volto/actions';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 
-import { expandToBackendURL } from '@plone/volto/helpers';
-
 import { Schema } from './Schema';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
 
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+import { getMapVisualizationData } from './helpers';
 
 const Edit = (props) => {
-  const { block, onChangeBlock, selected, data_provenance = {} } = props;
+  const { id, block, onChangeBlock, selected, data, getContent } = props;
+  const {
+    data_query_params,
+    enable_queries,
+    show_legend = true,
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
   const schema = Schema(props);
   const [mapData, setMapData] = React.useState('');
-  const data = React.useMemo(() => props.data, [props.data]);
-  const { height = '' } = data;
 
-  React.useEffect(() => {
-    if (!Object.hasOwn(data, 'show_legend')) {
-      onChangeBlock(block, {
-        ...data,
-        show_legend: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'show_sources')) {
-      onChangeBlock(block, {
-        ...data,
-        show_sources: true,
-      });
-    }
-    if (!Object.hasOwn(data, 'dataprotection')) {
-      onChangeBlock(block, {
-        ...data,
-        dataprotection: { enabled: true },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data.show_legend, data.show_sources, data.dataprotection]);
+  const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
 
-  React.useEffect(() => {
-    if (props.data.vis_url) {
-      props.getVisualization(expandToBackendURL(props.data.vis_url));
+  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
+    props,
+  ]);
+
+  useEffect(() => {
+    const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
+    if (vis_url && vis_url !== mapVisId) {
+      getContent(vis_url, null, id);
     }
-    if (!props.data.vis_url) {
+    if (!vis_url) {
       setMapData('');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data.vis_url]);
+  }, [id, getContent, vis_url, map_visualization_data]);
 
   React.useEffect(() => {
     const updatedMapData = applyQueriesToMapLayers(
-      props.map_visualization,
-      props.data.data_query_params,
-      props.data.enable_queries,
+      map_visualization_data,
+      data_query_params,
+      enable_queries,
     );
     setMapData(updatedMapData);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.map_visualization, props.data]);
+  }, [map_visualization_data, data_query_params, enable_queries]);
 
   return (
     <>
-      {mapData && (
+      {!vis_url && (
+        <Message>Please select a visualization from block editor.</Message>
+      )}
+
+      {!!vis_url && mapData && (
         <div>
           <Webmap data={mapData} height={height} isEdit={true} />
           <ExtraViews
             data={{
               ...data,
-              data_provenance,
-              map_data: props.map_visualization,
+              show_legend,
+              show_note,
+              show_sources,
+              show_more_info,
+              show_share,
+              dataprotection,
+              map_visualization_data,
             }}
           />
         </div>
       )}
-      {!mapData && (
-        <p>No map view to show. Set visualization in block configuration.</p>
-      )}
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
@@ -103,18 +100,11 @@ const Edit = (props) => {
 export default compose(
   connect(
     (state, props) => ({
+      mapContent: state.content.subrequests?.[props.id]?.data,
       data_query: state.content.data.data_query,
-      map_visualization: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data
-        : '',
-      data_provenance: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data_provenance
-        : '',
     }),
     {
-      getVisualization,
+      getContent,
     },
   ),
 )(Edit);

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -60,10 +60,11 @@ const ProtectionSchema = () => ({
     background_image: {
       title: 'Static map preview image',
       widget: 'file',
+      required: true,
     },
   },
 
-  required: [],
+  required: ['background_image'],
 });
 
 export const Schema = (props) => {
@@ -83,14 +84,26 @@ export const Schema = (props) => {
           'vis_url',
           'description',
           'height',
+          'enable_queries',
+          ...(props.data.enable_queries ? ['data_query_params'] : []),
+        ],
+      },
+      {
+        id: 'toolbar',
+        title: 'Toolbar',
+        fields: [
           'show_legend',
           'show_viewer',
+          'show_note',
           'show_sources',
-          'enable_queries',
-          ...(props.data.enable_queries ? ['data_query_params'] : []),
-          'dataprotection',
+          'show_more_info',
+          'show_share',
         ],
       },
+      {
+        fields: ['dataprotection'],
+        title: 'Data Protection',
+      },
     ],
     properties: {
       vis_url: {
@@ -107,10 +120,26 @@ export const Schema = (props) => {
         title: 'Description',
         widget: 'slate',
       },
+      show_note: {
+        title: 'Show note',
+        type: 'boolean',
+        defaultValue: true,
+      },
       show_sources: {
         title: 'Show sources',
         description: 'Will show sources set in this page Data provenance',
         type: 'boolean',
+        defaultValue: true,
+      },
+      show_more_info: {
+        title: 'Show more info',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      show_share: {
+        title: 'Show share button',
+        type: 'boolean',
+        defaultValue: true,
       },
       show_legend: {
         title: 'Show legend',

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -1,61 +1,49 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { expandToBackendURL } from '@plone/volto/helpers';
-
+import React, { useMemo } from 'react';
 import { PrivacyProtection } from '@eeacms/volto-embed';
-
 import Webmap from '@eeacms/volto-eea-map/components/Webmap';
 import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
 import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-import { getVisualization } from '@eeacms/volto-eea-map/actions';
+
+import { getMapVisualizationData } from './helpers';
 
 const View = (props) => {
-  const { data, data_provenance = {} } = props || {};
-  const { height = '' } = data;
+  const { data_query_params, enable_queries, height = '' } = props.data;
 
-  const [mapData, setMapData] = React.useState('');
+  const map_visualization_data = useMemo(() => getMapVisualizationData(props), [
+    props,
+  ]);
 
-  React.useEffect(() => {
-    if (props.data.vis_url) {
-      props.getVisualization(expandToBackendURL(props.data.vis_url));
-    }
-    if (!props.data.vis_url) {
-      setMapData('');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data.vis_url]);
+  const { data_provenance = {}, figure_note = [] } = map_visualization_data;
+  const [mapData, setMapData] = React.useState('');
 
   React.useEffect(() => {
     const updatedMapData = applyQueriesToMapLayers(
-      props.map_visualization,
-      props.data.data_query_params,
-      props.data.enable_queries,
+      map_visualization_data,
+      data_query_params,
+      enable_queries,
     );
-
     setMapData(updatedMapData);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    props.map_visualization,
-    props.data.data_query_params,
-    props.data.enable_queries,
-  ]);
+  }, [map_visualization_data, data_query_params, enable_queries]);
 
   return (
-    <PrivacyProtection data={data} {...props}>
-      {mapData && (
-        <div>
+    <PrivacyProtection
+      data={props.data}
+      className="embed-map-visualization"
+      {...props}
+    >
+      {!!mapData && (
+        <>
           <Webmap data={mapData} height={height} />
           <ExtraViews
             data={{
-              ...data,
+              ...props.data,
               data_provenance,
-              map_data: props.map_visualization,
+              figure_note,
+              map_data: map_visualization_data,
+              '@id': props['@id'],
             }}
           />
-        </div>
+        </>
       )}
       {!mapData && (
         <p>No map view to show. Set visualization in block configuration.</p>
@@ -64,20 +52,4 @@ const View = (props) => {
   );
 };
 
-export default compose(
-  connect(
-    (state, props) => ({
-      map_visualization: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data
-        : '',
-      data_provenance: props.data.vis_url
-        ? state.map_visualizations?.data[expandToBackendURL(props.data.vis_url)]
-            ?.data_provenance
-        : '',
-    }),
-    {
-      getVisualization,
-    },
-  ),
-)(View);
+export default View;

package/src/components/Blocks/EmbedEEAMap/helpers.js

@@ -1,8 +1,9 @@
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
 import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
 
 const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
   // If block data_query_params do not exist, init them
-  if (!data?.data_query_params) {
+  if (!data?.data_query_params && data_query) {
     onChangeBlock(block, {
       ...data,
       data_query_params: [...data_query],
@@ -27,4 +28,14 @@ const deepUpdateDataQueryParams = (block, data, data_query, onChangeBlock) => {
   }
 };
 
-export { deepUpdateDataQueryParams };
+function getMapVisualizationData(props) {
+  const content = props.mapContent || {};
+  const map_visualization_data =
+    content.map_visualization_data || props.data?.map_visualization_data || {};
+  return {
+    ...pickMetadata(content),
+    ...map_visualization_data,
+  };
+}
+
+export { deepUpdateDataQueryParams, getMapVisualizationData };

package/src/components/ExtraViews.jsx

@@ -1,27 +1,65 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+} from '@eeacms/volto-embed/Toolbar';
 import LegendView from '@eeacms/volto-eea-map/components/LegendView';
-import Sources from './Sources';
 
-const ExtraViews = ({ data }) => {
+import '@eeacms/volto-embed/Toolbar/styles.less';
+
+const ExtraViews = ({ data, screen }) => {
+  const toolbar = useRef();
+  const [mobile, setMobile] = useState(false);
   const {
-    map_data = {},
+    map_visualization_data = {},
     description,
     show_legend,
     show_viewer,
-    show_sources,
-    data_provenance = {},
+    show_note = true,
+    show_sources = true,
+    show_more_info = true,
+    show_share = true,
   } = data;
 
+  const { data_provenance = {}, figure_note = [] } = map_visualization_data;
+
+  useEffect(() => {
+    if (toolbar.current) {
+      const toolbarParentWidth = toolbar.current.parentElement.offsetWidth;
+
+      if (toolbarParentWidth < 600 && !mobile) {
+        setMobile(true);
+      } else if (toolbarParentWidth >= 600 && mobile) {
+        setMobile(false);
+      }
+    }
+  }, [screen, mobile]);
+
   return (
-    <div className="extra-eea-map-content">
-      {show_legend && map_data && (
-        <LegendView data={map_data} show_viewer={show_viewer} />
+    <>
+      {show_legend && map_visualization_data && (
+        <LegendView data={map_visualization_data} show_viewer={show_viewer} />
       )}
-      {show_sources && <Sources sources={data_provenance?.data} />}
+      <div className={cx('visualization-toolbar', { mobile })} ref={toolbar}>
+        <div className="left-col">
+          {show_note && <FigureNote note={figure_note || []} />}
+          {show_sources && <Sources sources={data_provenance?.data} />}
+          {show_more_info && <MoreInfo href={data['@id']} />}
+        </div>
+        <div className="right-col">
+          {show_share && <Share href={data['@id']} />}
+        </div>
+      </div>
       {description && serializeNodes(description)}
-    </div>
+    </>
   );
 };
 
-export default ExtraViews;
+export default connect((state) => ({
+  screen: state.screen,
+}))(ExtraViews);

package/src/components/FigureNote.jsx

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

package/src/components/LegendView.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Button, Grid } from 'semantic-ui-react';
+import cx from 'classnames';
 import { fetchArcGISData, setLegendColumns } from '../utils';
-import { Icon } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
-import rightKeySVG from '@plone/volto/icons/right-key.svg';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
 import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
 
 import codeSVG from '@eeacms/volto-eea-map/static/code-line.svg';
@@ -40,14 +38,7 @@ const LayerLegend = ({ data, show_viewer }) => {
           justifyContent: 'space-between',
         }}
       >
-        <h5
-          style={{
-            marginTop: '15px',
-            marginBottom: '5px',
-          }}
-        >
-          {name}
-        </h5>
+        <h5 style={{ marginBottom: '0.5rem' }}>{name}</h5>
         {show_viewer && map_service_url && (
           <a
             target="_blank"
@@ -112,41 +103,42 @@ const LegendView = (props) => {
 
   const legendColumns =
     map_layers && setLegendColumns(map_layers.length, device);
+
   return (
-    <>
-      <div className="legend-container">
-        <button className="legend-action" onClick={() => setExpand(!expand)}>
-          {/* <h3 role="presentation" className="legend-title"> */}
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Legend:
-          {/* </h3> */}
-        </button>
-        <Grid columns={legendColumns}>
-          {(!map_layers || map_layers.length === 0) && (
-            <p>
-              No layer found for legend. Please add a map layer from editor.
-            </p>
-          )}
-          {expand && (
-            <Grid.Row divided>
-              {map_layers &&
-                map_layers.length > 0 &&
-                map_layers.map((l, i) => (
-                  <LayerLegend
-                    key={i}
-                    data={l.map_layer}
-                    show_viewer={show_viewer}
-                  />
-                ))}
-            </Grid.Row>
-          )}
+    <div className={cx('legend-toolbar', { open: expand })}>
+      <button
+        className={cx('trigger-button', { open: expand })}
+        onClick={() => setExpand(!expand)}
+      >
+        Legend
+        <i
+          className={cx({
+            'ri-arrow-right-s-line': !expand,
+            'ri-arrow-down-s-line': expand,
+          })}
+        />
+      </button>
+      {expand && (
+        <Grid className="legend-container" columns={legendColumns}>
+          <Grid.Row divided>
+            {(!map_layers || map_layers.length === 0) && (
+              <Grid.Column>
+                <p>
+                  No layer found for legend. Please add a map layer from editor.
+                </p>
+              </Grid.Column>
+            )}
+            {map_layers?.map((l, i) => (
+              <LayerLegend
+                key={i}
+                data={l.map_layer}
+                show_viewer={show_viewer}
+              />
+            ))}
+          </Grid.Row>
         </Grid>
-      </div>
-    </>
+      )}
+    </div>
   );
 };
 

package/src/components/MoreInfoLink.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const MoreInfoLink = ({ contentTypeLink }) => {
+  return (
+    <Link href={contentTypeLink}>
+      <button className={cx('eea-map-more-info-button')}>
+        More info <i class="ri-external-link-line"></i>
+      </button>
+    </Link>
+  );
+};
+
+export default MoreInfoLink;

package/src/components/Share.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Popup, Input, Button } from 'semantic-ui-react';
+import { useCopyToClipboard } from '../utils.js';
+import cx from 'classnames';
+
+const Share = ({ contentTypeLink = '' }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const popupRef = React.useRef();
+
+  const CopyUrlButton = ({ className, url, buttonText }) => {
+    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
+
+    if (copyUrlStatus === 'copied') {
+      buttonText = 'Copied!';
+    } else if (copyUrlStatus === 'failed') {
+      buttonText = 'Copy failed. Please try again.';
+    }
+
+    return (
+      <Button
+        primary
+        onClick={copyUrl}
+        className={cx('copy-button', className)}
+      >
+        {buttonText}
+      </Button>
+    );
+  };
+
+  return (
+    <Popup
+      popper={{ id: 'eea-map-share-popup' }}
+      trigger={
+        <div className="eea-map-share-container">
+          <button className={cx('eea-map-share-button', { expanded })}>
+            <span>Share</span>
+            <i class="ri-share-fill"></i>
+          </button>
+        </div>
+      }
+      position="bottom left"
+      on="click"
+      onClose={() => {
+        setExpanded(false);
+      }}
+      onOpen={() => {
+        setExpanded(true);
+      }}
+      ref={popupRef}
+    >
+      <div>
+        <span className="eea-map-share-popup-text">Copy link</span>
+        <div className="eea-map-share-popup-container">
+          <Input
+            className="eea-map-share-link"
+            defaultValue={contentTypeLink}
+          />
+          <CopyUrlButton
+            className="eea-map-copy-button"
+            url={contentTypeLink}
+            buttonText="Copy"
+          />
+        </div>
+      </div>
+    </Popup>
+  );
+};
+
+export default Share;

package/src/components/Webmap.jsx

@@ -60,7 +60,7 @@ const Webmap = (props) => {
         css: true,
       }).then((modules) => {
         const [
-          Map,
+          MapBlock,
           MapView,
           FeatureLayer,
           MapImageLayer,
@@ -75,7 +75,7 @@ const Webmap = (props) => {
           Fullscreen,
         ] = modules;
         setModules({
-          Map,
+          MapBlock,
           MapView,
           FeatureLayer,
           MapImageLayer,
@@ -125,7 +125,7 @@ const Webmap = (props) => {
   const esri = React.useMemo(() => {
     if (Object.keys(modules).length === 0) return {};
     const {
-      Map,
+      MapBlock,
       MapView,
       FeatureLayer,
       MapImageLayer,
@@ -257,7 +257,7 @@ const Webmap = (props) => {
       return customBase;
     };
 
-    const map = new Map({
+    const map = new MapBlock({
       basemap:
         data?.base?.use_custom_base && data?.base?.custom_base_layer
           ? setCustomBasemap(data?.base?.custom_base_layer)
@@ -360,7 +360,7 @@ const Webmap = (props) => {
   `;
 
   return (
-    <div>
+    <div className="esri-map-wrapper">
       <style>{dynamicStyle}</style>
       <div ref={mapRef} className="esri-map"></div>
     </div>

package/src/components/visualization/VisualizationView.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Webmap from '../Webmap';
+import LegendView from '../LegendView';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
@@ -13,7 +14,10 @@ const VisualizationView = (props) => {
       {hasBlocksData(content) ? (
         <RenderBlocks {...props} />
       ) : (
-        <Webmap data={map_visualization_data} />
+        <>
+          <Webmap data={map_visualization_data} />
+          <LegendView data={map_visualization_data} show_viewer={true} />
+        </>
       )}
     </div>
   );

package/src/components/visualization/VisualizationViewWidget.jsx

@@ -1,6 +1,12 @@
 import Webmap from '../Webmap';
+import LegendView from '../LegendView';
 
 export default function VisualizationViewWidget(props) {
   const { value: map_visualization_data = {} } = props;
-  return <Webmap data={map_visualization_data} />;
+  return (
+    <>
+      <Webmap data={map_visualization_data} />
+      <LegendView data={map_visualization_data} show_viewer={true} />
+    </>
+  );
 }

package/src/index.js

@@ -12,9 +12,6 @@ import VisualizationView from './components/visualization/VisualizationView';
 
 import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
 
-import { data_visualizations } from './middlewares';
-import * as addonReducers from './reducers';
-
 import './less/global.less';
 
 export default (config) => {
@@ -67,15 +64,5 @@ export default (config) => {
   //map viewer for the visualization(content-type)
   config.views.contentTypesViews.map_visualization = VisualizationView;
 
-  config.settings.storeExtenders = [
-    ...(config.settings.storeExtenders || []),
-    data_visualizations,
-  ];
-
-  config.addonReducers = {
-    ...config.addonReducers,
-    ...addonReducers,
-  };
-
   return config;
 };

package/src/less/global.less

@@ -15,6 +15,10 @@
 
 @import './variables.less';
 
+.esri-map-wrapper {
+  margin-bottom: 1rem;
+}
+
 // TODO: pull out colors and dimensions into variables
 .map-edit-container {
   display: flex;
@@ -182,7 +186,6 @@
 .legend-container {
   display: flex;
   flex-direction: column;
-  margin: 15px 0;
 }
 
 .map_source_param_container {
@@ -198,23 +201,6 @@
   padding: 2px 15px !important;
 }
 
-.legend-action {
-  z-index: 22;
-  display: inline-flex;
-  align-items: center;
-  padding-bottom: 3px;
-  border: none;
-  background: transparent;
-  background-color: transparent;
-  color: #3d5265;
-  cursor: pointer;
-  font-weight: bold;
-
-  &:hover {
-    color: @secondaryColor;
-  }
-}
-
 .map-number-input {
   padding: 5px !important;
 }
@@ -225,43 +211,25 @@
   color: green;
 }
 
-/* sources */
-
-.eea-map-sources-list {
-  margin: 0;
-  list-style: decimal inside;
-  padding-inline-start: 0;
-}
-
-#eea-map-sources-popup .ui.popup {
-  min-width: 600px;
-  background-color: #f9f9f9;
-  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-}
+.eea-map-info {
+  display: flex;
+  flex-direction: row;
 
-.eea-map-sources-button {
-  display: inline-flex;
-  align-items: center;
-  padding-top: 10px;
-  padding-bottom: 3px;
-  border: none;
-  background-color: transparent;
-  color: @textColor;
-  cursor: pointer;
-  font-weight: bold;
+  > * {
+    padding: 0 0.5rem;
+    border-collapse: collapse;
+  }
 
-  .icon {
-    margin-left: 0.5rem;
+  > *:first-child {
+    padding-left: 0;
   }
 
-  &:hover {
-    color: @secondaryColor;
+  > *:last-child {
+    padding-right: 0;
   }
 
-  &.expanded {
-    padding-bottom: 0;
-    border-bottom: 3px solid @secondaryColor;
-    color: @secondaryColor;
+  > *:not(:last-child) {
+    border-right: 1px solid @textColor;
   }
 }
 
@@ -282,9 +250,4 @@
     max-width: 0.2cm;
     height: 0.2cm;
   }
-
-  .eea-map-sources-container,
-  #eea-map-sources-popup {
-    display: none;
-  }
 }

package/src/utils.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-throw-literal */
+import React from 'react';
 import { getBaseUrl } from '@plone/volto/helpers';
+
 const setLegendColumns = (legendsNo, device) => {
   switch (device) {
     case 'widescreen':
@@ -118,9 +120,32 @@ const updateBlockQueryFromPageQuery = (data_query, data_query_params) => {
   return newDataQuery;
 };
 
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = React.useState('inactive');
+  const copy = React.useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  React.useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
 export {
   setLegendColumns,
   fetchArcGISData,
   applyQueriesToMapLayers,
   updateBlockQueryFromPageQuery,
+  useCopyToClipboard,
 };

package/src/actionTypes.js

@@ -1 +0,0 @@
-export const GET_MAP_VISUALIZATION = 'GET_MAP_VISUALIZATION';

package/src/actions.js

@@ -1,12 +0,0 @@
-import { GET_MAP_VISUALIZATION } from './actionTypes';
-
-export function getVisualization(path) {
-  return {
-    type: GET_MAP_VISUALIZATION,
-    path,
-    request: {
-      op: 'get',
-      path: `${path}/@map-visualization`,
-    },
-  };
-}

package/src/middlewares/index.js

@@ -1,14 +0,0 @@
-import { GET_MAP_VISUALIZATION } from '../actionTypes';
-
-export const data_visualizations = (middlewares) => [
-  (store) => (next) => (action) => {
-    if (action.type === GET_MAP_VISUALIZATION) {
-      store.dispatch({
-        type: `${GET_MAP_VISUALIZATION}_PENDING`,
-        path: action.path,
-      });
-    }
-    return next(action);
-  },
-  ...middlewares,
-];

package/src/middlewares/map_visualizations.js

@@ -1 +0,0 @@
-export * from './map_visualizations';

package/src/reducers/index.js

@@ -1,3 +0,0 @@
-import map_visualizations from './map_visualizations';
-
-export { map_visualizations };

package/src/reducers/map_visualizations.js

@@ -1,48 +0,0 @@
-import { GET_MAP_VISUALIZATION } from '../actionTypes';
-
-const initialState = {
-  data: {},
-  error: null,
-  loaded: false,
-  loading: false,
-};
-
-export default function data_providers(state = initialState, action = {}) {
-  const path = action.path
-    ? action.path.replace(`/@map-visualization`, '')
-    : undefined;
-
-  switch (action.type) {
-    case `${GET_MAP_VISUALIZATION}_PENDING`:
-      return {
-        ...state,
-        error: null,
-        loaded: false,
-        loading: true,
-      };
-
-    case `${GET_MAP_VISUALIZATION}_SUCCESS`:
-      return {
-        ...state,
-        error: null,
-        data: {
-          ...state.data,
-          [path]: action.result.map_visualization,
-        },
-        loaded: true,
-        loading: false,
-      };
-
-    case `${GET_MAP_VISUALIZATION}_FAIL`:
-      return {
-        ...state,
-        error: action.error,
-        data: { ...state.data },
-        loaded: false,
-        loading: false,
-      };
-
-    default:
-      return state;
-  }
-}