@eeacms/volto-arcgis-block 0.1.39 → 0.1.42

package/CHANGELOG.md

@@ -4,8 +4,53 @@ 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.42](https://github.com/eea/volto-arcgis-block/compare/0.1.41...0.1.42)
+
+- Ux improvements [`#131`](https://github.com/eea/volto-arcgis-block/pull/131)
+- ESLint fix [`886f2e9`](https://github.com/eea/volto-arcgis-block/commit/886f2e9596e0e542cd4aeb1bd41c292d9f1aa01e)
+- ESLint fix [`d833192`](https://github.com/eea/volto-arcgis-block/commit/d8331920e3f6e54a6e8a690586a9046304f4c28b)
+- Layer opacity [`3397c91`](https://github.com/eea/volto-arcgis-block/commit/3397c91d34904d16745ad2906a4aa39d8ab4cd97)
+
+#### [0.1.41](https://github.com/eea/volto-arcgis-block/compare/0.1.40...0.1.41)
+
+> 11 May 2022
+
+- Develop [`#130`](https://github.com/eea/volto-arcgis-block/pull/130)
+- Ux improvements [`#129`](https://github.com/eea/volto-arcgis-block/pull/129)
+- Use cases [`#128`](https://github.com/eea/volto-arcgis-block/pull/128)
+- ESLint fix [`f0b6fa1`](https://github.com/eea/volto-arcgis-block/commit/f0b6fa10a5077af8ff22adec5ea1480a0d18a569)
+- Measurement and opacity [`49483b1`](https://github.com/eea/volto-arcgis-block/commit/49483b12f777e7b0887abeb57f94a607fe6aeeb2)
+- ESLint fix [`779dfd8`](https://github.com/eea/volto-arcgis-block/commit/779dfd89eea1ca7ada41cc9bfc9f9a106d30f6cc)
+- Legend and link [`56019f0`](https://github.com/eea/volto-arcgis-block/commit/56019f095f2d2d2420c492e8b93e335261325933)
+
+#### [0.1.40](https://github.com/eea/volto-arcgis-block/compare/0.1.39...0.1.40)
+
+> 29 April 2022
+
+- Develop [`#127`](https://github.com/eea/volto-arcgis-block/pull/127)
+- Timeslider icon [`#126`](https://github.com/eea/volto-arcgis-block/pull/126)
+- Hide opacity icon [`#125`](https://github.com/eea/volto-arcgis-block/pull/125)
+- Use cases scroll [`#124`](https://github.com/eea/volto-arcgis-block/pull/124)
+- Legend url [`#123`](https://github.com/eea/volto-arcgis-block/pull/123)
+- Ux improvements [`#122`](https://github.com/eea/volto-arcgis-block/pull/122)
+- Use cases [`#121`](https://github.com/eea/volto-arcgis-block/pull/121)
+- ESLint fix [`5ba8a0d`](https://github.com/eea/volto-arcgis-block/commit/5ba8a0d17da0eee1de15b54c687500a725c50f56)
+- ESLint fix [`04cb275`](https://github.com/eea/volto-arcgis-block/commit/04cb275d6701a382e6c6c6166f524c404d435f36)
+- Zoom tooltip [`57369bd`](https://github.com/eea/volto-arcgis-block/commit/57369bd2a56064194991001b6646b99c4213711c)
+- ESLint fix [`33a56de`](https://github.com/eea/volto-arcgis-block/commit/33a56de6deda3b755fcbb6738801eb9fad1004c3)
+- Back button change [`480dce0`](https://github.com/eea/volto-arcgis-block/commit/480dce04285f49207070d05bed7c882eccac0e33)
+- ESLint fix [`0477826`](https://github.com/eea/volto-arcgis-block/commit/04778262550a8077a711e04c1c1ebe22ae1d6254)
+- UX improvements [`151dc4b`](https://github.com/eea/volto-arcgis-block/commit/151dc4b02d0a73fdd66de9d594620ac0fa5f1dbf)
+- deleted failing tests [`ddaa9e6`](https://github.com/eea/volto-arcgis-block/commit/ddaa9e6f06db6960a4c214d3be2420c48b26715d)
+- cleaning unnecessary files [`2c02199`](https://github.com/eea/volto-arcgis-block/commit/2c021990912beb02b603a1de89aecd62e0063769)
+- commands added [`049e60b`](https://github.com/eea/volto-arcgis-block/commit/049e60b7d124d1c05abd0b2775b510795f4ed59f)
+- Mapviewer testing implementation [`0103002`](https://github.com/eea/volto-arcgis-block/commit/0103002869eea108e16e3b5ff2e77a725dcc7c4b)
+
 #### [0.1.39](https://github.com/eea/volto-arcgis-block/compare/0.1.38...0.1.39)
 
+> 24 March 2022
+
+- Develop [`#119`](https://github.com/eea/volto-arcgis-block/pull/119)
 - Parser time [`#116`](https://github.com/eea/volto-arcgis-block/pull/116)
 - Info widget bug fix [`#118`](https://github.com/eea/volto-arcgis-block/pull/118)
 - Use cases [`#117`](https://github.com/eea/volto-arcgis-block/pull/117)

package/Jenkinsfile

@@ -184,10 +184,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/cypress/support/commands.js

@@ -313,3 +313,10 @@ Cypress.Commands.add('store', () => {
 Cypress.Commands.add('settings', (key, value) => {
   return cy.window().its('settings');
 });
+Cypress.Commands.add('openClmsPortal',() =>{
+  //login
+  cy.visit('/login')
+  //By ID
+  cy.get('#login').type('admin')
+  cy.get('#password').type('admin{enter}')    
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.39",
+  "version": "0.1.42",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/AreaWidget.jsx

@@ -77,11 +77,14 @@ class AreaWidget extends React.Component {
   openMenu() {
     if (this.state.showMapMenu) {
       this.props.mapViewer.setActiveWidget();
-      this.container.current.querySelector('.area-panel').style.display =
+      this.container.current.querySelector('.right-panel').style.display =
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-close', 'esri-icon-cursor-marquee');
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -91,11 +94,14 @@ class AreaWidget extends React.Component {
       ).checked = true;
     } else {
       this.props.mapViewer.setActiveWidget(this);
-      this.container.current.querySelector('.area-panel').style.display =
-        'block';
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-cursor-marquee', 'esri-icon-close');
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
@@ -253,139 +259,147 @@ class AreaWidget extends React.Component {
       <>
         <div ref={this.container} className="area-container">
           {!this.props.download && (
-            <div
-              className={this.menuClass}
-              id="map_area_button"
-              title="Area"
-              onClick={this.openMenu.bind(this)}
-              onKeyDown={this.openMenu.bind(this)}
-              tabIndex="0"
-              role="button"
-            ></div>
+            <div tooltip="Area selection" direction="left" type="widget">
+              <div
+                className={this.menuClass}
+                id="map_area_button"
+                title="Area"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={this.openMenu.bind(this)}
+                tabIndex="0"
+                role="button"
+              ></div>
+            </div>
           )}
-          <div className="area-panel">
-            <div className="ccl-form">
-              <fieldset className="ccl-fieldset">
-                <div className="map-download-header">
-                  <legend className="ccl-form-legend">
-                    <span className="map-download-header-title">
-                      Select area
-                    </span>
-                    <span className="info-icon" tooltip="Info" direction="up">
-                      <i className="fas fa-info-circle"></i>
-                    </span>
-                  </legend>
-                </div>
-                <div className="ccl-form-group">
-                  <input
-                    type="radio"
-                    id="download_area_select_nuts0"
-                    name="downloadAreaSelect"
-                    value="nuts0"
-                    className="ccl-checkbox cl-required ccl-form-check-input"
-                    defaultChecked
-                    onClick={this.nuts0handler.bind(this)}
-                  ></input>
-                  <label
-                    className="ccl-form-radio-label"
-                    htmlFor="download_area_select_nuts0"
-                  >
-                    <span>NUTS 0</span>
-                  </label>
-                </div>
-                <div className="ccl-form-group">
-                  <input
-                    type="radio"
-                    id="download_area_select_nuts1"
-                    name="downloadAreaSelect"
-                    value="nuts1"
-                    className="ccl-checkbox ccl-required ccl-form-check-input"
-                    onClick={this.nuts1handler.bind(this)}
-                  ></input>
-                  <label
-                    className="ccl-form-radio-label"
-                    htmlFor="download_area_select_nuts1"
-                  >
-                    <span>NUTS 1</span>
-                  </label>
-                </div>
-                <div className="ccl-form-group">
-                  <input
-                    type="radio"
-                    id="download_area_select_nuts2"
-                    name="downloadAreaSelect"
-                    value="nuts2"
-                    className="ccl-checkbox ccl-required ccl-form-check-input"
-                    onClick={this.nuts2handler.bind(this)}
-                  ></input>
-                  <label
-                    className="ccl-form-radio-label"
-                    htmlFor="download_area_select_nuts2"
-                  >
-                    <span>NUTS 2</span>
-                  </label>
-                </div>
-                <div className="ccl-form-group">
-                  <input
-                    type="radio"
-                    id="download_area_select_nuts3"
-                    name="downloadAreaSelect"
-                    value="nuts3"
-                    className="ccl-radio ccl-required ccl-form-check-input"
-                    onClick={this.nuts3handler.bind(this)}
-                  ></input>
-                  <label
-                    className="ccl-form-radio-label"
-                    htmlFor="download_area_select_nuts3"
-                  >
-                    <span>NUTS 3</span>
-                  </label>
-                </div>
-                <div className="ccl-form-group">
-                  <input
-                    type="radio"
-                    id="download_area_select_rectangle"
-                    name="downloadAreaSelect"
-                    value="area"
-                    className="ccl-radio ccl-required ccl-form-check-input"
-                    onClick={this.rectanglehandler.bind(this)}
-                  ></input>
-                  <label
-                    className="ccl-form-radio-label"
-                    htmlFor="download_area_select_rectangle"
-                  >
-                    <span>By rectangle</span>
-                    <div>
-                      (Mantain the left button of the mouse clicked and draw a
-                      rectangle in the map)
+          <div className={this.props.download ? '' : 'right-panel'}>
+            {!this.props.download && (
+              <div className="right-panel-header">
+                <span>Area selection</span>
+                <span
+                  className="map-menu-icon esri-icon-close"
+                  onClick={this.openMenu.bind(this)}
+                  onKeyDown={this.openMenu.bind(this)}
+                  tabIndex="0"
+                  role="button"
+                ></span>
+              </div>
+            )}
+            <div className="right-panel-content">
+              <div className="area-panel">
+                <div className="ccl-form">
+                  <fieldset className="ccl-fieldset">
+                    <div className="ccl-form-group">
+                      <input
+                        type="radio"
+                        id="download_area_select_nuts0"
+                        name="downloadAreaSelect"
+                        value="nuts0"
+                        className="ccl-checkbox cl-required ccl-form-check-input"
+                        defaultChecked
+                        onClick={this.nuts0handler.bind(this)}
+                      ></input>
+                      <label
+                        className="ccl-form-radio-label"
+                        htmlFor="download_area_select_nuts0"
+                      >
+                        <span>NUTS 0</span>
+                      </label>
                     </div>
-                  </label>
-                </div>
-                <div>
-                  {/* <div class="map-download-resource">
-                    <div class="ccl-form">
-                      <div class="map-download-header">
-                        <label for="download_area_select" class="map-download-header-title">Download resource as</label>
-                        <span class="info-icon" tooltip="Info" direction="up">
-                          <FontAwesomeIcon
-                            className="map-menu-icon"
-                            icon={['fas', 'info-circle']}
-                          />
-                        </span>
-                      </div>
-                      <div class="ccl-select-container">
-                        <div class="ccl-select-container">
-                          <select class="ccl-select" id="download_area_select" name="" >
-                            <option value="option1">GeoTiff</option>
-                            <option value="option2">ESRI Geodatabase</option>
-                            <option value="option3">SQLite Database</option>
-                          </select>
+                    <div className="ccl-form-group">
+                      <input
+                        type="radio"
+                        id="download_area_select_nuts1"
+                        name="downloadAreaSelect"
+                        value="nuts1"
+                        className="ccl-checkbox ccl-required ccl-form-check-input"
+                        onClick={this.nuts1handler.bind(this)}
+                      ></input>
+                      <label
+                        className="ccl-form-radio-label"
+                        htmlFor="download_area_select_nuts1"
+                      >
+                        <span>NUTS 1</span>
+                      </label>
+                    </div>
+                    <div className="ccl-form-group">
+                      <input
+                        type="radio"
+                        id="download_area_select_nuts2"
+                        name="downloadAreaSelect"
+                        value="nuts2"
+                        className="ccl-checkbox ccl-required ccl-form-check-input"
+                        onClick={this.nuts2handler.bind(this)}
+                      ></input>
+                      <label
+                        className="ccl-form-radio-label"
+                        htmlFor="download_area_select_nuts2"
+                      >
+                        <span>NUTS 2</span>
+                      </label>
+                    </div>
+                    <div className="ccl-form-group">
+                      <input
+                        type="radio"
+                        id="download_area_select_nuts3"
+                        name="downloadAreaSelect"
+                        value="nuts3"
+                        className="ccl-radio ccl-required ccl-form-check-input"
+                        onClick={this.nuts3handler.bind(this)}
+                      ></input>
+                      <label
+                        className="ccl-form-radio-label"
+                        htmlFor="download_area_select_nuts3"
+                      >
+                        <span>NUTS 3</span>
+                      </label>
+                    </div>
+                    <div className="ccl-form-group">
+                      <input
+                        type="radio"
+                        id="download_area_select_rectangle"
+                        name="downloadAreaSelect"
+                        value="area"
+                        className="ccl-radio ccl-required ccl-form-check-input"
+                        onClick={this.rectanglehandler.bind(this)}
+                      ></input>
+                      <label
+                        className="ccl-form-radio-label"
+                        htmlFor="download_area_select_rectangle"
+                      >
+                        <span>By rectangle</span>
+                        <div>
+                          (Mantain the left button of the mouse clicked and draw
+                          a rectangle in the map)
+                        </div>
+                      </label>
+                    </div>
+                    <div>
+                      {/* <div class="map-download-resource">
+                        <div class="ccl-form">
+                          <div class="map-download-header">
+                            <label for="download_area_select" class="map-download-header-title">Download resource as</label>
+                            <span class="info-icon" tooltip="Info" direction="up">
+                              <FontAwesomeIcon
+                                className="map-menu-icon"
+                                icon={['fas', 'info-circle']}
+                              />
+                            </span>
+                          </div>
+                          <div class="ccl-select-container">
+                            <div class="ccl-select-container">
+                              <select class="ccl-select" id="download_area_select" name="" >
+                                <option value="option1">GeoTiff</option>
+                                <option value="option2">ESRI Geodatabase</option>
+                                <option value="option3">SQLite Database</option>
+                              </select>
+                            </div>
+                          </div>
                         </div>
-                      </div>
+                      </div> */}
                     </div>
-                  </div> */}
+                  </fieldset>
                 </div>
-              </fieldset>
+              </div>
             </div>
           </div>
         </div>

package/src/components/MapViewer/BasemapWidget.jsx

@@ -62,20 +62,28 @@ class BasemapWidget extends React.Component {
 
     if (this.state.showMapMenu) {
       this.props.mapViewer.setActiveWidget();
-      this.basemapGallery.domNode.style.display = 'none';
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-close', 'esri-icon-basemap');
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
       this.props.mapViewer.setActiveWidget(this);
       this.basemapGallery.domNode.classList.add('basemap-gallery-container');
-      this.basemapGallery.domNode.style.display = 'block';
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-basemap', 'esri-icon-close');
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
@@ -101,17 +109,33 @@ class BasemapWidget extends React.Component {
     return (
       <>
         <div ref={this.container} className="basemap-container">
-          <div
-            // ref={this.basemaps}
-            className={this.menuClass}
-            id="map_basemap_button"
-            role="button"
-            title="Basemap gallery"
-            onClick={this.openMenu.bind(this)}
-            onKeyDown={() => this.openMenu.bind(this)}
-            tabIndex={0}
-          ></div>
-          <div className="basemap-panel"></div>
+          <div tooltip="Basemap gallery" direction="left" type="widget">
+            <div
+              // ref={this.basemaps}
+              className={this.menuClass}
+              id="map_basemap_button"
+              title="Basemap gallery"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={this.openMenu.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Basemap gallery</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={this.openMenu.bind(this)}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="basemap-panel"></div>
+            </div>
+          </div>
         </div>
       </>
     );