PB-2027: fix code so that marker/text test passes

simplifying a bit the useFieldValidation composable, and trying to maintain reactivity of props given there, even if it is two components down (EmailInput calls TextInput which calls useFieldValidation)

Author: pakb

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

@@ -17,8 +17,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)
 
@@ -117,14 +117,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/store/modules/drawing/actions/closeDrawing.ts

@@ -41,7 +41,6 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
             await debounceSaveDrawing({ debounceTime: 0, retryOnError: false })
         }
 
-
         if (this.layer.config) {
             // flagging the layer as not edited anymore (not displayed on the map by the drawing module anymore)
             if (!this.online) {
@@ -62,13 +61,7 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
 
             delete this.layer.config
         }
-        this.toggleDrawingOverlay(
-            {
-                show: false,
-            },
-            dispatcher
-        )
-
+        this.overlay.show = false
         this.edit.featureType = undefined
         this.layer.ol?.getSource()?.clear()
 

packages/viewer/src/utils/components/EmailInput.vue

@@ -6,104 +6,100 @@ import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
 import { useFieldValidation } from '@/utils/composables/useFieldValidation'
 import { isValidEmail } from '@/utils/utils'
 
-const props = withDefaults(defineProps<{
-    /** Label to add above the field */
-    label?: string
-    /** Description to add below the input */
-    description?: string
-    /** Mark the field as disable */
-    disabled?: boolean
-    /**
-     * Placeholder text
-     *
-     * NOTE: this should be a translation key
-     */
-    placeholder?: string
-    /** Field is required and will be marked as invalid if empty */
-    required?: boolean
-    /**
-     * Mark the field as valid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    validMarker?: boolean | undefined
-    /**
-     * Valid message Message that will be added in green below the field once the validation has
-     * been done and the field is valid.
-     */
-    validMessage?: string
-    /**
-     * Mark the field as invalid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    invalidMarker?: boolean | undefined
-    /**
-     * Invalid message Message that will be added in red below the field once the validation has
-     * been done and the field is invalid.
-     *
-     * NOTE: this message is overwritten if the internal validation failed (not allow file type or
-     * file too big or required empty file)
-     */
-    invalidMessage?: string
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
-    /**
-     * Validate function to run when the input changes The function should return an object of type
-     * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
-     * translation key.
-     *
-     * NOTE: this function is called each time the field is modified
-     */
-    validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
-    dataCy?: string
-}>(), {
-    validMarker: undefined,
-    invalidMarker: undefined,
-})
+const props = withDefaults(
+    defineProps<{
+        /** Label to add above the field */
+        label?: string
+        /** Description to add below the input */
+        description?: string
+        /** Mark the field as disable */
+        disabled?: boolean
+        /**
+         * Placeholder text
+         *
+         * NOTE: this should be a translation key
+         */
+        placeholder?: string
+        /** Field is required and will be marked as invalid if empty */
+        required?: boolean
+        /**
+         * Mark the field as valid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        validMarker?: boolean | undefined
+        /**
+         * Valid message Message that will be added in green below the field once the validation has
+         * been done and the field is valid.
+         */
+        validMessage?: string
+        /**
+         * Mark the field as invalid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        invalidMarker?: boolean | undefined
+        /**
+         * Invalid message Message that will be added in red below the field once the validation has
+         * been done and the field is invalid.
+         *
+         * NOTE: this message is overwritten if the internal validation failed (not allow file type
+         * or file too big or required empty file)
+         */
+        invalidMessage?: string
+        /**
+         * Mark the field has validated.
+         *
+         * As long as the flag is false, no validation is run and no validation marks are set. Also
+         * the props is-invalid and is-valid are ignored.
+         */
+        activateValidation?: boolean
+        /**
+         * Validate function to run when the input changes The function should return an object of
+         * type `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
+         * translation key.
+         *
+         * NOTE: this function is called each time the field is modified
+         */
+        validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
+        dataCy?: string
+    }>(),
+    {
+        validMarker: undefined,
+        invalidMarker: undefined,
+    }
+)
 
-const {
-    label,
-    description,
-    disabled,
-    placeholder,
-    dataCy,
-} = toRefs(props)
+const { label, description, disabled, placeholder, dataCy } = toRefs(props)
 
 const inputEmailId = useComponentUniqueId('email-input')
 
 const model = defineModel<string>({ default: '' })
-const emits = defineEmits(['change', 'validate', 'focusin', 'focusout', 'keydown.enter'])
+const emits = defineEmits<{
+    change: [void]
+    validate: [isValid: boolean]
+    focusin: [void]
+    focusout: [void]
+    'keydown.enter': [void]
+}>()
 const { t } = useI18n()
 
 const {
     value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
-    required: computedRequired,
     onFocus,
-} = useFieldValidation(
-    props,
-    model,
-    emits as (_event: string, ..._args: unknown[]) => void,
-    {
-        customValidate: validateEmail,
-        requiredInvalidMessage: 'no_email',
-    }
-)
+} = useFieldValidation(props, model, emits, {
+    customValidate: validateEmail,
+    requiredInvalidMessage: 'no_email',
+})
 
 const emailInputElement = useTemplateRef<HTMLInputElement>('emailInputElement')
 
@@ -129,7 +125,7 @@ defineExpose({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="inputEmailId"
             data-cy="email-input-label"
         >
@@ -146,7 +142,7 @@ defineExpose({ focus })
             }"
             type="email"
             class="form-control"
-            :required="computedRequired"
+            :required="required"
             :placeholder="placeholder ? t(placeholder) : ''"
             data-cy="email-input"
             @focusin="onFocus($event, true)"
@@ -161,11 +157,11 @@ defineExpose({ focus })
             {{ t(computedInvalidMessage) }}
         </div>
         <div
-            v-if="computedValidMessage"
+            v-if="validMessage"
             class="valid-feedback"
             data-cy="email-input-valid-feedback"
         >
-            {{ t(computedValidMessage) }}
+            {{ t(validMessage) }}
         </div>
         <div
             v-if="description"

packages/viewer/src/utils/components/FileInput.vue

@@ -115,7 +115,7 @@ const inputFileId = useComponentUniqueId('file-input')
 const { t } = useI18n()
 const model = defineModel<File | undefined>({ default: undefined })
 const emits = defineEmits<{
-    change: []
+    change: [void]
     validate: [isValid: boolean]
 }>()
 
@@ -161,23 +161,11 @@ const {
     value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
-} = useFieldValidation<File>(
-    validationProps,
-    model,
-    (event: string, ...args: unknown[]) => {
-        if (event === 'change') {
-            emits('change')
-        } else if (event === 'validate') {
-            emits('validate', args[0] as boolean)
-        }
-    },
-    {
-        customValidate: validateFile,
-        requiredInvalidMessage: 'no_file',
-    }
-)
+} = useFieldValidation<File>(validationProps, model, emits, {
+    customValidate: validateFile,
+    requiredInvalidMessage: 'no_file',
+})
 
 const filePathInfo = computed(() =>
     value.value ? `${value.value.name}, ${value.value.size / 1000} kb` : ''
@@ -254,11 +242,11 @@ function onFileSelected(evt: Event): void {
                 }}
             </div>
             <div
-                v-if="computedValidMessage"
+                v-if="validMessage"
                 class="valid-feedback"
                 data-cy="file-input-valid-feedback"
             >
-                {{ t(computedValidMessage) }}
+                {{ t(validMessage) }}
             </div>
         </div>
         <div