@eeacms/volto-eea-map 0.1.1 → 0.1.4

package/CHANGELOG.md

@@ -4,8 +4,45 @@ 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).
 
+#### [0.1.4](https://github.com/eea/volto-eea-map/compare/0.1.3...0.1.4)
+
+- Configure Privacy protection screenshot data [`49097c0`](https://github.com/eea/volto-eea-map/commit/49097c0b7aa8657e626d5a49dd0eed84f5e71e78)
+- Expandable Legend [`6edda2f`](https://github.com/eea/volto-eea-map/commit/6edda2fafd8a2a61f3f1f10c47a9ca5bb35a0355)
+- Catch for no data [`7cef4e6`](https://github.com/eea/volto-eea-map/commit/7cef4e641650ede23e37ca9116130db1ef0a18db)
+
+#### [0.1.3](https://github.com/eea/volto-eea-map/compare/0.1.2...0.1.3)
+
+> 2 August 2022
+
+- Center map on first layer [`#3`](https://github.com/eea/volto-eea-map/pull/3)
+- Icons & download/viewer change [`321f538`](https://github.com/eea/volto-eea-map/commit/321f538e9582f9a12db3f64beb26588616e867e2)
+- Inline inputs actions & styles [`1f4787e`](https://github.com/eea/volto-eea-map/commit/1f4787e3b3f0dc1328ff23cca2459db816188e3a)
+- more updates for cy10 [`4d5c6a1`](https://github.com/eea/volto-eea-map/commit/4d5c6a1925413b44acc70b5ad3753378830dba2d)
+- updates for cy10 [`30e0293`](https://github.com/eea/volto-eea-map/commit/30e0293ed79cad3cf3f62bcacd3c14a5627543bd)
+- upgrade to cypress 10 [`fe9ca3e`](https://github.com/eea/volto-eea-map/commit/fe9ca3e6a98dd02c6b774f931fe73f18712e0e7b)
+- padding & menu dimension [`da27ccd`](https://github.com/eea/volto-eea-map/commit/da27ccd2b0b42fb5c325a76bdde63e92216b1c93)
+- general tab settings move to block schema [`075baed`](https://github.com/eea/volto-eea-map/commit/075baed1629964b40d355c8612498e02a16eedfc)
+- enable conditional editor schema [`801f3c1`](https://github.com/eea/volto-eea-map/commit/801f3c1999b9b7373d1093d3835d62df8bd2fbca)
+- run cypress on latest alpha [`0935ace`](https://github.com/eea/volto-eea-map/commit/0935aceedb0963b770aa9579c2c21a4f543513c3)
+- Clear schema [`4b22f0a`](https://github.com/eea/volto-eea-map/commit/4b22f0aee58cca2bbcd2a8bee9864a01d65e7738)
+- Center on extent control [`9e8b13d`](https://github.com/eea/volto-eea-map/commit/9e8b13dfd5bbfa5eb2419c54444a15fefa384de4)
+- Clear consoles [`798bc2f`](https://github.com/eea/volto-eea-map/commit/798bc2fbf6f77ffadcedcf1e4666b315bc71ea6c)
+
+#### [0.1.2](https://github.com/eea/volto-eea-map/compare/0.1.1...0.1.2)
+
+> 29 July 2022
+
+- Develop [`#2`](https://github.com/eea/volto-eea-map/pull/2)
+- Legend only selected layer [`3474d79`](https://github.com/eea/volto-eea-map/commit/3474d7989321f656397c292bddc289f8f6329a8e)
+- Query layer by existing fields [`52363f5`](https://github.com/eea/volto-eea-map/commit/52363f57a9ab4e49c7418e883bdf0c5bb30c1734)
+- Cleanup [`d4e07b2`](https://github.com/eea/volto-eea-map/commit/d4e07b2fb89a5a27f5e4411047cb43e1c8add769)
+- Description is slate [`86c983e`](https://github.com/eea/volto-eea-map/commit/86c983e7a4841ed07826c9015b70dbe931e9081a)
+
 #### [0.1.1](https://github.com/eea/volto-eea-map/compare/0.1.0...0.1.1)
 
+> 26 July 2022
+
+- Repo structure update [`#1`](https://github.com/eea/volto-eea-map/pull/1)
 - Lint [`d31819d`](https://github.com/eea/volto-eea-map/commit/d31819d98338fbc013dfd4506466e7c20b04aad5)
 - Remove object pick widget [`40c7bcd`](https://github.com/eea/volto-eea-map/commit/40c7bcd2305bbab1c21919a0ae82af3eb628b09d)
 - Add group layer [`74fd1af`](https://github.com/eea/volto-eea-map/commit/74fd1af2bce6347ce4a80758947e05b7c4a6d516)

package/cypress.config.js

@@ -0,0 +1,36 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    // setupNodeEvents(on, config) {
+    //   return require('./cypress/plugins/index.js')(on, config);
+    // },
+    baseUrl: 'http://localhost:3000',
+  },
+
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,13 +16,20 @@
     "type": "git",
     "url": "git@github.com:eea/volto-eea-map.git"
   },
+  "addons": [
+    "@eeacms/volto-embed",
+    "volto-slate"
+  ],
   "dependencies": {
+    "@eeacms/volto-embed": "^2.0.1",
+    "@plone/scripts": "*",
     "esri-loader": "3.5.0",
-    "@plone/scripts": "*"
+    "volto-slate": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "10.3.1"
   },
   "scripts": {
     "release": "release-it",

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

@@ -5,6 +5,10 @@ import { Schema } from './Schema';
 import Webmap from './components/Webmap';
 import './styles/map.css';
 import ExtraViews from './components/widgets/ExtraViews';
+import {
+  PrivacyProtection,
+  addPrivacyProtectionToSchema,
+} from '@eeacms/volto-embed';
 
 const Edit = (props) => {
   const { block, data, onChangeBlock, selected } = props;
@@ -12,15 +16,18 @@ const Edit = (props) => {
 
   const { map_data = {}, height } = data;
   if (__SERVER__) return '';
+
   return (
-    <>
-      <Webmap data={map_data} height={height} />
-      <ExtraViews data={data} />
+    <div>
+      <PrivacyProtection data={data} {...props}>
+        <Webmap data={map_data} height={height} />
+        <ExtraViews data={data} />
+      </PrivacyProtection>
       <SidebarPortal selected={selected}>
         <BlockDataForm
           block={block}
           title={schema.title}
-          schema={schema}
+          schema={addPrivacyProtectionToSchema(schema)}
           onChangeField={(id, value) => {
             onChangeBlock(block, {
               ...data,
@@ -30,7 +37,7 @@ const Edit = (props) => {
           formData={data}
         />
       </SidebarPortal>
-    </>
+    </div>
   );
 };
 

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

@@ -5,7 +5,15 @@ export const Schema = () => {
       {
         id: 'default',
         title: 'Default',
-        fields: ['show_description', 'description', 'height', 'map_data'],
+        fields: [
+          'description',
+          'height',
+          'map_data',
+          'show_sources',
+          'show_legend',
+          'show_download',
+          'show_viewer',
+        ],
       },
     ],
     properties: {
@@ -13,19 +21,31 @@ export const Schema = () => {
         title: 'Height',
         type: 'number',
       },
-      show_description: {
-        title: 'Show description',
-        type: 'boolean',
-      },
       description: {
         title: 'Description',
-        type: 'text',
+        widget: 'slate',
       },
       map_data: {
         title: 'Edit map',
         description: 'Open the map customization interface',
         widget: 'map_edit_widget',
       },
+      show_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+      },
+      show_legend: {
+        title: 'Show legend',
+        type: 'boolean',
+      },
+      show_download: {
+        title: 'Show download',
+        type: 'boolean',
+      },
+      show_viewer: {
+        title: 'Show web viewer',
+        type: 'boolean',
+      },
     },
     required: [],
   };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Webmap from './components/Webmap';
 import ExtraViews from './components/widgets/ExtraViews';
+import { PrivacyProtection } from '@eeacms/volto-embed';
 
 const View = (props) => {
   const { data } = props || {};
@@ -10,10 +11,12 @@ const View = (props) => {
   if (__SERVER__) return '';
 
   return (
-    <>
-      <Webmap data={map_data} />
-      <ExtraViews data={data} />
-    </>
+    <div>
+      <PrivacyProtection data={data} {...props}>
+        <Webmap data={map_data} />
+        <ExtraViews data={data} />
+      </PrivacyProtection>
+    </div>
   );
 };
 

package/src/components/Blocks/EEAMap/components/Webmap.jsx

@@ -36,6 +36,7 @@ const Webmap = (props) => {
   const options = {
     css: true,
   };
+
   const mapRef = React.useRef();
   const [modules, setModules] = React.useState({});
   const modules_loaded = React.useRef(false);
@@ -88,12 +89,10 @@ const Webmap = (props) => {
       map_layers.length > 0 &&
       map_layers
         .filter(({ map_service_url, layer }) => map_service_url && layer)
-        .map(({ map_service_url, layer }) => {
+        .map(({ map_service_url, layer, query = '' }) => {
           const url = `${map_service_url}/${layer}`;
 
           let mapLayer;
-
-          //TODO: add more layers and error catch for unrecognized layer
           switch (layer.type) {
             case 'Raster Layer':
               mapLayer = new MapImageLayer({
@@ -101,7 +100,10 @@ const Webmap = (props) => {
               });
               break;
             case 'Feature Layer':
-              mapLayer = new FeatureLayer({ url });
+              mapLayer = new FeatureLayer({
+                url,
+                definitionExpression: query,
+              });
               break;
             case 'Group Layer':
               mapLayer = new GroupLayer({ url });
@@ -116,6 +118,7 @@ const Webmap = (props) => {
       basemap: base_layer || 'hybrid',
       layers,
     });
+
     const view = new MapView({
       container: mapRef.current,
       map,
@@ -126,6 +129,21 @@ const Webmap = (props) => {
       },
     });
 
+    if (layers && layers[0] && zoom && zoom.centerOnExtent) {
+      view.whenLayerView(layers[0]).then(function (layerView) {
+        layerView.watch('updating', function (val) {
+          //  view.goTo(response.extent);
+
+          if (!val && layerView) {
+            layerView.queryExtent().then(function (response) {
+              ///go to the extent of all the graphics in the layer view
+              if (response.extent) view.goTo(response.extent);
+            });
+          }
+        });
+      });
+    }
+
     if (zoom?.show_zoom) {
       const zoomPosition = zoom && zoom.position ? zoom.position : 'top-right';
       const zoomWidget = new Zoom({

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -2,35 +2,41 @@ import React from 'react';
 import { Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 
-import TextView from '../TextView';
 import LegendWidget from './LegendWidget';
+import { serializeNodes } from 'volto-slate/editor/render';
 
 import worldSVG from '@plone/volto/icons/world.svg';
 import downloadSVG from '@plone/volto/icons/download.svg';
 
 const ExtraViews = ({ data }) => {
-  const { map_data = {}, description, show_description } = data;
-  const { general = {} } = map_data;
+  const {
+    map_data = {},
+    description,
+    show_legend,
+    show_download,
+    show_viewer,
+  } = data;
+
   return (
     <>
-      {general.show_legend && <LegendWidget data={map_data} />}
-      {show_description && description && <TextView text={description} />}
-      {(general.show_download || general.show_viewer) && (
+      {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
         <div
           style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
         >
-          {general.show_download && (
+          {show_download && (
             <a
               target="_blank"
               rel="noreferrer"
               href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
             >
               <Button size="tiny">
-                <Icon name={downloadSVG} title="Download" size="25px" />
+                <Button.Content>
+                  <Icon name={downloadSVG} title="Download" size="25px" />
+                </Button.Content>
               </Button>
             </a>
           )}
-          {general.show_viewer && (
+          {show_viewer && (
             <a
               target="_blank"
               rel="noreferrer"
@@ -40,12 +46,16 @@ const ExtraViews = ({ data }) => {
               }
             >
               <Button size="tiny">
-                <Icon name={worldSVG} title="Check Url" size="25px" />
+                <Button.Content>
+                  <Icon name={worldSVG} title="View map" size="25px" />
+                </Button.Content>
               </Button>
             </a>
           )}
         </div>
       )}
+      {show_legend && <LegendWidget data={map_data} />}
+      {description && serializeNodes(description)}
     </>
   );
 };

package/src/components/Blocks/EEAMap/components/widgets/LayerSelectWidget.jsx

@@ -4,13 +4,21 @@ import { Input, Select, Button, Grid } from 'semantic-ui-react';
 
 import checkSVG from '@plone/volto/icons/check.svg';
 import closeSVG from '@plone/volto/icons/clear.svg';
+import aheadSVG from '@plone/volto/icons/ahead.svg';
 
 import { fetchArcgisData } from '../../utils';
 
 const LayerSelectWidget = (props) => {
   const { onChange, value = {}, id } = props;
 
-  const { available_layers, map_data, map_service_url, layer } = value;
+  const {
+    available_layers,
+    map_data,
+    map_service_url,
+    layer,
+    fields = [],
+    query = '',
+  } = value;
 
   const [mapData, setMapData] = React.useState(map_data);
   const [checkColor, setCheckColor] = React.useState('');
@@ -20,6 +28,7 @@ const LayerSelectWidget = (props) => {
   const [availableLayers, setAvailableLayers] = React.useState(
     available_layers,
   );
+  const [layerQuery, setLayerQuery] = React.useState(query);
 
   const handleServiceUrlCheck = async () => {
     // fetch url, save it, populate layers options
@@ -36,6 +45,7 @@ const LayerSelectWidget = (props) => {
         );
       }
       onChange(id, {
+        ...value,
         layer: selectedLayer,
         map_service_url: serviceUrl,
         available_layers: availableLayers,
@@ -47,13 +57,32 @@ const LayerSelectWidget = (props) => {
     }
   };
 
-  const handleSelectLayer = (layer) => {
+  const handleLayerFetch = async (service_url, id) => {
+    try {
+      let fullLayer = await fetchArcgisData(`${service_url}/${id}`);
+      return fullLayer;
+    } catch (e) {}
+  };
+
+  const handleSelectLayer = async (layer) => {
+    const fullLayer = await handleLayerFetch(serviceUrl, layer.id);
     setSelectedLayer(layer);
     onChange(id, {
+      ...value,
       layer,
+      fields: fullLayer.fields,
       map_service_url: serviceUrl,
       available_layers: availableLayers,
       map_data: mapData,
+      query: '',
+    });
+    setLayerQuery('');
+  };
+
+  const handleQueryLayer = () => {
+    onChange(id, {
+      ...value,
+      query: layerQuery,
     });
   };
 
@@ -69,30 +98,26 @@ const LayerSelectWidget = (props) => {
           <Input
             type="text"
             onChange={(e, { value }) => setServiceUrl(value)}
-            style={{ width: '100%' }}
+            style={{ width: '70%' }}
             value={serviceUrl}
-          />
-          <Grid.Row>
+            action
+            actionPosition="right"
+          >
+            <input />
             <Button
-              style={{
-                margin: '10px 0',
-                display: 'flex',
-                alignItems: 'center',
-              }}
+              type="submit"
+              size="tiny"
+              compact
               color={checkColor}
               onClick={handleServiceUrlCheck}
             >
-              <p style={{ fontSize: '14px', margin: '0', marginRight: '5px' }}>
-                Check Url
-              </p>
               <Icon
                 name={serviceUrlError ? closeSVG : checkSVG}
-                style={{ marginLeft: '5px' }}
                 title="Check Url"
                 size="17px"
               />
             </Button>
-          </Grid.Row>
+          </Input>
         </Grid.Row>
         <h4>Layer</h4>
         <Grid.Row>
@@ -104,7 +129,38 @@ const LayerSelectWidget = (props) => {
             value={selectedLayer}
           />
         </Grid.Row>
-        <Grid.Row stretched></Grid.Row>
+        <h4>Query Layer</h4>
+        <Grid.Row stretched>
+          <Input
+            type="text"
+            onChange={(e, { value }) => setLayerQuery(value)}
+            style={{ width: '70%' }}
+            value={layerQuery}
+            action
+            actionPosition="right"
+          >
+            <input />
+            <Button
+              type="submit"
+              size="tiny"
+              compact
+              color={'green'}
+              onClick={handleQueryLayer}
+            >
+              <Icon name={aheadSVG} title="Check Url" size="17px" />
+            </Button>
+          </Input>
+        </Grid.Row>
+        <Grid.Row>
+          <p style={{ fontSize: '12px', fontWeight: 'bold' }}>
+            Available Fields:
+          </p>
+        </Grid.Row>
+        {fields &&
+          fields.length > 0 &&
+          fields.map((field, id) => (
+            <p style={{ fontSize: '12px' }}>{field.alias}</p>
+          ))}
       </Grid>
     </div>
   );

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -1,19 +1,50 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { fetchArcgisData } from '../../utils';
+import { Icon } from '@plone/volto/components';
+
+import rightKeySVG from '@plone/volto/icons/right-key.svg';
+import downKeySVG from '@plone/volto/icons/down-key.svg';
+
+const LayerLegend = ({ data, name }) => {
+  const [expand, setExpand] = React.useState(true);
 
-const LayerLegend = ({ data }) => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      {data.length > 0 &&
-        data.map((item, i) => {
-          return (
-            <span style={{ display: 'flex', alignItems: 'center' }}>
-              <img alt="alt" src={`data:image/png;base64,${item.imageData}`} />
-              <span style={{ fontSize: '13px' }}>{item.label}</span>
-            </span>
-          );
-        })}
+      <h5
+        role="presentation"
+        onClick={() => setExpand(!expand)}
+        style={{
+          marginTop: '10px',
+          marginBottom: '5px',
+          cursor: 'pointer',
+          display: 'flex',
+        }}
+      >
+        <Icon
+          name={expand ? downKeySVG : rightKeySVG}
+          title={expand ? 'Collapse' : 'Expand'}
+          size="17px"
+        />
+        {name}
+      </h5>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {expand &&
+          data.length > 0 &&
+          data.map((item, i) => {
+            return (
+              <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
+                <img
+                  alt="alt"
+                  src={`data:image/png;base64,${item.imageData}`}
+                />
+                <span style={{ fontSize: '13px', marginLeft: '5px' }}>
+                  {item.label}
+                </span>
+              </span>
+            );
+          })}
+      </div>
     </div>
   );
 };
@@ -27,15 +58,21 @@ const LegendWidget = (props) => {
   const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
   const fetchLegend = async (url) => {
     let legendData = await fetchArcgisData(url);
-    const { layers = [] } = legendData;
 
-    setLegendLayers(layers);
+    //TODO: configure this for multiple layers
+    const { layers = [] } = legendData;
+    const selectedLayerLedend = layers.filter(
+      (l, i) => l.layerId === activeLayer.layer.id,
+    );
+    setLegendLayers(selectedLayerLedend);
   };
 
   React.useEffect(() => {
-    fetchLegend(activeLayer.map_service_url + '/legend');
+    if (activeLayer) {
+      fetchLegend(`${activeLayer.map_service_url}/legend`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, activeLayer.map_service_url]);
-
   return (
     <>
       <div style={{ margin: '10px 0' }}>
@@ -43,13 +80,19 @@ const LegendWidget = (props) => {
           <Grid.Row>
             <Grid.Column>
               <h3>Legend:</h3>
+              {!activeLayer && (
+                <p>
+                  No layer found for legend. Please add a map layer from editor.
+                </p>
+              )}
               {legendLayers.length > 0 &&
-                legendLayers.map((layer, index) => {
+                legendLayers.map((layer, i) => {
                   return (
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
-                      <h5>{layer?.layerName}</h5>
-                      <LayerLegend data={layer.legend} />
-                    </div>
+                    <LayerLegend
+                      key={i}
+                      name={layer?.layerName}
+                      data={layer?.legend}
+                    />
                   );
                 })}
             </Grid.Column>

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -3,7 +3,7 @@ import { Modal, Button, Grid } from 'semantic-ui-react';
 import Webmap from '../Webmap';
 import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
 
-import { panelsSchema } from './panelsSchema';
+import PanelsSchema from './panelsSchema';
 
 const MapEditorWidget = (props) => {
   const [open, setOpen] = React.useState(false);
@@ -11,9 +11,16 @@ const MapEditorWidget = (props) => {
   const [intValue, setIntValue] = React.useState(value);
 
   const dataForm = { map_data: intValue };
-
   const handleApplyChanges = () => {
     onChange(id, intValue);
+
+    //set map data for screenshot
+    if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
+      onChange(
+        'url',
+        `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
+      );
+    }
     setOpen(false);
   };
 
@@ -26,6 +33,8 @@ const MapEditorWidget = (props) => {
     setIntValue(fieldVal);
   };
 
+  let schema = PanelsSchema({ data: dataForm });
+
   return (
     <FormFieldWrapper {...props}>
       <Modal
@@ -46,8 +55,8 @@ const MapEditorWidget = (props) => {
               <Grid.Column width={4}>
                 <InlineForm
                   block={block}
-                  title={panelsSchema.title}
-                  schema={panelsSchema}
+                  title={schema.title}
+                  schema={schema}
                   onChangeField={(id, value) => {
                     handleChangeField(id, value);
                   }}

package/src/components/Blocks/EEAMap/components/widgets/ObjectTypesWidget.jsx

@@ -24,7 +24,7 @@ export const ObjectTypesWidget = (props) => {
       ),
       render: () => {
         return (
-          <Tab.Pane>
+          <Tab.Pane style={{ padding: '0' }}>
             <ObjectWidget
               schema={schema}
               id={id}
@@ -45,7 +45,7 @@ export const ObjectTypesWidget = (props) => {
       menu={{ fluid: true, vertical: true, tabular: true }}
       panes={schemas.map(createTab)}
       activeIndex={activeTab}
-      grid={{ paneWidth: 8, tabWidth: 4 }}
+      grid={{ paneWidth: 9, tabWidth: 3 }}
     />
   );
 };

package/src/components/Blocks/EEAMap/components/widgets/panelsSchema.js

@@ -55,6 +55,7 @@ const MapLayersSchema = {
   },
   required: [],
 };
+
 const PrintSchema = {
   title: 'Print',
   fieldsets: [
@@ -81,110 +82,94 @@ const PrintSchema = {
   required: [],
 };
 
-const ZoomSchema = {
-  title: 'Zoom',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Zoom',
-      fields: ['show_zoom', 'position', 'zoom_level', 'long', 'lat'],
-    },
-  ],
-  properties: {
-    show_zoom: {
-      title: 'Show zoom',
-      type: 'boolean',
-    },
-    position: {
-      title: 'Zoom position',
-      choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-        (n) => {
-          return [n, n];
-        },
-      ),
-    },
-    zoom_level: {
-      title: 'Zoom level',
-      type: 'number',
-    },
-    long: {
-      title: 'Longitude',
-      type: 'number',
-    },
-    lat: {
-      title: 'Latitude',
-      type: 'number',
-    },
-  },
-  required: [],
-};
+const ZoomSchema = ({ data = {} }) => {
+  const centerOnExtent = data?.map_data?.zoom?.centerOnExtent;
 
-const GeneralSchema = {
-  title: 'General',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'General',
-      fields: ['show_sources', 'show_legend', 'show_download', 'show_viewer'],
-    },
-  ],
-  properties: {
-    show_sources: {
-      title: 'Show sources',
-      type: 'boolean',
-    },
-    show_legend: {
-      title: 'Show legend',
-      type: 'boolean',
-    },
-    show_download: {
-      title: 'Show download',
-      type: 'boolean',
-    },
-    show_viewer: {
-      title: 'Show web viewer',
-      type: 'boolean',
-    },
-  },
-  required: [],
+  return {
+    title: 'Zoom',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Zoom',
+        fields: [
+          'show_zoom',
+          'centerOnExtent',
+          'position',
+          ...(!centerOnExtent ? ['zoom_level', 'long', 'lat'] : []),
+        ],
+      },
+    ],
+    properties: {
+      show_zoom: {
+        title: 'Show zoom',
+        type: 'boolean',
+      },
+      centerOnExtent: {
+        title: 'Center on extent',
+        type: 'boolean',
+        description: 'This will override latitude/longitude/zoom level',
+      },
+      position: {
+        title: 'Zoom position',
+        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
+          (n) => {
+            return [n, n];
+          },
+        ),
+      },
+      zoom_level: {
+        title: 'Zoom level',
+        type: 'number',
+      },
+      long: {
+        title: 'Longitude',
+        type: 'number',
+      },
+      lat: {
+        title: 'Latitude',
+        type: 'number',
+      },
+    },
+    required: [],
+  };
 };
 
-export const panelsSchema = {
-  title: 'Map Editor',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Map Editor Sections',
-      fields: ['map_data'],
-    },
-  ],
-  properties: {
-    map_data: {
-      title: 'Panels',
-      widget: 'object_types_widget',
-      schemas: [
-        {
-          id: 'general',
-          schema: GeneralSchema,
-        },
-        {
-          id: 'base',
-          schema: BaseLayerSchema,
-        },
-        {
-          id: 'layers',
-          schema: MapLayersSchema,
-        },
-        {
-          id: 'print',
-          schema: PrintSchema,
-        },
-        {
-          id: 'zoom',
-          schema: ZoomSchema,
-        },
-      ],
-    },
-  },
-  required: [],
+export default ({ data = {} }) => {
+  const zoomSchema = ZoomSchema({ data });
+
+  return {
+    title: 'Map Editor',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Map Editor Sections',
+        fields: ['map_data'],
+      },
+    ],
+    properties: {
+      map_data: {
+        title: 'Panels',
+        widget: 'object_types_widget',
+        schemas: [
+          {
+            id: 'base',
+            schema: BaseLayerSchema,
+          },
+          {
+            id: 'layers',
+            schema: MapLayersSchema,
+          },
+          {
+            id: 'print',
+            schema: PrintSchema,
+          },
+          {
+            id: 'zoom',
+            schema: zoomSchema,
+          },
+        ],
+      },
+    },
+    required: [],
+  };
 };

package/cypress.json

@@ -1,17 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "viewportWidth": 1280,
-  "defaultCommandTimeout": 8888,
-  "chromeWebSecurity": false,
-  "reporter": "junit",
-  "video": true,
-  "retries": {
-    "runMode": 8,
-    "openMode": 0
-  },
-  "reporterOptions": {
-    "mochaFile": "cypress/reports/cypress-[hash].xml",
-    "jenkinsMode": true,
-    "toConsole": true
-  }
-}

package/src/components/Blocks/EEAMap/components/TextView.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const TextView = ({ text }) => {
-  return <p className="map-text-view">{text}</p>;
-};
-
-export default TextView;