use altText to handle state error on image input (#1197)

use altText to handle state error on image input

Author: Guillaume-d-o

libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -1184,25 +1184,27 @@ export function writeGraphicOverviews(
     findOrCreateIdentification(),
     removeChildrenByName('gmd:graphicOverview'),
     appendChildren(
-      ...record.overviews.map((overview) =>
-        pipe(
-          createNestedElement('gmd:graphicOverview', 'gmd:MD_BrowseGraphic'),
-          appendChildren(
-            pipe(
-              createElement('gmd:fileName'),
-              writeCharacterString(overview.url.toString())
-            )
-          ),
-          'description' in overview
-            ? appendChildren(
-                pipe(
-                  createElement('gmd:fileDescription'),
-                  writeCharacterString(overview.description)
-                )
+      ...record.overviews
+        .filter((overview) => overview.url)
+        .map((overview) =>
+          pipe(
+            createNestedElement('gmd:graphicOverview', 'gmd:MD_BrowseGraphic'),
+            appendChildren(
+              pipe(
+                createElement('gmd:fileName'),
+                writeCharacterString(overview.url.toString())
               )
-            : noop
+            ),
+            'description' in overview
+              ? appendChildren(
+                  pipe(
+                    createElement('gmd:fileDescription'),
+                    writeCharacterString(overview.description)
+                  )
+                )
+              : noop
+          )
         )
-      )
     )
   )(rootEl)
 }

libs/ui/elements/src/lib/image-input/image-input.component.spec.ts

@@ -157,4 +157,61 @@ describe('ImageInputComponent', () => {
       }, 0)
     }))
   })
+
+  describe('reinitialize errors at dataset rollback', () => {
+    beforeEach(() => {
+      component.maxSizeMB = 1
+    })
+
+    it('should emit KO as altText when downloading invalid url and reset errors when dataset is rollback', waitForAsync(() => {
+      jest.spyOn(component.altTextChange, 'emit')
+      const nonImageFile = new File([], 'test.txt', { type: 'text/plain' })
+      component.handleDropFiles([nonImageFile])
+      expect(component.altTextChange.emit).toHaveBeenCalledWith('KO')
+      component.altText = 'KO' // Simulate setting altText to KO by the parent component
+      expect(component.imageFileError).toBe(true)
+
+      // Simulate component reset ( dataset rollback )
+      component.altText = null
+
+      expect(component.uploadError).toBe(false)
+      expect(component.imageFileError).toBe(false)
+    }))
+
+    it('should emit KO as altText when downloading 404 url and reset errors when dataset is rollback', waitForAsync(async () => {
+      jest.spyOn(component.altTextChange, 'emit')
+
+      const downloadPromise = component.downloadUrl(
+        'http://test.com/invalid.png'
+      )
+
+      const reqHead = httpTestingController.expectOne(
+        'http://test.com/invalid.png'
+      )
+      expect(reqHead.request.method).toEqual('HEAD')
+
+      const responseHeaders = new HttpHeaders()
+        .set('content-type', 'image/png')
+        .set('content-length', '1048575')
+      reqHead.flush(null, {
+        headers: responseHeaders,
+        status: 404,
+        statusText: 'OK',
+      })
+
+      await downloadPromise //Await download promise to be resolve and finish emits
+
+      expect(component.altTextChange.emit).toHaveBeenCalledWith('KO')
+      component.altText = 'KO' // Simulate setting altText to KO by the parent component
+      expect(component.imageFileError).toBe(true)
+
+      // Simulate component reset ( dataset rollback )
+      component.altText = null
+
+      expect(component.uploadError).toBe(false)
+      expect(component.imageFileError).toBe(false)
+
+      httpTestingController.verify()
+    }))
+  })
 })

libs/ui/elements/src/lib/image-input/image-input.component.ts

@@ -66,9 +66,22 @@ import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-ove
   ],
 })
 export class ImageInputComponent {
-  @Input() maxSizeMB: number
+  private _altText?: string
+
   @Input() previewUrl?: string
-  @Input() altText?: string
+  @Input()
+  get altText(): string | undefined {
+    return this._altText
+  }
+  set altText(value: string | undefined) {
+    if (value !== 'KO' && this._altText === 'KO') {
+      //This is a dataset rollback after upload error
+      this.resetErrors()
+    }
+    this._altText = value
+  }
+
+  @Input() maxSizeMB: number
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
   @Input() disabled?: boolean = false
@@ -132,6 +145,7 @@ export class ImageInputComponent {
       this.resizeAndEmit(validFiles[0])
     } else {
       this.imageFileError = true
+      this.handleAltTextChange('KO')
     }
   }
 
@@ -143,6 +157,7 @@ export class ImageInputComponent {
       this.resizeAndEmit(validFiles[0])
     } else {
       this.imageFileError = true
+      this.handleAltTextChange('KO')
     }
   }
 
@@ -171,13 +186,15 @@ export class ImageInputComponent {
           },
           error: () => {
             this.imageFileError = true
+            this.handleAltTextChange('KO')
             this.cd.markForCheck()
             this.urlChange.emit(url)
           },
         })
       }
     } catch {
       this.imageFileError = true
+      this.handleAltTextChange('KO')
       this.cd.markForCheck()
       return
     }