Merge pull request #1060 from geoadmin/feat-pb-900-local-kml-cannot-s…

…hare

PB-900: Add no shared icon and text

src/modules/map/components/footer/MapFooterAttributionList.vue

@@ -6,6 +6,7 @@
                 v-if="source.hasDataDisclaimer"
                 :source-name="source.name"
                 :complete-disclaimer-on-click="!source.url"
+                :is-external-data-local="source.isExternalDataLocal"
             >
                 <MapFooterAttributionItem
                     :source-id="source.id"
@@ -40,7 +41,7 @@ export default {
             layersConfig: (state) => state.layers.config,
             currentBackgroundLayer: (state) => state.layers.currentBackgroundLayer,
         }),
-        ...mapGetters(['visibleLayers', 'hasDataDisclaimer']),
+        ...mapGetters(['visibleLayers', 'hasDataDisclaimer', 'isLocalFile']),
         layers() {
             const layers = []
             // when the background is void, we receive `undefined` here
@@ -62,6 +63,7 @@ export default {
                                 name: attribution.name,
                                 url: attribution.url,
                                 hasDataDisclaimer: this.hasDataDisclaimer(layer.id),
+                                isExternalDataLocal: this.isLocalFile(layer),
                             }
                         })
                     })

src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue

@@ -63,9 +63,9 @@ useTippyTooltip('.menu-layer-item [data-tippy-content]')
 const layerUpButton = ref(null)
 const layerDownButton = ref(null)
 const transparencySlider = ref(null)
-
-const hasDataDisclaimer = computed(() => store.getters.hasDataDisclaimer(id.value))
 const id = computed(() => layer.value.id)
+const isLocalFile = computed(() => store.getters.isLocalFile(layer.value))
+const hasDataDisclaimer = computed(() => store.getters.hasDataDisclaimer(id.value))
 const attributionName = computed(() =>
     layer.value.attributions.map((attribution) => attribution.name).join(', ')
 )
@@ -193,12 +193,19 @@ function duplicateLayer() {
                 v-if="hasDataDisclaimer"
                 :complete-disclaimer-on-click="true"
                 :source-name="attributionName"
+                :is-local-file="isLocalFile"
             >
                 <FontAwesomeIcon
-                    ref="tooltipAnchor"
-                    class="data-disclaimer-tooltip text-primary p-2"
-                    icon="user"
-                    data-cy="menu-external-disclaimer-icon"
+                    v-if="!isLocalFile"
+                    class="data-disclaimer-tooltip text-primary"
+                    icon="cloud"
+                    data-cy="menu-external-disclaimer-icon-cloud"
+                />
+                <FontAwesomeIcon
+                    v-else
+                    class="data-disclaimer-tooltip text-secondary"
+                    icon="hard-drive"
+                    data-cy="menu-external-disclaimer-icon-hard-drive"
                 />
             </ThirdPartyDisclaimer>
             <button

src/modules/menu/components/share/MenuShareEmbed.vue

@@ -12,6 +12,7 @@ import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTrans
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import { IFRAME_EVENTS } from '@/api/iframeFeatureEvent.api'
 import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
@@ -62,6 +63,7 @@ const copied = ref(false)
 
 const { t } = useI18n()
 const route = useRoute()
+const store = useStore()
 
 const embedSource = ref(transformUrlMapToEmbed(window.location.href))
 const embedPreviewModalWidth = computed(() => {
@@ -106,6 +108,8 @@ const buttonIcon = computed(() => {
     return ['far', 'copy']
 })
 
+const hasAnyLocalFile = computed(() => store.getters.hasAnyLocalFile())
+
 function toggleEmbedSharing() {
     showEmbedSharing.value = !showEmbedSharing.value
     // because of the dropdown animation, we have to wait for the next render
@@ -295,7 +299,23 @@ watch(
                 </div>
                 <!-- eslint-disable vue/no-v-html-->
                 <div class="small text-wrap text-center" v-html="t('share_disclaimer')"></div>
-                <!-- eslint-enable vue/no-v-html-->
+                <div
+                    v-if="hasAnyLocalFile"
+                    class="d-flex flex-row gap-2 justify-content-center mt-2"
+                    data-cy="warn-share-local-file-container"
+                >
+                    <FontAwesomeIcon
+                        class="data-disclaimer-tooltip text-warning align-self-center"
+                        icon="circle-exclamation"
+                        data-cy="menu-external-disclaimer-icon-cloud"
+                    />
+                    <div
+                        class="small text-wrap text-center"
+                        data-cy="warn-share-local-file"
+                        v-html="t('warn_share_local_file')"
+                    ></div>
+                </div>
+                <!-- eslint-enable vue/no-v-html -->
             </div>
         </ModalWithBackdrop>
     </div>

src/scss/tippy-theme.scss

@@ -25,6 +25,7 @@
 @include createTippyTheme('danger', $danger, $white);
 @include createTippyTheme('primary', $primary, $white);
 @include createTippyTheme('dark', $gray-800, $white);
+@include createTippyTheme('secondary', $secondary, $white);
 
 .tippy-box[data-theme~='popover-button'] {
     border-radius: 0.375rem;

src/setup-fontawesome.js

@@ -34,6 +34,7 @@ import {
     faCircleMinus,
     faCirclePlus,
     faClockRotateLeft,
+    faCloud,
     faCog,
     faCube,
     faDownload,
@@ -45,6 +46,7 @@ import {
     faFont,
     faGlobe,
     faGripLinesVertical,
+    faHardDrive,
     faHouse,
     faImage,
     faInfoCircle,
@@ -76,7 +78,6 @@ import {
     faTimes,
     faTimesCircle,
     faTree,
-    faUser,
     faWindowMaximize,
     faWindowMinimize,
     faXmark,
@@ -107,6 +108,7 @@ library.add(
     faChevronLeft,
     faChevronUp,
     faClockRotateLeft,
+    faCloud,
     faCog,
     faCube,
     faDownload,
@@ -118,6 +120,7 @@ library.add(
     faFont,
     faGlobe,
     faGripLinesVertical,
+    faHardDrive,
     faHouse,
     faInfoCircle,
     faLink,
@@ -147,7 +150,6 @@ library.add(
     faTimes,
     faTimesCircle,
     faTree,
-    faUser,
     faWindowMaximize,
     faWindowMinimize,
     faXmark,

src/store/modules/layers.store.js

@@ -213,6 +213,36 @@ const getters = {
         const layer = state.activeLayers.find((layer) => layer.id === layerId)
         return layer?.isExternal || (layer?.type === LayerTypes.KML && !layer?.adminId)
     },
+
+    /**
+     * Returns true if the layer comes from a third party (external layer or KML layer) which has
+     * been imported from a local file.
+     *
+     * KML layer are treated as external when they are generated by another user (no adminId).
+     *
+     * @param {AbstractLayer | null} layer Layer to check for data disclaimer
+     * @returns {Boolean}
+     */
+    isLocalFile: () => (layer) => {
+        if (!layer) return false
+        const isBaseUrlValidUrl = /^\w+:\/\//.test(layer?.baseUrl)
+        return (
+            !isBaseUrlValidUrl &&
+            (layer?.isExternal || (layer?.type === LayerTypes.KML && !layer?.adminId))
+        )
+    },
+
+    /**
+     * Returns true if any layer comes from a third party (external layer or KML layer) which has
+     * been imported from a local file.
+     *
+     * KML layer are treated as external when they are generated by another user (no adminId).
+     *
+     * @returns {Boolean}
+     */
+    hasAnyLocalFile: (state, getters) => () => {
+        return state.activeLayers.some((layer) => getters.isLocalFile(layer))
+    },
 }
 
 const actions = {

src/utils/components/ThirdPartyDisclaimer.vue

@@ -39,6 +39,10 @@ export default {
             type: String,
             default: '',
         },
+        isLocalFile: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -50,7 +54,9 @@ export default {
             currentLang: (state) => state.i18n.lang,
         }),
         tooltipContent() {
-            return this.$t('external_data_tooltip')
+            return this.isExternalDataLocal
+                ? this.$t('warn_share_local_file')
+                : this.$t('external_data_tooltip')
         },
     },
     watch: {
@@ -61,14 +67,19 @@ export default {
     mounted() {
         if (this.showTippy) {
             this.tippyInstance = tippy(this.$refs.tippyAnchor, {
-                theme: 'primary',
+                theme: this.isExternalDataLocal ? 'secondary' : 'primary',
                 content: this.tooltipContent,
                 arrow: true,
                 placement: 'top',
                 touch: false,
                 delay: 250,
                 onCreate: (instance) => {
-                    instance.popper.setAttribute('data-cy', `tippy-third-part-disclaimer`)
+                    instance.popper.setAttribute(
+                        'data-cy',
+                        this.isExternalDataLocal
+                            ? `tippy-warn-share-local-file`
+                            : `tippy-third-part-disclaimer`
+                    )
                 },
             })
         }

tests/cypress/tests-e2e/importToolFile.cy.js

@@ -164,25 +164,34 @@ describe('The Import File Tool', () => {
             .children()
             .should('have.length', 4)
             .each(($layer, index) => {
-                cy.wrap($layer)
-                    .find('[data-cy="menu-external-disclaimer-icon"]')
-                    .should('be.visible')
                 cy.wrap($layer).find('[data-cy^="button-error-"]').should('not.exist')
                 cy.wrap($layer)
                     .find('[data-cy^="button-loading-metadata-spinner-"]')
                     .should('not.exist')
                 switch (index) {
                     case 0:
                         cy.wrap($layer).contains('Line accross europe')
+                        cy.wrap($layer)
+                            .find('[data-cy="menu-external-disclaimer-icon-hard-drive"]')
+                            .should('be.visible')
                         break
                     case 1:
                         cy.wrap($layer).contains('Sample Placemark')
+                        cy.wrap($layer)
+                            .find('[data-cy="menu-external-disclaimer-icon-hard-drive"]')
+                            .should('be.visible')
                         break
                     case 2:
                         cy.wrap($layer).contains('Another KML')
+                        cy.wrap($layer)
+                            .find('[data-cy="menu-external-disclaimer-icon-cloud"]')
+                            .should('be.visible')
                         break
                     case 3:
                         cy.wrap($layer).contains('Sample Placemark')
+                        cy.wrap($layer)
+                            .find('[data-cy="menu-external-disclaimer-icon-cloud"]')
+                            .should('be.visible')
                         break
                 }
             })
@@ -192,8 +201,8 @@ describe('The Import File Tool', () => {
         cy.log('Test the external layer disclaimer')
         cy.get('[data-cy="menu-section-active-layers"]')
             .children()
+            .find('[data-cy="menu-external-disclaimer-icon-hard-drive"]:visible')
             .first()
-            .find('[data-cy="menu-external-disclaimer-icon"]:visible')
             .click()
         cy.get('[data-cy="modal-content"]')
             .should('be.visible')
@@ -306,7 +315,7 @@ describe('The Import File Tool', () => {
             .should('have.length', 3)
             .each(($layer, index) => {
                 cy.wrap($layer)
-                    .find('[data-cy="menu-external-disclaimer-icon"]')
+                    .find('[data-cy="menu-external-disclaimer-icon-cloud"]')
                     .should('be.visible')
                 cy.wrap($layer).find('[data-cy^="button-error-"]').should('be.visible').click()
                 if (index === 0) {

tests/cypress/tests-e2e/importToolMaps.cy.js

@@ -334,7 +334,7 @@ describe('The Import Maps Tool', () => {
         //---------------------------------------------------------------------
         cy.log('Check layer map attribution')
         cy.get('[data-cy="menu-active-layers"]').should('be.visible').click()
-        cy.get('[data-cy="menu-external-disclaimer-icon"]')
+        cy.get('[data-cy="menu-external-disclaimer-icon-cloud"]')
             .should('have.length', 3)
             .first()
             .should('be.visible')
@@ -480,7 +480,7 @@ describe('The Import Maps Tool', () => {
         //---------------------------------------------------------------------
         cy.log('Check layer map attribution')
         cy.get('[data-cy="menu-active-layers"]').should('be.visible').click()
-        cy.get('[data-cy="menu-external-disclaimer-icon"]')
+        cy.get('[data-cy="menu-external-disclaimer-icon-cloud"]')
             .should('have.length', 2)
             .first()
             .should('be.visible')

tests/cypress/tests-e2e/layers.cy.js

@@ -291,7 +291,7 @@ describe('Test of layer handling', () => {
                 cy.openMenuIfMobile()
                 cy.get(`[data-cy^="menu-active-layer-"]`).each(($el) => {
                     cy.wrap($el)
-                        .get('[data-cy="menu-external-disclaimer-icon"]')
+                        .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                         .should('be.visible')
                 })
                 cy.get('[data-cy^="menu-active-layer-"]').eq(0).should('contain', fakeWmsLayerName4)
@@ -450,7 +450,7 @@ describe('Test of layer handling', () => {
                     .should('contain', fakeWmtsLayerName1)
                 cy.get('[data-cy^="menu-active-layer-"]').each(($layer) => {
                     cy.wrap($layer)
-                        .get('[data-cy="menu-external-disclaimer-icon"]')
+                        .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                         .should('be.visible')
                 })
 
@@ -489,7 +489,7 @@ describe('Test of layer handling', () => {
                     .should('contain', fakeWmtsLayerName1)
                 cy.get('[data-cy^="menu-active-layer-"]').each(($layer) => {
                     cy.wrap($layer)
-                        .get('[data-cy="menu-external-disclaimer-icon"]')
+                        .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                         .should('be.visible')
                 })
                 cy.checkOlLayer([
@@ -570,7 +570,7 @@ describe('Test of layer handling', () => {
                     expect(externaLayer.isLoading).to.be.false
                 })
                 cy.get(`[data-cy^="menu-active-layer-${wmtsUnreachableLayerId}-"]`)
-                    .get('[data-cy="menu-external-disclaimer-icon"]')
+                    .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                     .should('be.visible')
                 cy.get(`[data-cy^="button-error-${wmtsUnreachableLayerId}-"]`)
                     .should('be.visible')
@@ -591,7 +591,7 @@ describe('Test of layer handling', () => {
                     expect(externaLayer.isLoading).to.be.false
                 })
                 cy.get(`[data-cy^="menu-active-layer-${wmtsInvalidContentLayerId}-"]`)
-                    .get('[data-cy="menu-external-disclaimer-icon"]')
+                    .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                     .should('be.visible')
                 cy.get(`[data-cy^="button-error-${wmtsInvalidContentLayerId}-"]`)
                     .should('be.visible')
@@ -612,7 +612,7 @@ describe('Test of layer handling', () => {
                     expect(externaLayer.isLoading).to.be.false
                 })
                 cy.get(`[data-cy^="menu-active-layer-${wmsUnreachableLayerId}-"]`)
-                    .get('[data-cy="menu-external-disclaimer-icon"]')
+                    .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                     .should('be.visible')
                 cy.get(`[data-cy^="button-error-${wmsUnreachableLayerId}-"]`)
                     .should('be.visible')
@@ -633,7 +633,7 @@ describe('Test of layer handling', () => {
                     expect(externaLayer.isLoading).to.be.false
                 })
                 cy.get(`[data-cy^="menu-active-layer-${wmsInvalidContentLayerId}-"]`)
-                    .get('[data-cy="menu-external-disclaimer-icon"]')
+                    .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                     .should('be.visible')
                 cy.get(`[data-cy^="button-error-${wmsInvalidContentLayerId}-"]`)
                     .should('be.visible')
@@ -1234,7 +1234,7 @@ describe('Test of layer handling', () => {
                 goToMenuWithLayers()
                 visibleLayerIds.forEach((id) => {
                     cy.get(`[data-cy^="menu-active-layer-${id}-"]`)
-                        .get('[data-cy="menu-external-disclaimer-icon"]')
+                        .get('[data-cy="menu-external-disclaimer-icon-cloud"]')
                         .should('not.exist')
                 })
             })