From 55affdebced2046e45988e727254bfd662e94842 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 09:28:02 +0200
Subject: [PATCH 01/17] 79597: Add alt text to ds-thumbnail

---
 src/app/thumbnail/thumbnail.component.html |  2 +-
 src/app/thumbnail/thumbnail.component.scss | 28 ++++++++++++++++++++++
 src/app/thumbnail/thumbnail.component.ts   |  6 ++++-
 src/assets/i18n/en.json5                   |  4 ++++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index dbf8f6732cf..ec11ba6c0f3 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,4 +1,4 @@
 <div class="thumbnail">
-  <img [src]="src | dsSafeUrl" (error)="errorHandler()" class="img-fluid"/>
+  <img [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
 </div>
 
diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index e2718bac063..9feac243db9 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -1,3 +1,31 @@
 img {
   max-width: 100%;
 }
+
+.outer {  // .outer/.inner generated ~ https://ratiobuddy.com/
+  position: relative;
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: (210 / 297) * 100%;  // A4 ratio
+  }
+  > .inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    > .thumbnail-placeholder {
+      background: var(--bs-gray-100);
+      border: var(--bs-gray-200) 1px;
+      color: var(--bs-gray-600);
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 7e981d5fe65..8d5e780f27d 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -18,7 +18,6 @@ export const THUMBNAIL_PLACEHOLDER = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20
   templateUrl: './thumbnail.component.html'
 })
 export class ThumbnailComponent implements OnInit {
-
   /**
    * The thumbnail Bitstream
    */
@@ -34,6 +33,11 @@ export class ThumbnailComponent implements OnInit {
    */
   src: string;
 
+  /**
+   * i18n key of thumbnail alt text
+   */
+  @Input() alt? = 'thumbnail.default.alt';
+
   /**
    * Initialize the thumbnail.
    * Use a default image if no actual image is available.
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4c3317a0c0c..ac37eba016c 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3539,6 +3539,10 @@
   "submission.workflow.tasks.pool.show-detail": "Show detail",
 
 
+  "thumbnail.default.alt": "Thumbnail Image",
+
+  "thumbnail.default.placeholder": "No Thumbnail Available",
+
 
   "title": "DSpace",
 

From d80da3bbfe2cd6185e9f90538425897336475651 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 09:28:46 +0200
Subject: [PATCH 02/17] 79597: Add HTML placeholder for missing thumbnails

---
 src/app/thumbnail/thumbnail.component.html |  9 ++++++++-
 src/app/thumbnail/thumbnail.component.scss |  2 +-
 src/app/thumbnail/thumbnail.component.ts   | 23 ++++++++++++----------
 src/assets/i18n/en.json5                   | 14 +++++++++++++
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index ec11ba6c0f3..4789917f1c3 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,4 +1,11 @@
 <div class="thumbnail">
-  <img [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
+  <img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt" (error)="errorHandler()" class="img-fluid"/>
+  <div *ngIf="src === null" class="outer">
+    <div class="inner">
+      <div class="thumbnail-placeholder w-100 h-100 p-3">
+        {{ placeholder | translate }}
+      </div>
+    </div>
+  </div>
 </div>
 
diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index 9feac243db9..4c8c7d90adb 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -19,7 +19,7 @@ img {
 
     > .thumbnail-placeholder {
       background: var(--bs-gray-100);
-      border: var(--bs-gray-200) 1px;
+      border: 1px solid var(--bs-gray-200);
       color: var(--bs-gray-600);
       font-weight: bold;
       display: flex;
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 8d5e780f27d..21a5da35675 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -2,11 +2,6 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { hasValue } from '../shared/empty.util';
 
-/**
- * A fallback placeholder image as a base64 string
- */
-export const THUMBNAIL_PLACEHOLDER = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
-
 /**
  * This component renders a given Bitstream as a thumbnail.
  * One input parameter of type Bitstream is expected.
@@ -24,9 +19,10 @@ export class ThumbnailComponent implements OnInit {
   @Input() thumbnail: Bitstream;
 
   /**
-   * The default image, used if the thumbnail isn't set or can't be downloaded
+   * The default image, used if the thumbnail isn't set or can't be downloaded.
+   * If defaultImage is null, a HTML placeholder is used instead.
    */
-  @Input() defaultImage? = THUMBNAIL_PLACEHOLDER;
+  @Input() defaultImage? = null;
 
   /**
    * The src attribute used in the template to render the image.
@@ -38,12 +34,19 @@ export class ThumbnailComponent implements OnInit {
    */
   @Input() alt? = 'thumbnail.default.alt';
 
+  /**
+   * i18n key of HTML placeholder text
+   */
+  @Input() placeholder? = 'thumbnail.default.placeholder';
+
   /**
    * Initialize the thumbnail.
    * Use a default image if no actual image is available.
    */
   ngOnInit(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links) && hasValue(this.thumbnail._links.content) && this.thumbnail._links.content.href) {
+    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links)
+                                 && hasValue(this.thumbnail._links.content)
+                                 && this.thumbnail._links.content.href) {
       this.src = this.thumbnail._links.content.href;
     } else {
       this.src = this.defaultImage;
@@ -53,13 +56,13 @@ export class ThumbnailComponent implements OnInit {
   /**
    * Handle image download errors.
    * If the image can't be found, use the defaultImage instead.
-   * If that also can't be found, use the base64 placeholder.
+   * If that also can't be found, use null to fall back to the HTML placeholder.
    */
   errorHandler() {
     if (this.src !== this.defaultImage) {
       this.src = this.defaultImage;
     } else {
-      this.src = THUMBNAIL_PLACEHOLDER;
+      this.src = null;
     }
   }
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index ac37eba016c..2235eda34d5 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3539,10 +3539,24 @@
   "submission.workflow.tasks.pool.show-detail": "Show detail",
 
 
+
   "thumbnail.default.alt": "Thumbnail Image",
 
   "thumbnail.default.placeholder": "No Thumbnail Available",
 
+  "thumbnail.project.alt": "Project Logo",
+
+  "thumbnail.project.placeholder": "Project Placeholder Image",
+
+  "thumbnail.orgunit.alt": "OrgUnit Logo",
+
+  "thumbnail.orgunit.placeholder": "OrgUnit Placeholder Image",
+
+  "thumbnail.person.alt": "Profile Picture",
+
+  "thumbnail.person.placeholder": "No Profile Picture Available",
+
+
 
   "title": "DSpace",
 

From 7a69a23f0c50e28801d04045e905e80f5929ebd1 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 09:46:54 +0200
Subject: [PATCH 03/17] 79597: Improve placeholder contrast

---
 src/app/thumbnail/thumbnail.component.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index 4c8c7d90adb..290b3952123 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -19,8 +19,8 @@ img {
 
     > .thumbnail-placeholder {
       background: var(--bs-gray-100);
-      border: 1px solid var(--bs-gray-200);
-      color: var(--bs-gray-600);
+      border: 1px solid var(--bs-gray-300);
+      color: var(--bs-gray-800);
       font-weight: bold;
       display: flex;
       justify-content: center;

From 4b6e02f773b27897fe0ce178a516d2a12a969bed Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 09:55:19 +0200
Subject: [PATCH 04/17] 79597: Specify i18n text for person, project & orgunit

---
 .../item-pages/org-unit/org-unit.component.html            | 7 ++++++-
 .../item-pages/person/person.component.html                | 6 +++++-
 .../item-pages/project/project.component.html              | 7 ++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index 822d4858ce6..14d56d41043 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -9,7 +9,12 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+                    [defaultImage]="'assets/images/orgunit-placeholder.svg'"
+                    [alt]="'thumbnail.orgunit.alt'"
+                    [placeholder]="'thumbnail.orgunit.placeholder'"
+      >
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['organization.foundingDate']"
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index e1c776f3662..2a7c9bd0235 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -9,7 +9,11 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+                    [defaultImage]="'assets/images/person-placeholder.svg'"
+                    [alt]="'thumbnail.person.alt'"
+                    [placeholder]="'thumbnail.person.placeholder'">
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['person.email']"
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 9967b940ac8..0590c8bfe4b 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -9,7 +9,12 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async" [defaultImage]="'assets/images/project-placeholder.svg'"></ds-thumbnail>
+      <ds-thumbnail
+        [thumbnail]="getThumbnail() | async"
+        [defaultImage]="'assets/images/project-placeholder.svg'"
+        [alt]="'thumbnail.project.alt'"
+        [placeholder]="'thumbnail.project.placeholder'">
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <!--<ds-generic-item-page-field [item]="object"-->
       <!--[fields]="['project.identifier.status']"-->

From c9ff89a143d178f24728c353ede4cb8e21e12d41 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 10:03:18 +0200
Subject: [PATCH 05/17] 79597: Thumbnail placeholder style ~ CSS variables

---
 src/app/thumbnail/thumbnail.component.scss | 6 +++---
 src/styles/_custom_variables.scss          | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index 290b3952123..e2374c96dbd 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -18,9 +18,9 @@ img {
     left: 0;
 
     > .thumbnail-placeholder {
-      background: var(--bs-gray-100);
-      border: 1px solid var(--bs-gray-300);
-      color: var(--bs-gray-800);
+      background: var(--ds-thumbnail-placeholder-background);
+      border: var(--ds-thumbnail-placeholder-border);
+      color: var(--ds-thumbnail-placeholder-color);
       font-weight: bold;
       display: flex;
       justify-content: center;
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 298be09f677..d0e15642815 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -46,6 +46,9 @@
   --ds-edit-item-language-field-width: 43px;
 
   --ds-thumbnail-max-width: 175px;
+  --ds-thumbnail-placeholder-background: #{$gray-100};
+  --ds-thumbnail-placeholder-border: 1px solid #{$gray-300};
+  --ds-thumbnail-placeholder-color: #{lighten($gray-800, 7%)};
 
   --ds-dso-selector-list-max-height: 475px;
   --ds-dso-selector-current-background-color: #eeeeee;

From 4567f8cc2cfb880e414ead44c7f76326b546517b Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 10:20:46 +0200
Subject: [PATCH 06/17] 79597: Limit thumbnail width & set to portrait

---
 src/app/thumbnail/thumbnail.component.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index e2374c96dbd..a96147468c5 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -1,3 +1,7 @@
+.thumbnail {
+  max-width: var(--ds-thumbnail-max-width);
+}
+
 img {
   max-width: 100%;
 }
@@ -8,7 +12,7 @@ img {
     display: block;
     content: "";
     width: 100%;
-    padding-top: (210 / 297) * 100%;  // A4 ratio
+    padding-top: (297 / 210) * 100%;  // A4 ratio
   }
   > .inner {
     position: absolute;

From 363d1d74dff0d82291cef6893f6989ea20f7cda8 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 11:03:51 +0200
Subject: [PATCH 07/17] 79597: Update unit tests

---
 .../shared/mocks/translate.service.mock.ts    |  1 +
 src/app/thumbnail/thumbnail.component.html    |  6 +--
 src/app/thumbnail/thumbnail.component.spec.ts | 42 ++++++++++++++++---
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/mocks/translate.service.mock.ts b/src/app/shared/mocks/translate.service.mock.ts
index 0bc172b408d..38b088e50f3 100644
--- a/src/app/shared/mocks/translate.service.mock.ts
+++ b/src/app/shared/mocks/translate.service.mock.ts
@@ -3,6 +3,7 @@ import { TranslateService } from '@ngx-translate/core';
 export function getMockTranslateService(): TranslateService {
   return jasmine.createSpyObj('translateService', {
     get: jasmine.createSpy('get'),
+    use: jasmine.createSpy('use'),
     instant: jasmine.createSpy('instant'),
     setDefaultLang: jasmine.createSpy('setDefaultLang')
   });
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index 4789917f1c3..cef88e0192f 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,10 +1,8 @@
 <div class="thumbnail">
-  <img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt" (error)="errorHandler()" class="img-fluid"/>
+  <img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
   <div *ngIf="src === null" class="outer">
     <div class="inner">
-      <div class="thumbnail-placeholder w-100 h-100 p-3">
-        {{ placeholder | translate }}
-      </div>
+      <div class="thumbnail-placeholder w-100 h-100 p-3">{{ placeholder | translate }}</div>
     </div>
   </div>
 </div>
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index 21678c9162b..687282a373d 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -1,10 +1,18 @@
-import { DebugElement } from '@angular/core';
+import { DebugElement, Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { SafeUrlPipe } from '../shared/utils/safe-url-pipe';
 
-import { THUMBNAIL_PLACEHOLDER, ThumbnailComponent } from './thumbnail.component';
+import { ThumbnailComponent } from './thumbnail.component';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({ name: 'translate' })
+class MockTranslatePipe implements PipeTransform {
+  transform(key: string): string {
+    return 'TRANSLATED ' + key;
+  }
+}
 
 describe('ThumbnailComponent', () => {
   let comp: ThumbnailComponent;
@@ -14,7 +22,7 @@ describe('ThumbnailComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ThumbnailComponent, SafeUrlPipe]
+      declarations: [ThumbnailComponent, SafeUrlPipe, MockTranslatePipe],
     }).compileComponents();
   }));
 
@@ -39,6 +47,19 @@ describe('ThumbnailComponent', () => {
       const image: HTMLElement = de.query(By.css('img')).nativeElement;
       expect(image.getAttribute('src')).toBe(comp.thumbnail._links.content.href);
     });
+    it('should include the alt text', () => {
+      const thumbnail = new Bitstream();
+      thumbnail._links = {
+        self: { href: 'self.url' },
+        bundle: { href: 'bundle.url' },
+        format: { href: 'format.url' },
+        content: { href: 'content.url' },
+      };
+      comp.thumbnail = thumbnail;
+      fixture.detectChanges();
+      const image: HTMLElement = de.query(By.css('img')).nativeElement;
+      expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+    });
   });
   describe(`when the thumbnail doesn't exist`, () => {
     describe('and there is a default image', () => {
@@ -48,13 +69,24 @@ describe('ThumbnailComponent', () => {
         comp.errorHandler();
         expect(comp.src).toBe(comp.defaultImage);
       });
+      it('should include the alt text', () => {
+        comp.src = 'http://bit.stream';
+        comp.defaultImage = 'http://default.img';
+        comp.errorHandler();
+        fixture.detectChanges();
+        const image: HTMLElement = de.query(By.css('img')).nativeElement;
+        expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+      });
     });
     describe('and there is no default image', () => {
       it('should display the placeholder', () => {
         comp.src = 'http://default.img';
-        comp.defaultImage = 'http://default.img';
         comp.errorHandler();
-        expect(comp.src).toBe(THUMBNAIL_PLACEHOLDER);
+        expect(comp.src).toBe(null);
+
+        fixture.detectChanges();
+        const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
+        expect(placeholder.innerHTML).toBe('TRANSLATED ' + comp.placeholder);
       });
     });
   });

From ca7d45ff0c0fa2b221bb27587a7ce67e5905cb7d Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 25 May 2021 11:18:08 +0200
Subject: [PATCH 08/17] 79597: Fix tslint issue

---
 src/app/thumbnail/thumbnail.component.spec.ts | 2 +-
 src/app/thumbnail/thumbnail.component.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index 687282a373d..82eadc04def 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -5,8 +5,8 @@ import { Bitstream } from '../core/shared/bitstream.model';
 import { SafeUrlPipe } from '../shared/utils/safe-url-pipe';
 
 import { ThumbnailComponent } from './thumbnail.component';
-import { TranslateService } from '@ngx-translate/core';
 
+// tslint:disable-next-line:pipe-prefix
 @Pipe({ name: 'translate' })
 class MockTranslatePipe implements PipeTransform {
   transform(key: string): string {
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 21a5da35675..11dee370379 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -10,7 +10,7 @@ import { hasValue } from '../shared/empty.util';
 @Component({
   selector: 'ds-thumbnail',
   styleUrls: ['./thumbnail.component.scss'],
-  templateUrl: './thumbnail.component.html'
+  templateUrl: './thumbnail.component.html',
 })
 export class ThumbnailComponent implements OnInit {
   /**

From 41c07e74ca5c3ad3a6a69492c40873c8b7fb7089 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 08:59:32 +0200
Subject: [PATCH 09/17] 79597: Add input to toggle thumbnail max-width

---
 src/app/thumbnail/thumbnail.component.html | 9 +++++----
 src/app/thumbnail/thumbnail.component.scss | 2 +-
 src/app/thumbnail/thumbnail.component.ts   | 7 ++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index cef88e0192f..645bce9b809 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,8 +1,9 @@
-<div class="thumbnail">
-  <img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
-  <div *ngIf="src === null" class="outer">
+<div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
+  <img *ngIf="src !== null" class="thumbnail-content img-fluid"
+       [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
+  <div *ngIf="src === null" class="thumbnail-content outer">
     <div class="inner">
-      <div class="thumbnail-placeholder w-100 h-100 p-3">{{ placeholder | translate }}</div>
+      <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
     </div>
   </div>
 </div>
diff --git a/src/app/thumbnail/thumbnail.component.scss b/src/app/thumbnail/thumbnail.component.scss
index a96147468c5..b15238afac3 100644
--- a/src/app/thumbnail/thumbnail.component.scss
+++ b/src/app/thumbnail/thumbnail.component.scss
@@ -1,4 +1,4 @@
-.thumbnail {
+.limit-width {
   max-width: var(--ds-thumbnail-max-width);
 }
 
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 11dee370379..30911644f72 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -5,7 +5,7 @@ import { hasValue } from '../shared/empty.util';
 /**
  * This component renders a given Bitstream as a thumbnail.
  * One input parameter of type Bitstream is expected.
- * If no Bitstream is provided, a holderjs image will be rendered instead.
+ * If no Bitstream is provided, a HTML placeholder will be rendered instead.
  */
 @Component({
   selector: 'ds-thumbnail',
@@ -39,6 +39,11 @@ export class ThumbnailComponent implements OnInit {
    */
   @Input() placeholder? = 'thumbnail.default.placeholder';
 
+  /**
+   * Limit thumbnail width to --ds-thumbnail-max-width
+   */
+  @Input() limitWidth? = true;
+
   /**
    * Initialize the thumbnail.
    * Use a default image if no actual image is available.

From 4f38821bb3ff269d890ebf381beb5f0ff701152a Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 09:10:31 +0200
Subject: [PATCH 10/17] 79597: Replace ds-grid-thumbnail with ds-thumbnail

---
 ...ournal-issue-search-result-grid-element.component.html | 8 ++++----
 ...urnal-volume-search-result-grid-element.component.html | 8 ++++----
 .../journal-search-result-grid-element.component.html     | 8 ++++----
 .../org-unit-search-result-grid-element.component.html    | 8 ++++----
 .../person-search-result-grid-element.component.html      | 8 ++++----
 .../project-search-result-grid-element.component.html     | 8 ++++----
 .../collection-grid-element.component.html                | 8 ++++----
 .../community-grid-element.component.html                 | 8 ++++----
 src/app/shared/object-grid/object-grid.component.scss     | 2 +-
 .../collection-search-result-grid-element.component.html  | 8 ++++----
 .../community-search-result-grid-element.component.html   | 8 ++++----
 .../item/item-search-result-grid-element.component.html   | 8 ++++----
 12 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
index df6c9e60c03..feb282d3a7f 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-                </ds-grid-thumbnail>
+                <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
index cdc19b7f14d..aa2352b284d 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
                 <div>
-                    <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-                    </ds-grid-thumbnail>
+                    <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+                    </ds-thumbnail>
                 </div>
             </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
index bacd657663d..8fdad598277 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-                </ds-grid-thumbnail>
+                <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
index 2c3087d701c..b8be58a603f 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-                </ds-grid-thumbnail>
+                <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
index 005fa9cc831..8281eb0e04f 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-                </ds-grid-thumbnail>
+                <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
index e84e8c49d06..88498a4d677 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
@@ -8,14 +8,14 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+        </ds-thumbnail>
       </div>
     </span>
     <div class="card-body">
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
index 9b9d1747040..d47e897edcc 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', object.id]" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
index f676ba303b9..63097c4f579 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', object.id]" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(object.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(object.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </span>
   <div class="card-body">
     <h4 class="card-title">{{object.name}}</h4>
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index 46675615f0c..68a7f2f9913 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,7 +1,7 @@
 :host ::ng-deep {
   --ds-wrapper-grid-spacing: calc(var(--bs-spacer) / 2);
 
-  div.thumbnail > img {
+  div.thumbnail > .thumbnail-content {
     height: var(--ds-card-thumbnail-height);
     width: 100%;
     display: block;
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index f8c75fc0d4f..739fa6c7a80 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
   <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/', dso.id]" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </a>
   <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </span>
   <div class="card-body">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
index 8025213b3bc..d8c253c8a9c 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,11 +1,11 @@
 <div class="card">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/communities/', dso.id]" class="card-img-top">
-        <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
-        </ds-grid-thumbnail>
+        <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+        </ds-thumbnail>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top">
-    <ds-grid-thumbnail [thumbnail]="(dso.logo | async)?.payload">
-    </ds-grid-thumbnail>
+    <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
+    </ds-thumbnail>
   </span>
     <div class="card-body">
         <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
index 85aeb63a6b3..bc168537219 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
@@ -6,14 +6,14 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
          class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
-              </ds-grid-thumbnail>
+              <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
+              </ds-thumbnail>
           </div>
       </a>
       <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
           <div>
-              <ds-grid-thumbnail [thumbnail]="getThumbnail()  | async">
-              </ds-grid-thumbnail>
+              <ds-thumbnail [thumbnail]="getThumbnail()  | async" [limitWidth]="false">
+              </ds-thumbnail>
           </div>
       </span>
       <div class="card-body">

From 6cbd9dc920c7937e4f5217ee40bd4b2242ecf328 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 09:21:00 +0200
Subject: [PATCH 11/17] 79597: Remove GridThumbnailComponent

---
 .../grid-thumbnail.component.html             |  3 -
 .../grid-thumbnail.component.scss             |  0
 .../grid-thumbnail.component.spec.ts          | 50 -------------
 .../grid-thumbnail.component.ts               | 72 -------------------
 src/app/shared/shared.module.ts               |  5 +-
 5 files changed, 1 insertion(+), 129 deletions(-)
 delete mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
 delete mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
 delete mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
 delete mode 100644 src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts

diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
deleted file mode 100644
index 1df4026f839..00000000000
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="thumbnail">
-  <img [src]="src | dsSafeUrl" (error)="errorHandler($event)" />
-</div>
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
deleted file mode 100644
index 825a4d5c60a..00000000000
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { Bitstream } from '../../../core/shared/bitstream.model';
-import { SafeUrlPipe } from '../../utils/safe-url-pipe';
-
-import { GridThumbnailComponent } from './grid-thumbnail.component';
-
-describe('GridThumbnailComponent', () => {
-  let comp: GridThumbnailComponent;
-  let fixture: ComponentFixture<GridThumbnailComponent>;
-  let de: DebugElement;
-  let el: HTMLElement;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [GridThumbnailComponent, SafeUrlPipe]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GridThumbnailComponent);
-    comp = fixture.componentInstance; // BannerComponent test instance
-    de = fixture.debugElement.query(By.css('div.thumbnail'));
-    el = de.nativeElement;
-  });
-
-  it('should display image', () => {
-    const thumbnail = new Bitstream();
-    thumbnail._links = {
-      self: { href: 'self.url' },
-      bundle: { href: 'bundle.url' },
-      format: { href: 'format.url' },
-      content: { href: 'content.url' },
-    };
-    comp.thumbnail = thumbnail;
-    fixture.detectChanges();
-    const image: HTMLElement = de.query(By.css('img')).nativeElement;
-    expect(image.getAttribute('src')).toBe(comp.thumbnail._links.content.href);
-  });
-
-  it('should display placeholder', () => {
-    const thumbnail = new Bitstream();
-    comp.thumbnail = thumbnail;
-    fixture.detectChanges();
-    const image: HTMLElement = de.query(By.css('img')).nativeElement;
-    expect(image.getAttribute('src')).toBe(comp.defaultImage);
-  });
-
-});
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
deleted file mode 100644
index 92d93686dc2..00000000000
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-} from '@angular/core';
-import { Bitstream } from '../../../core/shared/bitstream.model';
-import { hasValue } from '../../empty.util';
-
-/**
- * This component renders a given Bitstream as a thumbnail.
- * One input parameter of type Bitstream is expected.
- * If no Bitstream is provided, a holderjs image will be rendered instead.
- */
-
-@Component({
-  selector: 'ds-grid-thumbnail',
-  styleUrls: ['./grid-thumbnail.component.scss'],
-  templateUrl: './grid-thumbnail.component.html',
-})
-export class GridThumbnailComponent implements OnInit, OnChanges {
-  @Input() thumbnail: Bitstream;
-
-  data: any = {};
-
-  /**
-   * The default 'holder.js' image
-   */
-  @Input() defaultImage? =
-    'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
-
-  src: string;
-
-  errorHandler(event) {
-    event.currentTarget.src = this.defaultImage;
-  }
-
-  /**
-   * Initialize the src
-   */
-  ngOnInit(): void {
-    this.src = this.defaultImage;
-
-    this.checkThumbnail(this.thumbnail);
-  }
-
-  /**
-   * If the old input is undefined and the new one is a bitsream then set src
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (
-      !hasValue(changes.thumbnail.previousValue) &&
-      hasValue(changes.thumbnail.currentValue)
-    ) {
-      this.checkThumbnail(changes.thumbnail.currentValue);
-    }
-  }
-
-  /**
-   * check if the Bitstream has any content than set the src
-   */
-  checkThumbnail(thumbnail: Bitstream) {
-    if (
-      hasValue(thumbnail) &&
-      hasValue(thumbnail._links) &&
-      thumbnail._links.content.href
-    ) {
-      this.src = thumbnail._links.content.href;
-    }
-  }
-}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 4de0f2901ef..c5a91bd02cc 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -46,7 +46,6 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { SearchResultGridElementComponent } from './object-grid/search-result-grid-element/search-result-grid-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
-import { GridThumbnailComponent } from './object-grid/grid-thumbnail/grid-thumbnail.component';
 import { VarDirective } from './utils/var.directive';
 import { AuthNavMenuComponent } from './auth-nav-menu/auth-nav-menu.component';
 import { LogOutComponent } from './log-out/log-out.component';
@@ -54,8 +53,7 @@ import { FormComponent } from './form/form.component';
 import { DsDynamicOneboxComponent } from './form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
 import { DsDynamicScrollableDropdownComponent } from './form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import {
-  DsDynamicFormControlContainerComponent,
-  dsDynamicFormControlMapFn
+  DsDynamicFormControlContainerComponent, dsDynamicFormControlMapFn,
 } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component';
 import { DsDynamicFormComponent } from './form/builder/ds-dynamic-form-ui/ds-dynamic-form.component';
 import { DragClickDirective } from './utils/drag-click.directive';
@@ -340,7 +338,6 @@ const COMPONENTS = [
   SidebarFilterComponent,
   SidebarFilterSelectedOptionComponent,
   ThumbnailComponent,
-  GridThumbnailComponent,
   UploaderComponent,
   FileDropzoneNoUploaderComponent,
   ItemListPreviewComponent,

From 9b95fc5de9b07adc038332f0c67848bf13448129 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 11:18:40 +0200
Subject: [PATCH 12/17] 79597: Add space between rows in
 FullFileSectionComponent

---
 .../file-section/full-file-section.component.html               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.html b/src/app/+item-page/full/field-components/file-section/full-file-section.component.html
index bc1c63cc322..c5393055dfc 100644
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.html
+++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.html
@@ -11,7 +11,7 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle"
                            [retainScrollPosition]="true">
 
 
-                <div class="file-section row" *ngFor="let file of originals?.page;">
+                <div class="file-section row mb-3" *ngFor="let file of originals?.page;">
                     <div class="col-3">
                         <ds-thumbnail [thumbnail]="(file.thumbnail | async)?.payload"></ds-thumbnail>
                     </div>

From c717fc5ec815d0b29b244781b1efcf2e5b0ac0b7 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 15:51:54 +0200
Subject: [PATCH 13/17] 79597: Fix thumbnails ~ item page direct request

---
 .../metadata-field-wrapper.component.html     |  2 +-
 .../publication/publication.component.html    |  2 +-
 .../item-types/shared/item.component.ts       | 21 ++++++----
 .../untyped-item/untyped-item.component.html  |  2 +-
 .../journal-issue.component.html              |  2 +-
 .../journal-volume.component.html             |  2 +-
 .../item-pages/journal/journal.component.html |  2 +-
 ...-search-result-grid-element.component.html |  2 +-
 .../org-unit/org-unit.component.html          |  2 +-
 .../item-pages/person/person.component.html   |  2 +-
 .../item-pages/project/project.component.html |  2 +-
 src/app/thumbnail/thumbnail.component.html    | 18 ++++----
 src/app/thumbnail/thumbnail.component.ts      | 41 ++++++++++++++-----
 13 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
index c791cec600a..a41aa0d67af 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
@@ -1,4 +1,4 @@
-<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img'))">
+<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img,.thumbnail-content'))">
   <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
   <div #content class="simple-view-element-body">
     <ng-content></ng-content>
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html
index 73219cbb8f4..0758f7cda47 100644
--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -10,7 +10,7 @@ <h2 class="item-page-title-field mr-auto">
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+        <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
diff --git a/src/app/+item-page/simple/item-types/shared/item.component.ts b/src/app/+item-page/simple/item-types/shared/item.component.ts
index 120eda930f7..8763d8c899e 100644
--- a/src/app/+item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.ts
@@ -4,8 +4,10 @@ import { environment } from '../../../../../environments/environment';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
-import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
+import { getFirstSucceededRemoteDataPayload, takeUntilCompletedRemoteData } from '../../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page-routing-paths';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { RemoteData } from '../../../../core/data/remote-data';
 
 @Component({
   selector: 'ds-item',
@@ -17,6 +19,11 @@ import { getItemPageRoute } from '../../../item-page-routing-paths';
 export class ItemComponent implements OnInit {
   @Input() object: Item;
 
+  /**
+   * The Item's thumbnail
+   */
+  thumbnail$: BehaviorSubject<RemoteData<Bitstream>>;
+
   /**
    * Route to the item page
    */
@@ -28,12 +35,12 @@ export class ItemComponent implements OnInit {
 
   ngOnInit(): void {
     this.itemPageRoute = getItemPageRoute(this.object);
-  }
 
-  // TODO refactor to return RemoteData, and thumbnail template to deal with loading
-  getThumbnail(): Observable<Bitstream> {
-    return this.bitstreamDataService.getThumbnailFor(this.object).pipe(
-      getFirstSucceededRemoteDataPayload()
-    );
+    this.thumbnail$ = new BehaviorSubject<RemoteData<Bitstream>>(undefined);
+    this.bitstreamDataService.getThumbnailFor(this.object).pipe(
+      takeUntilCompletedRemoteData(),
+    ).subscribe((rd: RemoteData<Bitstream>) => {
+      this.thumbnail$.next(rd);
+    });
   }
 }
diff --git a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
index 8d46a2c5a9f..3e20da30944 100644
--- a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -10,7 +10,7 @@ <h2 class="item-page-title-field mr-auto">
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
       <ds-metadata-field-wrapper>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+        <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
     <ng-container *ngIf="mediaViewer.image">
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index 5749c5797d6..af87daa2434 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index 2c2a4995c2e..915967f41b5 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 49fdc935c5b..8dd961692dc 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
index 8281eb0e04f..23de8b134fa 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
@@ -8,7 +8,7 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="getThumbnail() | async">
+        <ds-thumbnail [thumbnail]="getThumbnail() | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </a>
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index 14d56d41043..67b79163ed8 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
                     [placeholder]="'thumbnail.orgunit.placeholder'"
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 2a7c9bd0235..21d833e4070 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
-      <ds-thumbnail [thumbnail]="getThumbnail() | async"
+      <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
                     [placeholder]="'thumbnail.person.placeholder'">
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 0590c8bfe4b..facecb49967 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -10,7 +10,7 @@ <h2 class="item-page-title-field mr-auto">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
       <ds-thumbnail
-        [thumbnail]="getThumbnail() | async"
+        [thumbnail]="thumbnail$ | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
         [alt]="'thumbnail.project.alt'"
         [placeholder]="'thumbnail.project.placeholder'">
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index 645bce9b809..593c1c10b82 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,10 +1,14 @@
 <div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
-  <img *ngIf="src !== null" class="thumbnail-content img-fluid"
-       [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
-  <div *ngIf="src === null" class="thumbnail-content outer">
-    <div class="inner">
-      <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
+  <ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
+    text-content
+  </ds-loading>
+  <ng-template #showThumbnail>
+    <img *ngIf="src !== null" class="thumbnail-content img-fluid"
+         [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">
+    <div *ngIf="src === null" class="thumbnail-content outer">
+      <div class="inner">
+        <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
+      </div>
     </div>
-  </div>
+  </ng-template>
 </div>
-
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 30911644f72..ec1e7eb368f 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -1,6 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { hasValue } from '../shared/empty.util';
+import { RemoteData } from '../core/data/remote-data';
+import { BITSTREAM } from '../core/shared/bitstream.resource-type';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
@@ -12,11 +14,11 @@ import { hasValue } from '../shared/empty.util';
   styleUrls: ['./thumbnail.component.scss'],
   templateUrl: './thumbnail.component.html',
 })
-export class ThumbnailComponent implements OnInit {
+export class ThumbnailComponent implements OnChanges {
   /**
    * The thumbnail Bitstream
    */
-  @Input() thumbnail: Bitstream;
+  @Input() thumbnail: Bitstream | RemoteData<Bitstream>;
 
   /**
    * The default image, used if the thumbnail isn't set or can't be downloaded.
@@ -27,7 +29,7 @@ export class ThumbnailComponent implements OnInit {
   /**
    * The src attribute used in the template to render the image.
    */
-  src: string;
+  src: string = null;
 
   /**
    * i18n key of thumbnail alt text
@@ -44,18 +46,37 @@ export class ThumbnailComponent implements OnInit {
    */
   @Input() limitWidth? = true;
 
+  isLoading: boolean;
+
   /**
-   * Initialize the thumbnail.
+   * Resolve the thumbnail.
    * Use a default image if no actual image is available.
    */
-  ngOnInit(): void {
-    if (hasValue(this.thumbnail) && hasValue(this.thumbnail._links)
-                                 && hasValue(this.thumbnail._links.content)
-                                 && this.thumbnail._links.content.href) {
-      this.src = this.thumbnail._links.content.href;
+  ngOnChanges(): void {
+    if (this.thumbnail === undefined || this.thumbnail === null) {
+      return;
+    }
+    if (this.thumbnail instanceof Bitstream) {
+      this.resolveThumbnail(this.thumbnail as Bitstream)
+    } else {
+      const thumbnailRD = this.thumbnail as RemoteData<Bitstream>;
+      if (thumbnailRD.isLoading) {
+        this.isLoading = true;
+      } else {
+        this.resolveThumbnail(thumbnailRD.payload as Bitstream);
+      }
+    }
+  }
+
+  private resolveThumbnail(thumbnail: Bitstream): void {
+    if (hasValue(thumbnail) && hasValue(thumbnail._links)
+                            && hasValue(thumbnail._links.content)
+                            && thumbnail._links.content.href) {
+      this.src = thumbnail._links.content.href;
     } else {
       this.src = this.defaultImage;
     }
+    this.isLoading = false;
   }
 
   /**

From bcfb890e1aa1dae27e87fd57afc1cd6232532f0e Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 16:34:52 +0200
Subject: [PATCH 14/17] 79597: Update unit tests

---
 src/app/thumbnail/thumbnail.component.html    |   2 +-
 src/app/thumbnail/thumbnail.component.spec.ts | 125 +++++++++++++-----
 2 files changed, 96 insertions(+), 31 deletions(-)

diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index 593c1c10b82..a7f4c51510d 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
+<div class="thumbnail" [class.limitWidth]="limitWidth">
   <ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
     text-content
   </ds-loading>
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index 82eadc04def..bc9d1597501 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -5,6 +5,10 @@ import { Bitstream } from '../core/shared/bitstream.model';
 import { SafeUrlPipe } from '../shared/utils/safe-url-pipe';
 
 import { ThumbnailComponent } from './thumbnail.component';
+import { RemoteData } from '../core/data/remote-data';
+import {
+  createFailedRemoteDataObject, createPendingRemoteDataObject, createSuccessfulRemoteDataObject,
+} from '../shared/remote-data.utils';
 
 // tslint:disable-next-line:pipe-prefix
 @Pipe({ name: 'translate' })
@@ -28,40 +32,12 @@ describe('ThumbnailComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ThumbnailComponent);
-    comp = fixture.componentInstance; // BannerComponent test instance
+    comp = fixture.componentInstance; // ThumbnailComponent test instance
     de = fixture.debugElement.query(By.css('div.thumbnail'));
     el = de.nativeElement;
   });
 
-  describe('when the thumbnail exists', () => {
-    it('should display an image', () => {
-      const thumbnail = new Bitstream();
-      thumbnail._links = {
-        self: { href: 'self.url' },
-        bundle: { href: 'bundle.url' },
-        format: { href: 'format.url' },
-        content: { href: 'content.url' },
-      };
-      comp.thumbnail = thumbnail;
-      fixture.detectChanges();
-      const image: HTMLElement = de.query(By.css('img')).nativeElement;
-      expect(image.getAttribute('src')).toBe(comp.thumbnail._links.content.href);
-    });
-    it('should include the alt text', () => {
-      const thumbnail = new Bitstream();
-      thumbnail._links = {
-        self: { href: 'self.url' },
-        bundle: { href: 'bundle.url' },
-        format: { href: 'format.url' },
-        content: { href: 'content.url' },
-      };
-      comp.thumbnail = thumbnail;
-      fixture.detectChanges();
-      const image: HTMLElement = de.query(By.css('img')).nativeElement;
-      expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
-    });
-  });
-  describe(`when the thumbnail doesn't exist`, () => {
+  const withoutThumbnail = () => {
     describe('and there is a default image', () => {
       it('should display the default image', () => {
         comp.src = 'http://bit.stream';
@@ -73,6 +49,7 @@ describe('ThumbnailComponent', () => {
         comp.src = 'http://bit.stream';
         comp.defaultImage = 'http://default.img';
         comp.errorHandler();
+        comp.ngOnChanges();
         fixture.detectChanges();
         const image: HTMLElement = de.query(By.css('img')).nativeElement;
         expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
@@ -84,10 +61,98 @@ describe('ThumbnailComponent', () => {
         comp.errorHandler();
         expect(comp.src).toBe(null);
 
+        comp.ngOnChanges();
         fixture.detectChanges();
         const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
         expect(placeholder.innerHTML).toBe('TRANSLATED ' + comp.placeholder);
       });
     });
+  };
+
+  describe('with thumbnail as Bitstream', () => {
+    let thumbnail: Bitstream;
+    beforeEach(() => {
+      thumbnail = new Bitstream();
+      thumbnail._links = {
+        self: { href: 'self.url' },
+        bundle: { href: 'bundle.url' },
+        format: { href: 'format.url' },
+        content: { href: 'content.url' },
+      };
+    });
+
+    it('should display an image', () => {
+      comp.thumbnail = thumbnail;
+      comp.ngOnChanges();
+      fixture.detectChanges();
+      const image: HTMLElement = de.query(By.css('img')).nativeElement;
+      expect(image.getAttribute('src')).toBe(comp.thumbnail._links.content.href);
+    });
+
+    it('should include the alt text', () => {
+      comp.thumbnail = thumbnail;
+      comp.ngOnChanges();
+      fixture.detectChanges();
+      const image: HTMLElement = de.query(By.css('img')).nativeElement;
+      expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+    });
+
+    describe('when there is no thumbnail', () => {
+      withoutThumbnail();
+    });
+  });
+
+  describe('with thumbnail as RemoteData<Bitstream>', () => {
+    let thumbnail: RemoteData<Bitstream>;
+
+    describe('while loading', () => {
+      beforeEach(() => {
+        thumbnail = createPendingRemoteDataObject();
+      });
+
+      it('should show a loading animation', () => {
+        comp.thumbnail = thumbnail;
+        comp.ngOnChanges();
+        fixture.detectChanges();
+        expect(de.query(By.css('ds-loading'))).toBeTruthy();
+      });
+    });
+
+    describe('when there is a thumbnail', () => {
+      beforeEach(() => {
+        const bitstream = new Bitstream();
+        bitstream._links = {
+          self: { href: 'self.url' },
+          bundle: { href: 'bundle.url' },
+          format: { href: 'format.url' },
+          content: { href: 'content.url' },
+        };
+        thumbnail = createSuccessfulRemoteDataObject(bitstream);
+      });
+
+      it('should display an image', () => {
+        comp.thumbnail = thumbnail;
+        comp.ngOnChanges();
+        fixture.detectChanges();
+        const image: HTMLElement = de.query(By.css('img')).nativeElement;
+        expect(image.getAttribute('src')).toBe(comp.thumbnail.payload._links.content.href);
+      });
+
+      it('should display the alt text', () => {
+        comp.thumbnail = thumbnail;
+        comp.ngOnChanges();
+        fixture.detectChanges();
+        const image: HTMLElement = de.query(By.css('img')).nativeElement;
+        expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+      });
+    });
+
+    describe('when there is no thumbnail', () => {
+      beforeEach(() => {
+        thumbnail = createFailedRemoteDataObject();
+      });
+
+      withoutThumbnail();
+    });
   });
 });

From 120ecc6988cec452ab5c897155b712c368ed88df Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 17:09:57 +0200
Subject: [PATCH 15/17] 79597: Fix ds-metadata-field-wrapper for thumbnails

---
 .../metadata-field-wrapper.component.html                  | 2 +-
 .../metadata-field-wrapper.component.ts                    | 7 +------
 .../item-types/publication/publication.component.html      | 2 +-
 .../item-types/untyped-item/untyped-item.component.html    | 2 +-
 .../item-pages/journal-issue/journal-issue.component.html  | 2 +-
 .../journal-volume/journal-volume.component.html           | 2 +-
 .../item-pages/journal/journal.component.html              | 2 +-
 .../item-pages/org-unit/org-unit.component.html            | 2 +-
 .../item-pages/person/person.component.html                | 2 +-
 .../item-pages/project/project.component.html              | 2 +-
 .../item-detail-preview/item-detail-preview.component.html | 2 +-
 src/app/thumbnail/thumbnail.component.html                 | 2 +-
 src/app/thumbnail/thumbnail.component.ts                   | 3 +--
 13 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
index a41aa0d67af..d69f87883bb 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html
@@ -1,4 +1,4 @@
-<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img,.thumbnail-content'))">
+<div class="simple-view-element" [class.d-none]="hideIfNoTextContent && content.textContent.trim().length === 0">
   <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
   <div #content class="simple-view-element-body">
     <ng-content></ng-content>
diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
index 8af108cceb8..8c4e200423b 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
@@ -17,10 +17,5 @@ export class MetadataFieldWrapperComponent {
    */
   @Input() label: string;
 
-  /**
-   * Make hasNoValue() available in the template
-   */
-  hasNoValue(o: any): boolean {
-    return hasNoValue(o);
-  }
+  @Input() hideIfNoTextContent = true;
 }
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html
index 0758f7cda47..57b460c8144 100644
--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
-      <ds-metadata-field-wrapper>
+      <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
diff --git a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
index 3e20da30944..7ae9a1a9097 100644
--- a/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/+item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field mr-auto">
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ng-container *ngIf="!mediaViewer.image">
-      <ds-metadata-field-wrapper>
+      <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
         <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
       </ds-metadata-field-wrapper>
     </ng-container>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index af87daa2434..8e357140d86 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index 915967f41b5..7b80739bb89 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 8dd961692dc..bcbd1d7c477 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="thumbnail$ | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index 67b79163ed8..d328e93b153 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 21d833e4070..291813ff88a 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail [thumbnail]="thumbnail$ | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index facecb49967..a3324e47365 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -8,7 +8,7 @@ <h2 class="item-page-title-field mr-auto">
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
-    <ds-metadata-field-wrapper>
+    <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
       <ds-thumbnail
         [thumbnail]="thumbnail$ | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
diff --git a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
index cbc3f9ccfb6..e4d2526eb2f 100644
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/item-detail-preview/item-detail-preview.component.html
@@ -9,7 +9,7 @@ <h2 class="item-page-title-field">
     </h2>
     <div class="row mb-1">
       <div class="col-xs-12 col-md-4">
-        <ds-metadata-field-wrapper>
+        <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
           <ds-thumbnail [thumbnail]="getThumbnail() | async"></ds-thumbnail>
         </ds-metadata-field-wrapper>
         <ng-container *ngVar="(getFiles() | async) as bitstreams">
diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html
index a7f4c51510d..bf70928392f 100644
--- a/src/app/thumbnail/thumbnail.component.html
+++ b/src/app/thumbnail/thumbnail.component.html
@@ -1,4 +1,4 @@
-<div class="thumbnail" [class.limitWidth]="limitWidth">
+<div class="thumbnail" [class.limit-width]="limitWidth">
   <ds-loading *ngIf="isLoading; else showThumbnail" class="thumbnail-content" [showMessage]="false">
     text-content
   </ds-loading>
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index ec1e7eb368f..3e122cde786 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -2,7 +2,6 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { Bitstream } from '../core/shared/bitstream.model';
 import { hasValue } from '../shared/empty.util';
 import { RemoteData } from '../core/data/remote-data';
-import { BITSTREAM } from '../core/shared/bitstream.resource-type';
 
 /**
  * This component renders a given Bitstream as a thumbnail.
@@ -57,7 +56,7 @@ export class ThumbnailComponent implements OnChanges {
       return;
     }
     if (this.thumbnail instanceof Bitstream) {
-      this.resolveThumbnail(this.thumbnail as Bitstream)
+      this.resolveThumbnail(this.thumbnail as Bitstream);
     } else {
       const thumbnailRD = this.thumbnail as RemoteData<Bitstream>;
       if (thumbnailRD.isLoading) {

From 4b238e18423f97583e3454e3a0947395e6fcdc18 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 27 May 2021 18:03:43 +0200
Subject: [PATCH 16/17] 79597: Update ds-metadata-field-wrapper unit tests

---
 .../metadata-field-wrapper.component.spec.ts  | 109 +++++++++++-------
 1 file changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts
index 9c62b80cad7..e17e5397b7e 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MetadataFieldWrapperComponent } from './metadata-field-wrapper.component';
@@ -6,35 +6,34 @@ import { MetadataFieldWrapperComponent } from './metadata-field-wrapper.componen
 /* tslint:disable:max-classes-per-file */
 @Component({
     selector: 'ds-component-without-content',
-    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
       '</ds-metadata-field-wrapper>'
 })
-class NoContentComponent {}
+class NoContentComponent {
+  public hideIfNoTextContent = true;
+}
 
 @Component({
     selector: 'ds-component-with-empty-spans',
-    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
       '    <span></span>\n' +
       '    <span></span>\n' +
       '</ds-metadata-field-wrapper>'
 })
-class SpanContentComponent {}
+class SpanContentComponent {
+  @Input() hideIfNoTextContent = true;
+}
 
 @Component({
     selector: 'ds-component-with-text',
-    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+    template: '<ds-metadata-field-wrapper [hideIfNoTextContent]="hideIfNoTextContent" [label]="\'test label\'">\n' +
       '    <span>The quick brown fox jumps over the lazy dog</span>\n' +
       '</ds-metadata-field-wrapper>'
 })
-class TextContentComponent {}
+class TextContentComponent {
+  @Input() hideIfNoTextContent = true;
+}
 
-@Component({
-    selector: 'ds-component-with-image',
-    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
-      '    <img src="https://some/image.png" alt="an alt text">\n' +
-      '</ds-metadata-field-wrapper>'
-})
-class ImgContentComponent {}
 /* tslint:enable:max-classes-per-file */
 
 describe('MetadataFieldWrapperComponent', () => {
@@ -43,7 +42,7 @@ describe('MetadataFieldWrapperComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [MetadataFieldWrapperComponent, NoContentComponent, SpanContentComponent, TextContentComponent, ImgContentComponent]
+      declarations: [MetadataFieldWrapperComponent, NoContentComponent, SpanContentComponent, TextContentComponent]
     }).compileComponents();
   }));
 
@@ -58,38 +57,60 @@ describe('MetadataFieldWrapperComponent', () => {
     expect(component).toBeDefined();
   });
 
-  it('should not show the component when there is no content', () => {
-    const parentFixture = TestBed.createComponent(NoContentComponent);
-    parentFixture.detectChanges();
-    const parentNative = parentFixture.nativeElement;
-    const nativeWrapper = parentNative.querySelector(wrapperSelector);
-    expect(nativeWrapper.classList.contains('d-none')).toBe(true);
-  });
+  describe('with hideIfNoTextContent=true', () => {
+    it('should not show the component when there is no content', () => {
+      const parentFixture = TestBed.createComponent(NoContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(true);
+    });
 
-  it('should not show the component when there is DOM content but not text or an image', () => {
-    const parentFixture = TestBed.createComponent(SpanContentComponent);
-    parentFixture.detectChanges();
-    const parentNative = parentFixture.nativeElement;
-    const nativeWrapper = parentNative.querySelector(wrapperSelector);
-    expect(nativeWrapper.classList.contains('d-none')).toBe(true);
-  });
+    it('should not show the component when there is no text content', () => {
+      const parentFixture = TestBed.createComponent(SpanContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(true);
+    });
 
-  it('should show the component when there is text content', () => {
-    const parentFixture = TestBed.createComponent(TextContentComponent);
-    parentFixture.detectChanges();
-    const parentNative = parentFixture.nativeElement;
-    const nativeWrapper = parentNative.querySelector(wrapperSelector);
-    parentFixture.detectChanges();
-    expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    it('should show the component when there is text content', () => {
+      const parentFixture = TestBed.createComponent(TextContentComponent);
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      parentFixture.detectChanges();
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
   });
 
-  it('should show the component when there is img content', () => {
-    const parentFixture = TestBed.createComponent(ImgContentComponent);
-    parentFixture.detectChanges();
-    const parentNative = parentFixture.nativeElement;
-    const nativeWrapper = parentNative.querySelector(wrapperSelector);
-    parentFixture.detectChanges();
-    expect(nativeWrapper.classList.contains('d-none')).toBe(false);
-  });
+  describe('with hideIfNoTextContent=false', () => {
+    it('should show the component when there is no content', () => {
+      const parentFixture = TestBed.createComponent(NoContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
 
+    it('should show the component when there is no text content', () => {
+      const parentFixture = TestBed.createComponent(SpanContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+
+    it('should show the component when there is text content', () => {
+      const parentFixture = TestBed.createComponent(TextContentComponent);
+      parentFixture.componentInstance.hideIfNoTextContent = false;
+      parentFixture.detectChanges();
+      const parentNative = parentFixture.nativeElement;
+      const nativeWrapper = parentNative.querySelector(wrapperSelector);
+      parentFixture.detectChanges();
+      expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+    });
+  });
 });

From 95b98d3f7960776645eff3da8df00a0349a32a94 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Mon, 31 May 2021 10:20:28 +0200
Subject: [PATCH 17/17] 79597: Remove unused imports

---
 .../metadata-field-wrapper/metadata-field-wrapper.component.ts | 1 -
 src/app/+item-page/simple/item-types/shared/item.component.ts  | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
index 8c4e200423b..5c6b99248f7 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core';
-import { hasNoValue } from '../../../shared/empty.util';
 
 /**
  * This component renders any content inside this wrapper.
diff --git a/src/app/+item-page/simple/item-types/shared/item.component.ts b/src/app/+item-page/simple/item-types/shared/item.component.ts
index 8763d8c899e..130f67edc71 100644
--- a/src/app/+item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.ts
@@ -1,10 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
 import { environment } from '../../../../../environments/environment';
 import { BitstreamDataService } from '../../../../core/data/bitstream-data.service';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
-import { getFirstSucceededRemoteDataPayload, takeUntilCompletedRemoteData } from '../../../../core/shared/operators';
+import { takeUntilCompletedRemoteData } from '../../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page-routing-paths';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { RemoteData } from '../../../../core/data/remote-data';