Merge pull request #515 from geoadmin/bug-import-tool

BGDIINF_SB-3168: Fix external layer parsing error (no `layer.name`)

src/modules/infobox/components/ImportContent.vue

@@ -3,6 +3,7 @@
         data-infobox="height-reference"
         class="import-overlay-content"
         :class="{ 'with-layers': importedLayers?.length }"
+        data-cy="import-tool-content"
     >
         <div class="input-group d-flex">
             <input
@@ -21,6 +22,7 @@
             <button
                 class="list-switch"
                 :class="{ 'clear-btn-shown': importValue?.length > 0 }"
+                data-cy="import-list-switch-button"
                 @click="toggleProviders"
             >
                 <FontAwesomeIcon :icon="listShown ? 'caret-up' : 'caret-down'" />
@@ -30,13 +32,13 @@
                 id="button-addon1"
                 class="btn btn-outline-group rounded-end"
                 type="button"
-                data-cy="searchbar-clear"
+                data-cy="import-input-clear"
                 @click="clearImportQuery"
             >
                 <FontAwesomeIcon :icon="['fas', 'times-circle']" />
             </button>
             <div v-if="listShown" ref="providers" class="providers-list-container bg-light">
-                <div class="providers-list">
+                <div class="providers-list" data-cy="import-provider-list">
                     <div
                         v-for="(provider, key) in filteredList"
                         :key="provider"
@@ -65,6 +67,7 @@
                 type="button"
                 class="btn btn-outline-secondary connect-btn mt-1"
                 :disabled="isConnectDisabled"
+                data-cy="import-connect-button"
                 @click="onConnect"
             >
                 {{ buttonText }}
@@ -88,11 +91,15 @@ import {
     isWmtsGetCap,
 } from '@/modules/infobox/utils/external-provider'
 import { mapState } from 'vuex'
-import { getCapWMSLayers, getCapWMTSLayers } from '@/utils/file'
+import {
+    getCapWMSLayers,
+    getCapWMTSLayers,
+} from '@/modules/infobox/utils/external-provider-parsers'
 import { WMSCapabilities } from 'ol/format'
 import WMTSCapabilities from 'ol/format/WMTSCapabilities'
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import ImportContentResultList from './ImportContentResultList.vue'
+import log from '@/utils/logging'
 
 const BTN_RESET_TIMEOUT = 3000
 
@@ -202,7 +209,7 @@ export default {
                 .querySelector(`[tabindex="${this.filteredList.length - 1}"]`)
                 .focus()
         },
-        handleFileContent(fileContent, url) {
+        handleFileContent(fileContent, url, contentType) {
             this.wmsMaxSize = undefined
             if (isWmsGetCap(fileContent)) {
                 const parser = new WMSCapabilities()
@@ -228,19 +235,24 @@ export default {
             } else if (isGpx(fileContent)) {
                 // TODO GPX layer not done yet
             } else {
-                throw new Error('Wrong file content.')
+                throw new Error(
+                    `Unsupported url ${url} response content; Content-Type=${contentType}`
+                )
+            }
+            if (this.importedLayers.length === 0) {
+                throw new Error(`No valid layer found in ${url}`)
             }
         },
         async handleFileUrl() {
             const url = await transformUrl(this.importValue, this.lang)
             try {
                 const response = await fetch(url)
                 const fileContent = await response.text()
-                this.handleFileContent(fileContent, url)
+                this.handleFileContent(fileContent, url, response.headers.get('Content-Type'))
                 this.uploadBtnStatus = 'succeeded'
                 setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
             } catch (e) {
-                console.error(e)
+                log.error(e)
                 this.uploadBtnStatus = 'failed'
                 setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
             }

src/modules/infobox/components/ImportContentResultList.vue

@@ -20,7 +20,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="results-list overflow-y-auto">
+                <div class="results-list overflow-y-auto" data-cy="import-result-list">
                     <ImportContentResultItem
                         v-for="(layer, index) in sortedList"
                         :key="`${index}-${layer.externalLayerId}`"
@@ -49,6 +49,7 @@
                         type="button"
                         class="btn btn-outline-secondary add-btn mt-1 w-100"
                         :disabled="!selectedLayer"
+                        data-cy="import-add-layer-button"
                         @click="onAddLayer"
                     >
                         {{ $t('add_layer') }}
@@ -63,7 +64,6 @@
 import { mapActions } from 'vuex'
 import ImportContentResultItem from './ImportContentResultItem.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import MenuTopicTreeItem from '@/modules/menu/components/topics/MenuTopicTreeItem.vue'
 
 export default {
     components: { ImportContentResultItem, FontAwesomeIcon },

src/utils/file.js → src/modules/infobox/utils/external-provider-parsers.js

@@ -4,7 +4,7 @@ import { LayerAttribution } from '@/api/layers/AbstractLayer.class'
 import ExternalWMTSLayer from '@/api/layers/ExternalWMTSLayer.class'
 import proj4 from 'proj4'
 import allCoordinateSystems, { WGS84 } from '@/utils/coordinates/coordinateSystems'
-import log from './logging'
+import log from '@/utils/logging'
 
 /**
  * Creates WMS or Group layer config from parsed getCap content
@@ -19,7 +19,13 @@ import log from './logging'
  */
 export function getCapWMSLayers(getCap, layer, projection, visible = true, opacity = 1) {
     // If the WMS layer has no name, it can't be displayed
-    if (!layer.Name) {
+    let name = layer.Name
+    if (!name && layer.Title) {
+        // if we don't have a name use the title as name
+        name = layer.Title
+    }
+    if (!name) {
+        log.error(`No layer and/or title available`, layer)
         return undefined
     }
     const wmsUrl = getCap.Capability.Request.GetMap.DCPType[0].HTTP.Get.OnlineResource
@@ -42,7 +48,7 @@ export function getCapWMSLayers(getCap, layer, projection, visible = true, opaci
                 ]
             } else {
                 log.error(
-                    `No valid bounding box found in GetCapabilities for layer ${layer.title}`,
+                    `No valid bounding box found in GetCapabilities for layer ${name}`,
                     getCap,
                     layer
                 )
@@ -61,7 +67,7 @@ export function getCapWMSLayers(getCap, layer, projection, visible = true, opaci
         opacity,
         visible,
         wmsUrl,
-        layer.Name,
+        name,
         [new LayerAttribution(attribution.Title, attribution.OnlineResource)],
         getCap.version,
         'png',
@@ -90,6 +96,7 @@ export function getCapWMTSLayers(
     opacity = 1
 ) {
     if (!layer.Identifier) {
+        log.error(`No layer identifier available`, layer)
         return undefined
     }
     let layerExtent = undefined

src/modules/map/components/cesium/CesiumMap.vue

@@ -262,7 +262,6 @@ export default {
             'setCenter',
         ]),
         async createViewer() {
-            console.log('creating Cesium viewer')
             this.viewer = new Viewer(this.$refs.viewer, {
                 contextOptions: {
                     webgl: {

src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue

@@ -3,7 +3,9 @@
         <li class="advanced-tools-item">
             <a
                 class="advanced-tools-title"
+                :class="{ 'text-primary': importOverlay }"
                 :title="$t('import_tooltip')"
+                data-cy="menu-import-tool"
                 @click.stop="onToggleImportOverlay"
                 >{{ $t('import') }}</a
             >
@@ -12,12 +14,21 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapState, mapGetters } from 'vuex'
 
 export default {
+    computed: {
+        ...mapState({ importOverlay: (state) => state.ui.importOverlay }),
+        ...mapGetters(['isPhoneMode']),
+    },
     methods: {
-        ...mapActions(['toggleImportOverlay']),
+        ...mapActions(['toggleImportOverlay', 'toggleMenu']),
         onToggleImportOverlay() {
+            if (!this.importOverlay && this.isPhoneMode) {
+                // To avoid the menu overlapping the import overlay after open we automatically
+                // close the menu
+                this.toggleMenu()
+            }
             this.toggleImportOverlay()
         },
     },

src/modules/menu/components/menu/MenuTray.vue

@@ -29,6 +29,7 @@
         <MenuSection
             id="toolsSection"
             ref="toolsSection"
+            data-cy="menu-tray-tool-section"
             :title="$t('map_tools')"
             secondary
             @open-menu-section="onOpenMenuSection"
@@ -85,7 +86,7 @@ export default {
             /* Please note that if the following 2 arrays are updated, "grid-template-rows" in
             the css section must also be updated. */
             scrollableMenuSections: ['topicsSection', 'activeLayersSection'],
-            nonScrollableMenuSections: ['settingsSection', 'shareSection'],
+            nonScrollableMenuSections: ['settingsSection', 'shareSection', 'toolsSection'],
         }
     },
     computed: {