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/44] 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 dbf8f6732c..ec11ba6c0f 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 e2718bac06..9feac243db 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 7e981d5fe6..8d5e780f27 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 4c3317a0c0..ac37eba016 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/44] 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 ec11ba6c0f..4789917f1c 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 9feac243db..4c8c7d90ad 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 8d5e780f27..21a5da3567 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 ac37eba016..2235eda34d 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/44] 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 4c8c7d90ad..290b395212 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/44] 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 822d4858ce..14d56d4104 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 @@
 <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 e1c776f366..2a7c9bd023 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 @@
 <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 9967b940ac..0590c8bfe4 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 @@
 <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/44] 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 290b395212..e2374c96db 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 298be09f67..d0e1564281 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/44] 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 e2374c96db..a96147468c 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/44] 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 0bc172b408..38b088e50f 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 4789917f1c..cef88e0192 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 21678c9162..687282a373 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/44] 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 687282a373..82eadc04de 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 21a5da3567..11dee37037 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 060d0dd556ad9bbee790018fbb48f8815198093e Mon Sep 17 00:00:00 2001
From: Alessandro Martelli <alessandro.martelli@4science.it>
Date: Thu, 27 May 2021 09:43:29 +0200
Subject: [PATCH 09/44] [CST-4223] Creating a new submission should redirect to
 workspaceitem edit page

---
 .../submit/submission-submit.component.html   | 10 -------
 .../submission-submit.component.spec.ts       | 27 ++++++++-----------
 .../submit/submission-submit.component.ts     |  8 +-----
 3 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/src/app/submission/submit/submission-submit.component.html b/src/app/submission/submit/submission-submit.component.html
index a7680f07c2..e69de29bb2 100644
--- a/src/app/submission/submit/submission-submit.component.html
+++ b/src/app/submission/submit/submission-submit.component.html
@@ -1,10 +0,0 @@
-<div class="submission-submit-container">
-  <div class="submission-submit-container">
-    <ds-submission-form [collectionId]="collectionId"
-                        [sections]="sections"
-                        [selfUrl]="selfUrl"
-                        [submissionDefinition]="submissionDefinition"
-                        [item]="item"
-                        [submissionId]="submissionId"></ds-submission-form>
-  </div>
-</div>
diff --git a/src/app/submission/submit/submission-submit.component.spec.ts b/src/app/submission/submit/submission-submit.component.spec.ts
index 16e26e3b33..1b76082d1b 100644
--- a/src/app/submission/submit/submission-submit.component.spec.ts
+++ b/src/app/submission/submit/submission-submit.component.spec.ts
@@ -26,7 +26,6 @@ describe('SubmissionSubmitComponent Component', () => {
   let itemDataService: ItemDataService;
   let router: RouterStub;
 
-  const submissionId = '826';
   const submissionObject: any = mockSubmissionObject;
 
   beforeEach(waitForAsync(() => {
@@ -67,27 +66,23 @@ describe('SubmissionSubmitComponent Component', () => {
     router = null;
   });
 
-  it('should init properly when a valid SubmissionObject has been retrieved',() => {
-
-    submissionServiceStub.createSubmission.and.returnValue(observableOf(submissionObject));
-
-    fixture.detectChanges();
-
-    expect(comp.submissionId.toString()).toEqual(submissionId);
-    expect(comp.collectionId).toBe(submissionObject.collection.id);
-    expect(comp.selfUrl).toBe(submissionObject._links.self.href);
-    expect(comp.sections).toBe(submissionObject.sections);
-    expect(comp.submissionDefinition).toBe(submissionObject.submissionDefinition);
-
-  });
-
   it('should redirect to mydspace when an empty SubmissionObject has been retrieved',() => {
 
     submissionServiceStub.createSubmission.and.returnValue(observableOf({}));
 
     fixture.detectChanges();
 
-    expect(router.navigate).toHaveBeenCalled();
+    expect(router.navigate).toHaveBeenCalledWith(['/mydspace']);
+
+  });
+
+  it('should redirect to workspaceitem edit when a not empty SubmissionObject has been retrieved',() => {
+
+    submissionServiceStub.createSubmission.and.returnValue(observableOf({ id: '1234'}));
+
+    fixture.detectChanges();
+
+    expect(router.navigate).toHaveBeenCalledWith(['/workspaceitems', '1234', 'edit'], { replaceUrl: true});
 
   });
 
diff --git a/src/app/submission/submit/submission-submit.component.ts b/src/app/submission/submit/submission-submit.component.ts
index 0c2172368a..af1bf38539 100644
--- a/src/app/submission/submit/submission-submit.component.ts
+++ b/src/app/submission/submit/submission-submit.component.ts
@@ -122,13 +122,7 @@ export class SubmissionSubmitComponent implements OnDestroy, OnInit {
               this.notificationsService.info(null, this.translate.get('submission.general.cannot_submit'));
               this.router.navigate(['/mydspace']);
             } else {
-              this.collectionId = (submissionObject.collection as Collection).id;
-              this.sections = submissionObject.sections;
-              this.selfUrl = submissionObject._links.self.href;
-              this.submissionDefinition = (submissionObject.submissionDefinition as SubmissionDefinitionsModel);
-              this.submissionId = submissionObject.id;
-              this.itemLink$.next(submissionObject._links.item.href);
-              this.item = submissionObject.item as Item;
+              this.router.navigate(['/workspaceitems', submissionObject.id, 'edit'], { replaceUrl: true});
             }
           }
         }),

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 10/44] 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 cef88e0192..645bce9b80 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 a96147468c..b15238afac 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 11dee37037..30911644f7 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 11/44] 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 df6c9e60c0..feb282d3a7 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 cdc19b7f14..aa2352b284 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 bacd657663..8fdad59827 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 2c3087d701..b8be58a603 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 005fa9cc83..8281eb0e04 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 e84e8c49d0..88498a4d67 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 9b9d174704..d47e897edc 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 f676ba303b..63097c4f57 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 46675615f0..68a7f2f991 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 f8c75fc0d4..739fa6c7a8 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 8025213b3b..d8c253c8a9 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 85aeb63a6b..bc16853721 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 12/44] 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 1df4026f83..0000000000
--- 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 e69de29bb2..0000000000
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 825a4d5c60..0000000000
--- 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 92d93686dc..0000000000
--- 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 4de0f2901e..c5a91bd02c 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 13/44] 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 bc1c63cc32..c5393055df 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 @@
                            [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 14/44] 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 c791cec600..a41aa0d67a 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 73219cbb8f..0758f7cda4 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 @@
   <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 120eda930f..8763d8c899 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 8d46a2c5a9..3e20da3094 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 @@
   <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 5749c5797d..af87daa243 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 @@
 <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 2c2a4995c2..915967f41b 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 @@
 <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 49fdc935c5..8dd961692d 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 @@
 <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 8281eb0e04..23de8b134f 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 14d56d4104..67b79163ed 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 @@
 <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 2a7c9bd023..21d833e407 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 @@
 <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 0590c8bfe4..facecb4996 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 @@
   <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 645bce9b80..593c1c10b8 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 30911644f7..ec1e7eb368 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 15/44] 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 593c1c10b8..a7f4c51510 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 82eadc04de..bc9d159750 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 16/44] 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 a41aa0d67a..d69f87883b 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 8af108cceb..8c4e200423 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 0758f7cda4..57b460c814 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 @@
 <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 3e20da3094..7ae9a1a909 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 @@
 <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 af87daa243..8e357140d8 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 @@
 </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 915967f41b..7b80739bb8 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 @@
 </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 8dd961692d..bcbd1d7c47 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 @@
 </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 67b79163ed..d328e93b15 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 @@
 </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 21d833e407..291813ff88 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 @@
 </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 facecb4996..a3324e4736 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 @@
 </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 cbc3f9ccfb..e4d2526eb2 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>
     <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 a7f4c51510..bf70928392 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 ec1e7eb368..3e122cde78 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 17/44] 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 9c62b80cad..e17e5397b7 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 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 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);
-  });
+  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 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 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 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);
+    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 18/44] 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 8c4e200423..5c6b99248f 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 8763d8c899..130f67edc7 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';

From bb2892edd896b6fa6ea9bb8261dd77e6d799de5d Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Tue, 8 Jun 2021 23:48:24 +0200
Subject: [PATCH 19/44] BUGFIX: Encode special characters when sending workflow
 action

---
 src/app/core/data/request.service.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/core/data/request.service.ts b/src/app/core/data/request.service.ts
index 4a85df0d34..14499b8214 100644
--- a/src/app/core/data/request.service.ts
+++ b/src/app/core/data/request.service.ts
@@ -265,11 +265,13 @@ export class RequestService {
     if (isNotEmpty(body) && typeof body === 'object') {
       Object.keys(body)
         .forEach((param) => {
-          const paramValue = `${param}=${body[param]}`;
+          const encodedParam = encodeURIComponent(param);
+          const encodedBody = encodeURIComponent(body[param]);
+          const paramValue = `${encodedParam}=${encodedBody}`;
           queryParams = isEmpty(queryParams) ? queryParams.concat(paramValue) : queryParams.concat('&', paramValue);
         });
     }
-    return encodeURI(queryParams);
+    return queryParams;
   }
 
   /**

From a27a7a4083d5fd35cd9e4466e3c7c99062cbcf48 Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Thu, 10 Jun 2021 15:00:03 +0200
Subject: [PATCH 20/44] Test requestService.uriEncodeBody

---
 src/app/core/data/request.service.spec.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/app/core/data/request.service.spec.ts b/src/app/core/data/request.service.spec.ts
index e6dde7a032..7a07f6fe10 100644
--- a/src/app/core/data/request.service.spec.ts
+++ b/src/app/core/data/request.service.spec.ts
@@ -579,4 +579,19 @@ describe('RequestService', () => {
       });
     });
   });
+
+  describe('uriEncodeBody', () => {
+    it('should properly encode the body', () => {
+      const body = {
+        'property1': 'multiple\nlines\nto\nsend',
+        'property2': 'sp&ci@l characters',
+        'sp&ci@l-chars in prop': 'test123',
+      };
+      const queryParams = service.uriEncodeBody(body);
+      expect(queryParams).toEqual(
+        'property1=multiple%0Alines%0Ato%0Asend&property2=sp%26ci%40l%20characters&sp%26ci%40l-chars%20in%20prop=test123'
+      );
+    });
+  });
+
 });

From c756c68f286e3a244a24fd3e33b3af829da54b24 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Tue, 1 Jun 2021 12:46:23 +0200
Subject: [PATCH 21/44] move header changes to dspace theme

---
 .../+home-page/home-page-routing.module.ts    |  1 +
 src/app/app.module.ts                         |  2 +
 .../header-navbar-wrapper.component.html      |  1 +
 .../header-navbar-wrapper.component.scss      |  4 --
 ...hemed-header-navbar-wrapper.component.scss |  3 +
 .../themed-header-navbar-wrapper.component.ts | 25 +++++++++
 src/app/header/header.component.html          | 41 +++++++-------
 src/app/header/header.component.scss          | 32 ++++++-----
 .../expandable-navbar-section.component.html  |  2 +-
 .../navbar-section.component.html             |  2 +-
 src/app/navbar/navbar.component.html          | 31 ++++------
 src/app/navbar/navbar.component.scss          | 17 +-----
 src/app/navbar/navbar.component.ts            |  3 +-
 src/app/root/root.component.html              |  2 +-
 src/styles/_custom_variables.scss             |  2 +-
 .../header-navbar-wrapper.component.html      |  0
 .../header-navbar-wrapper.component.scss      |  0
 .../header-navbar-wrapper.component.ts        | 15 +++++
 src/themes/custom/theme.module.ts             |  2 +
 .../header-navbar-wrapper.component.html      |  3 +
 .../header-navbar-wrapper.component.scss      |  0
 .../header-navbar-wrapper.component.ts        | 13 +++++
 .../dspace/app/header/header.component.html   | 24 ++++++++
 .../dspace/app/header/header.component.scss   | 19 +++++++
 .../dspace/app/header/header.component.ts     | 13 +++++
 .../dspace/app/navbar/navbar.component.html   | 24 ++++++++
 .../dspace/app/navbar/navbar.component.scss   | 56 ++++++++++++++++++-
 .../dspace/app/navbar/navbar.component.ts     |  2 +-
 src/themes/dspace/styles/_global-styles.scss  | 12 +++-
 .../styles/_theme_css_variable_overrides.scss |  1 +
 src/themes/dspace/theme.module.ts             |  4 ++
 31 files changed, 274 insertions(+), 82 deletions(-)
 create mode 100644 src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
 create mode 100644 src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts
 create mode 100644 src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html
 create mode 100644 src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss
 create mode 100644 src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts
 create mode 100644 src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
 create mode 100644 src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
 create mode 100644 src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
 create mode 100644 src/themes/dspace/app/header/header.component.html
 create mode 100644 src/themes/dspace/app/header/header.component.scss
 create mode 100644 src/themes/dspace/app/header/header.component.ts
 create mode 100644 src/themes/dspace/app/navbar/navbar.component.html

diff --git a/src/app/+home-page/home-page-routing.module.ts b/src/app/+home-page/home-page-routing.module.ts
index ec6a547359..2a41c079da 100644
--- a/src/app/+home-page/home-page-routing.module.ts
+++ b/src/app/+home-page/home-page-routing.module.ts
@@ -20,6 +20,7 @@ import { ThemedHomePageComponent } from './themed-home-page.component';
               id: 'statistics_site',
               active: true,
               visible: true,
+              index: 2,
               model: {
                 type: MenuItemType.LINK,
                 text: 'menu.section.statistics',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 03cd819625..3d45ffbfc2 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component
 import { ThemedHeaderComponent } from './header/themed-header.component';
 import { ThemedFooterComponent } from './footer/themed-footer.component';
 import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
+import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -129,6 +130,7 @@ const DECLARATIONS = [
   HeaderComponent,
   ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
+  ThemedHeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index c1843318b8..f99070b738 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,4 @@
 <div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
     <ds-themed-header></ds-themed-header>
+    <ds-themed-navbar></ds-themed-navbar>
 </div>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index a2ebd0d41a..b297979fd0 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -5,7 +5,3 @@
         position: sticky;
     }
 }
-
-:host {
-  z-index: var(--ds-nav-z-index);
-}
diff --git a/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..db392096aa
--- /dev/null
+++ b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
@@ -0,0 +1,3 @@
+:host {
+  z-index: var(--ds-nav-z-index);
+}
diff --git a/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..7f9c181fe2
--- /dev/null
+++ b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component';
+
+/**
+ * Themed wrapper for BreadcrumbsComponent
+ */
+@Component({
+  selector: 'ds-themed-header-navbar-wrapper',
+  styleUrls: ['./themed-header-navbar-wrapper.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
+  protected getComponentName(): string {
+    return 'HeaderNavbarWrapperComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header-nav-wrapper/header-navbar-wrapper.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header-navbar-wrapper.component`);
+  }
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index dc0d066a4e..a1fa051610 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,24 +1,23 @@
-<header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
-    <div class="d-flex flex-grow-1">
-      <a class="navbar-brand m-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg" alt="logo"/>
+<header>
+  <div class="container">
+    <div class="d-flex flex-row justify-content-between">
+      <a class="navbar-brand my-2" routerLink="/home">
+        <img src="assets/images/dspace-logo.svg"/>
       </a>
-    </div>
-    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
-      <ds-search-navbar class="navbar-search"></ds-search-navbar>
-      <ds-lang-switch></ds-lang-switch>
-      <ds-auth-nav-menu></ds-auth-nav-menu>
-      <ds-impersonate-navbar></ds-impersonate-navbar>
-      <div class="pl-2">
-        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
-                aria-controls="collapsingNav"
-                aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
-        </button>
-      </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+      <nav class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+        <ds-search-navbar></ds-search-navbar>
+        <ds-lang-switch></ds-lang-switch>
+        <ds-auth-nav-menu></ds-auth-nav-menu>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <div class="pl-2">
+          <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+                  aria-controls="collapsingNav"
+                  aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
 </header>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index c85daf8516..922b2d02e1 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,19 +1,23 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  nav.navbar {
-    display: none;
-  }
-  .header {
-    background-color: var(--ds-header-bg);
+.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+  max-width: 100%;
+  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+    max-height: var(--ds-header-logo-height-xs);
   }
 }
 
-.navbar-brand img {
-    @media screen and (max-width: map-get($grid-breakpoints, md)) {
-        height: var(--ds-header-logo-height-xs);
-    }
-}
 .navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-    color: var(--bs-link-color);
+  background-image: none !important;
+  line-height: 1.5;
 }
+
+.navbar ::ng-deep {
+  a {
+    color: var(--ds-header-icon-color);
+
+    &:hover, &focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+  }
+}
+
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index a1c02bfa31..a7cf7c1856 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -1,4 +1,4 @@
-<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center"
+<li class="nav-item dropdown"
     (mouseenter)="activateSection($event)"
     (mouseleave)="deactivateSection($event)">
     <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index db25f58089..00461995bc 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,4 +1,4 @@
-<li class="nav-item h-100 d-flex flex-column justify-content-center">
+<li class="nav-item">
   <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
 </li>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 50e526b78b..2356077e43 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,24 +1,17 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}"
      [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     class="navbar navbar-expand-md navbar-light p-0 navbar-container"
-     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
-  <div class="container h-100">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" alt="logo"/>
-    </a>
-
-    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
-        <ng-container *ngFor="let section of (sections | async)">
-          <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-        </ng-container>
-      </ul>
+     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+    <div class="container">
+        <div class="reset-padding-md w-100">
+            <div id="collapsingNav">
+                <ul class="navbar-nav mr-auto shadow-none">
+                    <ng-container *ngFor="let section of (sections | async)">
+                        <ng-container
+                                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
     </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
-    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
-    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
-    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
-  </div>
 </nav>
 
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index be6e8ac55e..d131bf95bf 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,14 +1,12 @@
 nav.navbar {
-    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+    border-bottom: 1px var(--bs-gray-400) solid;
     align-items: baseline;
-    color: var(--ds-header-icon-color);
 }
 
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
-        width: 100%;
+        width: 100vw;
         background-color: var(--bs-white);
         position: absolute;
         overflow: hidden;
@@ -31,20 +29,9 @@ nav.navbar {
     @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .container {
             padding: 0 var(--bs-spacer);
-            a.navbar-brand {
-              display: none;
-            }
-            .navbar-collapsed {
-              display: none;
-            }
         }
         padding: 0;
     }
-    height: 80px;
-}
-
-a.navbar-brand img {
-    max-height: var(--ds-header-logo-height);
 }
 
 .navbar-nav {
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index ae5fb262ae..e741cea285 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -46,6 +46,7 @@ export class NavbarComponent extends MenuComponent {
         id: `browse_global_communities_and_collections`,
         active: false,
         visible: true,
+        index: 0,
         model: {
           type: MenuItemType.LINK,
           text: `menu.section.browse_global_communities_and_collections`,
@@ -57,11 +58,11 @@ export class NavbarComponent extends MenuComponent {
         id: 'browse_global',
         active: false,
         visible: true,
+        index: 1,
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.browse_global'
         } as TextMenuItemModel,
-        index: 0
       },
     ];
     // Read the different Browse-By types from config and add them to the browse menu
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index aef07d79f4..67d04f999f 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -4,7 +4,7 @@
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
-    <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
+    <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
 
     <ds-notifications-board
       [options]="notificationOptions">
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 298be09f67..dc76d772d1 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -20,7 +20,7 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
-  --ds-header-logo-height: 40px;
+  --ds-header-logo-height: 50px;
   --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$cyan};
   --ds-header-icon-color-hover: #{darken($white, 15%)};
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..875b5f69b8
--- /dev/null
+++ b/src/themes/custom/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  // styleUrls: ['header-navbar-wrapper.component.scss'],
+  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  // templateUrl: 'header-navbar-wrapper.component.html',
+  templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/theme.module.ts b/src/themes/custom/theme.module.ts
index 23fcf4c325..49b54cd850 100644
--- a/src/themes/custom/theme.module.ts
+++ b/src/themes/custom/theme.module.ts
@@ -78,6 +78,7 @@ import { NavbarComponent } from './app/navbar/navbar.component';
 import { HeaderComponent } from './app/header/header.component';
 import { FooterComponent } from './app/footer/footer.component';
 import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -117,6 +118,7 @@ const DECLARATIONS = [
   FooterComponent,
   HeaderComponent,
   NavbarComponent,
+  HeaderNavbarWrapperComponent,
   BreadcrumbsComponent
 ];
 
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
new file mode 100644
index 0000000000..091d152258
--- /dev/null
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -0,0 +1,3 @@
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+  <ds-themed-header></ds-themed-header>
+</div>
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
new file mode 100644
index 0000000000..36e23e174a
--- /dev/null
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
new file mode 100644
index 0000000000..dc0d066a4e
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.html
@@ -0,0 +1,24 @@
+<header class="header">
+  <nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
+    <div class="d-flex flex-grow-1">
+      <a class="navbar-brand m-2" routerLink="/home">
+        <img src="assets/images/dspace-logo.svg" alt="logo"/>
+      </a>
+    </div>
+    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
+      <ds-search-navbar class="navbar-search"></ds-search-navbar>
+      <ds-lang-switch></ds-lang-switch>
+      <ds-auth-nav-menu></ds-auth-nav-menu>
+      <ds-impersonate-navbar></ds-impersonate-navbar>
+      <div class="pl-2">
+        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
+                aria-controls="collapsingNav"
+                aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <ds-themed-navbar></ds-themed-navbar>
+
+</header>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
new file mode 100644
index 0000000000..ab418865f1
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -0,0 +1,19 @@
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  nav.navbar {
+    display: none;
+  }
+  .header {
+    background-color: var(--ds-header-bg);
+  }
+}
+
+.navbar-brand img {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    height: var(--ds-header-logo-height-xs);
+  }
+}
+.navbar-toggler .navbar-toggler-icon {
+  background-image: none !important;
+  line-height: 1.5;
+  color: var(--bs-link-color);
+}
diff --git a/src/themes/dspace/app/header/header.component.ts b/src/themes/dspace/app/header/header.component.ts
new file mode 100644
index 0000000000..6da89b47d5
--- /dev/null
+++ b/src/themes/dspace/app/header/header.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  styleUrls: ['header.component.scss'],
+  templateUrl: 'header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
new file mode 100644
index 0000000000..50e526b78b
--- /dev/null
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -0,0 +1,24 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+     class="navbar navbar-expand-md navbar-light p-0 navbar-container"
+     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
+  <div class="container h-100">
+    <a class="navbar-brand my-2" routerLink="/home">
+      <img src="assets/images/dspace-logo.svg" alt="logo"/>
+    </a>
+
+    <div id="collapsingNav" class="w-100 h-100">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+        <ng-container *ngFor="let section of (sections | async)">
+          <ng-container
+            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+        </ng-container>
+      </ul>
+    </div>
+    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
+    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
+    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
+    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+  </div>
+</nav>
+
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 463a4269ee..210847c1d9 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,5 +1,57 @@
-@import 'src/app/navbar/navbar.component.scss';
-
 nav.navbar {
+  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
   border-bottom: 5px var(--bs-green) solid;
+  align-items: baseline;
+  color: var(--ds-header-icon-color);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+  .navbar {
+    width: 100%;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+    }
+  }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .reset-padding-md {
+    margin-left: calc(var(--bs-spacer) / -2);
+    margin-right: calc(var(--bs-spacer) / -2);
+  }
+}
+
+/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+.navbar-expand-md.navbar-container {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    > .container {
+      padding: 0 var(--bs-spacer);
+      a.navbar-brand {
+        display: none;
+      }
+      .navbar-collapsed {
+        display: none;
+      }
+    }
+    padding: 0;
+  }
+  height: 80px;
+}
+
+a.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+}
+
+.navbar-nav {
+  ::ng-deep a.nav-link {
+    color: var(--ds-navbar-link-color);
+  }
+  ::ng-deep a.nav-link:hover {
+    color: var(--ds-navbar-link-color-hover);
+  }
 }
diff --git a/src/themes/dspace/app/navbar/navbar.component.ts b/src/themes/dspace/app/navbar/navbar.component.ts
index e375011683..321351a933 100644
--- a/src/themes/dspace/app/navbar/navbar.component.ts
+++ b/src/themes/dspace/app/navbar/navbar.component.ts
@@ -8,7 +8,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
 @Component({
   selector: 'ds-navbar',
   styleUrls: ['./navbar.component.scss'],
-  templateUrl: '../../../../app/navbar/navbar.component.html',
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends BaseComponent {
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
index 1fb60b64a2..72fac11156 100644
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -3,7 +3,7 @@
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
 
-.facet-filter,.setting-option {
+.facet-filter, .setting-option {
   background-color: var(--bs-light);
   border-radius: var(--bs-border-radius);
 
@@ -21,3 +21,13 @@
     font-size: 1.1rem
   }
 }
+
+header {
+  ds-navbar-section > li,
+  ds-expandable-navbar-section > li {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+}
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 2a61babdb7..e4b4b61f45 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -1,6 +1,7 @@
 // Override or add CSS variables for your theme here
 
 :root {
+  --ds-header-logo-height: 40px;
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
   --ds-home-news-link-color: #{$green};
diff --git a/src/themes/dspace/theme.module.ts b/src/themes/dspace/theme.module.ts
index ed840c2e25..40138aa490 100644
--- a/src/themes/dspace/theme.module.ts
+++ b/src/themes/dspace/theme.module.ts
@@ -41,9 +41,13 @@ import { CollectionPageModule } from '../../app/+collection-page/collection-page
 import { SubmissionModule } from '../../app/submission/submission.module';
 import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
 import { NavbarComponent } from './app/navbar/navbar.component';
+import { HeaderComponent } from './app/header/header.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomeNewsComponent,
+  HeaderComponent,
+  HeaderNavbarWrapperComponent,
   NavbarComponent
 ];
 

From 74a17da5b846b7bea48e325d57a6690d31fbe891 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Tue, 1 Jun 2021 13:25:01 +0200
Subject: [PATCH 22/44] fix issue where home page background image would wrap
 around on certain screen widths

---
 .../dspace/app/+home-page/home-news/home-news.component.scss  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/themes/dspace/app/+home-page/home-news/home-news.component.scss b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
index b5a070e51e..5e89f6b62f 100644
--- a/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
+++ b/src/themes/dspace/app/+home-page/home-news/home-news.component.scss
@@ -6,12 +6,8 @@
     color: white;
     background-color: var(--bs-info);
     position: relative;
-    background-position-y: -200px;
     background-image: url('/assets/dspace/images/banner.jpg');
     background-size: cover;
-    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-      background-position-y: 0;
-    }
 
     .container {
       position: relative;

From 2ddda1c766eb2062e6f32d476c89cde5e57226ff Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Tue, 1 Jun 2021 16:03:45 +0200
Subject: [PATCH 23/44] enable e2e stacktrace

---
 e2e/protractor.conf.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
index 51180c8044..93bf7f3301 100644
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@@ -69,7 +69,6 @@ exports.config = {
   plugins: [{
     path: '../node_modules/protractor-istanbul-plugin'
   }],
-
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
@@ -85,7 +84,7 @@ exports.config = {
   onPrepare: function () {
     jasmine.getEnv().addReporter(new SpecReporter({
       spec: {
-        displayStacktrace: true
+        displayStacktrace: 'pretty'
       }
     }));
   }

From f2a29a642576dd8b116280db4f2c0b5b66ee953d Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Fri, 4 Jun 2021 10:35:42 +0200
Subject: [PATCH 24/44] improve structure double footer

---
 src/app/footer/footer.component.html | 109 ++++++++++++++-------------
 src/app/footer/footer.component.scss |  19 +++--
 src/styles/_custom_variables.scss    |  10 +--
 3 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index bc407c2a97..4990290037 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,72 +1,79 @@
-<footer class="top-footer  text-lg-start">
-  <!-- Grid container -->
-  <div *ngIf="showTopFooter" class="container p-4">
-    <!--Grid row-->
-    <div class="row">
+<footer class="text-lg-start">
+  <div *ngIf="showTopFooter" class="top-footer">
+    <!-- Grid container -->
+    <div class=" container p-4">
+      <!--Grid row-->
+      <div class="row">
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Lorem ipsum</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Ut facilisis</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Aenean sit</a>
-          </li>
-        </ul>
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Lorem ipsum</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Ut facilisis</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Aenean sit</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Suspendisse potenti</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+            voluptatem veniam, est atque cumque eum delectus sint!
+          </p>
+        </div>
+        <!--Grid column-->
       </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Suspendisse potenti</a>
-          </li>
-        </ul>
-      </div>
-      <!--Grid column-->
-
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
-        <h5 class="text-uppercase">Footer Content</h5>
-
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
-          molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
-          voluptatem veniam, est atque cumque eum delectus sint!
-        </p>
-      </div>
-      <!--Grid column-->
+      <!--Grid row-->
     </div>
-    <!--Grid row-->
   </div>
   <!-- Grid container -->
 
   <!-- Copyright -->
-  <div class="footer p-1 d-flex justify-content-center align-items-center text-white">
+  <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
     <div class="content-container">
       <p class="m-0">
-        <a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        <a class="text-white"
+           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
-        <a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+        <a class="text-white"
+           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
         <li>
-          <a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+          <a class="text-white" href="#"
+             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
       </ul>
     </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 3f6ccb58e7..350295b870 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,11 +1,10 @@
 :host {
-
-  .top-footer {
-    background-color: var(--ds-top-footer-bg);
-    border-top: var(--ds-footer-border);
+  footer {
+    background-color: var(--ds-footer-bg);
     text-align: center;
-    padding: var(--ds-footer-padding);
     z-index: var(--ds-footer-z-index);
+    border-top: var(--ds-footer-border);
+    padding: var(--ds-footer-padding);
 
     p {
       margin: 0;
@@ -15,12 +14,18 @@
       height: var(--ds-footer-logo-height);
     }
 
-    .footer {
-      background-color: var(--ds-footer-bg);
 
+    .top-footer {
+      background-color: var(--ds-top-footer-bg);
+      padding: var(--ds-footer-padding);
+      margin: calc(var(--ds-footer-padding) * -1);
+    }
+
+    .bottom-footer {
       ul {
         li {
           display: inline-flex;
+
           a {
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index dc76d772d1..51195b50a1 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -61,12 +61,12 @@
   --ds-sidebar-items-width: #{$sidebar-items-width};
   --ds-total-sidebar-width: #{$total-sidebar-width};
 
-  --ds-top-footer-bg: #{$gray-200} !important;
-  --ds-footer-bg: #{theme-color('primary')} !important;
+  --ds-top-footer-bg: #{$gray-200};
+  --ds-footer-bg: #{theme-color('primary')};
   --ds-footer-border: 1px solid var(--bs-gray-400);
-  --ds-footer-padding: 0 !important;
-  --ds-footer-padding-bottom: 0 !important;
-  --ds-footer-logo-height: 50px !important;
+  --ds-footer-padding: 0;
+  --ds-footer-padding-bottom: 0;
+  --ds-footer-logo-height: 50px;
 
   $home-news-link-color: $cyan;
   --ds-home-news-link-color: #{$home-news-link-color};

From eead9473528ab4d87c394704407579e307e0a305 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Fri, 4 Jun 2021 13:20:27 +0200
Subject: [PATCH 25/44] put more useful example sass variable overrides in
 custom theme

---
 .../_theme_sass_variable_overrides.scss       | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/themes/custom/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index 1e5d0f0520..9f69b17ebd 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -3,14 +3,31 @@
 // still uses Sass variables internally. So if you want to override bootstrap (or other sass
 // variables) you can do so here. Their CSS counterparts will include the changes you make here
 
-// $blue:    #007bff !default;
-// $indigo:  #6610f2 !default;
-// $purple:  #6f42c1 !default;
-// $pink:    #e83e8c !default;
-// $red:     #dc3545 !default;
-// $orange:  #fd7e14 !default;
-// $yellow:  #ffc107 !default;
-// $green:   #28a745 !default;
-// $teal:    #20c997 !default;
-// $cyan:    #17a2b8 !default;
-
+// $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+//
+// $gray-base: #000 !default;
+// $gray-900: lighten($gray-base, 13.5%) !default; // #222
+// $gray-800: lighten($gray-base, 26.6%) !default; // #444
+// $gray-700: lighten($gray-base, 46.6%) !default; // #777
+// $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
+// $gray-100: lighten($gray-base, 93.5%) !default; // #eee
+//
+// $blue:   #2B4E72 !default;
+// $green:  #94BA65 !default;
+// $cyan:   #006666 !default;
+// $yellow: #ec9433 !default;
+// $red:    #CF4444 !default;
+// $dark:   darken($blue, 17%) !default;
+//
+// $theme-colors: (
+//   primary: $blue,
+//   secondary: $gray-700,
+//   success: $green,
+//   info: $cyan,
+//   warning: $yellow,
+//   danger: $red,
+//   light: $gray-100,
+//   dark: $dark
+// ) !default;
+//
+// $link-color: map-get($theme-colors, info) !default;

From 15e45c3decd73d16c96b630dc11d6e1a2b3c4fc2 Mon Sep 17 00:00:00 2001
From: Yana De Pauw <yana@atmire.com>
Date: Mon, 14 Jun 2021 16:14:39 +0200
Subject: [PATCH 26/44] 80103: Fix admin sidebar link a11y issues

---
 .../admin-sidebar-section.component.html                  | 5 ++---
 src/app/+admin/admin-sidebar/admin-sidebar.component.html | 8 ++++----
 .../expandable-admin-sidebar-section.component.html       | 4 ++--
 .../shared/menu/menu-item/link-menu-item.component.html   | 2 +-
 .../menu/menu-item/onclick-menu-item.component.html       | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index 4c13c7c570..f6bff2dc8f 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,11 +1,10 @@
 <li class="sidebar-section">
-    <a class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link">
+    <a href="javascript:void(0);" class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link">
         <i class="fas fa-{{section.icon}} fa-fw"></i>
     </a>
     <div class="sidebar-collapsible">
         <span id="sidebarName-{{section.id}}" class="section-header-text">
-          <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+        <a class="nav-item nav-link"  tabindex="-1" [routerLink]="itemModel.link">{{itemModel.text | translate}}</a>
         </span>
     </div>
 </li>
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
index 4dddc89920..d3d8031994 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
@@ -10,14 +10,14 @@
     <div class="sidebar-top-level-items">
         <ul class="navbar-nav">
             <li class="admin-menu-header sidebar-section">
-                <a class="shortcut-icon navbar-brand mr-0" href="#">
+                <a class="shortcut-icon navbar-brand mr-0" href="javascript:void(0);">
                 <span class="logo-wrapper">
                     <img class="admin-logo" src="assets/images/dspace-logo-mini.svg"
                          [alt]="('menu.header.image.logo') | translate">
                 </span>
                 </a>
                 <div class="sidebar-collapsible">
-                    <a class="navbar-brand mr-0" href="#">
+                    <a class="navbar-brand mr-0" href="javascript:void(0);">
                         <h4 class="section-header-text mb-0">{{'menu.header.admin' |
                             translate}}</h4>
                     </a>
@@ -33,7 +33,7 @@
     <div class="navbar-nav">
         <div class="sidebar-section" id="sidebar-collapse-toggle">
             <a class="nav-item nav-link shortcut-icon"
-               href="#"
+               href="javascript:void(0);"
                (click)="toggle($event)">
                 <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
                    [title]="'menu.section.icon.pin' | translate"></i>
@@ -42,7 +42,7 @@
             </a>
             <div class="sidebar-collapsible">
                 <a class="nav-item nav-link sidebar-section"
-                   href="#"
+                   href="javascript:void(0);"
                    (click)="toggle($event)">
                     <span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span>
                     <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span>
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 8854dea216..af014f3e1b 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -3,12 +3,12 @@
      value: ((expanded | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg | async)}}">
     <div class="icon-wrapper">
-        <a class="nav-item nav-link shortcut-icon" attr.aria.labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" (click)="toggleSection($event)" href="#">
+        <a class="nav-item nav-link shortcut-icon" attr.aria.labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" (click)="toggleSection($event)" href="javascript:void(0);">
             <i class="fas fa-{{section.icon}} fa-fw"></i>
         </a>
     </div>
     <div class="sidebar-collapsible">
-        <a class="nav-item nav-link" href="#"
+        <a class="nav-item nav-link" href="javascript:void(0);" tabindex="-1"
            (click)="toggleSection($event)">
             <span id="sidebarName-{{section.id}}" class="section-header-text">
                 <ng-container
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.html b/src/app/shared/menu/menu-item/link-menu-item.component.html
index 74e918c07b..e4b92284d2 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/link-menu-item.component.html
@@ -1 +1 @@
-<a class="nav-item nav-link"  [ngClass]="{'disabled': !hasLink}" [routerLink]="getRouterLink()">{{item.text | translate}}</a>
\ No newline at end of file
+<a href="javascript:void(0);" class="nav-item nav-link"  [ngClass]="{'disabled': !hasLink}" [routerLink]="getRouterLink()">{{item.text | translate}}</a>
\ No newline at end of file
diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.html b/src/app/shared/menu/menu-item/onclick-menu-item.component.html
index 96c9049ab3..950b80f10f 100644
--- a/src/app/shared/menu/menu-item/onclick-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.html
@@ -1 +1 @@
-<a class="nav-item nav-link" role="button" (click)="item.function()">{{item.text | translate}}</a>
\ No newline at end of file
+<a href="javascript:void(0);" class="nav-item nav-link" role="button" (click)="item.function()">{{item.text | translate}}</a>
\ No newline at end of file

From a69a4e96962e18456bf51adb789096d64584553d Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Tue, 15 Jun 2021 15:40:35 +0200
Subject: [PATCH 27/44] 80113: Set ableToEdit on GroupDTOModel

---
 .../groups-registry.component.ts              | 60 ++++++++++++-------
 .../data/feature-authorization/feature-id.ts  |  1 +
 .../core/eperson/models/group-dto.model.ts    |  5 ++
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/app/access-control/group-registry/groups-registry.component.ts b/src/app/access-control/group-registry/groups-registry.component.ts
index b28ac043d9..9215399170 100644
--- a/src/app/access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -141,29 +141,35 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
         if (groups.page.length === 0) {
           return observableOf(buildPaginatedList(groups.pageInfo, []));
         }
-        return observableCombineLatest(groups.page.map((group: Group) => {
-          if (!this.deletedGroupsIds.includes(group.id)) {
-            return observableCombineLatest([
-              this.authorizationService.isAuthorized(FeatureID.CanDelete, hasValue(group) ? group.self : undefined),
-              this.hasLinkedDSO(group),
-              this.getSubgroups(group),
-              this.getMembers(group)
-            ]).pipe(
-              map(([isAuthorized, hasLinkedDSO, subgroups, members]:
-                     [boolean, boolean, RemoteData<PaginatedList<Group>>, RemoteData<PaginatedList<EPerson>>]) => {
-                  const groupDtoModel: GroupDtoModel = new GroupDtoModel();
-                  groupDtoModel.ableToDelete = isAuthorized && !hasLinkedDSO;
-                  groupDtoModel.group = group;
-                  groupDtoModel.subgroups = subgroups.payload;
-                  groupDtoModel.epersons = members.payload;
-                  return groupDtoModel;
-                }
-              )
-            );
-          }
-        })).pipe(map((dtos: GroupDtoModel[]) => {
-          return buildPaginatedList(groups.pageInfo, dtos);
-        }));
+        return this.authorizationService.isAuthorized(FeatureID.AdministratorOf).pipe(
+          switchMap((isSiteAdmin: boolean) => {
+            return observableCombineLatest(groups.page.map((group: Group) => {
+              if (hasValue(group) && !this.deletedGroupsIds.includes(group.id)) {
+                return observableCombineLatest([
+                  this.authorizationService.isAuthorized(FeatureID.CanDelete, group.self),
+                  this.canManageGroup$(isSiteAdmin, group),
+                  this.hasLinkedDSO(group),
+                  this.getSubgroups(group),
+                  this.getMembers(group)
+                ]).pipe(
+                  map(([canDelete, canManageGroup, hasLinkedDSO, subgroups, members]:
+                         [boolean, boolean, boolean, RemoteData<PaginatedList<Group>>, RemoteData<PaginatedList<EPerson>>]) => {
+                      const groupDtoModel: GroupDtoModel = new GroupDtoModel();
+                      groupDtoModel.ableToDelete = canDelete && !hasLinkedDSO;
+                      groupDtoModel.ableToEdit = canManageGroup;
+                      groupDtoModel.group = group;
+                      groupDtoModel.subgroups = subgroups.payload;
+                      groupDtoModel.epersons = members.payload;
+                      return groupDtoModel;
+                    }
+                  )
+                );
+              }
+            })).pipe(map((dtos: GroupDtoModel[]) => {
+              return buildPaginatedList(groups.pageInfo, dtos);
+            }));
+          })
+        );
       })
     ).subscribe((value: PaginatedList<GroupDtoModel>) => {
       this.groupsDto$.next(value);
@@ -174,6 +180,14 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     this.subs.push(this.searchSub);
       }
 
+  canManageGroup$(isSiteAdmin: boolean, group: Group): Observable<boolean> {
+    if (isSiteAdmin) {
+      return observableOf(true);
+    } else {
+      return this.authorizationService.isAuthorized(FeatureID.CanManageGroup, group.self);
+    }
+  }
+
   /**
    * Delete Group
    */
diff --git a/src/app/core/data/feature-authorization/feature-id.ts b/src/app/core/data/feature-authorization/feature-id.ts
index 6d070fcd4c..ac045b93b0 100644
--- a/src/app/core/data/feature-authorization/feature-id.ts
+++ b/src/app/core/data/feature-authorization/feature-id.ts
@@ -10,6 +10,7 @@ export enum FeatureID {
   ReinstateItem = 'reinstateItem',
   EPersonRegistration = 'epersonRegistration',
   CanManageGroups = 'canManageGroups',
+  CanManageGroup = 'canManageGroup',
   IsCollectionAdmin = 'isCollectionAdmin',
   IsCommunityAdmin = 'isCommunityAdmin',
   CanDownload = 'canDownload',
diff --git a/src/app/core/eperson/models/group-dto.model.ts b/src/app/core/eperson/models/group-dto.model.ts
index 47a70cf326..ef65c498fd 100644
--- a/src/app/core/eperson/models/group-dto.model.ts
+++ b/src/app/core/eperson/models/group-dto.model.ts
@@ -17,6 +17,11 @@ export class GroupDtoModel {
    */
   public ableToDelete: boolean;
 
+  /**
+   * Whether or not the current user is able to edit the linked group
+   */
+  public ableToEdit: boolean;
+
   /**
    * List of subgroups of this group
    */

From 3bc031ff00b1c5fa8fe8c8c5e979fd50a53f1ee9 Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Tue, 15 Jun 2021 17:17:44 +0200
Subject: [PATCH 28/44] 80113: Create Group Page guard

---
 .../access-control-routing.module.ts          |  4 ++-
 .../group-registry/group-page.guard.spec.ts   | 16 +++++++++
 .../group-registry/group-page.guard.ts        | 35 +++++++++++++++++++
 .../groups-registry.component.html            | 22 +++++++++---
 src/assets/i18n/en.json5                      |  2 ++
 5 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 src/app/access-control/group-registry/group-page.guard.spec.ts
 create mode 100644 src/app/access-control/group-registry/group-page.guard.ts

diff --git a/src/app/access-control/access-control-routing.module.ts b/src/app/access-control/access-control-routing.module.ts
index cac49938a9..cf20309369 100644
--- a/src/app/access-control/access-control-routing.module.ts
+++ b/src/app/access-control/access-control-routing.module.ts
@@ -5,6 +5,7 @@ import { GroupFormComponent } from './group-registry/group-form/group-form.compo
 import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
 import { GROUP_EDIT_PATH } from './access-control-routing-paths';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { GroupPageGuard } from './group-registry/group-page.guard';
 
 @NgModule({
   imports: [
@@ -39,7 +40,8 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
         },
-        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' }
+        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' },
+        canActivate: [GroupPageGuard]
       }
     ])
   ]
diff --git a/src/app/access-control/group-registry/group-page.guard.spec.ts b/src/app/access-control/group-registry/group-page.guard.spec.ts
new file mode 100644
index 0000000000..e6de64baea
--- /dev/null
+++ b/src/app/access-control/group-registry/group-page.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GroupPageGuard } from './group-page.guard';
+
+describe('GroupPageGuard', () => {
+  let guard: GroupPageGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(GroupPageGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});
diff --git a/src/app/access-control/group-registry/group-page.guard.ts b/src/app/access-control/group-registry/group-page.guard.ts
new file mode 100644
index 0000000000..057f67ddeb
--- /dev/null
+++ b/src/app/access-control/group-registry/group-page.guard.ts
@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { AuthService } from '../../core/auth/auth.service';
+import { SomeFeatureAuthorizationGuard } from '../../core/data/feature-authorization/feature-authorization-guard/some-feature-authorization.guard';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupPageGuard extends SomeFeatureAuthorizationGuard {
+
+  protected groupsEndpoint = 'groups';
+
+  constructor(protected halEndpointService: HALEndpointService,
+              protected authorizationService: AuthorizationDataService,
+              protected router: Router,
+              protected authService: AuthService) {
+    super(authorizationService, router, authService);
+  }
+
+  getFeatureIDs(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID[]> {
+    return observableOf([FeatureID.CanManageGroup]);
+  }
+
+  getObjectUrl(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
+    return this.halEndpointService.getEndpoint(this.groupsEndpoint).pipe(
+      map(groupsUrl => `${groupsUrl}/${route?.params?.groupId}`)
+    );
+  }
+
+}
diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index e5e25ae944..59ffbf20be 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -59,11 +59,23 @@
               <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
               <td>
                 <div class="btn-group edit-field">
-                  <button [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
-                          class="btn btn-outline-primary btn-sm"
-                          title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
+                  <ng-container [ngSwitch]="groupDto.ableToEdit">
+                    <button *ngSwitchCase="true"
+                      [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
+                      class="btn btn-outline-primary btn-sm"
+                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}"
+                    >
+                      <i class="fas fa-edit fa-fw"></i>
+                    </button>
+                    <button *ngSwitchCase="false"
+                      [disabled]="true"
+                      class="btn btn-outline-primary btn-sm"
+                      placement="left"
+                      [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
+                    >
+                      <i class="fas fa-edit fa-fw"></i>
+                    </button>
+                  </ng-container>
                   <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
                           (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm"
                           title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: groupDto.group.name} }}">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4c3317a0c0..648c0f12e3 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -238,6 +238,8 @@
 
   "admin.access-control.epeople.table.edit.buttons.edit": "Edit \"{{name}}\"",
 
+  "admin.access-control.epeople.table.edit.buttons.edit-disabled": "You are not authorized to edit this group",
+
   "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
 
   "admin.access-control.epeople.no-items": "No EPeople to show.",

From 3b07738d4dc982fee8a3aba31dcb02addaef3db7 Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Tue, 15 Jun 2021 18:43:50 +0200
Subject: [PATCH 29/44] 80113: Write tests for GroupPageGuard

---
 .../group-registry/group-page.guard.spec.ts   | 75 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/app/access-control/group-registry/group-page.guard.spec.ts b/src/app/access-control/group-registry/group-page.guard.spec.ts
index e6de64baea..48fa124c07 100644
--- a/src/app/access-control/group-registry/group-page.guard.spec.ts
+++ b/src/app/access-control/group-registry/group-page.guard.spec.ts
@@ -1,16 +1,83 @@
-import { TestBed } from '@angular/core/testing';
-
 import { GroupPageGuard } from './group-page.guard';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { of as observableOf } from 'rxjs';
+import { AuthService } from '../../core/auth/auth.service';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 
 describe('GroupPageGuard', () => {
+  const groupsEndpointUrl = 'https://test.org/api/eperson/groups';
+  const groupUuid = '0d6f89df-f95a-4829-943c-f21f434fb892';
+  const groupEndpointUrl = `${groupsEndpointUrl}/${groupUuid}`;
+  const routeSnapshotWithGroupId = {
+    params: {
+      groupId: groupUuid,
+    }
+  } as unknown as ActivatedRouteSnapshot;
+
   let guard: GroupPageGuard;
+  let halEndpointService: HALEndpointService;
+  let authorizationService: AuthorizationDataService;
+  let router: Router;
+  let authService: AuthService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
-    guard = TestBed.inject(GroupPageGuard);
+    halEndpointService = jasmine.createSpyObj(['getEndpoint']);
+    (halEndpointService as any).getEndpoint.and.returnValue(observableOf(groupsEndpointUrl));
+
+    authorizationService = jasmine.createSpyObj(['isAuthorized']);
+    // NOTE: value is set in beforeEach
+
+    router = jasmine.createSpyObj(['parseUrl']);
+    (router as any).parseUrl.and.returnValue = {};
+
+    authService = jasmine.createSpyObj(['isAuthenticated']);
+    (authService as any).isAuthenticated.and.returnValue(observableOf(true));
+
+    guard = new GroupPageGuard(halEndpointService, authorizationService, router, authService);
   });
 
   it('should be created', () => {
     expect(guard).toBeTruthy();
   });
+
+  describe('canActivate', () => {
+    describe('when the current user can manage the group', () => {
+      beforeEach(() => {
+        (authorizationService as any).isAuthorized.and.returnValue(observableOf(true));
+      });
+
+      it('should return true', (done) => {
+        guard.canActivate(
+          routeSnapshotWithGroupId, { url: 'current-url'} as any
+        ).subscribe((result) => {
+          expect(authorizationService.isAuthorized).toHaveBeenCalledWith(
+            FeatureID.CanManageGroup, groupEndpointUrl, undefined
+          );
+          expect(result).toBeTrue();
+          done();
+        });
+      });
+    });
+
+    describe('when the current user can not manage the group', () => {
+      beforeEach(() => {
+        (authorizationService as any).isAuthorized.and.returnValue(observableOf(false));
+      });
+
+      it('should not return true', (done) => {
+        guard.canActivate(
+          routeSnapshotWithGroupId, { url: 'current-url'} as any
+        ).subscribe((result) => {
+          expect(authorizationService.isAuthorized).toHaveBeenCalledWith(
+            FeatureID.CanManageGroup, groupEndpointUrl, undefined
+          );
+          expect(result).not.toBeTrue();
+          done();
+        });
+      });
+    });
+  });
+
 });

From 3fc44f6fc1a6b0a9bb9bbbbe123c5ea57e363484 Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Tue, 15 Jun 2021 19:38:33 +0200
Subject: [PATCH 30/44] 80113: Write tests for GroupsRegistryComponent

---
 .../groups-registry.component.html            |   4 +-
 .../groups-registry.component.spec.ts         | 101 +++++++++++++++++-
 2 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index 59ffbf20be..7fced71e6f 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -62,14 +62,14 @@
                   <ng-container [ngSwitch]="groupDto.ableToEdit">
                     <button *ngSwitchCase="true"
                       [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
-                      class="btn btn-outline-primary btn-sm"
+                      class="btn btn-outline-primary btn-sm btn-edit"
                       title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}"
                     >
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button *ngSwitchCase="false"
                       [disabled]="true"
-                      class="btn btn-outline-primary btn-sm"
+                      class="btn btn-outline-primary btn-sm btn-edit"
                       placement="left"
                       [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
                     >
diff --git a/src/app/access-control/group-registry/groups-registry.component.spec.ts b/src/app/access-control/group-registry/groups-registry.component.spec.ts
index 10064800e1..245044f5c9 100644
--- a/src/app/access-control/group-registry/groups-registry.component.spec.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.spec.ts
@@ -30,6 +30,7 @@ import { routeServiceStub } from '../../shared/testing/route-service.stub';
 import { RouterMock } from '../../shared/mocks/router.mock';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 
 describe('GroupRegistryComponent', () => {
   let component: GroupsRegistryComponent;
@@ -43,6 +44,26 @@ describe('GroupRegistryComponent', () => {
   let mockEPeople;
   let paginationService;
 
+  /**
+   * Set authorizationService.isAuthorized to return the following values.
+   * @param isAdmin whether or not the current user is an admin.
+   * @param canManageGroup whether or not the current user can manage all groups.
+   */
+  const setIsAuthorized = (isAdmin: boolean, canManageGroup: boolean) => {
+    (authorizationService as any).isAuthorized.and.callFake((featureId?: FeatureID) => {
+      switch (featureId) {
+        case FeatureID.AdministratorOf:
+          return observableOf(isAdmin);
+        case FeatureID.CanManageGroup:
+          return observableOf(canManageGroup);
+        case FeatureID.CanDelete:
+          return observableOf(true);
+        default:
+          throw new Error(`setIsAuthorized: this fake implementation does not support ${featureId}.`);
+      }
+    });
+  };
+
   beforeEach(waitForAsync(() => {
     mockGroups = [GroupMock, GroupMock2];
     mockEPeople = [EPersonMock, EPersonMock2];
@@ -131,9 +152,8 @@ describe('GroupRegistryComponent', () => {
         return createSuccessfulRemoteDataObject$(undefined);
       }
     };
-    authorizationService = jasmine.createSpyObj('authorizationService', {
-      isAuthorized: observableOf(true)
-    });
+    authorizationService = jasmine.createSpyObj('authorizationService', ['isAuthorized']);
+    setIsAuthorized(true, true);
     paginationService = new PaginationServiceStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
@@ -180,6 +200,81 @@ describe('GroupRegistryComponent', () => {
     });
   });
 
+  describe('edit buttons', () => {
+    describe('when the user is a general admin', () => {
+      beforeEach(fakeAsync(() => {
+        // NOTE: setting canManageGroup to false should not matter, since isAdmin takes priority
+        setIsAuthorized(true, false);
+
+        // force rerender after setup changes
+        component.search({ query: '' });
+        tick();
+        fixture.detectChanges();
+      }));
+
+      it('should be active', () => {
+        const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(4) button.btn-edit'));
+        expect(editButtonsFound.length).toEqual(2);
+        editButtonsFound.forEach((editButtonFound) => {
+          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+        });
+      });
+
+      it('should not check the canManageGroup permissions', () => {
+        expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
+          FeatureID.CanManageGroup, mockGroups[0].self
+        );
+        expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
+          FeatureID.CanManageGroup, mockGroups[0].self, undefined // treated differently
+        );
+        expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
+          FeatureID.CanManageGroup, mockGroups[1].self
+        );
+        expect(authorizationService.isAuthorized).not.toHaveBeenCalledWith(
+          FeatureID.CanManageGroup, mockGroups[1].self, undefined // treated differently
+        );
+      });
+    });
+
+    describe('when the user can edit the groups', () => {
+      beforeEach(fakeAsync(() => {
+        setIsAuthorized(false, true);
+
+        // force rerender after setup changes
+        component.search({ query: '' });
+        tick();
+        fixture.detectChanges();
+      }));
+
+      it('should be active', () => {
+        const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(4) button.btn-edit'));
+        expect(editButtonsFound.length).toEqual(2);
+        editButtonsFound.forEach((editButtonFound) => {
+          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+        });
+      });
+    });
+
+    describe('when the user can not edit the groups', () => {
+      beforeEach(fakeAsync(() => {
+        setIsAuthorized(false, false);
+
+        // force rerender after setup changes
+        component.search({ query: '' });
+        tick();
+        fixture.detectChanges();
+      }));
+
+      it('should not be active', () => {
+        const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(4) button.btn-edit'));
+        expect(editButtonsFound.length).toEqual(2);
+        editButtonsFound.forEach((editButtonFound) => {
+          expect(editButtonFound.nativeElement.disabled).toBeTrue();
+        });
+      });
+    });
+  });
+
   describe('search', () => {
     describe('when searching with query', () => {
       let groupIdsFound;

From 98598a53d9eb56971b9e511d0dd2b971d4466e56 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Tue, 15 Jun 2021 14:30:18 -0500
Subject: [PATCH 31/44] Fix incorrect i18n tags

---
 .../delete-collection-page.component.html                 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
index 737c40264b..81ba60e51b 100644
--- a/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/+collection-page/delete-collection-page/delete-collection-page.component.html
@@ -2,15 +2,15 @@
     <div class="row">
         <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
             <div class="col-12 pb-4">
-                <h2 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h2>
-                <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dso.name } }}</p>
+                <h2 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h2>
+                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dso.name } }}</p>
                 <div class="form-group row">
                   <div class="col text-right">
                     <button class="btn btn-outline-secondary" (click)="onCancel(dso)">
-                      <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
+                      <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
                     <button class="btn btn-danger mr-2" (click)="onConfirm(dso)">
-                      <i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}
+                      <i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}
                     </button>
                   </div>
                 </div>

From b5562342071974915786b4f1653a9bbab59921d4 Mon Sep 17 00:00:00 2001
From: Art Lowel <art@atmire.com>
Date: Wed, 16 Jun 2021 13:05:03 +0200
Subject: [PATCH 32/44] add aria and alt attributes to base header as well

---
 src/app/header/header.component.html               | 6 +++---
 src/app/navbar/navbar.component.html               | 3 ++-
 src/assets/i18n/en.json5                           | 2 ++
 src/themes/dspace/app/header/header.component.html | 6 +++---
 src/themes/dspace/app/navbar/navbar.component.html | 4 ++--
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index a1fa051610..c7b979d266 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -2,10 +2,10 @@
   <div class="container">
     <div class="d-flex flex-row justify-content-between">
       <a class="navbar-brand my-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg"/>
+        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
 
-      <nav class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
         <ds-search-navbar></ds-search-navbar>
         <ds-lang-switch></ds-lang-switch>
         <ds-auth-nav-menu></ds-auth-nav-menu>
@@ -13,7 +13,7 @@
         <div class="pl-2">
           <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
-                  aria-expanded="false" aria-label="Toggle navigation">
+                  aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
             <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
           </button>
         </div>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 2356077e43..3fa7598e74 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,6 +1,7 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}"
      [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container"
+     role="navigation" [attr.aria-label]="'nav.main.description' | translate">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
     <div class="container">
         <div class="reset-padding-md w-100">
             <div id="collapsingNav">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 4c3317a0c0..5bd08dfbc8 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2353,6 +2353,8 @@
 
   "nav.stop-impersonating": "Stop impersonating EPerson",
 
+  "nav.toggle" : "Toggle navigation",
+
   "nav.user.description" : "User profile bar",
 
 
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index dc0d066a4e..cf691ea6c4 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -1,8 +1,8 @@
 <header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' |translate" class="container navbar navbar-expand-md px-0">
+  <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
     <div class="d-flex flex-grow-1">
       <a class="navbar-brand m-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg" alt="logo"/>
+        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
     </div>
     <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
@@ -13,7 +13,7 @@
       <div class="pl-2">
         <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
                 aria-controls="collapsingNav"
-                aria-expanded="false" aria-label="Toggle navigation">
+                aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
           <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
         </button>
       </div>
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 50e526b78b..5af30db632 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,10 +1,10 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}"
      [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
      class="navbar navbar-expand-md navbar-light p-0 navbar-container"
-     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
+     role="navigation" [attr.aria-label]="'nav.main.description' | translate">
   <div class="container h-100">
     <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" alt="logo"/>
+      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
     </a>
 
     <div id="collapsingNav" class="w-100 h-100">

From cf515fe6f0ea328683888c1ec13583a8c9d3ce19 Mon Sep 17 00:00:00 2001
From: Marie Verdonck <maria.verdonck@atmire.com>
Date: Wed, 16 Jun 2021 16:49:57 +0200
Subject: [PATCH 33/44] 80113: Prevent anyone but site admin from accessing
 /access-control/epeople

---
 .../+admin/admin-sidebar/admin-sidebar.component.ts   | 11 +++++++----
 .../access-control/access-control-routing-paths.ts    |  4 ++++
 .../access-control/access-control-routing.module.ts   | 11 ++++++++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index e172f9717b..53a9ecb2ab 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -531,14 +531,17 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * Create menu sections dependent on whether or not the current user can manage access control groups
    */
   createAccessControlMenuSections() {
-    this.authorizationService.isAuthorized(FeatureID.CanManageGroups).subscribe((authorized) => {
+    observableCombineLatest(
+      this.authorizationService.isAuthorized(FeatureID.AdministratorOf),
+      this.authorizationService.isAuthorized(FeatureID.CanManageGroups)
+    ).subscribe(([isSiteAdmin, canManageGroups]) => {
       const menuList = [
         /* Access Control */
         {
           id: 'access_control_people',
           parentID: 'access_control',
           active: false,
-          visible: authorized,
+          visible: isSiteAdmin,
           model: {
             type: MenuItemType.LINK,
             text: 'menu.section.access_control_people',
@@ -549,7 +552,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
           id: 'access_control_groups',
           parentID: 'access_control',
           active: false,
-          visible: authorized,
+          visible: canManageGroups,
           model: {
             type: MenuItemType.LINK,
             text: 'menu.section.access_control_groups',
@@ -571,7 +574,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         {
           id: 'access_control',
           active: false,
-          visible: authorized,
+          visible: canManageGroups || isSiteAdmin,
           model: {
             type: MenuItemType.TEXT,
             text: 'menu.section.access_control'
diff --git a/src/app/access-control/access-control-routing-paths.ts b/src/app/access-control/access-control-routing-paths.ts
index d229d12bd2..259aa311e7 100644
--- a/src/app/access-control/access-control-routing-paths.ts
+++ b/src/app/access-control/access-control-routing-paths.ts
@@ -3,6 +3,10 @@ import { getAccessControlModuleRoute } from '../app-routing-paths';
 
 export const GROUP_EDIT_PATH = 'groups';
 
+export function getGroupsRoute() {
+  return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH).toString();
+}
+
 export function getGroupEditRoute(id: string) {
   return new URLCombiner(getAccessControlModuleRoute(), GROUP_EDIT_PATH, id).toString();
 }
diff --git a/src/app/access-control/access-control-routing.module.ts b/src/app/access-control/access-control-routing.module.ts
index cf20309369..e64b0d170a 100644
--- a/src/app/access-control/access-control-routing.module.ts
+++ b/src/app/access-control/access-control-routing.module.ts
@@ -6,6 +6,8 @@ import { GroupsRegistryComponent } from './group-registry/groups-registry.compon
 import { GROUP_EDIT_PATH } from './access-control-routing-paths';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 import { GroupPageGuard } from './group-registry/group-page.guard';
+import { GroupAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import { SiteAdministratorGuard } from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 
 @NgModule({
   imports: [
@@ -16,7 +18,8 @@ import { GroupPageGuard } from './group-registry/group-page.guard';
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
         },
-        data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' }
+        data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' },
+        canActivate: [SiteAdministratorGuard]
       },
       {
         path: GROUP_EDIT_PATH,
@@ -24,7 +27,8 @@ import { GroupPageGuard } from './group-registry/group-page.guard';
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
         },
-        data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' }
+        data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' },
+        canActivate: [GroupAdministratorGuard]
       },
       {
         path: `${GROUP_EDIT_PATH}/newGroup`,
@@ -32,7 +36,8 @@ import { GroupPageGuard } from './group-registry/group-page.guard';
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
         },
-        data: { title: 'admin.access-control.groups.title.addGroup', breadcrumbKey: 'admin.access-control.groups.addGroup' }
+        data: { title: 'admin.access-control.groups.title.addGroup', breadcrumbKey: 'admin.access-control.groups.addGroup' },
+        canActivate: [GroupAdministratorGuard]
       },
       {
         path: `${GROUP_EDIT_PATH}/:groupId`,

From 700afc2709c73be3f2b214f0386795d50761dbf1 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Wed, 16 Jun 2021 12:03:30 -0500
Subject: [PATCH 34/44] Create a SECURITY.md to document security policies

---
 SECURITY.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 SECURITY.md

diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000000..fca18c64ee
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,15 @@
+# Security Policy
+
+## Supported Versions
+
+For information regarding which versions of DSpace are currently under support, please see our DSpace Software Support Policy:
+
+https://wiki.lyrasis.org/display/DSPACE/DSpace+Software+Support+Policy
+
+## Reporting a Vulnerability
+
+If you believe you have found a security vulnerability in a supported version of DSpace, we encourage you to let us know right away.
+We will investigate all legitimate reports and do our best to quickly fix the problem. Please see our DSpace Software Support Policy
+for information on privately reporting vulnerabilities:
+
+https://wiki.lyrasis.org/display/DSPACE/DSpace+Software+Support+Policy

From f20b139841deb46ee50a6257b492c427bd0c6a98 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 16 Jun 2021 20:56:35 +0000
Subject: [PATCH 35/44] Bump dns-packet from 1.3.1 to 1.3.4

Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4.
- [Release notes](https://github.com/mafintosh/dns-packet/releases)
- [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d6388ddb53..29fac01d15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4208,9 +4208,9 @@ dns-equal@^1.0.0:
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"

From aa5a395d9137559bce99cd3b1fa7cd5c6df33176 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 16 Jun 2021 20:57:10 +0000
Subject: [PATCH 36/44] Bump browserslist from 4.16.0 to 4.16.6

Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.16.0 to 4.16.6.
- [Release notes](https://github.com/browserslist/browserslist/releases)
- [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md)
- [Commits](https://github.com/browserslist/browserslist/compare/4.16.0...4.16.6)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 46 +++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d6388ddb53..7df4579760 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2663,15 +2663,15 @@ browserify-zlib@^0.2.0:
     pako "~1.0.5"
 
 browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.15.0, browserslist@^4.6.4, browserslist@^4.9.1:
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.0.tgz#410277627500be3cb28a1bfe037586fbedf9488b"
-  integrity sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001165"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.621"
+    caniuse-lite "^1.0.30001219"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.723"
     escalade "^3.1.1"
-    node-releases "^1.1.67"
+    node-releases "^1.1.71"
 
 browserstack@^1.5.1:
   version "1.6.0"
@@ -2905,10 +2905,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001032, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165:
-  version "1.0.30001165"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
-  integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001032, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165, caniuse-lite@^1.0.30001219:
+  version "1.0.30001237"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
+  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
 
 canonical-path@1.0.0:
   version "1.0.0"
@@ -3220,10 +3220,10 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-colorette@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
-  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+colorette@^1.2.1, colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
 colors@1.4.0, colors@^1.1.2, colors@^1.4.0:
   version "1.4.0"
@@ -4364,10 +4364,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.621:
-  version "1.3.622"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.622.tgz#9726bd2e67a5462154750ce9701ca6af07d07877"
-  integrity sha512-AJT0Fm1W0uZlMVVkkJrcCVvczDuF8tPm3bwzQf5WO8AaASB2hwTRP7B8pU5rqjireH+ib6am8+hH5/QkXzzYKw==
+electron-to-chromium@^1.3.723:
+  version "1.3.752"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
+  integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -7710,10 +7710,10 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-releases@^1.1.67:
-  version "1.1.67"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
-  integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
+node-releases@^1.1.71:
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
 nodemon@^2.0.2:
   version "2.0.6"

From f3faa0df2ca0166d7e3cd7933b36cda1c038f37d Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Thu, 17 Jun 2021 16:57:48 +0200
Subject: [PATCH 37/44] 80154: Revert to default Bootstrap grays

---
 src/styles/_bootstrap_variables.scss                  | 10 ++--------
 .../custom/styles/_theme_sass_variable_overrides.scss | 11 ++---------
 .../dspace/styles/_theme_sass_variable_overrides.scss | 10 +++-------
 3 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 58f599c516..db4387dc30 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -12,12 +12,6 @@ $image-path: "../assets/images" !default;
 
 /** Bootstrap Variables **/
 /* Colors */
-$gray-base: #000 !default;
-$gray-900: lighten($gray-base, 13.5%) !default; // #222
-$gray-800: lighten($gray-base, 26.6%) !default; // #444
-$gray-700: lighten($gray-base, 46.6%) !default; // #777
-$gray-600: lighten($gray-base, 73.3%) !default; // #bbb
-$gray-100: lighten($gray-base, 93.5%) !default; // #eee
 
 /* Reassign color vars to semantic color scheme */
 $blue:   #2B4E72 !default;
@@ -29,12 +23,12 @@ $dark:   darken($blue, 17%) !default;
 
 $theme-colors: (
         primary: $blue,
-        secondary: $gray-700,
+        secondary: #495057,   // Bootstrap $gray-700
         success: $green,
         info: $cyan,
         warning: $yellow,
         danger: $red,
-        light: $gray-100,
+        light: #f8f9fa,       // Bootstrap $gray-100
         dark: $dark
 ) !default;
 /* Fonts */
diff --git a/src/themes/custom/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index 9f69b17ebd..30d806ecda 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -5,13 +5,6 @@
 
 // $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 //
-// $gray-base: #000 !default;
-// $gray-900: lighten($gray-base, 13.5%) !default; // #222
-// $gray-800: lighten($gray-base, 26.6%) !default; // #444
-// $gray-700: lighten($gray-base, 46.6%) !default; // #777
-// $gray-600: lighten($gray-base, 73.3%) !default; // #bbb
-// $gray-100: lighten($gray-base, 93.5%) !default; // #eee
-//
 // $blue:   #2B4E72 !default;
 // $green:  #94BA65 !default;
 // $cyan:   #006666 !default;
@@ -21,12 +14,12 @@
 //
 // $theme-colors: (
 //   primary: $blue,
-//   secondary: $gray-700,
+//   secondary: #495057,   // Bootstrap $gray-700
 //   success: $green,
 //   info: $cyan,
 //   warning: $yellow,
 //   danger: $red,
-//   light: $gray-100,
+//   light: #f8f9fa,       // Bootstrap $gray-100
 //   dark: $dark
 // ) !default;
 //
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index 70aa0b1850..64daf347b4 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -6,10 +6,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');
 
 $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$gray-100: #e8ebf3 !default;
-$gray-400: #ced4da !default;
-$gray-600: #959595 !default;
-$gray-800: #444444 !default;
 
 $navbar-dark-color: #FFFFFF;
 
@@ -21,10 +17,10 @@ $yellow: #ec9433 !default;
 $red: #CF4444 !default;
 $dark: #43515f !default;
 
-$body-color: $gray-800 !default;
+$body-color: #343a40 !default;                    // Bootstrap $gray-800
 
-$table-accent-bg:             $gray-100 !default;
-$table-hover-bg:              $gray-400 !default;
+$table-accent-bg:             #f8f9fa !default;   // Bootstrap $gray-100
+$table-hover-bg:              #ced4da !default;   // Bootstrap $gray-400
 
 $yiq-contrasted-threshold:  170 !default;
 

From 3a8e658d54a8b7bdae4d73037e999a9aadfbec82 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Fri, 18 Jun 2021 15:24:16 +0200
Subject: [PATCH 38/44] 80154: Keep using Bootstrap variables

---
 src/styles/_bootstrap_variables.scss                  |  6 ++++--
 .../custom/styles/_theme_sass_variable_overrides.scss |  7 +++++--
 .../dspace/styles/_theme_sass_variable_overrides.scss | 11 +++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index db4387dc30..41a304af39 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -12,6 +12,8 @@ $image-path: "../assets/images" !default;
 
 /** Bootstrap Variables **/
 /* Colors */
+$gray-700: #495057; !default  // Bootstrap $gray-700
+$gray-100: #f8f9fa; !default  //           $gray-100
 
 /* Reassign color vars to semantic color scheme */
 $blue:   #2B4E72 !default;
@@ -23,12 +25,12 @@ $dark:   darken($blue, 17%) !default;
 
 $theme-colors: (
         primary: $blue,
-        secondary: #495057,   // Bootstrap $gray-700
+        secondary: $gray-700,
         success: $green,
         info: $cyan,
         warning: $yellow,
         danger: $red,
-        light: #f8f9fa,       // Bootstrap $gray-100
+        light: $gray-100,
         dark: $dark
 ) !default;
 /* Fonts */
diff --git a/src/themes/custom/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index 30d806ecda..0711268582 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -5,6 +5,9 @@
 
 // $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 //
+// $gray-700: #495057; !default  // Bootstrap $gray-700
+// $gray-100: #f8f9fa; !default  //           $gray-100
+//
 // $blue:   #2B4E72 !default;
 // $green:  #94BA65 !default;
 // $cyan:   #006666 !default;
@@ -14,12 +17,12 @@
 //
 // $theme-colors: (
 //   primary: $blue,
-//   secondary: #495057,   // Bootstrap $gray-700
+//   secondary: $gray-700,
 //   success: $green,
 //   info: $cyan,
 //   warning: $yellow,
 //   danger: $red,
-//   light: #f8f9fa,       // Bootstrap $gray-100
+//   light: $gray-100,
 //   dark: $dark
 // ) !default;
 //
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index 64daf347b4..b6fddce24a 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -17,10 +17,13 @@ $yellow: #ec9433 !default;
 $red: #CF4444 !default;
 $dark: #43515f !default;
 
-$body-color: #343a40 !default;                    // Bootstrap $gray-800
+$gray-800: #343a40; !default
+$gray-400: #ced4da; !default
+$gray-100: #f8f9fa; !default
 
-$table-accent-bg:             #f8f9fa !default;   // Bootstrap $gray-100
-$table-hover-bg:              #ced4da !default;   // Bootstrap $gray-400
+$body-color: $gray-800 !default;                    // Bootstrap $gray-800
+
+$table-accent-bg: $gray-100 !default;   // Bootstrap $gray-100
+$table-hover-bg: $gray-400 !default;   // Bootstrap $gray-400
 
 $yiq-contrasted-threshold:  170 !default;
-

From 7c609820b19a98229353a004e1bd71fad1f93ebc Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Fri, 18 Jun 2021 15:31:30 +0200
Subject: [PATCH 39/44] 80154: Fix semicolon placement

---
 src/styles/_bootstrap_variables.scss                        | 4 ++--
 .../custom/styles/_theme_sass_variable_overrides.scss       | 4 ++--
 .../dspace/styles/_theme_sass_variable_overrides.scss       | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 41a304af39..4c631a294a 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -12,8 +12,8 @@ $image-path: "../assets/images" !default;
 
 /** Bootstrap Variables **/
 /* Colors */
-$gray-700: #495057; !default  // Bootstrap $gray-700
-$gray-100: #f8f9fa; !default  //           $gray-100
+$gray-700: #495057 !default;  // Bootstrap $gray-700
+$gray-100: #f8f9fa !default;  //           $gray-100
 
 /* Reassign color vars to semantic color scheme */
 $blue:   #2B4E72 !default;
diff --git a/src/themes/custom/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index 0711268582..f1387aa619 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -5,8 +5,8 @@
 
 // $font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 //
-// $gray-700: #495057; !default  // Bootstrap $gray-700
-// $gray-100: #f8f9fa; !default  //           $gray-100
+// $gray-700: #495057 !default;  // Bootstrap $gray-700
+// $gray-100: #f8f9fa !default;  //           $gray-100
 //
 // $blue:   #2B4E72 !default;
 // $green:  #94BA65 !default;
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index b6fddce24a..9257bc46dd 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -17,9 +17,9 @@ $yellow: #ec9433 !default;
 $red: #CF4444 !default;
 $dark: #43515f !default;
 
-$gray-800: #343a40; !default
-$gray-400: #ced4da; !default
-$gray-100: #f8f9fa; !default
+$gray-800: #343a40 !default;
+$gray-400: #ced4da !default;
+$gray-100: #f8f9fa !default;
 
 $body-color: $gray-800 !default;                    // Bootstrap $gray-800
 

From a617e04290bc13a9aafad75bd580e7251bdfdc91 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 22 Jun 2021 09:03:53 +0200
Subject: [PATCH 40/44] 80154: Change badge-light to badge-info

---
 .../mydspace-item-submitter/item-submitter.component.html       | 2 +-
 src/app/shared/object-list/type-badge/type-badge.component.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
index 47674025ca..1e8524e5ec 100644
--- a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
+++ b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
@@ -1,3 +1,3 @@
 <div class="mt-2 mb-2">
-  <span class="text-muted">{{'submission.workflow.tasks.generic.submitter' | translate}} : <span class="badge badge-light">{{(submitter$ | async)?.name}}</span></span>
+  <span class="text-muted">{{'submission.workflow.tasks.generic.submitter' | translate}} : <span class="badge badge-info">{{(submitter$ | async)?.name}}</span></span>
 </div>
diff --git a/src/app/shared/object-list/type-badge/type-badge.component.html b/src/app/shared/object-list/type-badge/type-badge.component.html
index 18aeeb4bca..0c2bd7544e 100644
--- a/src/app/shared/object-list/type-badge/type-badge.component.html
+++ b/src/app/shared/object-list/type-badge/type-badge.component.html
@@ -1,3 +1,3 @@
 <div *ngIf="typeMessage">
-  <span class="badge badge-light">{{ typeMessage | translate }}</span>
+  <span class="badge badge-info">{{ typeMessage | translate }}</span>
 </div>

From 720126647c613bd4542ceaa5d5ae4fb75a39e9d8 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Tue, 22 Jun 2021 14:42:57 -0500
Subject: [PATCH 41/44] Add missing i18n key

---
 src/assets/i18n/en.json5 | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 5bd08dfbc8..e398bbe3fc 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3136,6 +3136,8 @@
   "submission.import-external.source.loading": "Loading ...",
 
   "submission.import-external.source.sherpaJournal": "SHERPA Journals",
+  
+  "submission.import-external.source.sherpaJournalIssn": "SHERPA Journals by ISSN",
 
   "submission.import-external.source.sherpaPublisher": "SHERPA Publishers",
 

From c1ddf7f66797a95a9b1119f311d60557af7a8843 Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Wed, 23 Jun 2021 10:55:22 -0500
Subject: [PATCH 42/44] Add production warning

---
 docker/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docker/README.md b/docker/README.md
index 809a150d86..747db22143 100644
--- a/docker/README.md
+++ b/docker/README.md
@@ -1,5 +1,9 @@
 # Docker Compose files
 
+***
+:warning: **NOT PRODUCTION READY**  The below Docker Compose resources are not guaranteed "production ready" at this time. They have been built for development/testing only. Therefore, DSpace Docker images may not be fully secured or up-to-date. While you are welcome to base your own images on these DSpace images/resources, these should not be used "as is" in any production scenario.
+***
+
 ## docker directory
 - docker-compose.yml
   - Starts DSpace Angular with Docker Compose from the current branch.  This file assumes that a DSpace 7 REST instance will also be started in Docker.

From fc398c15f44cb42eabc42513d20f3861c7d21569 Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Thu, 24 Jun 2021 19:44:06 +0200
Subject: [PATCH 43/44] 80113: Rename searching$ into loading$

---
 .../group-registry/groups-registry.component.html           | 4 ++--
 .../group-registry/groups-registry.component.ts             | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index 7fced71e6f..4135f4cc95 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -33,9 +33,9 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="searching$ | async"></ds-loading>
+      <ds-loading *ngIf="loading$ | async"></ds-loading>
       <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(searching$ | async)"
+        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && !(loading$ | async)"
         [paginationOptions]="config"
         [pageInfoState]="pageInfoState$"
         [collectionSize]="(pageInfoState$ | async)?.totalElements"
diff --git a/src/app/access-control/group-registry/groups-registry.component.ts b/src/app/access-control/group-registry/groups-registry.component.ts
index 9215399170..f9b8f9f987 100644
--- a/src/app/access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -75,7 +75,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
   /**
    * A boolean representing if a search is pending
    */
-  searching$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  loading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   // Current search in groups registry
   currentSearchQuery: string;
@@ -118,7 +118,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param data  Contains query param
    */
   search(data: any) {
-    this.searching$.next(true);
+    this.loading$.next(true);
     if (hasValue(this.searchSub)) {
       this.searchSub.unsubscribe();
       this.subs = this.subs.filter((sub: Subscription) => sub !== this.searchSub);
@@ -174,7 +174,7 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
     ).subscribe((value: PaginatedList<GroupDtoModel>) => {
       this.groupsDto$.next(value);
       this.pageInfoState$.next(value.pageInfo);
-      this.searching$.next(false);
+      this.loading$.next(false);
     });
 
     this.subs.push(this.searchSub);

From 511a2e18aba19bf734bfdf8fab5c3d18ee1570ba Mon Sep 17 00:00:00 2001
From: Bruno Roemers <bruno.roemers@atmire.com>
Date: Thu, 24 Jun 2021 19:50:39 +0200
Subject: [PATCH 44/44] 80113: Display loading indicator after using pagination
 nav

---
 .../group-registry/groups-registry.component.ts               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/access-control/group-registry/groups-registry.component.ts b/src/app/access-control/group-registry/groups-registry.component.ts
index f9b8f9f987..ce1b7dedd9 100644
--- a/src/app/access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -9,7 +9,7 @@ import {
   of as observableOf,
   Subscription
 } from 'rxjs';
-import { catchError, map, switchMap, take } from 'rxjs/operators';
+import { catchError, map, switchMap, take, tap } from 'rxjs/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
@@ -118,12 +118,12 @@ export class GroupsRegistryComponent implements OnInit, OnDestroy {
    * @param data  Contains query param
    */
   search(data: any) {
-    this.loading$.next(true);
     if (hasValue(this.searchSub)) {
       this.searchSub.unsubscribe();
       this.subs = this.subs.filter((sub: Subscription) => sub !== this.searchSub);
     }
     this.searchSub = this.paginationService.getCurrentPagination(this.config.id, this.config).pipe(
+      tap(() => this.loading$.next(true)),
       switchMap((paginationOptions) => {
         const query: string = data.query;
         if (query != null && this.currentSearchQuery !== query) {