Merge branch 'main' into feature/CST-9636

# Conflicts: # src/app/item-page/edit-item-page/edit-item-page.module.ts # src/app/item-page/edit-item-page/edit-item-page.routing.module.ts
2025-10-07 01:54:15 +00:00 · 2023-05-11 15:30:31 +02:00
parent a6897e9a6d c914b42de2
commit 6808eec3a4
37 changed files with 3002 additions and 168 deletions
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -214,6 +214,9 @@ languages:
  - code: tr
    label: Türkçe
    active: true
+  - code: vi
+    label: Tiếng Việt
+    active: true
  - code: kk
    label: Қазақ
    active: true
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -8,10 +8,10 @@
        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
      </button>
      <div class="align-middle pt-2">
-        <a *ngIf="node!==loadingNode" [routerLink]="[]" (click)="getNextPage(node)"
+        <button *ngIf="node!==loadingNode" (click)="getNextPage(node)"
           class="btn btn-outline-primary btn-sm" role="button">
           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
-        </a>
+        </button>
        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
      </div>
    </div>
--- a/src/app/community-list-page/community-list/community-list.component.spec.ts
+++ b/src/app/community-list-page/community-list/community-list.component.spec.ts
@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { FlatNode } from '../flat-node.model';
+import { RouterLinkWithHref } from '@angular/router';

 describe('CommunityListComponent', () => {
  let component: CommunityListComponent;
@@ -194,7 +195,7 @@ describe('CommunityListComponent', () => {
        }),
        CdkTreeModule,
        RouterTestingModule],
-      declarations: [CommunityListComponent],
+      declarations: [CommunityListComponent, RouterLinkWithHref],
      providers: [CommunityListComponent,
        { provide: CommunityListService, useValue: communityListServiceStub },],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -230,9 +231,14 @@ describe('CommunityListComponent', () => {
    expect(showMoreEl).toBeTruthy();
  });

+  it('should not render the show more button as an empty link', () => {
+    const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
+    expect(debugElements).toBeTruthy();
+  });
+
  describe('when show more of top communities is clicked', () => {
    beforeEach(fakeAsync(() => {
-      const showMoreLink = fixture.debugElement.query(By.css('.show-more-node a'));
+      const showMoreLink = fixture.debugElement.query(By.css('.show-more-node .btn-outline-primary'));
      showMoreLink.triggerEventHandler('click', {
        preventDefault: () => {/**/
        }
@@ -240,6 +246,7 @@ describe('CommunityListComponent', () => {
      tick();
      fixture.detectChanges();
    }));
+
    it('tree contains maximum of currentPage (2) * (2) elementsPerPage of first top communities, or less if there are less communities (3)', () => {
      const expandableNodesFound = fixture.debugElement.queryAll(By.css('.expandable-node a'));
      const childlessNodesFound = fixture.debugElement.queryAll(By.css('.childless-node a'));
--- a/src/app/core/data/base/base-data.service.spec.ts
+++ b/src/app/core/data/base/base-data.service.spec.ts
@@ -641,6 +641,62 @@ describe('BaseDataService', () => {
    });
  });

+  describe('hasCachedResponse', () => {
+    it('should return false when the request will be dispatched', (done) => {
+      const result = service.hasCachedResponse('test-href');
+
+      result.subscribe((hasCachedResponse) => {
+        expect(hasCachedResponse).toBeFalse();
+        done();
+      });
+    });
+
+    it('should return true when the request will not be dispatched', (done) => {
+      (requestService.shouldDispatchRequest as jasmine.Spy).and.returnValue(false);
+      const result = service.hasCachedResponse('test-href');
+
+      result.subscribe((hasCachedResponse) => {
+        expect(hasCachedResponse).toBeTrue();
+        done();
+      });
+    });
+  });
+
+  describe('hasCachedErrorResponse', () => {
+    it('should return false when no response is cached', (done) => {
+      spyOn(service,'hasCachedResponse').and.returnValue(observableOf(false));
+      const result = service.hasCachedErrorResponse('test-href');
+
+      result.subscribe((hasCachedErrorResponse) => {
+        expect(hasCachedErrorResponse).toBeFalse();
+        done();
+      });
+    });
+    it('should return false when no error response is cached', (done) => {
+      spyOn(service,'hasCachedResponse').and.returnValue(observableOf(true));
+      spyOn(rdbService,'buildSingle').and.returnValue(createSuccessfulRemoteDataObject$({}));
+
+      const result = service.hasCachedErrorResponse('test-href');
+
+      result.subscribe((hasCachedErrorResponse) => {
+        expect(hasCachedErrorResponse).toBeFalse();
+        done();
+      });
+    });
+
+    it('should return true when an error response is cached', (done) => {
+      spyOn(service,'hasCachedResponse').and.returnValue(observableOf(true));
+      spyOn(rdbService,'buildSingle').and.returnValue(createFailedRemoteDataObject$());
+
+      const result = service.hasCachedErrorResponse('test-href');
+
+      result.subscribe((hasCachedErrorResponse) => {
+        expect(hasCachedErrorResponse).toBeTrue();
+        done();
+      });
+    });
+  });
+
  describe('addDependency', () => {
    let addDependencySpy;

--- a/src/app/core/data/base/base-data.service.ts
+++ b/src/app/core/data/base/base-data.service.ts
@@ -341,6 +341,48 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
    }
  }

+  /**
+   * Checks for the provided href whether a response is already cached
+   * @param href$                       The url for which to check whether there is a cached response.
+   *                                    Can be a string or an Observable<string>
+   */
+  hasCachedResponse(href$: string | Observable<string>): Observable<boolean> {
+    if (isNotEmpty(href$)) {
+      if (typeof href$ === 'string') {
+        href$ = observableOf(href$);
+      }
+      return href$.pipe(
+        isNotEmptyOperator(),
+        take(1),
+        map((href: string) => {
+          const requestId = this.requestService.generateRequestId();
+          const request = new GetRequest(requestId, href);
+          return !this.requestService.shouldDispatchRequest(request, true);
+        }),
+      );
+    }
+    throw new Error(`Can't check whether there is a cached response for an empty href$`);
+  }
+
+  /**
+   * Checks for the provided href whether an ERROR response is currently cached
+   * @param href$                       The url for which to check whether there is a cached ERROR response.
+   *                                    Can be a string or an Observable<string>
+   */
+  hasCachedErrorResponse(href$: string | Observable<string>): Observable<boolean> {
+    return this.hasCachedResponse(href$).pipe(
+      switchMap((hasCachedResponse) => {
+        if (hasCachedResponse) {
+           return this.rdbService.buildSingle(href$).pipe(
+             getFirstCompletedRemoteData(),
+             map((rd => rd.hasFailed))
+           );
+        }
+        return observableOf(false);
+      })
+    );
+  }
+
  /**
   * Return the links to traverse from the root of the api to the
   * endpoint this DataService represents
--- a/src/app/core/data/external-source-data.service.spec.ts
+++ b/src/app/core/data/external-source-data.service.spec.ts
@@ -5,6 +5,7 @@ import { ExternalSourceEntry } from '../shared/external-source-entry.model';
 import { of as observableOf } from 'rxjs';
 import { GetRequest } from './request.models';
 import { testSearchDataImplementation } from './base/search-data.spec';
+import { take } from 'rxjs/operators';

 describe('ExternalSourceService', () => {
  let service: ExternalSourceDataService;
@@ -64,19 +65,42 @@ describe('ExternalSourceService', () => {
  });

  describe('getExternalSourceEntries', () => {
-    let result;

-    beforeEach(() => {
-      result = service.getExternalSourceEntries('test');
+    describe('when no error response is cached', () => {
+      let result;
+      beforeEach(() => {
+        spyOn(service, 'hasCachedErrorResponse').and.returnValue(observableOf(false));
+        result = service.getExternalSourceEntries('test');
+      });
+
+      it('should send a GetRequest', () => {
+        result.pipe(take(1)).subscribe();
+        expect(requestService.send).toHaveBeenCalledWith(jasmine.any(GetRequest), true);
+      });
+
+      it('should return the entries', () => {
+        result.subscribe((resultRD) => {
+          expect(resultRD.payload.page).toBe(entries);
+        });
+      });
    });

-    it('should send a GetRequest', () => {
-      expect(requestService.send).toHaveBeenCalledWith(jasmine.any(GetRequest), true);
-    });
+    describe('when an error response is cached', () => {
+      let result;
+      beforeEach(() => {
+        spyOn(service, 'hasCachedErrorResponse').and.returnValue(observableOf(true));
+        result = service.getExternalSourceEntries('test');
+      });

-    it('should return the entries', () => {
-      result.subscribe((resultRD) => {
-        expect(resultRD.payload.page).toBe(entries);
+      it('should send a GetRequest', () => {
+        result.pipe(take(1)).subscribe();
+        expect(requestService.send).toHaveBeenCalledWith(jasmine.any(GetRequest), false);
+      });
+
+      it('should return the entries', () => {
+        result.subscribe((resultRD) => {
+          expect(resultRD.payload.page).toBe(entries);
+        });
      });
    });
  });
--- a/src/app/core/data/external-source-data.service.ts
+++ b/src/app/core/data/external-source-data.service.ts
@@ -74,7 +74,12 @@ export class ExternalSourceDataService extends IdentifiableDataService<ExternalS
    );

    // TODO create a dedicated ExternalSourceEntryDataService and move this entire method to it. Then the "as any"s won't be necessary
-    return this.findListByHref(href$, undefined, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow as any) as any;
+
+    return this.hasCachedErrorResponse(href$).pipe(
+      switchMap((hasCachedErrorResponse) => {
+        return this.findListByHref(href$, undefined, !hasCachedErrorResponse, reRequestOnStale, ...linksToFollow as any);
+      })
+    ) as any;
  }

  /**
--- a/src/app/curation-form/curation-form.component.ts
+++ b/src/app/curation-form/curation-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { ScriptDataService } from '../core/data/processes/script-data.service';
 import { FormControl, FormGroup } from '@angular/forms';
 import { getFirstCompletedRemoteData } from '../core/shared/operators';
@@ -40,7 +40,8 @@ export class CurationFormComponent implements OnInit {
    private notificationsService: NotificationsService,
    private translateService: TranslateService,
    private handleService: HandleService,
-    private router: Router
+    private router: Router,
+    private cdr: ChangeDetectorRef
  ) {
  }

@@ -59,6 +60,7 @@ export class CurationFormComponent implements OnInit {
        .filter((value) => isNotEmpty(value) && value.includes('='))
        .map((value) => value.split('=')[1].trim());
      this.form.get('task').patchValue(this.tasks[0]);
+      this.cdr.detectChanges();
    });
  }

--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,7 +1,4 @@
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
-    :host.open {
-        background-color: var(--bs-white);
-        top: 0;
-        position: sticky;
-    }
+:host {
+  position: relative;
+  z-index: var(--ds-nav-z-index);
 }
--- a/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss
@@ -1,3 +0,0 @@
-:host {
-  z-index: var(--ds-nav-z-index);
-}
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -11,13 +11,12 @@
  line-height: 1.5;
 }

-.navbar ::ng-deep {
-  a {
-    color: var(--ds-header-icon-color);
+.navbar-toggler {
+  border: none;
+  color: var(--ds-header-icon-color);

-    &:hover, &:focus {
-      color: var(--ds-header-icon-color-hover);
-    }
+  &:hover, &:focus {
+    color: var(--ds-header-icon-color-hover);
  }
 }

--- a/src/app/item-page/edit-item-page/edit-item-page.module.ts
+++ b/src/app/item-page/edit-item-page/edit-item-page.module.ts
@@ -46,6 +46,7 @@ import { IdentifierDataService } from '../../core/data/identifier-data.service';
 import { IdentifierDataComponent } from '../../shared/object-list/identifier-data/identifier-data.component';
 import { ItemRegisterDoiComponent } from './item-register-doi/item-register-doi.component';
 import { DsoSharedModule } from '../../dso-shared/dso-shared.module';
+import { ItemCurateComponent } from './item-curate/item-curate.component';
 import { ItemAccessControlComponent } from './item-access-control/item-access-control.component';
 import { ResultsBackButtonModule } from '../../shared/results-back-button/results-back-button.module';
 import {
@@ -96,6 +97,7 @@ import {
    ItemAuthorizationsComponent,
    IdentifierDataComponent,
    ItemRegisterDoiComponent,
+    ItemCurateComponent,
    ItemAccessControlComponent,
  ],
  providers: [
--- a/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts
+++ b/src/app/item-page/edit-item-page/edit-item-page.routing.module.ts
@@ -41,6 +41,7 @@ import { ItemPageVersionHistoryGuard } from './item-page-version-history.guard';
 import { ItemPageCollectionMapperGuard } from './item-page-collection-mapper.guard';
 import { ThemedDsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component';
 import { ItemPageRegisterDoiGuard } from './item-page-register-doi.guard';
+import { ItemCurateComponent } from './item-curate/item-curate.component';
 import { ItemAccessControlComponent } from './item-access-control/item-access-control.component';

 /**
@@ -83,6 +84,11 @@ import { ItemAccessControlComponent } from './item-access-control/item-access-co
                data: { title: 'item.edit.tabs.metadata.title', showBreadcrumbs: true },
                canActivate: [ItemPageMetadataGuard]
              },
+              {
+                path: 'curate',
+                component: ItemCurateComponent,
+                data: { title: 'item.edit.tabs.curate.title', showBreadcrumbs: true }
+              },
              {
                path: 'relationships',
                component: ItemRelationshipsComponent,
--- a/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
+++ b/src/app/item-page/edit-item-page/item-curate/item-curate.component.html
@@ -0,0 +1,7 @@
+<div class="container mt-3">
+    <h3>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h3>
+    <ds-curation-form
+      *ngIf="dsoRD$ | async as dsoRD"
+      [dsoHandle]="dsoRD?.payload.handle"
+    ></ds-curation-form>
+</div>
--- a/src/app/item-page/edit-item-page/item-curate/item-curate.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-curate/item-curate.component.spec.ts
@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { ItemCurateComponent } from './item-curate.component';
+import { of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
+import { ActivatedRoute } from '@angular/router';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { Item } from '../../../core/shared/item.model';
+
+describe('ItemCurateComponent', () => {
+  let comp: ItemCurateComponent;
+  let fixture: ComponentFixture<ItemCurateComponent>;
+  let debugEl: DebugElement;
+
+  let routeStub;
+  let dsoNameService;
+
+  const item = Object.assign(new Item(), {
+    handle: '123456789/1',
+    metadata: {'dc.title': ['Item Name']}
+  });
+
+  beforeEach(waitForAsync(() => {
+    routeStub = {
+      parent: {
+        data: observableOf({
+          dso: createSuccessfulRemoteDataObject(item)
+        })
+      }
+    };
+
+    dsoNameService = jasmine.createSpyObj('dsoNameService', {
+      getName: 'Item Name'
+    });
+
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ItemCurateComponent],
+      providers: [
+        {provide: ActivatedRoute, useValue: routeStub},
+        {provide: DSONameService, useValue: dsoNameService}
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemCurateComponent);
+    comp = fixture.componentInstance;
+    debugEl = fixture.debugElement;
+
+    fixture.detectChanges();
+  });
+  describe('init', () => {
+    it('should initialise the comp', () => {
+      expect(comp).toBeDefined();
+      expect(debugEl.nativeElement.innerHTML).toContain('ds-curation-form');
+    });
+
+    it('should contain the item information provided in the route', (done) => {
+      comp.dsoRD$.subscribe((value) => {
+        expect(value.payload.handle).toEqual('123456789/1');
+        done();
+      });
+    });
+
+    it('should contain the item name', (done) => {
+      comp.itemName$.subscribe((value) => {
+        expect(value).toEqual('Item Name');
+        done();
+      });
+    });
+  });
+});
--- a/src/app/item-page/edit-item-page/item-curate/item-curate.component.ts
+++ b/src/app/item-page/edit-item-page/item-curate/item-curate.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { filter, map, take } from 'rxjs/operators';
+import { RemoteData } from '../../../core/data/remote-data';
+import { Observable } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
+import { hasValue } from '../../../shared/empty.util';
+import { Item } from '../../../core/shared/item.model';
+
+/**
+ * Component for managing a collection's curation tasks
+ */
+@Component({
+  selector: 'ds-item-curate',
+  templateUrl: './item-curate.component.html',
+})
+export class ItemCurateComponent implements OnInit {
+  dsoRD$: Observable<RemoteData<Item>>;
+  itemName$: Observable<string>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private dsoNameService: DSONameService,
+  ) {}
+
+  ngOnInit(): void {
+    this.dsoRD$ = this.route.parent.data.pipe(
+      take(1),
+      map((data) => data.dso),
+    );
+
+    this.itemName$ = this.dsoRD$.pipe(
+      filter((rd: RemoteData<Item>) => hasValue(rd)),
+      map((rd: RemoteData<Item>) => {
+        return this.dsoNameService.getName(rd.payload);
+      })
+    );
+  }
+}
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -8,10 +8,10 @@
      </ds-themed-file-download-link>
      <ds-themed-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-themed-loading>
      <div *ngIf="!isLastPage" class="mt-1" id="view-more">
-        <a class="bitstream-view-more btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</a>
+        <button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
      </div>
      <div *ngIf="isLastPage && currentPage != 1" class="mt-1" id="collapse">
-        <a class="bitstream-collapse btn btn-outline-secondary btn-sm" [routerLink]="[]" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</a>
+        <button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
      </div>
    </div>
  </ds-metadata-field-wrapper>
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -7,12 +7,12 @@
      <ds-themed-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
      <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
        <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
-          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+            translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
        </div>
        <div *ngIf="objects.length > 1" class="float-right">
-          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: representations?.length } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+            translate:{ amount: representations?.length } }}</button>
        </div>
      </div>
    </ng-container>
--- a/src/app/item-page/simple/related-items/related-items.component.html
+++ b/src/app/item-page/simple/related-items/related-items.component.html
@@ -7,12 +7,12 @@
      <ds-themed-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-themed-loading>
      <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
        <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
-          <a [routerLink]="[]" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</button>
        </div>
        <div *ngIf="objects.length > 1" class="float-right" id="view-less">
-          <a [routerLink]="[]" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: itemsRD?.payload?.page?.length } }}</a>
+          <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+            translate:{ amount: itemsRD?.payload?.page?.length } }}</button>
        </div>
      </div>
    </ng-container>
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -4,9 +4,9 @@
      <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
             formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
-      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
+      <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
        <em class="fas fa-search fa-lg fa-fw"></em>
-      </a>
+      </button>
    </form>
  </div>
 </div>
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -1,13 +1,14 @@
 input[type="text"] {
  margin-top: calc(-0.5 * var(--bs-font-size-base));
  background-color: #fff !important;
+  border-color: var(--ds-header-icon-color);

  &.collapsed {
    opacity: 0;
  }
 }

-a.submit-icon {
+.submit-icon {
  cursor: pointer;
  position: sticky;
  top: 0;
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -19,7 +19,7 @@
  </li>
  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
    <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
      <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
        <ds-user-menu></ds-user-menu>
@@ -27,7 +27,7 @@
    </div>
  </li>
  <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a id="logoutLink" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="px-1">
+    <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
      <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
      <span class="sr-only">(current)</span>
    </a>
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -12,7 +12,7 @@
  background-color: transparent !important;
 }

-.dropdown-toggle {
+.loginLink, .dropdownLogin, .logoutLink, .dropdownLogout {
  color: var(--ds-header-icon-color);

  &:hover, &:focus {
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
@@ -358,7 +358,7 @@ describe('AuthNavMenuComponent', () => {
      });

      it('should render logout link', inject([Store], (store: Store<AppState>) => {
-        const logoutDropdownMenu = deNavMenuItem.query(By.css('a[id=logoutLink]'));
+        const logoutDropdownMenu = deNavMenuItem.query(By.css('a.logoutLink'));
        expect(logoutDropdownMenu.nativeElement).toBeDefined();
      }));
    });
--- a/src/app/shared/mocks/request.service.mock.ts
+++ b/src/app/shared/mocks/request.service.mock.ts
@@ -14,6 +14,7 @@ export function getMockRequestService(requestEntry$: Observable<RequestEntry> =
    removeByHrefSubstring: observableOf(true),
    setStaleByHrefSubstring: observableOf(true),
    setStaleByUUID: observableOf(true),
-    hasByHref$: observableOf(false)
+    hasByHref$: observableOf(false),
+    shouldDispatchRequest: true
  });
 }
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
@@ -9,7 +9,6 @@
    <ds-themed-collection-dropdown [ngClass]="{'d-none': isLoading()}"
                            (selectionChange)="selectObject($event)"
                            (searchComplete)="searchComplete()"
-                            (theOnlySelectable)="theOnlySelectable($event)"
                            [entityType]="entityType">
    </ds-themed-collection-dropdown>
  </div>
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.spec.ts
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.spec.ts
@@ -64,7 +64,7 @@ describe('SubmissionImportExternalCollectionComponent test suite', () => {
      compAsAny = null;
    });

-    it('should emit from selectedEvent on selectObject', () => {
+    it('should emit from selectedEvent on selectObject and set loading to true', () => {
      spyOn(comp.selectedEvent, 'emit').and.callThrough();

      const entry = {
@@ -79,6 +79,7 @@ describe('SubmissionImportExternalCollectionComponent test suite', () => {
      comp.selectObject(entry);

      expect(comp.selectedEvent.emit).toHaveBeenCalledWith(entry);
+      expect(comp.loading).toBeTrue();
    });

    it('should dismiss modal on closeCollectionModal', () => {
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.ts
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.ts
@@ -38,6 +38,7 @@ export class SubmissionImportExternalCollectionComponent {
   * This method emits the selected Collection from the 'selectedEvent' variable.
   */
  public selectObject(object: CollectionListEntry): void {
+    this.loading = true;
    this.selectedEvent.emit(object);
  }

--- a/src/app/submission/import-external/submission-import-external.component.ts
+++ b/src/app/submission/import-external/submission-import-external.component.ts
@@ -15,7 +15,9 @@ import { Context } from '../../core/shared/context.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { RouteService } from '../../core/services/route.service';
 import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
-import { SubmissionImportExternalPreviewComponent } from './import-external-preview/submission-import-external-preview.component';
+import {
+  SubmissionImportExternalPreviewComponent
+} from './import-external-preview/submission-import-external-preview.component';
 import { fadeIn } from '../../shared/animations/fade';
 import { PageInfo } from '../../core/shared/page-info.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2311,6 +2311,7 @@
  "item.edit.tabs.curate.head": "Curate",

  "item.edit.tabs.curate.title": "Item Edit - Curate",
+  "item.edit.curate.title": "Curate Item: {{item}}",

  "item.edit.tabs.access-control.head": "Access Control",

@@ -3172,6 +3173,9 @@

  "nav.search": "Search",

+  "nav.search.button": "Submit search",
+
+
  "nav.statistics.header": "Statistics",

  "nav.stop-impersonating": "Stop impersonating EPerson",
--- a/src/assets/i18n/vi.json5
+++ b/src/assets/i18n/vi.json5
--- a/src/config/default-app-config.ts
+++ b/src/config/default-app-config.ts
@@ -229,6 +229,7 @@ export class DefaultAppConfig implements AppConfig {
    { code: 'fi', label: 'Suomi', active: true },
    { code: 'sv', label: 'Svenska', active: true },
    { code: 'tr', label: 'Türkçe', active: true },
+    { code: 'vi', label: 'Tiếng Việt', active: true },
    { code: 'kk', label: 'Қазақ', active: true },
    { code: 'bn', label: 'বাংলা', active: true },
    { code: 'hi', label: 'हिंदी', active: true},
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -1,209 +1,225 @@
 html {
-  position: relative;
-  min-height: 100%;
+    position: relative;
+    min-height: 100%;
 }

 body {
-  overflow-x: hidden;
+    overflow-x: hidden;
 }

 // Sticky Footer
 .outer-wrapper {
-  display: flex;
-  margin: 0;
+    display: flex;
+    margin: 0;
 }

 .inner-wrapper {
-  flex: 1 1 auto;
-  flex-flow: column nowrap;
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
+    flex: 1 1 auto;
+    flex-flow: column nowrap;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
 }

 .main-content {
-  z-index: var(--ds-main-z-index);
-  flex: 1 1 100%;
-  margin-top: var(--ds-content-spacing);
-  margin-bottom: var(--ds-content-spacing);
+    z-index: var(--ds-main-z-index);
+    flex: 1 1 100%;
+    margin-top: var(--ds-content-spacing);
+    margin-bottom: var(--ds-content-spacing);
 }

 .alert.hide {
-  padding: 0;
-  margin: 0;
+    padding: 0;
+    margin: 0;
 }

 ds-admin-sidebar {
-  position: fixed;
-  z-index: var(--ds-sidebar-z-index);
+    position: fixed;
+    z-index: var(--ds-sidebar-z-index);
 }

 .sticky-top {
-  z-index: 0;
+    z-index: 0;
 }

 .media-viewer
-  .change-gallery
-  .ngx-gallery
-  ngx-gallery-preview.ngx-gallery-active {
-  right: 0;
-  left: auto;
-  width: calc(100% - 53px);
+.change-gallery
+.ngx-gallery
+ngx-gallery-preview.ngx-gallery-active {
+    right: 0;
+    left: auto;
+    width: calc(100% - 53px);
 }

 .ds-submission-reorder-dragging {
-  .ds-hint,
-  button {
-    display: none;
-  }
+    .ds-hint,
+    button {
+        display: none;
+    }
 }

 ngb-modal-backdrop {
-  // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
-  // animating background-color between transparent & a RGBA color instead looks smoother
-  &.fade {
-    opacity: 1 !important;
-    background-color: transparent;
-    transition: background-color 0.15s linear;
+    // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
+    // animating background-color between transparent & a RGBA color instead looks smoother
+    &.fade {
+        opacity: 1 !important;
+        background-color: transparent;
+        transition: background-color 0.15s linear;

-    &.show {
-      background-color: rgba(0, 0, 0, 0.5);
+        &.show {
+            background-color: rgba(0, 0, 0, 0.5);
+        }
    }
-  }
 }

 .dont-break-out {
-  /* These are technically the same, but use both */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;

-  -ms-word-break: break-all;
-  /* This is the dangerous one in WebKit, as it breaks things wherever */
-  word-break: break-all;
-  /* Instead use this non-standard one: */
-  word-break: break-word;
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;

-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;

 }

-.researcher-profile-switch button:focus{
-  outline: none !important;
+.researcher-profile-switch button:focus {
+    outline: none !important;
 }
-.researcher-profile-switch .switch.checked{
-  color: #fff;
+
+.researcher-profile-switch .switch.checked {
+    color: #fff;
 }

 /* Replicate default spacing look ~ preserveWhitespace=true
   To be used e.g. on a div containing buttons that should have a bit of spacing in between
 */
 .space-children-mr > :not(:last-child) {
-  margin-right: var(--ds-gap);
+    margin-right: var(--ds-gap);
 }

 /* Complement .space-children-mr when spaced elements are not on the same level */
 .mr-gap {
-  margin-right: var(--ds-gap);
+    margin-right: var(--ds-gap);
 }

 .ml-gap {
-  margin-left: var(--ds-gap);
+    margin-left: var(--ds-gap);
 }

 .custom-accordion .card-header button {
-  -webkit-box-shadow: none!important;
-  box-shadow: none!important;
-  width: 100%;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    width: 100%;
 }
+
 .custom-accordion .card:first-of-type {
-  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
-  border-bottom-left-radius: var(--bs-card-border-radius) !important;
-  border-bottom-right-radius: var(--bs-card-border-radius) !important;
+    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
+    border-bottom-left-radius: var(--bs-card-border-radius) !important;
+    border-bottom-right-radius: var(--bs-card-border-radius) !important;
 }

 ds-dynamic-form-control-container.d-none {
-  /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
-     the same row expand accordingly
-   */
-  visibility: collapse;
+    /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
+       the same row expand accordingly
+     */
+    visibility: collapse;
 }

 /* Used for dso administrative functionality */
 .btn-dark {
-  background-color: var(--ds-admin-sidebar-bg);
+    background-color: var(--ds-admin-sidebar-bg);
 }

 .preserve-line-breaks {
-  white-space: pre-line;
+    white-space: pre-line;
 }

 /* Thumbnail styles */
 .hide-placeholder-text {
-  .thumbnail-placeholder {
-    color: transparent !important;
-  }
+    .thumbnail-placeholder {
+        color: transparent !important;
+    }
 }

 /* Used to hide the thumbnail column in modals. */
 .hide-modal-thumbnail-column {
-  .modal-body ds-listable-object-component-loader div.row > div:first-child {
-    display: none;
-  }
-  .modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
+    .modal-body ds-listable-object-component-loader div.row > div:first-child {
+        display: none;
+    }
+
+    .modal-body ds-listable-object-component-loader div.row > div:nth-child(2) {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
 }

 /* The font sizes used in "no thumbnail" placeholder */
 .thumb-font-0 {
-  .thumbnail-placeholder {
-    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-      font-size: 0.7rem;
-      padding: 0.2rem;
+    .thumbnail-placeholder {
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            font-size: 0.7rem;
+            padding: 0.2rem;
+        }
+        @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+            font-size: 0.6rem;
+            padding: 0.1rem;
+        }
+        font-size: 0.4rem;
+        padding: 0.1rem;
    }
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.6rem;
-      padding: 0.1rem;
-    }
-    font-size: 0.4rem;
-    padding: 0.1rem;
-  }
 }
+
 .thumb-font-1 {
-  .thumbnail-placeholder {
-    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.9rem;
-      padding: 0.1rem;
+    .thumbnail-placeholder {
+        @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+            font-size: 0.9rem;
+            padding: 0.1rem;
+        }
+        @media screen and (max-width: 950px) {
+            font-size: 0.4rem;
+            padding: 0.1rem;
+        }
+        font-size: 0.5rem;
+        padding: 0.125rem;
    }
-    @media screen and (max-width: 950px) {
-      font-size: 0.4rem;
-      padding: 0.1rem;
-    }
-    font-size: 0.5rem;
-    padding: 0.125rem;
-  }
 }
+
 .thumb-font-2 {
-  .thumbnail-placeholder {
-    font-size: 0.9rem;
-    padding: 0.125rem;
-  }
+    .thumbnail-placeholder {
+        font-size: 0.9rem;
+        padding: 0.125rem;
+    }
 }
+
 .thumb-font-3 {
-  .thumbnail-placeholder {
-    font-size: 1.25rem;
-    padding: 0.5rem;
-  }
+    .thumbnail-placeholder {
+        font-size: 1.25rem;
+        padding: 0.5rem;
+    }
 }

+.btn.btn-link.btn-link-inline {
+    display: inline;
+    padding: 0;

+    &:not(:disabled){
+        &:hover, &:focus {
+            box-shadow: none;
+        }
+    }
+
+}

 .badge-validation {
  background-color: #{map-get($theme-colors, warning)};
--- 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
@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
 */
@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',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -6,7 +6,7 @@
      </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-themed-search-navbar></ds-themed-search-navbar>
      <ds-lang-switch></ds-lang-switch>
      <ds-context-help-toggle></ds-context-help-toggle>
      <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -15,5 +15,12 @@
 .navbar-toggler .navbar-toggler-icon {
  background-image: none !important;
  line-height: 1.5;
-  color: var(--bs-link-color);
+}
+
+.navbar-toggler {
+  color: var(--ds-header-icon-color);
+
+  &:hover, &:focus {
+    color: var(--ds-header-icon-color-hover);
+  }
 }
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -2,7 +2,6 @@ nav.navbar {
  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
  border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
  align-items: baseline;
-  color: var(--ds-header-icon-color);
 }

 /** Mobile menu styling **/