From 1ba5f2ccfbd43c4752a711c3260a95fb7a36959f Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Thu, 3 Aug 2023 14:05:02 +0200
Subject: [PATCH 1/7] WIP : trying to send multiple images to gn ui thumbnail
 component

need to get rid of this multiple fit and fits inputs. find a better way to implement it
---
 .../lib/thumbnail/thumbnail.component.html    |  1 +
 .../src/lib/thumbnail/thumbnail.component.ts  | 43 ++++++++-----------
 .../record-preview-row.component.html         |  3 +-
 .../record-preview.component.ts               |  8 ++--
 4 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
index 7f6cb1b07c..623f82af64 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
@@ -14,5 +14,6 @@
     loading="lazy"
     (load)="setObjectFit()"
     [src]="imgUrl | safe: 'url'"
+    (error)="useFallback()"
   />
 </div>
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
index fbc3c5e171..3ab13d0f42 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -1,17 +1,14 @@
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Inject,
   InjectionToken,
   Input,
-  OnDestroy,
   Optional,
   ViewChild,
 } from '@angular/core'
-import { fromEvent, Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
@@ -25,18 +22,24 @@ const DEFAULT_PLACEHOLDER =
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ThumbnailComponent implements AfterViewInit, OnDestroy {
-  @Input() set thumbnailUrl(url: string) {
-    this.imgUrl = url || this.placeholderUrl
-    this.isPlaceholder = !url
+export class ThumbnailComponent {
+  @Input() set thumbnailUrl(url: string[]) {
+    // console.log([url])
+    this.urls = url
+    this.urls.push(this.placeholderUrl)
+    this.imgUrl = this.urls[0]
+    console.log(this.urls)
   }
   @Input() fit: 'cover' | 'contain' | 'scale-down' = 'cover'
+  @Input() fits: ('cover' | 'contain' | 'scale-down')[]
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
   imgUrl: string
+  urls: string[]
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
   sub: Subscription
+  index: number = 1
 
   get objectFit() {
     return this.isPlaceholder ? 'scale-down' : this.fit
@@ -45,26 +48,16 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
   constructor(
     @Optional()
     @Inject(THUMBNAIL_PLACEHOLDER)
-    private optionalPlaceholderUrl: string,
-    private changeDetector: ChangeDetectorRef
+    private optionalPlaceholderUrl: string
   ) {}
 
-  ngAfterViewInit() {
-    this.sub = fromEvent(this.imgElement.nativeElement, 'error').subscribe(() =>
-      this.useFallback()
-    )
-  }
-
-  ngOnDestroy() {
-    this.sub.unsubscribe()
-  }
-
   useFallback() {
-    if (!this.isPlaceholder) {
-      this.isPlaceholder = true
-      this.imgUrl = this.placeholderUrl
-      this.changeDetector.detectChanges()
-    }
+    if (this.index >= this.urls.length) return
+    let next = this.urls[this.index]
+    this.fit = this.fits[this.index] || 'cover'
+    this.imgUrl = next
+    this.index++
+    this.isPlaceholder = this.index === this.urls.length
   }
 
   setObjectFit() {
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
index d4bdc7f9c1..ba5aafd006 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
@@ -9,8 +9,9 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="record.thumbnailUrl || contact.logoUrl"
+        [thumbnailUrl]="[record.thumbnailUrl, contact.logoUrl]"
         [fit]="record.thumbnailUrl ? 'cover' : 'contain'"
+        [fits]="['cover', 'contain']"
       ></gn-ui-thumbnail>
     </div>
   </div>
diff --git a/libs/ui/search/src/lib/record-preview/record-preview.component.ts b/libs/ui/search/src/lib/record-preview/record-preview.component.ts
index 18cfe25ef7..66c2eb38a2 100644
--- a/libs/ui/search/src/lib/record-preview/record-preview.component.ts
+++ b/libs/ui/search/src/lib/record-preview/record-preview.component.ts
@@ -1,11 +1,11 @@
 import {
   Component,
-  Input,
-  Output,
+  ElementRef,
   EventEmitter,
-  OnInit,
+  Input,
   OnDestroy,
-  ElementRef,
+  OnInit,
+  Output,
   TemplateRef,
 } from '@angular/core'
 import {

From a947f19d66d5b4139b88a8e980ea127d7e1f7907 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Wed, 9 Aug 2023 10:54:17 +0200
Subject: [PATCH 2/7] Fix: Show org logo if thumbnail returns 404, show
 placeholder if also org log returns 404

---
 .../add-layer-record-preview.component.html   |  2 +-
 .../organisation-preview.component.html       |  3 +-
 .../related-record-card.component.html        |  2 +-
 .../lib/thumbnail/thumbnail.component.spec.ts | 48 +++++++++++++---
 .../src/lib/thumbnail/thumbnail.component.ts  | 55 ++++++++++++-------
 .../record-preview-card.component.html        |  2 +-
 .../record-preview-feed.component.html        |  4 +-
 .../record-preview-list.component.html        |  2 +-
 .../record-preview-row.component.html         |  4 +-
 .../record-preview-row.component.ts           | 12 ++++
 .../record-preview-title.component.html       |  2 +-
 11 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
index 7bf54ecf73..c4a6a10462 100644
--- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
+++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
@@ -1,7 +1,7 @@
 <div class="w-full flex flex-row rounded-sm" [title]="record.abstract">
   <gn-ui-thumbnail
     class="w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100"
-    [thumbnailUrl]="record.thumbnailUrl"
+    [images]="[{ url: record.thumbnailUrl }]"
   ></gn-ui-thumbnail>
 
   <div class="flex flex-col p-2 gap-2 overflow-hidden">
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
index 0f47314100..51e3427e1f 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -8,8 +8,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
-        [fit]="'contain'"
+        [images]="[{ url: organisation.logoUrl, objectFit: 'contain' }]"
       >
       </gn-ui-thumbnail>
     </div>
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
index 403db5c84b..ead50353f9 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.thumbnailUrl"
+      [images]="[{ url: record.thumbnailUrl }]"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
index b5aaef911f..896b7d706a 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
@@ -39,7 +39,7 @@ describe('ThumbnailComponent', () => {
     describe('When no url is given', () => {
       let img
       beforeEach(fakeAsync(() => {
-        component.thumbnailUrl = undefined
+        component.images = []
         fixture.detectChanges()
         img = de.query(By.css('img'))
         tick(10)
@@ -56,7 +56,7 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.thumbnailUrl = url
+        component.images = [{ url }]
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -77,8 +77,7 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.thumbnailUrl = url
-        component.fit = 'contain'
+        component.images = [{ url, objectFit: 'contain' }]
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -98,7 +97,7 @@ describe('ThumbnailComponent', () => {
   })
   describe('When different size of img are provided', () => {
     beforeEach(() => {
-      component.thumbnailUrl = 'http://test.com/img.png'
+      component.images = [{ url: 'http://test.com/img.png' }]
       fixture.detectChanges()
       Object.defineProperties(component.imgElement.nativeElement, {
         naturalWidth: {
@@ -145,7 +144,7 @@ describe('ThumbnailComponent', () => {
     let img
     beforeEach(() => {
       component.placeholderUrl = placeholderUrl
-      component.thumbnailUrl = undefined
+      component.images = []
       fixture.detectChanges()
       img = de.query(By.css('img'))
     })
@@ -161,7 +160,7 @@ describe('ThumbnailComponent', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.thumbnailUrl = url
+      component.images = [{ url }]
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
@@ -175,4 +174,39 @@ describe('ThumbnailComponent', () => {
       expect(img.nativeElement.style.objectFit).toEqual('scale-down')
     })
   })
+  describe('image url return 404', () => {
+    const url = 'http://test.com/img.png'
+    const orgLogoUrl = 'http://test.com./orgLogo.png'
+    const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
+    let img
+    beforeEach(() => {
+      component.images = [{ url }]
+      component.placeholderUrl = placeholderUrl
+      fixture.detectChanges()
+      img = de.query(By.css('img'))
+      img.nativeElement.dispatchEvent(new Event('error'))
+      fixture.detectChanges()
+    })
+
+    it('displays placeholder', () => {
+      expect(img.nativeElement.src).toEqual(placeholderUrl)
+    })
+    it('displays organisation logo if provided', () => {
+      component.images = [{ url }, { url: orgLogoUrl }]
+      fixture.detectChanges()
+      img = de.query(By.css('img'))
+      img.nativeElement.dispatchEvent(new Event('error'))
+      fixture.detectChanges()
+      expect(img.nativeElement.src).toEqual(orgLogoUrl)
+    })
+    describe('if organisation logo also return 404', () => {
+      beforeEach(() => {
+        img.nativeElement.dispatchEvent(new Event('error'))
+        fixture.detectChanges()
+      })
+      it('displays placeholder', () => {
+        expect(img.nativeElement.src).toEqual(placeholderUrl)
+      })
+    })
+  })
 })
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
index 3ab13d0f42..186dfd666f 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -1,4 +1,5 @@
 import {
+  OnInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -8,12 +9,16 @@ import {
   Optional,
   ViewChild,
 } from '@angular/core'
-import { Subscription } from 'rxjs'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+export type GnUiThumbnailImageObject = {
+  url: string
+  objectFit?: 'cover' | 'contain' | 'scale-down'
+}
+
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
@@ -22,24 +27,14 @@ const DEFAULT_PLACEHOLDER =
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ThumbnailComponent {
-  @Input() set thumbnailUrl(url: string[]) {
-    // console.log([url])
-    this.urls = url
-    this.urls.push(this.placeholderUrl)
-    this.imgUrl = this.urls[0]
-    console.log(this.urls)
-  }
-  @Input() fit: 'cover' | 'contain' | 'scale-down' = 'cover'
-  @Input() fits: ('cover' | 'contain' | 'scale-down')[]
+export class ThumbnailComponent implements OnInit {
+  @Input() images: GnUiThumbnailImageObject[]
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
-  imgUrl: string
-  urls: string[]
+  imgUrl = ''
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
-  sub: Subscription
-  index: number = 1
+  fit: 'cover' | 'contain' | 'scale-down' = 'cover'
 
   get objectFit() {
     return this.isPlaceholder ? 'scale-down' : this.fit
@@ -51,13 +46,31 @@ export class ThumbnailComponent {
     private optionalPlaceholderUrl: string
   ) {}
 
+  ngOnInit(): void {
+    if (this.images.length === 0) {
+      this.setPlaceholder()
+      return
+    }
+    this.setNewSrcImage(this.images[0])
+  }
+
+  private setNewSrcImage(image: GnUiThumbnailImageObject) {
+    this.fit = image.objectFit || 'cover'
+    this.imgUrl = image.url
+  }
+
+  private setPlaceholder(): void {
+    this.isPlaceholder = true
+    this.setNewSrcImage({ url: this.placeholderUrl, objectFit: 'scale-down' })
+  }
+
   useFallback() {
-    if (this.index >= this.urls.length) return
-    let next = this.urls[this.index]
-    this.fit = this.fits[this.index] || 'cover'
-    this.imgUrl = next
-    this.index++
-    this.isPlaceholder = this.index === this.urls.length
+    if (this.images.length > 1) {
+      this.images.shift()
+      this.setNewSrcImage(this.images[0])
+    } else {
+      this.setPlaceholder()
+    }
   }
 
   setObjectFit() {
diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
index 5a5cc17a91..181f4a87d0 100644
--- a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
+++ b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
@@ -9,7 +9,7 @@
     <div class="flex flex-col min-h-full">
       <gn-ui-thumbnail
         class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow p-4">
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
index e5d2ce6bd7..49ea4b4d9b 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -24,7 +24,7 @@
         >
         <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [thumbnailUrl]="contact.logoUrl"
+          [images]="[{ url: contact.logoUrl }]"
         ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">
@@ -61,7 +61,7 @@ <h1 class="font-title text-[21px] font-medium mb-3 pr-8">
       <gn-ui-thumbnail
         *ngIf="record.thumbnailUrl"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
         <mat-icon
diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
index dcd4b1cabd..3325750f1c 100644
--- a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
+++ b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
@@ -9,7 +9,7 @@
     <div class="h-full flex flex-row items-center shadow-sm">
       <gn-ui-thumbnail
         class="w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow h-full px-6 py-4 flex flex-col overflow-hidden">
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
index ba5aafd006..268ebef9b2 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
@@ -9,9 +9,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="[record.thumbnailUrl, contact.logoUrl]"
-        [fit]="record.thumbnailUrl ? 'cover' : 'contain'"
-        [fits]="['cover', 'contain']"
+        [images]="images"
       ></gn-ui-thumbnail>
     </div>
   </div>
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
index 556d6e1e20..f5eebb6ac0 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { GnUiThumbnailImageObject } from '@geonetwork-ui/ui/elements'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 
 @Component({
@@ -11,4 +12,15 @@ export class RecordPreviewRowComponent extends RecordPreviewComponent {
   constructor(protected elementRef: ElementRef) {
     super(elementRef)
   }
+
+  get images() {
+    const imagesArray: GnUiThumbnailImageObject[] = []
+    if (this.record.thumbnailUrl) {
+      imagesArray.push({ url: this.record.thumbnailUrl, objectFit: 'cover' })
+    }
+    if (this.contact.logoUrl) {
+      imagesArray.push({ url: this.contact.logoUrl, objectFit: 'contain' })
+    }
+    return imagesArray
+  }
 }
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
index 10aa15945b..b559e7cf8e 100644
--- a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
+++ b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
@@ -10,7 +10,7 @@
     <div class="h-full flex flex-row items-center">
       <gn-ui-thumbnail
         class="w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [thumbnailUrl]="record.thumbnailUrl"
+        [images]="[{ url: record.thumbnailUrl }]"
       ></gn-ui-thumbnail>
 
       <div class="grow px-3 py-1 flex flex-col overflow-hidden">

From bc7d4d2eedc4ce19df9853b2dc1bbf349c3ddcec Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Wed, 9 Aug 2023 11:12:22 +0200
Subject: [PATCH 3/7] Remove console.log

---
 libs/util/app-config/src/lib/app-config.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/libs/util/app-config/src/lib/app-config.ts b/libs/util/app-config/src/lib/app-config.ts
index 5013f66fe6..68644108ed 100644
--- a/libs/util/app-config/src/lib/app-config.ts
+++ b/libs/util/app-config/src/lib/app-config.ts
@@ -50,9 +50,6 @@ let customTranslations: CustomTranslationsAllLanguages = null
 
 export function getCustomTranslations(langCode: string): CustomTranslations {
   if (customTranslations === null) throw new Error(MISSING_CONFIG_ERROR)
-  console.log(
-    langCode in customTranslations ? customTranslations[langCode] : {}
-  )
   return langCode in customTranslations ? customTranslations[langCode] : {}
 }
 

From 51fc2caa321d468dc9578cb71df6b8a70ae7b5f7 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 10 Aug 2023 14:04:05 +0200
Subject: [PATCH 4/7] Fix using original array and mutation of it

---
 .../lib/thumbnail/thumbnail.component.spec.ts | 38 ++++++++++++-------
 .../src/lib/thumbnail/thumbnail.component.ts  | 12 +++---
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
index 896b7d706a..4b7f81f27d 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
@@ -174,32 +174,25 @@ describe('ThumbnailComponent', () => {
       expect(img.nativeElement.style.objectFit).toEqual('scale-down')
     })
   })
-  describe('image url return 404', () => {
+
+  describe('thumbnail image url returns 404 and organisation logo exists', () => {
     const url = 'http://test.com/img.png'
-    const orgLogoUrl = 'http://test.com./orgLogo.png'
+    const orgLogoUrl = 'http://test.com/orgLogo.png'
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.images = [{ url }]
+      component.images = [{ url }, { url: orgLogoUrl }]
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
       img.nativeElement.dispatchEvent(new Event('error'))
       fixture.detectChanges()
     })
-
-    it('displays placeholder', () => {
-      expect(img.nativeElement.src).toEqual(placeholderUrl)
-    })
-    it('displays organisation logo if provided', () => {
-      component.images = [{ url }, { url: orgLogoUrl }]
-      fixture.detectChanges()
-      img = de.query(By.css('img'))
-      img.nativeElement.dispatchEvent(new Event('error'))
-      fixture.detectChanges()
+    it('displays organisation logo', () => {
       expect(img.nativeElement.src).toEqual(orgLogoUrl)
     })
-    describe('if organisation logo also return 404', () => {
+
+    describe('if organisation logo also returns 404', () => {
       beforeEach(() => {
         img.nativeElement.dispatchEvent(new Event('error'))
         fixture.detectChanges()
@@ -209,4 +202,21 @@ describe('ThumbnailComponent', () => {
       })
     })
   })
+  describe('thumbnail image url returns 404 and no organisation logo', () => {
+    const url = 'http://test.com/img.png'
+    const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
+    let img
+    beforeEach(() => {
+      component.images = [{ url }]
+      component.placeholderUrl = placeholderUrl
+      fixture.detectChanges()
+      img = de.query(By.css('img'))
+      img.nativeElement.dispatchEvent(new Event('error'))
+      fixture.detectChanges()
+    })
+
+    it('displays placeholder', () => {
+      expect(img.nativeElement.src).toEqual(placeholderUrl)
+    })
+  })
 })
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
index 186dfd666f..f76a136b67 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -35,6 +35,7 @@ export class ThumbnailComponent implements OnInit {
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
   fit: 'cover' | 'contain' | 'scale-down' = 'cover'
+  imagesMutation = []
 
   get objectFit() {
     return this.isPlaceholder ? 'scale-down' : this.fit
@@ -47,11 +48,12 @@ export class ThumbnailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    if (this.images.length === 0) {
+    this.imagesMutation = [...this.images]
+    if (this.imagesMutation.length === 0) {
       this.setPlaceholder()
       return
     }
-    this.setNewSrcImage(this.images[0])
+    this.setNewSrcImage(this.imagesMutation[0])
   }
 
   private setNewSrcImage(image: GnUiThumbnailImageObject) {
@@ -65,9 +67,9 @@ export class ThumbnailComponent implements OnInit {
   }
 
   useFallback() {
-    if (this.images.length > 1) {
-      this.images.shift()
-      this.setNewSrcImage(this.images[0])
+    if (this.imagesMutation.length > 1) {
+      this.imagesMutation.shift()
+      this.setNewSrcImage(this.imagesMutation[0])
     } else {
       this.setPlaceholder()
     }

From d3ca78cc0713e8bc2d7a323e6270ad769ab7f413 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 10 Aug 2023 16:02:22 +0200
Subject: [PATCH 5/7] Add getter for each image array

---
 .../add-layer-record-preview.component.html               | 2 +-
 .../add-layer-record-preview.component.ts                 | 4 ++++
 .../organisation-preview.component.html                   | 5 +----
 .../organisation-preview.component.ts                     | 4 ++++
 .../related-record-card.component.html                    | 2 +-
 .../related-record-card/related-record-card.component.ts  | 4 ++++
 .../record-preview-card.component.html                    | 2 +-
 .../record-preview-card/record-preview-card.component.ts  | 6 +++++-
 .../record-preview-feed.component.html                    | 4 ++--
 .../record-preview-feed/record-preview-feed.component.ts  | 8 ++++++++
 .../record-preview-list.component.html                    | 2 +-
 .../record-preview-list/record-preview-list.component.ts  | 6 +++++-
 .../record-preview-title.component.html                   | 2 +-
 .../record-preview-title.component.ts                     | 6 +++++-
 14 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
index c4a6a10462..774bb7137f 100644
--- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
+++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
@@ -1,7 +1,7 @@
 <div class="w-full flex flex-row rounded-sm" [title]="record.abstract">
   <gn-ui-thumbnail
     class="w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100"
-    [images]="[{ url: record.thumbnailUrl }]"
+    [images]="imageUrls"
   ></gn-ui-thumbnail>
 
   <div class="flex flex-col p-2 gap-2 overflow-hidden">
diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
index f3a1585429..175f8b995e 100644
--- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
+++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
@@ -29,6 +29,10 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     ) as MetadataLink[]
   }
 
+  get imageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
+
   constructor(
     protected elementRef: ElementRef,
     private linkClassifier: LinkClassifierService,
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
index 51e3427e1f..923cdfedfe 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -6,10 +6,7 @@
     <div
       class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
     >
-      <gn-ui-thumbnail
-        class="relative h-full w-full"
-        [images]="[{ url: organisation.logoUrl, objectFit: 'contain' }]"
-      >
+      <gn-ui-thumbnail class="relative h-full w-full" [images]="imageUrls">
       </gn-ui-thumbnail>
     </div>
     <div
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
index 5f60b52e64..3bdba6097e 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
@@ -18,6 +18,10 @@ export class OrganisationPreviewComponent {
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organisation>()
 
+  get imageUrls() {
+    return [{ url: this.organisation.logoUrl, objectFit: 'contain' }]
+  }
+
   clickOrganisation(event: Event) {
     event.preventDefault()
     this.clickedOrganisation.emit(this.organisation)
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
index ead50353f9..9a34359eb5 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [images]="[{ url: record.thumbnailUrl }]"
+      [images]="imageUrls"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
index 89985c9a36..119bf46c70 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
@@ -9,4 +9,8 @@ import { MetadataRecord } from '@geonetwork-ui/util/shared'
 })
 export class RelatedRecordCardComponent {
   @Input() record: MetadataRecord
+
+  get imageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
 }
diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
index 181f4a87d0..c17faeafe1 100644
--- a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
+++ b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
@@ -9,7 +9,7 @@
     <div class="flex flex-col min-h-full">
       <gn-ui-thumbnail
         class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
-        [images]="[{ url: record.thumbnailUrl }]"
+        [images]="imageUrls"
       ></gn-ui-thumbnail>
 
       <div class="grow p-4">
diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
index 11a66dcf8a..c5b3d86fc2 100644
--- a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
+++ b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
@@ -7,4 +7,8 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewCardComponent extends RecordPreviewComponent {}
+export class RecordPreviewCardComponent extends RecordPreviewComponent {
+  get imageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
+}
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
index 49ea4b4d9b..dc10549a95 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -24,7 +24,7 @@
         >
         <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [images]="[{ url: contact.logoUrl }]"
+          [images]="contactLogoUrls"
         ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">
@@ -61,7 +61,7 @@ <h1 class="font-title text-[21px] font-medium mb-3 pr-8">
       <gn-ui-thumbnail
         *ngIf="record.thumbnailUrl"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-        [images]="[{ url: record.thumbnailUrl }]"
+        [images]="thumbnailImageUrls"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
         <mat-icon
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
index 859ecb7dcb..685dc62074 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
@@ -12,6 +12,14 @@ import Duration from 'duration-relativetimeformat'
 export class RecordPreviewFeedComponent extends RecordPreviewComponent {
   timeFormat = new Duration(this.translate.currentLang, {})
 
+  get contactLogoUrls() {
+    return [{ url: this.contact.logoUrl }]
+  }
+
+  get thumbnailImageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
+
   constructor(
     protected elementRef: ElementRef,
     private translate: TranslateService
diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
index 3325750f1c..dbb59a37e2 100644
--- a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
+++ b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
@@ -9,7 +9,7 @@
     <div class="h-full flex flex-row items-center shadow-sm">
       <gn-ui-thumbnail
         class="w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [images]="[{ url: record.thumbnailUrl }]"
+        [images]="imageUrls"
       ></gn-ui-thumbnail>
 
       <div class="grow h-full px-6 py-4 flex flex-col overflow-hidden">
diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
index fde255ece5..15e1422a5c 100644
--- a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
+++ b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
@@ -7,4 +7,8 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewListComponent extends RecordPreviewComponent {}
+export class RecordPreviewListComponent extends RecordPreviewComponent {
+  get imageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
+}
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
index b559e7cf8e..addb914201 100644
--- a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
+++ b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
@@ -10,7 +10,7 @@
     <div class="h-full flex flex-row items-center">
       <gn-ui-thumbnail
         class="w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [images]="[{ url: record.thumbnailUrl }]"
+        [images]="imageUrls"
       ></gn-ui-thumbnail>
 
       <div class="grow px-3 py-1 flex flex-col overflow-hidden">
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
index 84d46e193e..0bacf4534e 100644
--- a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
+++ b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
@@ -7,4 +7,8 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-title.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewTitleComponent extends RecordPreviewComponent {}
+export class RecordPreviewTitleComponent extends RecordPreviewComponent {
+  get imageUrls() {
+    return [{ url: this.record.thumbnailUrl }]
+  }
+}

From e6b52c8e09109af6d9563103a11f40e7ff834a76 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 14 Aug 2023 11:21:02 +0200
Subject: [PATCH 6/7] wip changes to thumbnail

---
 .../add-layer-record-preview.component.ts     |  4 --
 .../lib/thumbnail/thumbnail.component.html    |  4 +-
 .../lib/thumbnail/thumbnail.component.spec.ts | 20 +++---
 .../src/lib/thumbnail/thumbnail.component.ts  | 64 ++++++++++++-------
 4 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
index 175f8b995e..f3a1585429 100644
--- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
+++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts
@@ -29,10 +29,6 @@ export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     ) as MetadataLink[]
   }
 
-  get imageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
-
   constructor(
     protected elementRef: ElementRef,
     private linkClassifier: LinkClassifierService,
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
index 623f82af64..58a5e84fb5 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
@@ -8,8 +8,8 @@
   <img
     #imageElement
     class="relative w-full object-center"
-    [ngClass]="objectFit === 'contain' ? 'h-4/5' : 'h-full'"
-    [ngStyle]="{ objectFit: objectFit }"
+    [ngClass]="imgFit === 'contain' ? 'h-4/5' : 'h-full'"
+    [ngStyle]="{ objectFit: imgFit }"
     alt="thumbnail"
     loading="lazy"
     (load)="setObjectFit()"
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
index 4b7f81f27d..6679330e40 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.spec.ts
@@ -39,7 +39,7 @@ describe('ThumbnailComponent', () => {
     describe('When no url is given', () => {
       let img
       beforeEach(fakeAsync(() => {
-        component.images = []
+        component.thumbnailUrl = null
         fixture.detectChanges()
         img = de.query(By.css('img'))
         tick(10)
@@ -56,7 +56,7 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.images = [{ url }]
+        component.thumbnailUrl = url
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -77,7 +77,8 @@ describe('ThumbnailComponent', () => {
       const url = 'http://test.com/img.png'
       let img
       beforeEach(() => {
-        component.images = [{ url, objectFit: 'contain' }]
+        component.thumbnailUrl = url
+        component.fit = 'contain'
         fixture.detectChanges()
         img = de.query(By.css('img'))
       })
@@ -97,7 +98,7 @@ describe('ThumbnailComponent', () => {
   })
   describe('When different size of img are provided', () => {
     beforeEach(() => {
-      component.images = [{ url: 'http://test.com/img.png' }]
+      component.thumbnailUrl = 'http://test.com/img.png'
       fixture.detectChanges()
       Object.defineProperties(component.imgElement.nativeElement, {
         naturalWidth: {
@@ -144,7 +145,7 @@ describe('ThumbnailComponent', () => {
     let img
     beforeEach(() => {
       component.placeholderUrl = placeholderUrl
-      component.images = []
+      component.thumbnailUrl = null
       fixture.detectChanges()
       img = de.query(By.css('img'))
     })
@@ -160,7 +161,7 @@ describe('ThumbnailComponent', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.images = [{ url }]
+      component.thumbnailUrl = url
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
@@ -181,7 +182,8 @@ describe('ThumbnailComponent', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.images = [{ url }, { url: orgLogoUrl }]
+      component.thumbnailUrl = [url, orgLogoUrl]
+      component.fit = ['cover', 'contain']
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
@@ -190,6 +192,7 @@ describe('ThumbnailComponent', () => {
     })
     it('displays organisation logo', () => {
       expect(img.nativeElement.src).toEqual(orgLogoUrl)
+      expect(img.nativeElement.style.objectFit).toEqual('contain')
     })
 
     describe('if organisation logo also returns 404', () => {
@@ -199,6 +202,7 @@ describe('ThumbnailComponent', () => {
       })
       it('displays placeholder', () => {
         expect(img.nativeElement.src).toEqual(placeholderUrl)
+        expect(img.nativeElement.style.objectFit).toEqual('scale-down')
       })
     })
   })
@@ -207,7 +211,7 @@ describe('ThumbnailComponent', () => {
     const placeholderUrl = 'http://localhost/assets/img/placeholder.png'
     let img
     beforeEach(() => {
-      component.images = [{ url }]
+      component.thumbnailUrl = url
       component.placeholderUrl = placeholderUrl
       fixture.detectChanges()
       img = de.query(By.css('img'))
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
index f76a136b67..7e0d55ece1 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -1,12 +1,14 @@
 import {
-  OnInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   Inject,
   InjectionToken,
   Input,
+  OnChanges,
+  OnInit,
   Optional,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core'
 
@@ -14,32 +16,31 @@ export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
-export type GnUiThumbnailImageObject = {
+type ThumbnailImageObject = {
   url: string
-  objectFit?: 'cover' | 'contain' | 'scale-down'
+  fit?: 'cover' | 'contain' | 'scale-down'
 }
 
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
+type FitOptions = 'cover' | 'contain' | 'scale-down'
+
 @Component({
   selector: 'gn-ui-thumbnail',
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ThumbnailComponent implements OnInit {
-  @Input() images: GnUiThumbnailImageObject[]
+export class ThumbnailComponent implements OnInit, OnChanges {
+  @Input() thumbnailUrl: string | string[]
+  @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
-  imgUrl = ''
+  imgUrl: string
+  imgFit: FitOptions
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
   isPlaceholder = false
-  fit: 'cover' | 'contain' | 'scale-down' = 'cover'
-  imagesMutation = []
-
-  get objectFit() {
-    return this.isPlaceholder ? 'scale-down' : this.fit
-  }
+  private images: ThumbnailImageObject[] = []
 
   constructor(
     @Optional()
@@ -47,29 +48,46 @@ export class ThumbnailComponent implements OnInit {
     private optionalPlaceholderUrl: string
   ) {}
 
-  ngOnInit(): void {
-    this.imagesMutation = [...this.images]
-    if (this.imagesMutation.length === 0) {
+  ngOnInit() {
+    this.updateImageList()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!('thumbnailUrl' in changes) && !('fit' in changes)) {
+      return
+    }
+    this.updateImageList()
+  }
+
+  private updateImageList() {
+    if (!this.thumbnailUrl) {
       this.setPlaceholder()
       return
     }
-    this.setNewSrcImage(this.imagesMutation[0])
+    const urls = Array.isArray(this.thumbnailUrl)
+      ? this.thumbnailUrl
+      : [this.thumbnailUrl]
+    this.images = urls.map((url, index) => ({
+      url,
+      fit: (Array.isArray(this.fit) ? this.fit[index] : this.fit) || 'cover',
+    }))
+    this.setNewSrcImage(this.images[0])
   }
 
-  private setNewSrcImage(image: GnUiThumbnailImageObject) {
-    this.fit = image.objectFit || 'cover'
+  private setNewSrcImage(image: ThumbnailImageObject) {
+    this.imgFit = image.fit
     this.imgUrl = image.url
   }
 
   private setPlaceholder(): void {
     this.isPlaceholder = true
-    this.setNewSrcImage({ url: this.placeholderUrl, objectFit: 'scale-down' })
+    this.setNewSrcImage({ url: this.placeholderUrl, fit: 'scale-down' })
   }
 
   useFallback() {
-    if (this.imagesMutation.length > 1) {
-      this.imagesMutation.shift()
-      this.setNewSrcImage(this.imagesMutation[0])
+    if (this.images.length > 1) {
+      this.images.shift()
+      this.setNewSrcImage(this.images[0])
     } else {
       this.setPlaceholder()
     }
@@ -82,7 +100,7 @@ export class ThumbnailComponent implements OnInit {
       this.imgElement.nativeElement.naturalWidth < cw &&
       this.imgElement.nativeElement.naturalHeight < ch
     ) {
-      this.fit = 'scale-down'
+      this.imgFit = 'scale-down'
     }
   }
 }

From 742a912d3151ee86ec5ef2f6e1262ec05e7dbf80 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Mon, 14 Aug 2023 11:28:53 +0200
Subject: [PATCH 7/7] rollback api changes to thumbnail component

---
 .../add-layer-record-preview.component.html          |  2 +-
 .../organisation-preview.component.html              |  6 +++++-
 .../organisation-preview.component.ts                |  4 ----
 .../related-record-card.component.html               |  2 +-
 .../related-record-card.component.ts                 |  4 ----
 .../record-preview-card.component.html               |  2 +-
 .../record-preview-card.component.ts                 |  6 +-----
 .../record-preview-feed.component.html               |  4 ++--
 .../record-preview-feed.component.ts                 |  8 --------
 .../record-preview-list.component.html               |  2 +-
 .../record-preview-list.component.ts                 |  6 +-----
 .../record-preview-row.component.html                |  3 ++-
 .../record-preview-row.component.ts                  | 12 ------------
 .../record-preview-title.component.html              |  2 +-
 .../record-preview-title.component.ts                |  6 +-----
 15 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
index 774bb7137f..7bf54ecf73 100644
--- a/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
+++ b/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html
@@ -1,7 +1,7 @@
 <div class="w-full flex flex-row rounded-sm" [title]="record.abstract">
   <gn-ui-thumbnail
     class="w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100"
-    [images]="imageUrls"
+    [thumbnailUrl]="record.thumbnailUrl"
   ></gn-ui-thumbnail>
 
   <div class="flex flex-col p-2 gap-2 overflow-hidden">
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
index 923cdfedfe..0f47314100 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html
@@ -6,7 +6,11 @@
     <div
       class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0"
     >
-      <gn-ui-thumbnail class="relative h-full w-full" [images]="imageUrls">
+      <gn-ui-thumbnail
+        class="relative h-full w-full"
+        [thumbnailUrl]="organisation.logoUrl"
+        [fit]="'contain'"
+      >
       </gn-ui-thumbnail>
     </div>
     <div
diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
index 3bdba6097e..5f60b52e64 100644
--- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
+++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts
@@ -18,10 +18,6 @@ export class OrganisationPreviewComponent {
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organisation>()
 
-  get imageUrls() {
-    return [{ url: this.organisation.logoUrl, objectFit: 'contain' }]
-  }
-
   clickOrganisation(event: Event) {
     event.preventDefault()
     this.clickedOrganisation.emit(this.organisation)
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
index 9a34359eb5..403db5c84b 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [images]="imageUrls"
+      [thumbnailUrl]="record.thumbnailUrl"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
index 119bf46c70..89985c9a36 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts
@@ -9,8 +9,4 @@ import { MetadataRecord } from '@geonetwork-ui/util/shared'
 })
 export class RelatedRecordCardComponent {
   @Input() record: MetadataRecord
-
-  get imageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
 }
diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
index c17faeafe1..5a5cc17a91 100644
--- a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
+++ b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.html
@@ -9,7 +9,7 @@
     <div class="flex flex-col min-h-full">
       <gn-ui-thumbnail
         class="lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100"
-        [images]="imageUrls"
+        [thumbnailUrl]="record.thumbnailUrl"
       ></gn-ui-thumbnail>
 
       <div class="grow p-4">
diff --git a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
index c5b3d86fc2..11a66dcf8a 100644
--- a/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
+++ b/libs/ui/search/src/lib/record-preview-card/record-preview-card.component.ts
@@ -7,8 +7,4 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewCardComponent extends RecordPreviewComponent {
-  get imageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
-}
+export class RecordPreviewCardComponent extends RecordPreviewComponent {}
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
index dc10549a95..e5d2ce6bd7 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html
@@ -24,7 +24,7 @@
         >
         <gn-ui-thumbnail
           *ngIf="hasLogo"
-          [images]="contactLogoUrls"
+          [thumbnailUrl]="contact.logoUrl"
         ></gn-ui-thumbnail>
       </div>
       <div class="flex flex-col overflow-hidden items-start">
@@ -61,7 +61,7 @@ <h1 class="font-title text-[21px] font-medium mb-3 pr-8">
       <gn-ui-thumbnail
         *ngIf="record.thumbnailUrl"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-        [images]="thumbnailImageUrls"
+        [thumbnailUrl]="record.thumbnailUrl"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
         <mat-icon
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
index 685dc62074..859ecb7dcb 100644
--- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
+++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts
@@ -12,14 +12,6 @@ import Duration from 'duration-relativetimeformat'
 export class RecordPreviewFeedComponent extends RecordPreviewComponent {
   timeFormat = new Duration(this.translate.currentLang, {})
 
-  get contactLogoUrls() {
-    return [{ url: this.contact.logoUrl }]
-  }
-
-  get thumbnailImageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
-
   constructor(
     protected elementRef: ElementRef,
     private translate: TranslateService
diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
index dbb59a37e2..dcd4b1cabd 100644
--- a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
+++ b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.html
@@ -9,7 +9,7 @@
     <div class="h-full flex flex-row items-center shadow-sm">
       <gn-ui-thumbnail
         class="w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [images]="imageUrls"
+        [thumbnailUrl]="record.thumbnailUrl"
       ></gn-ui-thumbnail>
 
       <div class="grow h-full px-6 py-4 flex flex-col overflow-hidden">
diff --git a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
index 15e1422a5c..fde255ece5 100644
--- a/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
+++ b/libs/ui/search/src/lib/record-preview-list/record-preview-list.component.ts
@@ -7,8 +7,4 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewListComponent extends RecordPreviewComponent {
-  get imageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
-}
+export class RecordPreviewListComponent extends RecordPreviewComponent {}
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
index 268ebef9b2..3fdc6362fc 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html
@@ -9,7 +9,8 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
-        [images]="images"
+        [thumbnailUrl]="[record.thumbnailUrl, contact.logoUrl]"
+        [fit]="['cover', 'contain']"
       ></gn-ui-thumbnail>
     </div>
   </div>
diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
index f5eebb6ac0..556d6e1e20 100644
--- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
+++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
-import { GnUiThumbnailImageObject } from '@geonetwork-ui/ui/elements'
 import { RecordPreviewComponent } from '../record-preview/record-preview.component'
 
 @Component({
@@ -12,15 +11,4 @@ export class RecordPreviewRowComponent extends RecordPreviewComponent {
   constructor(protected elementRef: ElementRef) {
     super(elementRef)
   }
-
-  get images() {
-    const imagesArray: GnUiThumbnailImageObject[] = []
-    if (this.record.thumbnailUrl) {
-      imagesArray.push({ url: this.record.thumbnailUrl, objectFit: 'cover' })
-    }
-    if (this.contact.logoUrl) {
-      imagesArray.push({ url: this.contact.logoUrl, objectFit: 'contain' })
-    }
-    return imagesArray
-  }
 }
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
index addb914201..10aa15945b 100644
--- a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
+++ b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.html
@@ -10,7 +10,7 @@
     <div class="h-full flex flex-row items-center">
       <gn-ui-thumbnail
         class="w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100"
-        [images]="imageUrls"
+        [thumbnailUrl]="record.thumbnailUrl"
       ></gn-ui-thumbnail>
 
       <div class="grow px-3 py-1 flex flex-col overflow-hidden">
diff --git a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
index 0bacf4534e..84d46e193e 100644
--- a/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
+++ b/libs/ui/search/src/lib/record-preview-title/record-preview-title.component.ts
@@ -7,8 +7,4 @@ import { RecordPreviewComponent } from '../record-preview/record-preview.compone
   styleUrls: ['./record-preview-title.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPreviewTitleComponent extends RecordPreviewComponent {
-  get imageUrls() {
-    return [{ url: this.record.thumbnailUrl }]
-  }
-}
+export class RecordPreviewTitleComponent extends RecordPreviewComponent {}