PB-2064: reportproblem cypress

packages/viewer/src/api/icon.api.ts

@@ -3,12 +3,7 @@ import axios from 'axios'
 import { fromString } from 'ol/color'
 
 import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
-import {
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    LARGE,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
 
 /**
  * Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
  *
  * @returns A full URL to this icon on the service-icons backend
  */
-export function generateIconURL(
-    icon: DrawingIcon,
-    iconColor: FeatureStyleColor = RED,
-    iconSize: FeatureStyleSize = LARGE
-) {
+export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
     const rgb = fromString(iconColor.fill)
-    return icon.imageTemplateURL
-        .replace('{icon_set_name}', icon.iconSetName)
-        .replace('{icon_name}', icon.name)
-        .replace('{icon_scale}', iconSize.iconScale + 'x')
-        .replace('{r}', `${rgb[0]}`)
-        .replace('{g}', `${rgb[1]}`)
-        .replace('{b}', `${rgb[2]}`)
+    return (
+        icon.imageTemplateURL
+            .replace('{icon_set_name}', icon.iconSetName)
+            .replace('{icon_name}', icon.name)
+            // we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
+            .replace('{icon_scale}', LARGE.iconScale + 'x')
+            .replace('{r}', `${rgb[0]}`)
+            .replace('{g}', `${rgb[1]}`)
+            .replace('{b}', `${rgb[2]}`)
+    )
 }
 
 /**

packages/viewer/src/modules/drawing/DrawingModule.vue

@@ -66,14 +66,6 @@ const { t } = useI18n()
 // Computed from stores
 const availableIconSets = computed(() => drawingStore.iconSets)
 
-// Equivalent of old showNotSharedDrawingWarning getter
-const showNotSharedDrawingWarning = computed(
-    () =>
-        drawingStore.isDrawingModified &&
-        !drawingStore.isDrawingEditShared &&
-        !drawingStore.isVisitWithAdminId
-)
-
 const selectedLineFeature = computed<EditableFeature | undefined>(() => {
     if (
         drawingStore.feature.current &&
@@ -180,7 +172,7 @@ onBeforeUnmount(() => {
 
 const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
     // Show alert when trying to close the tab, except during Cypress tests
-    if (!IS_TESTING_WITH_CYPRESS && showNotSharedDrawingWarning.value) {
+    if (!IS_TESTING_WITH_CYPRESS && drawingStore.showNotSharedDrawingWarning) {
         showNotSharedDrawingWarningModal.value = true
         event.preventDefault()
     }

packages/viewer/src/modules/drawing/components/DrawingToolbox.vue

@@ -2,7 +2,6 @@
 import type { SingleCoordinate } from '@swissgeo/coordinates'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import log from '@swissgeo/log'
 import GeoadminTooltip from '@swissgeo/tooltip'
 import DOMPurify from 'dompurify'
 import { computed, ref } from 'vue'
@@ -19,6 +18,7 @@ import ShareWarningPopup from '@/modules/drawing/components/ShareWarningPopup.vu
 import useDrawingStore from '@/store/modules/drawing'
 import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
 import { EditMode } from '@/store/modules/drawing/types/EditMode.enum'
+import { isOnlineMode } from '@/store/modules/drawing/utils/isOnlineMode'
 import useFeaturesStore from '@/store/modules/features'
 import useLayersStore from '@/store/modules/layers'
 import useUIStore from '@/store/modules/ui'
@@ -48,6 +48,7 @@ const showNoActiveKmlWarning = computed<boolean>(() => layersStore.activeKmlLaye
 const tooltipText = computed<string>(() =>
     t(showNoActiveKmlWarning.value ? 'drawing_empty_cannot_edit_name' : '')
 )
+
 const isDrawingLineOrMeasure = computed<boolean>(() => {
     return (
         !!drawingStore.edit.featureType &&
@@ -112,17 +113,12 @@ const drawingStateMessage = computed(() => {
             return undefined
     }
 })
-const online = computed(() => drawingStore.online)
+const online = computed(() => isOnlineMode(drawingStore.onlineMode, true))
 
 function onCloseClearConfirmation(confirmed: boolean) {
     showClearConfirmationModal.value = false
     if (confirmed) {
-        drawingStore.closeDrawing(dispatcher).catch((error) => {
-            log.error({
-                title: 'DrawingToolbox.vue',
-                messages: ['Error while closing drawing', error],
-            })
-        })
+        drawingStore.deleteCurrentDrawing(dispatcher)
     }
 }
 
@@ -373,6 +369,7 @@ $zindex-drawing-toolbox: -1;
     position: relative;
     z-index: $zindex-drawing-toolbox;
     transition: transform $animation-time;
+
     .button-open-close-draw-menu {
         height: $openCloseButtonHeight;
     }
@@ -397,6 +394,7 @@ $zindex-drawing-toolbox: -1;
     .drawing-toolbox {
         position: absolute;
         max-width: $menu-tray-width;
+
         .drawing-toolbox-content {
             transition: opacity $animation-time;
         }
@@ -419,4 +417,4 @@ $zindex-drawing-toolbox: -1;
         gap: 0.5rem 2rem;
     }
 }
-</style>
+</style>

packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue

@@ -2,8 +2,10 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import { MediaType } from '@/modules/infobox/DrawingStyleMediaTypes.enum'
-import TextInput, { type TextInputValidateResult } from '@/utils/components/TextInput.vue'
+import TextInput from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const { mediaType, urlLabel, descriptionLabel } = defineProps<{
@@ -17,8 +19,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const generatedMediaLink = ref<string | undefined>(undefined)
-const linkDescription = ref<string | undefined>(undefined)
+const generatedMediaLink = ref<string>()
+const linkDescription = ref<string>()
 const isFormValid = ref<boolean>(false)
 const activateValidation = ref<boolean>(false)
 
@@ -87,7 +89,7 @@ function validateForm(): boolean {
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult): void {
+function onUrlValidate(result: ValidationResult): void {
     isFormValid.value = result.valid
 }
 </script>
@@ -117,14 +119,14 @@ function onUrlValidate(result: TextInputValidateResult): void {
                 placeholder="paste_url"
                 :validate="validateUrl"
                 data-cy="drawing-style-media-url"
-                @keydown.enter="addLink()"
+                @keydown.enter="addLink"
                 @validate="onUrlValidate"
             >
                 <button
                     class="btn btn-default btn-outline-group rounded-0 rounded-end"
                     type="button"
                     data-cy="drawing-style-media-generate-button"
-                    @click="addLink()"
+                    @click="addLink"
                 >
                     {{ t('add') }}
                 </button>

packages/viewer/src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue

@@ -4,6 +4,8 @@ import { computed } from 'vue'
 import { useLayerZIndexCalculation } from '@/modules/map/components/common/z-index.composable'
 import OpenLayersInternalLayer from '@/modules/map/components/openlayers/OpenLayersInternalLayer.vue'
 import useDrawingStore from '@/store/modules/drawing'
+import { OnlineMode } from '@/store/modules/drawing/types/OnlineMode.enum'
+import { isOnlineMode } from '@/store/modules/drawing/utils/isOnlineMode'
 import useLayersStore from '@/store/modules/layers'
 
 const layersStore = useLayersStore()
@@ -13,17 +15,18 @@ const drawingStore = useDrawingStore()
 // it out in this case
 const filteredVisibleLayers = computed(() => {
     // In normal drawing mode show only the drawing layer
-    if (drawingStore.overlay.show && drawingStore.online && layersStore.activeKmlLayer) {
+    if (drawingStore.overlay.show && (drawingStore.onlineMode === OnlineMode.Online || drawingStore.onlineMode === OnlineMode.OnlineWhileOffline) && layersStore.activeKmlLayer) {
+    // if (drawingStore.overlay.show && drawingStore.online && layersStore.activeKmlLayer) {
         return layersStore.visibleLayers.filter(
             (layer) =>
                 layer.id !== layersStore.activeKmlLayer!.id &&
                 layer.id !== drawingStore.layer.temporaryKmlId
         )
     }
     // In report problem drawing mode show the drawing layer and the temporary layer
-    if (drawingStore.overlay.show && !drawingStore.online && drawingStore.layer.temporaryKmlId) {
+    if (drawingStore.overlay.show && !isOnlineMode(drawingStore.onlineMode, true) && drawingStore.layer.temporaryKmlId) {
         return layersStore.visibleLayers.filter(
-            (layer) => layer.id !== drawingStore.layer.temporaryKmlId
+            (layer) => layer.id !== `KML|${drawingStore.layer.temporaryKmlId}`
         )
     }
     return layersStore.visibleLayers

packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue

@@ -4,6 +4,8 @@ import type { ErrorMessage } from '@swissgeo/log/Message'
 import log from '@swissgeo/log'
 import { computed, ref } from 'vue'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
@@ -17,12 +19,12 @@ const { active = false } = defineProps<{
     active?: boolean
 }>()
 
+const selectedFile = defineModel<File | undefined>({ default: undefined })
+
 // Reactive data
 const loadingFile = ref(false)
-const selectedFile = ref<File | undefined>()
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref(false)
-const activateValidation = ref(false)
 const importSuccessMessage = ref('')
 
 const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
@@ -31,7 +33,6 @@ const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
 async function loadFile() {
     importSuccessMessage.value = ''
     errorFileLoadingMessage.value = undefined
-    activateValidation.value = true
     loadingFile.value = true
 
     if (isFormValid.value && selectedFile.value) {
@@ -52,8 +53,8 @@ async function loadFile() {
     loadingFile.value = false
 }
 
-function validateForm(valid: boolean) {
-    isFormValid.value = valid
+function validateForm(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 </script>
 
@@ -74,8 +75,7 @@ function validateForm(valid: boolean) {
             required
             :accepted-file-types="acceptedFileTypes"
             :placeholder="'no_file'"
-            :activate-validation="activateValidation"
-            :invalid-marker="!!errorFileLoadingMessage"
+            :force-invalid="!!errorFileLoadingMessage"
             :invalid-message="errorFileLoadingMessage?.msg"
             :invalid-message-extra-params="errorFileLoadingMessage?.params"
             :valid-message="importSuccessMessage"

packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue

@@ -4,15 +4,13 @@ import { ErrorMessage, WarningMessage } from '@swissgeo/log/Message'
 import { type ComponentPublicInstance, computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import type { ActionDispatcher } from '@/store/types'
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
 
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
 import useUIStore from '@/store/modules/ui'
-import TextInput, {
-    type TextInputExposed,
-    type TextInputValidateResult,
-} from '@/utils/components/TextInput.vue'
+import TextInput, { type TextInputExposed } from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const dispatcher: ActionDispatcher = {
@@ -27,14 +25,14 @@ const uiStore = useUIStore()
 
 const { handleFileSource } = useImportFile()
 
-// Reactive data
+const fileUrl = defineModel<string>({ default: '' })
+
 const isLoading = ref<boolean>(false)
-const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
-const fileUrl = ref<string>('')
 const importSuccessMessage = ref<string>('')
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref<boolean>(false)
-const activateValidation = ref<boolean>(false)
+
+const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
 
 const buttonState = computed<'loading' | 'default'>(() => (isLoading.value ? 'loading' : 'default'))
 
@@ -54,9 +52,7 @@ onMounted(() => {
     }
 })
 
-// Methods
-
-function validateUrl(url?: string): TextInputValidateResult {
+function validateUrl(url?: string): ValidationResult {
     if (!url) {
         return { valid: false, invalidMessage: 'no_url' }
     } else if (!isValidUrl(url)) {
@@ -66,12 +62,11 @@ function validateUrl(url?: string): TextInputValidateResult {
 }
 
 function validateForm() {
-    activateValidation.value = true
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult) {
-    isFormValid.value = result.valid
+function onUrlValidate(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 
 function onUrlChange() {
@@ -132,8 +127,7 @@ async function loadFile() {
                 required
                 class="mb-2"
                 placeholder="import_file_url_placeholder"
-                :activate-validation="activateValidation"
-                :invalid-marker="!!errorFileLoadingMessage"
+                :force-invalid="!!errorFileLoadingMessage"
                 :invalid-message="errorFileLoadingMessage?.msg"
                 :invalid-message-params="errorFileLoadingMessage?.params"
                 :valid-message="importSuccessMessage"