From 251c0abad4d09df39329be4c444acb341588e9c6 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Sat, 9 Dec 2023 14:15:54 +0100
Subject: [PATCH 01/17] BGDIINF_SB-3194: sort the external layers by its
 display name

This ease the navigation in the external layer import
---
 src/api/layers/WMSCapabilitiesParser.class.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/api/layers/WMSCapabilitiesParser.class.js b/src/api/layers/WMSCapabilitiesParser.class.js
index 776ad3463..f1dc0be06 100644
--- a/src/api/layers/WMSCapabilitiesParser.class.js
+++ b/src/api/layers/WMSCapabilitiesParser.class.js
@@ -103,7 +103,16 @@ export default class WMSCapabilitiesParser {
                 visible,
                 ignoreError
             )
-        ).filter((layer) => !!layer)
+        )
+            .filter((layer) => !!layer)
+            .sort((layerA, layerB) => {
+                if (layerA.name.toLowerCase() > layerB.name.toLowerCase()) {
+                    return 1
+                } else if (layerA.name.toLowerCase() < layerB.name.toLowerCase()) {
+                    return -1
+                }
+                return 0
+            })
     }
 
     _getExternalLayerObject(layer, parents, projection, opacity, visible, ignoreError) {

From 5521d8de42bf20ce6f4aeb0fa597474093c4fe1a Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Sat, 9 Dec 2023 14:25:31 +0100
Subject: [PATCH 02/17] BGDIINF_SB-3194: Added external layers results in a
 catalogue

---
 .../menu/components/LayerCatalogue.vue        |   2 +-
 .../menu/components/LayerCatalogueItem.vue    |  86 ++++++++++----
 .../menu/components/LayerLegendPopup.vue      | 107 +++++++++++-------
 .../activeLayers/MenuActiveLayersList.vue     |  10 +-
 .../ImportCatalogue/ImportCatalogue.vue       |   2 +-
 .../components/search/SearchResultList.vue    |  23 +++-
 src/utils/ModalWithBackdrop.vue               |   4 +-
 7 files changed, 156 insertions(+), 78 deletions(-)

diff --git a/src/modules/menu/components/LayerCatalogue.vue b/src/modules/menu/components/LayerCatalogue.vue
index 59dba380c..0b72cf388 100644
--- a/src/modules/menu/components/LayerCatalogue.vue
+++ b/src/modules/menu/components/LayerCatalogue.vue
@@ -24,7 +24,7 @@ function clearPreviewLayer() {
 </script>
 
 <template>
-    <div class="menu-catalogue-list" @mouseleave="clearPreviewLayer">
+    <div class="menu-catalogue-list ps-2" @mouseleave="clearPreviewLayer">
         <LayerCatalogueItem
             v-for="item in layerCatalogue"
             :key="item.getID()"
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 0b6d49fa3..8971cc0ed 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -14,6 +14,7 @@ import AbstractLayer from '@/api/layers/AbstractLayer.class'
 import GeoAdminGroupOfLayers from '@/api/layers/GeoAdminGroupOfLayers.class'
 import LayerLegendPopup from '@/modules/menu/components/LayerLegendPopup.vue'
 import { ActiveLayerConfig } from '@/utils/layerUtils'
+import log from '@/utils/logging'
 
 const { item, compact, depth } = defineProps({
     item: {
@@ -41,6 +42,8 @@ const activeLayers = computed(() => store.state.layers.activeLayers)
 const openThemesIds = computed(() => store.state.topics.openedTreeThemesIds)
 
 const hasChildren = computed(() => item?.layers?.length > 0)
+const hasLegend = computed(() => canBeAddedToTheMap.value && (!item.isExternal || item.abstract))
+
 /**
  * Flag telling if this layer can be added to the map (so if the UI should include the necessary
  * element to do so)
@@ -73,46 +76,73 @@ function startLayerPreview() {
         store.dispatch('setPreviewLayer', item)
     }
 }
+
+function addLayer() {
+    // if this is a group of a layer then simply add it to the map
+    const matchingActiveLayer = store.getters.getActiveLayerById(item.getID())
+    if (matchingActiveLayer) {
+        store.dispatch('toggleLayerVisibility', matchingActiveLayer)
+    } else if (item.isExternal) {
+        store.dispatch('addLayer', item)
+    } else {
+        store.dispatch('addLayer', new ActiveLayerConfig(item.getID(), true))
+    }
+}
+
 function onItemClick() {
-    if (hasChildren.value) {
+    if (canBeAddedToTheMap.value) {
+        addLayer()
+    } else if (hasChildren.value) {
         showChildren.value = !showChildren.value
-    } else {
-        const matchingActiveLayer = store.getters.getActiveLayerById(item.getID())
-        if (matchingActiveLayer) {
-            store.dispatch('toggleLayerVisibility', matchingActiveLayer)
-        } else {
-            store.dispatch('addLayer', new ActiveLayerConfig(item.getID(), true))
-        }
     }
 }
+
+function onCollapseClick() {
+    showChildren.value = !showChildren.value
+}
+
+function onCheckboxClick() {
+    addLayer()
+}
+
+function zoomToLayer() {
+    log.debug(`Zoom to layer ${item.name}`, item.extent)
+    store.dispatch('zoomToExtent', item.extent)
+}
 </script>
 
 <template>
     <div class="menu-catalogue-item" data-cy="catalogue-tree-item">
         <div
-            class="menu-catalogue-item-title"
+            class="menu-catalogue-item-title ps-1"
             :class="{ group: hasChildren }"
             :data-cy="`catalogue-tree-item-${item.getID()}`"
             @click="onItemClick"
             @mouseenter="startLayerPreview"
         >
             <button
-                class="btn d-flex align-items-center"
+                v-if="hasChildren"
+                class="btn btn-rounded"
                 :class="{
-                    'text-danger': isPresentInActiveLayers || isCurrentlyHidden,
                     'btn-lg': !compact,
-                    'btn-rounded': hasChildren,
                 }"
+                @click.stop="onCollapseClick"
             >
-                <FontAwesomeLayers v-if="hasChildren">
+                <FontAwesomeLayers>
                     <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
                     <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
                 </FontAwesomeLayers>
+            </button>
+            <button
+                v-if="canBeAddedToTheMap"
+                class="btn"
+                :class="{
+                    'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
+                    'btn-lg': !compact,
+                }"
+                @click.stop="onCheckboxClick"
+            >
                 <FontAwesomeIcon
-                    v-if="canBeAddedToTheMap"
-                    :class="{
-                        'ms-1': hasChildren,
-                    }"
                     :icon="`far ${
                         isPresentInActiveLayers && !isCurrentlyHidden
                             ? 'fa-check-square'
@@ -120,9 +150,16 @@ function onItemClick() {
                     }`"
                 />
             </button>
-            <span class="menu-catalogue-item-name">{{ item.name }}</span>
+            <span
+                class="menu-catalogue-item-name"
+                :class="{ 'text-primary': isPresentInActiveLayers || isCurrentlyHidden }"
+                >{{ item.name }}</span
+            >
+            <button v-if="item.extent?.length" class="btn" @click.stop="zoomToLayer">
+                <FontAwesomeIcon icon="fa fa-search-plus" />
+            </button>
             <button
-                v-if="canBeAddedToTheMap"
+                v-if="hasLegend"
                 class="btn"
                 :class="{ 'btn-lg': !compact }"
                 data-cy="catalogue-tree-item-info"
@@ -135,7 +172,7 @@ function onItemClick() {
             <ul
                 v-show="showChildren"
                 class="menu-catalogue-item-children"
-                :class="`ps-${2 + 2 * depth}`"
+                :class="`ps-${2 + depth}`"
             >
                 <LayerCatalogueItem
                     v-for="child in item.layers"
@@ -146,11 +183,7 @@ function onItemClick() {
                 />
             </ul>
         </CollapseTransition>
-        <LayerLegendPopup
-            v-if="showLayerLegend"
-            :layer-id="item.getID()"
-            @close="showLayerLegend = false"
-        />
+        <LayerLegendPopup v-if="showLayerLegend" :layer="item" @close="showLayerLegend = false" />
     </div>
 </template>
 
@@ -177,6 +210,9 @@ function onItemClick() {
         }
     }
 }
+.menu-catalogue-item-title:hover {
+    background-color: $list-item-hover-bg-color;
+}
 .menu-catalogue-item-name {
     @extend .menu-name;
 }
diff --git a/src/modules/menu/components/LayerLegendPopup.vue b/src/modules/menu/components/LayerLegendPopup.vue
index 64cf7b40b..45a6af4cc 100644
--- a/src/modules/menu/components/LayerLegendPopup.vue
+++ b/src/modules/menu/components/LayerLegendPopup.vue
@@ -1,55 +1,82 @@
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue'
+import { onMounted } from 'vue'
+import { useStore } from 'vuex'
+
+import AbstractLayer from '@/api/layers/AbstractLayer.class'
+import { getLayerLegend } from '@/api/layers/layers.api'
+import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
+
+const props = defineProps({
+    layer: {
+        type: AbstractLayer || null,
+        default: null,
+    },
+    layerId: {
+        type: String || null,
+        default: null,
+    },
+    layerName: {
+        type: String || null,
+        default: null,
+    },
+})
+const emit = defineEmits(['close'])
+const store = useStore()
+
+const { layer, layerId, layerName } = toRefs(props)
+const htmlContent = ref('')
+
+const currentLang = computed(() => store.state.i18n.lang)
+const title = computed(() => layer.value?.name ?? layerName.value)
+const body = computed(() => layer.value?.abstract ?? '')
+
+const attributionName = computed(() => layer.value?.attributions[0].name ?? '')
+const attributionUrl = computed(() => layer.value?.attributions[0].url ?? '')
+const isExternal = computed(() => layer.value?.isExternal ?? false)
+
+watch(layer, async (newLayer) => {
+    htmlContent.value = await getLayerLegend(currentLang.value, newLayer.getID())
+})
+
+watch(layerId, async (newLayerId) => {
+    htmlContent.value = await getLayerLegend(currentLang.value, newLayerId)
+})
+
+onMounted(async () => {
+    if (!isExternal.value && layer.value) {
+        htmlContent.value = await getLayerLegend(currentLang.value, layer.value.getID())
+    } else if (!isExternal.value && layerId.value) {
+        htmlContent.value = await getLayerLegend(currentLang.value, layerId.value)
+    }
+})
+</script>
+
 <template>
-    <ModalWithBackdrop :title="$t('metadata_window_title')" :allow-print="true" @close="onClose">
+    <ModalWithBackdrop :title="title" :allow-print="true" @close="emit('close', layerId)">
         <div class="layer-legend" data-cy="layer-legend-popup">
-            <h4 v-if="!content" class="mb-0">
+            <h4 v-if="!isExternal && !htmlContent" class="mb-0">
                 <font-awesome-icon spin :icon="['fa', 'spinner']" />
             </h4>
+            <div v-else-if="isExternal">
+                <div>{{ body }}</div>
+                <div class="mt-2 text-primary text-end">
+                    <span class="me-1">{{ $t('copyright_data') }}</span>
+                    <a :href="attributionUrl" target="_blank">{{ attributionName }}</a>
+                </div>
+            </div>
             <!-- eslint-disable vue/no-v-html-->
-            <div v-else data-cy="layer-legend" v-html="content"></div>
+            <div v-else data-cy="layer-legend" v-html="htmlContent"></div>
             <!-- eslint-enable vue/no-v-html-->
         </div>
     </ModalWithBackdrop>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-
-import { getLayerLegend } from '@/api/layers/layers.api'
-import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
-
-export default {
-    components: { ModalWithBackdrop },
-    props: {
-        layerId: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ['close'],
-    data() {
-        return {
-            content: null,
-        }
-    },
-    computed: {
-        ...mapState({
-            currentLang: (state) => state.i18n.lang,
-        }),
-    },
-    async mounted() {
-        this.content = await getLayerLegend(this.currentLang, this.layerId)
-    },
-    methods: {
-        onClose() {
-            this.$emit('close', this.layerId)
-        },
-    },
-}
-</script>
-
 <style lang="scss">
 // No scoping here as we need to apply styles to the markup we included with v-html.
 @import 'src/scss/variables';
+@import 'src/scss/webmapviewer-bootstrap-theme';
+
 $spacing: 8px;
 
 .layer-legend {
@@ -72,7 +99,7 @@ $spacing: 8px;
     padding: $spacing;
     background-color: #eee;
     .bod-title {
-        color: red;
+        color: $primary;
         margin-bottom: $spacing;
     }
     .legend-abstract {
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
index 23af77b62..cb0c9551b 100644
--- a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
+++ b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
@@ -18,12 +18,12 @@
                 @toggle-layer-details="onToggleLayerDetails"
                 @opacity-change="onOpacityChange"
                 @order-change="onOrderChange"
-                @show-layer-legend-popup="showLayerLegendForId = layer.getID()"
+                @show-layer-legend-popup="showLayerLegendForLayer = layer"
             />
             <LayerLegendPopup
-                v-if="showLayerLegendForId"
-                :layer-id="showLayerLegendForId"
-                @close="showLayerLegendForId = null"
+                v-if="showLayerLegendForLayer"
+                :layer="showLayerLegendForLayer"
+                @close="showLayerLegendForLayer = null"
             />
         </div>
         <div v-show="activeLayers.length === 0" class="p-1 ps-3" data-cy="menu-section-no-layers">
@@ -53,7 +53,7 @@ export default {
     },
     data() {
         return {
-            showLayerLegendForId: null,
+            showLayerLegendForLayer: null,
             showLayerDetailsForId: null,
         }
     },
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
index af0efbfdb..b2a50f20f 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
@@ -38,7 +38,7 @@ function onClear() {
         <div v-if="wmsMaxSize">
             {{ i18n.t('wms_max_size_allowed') }} {{ wmsMaxSize.width }} * {{ wmsMaxSize.height }}
         </div>
-        <LayerCatalogue :layer-catalogue="capabilities" :compact="compact" />
+        <LayerCatalogue class="mb-2" :layer-catalogue="capabilities" :compact="compact" />
     </div>
 </template>
 
diff --git a/src/modules/menu/components/search/SearchResultList.vue b/src/modules/menu/components/search/SearchResultList.vue
index 289ffc076..b02df1325 100644
--- a/src/modules/menu/components/search/SearchResultList.vue
+++ b/src/modules/menu/components/search/SearchResultList.vue
@@ -35,15 +35,16 @@
                         :key="index"
                         :index="index"
                         :entry="layer"
-                        @show-layer-legend-popup="showLayerLegendForId = layer.layerId"
+                        @show-layer-legend-popup="showLayerLegend(layer)"
                     />
                 </SearchResultCategory>
             </div>
         </div>
         <LayerLegendPopup
-            v-if="showLayerLegendForId"
-            :layer-id="showLayerLegendForId"
-            @close="showLayerLegendForId = null"
+            v-if="layerLegendId"
+            :layer-id="layerLegendId"
+            :layer-name="layerLegendName"
+            @close="hideLayerLegend()"
         />
     </div>
 </template>
@@ -65,7 +66,8 @@ export default {
     emits: ['close'],
     data() {
         return {
-            showLayerLegendForId: null,
+            layerLegendId: null,
+            layerLegendName: null,
         }
     },
     computed: {
@@ -74,6 +76,17 @@ export default {
         }),
         ...mapGetters(['isPhoneMode', 'hasDevSiteWarning']),
     },
+    methods: {
+        showLayerLegend(layerResult) {
+            this.layerLegendId = layerResult.layerId
+            // NOTE: the service search wsgi is setting the title in <b></b> tags
+            this.layerLegendName = layerResult.title.replace(/<[^>]*>?/gm, '')
+        },
+        hideLayerLegend() {
+            this.layerLegendId = null
+            this.layerLegendName = null
+        },
+    },
 }
 </script>
 
diff --git a/src/utils/ModalWithBackdrop.vue b/src/utils/ModalWithBackdrop.vue
index 24d2c5c49..b8de653e8 100644
--- a/src/utils/ModalWithBackdrop.vue
+++ b/src/utils/ModalWithBackdrop.vue
@@ -16,7 +16,9 @@
                         class="card-header d-flex align-middle"
                         :class="{ 'bg-primary text-white border-primary': headerPrimary }"
                     >
-                        <span v-if="title" class="flex-grow-1 text-start">{{ title }}</span>
+                        <span v-if="title" class="flex-grow-1 text-start text-truncate">{{
+                            title
+                        }}</span>
                         <button
                             v-if="allowPrint"
                             class="btn btn-sm"

From 186ffdb82fcf4fb4da0c993b330d12ed07496acc Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Sat, 9 Dec 2023 14:37:34 +0100
Subject: [PATCH 03/17] BGDIINF_SB-3194: Removed old import tool

---
 .../infobox/components/ImportContent.vue      | 502 ------------------
 .../components/ImportContentResultItem.vue    | 197 -------
 .../components/ImportContentResultList.vue    | 194 -------
 3 files changed, 893 deletions(-)
 delete mode 100644 src/modules/infobox/components/ImportContent.vue
 delete mode 100644 src/modules/infobox/components/ImportContentResultItem.vue
 delete mode 100644 src/modules/infobox/components/ImportContentResultList.vue

diff --git a/src/modules/infobox/components/ImportContent.vue b/src/modules/infobox/components/ImportContent.vue
deleted file mode 100644
index b7d83f50f..000000000
--- a/src/modules/infobox/components/ImportContent.vue
+++ /dev/null
@@ -1,502 +0,0 @@
-<template>
-    <div
-        data-infobox="height-reference"
-        class="import-overlay-content"
-        :class="{ 'with-layers': importedLayers?.length }"
-        data-cy="import-tool-content"
-    >
-        <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item">
-                <button
-                    class="nav-link py-1"
-                    :class="{
-                        active: selectedTab === 'online',
-                    }"
-                    data-bs-toggle="tab"
-                    data-bs-target="#nav-online"
-                    type="button"
-                    role="tab"
-                    aria-controls="nav-online"
-                    aria-selected="true"
-                    data-cy="online-import-btn"
-                    @click="() => (selectedTab = 'online')"
-                >
-                    <!-- TODO add translation -->
-                    Online
-                </button>
-            </li>
-            <li class="nav-item">
-                <button
-                    class="nav-link py-1"
-                    :class="{
-                        active: selectedTab === 'local',
-                    }"
-                    data-bs-toggle="tab"
-                    data-bs-target="#nav-local"
-                    type="button"
-                    role="tab"
-                    aria-controls="nav-local"
-                    aria-selected="false"
-                    data-cy="local-import-btn"
-                    @click="() => (selectedTab = 'local')"
-                >
-                    <!-- TODO add translation -->
-                    Local
-                </button>
-            </li>
-        </ul>
-        <div class="tab-content mt-2">
-            <div
-                id="nav-online"
-                class="tab-pane fade"
-                :class="{ active: selectedTab === 'online', show: selectedTab === 'online' }"
-                role="tabpanel"
-                aria-labelledby="nav-online-tab"
-            >
-                <div class="input-group d-flex">
-                    <input
-                        ref="onlineImportInput"
-                        type="text"
-                        class="form-control import-input"
-                        :class="{ 'rounded-end': !onlineImportValue?.length }"
-                        :placeholder="$t('import_online_placeholder')"
-                        :value="onlineImportValue"
-                        data-cy="import"
-                        @input="onInputChange"
-                        @focus="showProviders"
-                        @keydown.down.prevent="goToFirstResult"
-                        @keydown.esc.prevent="hideProviders"
-                    />
-                    <button
-                        class="list-switch"
-                        :class="{ 'clear-btn-shown': onlineImportValue?.length > 0 }"
-                        data-cy="import-list-switch-button"
-                        @click="toggleProviders"
-                    >
-                        <FontAwesomeIcon :icon="listShown ? 'caret-up' : 'caret-down'" />
-                    </button>
-                    <button
-                        v-if="onlineImportValue?.length > 0"
-                        id="button-addon1"
-                        class="btn btn-outline-group rounded-end"
-                        type="button"
-                        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" data-cy="import-provider-list">
-                            <div
-                                v-for="(provider, key) in filteredList"
-                                :key="provider"
-                                :tabindex="key"
-                                class="providers-list-item p-2"
-                                @keydown.up.prevent="() => goToPrevious(key)"
-                                @keydown.down.prevent="() => goToNext(key)"
-                                @keydown.home.prevent="goToFirst"
-                                @keydown.end.prevent="goToLast"
-                                @click="() => onChooseProvider(provider.value)"
-                            >
-                                <!-- eslint-disable vue/no-v-html-->
-                                <span v-html="provider.toShow"></span>
-                                <!-- eslint-enable vue/no-v-html-->
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="connect-btn-container mb-2"
-                    :class="{
-                        disabled: isConnectDisabled,
-                    }"
-                >
-                    <button
-                        type="button"
-                        class="btn btn-outline-secondary connect-btn mt-1"
-                        :disabled="isConnectDisabled"
-                        data-cy="import-connect-button"
-                        @click="onConnectOrLoad"
-                    >
-                        {{ buttonText }}
-                    </button>
-                </div>
-            </div>
-            <div
-                id="nav-local"
-                class="tab-pane fade"
-                :class="{ active: selectedTab === 'local', show: selectedTab === 'local' }"
-                role="tabpanel"
-                aria-labelledby="nav-local-tab"
-            >
-                <div class="input-group">
-                    <input
-                        ref="localImportInput"
-                        type="file"
-                        :accept="localUploadAccept"
-                        :size="localUploadMaxSize"
-                        hidden
-                        data-cy="import-local-input"
-                        @change="onFileSelected"
-                    />
-                    <input
-                        type="text"
-                        class="form-control local-import-input"
-                        :placeholder="$t('no_file')"
-                        :value="importedFileInfo"
-                        readonly
-                        @click="() => $refs.localImportInput.click()"
-                    />
-                    <button
-                        class="btn btn-outline-secondary local-import-btn"
-                        type="button"
-                        @click="() => $refs.localImportInput.click()"
-                    >
-                        {{ $t('browse') }}
-                    </button>
-                </div>
-                <div v-show="showMaxSizeError" class="text-danger">{{ $t('file_too_large') }}</div>
-                <div
-                    class="connect-btn-container mb-2"
-                    :class="{
-                        disabled: isLoadDisabled,
-                    }"
-                >
-                    <button
-                        type="button"
-                        class="btn btn-outline-secondary connect-btn mt-1"
-                        :disabled="isLoadDisabled"
-                        data-cy="import-load-button"
-                        @click="onConnectOrLoad"
-                    >
-                        {{ buttonText }}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <ImportContentResultList
-            v-if="importedLayers?.length"
-            :imported-layers="importedLayers"
-            :max-size="wmsMaxSize"
-        ></ImportContentResultList>
-    </div>
-</template>
-<script>
-import axios from 'axios'
-import { useI18n } from 'vue-i18n'
-import { mapState } from 'vuex'
-
-import KMLLayer from '@/api/layers/KMLLayer.class'
-import { parseWmsCapabilities, parseWmtsCapabilities } from '@/api/layers/layers-external.api'
-import externalLayerProviders from '@/modules/infobox/utils/external-layer-providers.json'
-import {
-    guessExternalLayerUrl,
-    isGpx,
-    isKml,
-    isValidUrl,
-    isWmsGetCap,
-    isWmtsGetCap,
-} from '@/modules/infobox/utils/external-provider'
-import log from '@/utils/logging'
-
-import ImportContentResultList from './ImportContentResultList.vue'
-
-const BTN_RESET_TIMEOUT = 3000
-
-export default {
-    components: { ImportContentResultList },
-    emits: ['connected'],
-    setup() {
-        const i18n = useI18n()
-        return {
-            i18n,
-        }
-    },
-    data() {
-        return {
-            onlineImportValue: '',
-            listShown: false,
-            /** @type {'default' | 'loading' | 'failed' | 'succeeded'} */
-            uploadBtnStatus: 'default',
-            importedLayers: [],
-            wmsMaxSize: undefined,
-            /** @type {'online' | 'local'} */
-            selectedTab: 'online',
-            importedFileInfo: '',
-            localUploadAccept: '.kml,.KML,.gpx,.GPX',
-            localUploadMaxSize: 20000000, // 20mb
-            selectedFile: null,
-            showMaxSizeError: false,
-        }
-    },
-    computed: {
-        ...mapState({
-            lang: (state) => state.i18n.lang,
-            projection: (state) => state.position.projection,
-        }),
-        filteredList() {
-            let providers = externalLayerProviders
-            if (this.onlineImportValue?.length) {
-                providers = externalLayerProviders.filter((it) =>
-                    it.includes(this.onlineImportValue)
-                )
-            }
-            return providers.map((it) => {
-                return {
-                    value: it,
-                    toShow: it.replace(
-                        this.onlineImportValue,
-                        `<strong>${this.onlineImportValue}</strong>`
-                    ),
-                }
-            })
-        },
-        isConnectDisabled() {
-            return !isValidUrl(this.onlineImportValue)
-        },
-        isLoadDisabled() {
-            return !this.selectedFile
-        },
-        buttonText() {
-            if (this.uploadBtnStatus === 'loading') {
-                return this.i18n.t('parsing_file')
-            } else if (this.uploadBtnStatus === 'failed') {
-                return this.i18n.t('parse_failed')
-            } else if (this.uploadBtnStatus === 'succeeded') {
-                return this.i18n.t('parse_succeeded')
-            } else if (this.selectedTab === 'local') {
-                return this.i18n.t('load_local_file')
-            }
-            return this.i18n.t('connect')
-        },
-    },
-    watch: {
-        lang() {
-            if (this.importedLayers?.length) {
-                this.onConnectOrLoad()
-            }
-        },
-    },
-    methods: {
-        onInputChange(event) {
-            this.onlineImportValue = event.target.value
-        },
-        onChooseProvider(provider) {
-            this.onlineImportValue = provider
-            this.hideProviders()
-        },
-        async onConnectOrLoad() {
-            this.uploadBtnStatus = 'loading'
-            if (this.selectedTab === 'online') {
-                await this.handleFileUrl()
-            } else if (this.selectedTab === 'local') {
-                this.uploadFile()
-            }
-            this.$emit('connected')
-        },
-        showProviders() {
-            this.listShown = true
-        },
-        hideProviders() {
-            this.listShown = false
-        },
-        toggleProviders() {
-            if (this.listShown) {
-                this.hideProviders()
-            } else {
-                this.showProviders()
-            }
-        },
-        goToFirstResult() {
-            if (!this.listShown) {
-                this.showProviders()
-            }
-            // Wait a tick in case the list weren't shown before.
-            this.$nextTick(() => {
-                // Switch focus to the first item in the list that can get it.
-                // Initially, this will be the first entry of the location list.
-                this.$refs.providers.querySelector('[tabindex="0"]').focus()
-            })
-        },
-        goToPrevious(currentKey) {
-            if (currentKey === 0) return
-            const key = currentKey - 1
-            this.$refs.providers.querySelector(`[tabindex="${key}"]`).focus()
-        },
-        goToNext(currentKey) {
-            if (currentKey >= this.filteredList.length - 1) return
-            const key = currentKey + 1
-            this.$refs.providers.querySelector(`[tabindex="${key}"]`).focus()
-        },
-        goToFirst() {
-            this.$refs.providers.querySelector('[tabindex="0"]').focus()
-        },
-        goToLast() {
-            this.$refs.providers
-                .querySelector(`[tabindex="${this.filteredList.length - 1}"]`)
-                .focus()
-        },
-        handleFileContent(fileContent, url, contentType) {
-            if (isWmsGetCap(fileContent)) {
-                const capabilities = parseWmsCapabilities(fileContent, url)
-                this.handleWms(capabilities)
-            } else if (isWmtsGetCap(fileContent)) {
-                const capabilities = parseWmtsCapabilities(fileContent, url)
-                this.handleWmts(capabilities)
-            } else if (isKml(fileContent)) {
-                // todo just for test
-                this.importedLayers = [new KMLLayer(url, true, 1, null, null, null, null, true)]
-            } else if (isGpx(fileContent)) {
-                // TODO GPX layer not done yet
-            } else {
-                throw new Error(
-                    `Unsupported url ${url} response content; Content-Type=${contentType}`
-                )
-            }
-        },
-        handleWms(capabilities) {
-            if (capabilities.Service.MaxWidth && capabilities.Service.MaxHeight) {
-                this.wmsMaxSize = {
-                    width: capabilities.Service.MaxWidth,
-                    height: capabilities.Service.MaxHeight,
-                }
-            }
-            this.importedLayers = capabilities.getAllExternalLayerObjects(this.projection, 1, true)
-        },
-        handleWmts(capabilities) {
-            this.importedLayers = capabilities.getAllExternalLayerObjects(this.projection, 1, true)
-        },
-        async handleFileUrl() {
-            this.wmsMaxSize = undefined
-            const url = guessExternalLayerUrl(this.onlineImportValue, this.lang).toString()
-            try {
-                const response = await axios.get(url)
-                if (response.status !== 200) {
-                    throw new Error(`Failed to fetch ${url}; status_code=${response.status}`)
-                }
-                this.handleFileContent(response.data, url, response.headers.get('Content-Type'))
-                if (this.importedLayers.length === 0) {
-                    throw new Error(`No valid layer found in ${url}`)
-                }
-                this.uploadBtnStatus = 'succeeded'
-                setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-            } catch (error) {
-                log.error(`Failed to fetch url ${url}`, error, error.stack)
-                this.uploadBtnStatus = 'failed'
-                setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-            }
-        },
-        clearImportQuery() {
-            this.onlineImportValue = ''
-            this.$refs.onlineImportInput.focus()
-        },
-        onFileSelected(evt) {
-            this.showMaxSizeError = false
-            const file = evt.target?.files[0]
-            if (!file) return
-            this.importedFileInfo = `${file.name}, ${file.size / 1000} ko`
-            this.$refs.localImportInput.value = null
-            if (file.size > this.localUploadMaxSize) {
-                this.showMaxSizeError = true
-                this.selectedFile = null
-            } else {
-                this.selectedFile = file
-            }
-        },
-        uploadFile() {
-            this.importedLayers = []
-            this.onlineImportValue = ''
-
-            // TODO handle file content
-            console.error('Uploaded file: ', this.selectedFile)
-
-            this.uploadBtnStatus = 'succeeded'
-            setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-
-.import-overlay-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 0.825rem;
-    height: min(260px, 35vh);
-}
-
-.import-overlay-content.with-layers {
-    height: min(450px, 35vh);
-}
-
-.local-import-btn:focus,
-.local-import-input:focus,
-.import-input:focus {
-    box-shadow: none;
-}
-
-.connect-btn {
-    width: 100%;
-    cursor: pointer;
-}
-.connect-btn.loading {
-    background-color: #c9302c;
-}
-.connect-btn-container.disabled {
-    cursor: not-allowed;
-}
-.providers-list-container {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    overflow-y: auto;
-    max-height: 200px;
-    background-color: white;
-    z-index: 1;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-    .providers-list {
-        display: grid;
-        grid-auto-rows: 1fr;
-
-        .providers-list-item {
-            cursor: pointer;
-            font-size: 0.8rem;
-        }
-        .providers-list-item:focus,
-        .providers-list-item:hover {
-            background-color: $list-item-hover-bg-color;
-        }
-    }
-}
-
-.list-switch {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    width: 15px;
-    right: 10px;
-    height: 100%;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    z-index: 10;
-}
-
-.list-switch.clear-btn-shown {
-    right: 50px;
-}
-.local-import-btn,
-.local-import-input {
-    cursor: pointer;
-}
-.nav-tabs {
-    .nav-link.active {
-        background-color: $primary;
-        color: white;
-    }
-}
-</style>
diff --git a/src/modules/infobox/components/ImportContentResultItem.vue b/src/modules/infobox/components/ImportContentResultItem.vue
deleted file mode 100644
index 2db8b4851..000000000
--- a/src/modules/infobox/components/ImportContentResultItem.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <div class="import-list-item">
-        <div
-            class="import-list-item-title"
-            :class="{
-                selected: item.externalLayerId === highlightId,
-            }"
-            @click="onItemClick"
-            @mouseenter="startResultPreview"
-            @mouseleave="stopResultPreview"
-        >
-            <div v-if="depth > 0" class="vr"></div>
-            <div
-                class="zoom-btn-container"
-                :class="{
-                    disabled: !item.extent?.length,
-                }"
-            >
-                <button
-                    class="btn d-flex align-items-center zoom-btn"
-                    :disabled="!item.extent?.length"
-                    @click="zoomToLayer"
-                >
-                    <FontAwesomeIcon icon="fa fa-search-plus" />
-                    <div class="vr ms-2"></div>
-                </button>
-            </div>
-            <button
-                class="btn d-flex align-items-center"
-                :class="{
-                    'btn-rounded': isGroup,
-                }"
-                @click="toggleItem"
-            >
-                <FontAwesomeLayers v-if="isGroup">
-                    <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
-                    <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
-                </FontAwesomeLayers>
-            </button>
-            <span class="import-list-item-name">{{ item.name }}</span>
-        </div>
-        <CollapseTransition :duration="200">
-            <div
-                v-show="showChildren"
-                class="import-list-item-children"
-                :class="`ps-${5 + 2 * depth}`"
-            >
-                <ImportContentResultItem
-                    v-for="(layer, index) in item.layers"
-                    :key="`${index}-${layer.externalLayerId}`"
-                    :item="layer"
-                    :depth="depth + 1"
-                    :highlight-id="highlightId"
-                    @click-on-item="bubbleEvent('clickOnItem', $event)"
-                    @preview-start="bubbleEvent('previewStart', $event)"
-                    @preview-stop="bubbleEvent('previewStop', $event)"
-                />
-            </div>
-        </CollapseTransition>
-    </div>
-</template>
-
-<script>
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-// importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
-import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
-import { mapActions } from 'vuex'
-
-import ExternalGroupOfLayers from '@/api/layers/ExternalGroupOfLayers.class'
-import ExternalWMSLayer from '@/api/layers/ExternalWMSLayer.class'
-import ExternalWMTSLayer from '@/api/layers/ExternalWMTSLayer.class'
-
-export default {
-    name: 'ImportContentResultItem',
-    components: {
-        FontAwesomeLayers,
-        FontAwesomeIcon,
-        CollapseTransition,
-    },
-    props: {
-        item: {
-            type: Object,
-            required: true,
-        },
-        depth: {
-            type: Number,
-            default: 0,
-        },
-        highlightId: {
-            type: String,
-            default: undefined,
-        },
-    },
-    emits: ['clickOnItem', 'previewStart', 'previewStop'],
-    data() {
-        return {
-            showChildren: false,
-        }
-    },
-    computed: {
-        isLayer() {
-            return this.item instanceof ExternalWMSLayer || this.item instanceof ExternalWMTSLayer
-        },
-        isGroup() {
-            return this.item instanceof ExternalGroupOfLayers
-        },
-    },
-    methods: {
-        ...mapActions(['zoomToExtent']),
-        toggleItem(event) {
-            event.stopPropagation()
-            this.showChildren = !this.showChildren
-        },
-        zoomToLayer(event) {
-            event.stopPropagation()
-            this.zoomToExtent(this.item.extent)
-        },
-        onItemClick() {
-            this.$emit('clickOnItem', this.item)
-        },
-        startResultPreview() {
-            this.$emit('previewStart', this.item)
-        },
-        stopResultPreview() {
-            this.$emit('previewStop')
-        },
-        /**
-         * As we can have recursive component (see template), we have to bubble up user interaction
-         * events, otherwise the event get stuck mid course and never reaches the parent that can
-         * interact with the store
-         */
-        bubbleEvent(type, payload) {
-            this.$emit(type, payload)
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-@import 'src/modules/menu/scss/menu-items';
-
-.import-list-item {
-    border-bottom: none;
-    .btn {
-        border: none;
-    }
-}
-.import-list-item {
-    background-color: $gray-100;
-}
-.import-list-item.odd {
-    background-color: white;
-}
-.import-list-item-title.selected:hover,
-.import-list-item-title.selected {
-    background-color: $list-item-hover-bg-color;
-}
-
-.import-list-item-title:hover {
-    background-color: $list-item-hover-bg-color;
-}
-.import-list-item-title {
-    @extend .menu-title;
-    cursor: pointer;
-    .import-list-item-active & {
-        color: $primary;
-    }
-    .import-list-item-theme & {
-        border-bottom: 1px solid $gray-400;
-    }
-    .import-list-item-layer & {
-        border-bottom: 1px dashed $gray-400;
-    }
-}
-.import-list-item-name {
-    @extend .menu-name;
-    text-overflow: ellipsis;
-}
-.import-list-item-children {
-    @extend .menu-list;
-    border-top: 1px solid $gray-400;
-    background: white;
-    .import-list-item-title {
-        padding: 0;
-    }
-    .import-list-item {
-        background: white;
-    }
-}
-.zoom-btn:active {
-    transform: scale(1.2);
-}
-.zoom-btn-container.disabled {
-    cursor: not-allowed;
-}
-</style>
diff --git a/src/modules/infobox/components/ImportContentResultList.vue b/src/modules/infobox/components/ImportContentResultList.vue
deleted file mode 100644
index 4cd7cdc8b..000000000
--- a/src/modules/infobox/components/ImportContentResultList.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-    <div class="d-flex flex-column results-list-container">
-        <div v-if="maxSize">
-            {{ $t('wms_max_size_allowed') }} {{ maxSize.width }} * {{ maxSize.height }}
-        </div>
-        <div class="results-container column-gap-2">
-            <div class="flex-grow-1 results-table-container">
-                <div class="d-flex justify-content-between align-items-center results-header">
-                    <div></div>
-                    <div>{{ $t('title') }}</div>
-                    <div>
-                        <button class="btn" @click="toggleSort">
-                            <FontAwesomeIcon
-                                :icon="
-                                    revertSort
-                                        ? ['fas', 'sort-alpha-up']
-                                        : ['fas', 'sort-alpha-down']
-                                "
-                            />
-                        </button>
-                    </div>
-                </div>
-                <div class="results-list overflow-y-auto" data-cy="import-result-list">
-                    <ImportContentResultItem
-                        v-for="(layer, index) in sortedList"
-                        :key="`${index}-${layer.externalLayerId}`"
-                        :item="layer"
-                        :highlight-id="selectedLayer?.externalLayerId"
-                        class="list-item"
-                        :class="{
-                            odd: (index + 1) % 2,
-                        }"
-                        @click-on-item="onItemClick"
-                        @preview-start="onPreviewStart"
-                        @preview-stop="onPreviewStop"
-                    />
-                </div>
-            </div>
-            <div class="d-flex flex-column flex-grow-1 description-container">
-                <span class="description-title">{{ $t('description') }}</span>
-                <textarea class="description-text" :value="description" readonly></textarea>
-                <div
-                    class="add-btn-container mb-2"
-                    :class="{
-                        disabled: !selectedLayer,
-                    }"
-                >
-                    <button
-                        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') }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapActions } from 'vuex'
-
-import ImportContentResultItem from './ImportContentResultItem.vue'
-
-export default {
-    components: { ImportContentResultItem, FontAwesomeIcon },
-    props: {
-        importedLayers: {
-            type: Array,
-            default: () => [],
-        },
-        maxSize: {
-            type: Object,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            revertSort: false,
-            selectedLayer: undefined,
-            description: '',
-        }
-    },
-    computed: {
-        sortedList() {
-            if (this.importedLayers) {
-                const layers = [...this.importedLayers]
-                let sortedList = layers.sort((layerA, layerB) => {
-                    return layerA.name.localeCompare(layerB.name)
-                })
-                if (this.revertSort) {
-                    sortedList = sortedList.reverse()
-                }
-                return sortedList
-            }
-            return []
-        },
-    },
-    methods: {
-        ...mapActions(['addLayer', 'setPreviewLayer', 'clearPreviewLayer']),
-        toggleSort() {
-            this.revertSort = !this.revertSort
-        },
-        onItemClick(layer) {
-            this.selectedLayer = layer
-            this.description = this.selectedLayer.abstract
-        },
-        onPreviewStart(layer) {
-            this.setPreviewLayer(layer)
-            if (!this.selectedLayer) {
-                this.description = layer.abstract
-            }
-        },
-        onPreviewStop() {
-            this.clearPreviewLayer()
-        },
-        onAddLayer() {
-            if (this.selectedLayer) {
-                this.addLayer(this.selectedLayer)
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-@import 'src/scss/media-query.mixin';
-
-.results-list-container {
-    height: calc(100% - 130px);
-}
-
-.results-container {
-    display: flex;
-    flex-direction: row;
-    height: calc(100% - 20px);
-}
-
-.results-table-container {
-    border: 1px solid $gray-300;
-    border-radius: 0.375rem;
-    max-width: 50%;
-    .btn {
-        border: none;
-    }
-}
-.results-header {
-    border-bottom: 1px solid $gray-300;
-    font-weight: bold;
-}
-.results-list {
-    height: calc(100% - 40px);
-    .list-item:not(:last-child) {
-        border-bottom: 1px solid $gray-300;
-    }
-}
-.description-container {
-    width: 50%;
-    .description-title {
-        font-weight: bold;
-    }
-    .description-text {
-        height: 100%;
-        resize: none;
-    }
-    .add-btn-container.disabled {
-        cursor: not-allowed;
-    }
-}
-@media (max-width: $breakpoint_tablet) {
-    .results-container {
-        flex-direction: column;
-    }
-    .results-table-container {
-        max-width: 100%;
-        .results-list {
-            height: 150px;
-        }
-    }
-    .description-container {
-        width: 100%;
-
-        .description-text,
-        .description-title {
-            display: none;
-        }
-    }
-}
-</style>

From a39251f9da1bf7a5230f55a2d6b21af3a54d6879 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:06:14 +0100
Subject: [PATCH 04/17] BGDIINF_SB-3194: Focus on provider input when opening
 provider list

This allow a quicker use of the providers. Note this is only done when it is
a real click and not when the user use tab to focus on the toggle button and press
enter or space to activate it. In this case the user uses the keyboard and we
should not make decision on what he want to focus.
---
 .../advancedTools/ImportCatalogue/ProviderUrl.vue   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index 2391e5073..df41270c9 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -21,6 +21,7 @@ const capabilitiesParsed = ref(false)
 const errorMessage = ref(null)
 const providerList = ref(null)
 const isLoading = ref(false)
+const providerIntput = ref(null)
 
 const { providers, showProviders, toggleProviders } = useProviders(url)
 const { loadCapabilities } = useCapabilities(url)
@@ -85,12 +86,22 @@ async function connect() {
         }
     }
 }
+
+function onToggleProviders(event) {
+    toggleProviders()
+    if (showProviders.value && (event.screenX !== 0 || event.screenY !== 0)) {
+        // only focus on the provider input when the provider list has been opened
+        // and when it is a real click event (not a key stroke)
+        providerIntput.value.focus()
+    }
+}
 </script>
 
 <template>
     <div v-click-outside="() => (showProviders = false)" class="container mb-2 pe-0">
         <form class="input-group input-group-sm needs-validation">
             <input
+                ref="providerIntput"
                 v-model="url"
                 type="text"
                 class="form-control text-truncate"
@@ -124,7 +135,7 @@ async function connect() {
                     :disabled="isLoading"
                     type="button"
                     data-cy="import-catalogue-providers-toggle"
-                    @click="toggleProviders"
+                    @click="onToggleProviders"
                 >
                     <FontAwesomeIcon :icon="showProviders ? 'caret-up' : 'caret-down'" />
                 </button>

From 67e82e87a68c297b19630fd2b6a1f2984e172cf7 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:08:26 +0100
Subject: [PATCH 05/17] BGDIINF_SB-3194: Removed the connect button once
 connected

---
 .../advancedTools/ImportCatalogue/ProviderUrl.vue           | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index df41270c9..3b5546169 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -143,6 +143,7 @@ function onToggleProviders(event) {
                     v-if="url?.length > 0"
                     id="urlClearButton"
                     class="btn btn-outline-secondary"
+                    :class="{ 'url-input-dropdown-open': showProviders }"
                     :disabled="isLoading"
                     type="button"
                     data-cy="import-input-clear"
@@ -151,6 +152,11 @@ function onToggleProviders(event) {
                     <FontAwesomeIcon :icon="['fas', 'times-circle']" />
                 </button>
                 <button
+                    v-if="
+                        // We use v-if instead of v-show here in order to have bootstrap handling
+                        // the rounded corner correctly
+                        !capabilitiesParsed
+                    "
                     id="connectButton"
                     type="button"
                     class="btn btn-outline-secondary"

From d7fdae09a22502f6bfb40df8b6e9fa00432300b3 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:20:58 +0100
Subject: [PATCH 06/17] BGDIINF_SB-3194: Fixed click-outside of provider input

The provider input element had a margin and when clicking on the margin the click
outside event did not work.
---
 src/modules/menu/components/LayerCatalogue.vue                 | 2 +-
 src/modules/menu/components/LayerCatalogueItem.vue             | 2 +-
 .../advancedTools/ImportCatalogue/ImportCatalogue.vue          | 3 +--
 .../components/advancedTools/ImportCatalogue/ProviderUrl.vue   | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/modules/menu/components/LayerCatalogue.vue b/src/modules/menu/components/LayerCatalogue.vue
index 0b72cf388..59dba380c 100644
--- a/src/modules/menu/components/LayerCatalogue.vue
+++ b/src/modules/menu/components/LayerCatalogue.vue
@@ -24,7 +24,7 @@ function clearPreviewLayer() {
 </script>
 
 <template>
-    <div class="menu-catalogue-list ps-2" @mouseleave="clearPreviewLayer">
+    <div class="menu-catalogue-list" @mouseleave="clearPreviewLayer">
         <LayerCatalogueItem
             v-for="item in layerCatalogue"
             :key="item.getID()"
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 8971cc0ed..589c09f6c 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -114,7 +114,7 @@ function zoomToLayer() {
 <template>
     <div class="menu-catalogue-item" data-cy="catalogue-tree-item">
         <div
-            class="menu-catalogue-item-title ps-1"
+            class="menu-catalogue-item-title ps-2"
             :class="{ group: hasChildren }"
             :data-cy="`catalogue-tree-item-${item.getID()}`"
             @click="onItemClick"
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
index b2a50f20f..be36c06a1 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
@@ -32,9 +32,8 @@ function onClear() {
 </script>
 
 <template>
-    <div data-cy="import-catalog-content">
+    <div class="ps-2" data-cy="import-catalog-content">
         <ProviderUrl @capabilities:parsed="onNewCapabilities" @capabilities:clear="onClear" />
-        <!-- TODO display of the result-->
         <div v-if="wmsMaxSize">
             {{ i18n.t('wms_max_size_allowed') }} {{ wmsMaxSize.width }} * {{ wmsMaxSize.height }}
         </div>
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index 3b5546169..ccd05ba79 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -98,7 +98,7 @@ function onToggleProviders(event) {
 </script>
 
 <template>
-    <div v-click-outside="() => (showProviders = false)" class="container mb-2 pe-0">
+    <div v-click-outside="() => (showProviders = false)" class="mb-2 pe-0">
         <form class="input-group input-group-sm needs-validation">
             <input
                 ref="providerIntput"

From eccda126fecdbadad2c69d16a390453ccfd77919 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:32:08 +0100
Subject: [PATCH 07/17] BGDIINF_SB-3194: improve external layer sorting

---
 src/api/layers/WMSCapabilitiesParser.class.js         | 11 +----------
 .../advancedTools/ImportCatalogue/ImportCatalogue.vue |  4 +++-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/api/layers/WMSCapabilitiesParser.class.js b/src/api/layers/WMSCapabilitiesParser.class.js
index f1dc0be06..776ad3463 100644
--- a/src/api/layers/WMSCapabilitiesParser.class.js
+++ b/src/api/layers/WMSCapabilitiesParser.class.js
@@ -103,16 +103,7 @@ export default class WMSCapabilitiesParser {
                 visible,
                 ignoreError
             )
-        )
-            .filter((layer) => !!layer)
-            .sort((layerA, layerB) => {
-                if (layerA.name.toLowerCase() > layerB.name.toLowerCase()) {
-                    return 1
-                } else if (layerA.name.toLowerCase() < layerB.name.toLowerCase()) {
-                    return -1
-                }
-                return 0
-            })
+        ).filter((layer) => !!layer)
     }
 
     _getExternalLayerObject(layer, parents, projection, opacity, visible, ignoreError) {
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
index be36c06a1..6acbe78a5 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
@@ -21,7 +21,9 @@ const capabilities = ref([])
 
 function onNewCapabilities(newCapabilities, newWmsMaxSize) {
     log.debug(`New capabilities`, newCapabilities, newWmsMaxSize)
-    capabilities.value = newCapabilities
+    capabilities.value = newCapabilities.sort((layerA, layerB) =>
+        layerA.name.localeCompare(layerB.name, undefined, { sensitivity: 'base' })
+    )
     wmsMaxSize.value = newWmsMaxSize
 }
 

From 46d99286a7a0632d2765c15c584f0f4d8869fea4 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:32:30 +0100
Subject: [PATCH 08/17] BGDIINF_SB-3194: Added wmts.geo.admin.ch as external
 layer provider

---
 .../advancedTools/ImportCatalogue/external-providers.json        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
index 5186eef71..8a7671e9d 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
@@ -308,6 +308,7 @@
     "https://wms.zh.ch/WaldWNBZHWMS",
     "https://wms.zh.ch/WildkarteZHWMS",
     "https://wms.zh.ch/ZVVZHWMS",
+    "https://wmts.geo.admin.ch/1.0.0/WMTSCapabilities.xml",
     "https://wmts.geo.bs.ch/1.0.0/WMTSCapabilities.xml",
     "https://wmts.geo.ti.ch/wmts/1.0.0/WMTSCapabilities.xml",
     "https://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml",

From eb349540d0185dad09cdb139103f9a3ba63a6749 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:35:27 +0100
Subject: [PATCH 09/17] BGDIINF_SB-3194: Code improvement based on review

---
 src/modules/menu/components/LayerCatalogueItem.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 589c09f6c..06345d2e8 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -101,10 +101,6 @@ function onCollapseClick() {
     showChildren.value = !showChildren.value
 }
 
-function onCheckboxClick() {
-    addLayer()
-}
-
 function zoomToLayer() {
     log.debug(`Zoom to layer ${item.name}`, item.extent)
     store.dispatch('zoomToExtent', item.extent)
@@ -140,7 +136,7 @@ function zoomToLayer() {
                     'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
                     'btn-lg': !compact,
                 }"
-                @click.stop="onCheckboxClick"
+                @click.stop="addLayer()"
             >
                 <FontAwesomeIcon
                     :icon="`far ${

From 0581ebde6995b8968d7a4631743053e81e9918a5 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:36:51 +0100
Subject: [PATCH 10/17] BGDIINF_SB-3194: Keep import result when toggling the
 import menu

---
 .../menu/components/advancedTools/MenuAdvancedToolsList.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue b/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
index 4213bac14..446eab390 100644
--- a/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
+++ b/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
@@ -8,7 +8,7 @@
             data-cy="menu-advanced-tools-import-catalogue"
             @toggle-menu="onToggleImportCatalogue"
         >
-            <ImportCatalogue v-if="showImportCatalogue" :compact="compact" />
+            <ImportCatalogue v-show="showImportCatalogue" :compact="compact" />
         </MenuAdvancedToolsListItem>
         <MenuAdvancedToolsListItem
             :is-selected="showImportFile"

From a002e74c0750dd911059c51b743678488d70545a Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:39:18 +0100
Subject: [PATCH 11/17] BGDIINF_SB-3194: Fixed attribution link in legend popup

Avoid opening a link to itself when the attribution has no url
---
 src/modules/menu/components/LayerLegendPopup.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/LayerLegendPopup.vue b/src/modules/menu/components/LayerLegendPopup.vue
index 45a6af4cc..e18b32775 100644
--- a/src/modules/menu/components/LayerLegendPopup.vue
+++ b/src/modules/menu/components/LayerLegendPopup.vue
@@ -62,7 +62,10 @@ onMounted(async () => {
                 <div>{{ body }}</div>
                 <div class="mt-2 text-primary text-end">
                     <span class="me-1">{{ $t('copyright_data') }}</span>
-                    <a :href="attributionUrl" target="_blank">{{ attributionName }}</a>
+                    <a v-if="attributionUrl" :href="attributionUrl" target="_blank">{{
+                        attributionName
+                    }}</a>
+                    <span v-else>{{ attributionName }}</span>
                 </div>
             </div>
             <!-- eslint-disable vue/no-v-html-->

From 57c1b7623d91d02856cf33cbc9ba98e872c7144a Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 15:42:17 +0100
Subject: [PATCH 12/17] BGDIINF_SB-3194: Focus on provider input when clicking
 on clear button

---
 .../advancedTools/ImportCatalogue/ProviderUrl.vue          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index ccd05ba79..a551aff32 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -47,11 +47,16 @@ function validateUrl() {
     return !errorMessage.value
 }
 
-function clearUrl() {
+function clearUrl(event) {
     capabilitiesParsed.value = false
     url.value = ''
     showProviders.value = false
     errorMessage.value = null
+    if (event.screenX !== 0 || event.screenY !== 0) {
+        // only focus on the provider input when the clear button has been clicked
+        // and when it is a real click event (not a key stroke)
+        providerIntput.value.focus()
+    }
     emit('capabilities:clear')
 }
 

From b695a5de0742c51fa34604a8f752c6a776ba3fc4 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 16:17:52 +0100
Subject: [PATCH 13/17] BGDIINF_SB-3194: Reload capabilities on language
 changes

---
 .../advancedTools/ImportCatalogue/ProviderUrl.vue      | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index a551aff32..979130000 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import ProviderList from '@/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue'
 import {
@@ -14,6 +15,7 @@ import { isValidUrl } from '@/utils/utils'
 const emit = defineEmits(['capabilities:parsed', 'capabilities:clear'])
 
 const i18n = useI18n()
+const store = useStore()
 
 // Reactive data
 const url = ref('')
@@ -30,6 +32,12 @@ const { loadCapabilities } = useCapabilities(url)
 const isValid = computed(() => !errorMessage.value && capabilitiesParsed.value)
 const isInvalid = computed(() => errorMessage.value)
 const connectButtonKey = computed(() => (isLoading.value ? 'loading' : 'connect'))
+const lang = computed(() => store.state.i18n.lang)
+
+watch(lang, () => {
+    // When the language changes re-connect to reload the translated capabilities
+    connect()
+})
 
 // Methods
 function onUrlChange(_event) {

From c9179fe5bd0e2d35f4ba7af7e6beafd643ec00aa Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Tue, 12 Dec 2023 08:06:11 +0100
Subject: [PATCH 14/17] Renaming for better clarity

---
 .../advancedTools/ImportCatalogue/ImportCatalogue.vue       | 2 +-
 .../advancedTools/ImportCatalogue/ProviderUrl.vue           | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
index 6acbe78a5..3831ba839 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
@@ -35,7 +35,7 @@ function onClear() {
 
 <template>
     <div class="ps-2" data-cy="import-catalog-content">
-        <ProviderUrl @capabilities:parsed="onNewCapabilities" @capabilities:clear="onClear" />
+        <ProviderUrl @capabilities:parsed="onNewCapabilities" @capabilities:cleared="onClear" />
         <div v-if="wmsMaxSize">
             {{ i18n.t('wms_max_size_allowed') }} {{ wmsMaxSize.width }} * {{ wmsMaxSize.height }}
         </div>
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index 979130000..7a5c305fa 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -9,10 +9,9 @@ import {
     useCapabilities,
 } from '@/modules/menu/components/advancedTools/ImportCatalogue/useCapabilities'
 import { useProviders } from '@/modules/menu/components/advancedTools/ImportCatalogue/useProviders'
-import log from '@/utils/logging'
 import { isValidUrl } from '@/utils/utils'
 
-const emit = defineEmits(['capabilities:parsed', 'capabilities:clear'])
+const emit = defineEmits(['capabilities:parsed', 'capabilities:cleared'])
 
 const i18n = useI18n()
 const store = useStore()
@@ -65,7 +64,7 @@ function clearUrl(event) {
         // and when it is a real click event (not a key stroke)
         providerIntput.value.focus()
     }
-    emit('capabilities:clear')
+    emit('capabilities:cleared')
 }
 
 function chooseProvider(providerUrl) {
@@ -87,7 +86,6 @@ async function connect() {
         const { layers, wmsMaxSize } = await loadCapabilities()
         isLoading.value = false
         capabilitiesParsed.value = true
-        log.debug(`load capabilities successful`, layers, wmsMaxSize)
         emit('capabilities:parsed', layers, wmsMaxSize)
     } catch (error) {
         isLoading.value = false

From cd975f6155653170bbd6e3ad1fbce305c67740ee Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Tue, 12 Dec 2023 08:19:35 +0100
Subject: [PATCH 15/17] BGDIINF_SB-3194: Removed the connect button when the
 url is invalid or missing

This allow for a better user experience
---
 .../ImportCatalogue/ProviderList.vue          |  2 +-
 .../ImportCatalogue/ProviderUrl.vue           | 28 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
index 7167ff161..929ce8d09 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
@@ -49,7 +49,7 @@ defineExpose({ goToFirst })
 <template>
     <div
         v-show="showProviders"
-        class="providers-list-container shadow border rounded-0 rounded-bottom overflow-auto"
+        class="providers-list-container shadow border rounded-bottom overflow-auto"
     >
         <div ref="providerList" class="providers-list" data-cy="import-provider-list">
             <div
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index 7a5c305fa..ffa93e994 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -45,10 +45,7 @@ function onUrlChange(_event) {
 }
 
 function validateUrl() {
-    errorMessage.value = null
-    if (!url.value) {
-        errorMessage.value = 'no_url'
-    } else if (!isValidUrl(url.value)) {
+    if (url.value.length && !isValidUrl(url.value)) {
         errorMessage.value = 'invalid_url'
     }
     return !errorMessage.value
@@ -110,12 +107,12 @@ function onToggleProviders(event) {
 
 <template>
     <div v-click-outside="() => (showProviders = false)" class="mb-2 pe-0">
-        <form class="input-group input-group-sm needs-validation">
+        <form class="input-group input-group-sm has-validation">
             <input
                 ref="providerIntput"
                 v-model="url"
                 type="text"
-                class="form-control text-truncate"
+                class="form-control text-truncate rounded-end-0"
                 :class="{
                     'is-valid': isValid,
                     'is-invalid': isInvalid,
@@ -124,7 +121,7 @@ function onToggleProviders(event) {
                 :disabled="isLoading"
                 :aria-label="i18n.t('import_maps_url_placeholder')"
                 :placeholder="i18n.t('import_maps_url_placeholder')"
-                aria-describedby="urlInputControl urlInvalidMessageFeedback"
+                aria-describedby="urlInputControlBtnGrp urlToggleProviderButton urlClearButton urlConnectButton urlInvalidMessageFeedback"
                 data-cy="import-catalogue-input"
                 @input="onUrlChange"
                 @focusin="showProviders = true"
@@ -138,11 +135,13 @@ function onToggleProviders(event) {
                 class="input-group-append btn-group btn-group-sm"
                 role="group"
                 aria-label="Input control"
-                aria-describedby="urlInputControl urlClearButton connectButton"
+                aria-describedby="urlToggleProviderButton urlClearButton urlConnectButton"
             >
+                <!-- Toggle Provider button -->
                 <button
-                    id="urlInputControl"
-                    class="btn btn-outline-secondary rounded-0"
+                    id="urlToggleProviderButton"
+                    class="btn btn-outline-secondary rounded-start-0"
+                    :class="{ 'url-input-dropdown-open': showProviders }"
                     :disabled="isLoading"
                     type="button"
                     data-cy="import-catalogue-providers-toggle"
@@ -150,6 +149,7 @@ function onToggleProviders(event) {
                 >
                     <FontAwesomeIcon :icon="showProviders ? 'caret-up' : 'caret-down'" />
                 </button>
+                <!-- Clear button -->
                 <button
                     v-if="url?.length > 0"
                     id="urlClearButton"
@@ -162,13 +162,14 @@ function onToggleProviders(event) {
                 >
                     <FontAwesomeIcon :icon="['fas', 'times-circle']" />
                 </button>
+                <!-- Connect button -->
                 <button
                     v-if="
                         // We use v-if instead of v-show here in order to have bootstrap handling
                         // the rounded corner correctly
-                        !capabilitiesParsed
+                        !capabilitiesParsed && url.length && isValidUrl(url)
                     "
-                    id="connectButton"
+                    id="urlConnectButton"
                     type="button"
                     class="btn btn-outline-secondary"
                     :class="{ 'url-input-dropdown-open': showProviders }"
@@ -186,7 +187,7 @@ function onToggleProviders(event) {
                 </button>
             </div>
             <div
-                v-if="errorMessage && !showProviders"
+                v-if="isInvalid && !showProviders"
                 id="urlInvalidMessageFeedback"
                 class="invalid-feedback"
             >
@@ -194,6 +195,7 @@ function onToggleProviders(event) {
             </div>
         </form>
         <ProviderList
+            id="urlProvidersList"
             ref="providerList"
             :providers="providers"
             :show-providers="showProviders"

From 0a919cc66a06fa203b279e42c292ddd2fb52ea24 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Mon, 11 Dec 2023 16:05:44 +0100
Subject: [PATCH 16/17] BGDIINF_SB-3194: Swap checkbox and toggle children in
 catalogue tree

---
 .../menu/components/LayerCatalogueItem.vue    | 28 +++++++++----------
 .../menu/components/LayerLegendPopup.vue      |  2 +-
 src/setup-fontawesome.js                      |  4 +++
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 06345d2e8..0d5d25452 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -4,7 +4,7 @@
  * layers or a single layer.
  */
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -116,19 +116,6 @@ function zoomToLayer() {
             @click="onItemClick"
             @mouseenter="startLayerPreview"
         >
-            <button
-                v-if="hasChildren"
-                class="btn btn-rounded"
-                :class="{
-                    'btn-lg': !compact,
-                }"
-                @click.stop="onCollapseClick"
-            >
-                <FontAwesomeLayers>
-                    <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
-                    <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
-                </FontAwesomeLayers>
-            </button>
             <button
                 v-if="canBeAddedToTheMap"
                 class="btn"
@@ -146,6 +133,19 @@ function zoomToLayer() {
                     }`"
                 />
             </button>
+            <button
+                v-if="hasChildren"
+                class="btn btn-rounded"
+                :class="{
+                    'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
+                    'btn-lg': !compact,
+                }"
+                @click.stop="onCollapseClick"
+            >
+                <!-- TODO change to the regular icons once we have bought fontawesome fonts -->
+                <FontAwesomeIcon :icon="['fas', showChildren ? 'circle-minus' : 'circle-plus']" />
+            </button>
+
             <span
                 class="menu-catalogue-item-name"
                 :class="{ 'text-primary': isPresentInActiveLayers || isCurrentlyHidden }"
diff --git a/src/modules/menu/components/LayerLegendPopup.vue b/src/modules/menu/components/LayerLegendPopup.vue
index e18b32775..2eb87b52c 100644
--- a/src/modules/menu/components/LayerLegendPopup.vue
+++ b/src/modules/menu/components/LayerLegendPopup.vue
@@ -53,7 +53,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <ModalWithBackdrop :title="title" :allow-print="true" @close="emit('close', layerId)">
+    <ModalWithBackdrop :title="title" :allow-print="true" fluid @close="emit('close', layerId)">
         <div class="layer-legend" data-cy="layer-legend-popup">
             <h4 v-if="!isExternal && !htmlContent" class="mb-0">
                 <font-awesome-icon spin :icon="['fa', 'spinner']" />
diff --git a/src/setup-fontawesome.js b/src/setup-fontawesome.js
index c6df66e26..ca7bf916b 100644
--- a/src/setup-fontawesome.js
+++ b/src/setup-fontawesome.js
@@ -23,6 +23,8 @@ import {
     faChevronUp,
     faCircle,
     faCircleChevronRight,
+    faCircleMinus,
+    faCirclePlus,
     faClockRotateLeft,
     faCog,
     faCube,
@@ -116,6 +118,8 @@ library.add(
     faXmark,
     faSortAlphaUp,
     faSortAlphaDown,
+    faCirclePlus,
+    faCircleMinus,
     // Regular
     faCheckSquare,
     faClock,

From 067e95a4e30d5d3314809335f1f44560a7943135 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Tue, 12 Dec 2023 11:42:23 +0100
Subject: [PATCH 17/17] Fix e2e test

---
 tests/e2e-cypress/integration/importTool.cy.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/e2e-cypress/integration/importTool.cy.js b/tests/e2e-cypress/integration/importTool.cy.js
index b7de49509..514e54bd7 100644
--- a/tests/e2e-cypress/integration/importTool.cy.js
+++ b/tests/e2e-cypress/integration/importTool.cy.js
@@ -69,7 +69,6 @@ describe('The Import Maps Tool', () => {
             .children()
             .contains('https://wms.geo.admin.ch')
             .click()
-        cy.get('[data-cy="import-connect-button"]').click()
         cy.wait('@wms-get-capabilities')
         // TODO test add layer
         // cy.get('[data-cy="import-add-layer-button"]').scrollIntoView()