From 048361281982dcbe1617275b6e987a8fc083ace1 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 19 Nov 2023 03:22:37 +0100
Subject: [PATCH 01/14] 108588: Moved CommunityPageSubCommunityListComponent &
 CommunityPageSubCollectionListComponent to a custom sections folder

---
 .../community-page/community-page.module.ts   |  8 ++--
 ...ty-page-sub-collection-list.component.html |  0
 ...ty-page-sub-collection-list.component.scss |  0
 ...page-sub-collection-list.component.spec.ts | 42 +++++++++----------
 ...nity-page-sub-collection-list.component.ts | 22 +++++-----
 ...nity-page-sub-collection-list.component.ts |  8 ++--
 ...ity-page-sub-community-list.component.html |  0
 ...ity-page-sub-community-list.component.scss |  0
 ...-page-sub-community-list.component.spec.ts | 42 +++++++++----------
 ...unity-page-sub-community-list.component.ts | 18 ++++----
 ...unity-page-sub-community-list.component.ts |  8 ++--
 ...ty-page-sub-collection-list.component.html |  0
 ...ty-page-sub-collection-list.component.scss |  0
 ...nity-page-sub-collection-list.component.ts | 12 ++++++
 ...ity-page-sub-community-list.component.html |  0
 ...ity-page-sub-community-list.component.scss |  0
 ...unity-page-sub-community-list.component.ts | 12 ++++++
 ...nity-page-sub-collection-list.component.ts | 12 ------
 ...unity-page-sub-community-list.component.ts | 12 ------
 src/themes/custom/lazy-theme.module.ts        |  7 +---
 20 files changed, 99 insertions(+), 104 deletions(-)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.html (100%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.scss (100%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.spec.ts (76%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.ts (78%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/themed-community-page-sub-collection-list.component.ts (68%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.html (100%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.scss (100%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.spec.ts (76%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.ts (80%)
 rename src/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/themed-community-page-sub-community-list.component.ts (68%)
 rename src/themes/custom/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.html (100%)
 rename src/themes/custom/app/community-page/{ => sections/sub-com-col-section}/sub-collection-list/community-page-sub-collection-list.component.scss (100%)
 create mode 100644 src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
 rename src/themes/custom/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.html (100%)
 rename src/themes/custom/app/community-page/{ => sections/sub-com-col-section}/sub-community-list/community-page-sub-community-list.component.scss (100%)
 create mode 100644 src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
 delete mode 100644 src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
 delete mode 100644 src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts

diff --git a/src/app/community-page/community-page.module.ts b/src/app/community-page/community-page.module.ts
index 45ffb2a786..499e9092e3 100644
--- a/src/app/community-page/community-page.module.ts
+++ b/src/app/community-page/community-page.module.ts
@@ -4,9 +4,9 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '../shared/shared.module';
 
 import { CommunityPageComponent } from './community-page.component';
-import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component';
+import { CommunityPageSubCollectionListComponent } from './sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
 import { CommunityPageRoutingModule } from './community-page-routing.module';
-import { CommunityPageSubCommunityListComponent } from './sub-community-list/community-page-sub-community-list.component';
+import { CommunityPageSubCommunityListComponent } from './sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component';
 import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component';
 import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component';
 import { StatisticsModule } from '../statistics/statistics.module';
@@ -15,10 +15,10 @@ import { ThemedCommunityPageComponent } from './themed-community-page.component'
 import { ComcolModule } from '../shared/comcol/comcol.module';
 import {
   ThemedCommunityPageSubCommunityListComponent
-} from './sub-community-list/themed-community-page-sub-community-list.component';
+} from './sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component';
 import {
   ThemedCollectionPageSubCollectionListComponent
-} from './sub-collection-list/themed-community-page-sub-collection-list.component';
+} from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 
 const DECLARATIONS = [CommunityPageComponent,
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
similarity index 100%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.scss
similarity index 100%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.scss
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.spec.ts
similarity index 76%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.spec.ts
index bca3c42a95..8c4af30991 100644
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.spec.ts
@@ -8,27 +8,27 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
-import { Community } from '../../core/shared/community.model';
-import { SharedModule } from '../../shared/shared.module';
-import { CollectionDataService } from '../../core/data/collection-data.service';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { buildPaginatedList } from '../../core/data/paginated-list.model';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { HostWindowService } from '../../shared/host-window.service';
-import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
-import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
-import { ThemeService } from '../../shared/theme-support/theme.service';
-import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../core/data/find-list-options.model';
-import { GroupDataService } from '../../core/eperson/group-data.service';
-import { LinkHeadService } from '../../core/services/link-head.service';
-import { ConfigurationDataService } from '../../core/data/configuration-data.service';
-import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service';
-import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
-import { createPaginatedList } from '../../shared/testing/utils.test';
-import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
+import { Community } from '../../../../core/shared/community.model';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CollectionDataService } from '../../../../core/data/collection-data.service';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { buildPaginatedList } from '../../../../core/data/paginated-list.model';
+import { PageInfo } from '../../../../core/shared/page-info.model';
+import { HostWindowService } from '../../../../shared/host-window.service';
+import { HostWindowServiceStub } from '../../../../shared/testing/host-window-service.stub';
+import { SelectableListService } from '../../../../shared/object-list/selectable-list/selectable-list.service';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { getMockThemeService } from '../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../shared/theme-support/theme.service';
+import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../../../core/data/find-list-options.model';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { LinkHeadService } from '../../../../core/services/link-head.service';
+import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { ConfigurationProperty } from '../../../../core/shared/configuration-property.model';
+import { createPaginatedList } from '../../../../shared/testing/utils.test';
+import { SearchConfigurationServiceStub } from '../../../../shared/testing/search-configuration-service.stub';
 
 describe('CommunityPageSubCollectionList Component', () => {
   let comp: CommunityPageSubCollectionListComponent;
diff --git a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
similarity index 78%
rename from src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
index 3a77149e5b..bd506882ee 100644
--- a/src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
@@ -1,19 +1,17 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { BehaviorSubject, combineLatest as observableCombineLatest } from 'rxjs';
-
-import { RemoteData } from '../../core/data/remote-data';
-import { Collection } from '../../core/shared/collection.model';
-import { Community } from '../../core/shared/community.model';
-import { fadeIn } from '../../shared/animations/fade';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { CollectionDataService } from '../../core/data/collection-data.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { Collection } from '../../../../core/shared/collection.model';
+import { Community } from '../../../../core/shared/community.model';
+import { fadeIn } from '../../../../shared/animations/fade';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
+import { CollectionDataService } from '../../../../core/data/collection-data.service';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { switchMap } from 'rxjs/operators';
-import { hasValue } from '../../shared/empty.util';
+import { hasValue } from '../../../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-collection-list',
diff --git a/src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
similarity index 68%
rename from src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
index f1f49f204c..ebbec33e8e 100644
--- a/src/app/community-page/sub-collection-list/themed-community-page-sub-collection-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts
@@ -1,12 +1,12 @@
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ThemedComponent } from '../../../../shared/theme-support/themed.component';
 import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
 import { Component, Input } from '@angular/core';
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../../core/shared/community.model';
 
 @Component({
   selector: 'ds-themed-community-page-sub-collection-list',
   styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
 })
 export class ThemedCollectionPageSubCollectionListComponent extends ThemedComponent<CommunityPageSubCollectionListComponent> {
   @Input() community: Community;
@@ -18,7 +18,7 @@ export class ThemedCollectionPageSubCollectionListComponent extends ThemedCompon
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../../themes/${themeName}/app/community-page/sub-collection-list/community-page-sub-collection-list.component`);
+    return import(`../../../../../themes/${themeName}/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
similarity index 100%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.html
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.scss b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.scss
similarity index 100%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.scss
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.scss
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.spec.ts b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.spec.ts
similarity index 76%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.spec.ts
index 0a14fe6dd1..c5efc9c2c1 100644
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.spec.ts
@@ -8,27 +8,27 @@ import { By } from '@angular/platform-browser';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
-import { Community } from '../../core/shared/community.model';
-import { buildPaginatedList } from '../../core/data/paginated-list.model';
-import { PageInfo } from '../../core/shared/page-info.model';
-import { SharedModule } from '../../shared/shared.module';
-import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
-import { HostWindowService } from '../../shared/host-window.service';
-import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
-import { CommunityDataService } from '../../core/data/community-data.service';
-import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
-import { ThemeService } from '../../shared/theme-support/theme.service';
-import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
-import { FindListOptions } from '../../core/data/find-list-options.model';
-import { GroupDataService } from '../../core/eperson/group-data.service';
-import { LinkHeadService } from '../../core/services/link-head.service';
-import { ConfigurationDataService } from '../../core/data/configuration-data.service';
-import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service';
-import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub';
-import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
-import { createPaginatedList } from '../../shared/testing/utils.test';
+import { Community } from '../../../../core/shared/community.model';
+import { buildPaginatedList } from '../../../../core/data/paginated-list.model';
+import { PageInfo } from '../../../../core/shared/page-info.model';
+import { SharedModule } from '../../../../shared/shared.module';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
+import { HostWindowService } from '../../../../shared/host-window.service';
+import { HostWindowServiceStub } from '../../../../shared/testing/host-window-service.stub';
+import { CommunityDataService } from '../../../../core/data/community-data.service';
+import { SelectableListService } from '../../../../shared/object-list/selectable-list/selectable-list.service';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { getMockThemeService } from '../../../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../../../shared/theme-support/theme.service';
+import { PaginationServiceStub } from '../../../../shared/testing/pagination-service.stub';
+import { FindListOptions } from '../../../../core/data/find-list-options.model';
+import { GroupDataService } from '../../../../core/eperson/group-data.service';
+import { LinkHeadService } from '../../../../core/services/link-head.service';
+import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
+import { SearchConfigurationService } from '../../../../core/shared/search/search-configuration.service';
+import { SearchConfigurationServiceStub } from '../../../../shared/testing/search-configuration-service.stub';
+import { ConfigurationProperty } from '../../../../core/shared/configuration-property.model';
+import { createPaginatedList } from '../../../../shared/testing/utils.test';
 
 describe('CommunityPageSubCommunityListComponent Component', () => {
   let comp: CommunityPageSubCommunityListComponent;
diff --git a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
similarity index 80%
rename from src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
index 5a0409a051..61633e5128 100644
--- a/src/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
@@ -3,16 +3,16 @@ import { ActivatedRoute } from '@angular/router';
 
 import { BehaviorSubject, combineLatest as observableCombineLatest } from 'rxjs';
 
-import { RemoteData } from '../../core/data/remote-data';
-import { Community } from '../../core/shared/community.model';
-import { fadeIn } from '../../shared/animations/fade';
-import { PaginatedList } from '../../core/data/paginated-list.model';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { CommunityDataService } from '../../core/data/community-data.service';
+import { RemoteData } from '../../../../core/data/remote-data';
+import { Community } from '../../../../core/shared/community.model';
+import { fadeIn } from '../../../../shared/animations/fade';
+import { PaginatedList } from '../../../../core/data/paginated-list.model';
+import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../../../core/cache/models/sort-options.model';
+import { CommunityDataService } from '../../../../core/data/community-data.service';
 import { switchMap } from 'rxjs/operators';
-import { PaginationService } from '../../core/pagination/pagination.service';
-import { hasValue } from '../../shared/empty.util';
+import { PaginationService } from '../../../../core/pagination/pagination.service';
+import { hasValue } from '../../../../shared/empty.util';
 
 @Component({
   selector: 'ds-community-page-sub-community-list',
diff --git a/src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
similarity index 68%
rename from src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts
rename to src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
index 852c53186e..9c500cac10 100644
--- a/src/app/community-page/sub-community-list/themed-community-page-sub-community-list.component.ts
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts
@@ -1,12 +1,12 @@
-import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { ThemedComponent } from '../../../../shared/theme-support/themed.component';
 import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
 import { Component, Input } from '@angular/core';
-import { Community } from '../../core/shared/community.model';
+import { Community } from '../../../../core/shared/community.model';
 
 @Component({
   selector: 'ds-themed-community-page-sub-community-list',
   styleUrls: [],
-  templateUrl: '../../shared/theme-support/themed.component.html',
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
 })
 export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponent<CommunityPageSubCommunityListComponent> {
 
@@ -19,7 +19,7 @@ export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponen
   }
 
   protected importThemedComponent(themeName: string): Promise<any> {
-    return import(`../../../themes/${themeName}/app/community-page/sub-community-list/community-page-sub-community-list.component`);
+    return import(`../../../../../themes/${themeName}/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component`);
   }
 
   protected importUnthemedComponent(): Promise<any> {
diff --git a/src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
similarity index 100%
rename from src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.html
rename to src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
diff --git a/src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.scss
similarity index 100%
rename from src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss
rename to src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.scss
diff --git a/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
new file mode 100644
index 0000000000..a3f51bf916
--- /dev/null
+++ b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommunityPageSubCollectionListComponent as BaseComponent } from '../../../../../../../app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
+
+@Component({
+  selector: 'ds-community-page-sub-collection-list',
+  // styleUrls: ['./community-page-sub-collection-list.component.scss'],
+  styleUrls: ['../../../../../app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.scss'],
+  // templateUrl: './community-page-sub-collection-list.component.html',
+  templateUrl: '../../../../../app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html',
+})
+export class CommunityPageSubCollectionListComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.html b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
similarity index 100%
rename from src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.html
rename to src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
diff --git a/src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.scss b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.scss
similarity index 100%
rename from src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.scss
rename to src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.scss
diff --git a/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
new file mode 100644
index 0000000000..68af7dddd0
--- /dev/null
+++ b/src/themes/custom/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommunityPageSubCommunityListComponent as BaseComponent } from '../../../../../../../app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component';
+
+@Component({
+  selector: 'ds-community-page-sub-community-list',
+  // styleUrls: ['./community-page-sub-community-list.component.scss'],
+  styleUrls: ['../../../../../../../app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.scss'],
+  // templateUrl: './community-page-sub-community-list.component.html',
+  templateUrl: '../../../../../../../app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html',
+})
+export class CommunityPageSubCommunityListComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
deleted file mode 100644
index a228fe1071..0000000000
--- a/src/themes/custom/app/community-page/sub-collection-list/community-page-sub-collection-list.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { CommunityPageSubCollectionListComponent as BaseComponent }
-  from '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component';
-
-@Component({
-  selector: 'ds-community-page-sub-collection-list',
-  // styleUrls: ['./community-page-sub-collection-list.component.scss'],
-  styleUrls: ['../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss'],
-  // templateUrl: './community-page-sub-collection-list.component.html',
-  templateUrl: '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.html'
-})
-export class CommunityPageSubCollectionListComponent extends BaseComponent {}
diff --git a/src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts b/src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
deleted file mode 100644
index 1db265a844..0000000000
--- a/src/themes/custom/app/community-page/sub-community-list/community-page-sub-community-list.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { CommunityPageSubCommunityListComponent as BaseComponent }
-  from '../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component';
-
-@Component({
-  selector: 'ds-community-page-sub-community-list',
-  // styleUrls: ['./community-page-sub-community-list.component.scss'],
-  styleUrls: ['../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component.scss'],
-  // templateUrl: './community-page-sub-community-list.component.html',
-  templateUrl: '../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component.html'
-})
-export class CommunityPageSubCommunityListComponent extends BaseComponent {}
diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts
index e102089361..3bef57cb18 100644
--- a/src/themes/custom/lazy-theme.module.ts
+++ b/src/themes/custom/lazy-theme.module.ts
@@ -93,8 +93,8 @@ import { SearchResultsComponent } from './app/shared/search/search-results/searc
 import { AdminSidebarComponent } from './app/admin/admin-sidebar/admin-sidebar.component';
 import { ComcolPageBrowseByComponent } from './app/shared/comcol-page-browse-by/comcol-page-browse-by.component';
 import { SearchSettingsComponent } from './app/shared/search/search-settings/search-settings.component';
-import { CommunityPageSubCommunityListComponent } from './app/community-page/sub-community-list/community-page-sub-community-list.component';
-import { CommunityPageSubCollectionListComponent } from './app/community-page/sub-collection-list/community-page-sub-collection-list.component';
+import { CommunityPageSubCommunityListComponent } from './app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component';
+import { CommunityPageSubCollectionListComponent } from './app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
 import { ObjectListComponent } from './app/shared/object-list/object-list.component';
 
 import { BrowseByMetadataPageComponent } from './app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
@@ -299,9 +299,6 @@ const DECLARATIONS = [
     RequestCopyModule,
   ],
   declarations: DECLARATIONS,
-  exports: [
-    CommunityPageSubCollectionListComponent
-  ]
 })
 
   /**

From bb0b66f927a368f8bb35329eab242ad57f6f33b7 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 19 Nov 2023 03:39:25 +0100
Subject: [PATCH 02/14] 108588: Moved sub communities & collections from
 community page to new component

---
 .../community-page-routing.module.ts          |  9 +++++-
 .../community-page/community-page.module.ts   |  5 ++-
 .../sub-com-col-section.component.html        |  8 +++++
 .../sub-com-col-section.component.scss        |  0
 .../sub-com-col-section.component.spec.ts     | 32 +++++++++++++++++++
 .../sub-com-col-section.component.ts          | 28 ++++++++++++++++
 6 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html
 create mode 100644 src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.scss
 create mode 100644 src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts
 create mode 100644 src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts

diff --git a/src/app/community-page/community-page-routing.module.ts b/src/app/community-page/community-page-routing.module.ts
index c37f8832f8..a2d727218e 100644
--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -15,6 +15,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCommunityPageComponent } from './themed-community-page.component';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
+import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 
 @NgModule({
   imports: [
@@ -46,9 +47,15 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
             canActivate: [AuthenticatedGuard],
           },
           {
-            path: '',
+            path: '**',
             component: ThemedCommunityPageComponent,
             pathMatch: 'full',
+            children: [
+              {
+                path: '',
+                component: SubComColSectionComponent,
+              },
+            ],
           }
         ],
         data: {
diff --git a/src/app/community-page/community-page.module.ts b/src/app/community-page/community-page.module.ts
index 499e9092e3..61c17de8fa 100644
--- a/src/app/community-page/community-page.module.ts
+++ b/src/app/community-page/community-page.module.ts
@@ -20,6 +20,7 @@ import {
   ThemedCollectionPageSubCollectionListComponent
 } from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
+import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 
 const DECLARATIONS = [CommunityPageComponent,
   ThemedCommunityPageComponent,
@@ -28,7 +29,9 @@ const DECLARATIONS = [CommunityPageComponent,
   ThemedCollectionPageSubCollectionListComponent,
   CommunityPageSubCommunityListComponent,
   CreateCommunityPageComponent,
-  DeleteCommunityPageComponent];
+  DeleteCommunityPageComponent,
+  SubComColSectionComponent,
+];
 
 @NgModule({
   imports: [
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html
new file mode 100644
index 0000000000..515e08ffdf
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html
@@ -0,0 +1,8 @@
+<ng-container *ngIf="(community$ | async) as community">
+  <ds-themed-community-page-sub-community-list
+      [community]="community">
+  </ds-themed-community-page-sub-community-list>
+  <ds-themed-community-page-sub-collection-list
+      [community]="community">
+  </ds-themed-community-page-sub-collection-list>
+</ng-container>
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.scss b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts
new file mode 100644
index 0000000000..804299d3d9
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubComColSectionComponent } from './sub-com-col-section.component';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+
+describe('SubComColSectionComponent', () => {
+  let component: SubComColSectionComponent;
+  let fixture: ComponentFixture<SubComColSectionComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        SubComColSectionComponent,
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SubComColSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts
new file mode 100644
index 0000000000..ff30e51607
--- /dev/null
+++ b/src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
+import { Community } from '../../../core/shared/community.model';
+import { ActivatedRoute, Data } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-sub-com-col-section',
+  templateUrl: './sub-com-col-section.component.html',
+  styleUrls: ['./sub-com-col-section.component.scss'],
+})
+export class SubComColSectionComponent implements OnInit {
+
+  community$: Observable<Community>;
+
+  constructor(
+    private route: ActivatedRoute,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.community$ = this.route.data.pipe(
+      map((data: Data) => (data.dso as RemoteData<Community>).payload),
+    );
+  }
+
+}

From 2c543ad570e7e20d287060e41d9f1e8ac721fea7 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 19 Nov 2023 18:29:27 +0100
Subject: [PATCH 03/14] 108588: Updated CommunityPageRoutingModule to use
 custom sections

---
 .../browse-by-metadata-page.component.html    | 83 ++++------------
 .../community-page-routing.module.ts          | 17 +++-
 .../community-page.component.html             |  7 +-
 .../community-page.component.ts               |  8 --
 .../community-page/community-page.module.ts   |  5 +-
 .../community-browse-section.component.html   |  0
 .../comcol-page-browse-by.component.html      | 14 ++-
 .../comcol-page-browse-by.component.ts        | 99 ++++++++++++-------
 8 files changed, 113 insertions(+), 120 deletions(-)
 create mode 100644 src/app/community-page/sections/community-browse-section/community-browse-section.component.html

diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
index 8d062d739f..bac74736cf 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -1,67 +1,24 @@
 <div class="container">
-    <ng-container *ngVar="(parent$ | async) as parent">
-    <ng-container *ngIf="parent?.payload as parentContext">
-        <div class="d-flex flex-row border-bottom mb-4 pb-4">
-
-            <header class="comcol-header mr-auto">
-        <!-- Parent Name -->
-        <ds-comcol-page-header [name]="dsoNameService.getName(parentContext)">
-        </ds-comcol-page-header>
-      <!-- Collection logo -->
-        <ds-comcol-page-logo *ngIf="logo$"
-                             [logo]="(logo$ | async)?.payload"
-                             [alternateText]="'Community or Collection Logo'">
-        </ds-comcol-page-logo>
-        <!-- Handle -->
-        <ds-themed-comcol-page-handle
-            [content]="parentContext.handle"
-            [title]="parentContext.type+'.page.handle'" >
-        </ds-themed-comcol-page-handle>
-        <!-- Introductory text -->
-        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
-        </ds-comcol-page-content>
-        <!-- News -->
-        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
-        </ds-comcol-page-content>
-      </header>
-        <ds-dso-edit-menu></ds-dso-edit-menu>
-        </div>
-      <!-- Browse-By Links -->
-      <ds-themed-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-themed-comcol-page-browse-by>
-      </ng-container></ng-container>
-
-    <section class="comcol-page-browse-section">
+  <section class="comcol-page-browse-section">
     <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:
-      {
-        collection: dsoNameService.getName((parent$ | async)?.payload),
-        field: 'browse.metadata.' + browseId | translate,
-        startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
-        value: (value)? '&quot;' + value + '&quot;': ''
-      } }}"
-      parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
-      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
-      [paginationConfig]="(currentPagination$ |async)"
-      [sortConfig]="(currentSort$ |async)"
-      [type]="startsWithType"
-      [startsWithOptions]="startsWithOptions"
-      (prev)="goPrev()"
-      (next)="goNext()">
-    </ds-browse-by>
-    <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
-  </div>
-  </section>
-  <ng-container *ngVar="(parent$ | async) as parent">
-    <ng-container *ngIf="parent?.payload as parentContext">
-  <footer *ngIf="parentContext.copyrightText" class="border-top my-5 pt-4">
-    <div >
-
-      <!-- Copyright -->
-      <ds-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
-      </ds-comcol-page-content>
+      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+        title="{{'browse.title' | translate:
+        {
+          collection: dsoNameService.getName((parent$ | async)?.payload),
+          field: 'browse.metadata.' + browseId | translate,
+          startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+          value: (value)? '&quot;' + value + '&quot;': ''
+        } }}"
+        parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
+        [objects$]="(items$ !== undefined)? items$ : browseEntries$"
+        [paginationConfig]="(currentPagination$ |async)"
+        [sortConfig]="(currentSort$ |async)"
+        [type]="startsWithType"
+        [startsWithOptions]="startsWithOptions"
+        (prev)="goPrev()"
+        (next)="goNext()">
+      </ds-browse-by>
+      <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
     </div>
-  </footer>
-</ng-container>
-</ng-container>
+  </section>
 </div>
diff --git a/src/app/community-page/community-page-routing.module.ts b/src/app/community-page/community-page-routing.module.ts
index a2d727218e..f84fa1c9f7 100644
--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -16,6 +16,9 @@ import { ThemedCommunityPageComponent } from './themed-community-page.component'
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
 
 @NgModule({
   imports: [
@@ -47,14 +50,24 @@ import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-co
             canActivate: [AuthenticatedGuard],
           },
           {
-            path: '**',
+            path: '',
             component: ThemedCommunityPageComponent,
-            pathMatch: 'full',
             children: [
               {
                 path: '',
+                pathMatch: 'full',
                 component: SubComColSectionComponent,
               },
+              {
+                path: 'browse/:id',
+                pathMatch: 'full',
+                component: BrowseBySwitcherComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
+              },
             ],
           }
         ],
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index 6d5262d933..fdefccdd51 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -17,7 +17,7 @@
           </ds-comcol-page-content>
           <!-- News -->
           <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
-            [title]="'community.page.news'">
+                                  [title]="'community.page.news'">
           </ds-comcol-page-content>
         </header>
         <ds-dso-edit-menu></ds-dso-edit-menu>
@@ -31,10 +31,9 @@
         <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
         </ds-themed-comcol-page-browse-by>
 
-        <ds-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
-        <ds-themed-community-page-sub-collection-list [community]="communityPayload"></ds-themed-community-page-sub-collection-list>
+        <router-outlet></router-outlet>
       </section>
-      <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
+      <footer *ngIf="communityPayload.copyrightText" class="border-top my-5 pt-4">
         <!-- Copyright -->
         <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
         </ds-comcol-page-content>
diff --git a/src/app/community-page/community-page.component.ts b/src/app/community-page/community-page.component.ts
index a5bbff3cee..206aa54cb0 100644
--- a/src/app/community-page/community-page.component.ts
+++ b/src/app/community-page/community-page.component.ts
@@ -1,16 +1,10 @@
 import { mergeMap, filter, map } from 'rxjs/operators';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-
 import { Observable } from 'rxjs';
-import { CommunityDataService } from '../core/data/community-data.service';
 import { RemoteData } from '../core/data/remote-data';
 import { Bitstream } from '../core/shared/bitstream.model';
-
 import { Community } from '../core/shared/community.model';
-
-import { MetadataService } from '../core/metadata/metadata.service';
-
 import { fadeInOut } from '../shared/animations/fade';
 import { hasValue } from '../shared/empty.util';
 import { getAllSucceededRemoteDataPayload} from '../core/shared/operators';
@@ -53,8 +47,6 @@ export class CommunityPageComponent implements OnInit {
   communityPageRoute$: Observable<string>;
 
   constructor(
-    private communityDataService: CommunityDataService,
-    private metadata: MetadataService,
     private route: ActivatedRoute,
     private router: Router,
     private authService: AuthService,
diff --git a/src/app/community-page/community-page.module.ts b/src/app/community-page/community-page.module.ts
index 61c17de8fa..5ebd7c3057 100644
--- a/src/app/community-page/community-page.module.ts
+++ b/src/app/community-page/community-page.module.ts
@@ -21,8 +21,10 @@ import {
 } from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
 
-const DECLARATIONS = [CommunityPageComponent,
+const DECLARATIONS = [
+  CommunityPageComponent,
   ThemedCommunityPageComponent,
   ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
@@ -42,6 +44,7 @@ const DECLARATIONS = [CommunityPageComponent,
     CommunityFormModule,
     ComcolModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
     ...DECLARATIONS
diff --git a/src/app/community-page/sections/community-browse-section/community-browse-section.component.html b/src/app/community-page/sections/community-browse-section/community-browse-section.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index 504d9f4bcd..dd7d8d12f7 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,5 +1,5 @@
 <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
-<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
+<nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 
     <div class="list-group list-group-horizontal">
@@ -7,7 +7,9 @@
          class="list-group-item"
          [routerLink]="option.routerLink"
          [queryParams]="option.params"
-         routerLinkActive="active">{{ option.label | translate }}</a>
+         [class.active]="(currentOption$ | async)?.id === option.id">
+        {{ option.label | translate }}
+      </a>
     </div>
   </div>
 
@@ -15,10 +17,12 @@
     <select name="browse-type"
             class="form-control"
             aria-label="Browse Community or Collection"
-            (ngModelChange)="onSelectChange($event)" [ngModel]="currentOptionId$ | async">
+            (change)="onSelectChange($event)">
       <option *ngFor="let option of allOptions"
-              [ngValue]="option.id"
-              [attr.selected]="(currentOptionId$ | async) === option.id ? 'selected' : null">{{ option.label | translate }}</option>
+              [value]="option.id"
+              [attr.selected]="(currentOption$ | async)?.id === option.id ? 'selected' : null">
+        {{ option.label | translate }}
+      </option>
     </select>
   </div>
 </nav>
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
index 0527d283f0..2a3ec220d6 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
@@ -1,7 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+import { Router, EventType, Scroll } from '@angular/router';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
@@ -26,62 +26,87 @@ export interface ComColPageNavOption {
   styleUrls: ['./comcol-page-browse-by.component.scss'],
   templateUrl: './comcol-page-browse-by.component.html'
 })
-export class ComcolPageBrowseByComponent implements OnInit {
+export class ComcolPageBrowseByComponent implements OnDestroy, OnInit {
   /**
    * The ID of the Community or Collection
    */
   @Input() id: string;
   @Input() contentType: string;
 
-  allOptions: ComColPageNavOption[];
+  allOptions$: Observable<ComColPageNavOption[]>;
 
-  currentOptionId$: Observable<string>;
+  currentOption$: BehaviorSubject<ComColPageNavOption> = new BehaviorSubject(undefined);
+
+  subs: Subscription[] = [];
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
+    public router: Router,
     private browseService: BrowseService
   ) {
   }
 
   ngOnInit(): void {
-    this.browseService.getBrowseDefinitions()
-      .pipe(getFirstCompletedRemoteData<PaginatedList<BrowseDefinition>>())
-      .subscribe((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+    this.allOptions$ = this.browseService.getBrowseDefinitions().pipe(
+      getFirstCompletedRemoteData(),
+      map((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+        const allOptions: ComColPageNavOption[] = [];
         if (browseDefListRD.hasSucceeded) {
-          this.allOptions = browseDefListRD.payload.page
-            .map((config: BrowseDefinition) => ({
-              id: config.id,
-              label: `browse.comcol.by.${config.id}`,
-              routerLink: `/browse/${config.id}`,
-              params: { scope: this.id }
-            }));
-
+          let comColRoute: string;
           if (this.contentType === 'collection') {
-            this.allOptions = [{
-              id: this.id,
+            comColRoute = getCollectionPageRoute(this.id);
+            allOptions.push({
+              id: 'recent_submissions',
               label: 'collection.page.browse.recent.head',
-              routerLink: getCollectionPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
           } else if (this.contentType === 'community') {
-            this.allOptions = [{
-              id: this.id,
+            comColRoute = getCommunityPageRoute(this.id);
+            allOptions.push({
+              id: 'comcols',
               label: 'community.all-lists.head',
-              routerLink: getCommunityPageRoute(this.id)
-            }, ...this.allOptions];
+              routerLink: comColRoute,
+            });
+          }
+
+          allOptions.push(...browseDefListRD.payload.page.map((config: BrowseDefinition) => ({
+            id: `browse_${config.id}`,
+            label: `browse.comcol.by.${config.id}`,
+            routerLink: `${comColRoute}/browse/${config.id}`,
+          })));
+        }
+        return allOptions;
+      }),
+    );
+
+    this.subs.push(combineLatest([
+      this.allOptions$,
+      this.router.events,
+    ]).subscribe(([navOptions, scrollEvent]: [ComColPageNavOption[], Scroll]) => {
+      if (scrollEvent.type === EventType.Scroll) {
+        for (let option of navOptions) {
+          if (option.routerLink === scrollEvent.routerEvent.urlAfterRedirects.split('?')[0]) {
+            this.currentOption$.next(option);
           }
         }
-      });
-
-    this.currentOptionId$ = this.route.params.pipe(
-      map((params: Params) => params.id)
-    );
+      }
+    }));
   }
 
-  onSelectChange(newId: string) {
-    const selectedOption = this.allOptions
-      .find((option: ComColPageNavOption) => option.id === newId);
+  ngOnDestroy(): void {
+    this.subs.forEach((sub: Subscription) => sub.unsubscribe());
+  }
 
-    this.router.navigate([selectedOption.routerLink], { queryParams: selectedOption.params });
+  onSelectChange(event: any): void {
+    this.allOptions$.pipe(
+      take(1),
+    ).subscribe((allOptions: ComColPageNavOption[]) => {
+      for (let option of allOptions) {
+        if (option.id === event.target.value) {
+          this.currentOption$.next(option[0]);
+          void this.router.navigate([option.routerLink], { queryParams: option.params });
+          break;
+        }
+      }
+    });
   }
 }

From e66a14cffd6b754b347346f21ed3f034b4733f26 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 5 Dec 2023 00:45:19 +0100
Subject: [PATCH 04/14] 108588: Fixed accessibility issues on
 ds-comcol-page-browse-by

---
 .../comcol-page-browse-by.component.html                      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index dd7d8d12f7..d0fd33a834 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -2,9 +2,11 @@
 <nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 
-    <div class="list-group list-group-horizontal">
+    <div class="list-group list-group-horizontal" role="tablist">
       <a *ngFor="let option of allOptions"
+         [attr.aria-current]="(currentOption$ | async)?.id === option.id"
          class="list-group-item"
+         role="tab"
          [routerLink]="option.routerLink"
          [queryParams]="option.params"
          [class.active]="(currentOption$ | async)?.id === option.id">

From 15342b390353f55015e9cb6e9d607727cec15c79 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 7 Dec 2023 01:01:04 +0100
Subject: [PATCH 05/14] 108588: Updated CollectionPageRoutingModule to use
 custom sections

---
 .../collection-page-routing.module.ts         |  22 +++-
 .../collection-page.component.html            | 123 ++++++++----------
 .../collection-page.component.ts              |  80 ++----------
 .../collection-page/collection-page.module.ts |  22 +++-
 .../collection-recently-added.component.html  |  18 +++
 .../collection-recently-added.component.scss} |   0
 ...ollection-recently-added.component.spec.ts |  53 ++++++++
 .../collection-recently-added.component.ts    |  82 ++++++++++++
 8 files changed, 251 insertions(+), 149 deletions(-)
 create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.html
 rename src/app/{community-page/sections/community-browse-section/community-browse-section.component.html => collection-page/sections/recently-added/collection-recently-added.component.scss} (100%)
 create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts
 create mode 100644 src/app/collection-page/sections/recently-added/collection-recently-added.component.ts

diff --git a/src/app/collection-page/collection-page-routing.module.ts b/src/app/collection-page/collection-page-routing.module.ts
index 9dc25b778e..1bf51f550c 100644
--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -22,6 +22,10 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
+import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { BrowseByGuard } from '../browse-by/browse-by-guard';
+import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
+import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component';
 
 @NgModule({
   imports: [
@@ -65,7 +69,23 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
           {
             path: '',
             component: ThemedCollectionPageComponent,
-            pathMatch: 'full',
+            children: [
+              {
+                path: '',
+                pathMatch: 'full',
+                component: CollectionRecentlyAddedComponent,
+              },
+              {
+                path: 'browse/:id',
+                pathMatch: 'full',
+                component: BrowseBySwitcherComponent,
+                canActivate: [BrowseByGuard],
+                resolve: {
+                  breadcrumb: BrowseByI18nBreadcrumbResolver,
+                },
+                data: { breadcrumbKey: 'browse.metadata' },
+              },
+            ],
           }
         ],
         data: {
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 02c63d316d..04fc593fda 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -1,81 +1,64 @@
 <div class="container">
-    <div class="collection-page"
-         *ngVar="(collectionRD$ | async) as collectionRD">
-              <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
-                      <div *ngIf="collectionRD?.payload as collection">
-              <ds-view-tracker [object]="collection"></ds-view-tracker>
-              <div class="d-flex flex-row border-bottom mb-4 pb-4">
-                <header class="comcol-header mr-auto">
-                  <!-- Collection Name -->
-                  <ds-comcol-page-header
-                          [name]="dsoNameService.getName(collection)">
-                  </ds-comcol-page-header>
-                  <!-- Collection logo -->
-                  <ds-comcol-page-logo *ngIf="logoRD$"
-                                   [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
-                  </ds-comcol-page-logo>
+  <div class="collection-page"
+       *ngVar="(collectionRD$ | async) as collectionRD">
+    <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
+      <div *ngIf="collectionRD?.payload as collection">
+        <ds-view-tracker [object]="collection"></ds-view-tracker>
+        <div class="d-flex flex-row border-bottom mb-4 pb-4">
+          <header class="comcol-header mr-auto">
+            <!-- Collection Name -->
+            <ds-comcol-page-header
+                [name]="dsoNameService.getName(collection)">
+            </ds-comcol-page-header>
+            <!-- Collection logo -->
+            <ds-comcol-page-logo *ngIf="logoRD$"
+                                 [logo]="(logoRD$ | async)?.payload"
+                                 [alternateText]="'Collection Logo'">
+            </ds-comcol-page-logo>
 
-                  <!-- Handle -->
-                  <ds-themed-comcol-page-handle
-                          [content]="collection.handle"
-                          [title]="'collection.page.handle'" >
-                  </ds-themed-comcol-page-handle>
-                  <!-- Introductory text -->
-                  <ds-comcol-page-content
-                          [content]="collection.introductoryText"
-                          [hasInnerHtml]="true">
-                  </ds-comcol-page-content>
-                  <!-- News -->
-                  <ds-comcol-page-content
-                          [content]="collection.sidebarText"
-                          [hasInnerHtml]="true"
-                          [title]="'collection.page.news'">
-                  </ds-comcol-page-content>
-                </header>
-                <ds-dso-edit-menu></ds-dso-edit-menu>
-                <div class="pl-2 space-children-mr">
-                  <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
-                </div>
-              </div>
-              <section class="comcol-page-browse-section">
-              <!-- Browse-By Links -->
-              <ds-themed-comcol-page-browse-by
-                      [id]="collection.id"
-                      [contentType]="collection.type">
-              </ds-themed-comcol-page-browse-by>
+            <!-- Handle -->
+            <ds-themed-comcol-page-handle
+                [content]="collection.handle"
+                [title]="'collection.page.handle'">
+            </ds-themed-comcol-page-handle>
+            <!-- Introductory text -->
+            <ds-comcol-page-content
+                [content]="collection.introductoryText"
+                [hasInnerHtml]="true">
+            </ds-comcol-page-content>
+            <!-- News -->
+            <ds-comcol-page-content
+                [content]="collection.sidebarText"
+                [hasInnerHtml]="true"
+                [title]="'collection.page.news'">
+            </ds-comcol-page-content>
+          </header>
+          <ds-dso-edit-menu></ds-dso-edit-menu>
+          <div class="pl-2 space-children-mr">
+            <ds-dso-page-subscription-button [dso]="collection"></ds-dso-page-subscription-button>
+          </div>
+        </div>
+        <section class="comcol-page-browse-section">
+          <!-- Browse-By Links -->
+          <ds-themed-comcol-page-browse-by
+              [id]="collection.id"
+              [contentType]="collection.type">
+          </ds-themed-comcol-page-browse-by>
 
-            <ng-container *ngVar="(itemRD$ | async) as itemRD">
-                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
-                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
-                    <ds-viewable-collection
-                            [config]="paginationConfig"
-                            [sortConfig]="sortConfig"
-                            [objects]="itemRD"
-                            [hideGear]="true">
-                    </ds-viewable-collection>
-                </div>
-                <ds-error *ngIf="itemRD?.hasFailed"
-                          message="{{'error.recent-submissions' | translate}}"></ds-error>
-                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
-                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
-                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
-                        {{'collection.page.browse.recent.empty' | translate}}
-                </div>
-            </ng-container>
-            </section>
-            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
+          <router-outlet></router-outlet>
+        </section>
+        <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
           <!-- Copyright -->
           <ds-comcol-page-content
-                      [content]="collection.copyrightText"
-                      [hasInnerHtml]="true">
+              [content]="collection.copyrightText"
+              [hasInnerHtml]="true">
           </ds-comcol-page-content>
         </footer>
       </div>
     </div>
-        <ds-error *ngIf="collectionRD?.hasFailed"
-            message="{{'error.collection' | translate}}"></ds-error>
-        <ds-themed-loading *ngIf="collectionRD?.isLoading"
-            message="{{'loading.collection' | translate}}"></ds-themed-loading>
+    <ds-error *ngIf="collectionRD?.hasFailed"
+              message="{{'error.collection' | translate}}"></ds-error>
+    <ds-themed-loading *ngIf="collectionRD?.isLoading"
+                       message="{{'loading.collection' | translate}}"></ds-themed-loading>
   </div>
 </div>
diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts
index 16704cef52..6b3cbbe64e 100644
--- a/src/app/collection-page/collection-page.component.ts
+++ b/src/app/collection-page/collection-page.component.ts
@@ -1,36 +1,21 @@
-import { ChangeDetectionStrategy, Component, OnInit, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs';
-import { filter, map, mergeMap, startWith, switchMap, take } from 'rxjs/operators';
-import { PaginatedSearchOptions } from '../shared/search/models/paginated-search-options.model';
-import { SearchService } from '../core/shared/search/search.service';
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
-import { CollectionDataService } from '../core/data/collection-data.service';
-import { PaginatedList } from '../core/data/paginated-list.model';
+import { Observable } from 'rxjs';
+import { filter, map, mergeMap, take } from 'rxjs/operators';
+import { SortOptions } from '../core/cache/models/sort-options.model';
 import { RemoteData } from '../core/data/remote-data';
 import { Bitstream } from '../core/shared/bitstream.model';
-
 import { Collection } from '../core/shared/collection.model';
-import { DSpaceObjectType } from '../core/shared/dspace-object-type.model';
-import { Item } from '../core/shared/item.model';
-import {
-  getAllSucceededRemoteDataPayload,
-  getFirstSucceededRemoteData,
-  toDSpaceObjectListRD
-} from '../core/shared/operators';
-
+import { getAllSucceededRemoteDataPayload } from '../core/shared/operators';
 import { fadeIn, fadeInOut } from '../shared/animations/fade';
 import { hasValue, isNotEmpty } from '../shared/empty.util';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { AuthService } from '../core/auth/auth.service';
-import { PaginationService } from '../core/pagination/pagination.service';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
-import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
-import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface';
 
 @Component({
   selector: 'ds-collection-page',
@@ -44,14 +29,9 @@ import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface'
 })
 export class CollectionPageComponent implements OnInit {
   collectionRD$: Observable<RemoteData<Collection>>;
-  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
   logoRD$: Observable<RemoteData<Bitstream>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
-  private paginationChanges$: Subject<{
-    paginationConfig: PaginationComponentOptions,
-    sortConfig: SortOptions
-  }>;
 
   /**
    * Whether the current user is a Community admin
@@ -64,23 +44,12 @@ export class CollectionPageComponent implements OnInit {
   collectionPageRoute$: Observable<string>;
 
   constructor(
-    private collectionDataService: CollectionDataService,
-    private searchService: SearchService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private authService: AuthService,
-    private paginationService: PaginationService,
-    private authorizationDataService: AuthorizationDataService,
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected authService: AuthService,
+    protected authorizationDataService: AuthorizationDataService,
     public dsoNameService: DSONameService,
-    @Inject(APP_CONFIG) public appConfig: AppConfig,
   ) {
-    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
-      id: 'cp',
-      currentPage: 1,
-      pageSize: this.appConfig.browseBy.pageSize,
-    });
-
-    this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
   }
 
   ngOnInit(): void {
@@ -96,33 +65,6 @@ export class CollectionPageComponent implements OnInit {
     );
     this.isCollectionAdmin$ = this.authorizationDataService.isAuthorized(FeatureID.IsCollectionAdmin);
 
-    this.paginationChanges$ = new BehaviorSubject({
-      paginationConfig: this.paginationConfig,
-      sortConfig: this.sortConfig
-    });
-
-    const currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
-    const currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig);
-
-    this.itemRD$ = observableCombineLatest([currentPagination$, currentSort$]).pipe(
-      switchMap(([currentPagination, currentSort]) => this.collectionRD$.pipe(
-        getFirstSucceededRemoteData(),
-        map((rd) => rd.payload.id),
-        switchMap((id: string) => {
-          return this.searchService.search<Item>(
-            new PaginatedSearchOptions({
-              scope: id,
-              pagination: currentPagination,
-              sort: currentSort,
-              dsoTypes: [DSpaceObjectType.ITEM]
-            }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW)
-            .pipe(toDSpaceObjectListRD()) as Observable<RemoteData<PaginatedList<Item>>>;
-        }),
-        startWith(undefined) // Make sure switching pages shows loading component
-      )
-      )
-    );
-
     this.collectionPageRoute$ = this.collectionRD$.pipe(
       getAllSucceededRemoteDataPayload(),
       map((collection) => getCollectionPageRoute(collection.id))
@@ -133,9 +75,5 @@ export class CollectionPageComponent implements OnInit {
     return isNotEmpty(object);
   }
 
-  ngOnDestroy(): void {
-    this.paginationService.clearPagination(this.paginationConfig.id);
-  }
-
 
 }
diff --git a/src/app/collection-page/collection-page.module.ts b/src/app/collection-page/collection-page.module.ts
index 6bcefed2b7..8782be0a45 100644
--- a/src/app/collection-page/collection-page.module.ts
+++ b/src/app/collection-page/collection-page.module.ts
@@ -18,6 +18,19 @@ import { ThemedCollectionPageComponent } from './themed-collection-page.componen
 import { ComcolModule } from '../shared/comcol/comcol.module';
 import { DsoSharedModule } from '../dso-shared/dso-shared.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
+import { BrowseByPageModule } from '../browse-by/browse-by-page.module';
+import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component';
+
+const DECLARATIONS = [
+  CollectionPageComponent,
+  ThemedCollectionPageComponent,
+  CreateCollectionPageComponent,
+  DeleteCollectionPageComponent,
+  EditItemTemplatePageComponent,
+  ThemedEditItemTemplatePageComponent,
+  CollectionItemMapperComponent,
+  CollectionRecentlyAddedComponent,
+];
 
 @NgModule({
   imports: [
@@ -30,15 +43,10 @@ import { DsoPageModule } from '../shared/dso-page/dso-page.module';
     ComcolModule,
     DsoSharedModule,
     DsoPageModule,
+    BrowseByPageModule,
   ],
   declarations: [
-    CollectionPageComponent,
-    ThemedCollectionPageComponent,
-    CreateCollectionPageComponent,
-    DeleteCollectionPageComponent,
-    EditItemTemplatePageComponent,
-    ThemedEditItemTemplatePageComponent,
-    CollectionItemMapperComponent
+    ...DECLARATIONS,
   ],
   providers: [
     SearchService,
diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.html b/src/app/collection-page/sections/recently-added/collection-recently-added.component.html
new file mode 100644
index 0000000000..002b8cceda
--- /dev/null
+++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.html
@@ -0,0 +1,18 @@
+<ng-container *ngVar="(itemRD$ | async) as itemRD">
+  <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
+    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
+    <ds-viewable-collection
+        [config]="paginationConfig"
+        [sortConfig]="sortConfig"
+        [objects]="itemRD"
+        [hideGear]="true">
+    </ds-viewable-collection>
+  </div>
+  <ds-error *ngIf="itemRD?.hasFailed"
+            message="{{'error.recent-submissions' | translate}}"></ds-error>
+  <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                     message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
+  <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
+    {{'collection.page.browse.recent.empty' | translate}}
+  </div>
+</ng-container>
diff --git a/src/app/community-page/sections/community-browse-section/community-browse-section.component.html b/src/app/collection-page/sections/recently-added/collection-recently-added.component.scss
similarity index 100%
rename from src/app/community-page/sections/community-browse-section/community-browse-section.component.html
rename to src/app/collection-page/sections/recently-added/collection-recently-added.component.scss
diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts b/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts
new file mode 100644
index 0000000000..4acc24e3f5
--- /dev/null
+++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CollectionRecentlyAddedComponent } from './collection-recently-added.component';
+import { APP_CONFIG } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment.test';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
+import { SearchServiceStub } from '../../../shared/testing/search-service.stub';
+import { SearchService } from '../../../core/shared/search/search.service';
+import { VarDirective } from '../../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('CollectionRecentlyAddedComponent', () => {
+  let component: CollectionRecentlyAddedComponent;
+  let fixture: ComponentFixture<CollectionRecentlyAddedComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+  let paginationService: PaginationServiceStub;
+  let searchService: SearchServiceStub;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    paginationService = new PaginationServiceStub();
+    searchService = new SearchServiceStub();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        CollectionRecentlyAddedComponent,
+        VarDirective,
+      ],
+      imports: [
+        TranslateModule.forRoot(),
+      ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: PaginationService, useValue: paginationService },
+        { provide: SearchService, useValue: SearchServiceStub },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CollectionRecentlyAddedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts b/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts
new file mode 100644
index 0000000000..65af77a63b
--- /dev/null
+++ b/src/app/collection-page/sections/recently-added/collection-recently-added.component.ts
@@ -0,0 +1,82 @@
+import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Observable, combineLatest as observableCombineLatest } from 'rxjs';
+import { RemoteData } from '../../../core/data/remote-data';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { Item } from '../../../core/shared/item.model';
+import { switchMap, map, startWith, take } from 'rxjs/operators';
+import { getFirstSucceededRemoteData, toDSpaceObjectListRD } from '../../../core/shared/operators';
+import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
+import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
+import { BROWSE_LINKS_TO_FOLLOW } from '../../../core/browse/browse.service';
+import { PaginationService } from '../../../core/pagination/pagination.service';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { SortOptions, SortDirection } from '../../../core/cache/models/sort-options.model';
+import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { SearchService } from '../../../core/shared/search/search.service';
+import { Collection } from '../../../core/shared/collection.model';
+import { ActivatedRoute, Data } from '@angular/router';
+import { fadeIn } from '../../../shared/animations/fade';
+
+@Component({
+  selector: 'ds-collection-recently-added',
+  templateUrl: './collection-recently-added.component.html',
+  styleUrls: ['./collection-recently-added.component.scss'],
+  animations: [fadeIn],
+})
+export class CollectionRecentlyAddedComponent implements OnInit, OnDestroy {
+
+  paginationConfig: PaginationComponentOptions;
+
+  sortConfig: SortOptions;
+
+  collectionRD$: Observable<RemoteData<Collection>>;
+
+  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
+
+  constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    protected paginationService: PaginationService,
+    protected route: ActivatedRoute,
+    protected searchService: SearchService,
+  ) {
+    this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
+      id: 'cp',
+      currentPage: 1,
+      pageSize: this.appConfig.browseBy.pageSize,
+    });
+
+    this.sortConfig = new SortOptions('dc.date.accessioned', SortDirection.DESC);
+  }
+
+  ngOnInit(): void {
+    this.collectionRD$ = this.route.data.pipe(
+      map((data: Data) => data.dso as RemoteData<Collection>),
+      take(1),
+    );
+
+    this.itemRD$ = observableCombineLatest([
+      this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig),
+      this.paginationService.getCurrentSort(this.paginationConfig.id, this.sortConfig),
+    ]).pipe(
+      switchMap(([currentPagination, currentSort]: [PaginationComponentOptions, SortOptions]) => this.collectionRD$.pipe(
+        getFirstSucceededRemoteData(),
+        map((rd: RemoteData<Collection>) => rd.payload.id),
+        switchMap((id: string) => this.searchService.search<Item>(
+          new PaginatedSearchOptions({
+            scope: id,
+            pagination: currentPagination,
+            sort: currentSort,
+            dsoTypes: [DSpaceObjectType.ITEM]
+          }), null, true, true, ...BROWSE_LINKS_TO_FOLLOW).pipe(
+          toDSpaceObjectListRD()
+        ) as Observable<RemoteData<PaginatedList<Item>>>),
+        startWith(undefined), // Make sure switching pages shows loading component
+      )),
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.paginationConfig.id);
+  }
+
+}

From 12478cf7e2fb3b17706ceeed5fafcce25798c3ba Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 9 Dec 2023 16:45:08 +0100
Subject: [PATCH 06/14] 108588: Updated browse by switcher to work more like
 the new AbstractLoaderComponent

---
 .../dynamic-component-loader.directive.ts        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts

diff --git a/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts b/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts
new file mode 100644
index 0000000000..8c77df1cdb
--- /dev/null
+++ b/src/app/browse-by/browse-by-switcher/dynamic-component-loader.directive.ts
@@ -0,0 +1,16 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+/**
+ * Directive used as a hook to know where to inject the dynamic loaded component
+ */
+@Directive({
+  selector: '[dsDynamicComponentLoader]'
+})
+export class DynamicComponentLoaderDirective {
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+  ) {
+  }
+
+}

From a695784fc8dfdebd5114ca51ced39d1c0d44884a Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 9 Dec 2023 17:54:14 +0100
Subject: [PATCH 07/14] 108588: Removed the community & collection parts from
 the browse sections

---
 .../browse-by-date-page.component.ts          | 19 ++++---
 .../browse-by-metadata-page.component.html    |  2 -
 .../browse-by-metadata-page.component.spec.ts |  6 ---
 .../browse-by-metadata-page.component.ts      | 50 +------------------
 .../browse-by-title-page.component.ts         | 24 ++-------
 src/app/browse-by/browse-by.module.ts         |  2 -
 .../shared/browse-by/browse-by.component.html |  2 +-
 .../shared/browse-by/browse-by.component.ts   |  4 --
 src/assets/i18n/en.json5                      |  6 ++-
 9 files changed, 18 insertions(+), 97 deletions(-)

diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
index 2fb9725bda..0323310c74 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
@@ -40,14 +40,15 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent imp
    */
   defaultMetadataKeys = ['dc.date.issued'];
 
-  public constructor(protected route: ActivatedRoute,
-                     protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService,
-                     protected router: Router,
-                     protected paginationService: PaginationService,
-                     protected cdRef: ChangeDetectorRef,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-                     public dsoNameService: DSONameService,
+  public constructor(
+    protected route: ActivatedRoute,
+    protected browseService: BrowseService,
+    protected dsoService: DSpaceObjectDataService,
+    protected paginationService: PaginationService,
+    protected router: Router,
+    @Inject(APP_CONFIG) public appConfig: AppConfig,
+    public dsoNameService: DSONameService,
+    protected cdRef: ChangeDetectorRef,
   ) {
     super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
   }
@@ -71,8 +72,6 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent imp
         this.startsWith = +params.startsWith || params.startsWith;
         const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
         this.updatePageWithItems(searchOptions, this.value, undefined);
-        this.updateParent(params.scope);
-        this.updateLogo();
         this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
       }));
   }
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
index bac74736cf..ee741b869f 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -4,12 +4,10 @@
       <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
         title="{{'browse.title' | translate:
         {
-          collection: dsoNameService.getName((parent$ | async)?.payload),
           field: 'browse.metadata.' + browseId | translate,
           startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
           value: (value)? '&quot;' + value + '&quot;': ''
         } }}"
-        parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
         [objects$]="(items$ !== undefined)? items$ : browseEntries$"
         [paginationConfig]="(currentPagination$ |async)"
         [sortConfig]="(currentSort$ |async)"
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
index a5beeb8a45..b1662a9828 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
@@ -144,8 +144,6 @@ describe('BrowseByMetadataPageComponent', () => {
 
       route.params = observableOf(paramsWithValue);
       comp.ngOnInit();
-      comp.updateParent('fake-scope');
-      comp.updateLogo();
       fixture.detectChanges();
     });
 
@@ -154,10 +152,6 @@ describe('BrowseByMetadataPageComponent', () => {
         expect(result.payload.page).toEqual(mockItems);
       });
     });
-
-    it('should fetch the logo', () => {
-      expect(comp.logo$).toBeTruthy();
-    });
   });
 
   describe('when calling browseParamsToOptions', () => {
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
index 499ba441f6..3f32a9603d 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
@@ -12,14 +12,9 @@ import { Item } from '../../core/shared/item.model';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { getFirstSucceededRemoteData } from '../../core/shared/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
-import { filter, map, mergeMap } from 'rxjs/operators';
-import { followLink, FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
-import { Bitstream } from '../../core/shared/bitstream.model';
-import { Collection } from '../../core/shared/collection.model';
-import { Community } from '../../core/shared/community.model';
+import { map } from 'rxjs/operators';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
@@ -62,16 +57,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   items$: Observable<RemoteData<PaginatedList<Item>>>;
 
-  /**
-   * The current Community or Collection we're browsing metadata/items in
-   */
-  parent$: Observable<RemoteData<DSpaceObject>>;
-
-  /**
-   * The logo of the current Community or Collection
-   */
-  logo$: Observable<RemoteData<Bitstream>>;
-
   /**
    * The pagination config used to display the values
    */
@@ -184,8 +169,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
           } else {
             this.updatePage(browseParamsToOptions(params, currentPage, currentSort, this.browseId, false));
           }
-          this.updateParent(params.scope);
-          this.updateLogo();
         }));
     this.updateStartsWithTextOptions();
 
@@ -225,37 +208,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
     this.items$ = this.browseService.getBrowseItemsFor(value, authority, searchOptions);
   }
 
-  /**
-   * Update the parent Community or Collection using their scope
-   * @param scope   The UUID of the Community or Collection to fetch
-   */
-  updateParent(scope: string) {
-    if (hasValue(scope)) {
-      const linksToFollow = () => {
-        return [followLink('logo')];
-      };
-      this.parent$ = this.dsoService.findById(scope,
-        true,
-        true,
-        ...linksToFollow() as FollowLinkConfig<DSpaceObject>[]).pipe(
-        getFirstSucceededRemoteData()
-      );
-    }
-  }
-
-  /**
-   * Update the parent Community or Collection logo
-   */
-  updateLogo() {
-    if (hasValue(this.parent$)) {
-      this.logo$ = this.parent$.pipe(
-        map((rd: RemoteData<Collection | Community>) => rd.payload),
-        filter((collectionOrCommunity: Collection | Community) => hasValue(collectionOrCommunity.logo)),
-        mergeMap((collectionOrCommunity: Collection | Community) => collectionOrCommunity.logo)
-      );
-    }
-  }
-
   /**
    * Navigate to the previous page
    */
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
index 1e18429fa0..469cbc36d5 100644
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
@@ -1,18 +1,13 @@
 import { combineLatest as observableCombineLatest } from 'rxjs';
-import { Component, Inject, OnInit } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Params } from '@angular/router';
 import {
   BrowseByMetadataPageComponent,
   browseParamsToOptions, getBrowseSearchOptions
 } from '../browse-by-metadata-page/browse-by-metadata-page.component';
-import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
-import { BrowseService } from '../../core/browse/browse.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 
@@ -27,17 +22,6 @@ import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 @rendersBrowseBy(BrowseByDataType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent implements OnInit {
 
-  public constructor(protected route: ActivatedRoute,
-                     protected browseService: BrowseService,
-                     protected dsoService: DSpaceObjectDataService,
-                     protected paginationService: PaginationService,
-                     protected router: Router,
-                     @Inject(APP_CONFIG) public appConfig: AppConfig,
-                     public dsoNameService: DSONameService,
-  ) {
-    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
-  }
-
   ngOnInit(): void {
     const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     // include the thumbnail configuration in browse search options
@@ -47,14 +31,12 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent im
     this.subs.push(
       observableCombineLatest([this.route.params, this.route.queryParams, this.currentPagination$, this.currentSort$]).pipe(
         map(([routeParams, queryParams, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
+          return [Object.assign({}, routeParams, queryParams), currentPage, currentSort];
         })
       ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
         this.startsWith = +params.startsWith || params.startsWith;
         this.browseId = params.id || this.defaultBrowseId;
         this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
-        this.updateParent(params.scope);
-        this.updateLogo();
       }));
     this.updateStartsWithTextOptions();
   }
diff --git a/src/app/browse-by/browse-by.module.ts b/src/app/browse-by/browse-by.module.ts
index e8d05dc15a..ca6a56f992 100644
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -5,7 +5,6 @@ import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-
 import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
 import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/browse-by-taxonomy-page.component';
-import { ComcolModule } from '../shared/comcol/comcol.module';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
@@ -26,7 +25,6 @@ const ENTRY_COMPONENTS = [
   imports: [
     SharedBrowseByModule,
     CommonModule,
-    ComcolModule,
     DsoPageModule,
     FormModule,
   ],
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index d6a0005173..8e47e1be87 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h3 [ngClass]="{'sr-only': parentname }">{{title | translate}}</h3>
+  <h3>{{title | translate}}</h3>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
index 0dc20033f8..eba468827c 100644
--- a/src/app/shared/browse-by/browse-by.component.ts
+++ b/src/app/shared/browse-by/browse-by.component.ts
@@ -38,10 +38,6 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   @Input() title: string;
 
-  /**
-   * The parent name
-   */
-  @Input() parentname: string;
   /**
    * The list of objects to display
    */
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6c91bae4c1..b7d3e6b30e 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -796,6 +796,8 @@
 
   "browse.metadata.title": "Title",
 
+  "browse.metadata.srsc": "Subject Category",
+
   "browse.metadata.author.breadcrumbs": "Browse by Author",
 
   "browse.metadata.dateissued.breadcrumbs": "Browse by Date",
@@ -862,9 +864,9 @@
 
   "browse.taxonomy.button": "Browse",
 
-  "browse.title": "Browsing {{ collection }} by {{ field }}{{ startsWith }} {{ value }}",
+  "browse.title": "Browsing by {{ field }}{{ startsWith }} {{ value }}",
 
-  "browse.title.page": "Browsing {{ collection }} by {{ field }} {{ value }}",
+  "browse.title.page": "Browsing by {{ field }} {{ value }}",
 
   "search.browse.item-back": "Back to Results",
 

From fb2c7cee9d580fb748661a3eef2ef01fee340387 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 12 Dec 2023 22:00:49 +0100
Subject: [PATCH 08/14] 108588: Created separate section for communities &
 collections browse sections

---
 .../collection-page-routing.module.ts         |  4 +-
 .../community-page-routing.module.ts          |  4 +-
 src/app/shared/comcol/comcol.module.ts        |  6 +-
 .../comcol-browse-by.component.html           |  2 +
 .../comcol-browse-by.component.scss           |  0
 .../comcol-browse-by.component.spec.ts        | 70 +++++++++++++++++++
 .../comcol-browse-by.component.ts             | 31 ++++++++
 7 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
 create mode 100644 src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.scss
 create mode 100644 src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.spec.ts
 create mode 100644 src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts

diff --git a/src/app/collection-page/collection-page-routing.module.ts b/src/app/collection-page/collection-page-routing.module.ts
index 1bf51f550c..5ddef6ca68 100644
--- a/src/app/collection-page/collection-page-routing.module.ts
+++ b/src/app/collection-page/collection-page-routing.module.ts
@@ -22,7 +22,7 @@ import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { ThemedCollectionPageComponent } from './themed-collection-page.component';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
-import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
 import { BrowseByGuard } from '../browse-by/browse-by-guard';
 import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 import { CollectionRecentlyAddedComponent } from './sections/recently-added/collection-recently-added.component';
@@ -78,7 +78,7 @@ import { CollectionRecentlyAddedComponent } from './sections/recently-added/coll
               {
                 path: 'browse/:id',
                 pathMatch: 'full',
-                component: BrowseBySwitcherComponent,
+                component: ComcolBrowseByComponent,
                 canActivate: [BrowseByGuard],
                 resolve: {
                   breadcrumb: BrowseByI18nBreadcrumbResolver,
diff --git a/src/app/community-page/community-page-routing.module.ts b/src/app/community-page/community-page-routing.module.ts
index f84fa1c9f7..5ca544bb54 100644
--- a/src/app/community-page/community-page-routing.module.ts
+++ b/src/app/community-page/community-page-routing.module.ts
@@ -18,7 +18,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { SubComColSectionComponent } from './sections/sub-com-col-section/sub-com-col-section.component';
 import { BrowseByI18nBreadcrumbResolver } from '../browse-by/browse-by-i18n-breadcrumb.resolver';
 import { BrowseByGuard } from '../browse-by/browse-by-guard';
-import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { ComcolBrowseByComponent } from '../shared/comcol/sections/comcol-browse-by/comcol-browse-by.component';
 
 @NgModule({
   imports: [
@@ -61,7 +61,7 @@ import { BrowseBySwitcherComponent } from '../browse-by/browse-by-switcher/brows
               {
                 path: 'browse/:id',
                 pathMatch: 'full',
-                component: BrowseBySwitcherComponent,
+                component: ComcolBrowseByComponent,
                 canActivate: [BrowseByGuard],
                 resolve: {
                   breadcrumb: BrowseByI18nBreadcrumbResolver,
diff --git a/src/app/shared/comcol/comcol.module.ts b/src/app/shared/comcol/comcol.module.ts
index efbcedf2c6..7ce48a3a55 100644
--- a/src/app/shared/comcol/comcol.module.ts
+++ b/src/app/shared/comcol/comcol.module.ts
@@ -16,6 +16,8 @@ import { ComcolRoleComponent } from './comcol-forms/edit-comcol-page/comcol-role
 import { SharedModule } from '../shared.module';
 import { FormModule } from '../form/form.module';
 import { UploadModule } from '../upload/upload.module';
+import { ComcolBrowseByComponent } from './sections/comcol-browse-by/comcol-browse-by.component';
+import { BrowseByModule } from '../../browse-by/browse-by.module';
 
 const COMPONENTS = [
   ComcolPageContentComponent,
@@ -29,7 +31,8 @@ const COMPONENTS = [
   ComcolPageBrowseByComponent,
   ThemedComcolPageBrowseByComponent,
   ComcolRoleComponent,
-  ThemedComcolPageHandleComponent
+  ThemedComcolPageHandleComponent,
+  ComcolBrowseByComponent,
 ];
 
 @NgModule({
@@ -41,6 +44,7 @@ const COMPONENTS = [
     FormModule,
     SharedModule,
     UploadModule,
+    BrowseByModule,
   ],
   exports: [
     ...COMPONENTS,
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
new file mode 100644
index 0000000000..b7b109643b
--- /dev/null
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
@@ -0,0 +1,2 @@
+<ds-browse-by-switcher [browseByType]="browseByType$ | async">
+</ds-browse-by-switcher>
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.scss b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.spec.ts b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.spec.ts
new file mode 100644
index 0000000000..6a78815e6b
--- /dev/null
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.spec.ts
@@ -0,0 +1,70 @@
+// eslint-disable-next-line max-classes-per-file
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComcolBrowseByComponent } from './comcol-browse-by.component';
+import { rendersBrowseBy } from '../../../../browse-by/browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType } from '../../../../browse-by/browse-by-switcher/browse-by-data-type';
+import { Component } from '@angular/core';
+import { AbstractBrowseByTypeComponent } from '../../../../browse-by/abstract-browse-by-type.component';
+import { BrowseDefinition } from '../../../../core/shared/browse-definition.model';
+import { ActivatedRouteStub } from '../../../testing/active-router.stub';
+import { ThemeService } from '../../../theme-support/theme.service';
+import { getMockThemeService } from '../../../mocks/theme-service.mock';
+import { BrowseBySwitcherComponent } from '../../../../browse-by/browse-by-switcher/browse-by-switcher.component';
+import { DynamicComponentLoaderDirective } from '../../../abstract-component-loader/dynamic-component-loader.directive';
+import { ActivatedRoute } from '@angular/router';
+import { By } from '@angular/platform-browser';
+
+@rendersBrowseBy('ComcolBrowseByComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '<span id="ComcolBrowseByComponent"></span>',
+})
+class BrowseByTestComponent extends AbstractBrowseByTypeComponent {
+}
+
+class TestBrowseByPageBrowseDefinition extends BrowseDefinition {
+  getRenderType(): BrowseByDataType {
+    return 'ComcolBrowseByComponent' as BrowseByDataType;
+  }
+}
+
+describe('ComcolBrowseByComponent', () => {
+  let component: ComcolBrowseByComponent;
+  let fixture: ComponentFixture<ComcolBrowseByComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+  let themeService: ThemeService;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    themeService = getMockThemeService();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        ComcolBrowseByComponent,
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ThemeService, useValue: themeService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComcolBrowseByComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the correct browse section based on the route browseDefinition', () => {
+    activatedRoute.testData = {
+      browseDefinition: new TestBrowseByPageBrowseDefinition(),
+    };
+
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+    expect(fixture.debugElement.query(By.css('#ComcolBrowseByComponent'))).not.toBeNull();
+  });
+});
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts
new file mode 100644
index 0000000000..ffa89f5328
--- /dev/null
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BrowseByDataType } from '../../../../browse-by/browse-by-switcher/browse-by-data-type';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { BrowseDefinition } from '../../../../core/shared/browse-definition.model';
+
+@Component({
+  selector: 'ds-comcol-browse-by',
+  templateUrl: './comcol-browse-by.component.html',
+  styleUrls: ['./comcol-browse-by.component.scss'],
+})
+export class ComcolBrowseByComponent implements OnInit {
+
+  browseByType$: Observable<BrowseByDataType>;
+
+  constructor(
+    protected route: ActivatedRoute,
+  ) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from the route data
+   */
+  ngOnInit(): void {
+    this.browseByType$ = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => data.browseDefinition.getRenderType()),
+    );
+  }
+
+}

From d9759d11365f7c3fc3cc5a964bf85c3b2de1ac04 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 12 Dec 2023 23:52:54 +0100
Subject: [PATCH 09/14] 108588: Renamed components, because now these aren't
 page components anymore

---
 cypress/e2e/browse-by-author.cy.ts               |  4 ++--
 cypress/e2e/browse-by-dateissued.cy.ts           |  4 ++--
 cypress/e2e/browse-by-subject.cy.ts              |  4 ++--
 cypress/e2e/browse-by-title.cy.ts                |  4 ++--
 .../browse-by-date.component.spec.ts}            | 14 +++++++-------
 .../browse-by-date.component.ts}                 | 12 ++++++------
 .../browse-by-metadata.component.html}           |  0
 .../browse-by-metadata.component.scss}           |  0
 .../browse-by-metadata.component.spec.ts}        | 14 +++++++-------
 .../browse-by-metadata.component.ts}             |  8 ++++----
 .../browse-by-taxonomy.component.html}           |  0
 .../browse-by-taxonomy.component.scss}           |  0
 .../browse-by-taxonomy.component.spec.ts}        | 15 ++++++++-------
 .../browse-by-taxonomy.component.ts}             |  8 ++++----
 .../browse-by-title.component.spec.ts}           | 14 +++++++-------
 .../browse-by-title.component.ts}                | 12 ++++++------
 src/app/browse-by/browse-by.module.ts            | 16 ++++++++--------
 .../browse-entry-list-element.component.ts       |  2 +-
 .../browse-by-date-page.component.ts             | 16 ----------------
 .../browse-by-date.component.html}               |  0
 .../browse-by-date.component.scss}               |  0
 .../browse-by-date/browse-by-date.component.ts   | 16 ++++++++++++++++
 .../browse-by-metadata-page.component.ts         | 16 ----------------
 .../browse-by-metadata.component.html}           |  0
 .../browse-by-metadata.component.scss}           |  0
 .../browse-by-metadata.component.ts              | 16 ++++++++++++++++
 .../browse-by-taxonomy-page.component.ts         | 16 ----------------
 .../browse-by-taxonomy.component.html}           |  0
 .../browse-by-taxonomy.component.scss}           |  0
 .../browse-by-taxonomy.component.ts              | 16 ++++++++++++++++
 .../browse-by-title-page.component.ts            | 16 ----------------
 .../browse-by-title.component.html}              |  0
 .../browse-by-title.component.scss}              |  0
 .../browse-by-title/browse-by-title.component.ts | 16 ++++++++++++++++
 src/themes/custom/lazy-theme.module.ts           | 16 ++++++++--------
 35 files changed, 138 insertions(+), 137 deletions(-)
 rename src/app/browse-by/{browse-by-date-page/browse-by-date-page.component.spec.ts => browse-by-date/browse-by-date.component.spec.ts} (91%)
 rename src/app/browse-by/{browse-by-date-page/browse-by-date-page.component.ts => browse-by-date/browse-by-date.component.ts} (94%)
 rename src/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.html => browse-by-metadata/browse-by-metadata.component.html} (100%)
 rename src/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.scss => browse-by-metadata/browse-by-metadata.component.scss} (100%)
 rename src/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.spec.ts => browse-by-metadata/browse-by-metadata.component.spec.ts} (94%)
 rename src/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.ts => browse-by-metadata/browse-by-metadata.component.ts} (97%)
 rename src/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.html => browse-by-taxonomy/browse-by-taxonomy.component.html} (100%)
 rename src/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss => browse-by-taxonomy/browse-by-taxonomy.component.scss} (100%)
 rename src/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts => browse-by-taxonomy/browse-by-taxonomy.component.spec.ts} (89%)
 rename src/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts => browse-by-taxonomy/browse-by-taxonomy.component.ts} (93%)
 rename src/app/browse-by/{browse-by-title-page/browse-by-title-page.component.spec.ts => browse-by-title/browse-by-title.component.spec.ts} (87%)
 rename src/app/browse-by/{browse-by-title-page/browse-by-title-page.component.ts => browse-by-title/browse-by-title.component.ts} (83%)
 delete mode 100644 src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
 rename src/themes/custom/app/browse-by/{browse-by-date-page/browse-by-date-page.component.html => browse-by-date/browse-by-date.component.html} (100%)
 rename src/themes/custom/app/browse-by/{browse-by-date-page/browse-by-date-page.component.scss => browse-by-date/browse-by-date.component.scss} (100%)
 create mode 100644 src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
 delete mode 100644 src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
 rename src/themes/custom/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.html => browse-by-metadata/browse-by-metadata.component.html} (100%)
 rename src/themes/custom/app/browse-by/{browse-by-metadata-page/browse-by-metadata-page.component.scss => browse-by-metadata/browse-by-metadata.component.scss} (100%)
 create mode 100644 src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
 delete mode 100644 src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
 rename src/themes/custom/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.html => browse-by-taxonomy/browse-by-taxonomy.component.html} (100%)
 rename src/themes/custom/app/browse-by/{browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss => browse-by-taxonomy/browse-by-taxonomy.component.scss} (100%)
 create mode 100644 src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
 delete mode 100644 src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
 rename src/themes/custom/app/browse-by/{browse-by-title-page/browse-by-title-page.component.html => browse-by-title/browse-by-title.component.html} (100%)
 rename src/themes/custom/app/browse-by/{browse-by-title-page/browse-by-title-page.component.scss => browse-by-title/browse-by-title.component.scss} (100%)
 create mode 100644 src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts

diff --git a/cypress/e2e/browse-by-author.cy.ts b/cypress/e2e/browse-by-author.cy.ts
index 07c20ad7c9..32c470231d 100644
--- a/cypress/e2e/browse-by-author.cy.ts
+++ b/cypress/e2e/browse-by-author.cy.ts
@@ -5,9 +5,9 @@ describe('Browse By Author', () => {
         cy.visit('/browse/author');
 
         // Wait for <ds-browse-by-metadata-page> to be visible
-        cy.get('ds-browse-by-metadata-page').should('be.visible');
+        cy.get('ds-browse-by-metadata').should('be.visible');
 
         // Analyze <ds-browse-by-metadata-page> for accessibility
-        testA11y('ds-browse-by-metadata-page');
+        testA11y('ds-browse-by-metadata');
     });
 });
diff --git a/cypress/e2e/browse-by-dateissued.cy.ts b/cypress/e2e/browse-by-dateissued.cy.ts
index 4d22420227..7966f1c82e 100644
--- a/cypress/e2e/browse-by-dateissued.cy.ts
+++ b/cypress/e2e/browse-by-dateissued.cy.ts
@@ -5,9 +5,9 @@ describe('Browse By Date Issued', () => {
         cy.visit('/browse/dateissued');
 
         // Wait for <ds-browse-by-date-page> to be visible
-        cy.get('ds-browse-by-date-page').should('be.visible');
+        cy.get('ds-browse-by-date').should('be.visible');
 
         // Analyze <ds-browse-by-date-page> for accessibility
-        testA11y('ds-browse-by-date-page');
+        testA11y('ds-browse-by-date');
     });
 });
diff --git a/cypress/e2e/browse-by-subject.cy.ts b/cypress/e2e/browse-by-subject.cy.ts
index 89b791f03c..57ca88d103 100644
--- a/cypress/e2e/browse-by-subject.cy.ts
+++ b/cypress/e2e/browse-by-subject.cy.ts
@@ -5,9 +5,9 @@ describe('Browse By Subject', () => {
         cy.visit('/browse/subject');
 
         // Wait for <ds-browse-by-metadata-page> to be visible
-        cy.get('ds-browse-by-metadata-page').should('be.visible');
+        cy.get('ds-browse-by-metadata').should('be.visible');
 
         // Analyze <ds-browse-by-metadata-page> for accessibility
-        testA11y('ds-browse-by-metadata-page');
+        testA11y('ds-browse-by-metadata');
     });
 });
diff --git a/cypress/e2e/browse-by-title.cy.ts b/cypress/e2e/browse-by-title.cy.ts
index e4e027586a..09195c30df 100644
--- a/cypress/e2e/browse-by-title.cy.ts
+++ b/cypress/e2e/browse-by-title.cy.ts
@@ -5,9 +5,9 @@ describe('Browse By Title', () => {
         cy.visit('/browse/title');
 
         // Wait for <ds-browse-by-title-page> to be visible
-        cy.get('ds-browse-by-title-page').should('be.visible');
+        cy.get('ds-browse-by-title').should('be.visible');
 
         // Analyze <ds-browse-by-title-page> for accessibility
-        testA11y('ds-browse-by-title-page');
+        testA11y('ds-browse-by-title');
     });
 });
diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
similarity index 91%
rename from src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
rename to src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
index e41d3a45b2..0064c599e4 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
@@ -1,4 +1,4 @@
-import { BrowseByDatePageComponent } from './browse-by-date-page.component';
+import { BrowseByDateComponent } from './browse-by-date.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -15,7 +15,7 @@ import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { Community } from '../../core/shared/community.model';
 import { Item } from '../../core/shared/item.model';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
-import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
+import { toRemoteData } from '../browse-by-metadata/browse-by-metadata.component.spec';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { PaginationService } from '../../core/pagination/pagination.service';
@@ -24,9 +24,9 @@ import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
 
-describe('BrowseByDatePageComponent', () => {
-  let comp: BrowseByDatePageComponent;
-  let fixture: ComponentFixture<BrowseByDatePageComponent>;
+describe('BrowseByDateComponent', () => {
+  let comp: BrowseByDateComponent;
+  let fixture: ComponentFixture<BrowseByDateComponent>;
   let route: ActivatedRoute;
   let paginationService;
 
@@ -86,7 +86,7 @@ describe('BrowseByDatePageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByDatePageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByDateComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -101,7 +101,7 @@ describe('BrowseByDatePageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByDatePageComponent);
+    fixture = TestBed.createComponent(BrowseByDateComponent);
     const browseService = fixture.debugElement.injector.get(BrowseService);
     spyOn(browseService, 'getFirstItemFor')
       // ok to expect the default browse as first param since we just need the mock items obtained via sort direction.
diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
similarity index 94%
rename from src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
rename to src/app/browse-by/browse-by-date/browse-by-date.component.ts
index 0323310c74..cd17bb6fe5 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
 import {
-  BrowseByMetadataPageComponent,
+  BrowseByMetadataComponent,
   browseParamsToOptions,
   getBrowseSearchOptions
-} from '../browse-by-metadata-page/browse-by-metadata-page.component';
+} from '../browse-by-metadata/browse-by-metadata.component';
 import { combineLatest as observableCombineLatest } from 'rxjs';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -23,9 +23,9 @@ import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 
 @Component({
-  selector: 'ds-browse-by-date-page',
-  styleUrls: ['../browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  templateUrl: '../browse-by-metadata-page/browse-by-metadata-page.component.html'
+  selector: 'ds-browse-by-date',
+  styleUrls: ['../browse-by-metadata/browse-by-metadata.component.scss'],
+  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
 })
 /**
  * Component for browsing items by metadata definition of type 'date'
@@ -33,7 +33,7 @@ import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
  * An example would be 'dateissued' for 'dc.date.issued'
  */
 @rendersBrowseBy(BrowseByDataType.Date)
-export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent implements OnInit {
+export class BrowseByDateComponent extends BrowseByMetadataComponent implements OnInit {
 
   /**
    * The default metadata keys to use for determining the lower limit of the StartsWith dropdown options
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
similarity index 100%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
similarity index 100%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
similarity index 94%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
index b1662a9828..f8cf512825 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
@@ -1,8 +1,8 @@
 import {
-  BrowseByMetadataPageComponent,
+  BrowseByMetadataComponent,
   browseParamsToOptions,
   getBrowseSearchOptions
-} from './browse-by-metadata-page.component';
+} from './browse-by-metadata.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowseService } from '../../core/browse/browse.service';
 import { CommonModule } from '@angular/common';
@@ -31,9 +31,9 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { APP_CONFIG } from '../../../config/app-config.interface';
 
-describe('BrowseByMetadataPageComponent', () => {
-  let comp: BrowseByMetadataPageComponent;
-  let fixture: ComponentFixture<BrowseByMetadataPageComponent>;
+describe('BrowseByMetadataComponent', () => {
+  let comp: BrowseByMetadataComponent;
+  let fixture: ComponentFixture<BrowseByMetadataComponent>;
   let browseService: BrowseService;
   let route: ActivatedRoute;
   let paginationService;
@@ -103,7 +103,7 @@ describe('BrowseByMetadataPageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByMetadataPageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByMetadataComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -117,7 +117,7 @@ describe('BrowseByMetadataPageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByMetadataPageComponent);
+    fixture = TestBed.createComponent(BrowseByMetadataComponent);
     comp = fixture.componentInstance;
     fixture.detectChanges();
     browseService = (comp as any).browseService;
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
similarity index 97%
rename from src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
rename to src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index 3f32a9603d..df01b4a2a2 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -24,9 +24,9 @@ import { Context } from '../../core/shared/context.model';
 export const BBM_PAGINATION_ID = 'bbm';
 
 @Component({
-  selector: 'ds-browse-by-metadata-page',
-  styleUrls: ['./browse-by-metadata-page.component.scss'],
-  templateUrl: './browse-by-metadata-page.component.html'
+  selector: 'ds-browse-by-metadata',
+  styleUrls: ['./browse-by-metadata.component.scss'],
+  templateUrl: './browse-by-metadata.component.html',
 })
 /**
  * Component for browsing (items) by metadata definition.
@@ -35,7 +35,7 @@ export const BBM_PAGINATION_ID = 'bbm';
  * 'dc.contributor.*'
  */
 @rendersBrowseBy(BrowseByDataType.Metadata)
-export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
+export class BrowseByMetadataComponent implements OnInit, OnDestroy {
 
   /**
    * The optional context
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
similarity index 100%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
similarity index 100%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
similarity index 89%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
index c724017b1f..02231a433d 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
@@ -1,6 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page.component';
+import { BrowseByTaxonomyComponent } from './browse-by-taxonomy.component';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
@@ -10,9 +9,9 @@ import { createDataWithBrowseDefinition } from '../browse-by-switcher/browse-by-
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 
-describe('BrowseByTaxonomyPageComponent', () => {
-  let component: BrowseByTaxonomyPageComponent;
-  let fixture: ComponentFixture<BrowseByTaxonomyPageComponent>;
+describe('BrowseByTaxonomyComponent', () => {
+  let component: BrowseByTaxonomyComponent;
+  let fixture: ComponentFixture<BrowseByTaxonomyComponent>;
   let themeService: ThemeService;
   let detail1: VocabularyEntryDetail;
   let detail2: VocabularyEntryDetail;
@@ -29,7 +28,9 @@ describe('BrowseByTaxonomyPageComponent', () => {
 
     await TestBed.configureTestingModule({
       imports: [ TranslateModule.forRoot() ],
-      declarations: [ BrowseByTaxonomyPageComponent ],
+      declarations: [
+        BrowseByTaxonomyComponent,
+      ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: ThemeService, useValue: themeService },
@@ -40,7 +41,7 @@ describe('BrowseByTaxonomyPageComponent', () => {
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByTaxonomyPageComponent);
+    fixture = TestBed.createComponent(BrowseByTaxonomyComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
     detail1 = new VocabularyEntryDetail();
diff --git a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
similarity index 93%
rename from src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
rename to src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
index fb2f28c8c5..ffd41fefed 100644
--- a/src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -11,15 +11,15 @@ import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 import { Context } from '../../core/shared/context.model';
 
 @Component({
-  selector: 'ds-browse-by-taxonomy-page',
-  templateUrl: './browse-by-taxonomy-page.component.html',
-  styleUrls: ['./browse-by-taxonomy-page.component.scss']
+  selector: 'ds-browse-by-taxonomy',
+  templateUrl: './browse-by-taxonomy.component.html',
+  styleUrls: ['./browse-by-taxonomy.component.scss'],
 })
 /**
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
 @rendersBrowseBy(BrowseByDataType.Hierarchy)
-export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
+export class BrowseByTaxonomyComponent implements OnInit, OnDestroy {
 
   /**
    * The optional context
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
similarity index 87%
rename from src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
rename to src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
index e32c0ac430..54394087ec 100644
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
@@ -9,8 +9,8 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { toRemoteData } from '../browse-by-metadata-page/browse-by-metadata-page.component.spec';
-import { BrowseByTitlePageComponent } from './browse-by-title-page.component';
+import { toRemoteData } from '../browse-by-metadata/browse-by-metadata.component.spec';
+import { BrowseByTitleComponent } from './browse-by-title.component';
 import { ItemDataService } from '../../core/data/item-data.service';
 import { Community } from '../../core/shared/community.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
@@ -24,9 +24,9 @@ import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 
 
-describe('BrowseByTitlePageComponent', () => {
-  let comp: BrowseByTitlePageComponent;
-  let fixture: ComponentFixture<BrowseByTitlePageComponent>;
+describe('BrowseByTitleComponent', () => {
+  let comp: BrowseByTitleComponent;
+  let fixture: ComponentFixture<BrowseByTitleComponent>;
   let itemDataService: ItemDataService;
   let route: ActivatedRoute;
 
@@ -71,7 +71,7 @@ describe('BrowseByTitlePageComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
-      declarations: [BrowseByTitlePageComponent, EnumKeysPipe, VarDirective],
+      declarations: [BrowseByTitleComponent, EnumKeysPipe, VarDirective],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: BrowseService, useValue: mockBrowseService },
@@ -85,7 +85,7 @@ describe('BrowseByTitlePageComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BrowseByTitlePageComponent);
+    fixture = TestBed.createComponent(BrowseByTitleComponent);
     comp = fixture.componentInstance;
     fixture.detectChanges();
     itemDataService = (comp as any).itemDataService;
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
similarity index 83%
rename from src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
rename to src/app/browse-by/browse-by-title/browse-by-title.component.ts
index 469cbc36d5..bb37500bb4 100644
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -2,9 +2,9 @@ import { combineLatest as observableCombineLatest } from 'rxjs';
 import { Component, OnInit } from '@angular/core';
 import { Params } from '@angular/router';
 import {
-  BrowseByMetadataPageComponent,
+  BrowseByMetadataComponent,
   browseParamsToOptions, getBrowseSearchOptions
-} from '../browse-by-metadata-page/browse-by-metadata-page.component';
+} from '../browse-by-metadata/browse-by-metadata.component';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -12,15 +12,15 @@ import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 
 @Component({
-  selector: 'ds-browse-by-title-page',
-  styleUrls: ['../browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  templateUrl: '../browse-by-metadata-page/browse-by-metadata-page.component.html'
+  selector: 'ds-browse-by-title',
+  styleUrls: ['../browse-by-metadata/browse-by-metadata.component.scss'],
+  templateUrl: '../browse-by-metadata/browse-by-metadata.component.html'
 })
 /**
  * Component for browsing items by title (dc.title)
  */
 @rendersBrowseBy(BrowseByDataType.Title)
-export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent implements OnInit {
+export class BrowseByTitleComponent extends BrowseByMetadataComponent implements OnInit {
 
   ngOnInit(): void {
     const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
diff --git a/src/app/browse-by/browse-by.module.ts b/src/app/browse-by/browse-by.module.ts
index ca6a56f992..ede3d85288 100644
--- a/src/app/browse-by/browse-by.module.ts
+++ b/src/app/browse-by/browse-by.module.ts
@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { BrowseByTitlePageComponent } from './browse-by-title-page/browse-by-title-page.component';
-import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
+import { BrowseByTitleComponent } from './browse-by-title/browse-by-title.component';
+import { BrowseByMetadataComponent } from './browse-by-metadata/browse-by-metadata.component';
+import { BrowseByDateComponent } from './browse-by-date/browse-by-date.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
-import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/browse-by-taxonomy-page.component';
+import { BrowseByTaxonomyComponent } from './browse-by-taxonomy/browse-by-taxonomy.component';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
@@ -15,10 +15,10 @@ const DECLARATIONS = [
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
-  BrowseByTitlePageComponent,
-  BrowseByMetadataPageComponent,
-  BrowseByDatePageComponent,
-  BrowseByTaxonomyPageComponent,
+  BrowseByTitleComponent,
+  BrowseByMetadataComponent,
+  BrowseByDateComponent,
+  BrowseByTaxonomyComponent,
 ];
 
 @NgModule({
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.ts b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.ts
index e67dd4489e..a15fbcba50 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.ts
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.ts
@@ -6,7 +6,7 @@ import { ViewMode } from '../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../object-collection/shared/listable-object/listable-object.decorator';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { Params } from '@angular/router';
-import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
+import { BBM_PAGINATION_ID } from '../../../browse-by/browse-by-metadata/browse-by-metadata.component';
 import { RouteService } from 'src/app/core/services/route.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
diff --git a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
deleted file mode 100644
index 58a38c41e5..0000000000
--- a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { BrowseByDatePageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-date-page/browse-by-date-page.component';
-import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
-import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
-import { Context } from '../../../../../app/core/shared/context.model';
-
-@Component({
-  selector: 'ds-browse-by-date-page',
-  // styleUrls: ['./browse-by-date-page.component.scss'],
-  styleUrls: ['../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  // templateUrl: './browse-by-date-page.component.html'
-  templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
-})
-@rendersBrowseBy(BrowseByDataType.Date, Context.Any, 'custom')
-export class BrowseByDatePageComponent extends BaseComponent {
-}
diff --git a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.html b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.html
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.html
rename to src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.html
diff --git a/src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.scss b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.scss
rename to src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.scss
diff --git a/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
new file mode 100644
index 0000000000..f37727769e
--- /dev/null
+++ b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BrowseByDateComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-date/browse-by-date.component';
+import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
+import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
+
+@Component({
+  selector: 'ds-browse-by-date',
+  // styleUrls: ['./browse-by-date.component.scss'],
+  styleUrls: ['../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.scss'],
+  // templateUrl: './browse-by-date.component.html',
+  templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
+})
+@rendersBrowseBy(BrowseByDataType.Date, Context.Any, 'custom')
+export class BrowseByDateComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
deleted file mode 100644
index ef57478087..0000000000
--- a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { BrowseByMetadataPageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
-import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
-import { Context } from '../../../../../app/core/shared/context.model';
-
-@Component({
-  selector: 'ds-browse-by-metadata-page',
-  // styleUrls: ['./browse-by-metadata-page.component.scss'],
-  styleUrls: ['../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  // templateUrl: './browse-by-metadata-page.component.html'
-  templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
-})
-@rendersBrowseBy(BrowseByDataType.Metadata, Context.Any, 'custom')
-export class BrowseByMetadataPageComponent extends BaseComponent {
-}
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
rename to src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss
rename to src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.scss
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
new file mode 100644
index 0000000000..765167b591
--- /dev/null
+++ b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BrowseByMetadataComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component';
+import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
+import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
+
+@Component({
+  selector: 'ds-browse-by-metadata',
+  // styleUrls: ['./browse-by-metadata.component.scss'],
+  styleUrls: ['../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.scss'],
+  // templateUrl: './browse-by-metadata.component.html',
+  templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
+})
+@rendersBrowseBy(BrowseByDataType.Metadata, Context.Any, 'custom')
+export class BrowseByMetadataComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts b/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
deleted file mode 100644
index b8fb968c76..0000000000
--- a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { BrowseByTaxonomyPageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component';
-import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
-import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
-import { Context } from '../../../../../app/core/shared/context.model';
-
-@Component({
-  selector: 'ds-browse-by-taxonomy-page',
-  // templateUrl: './browse-by-taxonomy-page.component.html',
-  templateUrl: '../../../../../app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html',
-  // styleUrls: ['./browse-by-taxonomy-page.component.scss'],
-  styleUrls: ['../../../../../app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss'],
-})
-@rendersBrowseBy(BrowseByDataType.Hierarchy, Context.Any, 'custom')
-export class BrowseByTaxonomyPageComponent extends BaseComponent {
-}
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html b/src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html
rename to src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss b/src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss
rename to src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss
diff --git a/src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts b/src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
new file mode 100644
index 0000000000..800b23a816
--- /dev/null
+++ b/src/themes/custom/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BrowseByTaxonomyComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component';
+import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
+import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
+
+@Component({
+  selector: 'ds-browse-by-taxonomy',
+  // templateUrl: './browse-by-taxonomy.component.html',
+  templateUrl: '../../../../../app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html',
+  // styleUrls: ['./browse-by-taxonomy.component.scss'],
+  styleUrls: ['../../../../../app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.scss'],
+})
+@rendersBrowseBy(BrowseByDataType.Hierarchy, Context.Any, 'custom')
+export class BrowseByTaxonomyComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
deleted file mode 100644
index 4f6a1a5020..0000000000
--- a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { BrowseByTitlePageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-title-page/browse-by-title-page.component';
-import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
-import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
-import { Context } from '../../../../../app/core/shared/context.model';
-
-@Component({
-  selector: 'ds-browse-by-title-page',
-  // styleUrls: ['./browse-by-title-page.component.scss'],
-  styleUrls: ['../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.scss'],
-  // templateUrl: './browse-by-title-page.component.html'
-  templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
-})
-@rendersBrowseBy(BrowseByDataType.Title, Context.Any, 'custom')
-export class BrowseByTitlePageComponent extends BaseComponent {
-}
diff --git a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.html b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.html
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.html
rename to src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.html
diff --git a/src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.scss b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.scss
similarity index 100%
rename from src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.scss
rename to src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.scss
diff --git a/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
new file mode 100644
index 0000000000..9bb328670d
--- /dev/null
+++ b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BrowseByTitleComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-title/browse-by-title.component';
+import { BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-data-type';
+import { rendersBrowseBy } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
+
+@Component({
+  selector: 'ds-browse-by-title',
+  // styleUrls: ['./browse-by-title.component.scss'],
+  styleUrls: ['../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.scss'],
+  // templateUrl: './browse-by-title.component.html',
+  templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
+})
+@rendersBrowseBy(BrowseByDataType.Title, Context.Any, 'custom')
+export class BrowseByTitleComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts
index 3bef57cb18..adefb93edf 100644
--- a/src/themes/custom/lazy-theme.module.ts
+++ b/src/themes/custom/lazy-theme.module.ts
@@ -97,10 +97,10 @@ import { CommunityPageSubCommunityListComponent } from './app/community-page/sec
 import { CommunityPageSubCollectionListComponent } from './app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
 import { ObjectListComponent } from './app/shared/object-list/object-list.component';
 
-import { BrowseByMetadataPageComponent } from './app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseByDatePageComponent } from './app/browse-by/browse-by-date-page/browse-by-date-page.component';
-import { BrowseByTitlePageComponent } from './app/browse-by/browse-by-title-page/browse-by-title-page.component';
-import { BrowseByTaxonomyPageComponent } from './app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component';
+import { BrowseByMetadataComponent } from './app/browse-by/browse-by-metadata/browse-by-metadata.component';
+import { BrowseByDateComponent } from './app/browse-by/browse-by-date/browse-by-date.component';
+import { BrowseByTitleComponent } from './app/browse-by/browse-by-title/browse-by-title.component';
+import { BrowseByTaxonomyComponent } from './app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component';
 import {
   ExternalSourceEntryImportModalComponent
 } from './app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component';
@@ -206,10 +206,10 @@ const DECLARATIONS = [
   SearchSettingsComponent,
   ComcolPageBrowseByComponent,
   ObjectListComponent,
-  BrowseByMetadataPageComponent,
-  BrowseByDatePageComponent,
-  BrowseByTitlePageComponent,
-  BrowseByTaxonomyPageComponent,
+  BrowseByMetadataComponent,
+  BrowseByDateComponent,
+  BrowseByTitleComponent,
+  BrowseByTaxonomyComponent,
   ExternalSourceEntryImportModalComponent,
   SearchFiltersComponent,
   SearchSidebarComponent,

From d95f9d01402f7bd7f6b99847e1374d4596fa77f6 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 13 Dec 2023 01:19:46 +0100
Subject: [PATCH 10/14] 108588: Passed the scope to the browse sections

---
 .../browse-by-date.component.ts               | 10 ++--
 src/app/browse-by/browse-by-guard.spec.ts     | 54 ++++++++++++++-----
 src/app/browse-by/browse-by-guard.ts          | 39 +++++---------
 .../browse-by-metadata.component.spec.ts      |  2 +-
 .../browse-by-metadata.component.ts           | 36 ++++++++-----
 .../browse-by-switcher.component.ts           |  3 ++
 .../browse-by-taxonomy.component.ts           | 17 ++++--
 .../browse-by-title.component.ts              | 10 ++--
 .../comcol-browse-by.component.html           |  3 +-
 .../comcol-browse-by.component.ts             |  7 ++-
 10 files changed, 114 insertions(+), 67 deletions(-)

diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
index cd17bb6fe5..c0dadd91ee 100644
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -61,16 +61,16 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.route.data,
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.route.data,
         this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, data, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams, data), currentPage, currentSort];
+        map(([routeParams, queryParams, scope, data, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams, data), scope, currentPage, currentSort];
         })
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
         this.browseId = params.id || this.defaultBrowseId;
         this.startsWith = +params.startsWith || params.startsWith;
-        const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails);
+        const searchOptions = browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails);
         this.updatePageWithItems(searchOptions, this.value, undefined);
         this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
       }));
diff --git a/src/app/browse-by/browse-by-guard.spec.ts b/src/app/browse-by/browse-by-guard.spec.ts
index c7d3e1e0c0..c3840470c6 100644
--- a/src/app/browse-by/browse-by-guard.spec.ts
+++ b/src/app/browse-by/browse-by-guard.spec.ts
@@ -1,17 +1,13 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
-import { of as observableOf } from 'rxjs';
 import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
 import { BrowseByDataType } from './browse-by-switcher/browse-by-data-type';
 import { ValueListBrowseDefinition } from '../core/shared/value-list-browse-definition.model';
-import { DSONameServiceMock } from '../shared/mocks/dso-name.service.mock';
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { RouterStub } from '../shared/testing/router.stub';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
     let guard: BrowseByGuard;
-    let dsoService: any;
     let translateService: any;
     let browseDefinitionService: any;
     let router: any;
@@ -25,10 +21,6 @@ describe('BrowseByGuard', () => {
     const browseDefinition = Object.assign(new ValueListBrowseDefinition(), { type: BrowseByDataType.Metadata, metadataKeys: ['dc.contributor'] });
 
     beforeEach(() => {
-      dsoService = {
-        findById: (dsoId: string) => observableOf({ payload: { name: name }, hasSucceeded: true })
-      };
-
       translateService = {
         instant: () => field
       };
@@ -39,7 +31,7 @@ describe('BrowseByGuard', () => {
 
       router = new RouterStub() as any;
 
-      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService, new DSONameServiceMock() as DSONameService, router);
+      guard = new BrowseByGuard(translateService, browseDefinitionService, router);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {
@@ -48,6 +40,7 @@ describe('BrowseByGuard', () => {
           title: field,
           browseDefinition,
         },
+        parent: null,
         params: {
           id,
         },
@@ -64,7 +57,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: name,
+              scope,
               field,
               value: '"' + value + '"'
             };
@@ -97,7 +90,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: name,
+              scope,
               field,
               value: ''
             };
@@ -108,12 +101,48 @@ describe('BrowseByGuard', () => {
         );
     });
 
+    it('should return true, and sets up the data correctly using the community/collection page id, with a scope and without value', () => {
+      const scopedNoValueRoute = {
+        data: {
+          title: field,
+          browseDefinition,
+        },
+        parent: {
+          params: {
+            id: scope,
+          },
+        },
+        params: {
+          id,
+        },
+        queryParams: {
+        },
+      };
+
+      guard.canActivate(scopedNoValueRoute as any, undefined).pipe(
+        first(),
+      ).subscribe((canActivate) => {
+        const result = {
+          title,
+          id,
+          browseDefinition,
+          scope,
+          field,
+          value: '',
+        };
+        expect(scopedNoValueRoute.data).toEqual(result);
+        expect(router.navigate).not.toHaveBeenCalled();
+        expect(canActivate).toEqual(true);
+      });
+    });
+
     it('should return true, and sets up the data correctly, without a scope and with a value', () => {
       const route = {
         data: {
           title: field,
           browseDefinition,
         },
+        parent: null,
         params: {
           id,
         },
@@ -129,7 +158,7 @@ describe('BrowseByGuard', () => {
               title,
               id,
               browseDefinition,
-              collection: '',
+              scope: undefined,
               field,
               value: '"' + value + '"'
             };
@@ -147,6 +176,7 @@ describe('BrowseByGuard', () => {
         data: {
           title: field,
         },
+        parent: null,
         params: {
           id,
         },
diff --git a/src/app/browse-by/browse-by-guard.ts b/src/app/browse-by/browse-by-guard.ts
index dd87699a84..cca9a6a675 100644
--- a/src/app/browse-by/browse-by-guard.ts
+++ b/src/app/browse-by/browse-by-guard.ts
@@ -1,15 +1,12 @@
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, Data } from '@angular/router';
 import { Injectable } from '@angular/core';
-import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
 import { hasNoValue, hasValue } from '../shared/empty.util';
 import { map, switchMap } from 'rxjs/operators';
-import { getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of as observableOf } from 'rxjs';
 import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
 import { BrowseDefinition } from '../core/shared/browse-definition.model';
-import { DSONameService } from '../core/breadcrumbs/dso-name.service';
-import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { RemoteData } from '../core/data/remote-data';
 import { PAGE_NOT_FOUND_PATH } from '../app-routing-paths';
 
@@ -19,11 +16,10 @@ import { PAGE_NOT_FOUND_PATH } from '../app-routing-paths';
  */
 export class BrowseByGuard implements CanActivate {
 
-  constructor(protected dsoService: DSpaceObjectDataService,
-              protected translate: TranslateService,
-              protected browseDefinitionService: BrowseDefinitionDataService,
-              protected dsoNameService: DSONameService,
-              protected router: Router,
+  constructor(
+    protected translate: TranslateService,
+    protected browseDefinitionService: BrowseDefinitionDataService,
+    protected router: Router,
   ) {
   }
 
@@ -39,25 +35,14 @@ export class BrowseByGuard implements CanActivate {
     } else {
       browseDefinition$ = observableOf(route.data.browseDefinition);
     }
-    const scope = route.queryParams.scope;
+    const scope = route.queryParams.scope ?? route.parent?.params.id;
     const value = route.queryParams.value;
     const metadataTranslated = this.translate.instant(`browse.metadata.${id}`);
     return browseDefinition$.pipe(
       switchMap((browseDefinition: BrowseDefinition | undefined) => {
         if (hasValue(browseDefinition)) {
-          if (hasValue(scope)) {
-            const dso$: Observable<DSpaceObject> = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteDataPayload());
-            return dso$.pipe(
-              map((dso: DSpaceObject) => {
-                const name = this.dsoNameService.getName(dso);
-                route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
-                return true;
-              })
-            );
-          } else {
-            route.data = this.createData(title, id, browseDefinition, '', metadataTranslated, value, route);
-            return observableOf(true);
-          }
+          route.data = this.createData(title, id, browseDefinition, metadataTranslated, value, route, scope);
+          return observableOf(true);
         } else {
           void this.router.navigate([PAGE_NOT_FOUND_PATH]);
           return observableOf(false);
@@ -66,14 +51,14 @@ export class BrowseByGuard implements CanActivate {
     );
   }
 
-  private createData(title, id, browseDefinition, collection, field, value, route) {
+  private createData(title: string, id: string, browseDefinition: BrowseDefinition, field: string, value: string, route: ActivatedRouteSnapshot, scope: string): Data {
     return Object.assign({}, route.data, {
       title: title,
       id: id,
       browseDefinition: browseDefinition,
-      collection: collection,
       field: field,
-      value: hasValue(value) ? `"${value}"` : ''
+      value: hasValue(value) ? `"${value}"` : '',
+      scope: scope,
     });
   }
 }
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
index f8cf512825..d3d19af7ef 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
@@ -170,7 +170,7 @@ describe('BrowseByMetadataComponent', () => {
         field: 'fake-field',
       };
 
-      result = browseParamsToOptions(paramsScope, paginationOptions, sortOptions, 'author', comp.fetchThumbnails);
+      result = browseParamsToOptions(paramsScope, 'fake-scope', paginationOptions, sortOptions, 'author', comp.fetchThumbnails);
     });
 
     it('should return BrowseEntrySearchOptions with the correct properties', () => {
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index df01b4a2a2..857eeff449 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -1,5 +1,5 @@
-import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
-import { Component, Inject, OnInit, OnDestroy, Input } from '@angular/core';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { Component, Inject, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -35,7 +35,7 @@ export const BBM_PAGINATION_ID = 'bbm';
  * 'dc.contributor.*'
  */
 @rendersBrowseBy(BrowseByDataType.Metadata)
-export class BrowseByMetadataComponent implements OnInit, OnDestroy {
+export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
 
   /**
    * The optional context
@@ -47,6 +47,13 @@ export class BrowseByMetadataComponent implements OnInit, OnDestroy {
    */
   @Input() browseByType: BrowseByDataType;
 
+  /**
+   * The ID of the {@link Community} or {@link Collection} of the scope to display
+   */
+  @Input() scope: string;
+
+  scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
+
   /**
    * The list of browse-entries to display
    */
@@ -145,12 +152,12 @@ export class BrowseByMetadataComponent implements OnInit, OnDestroy {
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.currentPagination$, this.currentSort$]).pipe(
+        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
         })
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
-          this.browseId = params.id || this.defaultBrowseId;
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+        this.browseId = params.id || this.defaultBrowseId;
           this.authority = params.authority;
 
           if (typeof params.value === 'string'){
@@ -164,16 +171,19 @@ export class BrowseByMetadataComponent implements OnInit, OnDestroy {
           }
 
           if (isNotEmpty(this.value)) {
-            this.updatePageWithItems(
-              browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), this.value, this.authority);
+            this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), this.value, this.authority);
           } else {
-            this.updatePage(browseParamsToOptions(params, currentPage, currentSort, this.browseId, false));
+            this.updatePage(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, false));
           }
         }));
     this.updateStartsWithTextOptions();
 
   }
 
+  ngOnChanges(): void {
+    this.scope$.next(this.scope);
+  }
+
   /**
    * Update the StartsWith options with text values
    * It adds the value "0-9" as well as all letters from A to Z
@@ -268,12 +278,14 @@ export function getBrowseSearchOptions(defaultBrowseId: string,
 /**
  * Function to transform query and url parameters into searchOptions used to fetch browse entries or items
  * @param params            URL and query parameters
+ * @param scope             The scope to show the results
  * @param paginationConfig  Pagination configuration
  * @param sortConfig        Sorting configuration
  * @param metadata          Optional metadata definition to fetch browse entries/items for
  * @param fetchThumbnail   Optional parameter for requesting thumbnail images
  */
 export function browseParamsToOptions(params: any,
+                                      scope: string,
                                       paginationConfig: PaginationComponentOptions,
                                       sortConfig: SortOptions,
                                       metadata?: string,
@@ -283,7 +295,7 @@ export function browseParamsToOptions(params: any,
     paginationConfig,
     sortConfig,
     params.startsWith,
-    params.scope,
+    scope,
     fetchThumbnail
   );
 }
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index 0c200c3453..132b89435c 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -15,6 +15,8 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
 
   @Input() browseByType: BrowseByDataType;
 
+  @Input() scope: string;
+
   protected inputNamesDependentForComponent: (keyof this & string)[] = [
     'context',
     'browseByType',
@@ -23,6 +25,7 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
   protected inputNames: (keyof this & string)[] = [
     'context',
     'browseByType',
+    'scope',
   ];
 
   public getComponent(): GenericConstructor<Component> {
diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
index ffd41fefed..709f264f51 100644
--- a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, OnDestroy, Input } from '@angular/core';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { map } from 'rxjs/operators';
@@ -19,7 +19,7 @@ import { Context } from '../../core/shared/context.model';
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
 @rendersBrowseBy(BrowseByDataType.Hierarchy)
-export class BrowseByTaxonomyComponent implements OnInit, OnDestroy {
+export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
 
   /**
    * The optional context
@@ -31,6 +31,13 @@ export class BrowseByTaxonomyComponent implements OnInit, OnDestroy {
    */
   @Input() browseByType: BrowseByDataType;
 
+  /**
+   * The ID of the {@link Community} or {@link Collection} of the scope to display
+   */
+  @Input() scope: string;
+
+  scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
+
   /**
    * The {@link VocabularyOptions} object
    */
@@ -89,6 +96,10 @@ export class BrowseByTaxonomyComponent implements OnInit, OnDestroy {
     }));
   }
 
+  ngOnChanges(): void {
+    this.scope$.next(this.scope);
+  }
+
   /**
    * Adds detail to selectedItems, transforms it to be used as query parameter
    * and adds that to filterValues.
diff --git a/src/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
index bb37500bb4..7b603af48b 100644
--- a/src/app/browse-by/browse-by-title/browse-by-title.component.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -29,14 +29,14 @@ export class BrowseByTitleComponent extends BrowseByMetadataComponent implements
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
     this.subs.push(
-      observableCombineLatest([this.route.params, this.route.queryParams, this.currentPagination$, this.currentSort$]).pipe(
-        map(([routeParams, queryParams, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), currentPage, currentSort];
+      observableCombineLatest([this.route.params, this.route.queryParams, this.scope$, this.currentPagination$, this.currentSort$]).pipe(
+        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
+          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
         })
-      ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         this.startsWith = +params.startsWith || params.startsWith;
         this.browseId = params.id || this.defaultBrowseId;
-        this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
+        this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
       }));
     this.updateStartsWithTextOptions();
   }
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
index b7b109643b..b7ca165dcc 100644
--- a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
@@ -1,2 +1,3 @@
-<ds-browse-by-switcher [browseByType]="browseByType$ | async">
+<ds-browse-by-switcher [browseByType]="browseByType$ | async"
+                       [scope]="scope$ | async">
 </ds-browse-by-switcher>
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts
index ffa89f5328..76aa6c6981 100644
--- a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { BrowseByDataType } from '../../../../browse-by/browse-by-switcher/browse-by-data-type';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Data } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { BrowseDefinition } from '../../../../core/shared/browse-definition.model';
 
@@ -14,6 +14,8 @@ export class ComcolBrowseByComponent implements OnInit {
 
   browseByType$: Observable<BrowseByDataType>;
 
+  scope$: Observable<string>;
+
   constructor(
     protected route: ActivatedRoute,
   ) {
@@ -26,6 +28,9 @@ export class ComcolBrowseByComponent implements OnInit {
     this.browseByType$ = this.route.data.pipe(
       map((data: { browseDefinition: BrowseDefinition }) => data.browseDefinition.getRenderType()),
     );
+    this.scope$ = this.route.data.pipe(
+      map((data: Data) => data.scope),
+    );
   }
 
 }

From ca5fc8217e7051c34e5a2092483632e976caf359 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 17 Dec 2023 17:43:57 +0100
Subject: [PATCH 11/14] 108588: Fix header ordering issues on community &
 collection pages

---
 .../browse-by-metadata.component.html         | 43 +++++++++----------
 .../browse-by-metadata.component.ts           |  5 +++
 .../browse-by-page.component.html             |  6 ++-
 .../browse-by-switcher.component.ts           |  3 ++
 .../browse-by-taxonomy.component.html         | 11 ++++-
 .../browse-by-taxonomy.component.ts           |  5 +++
 ...ty-page-sub-collection-list.component.html |  2 +-
 ...ity-page-sub-community-list.component.html |  2 +-
 .../shared/browse-by/browse-by.component.html |  2 +-
 .../shared/browse-by/browse-by.component.ts   |  5 +++
 .../comcol-page-browse-by.component.html      |  2 +-
 .../comcol-browse-by.component.html           |  1 +
 12 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
index ee741b869f..db38704efa 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
@@ -1,22 +1,21 @@
-<div class="container">
-  <section class="comcol-page-browse-section">
-    <div class="browse-by-metadata w-100">
-      <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-        title="{{'browse.title' | translate:
-        {
-          field: 'browse.metadata.' + browseId | translate,
-          startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
-          value: (value)? '&quot;' + value + '&quot;': ''
-        } }}"
-        [objects$]="(items$ !== undefined)? items$ : browseEntries$"
-        [paginationConfig]="(currentPagination$ |async)"
-        [sortConfig]="(currentSort$ |async)"
-        [type]="startsWithType"
-        [startsWithOptions]="startsWithOptions"
-        (prev)="goPrev()"
-        (next)="goNext()">
-      </ds-browse-by>
-      <ds-themed-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
-    </div>
-  </section>
-</div>
+<section class="comcol-page-browse-section">
+  <div class="browse-by-metadata w-100">
+    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+                  title="{{'browse.title' | translate:{
+                    field: 'browse.metadata.' + browseId | translate,
+                    startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+                    value: (value)? '&quot;' + value + '&quot;': ''
+                  } }}"
+                  [displayTitle]="displayTitle"
+                  [objects$]="(items$ !== undefined)? items$ : browseEntries$"
+                  [paginationConfig]="(currentPagination$ |async)"
+                  [sortConfig]="(currentSort$ |async)"
+                  [type]="startsWithType"
+                  [startsWithOptions]="startsWithOptions"
+                  (prev)="goPrev()"
+                  (next)="goNext()">
+    </ds-browse-by>
+    <ds-themed-loading *ngIf="!startsWithOptions"
+                       message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
+  </div>
+</section>
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index 857eeff449..acee38ac63 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -52,6 +52,11 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   @Input() scope: string;
 
+  /**
+   * Display the h1 title in the section
+   */
+  @Input() displayTitle = true;
+
   scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   /**
diff --git a/src/app/browse-by/browse-by-page/browse-by-page.component.html b/src/app/browse-by/browse-by-page/browse-by-page.component.html
index b7b109643b..6e9476e1e9 100644
--- a/src/app/browse-by/browse-by-page/browse-by-page.component.html
+++ b/src/app/browse-by/browse-by-page/browse-by-page.component.html
@@ -1,2 +1,4 @@
-<ds-browse-by-switcher [browseByType]="browseByType$ | async">
-</ds-browse-by-switcher>
+<div class="container">
+  <ds-browse-by-switcher [browseByType]="browseByType$ | async">
+  </ds-browse-by-switcher>
+</div>
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index 132b89435c..99b969417e 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -15,6 +15,8 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
 
   @Input() browseByType: BrowseByDataType;
 
+  @Input() displayTitle: boolean;
+
   @Input() scope: string;
 
   protected inputNamesDependentForComponent: (keyof this & string)[] = [
@@ -25,6 +27,7 @@ export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<
   protected inputNames: (keyof this & string)[] = [
     'context',
     'browseByType',
+    'displayTitle',
     'scope',
   ];
 
diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
index 0ae3da6847..3dd9b6b25a 100644
--- a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html
@@ -1,4 +1,11 @@
-<div class="container">
+<section>
+  <h1 *ngIf="displayTitle">
+    {{ ('browse.title') | translate:{
+    field: 'browse.metadata.' + vocabularyName | translate,
+    startsWith: '',
+    value: '',
+  } }}
+  </h1>
   <div class="mb-3">
     <ds-vocabulary-treeview [vocabularyOptions]=vocabularyOptions
                             [multiSelect]="true"
@@ -11,4 +18,4 @@
      [queryParams]="queryParams"
      [queryParamsHandling]="'merge'">
     {{ 'browse.taxonomy.button' | translate }}</a>
-</div>
+</section>
diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
index 709f264f51..55f8fd48b2 100644
--- a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -36,6 +36,11 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
    */
   @Input() scope: string;
 
+  /**
+   * Display the h1 title in the section
+   */
+  @Input() displayTitle = true;
+
   scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   /**
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
index 69f16ee3ac..b5fbf1a01d 100644
--- a/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
+++ b/src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
   <div *ngIf="subCollectionsRD?.hasSucceeded && subCollectionsRD?.payload.totalElements > 0" @fadeIn>
-    <h2>{{'community.sub-collection-list.head' | translate}}</h2>
+    <h3>{{'community.sub-collection-list.head' | translate}}</h3>
     <ds-viewable-collection
       [config]="config"
       [sortConfig]="sortConfig"
diff --git a/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
index be2788a9f4..0834d08ba5 100644
--- a/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
+++ b/src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(subCommunitiesRDObs | async) as subCommunitiesRD">
   <div *ngIf="subCommunitiesRD?.hasSucceeded && subCommunitiesRD?.payload.totalElements > 0" @fadeIn>
-    <h2>{{'community.sub-community-list.head' | translate}}</h2>
+    <h3>{{'community.sub-community-list.head' | translate}}</h3>
     <ds-viewable-collection
       [config]="config"
       [sortConfig]="sortConfig"
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index 8e47e1be87..789399e627 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngVar="(objects$ | async) as objects">
-  <h3>{{title | translate}}</h3>
+  <h1 *ngIf="displayTitle">{{title | translate}}</h1>
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
index eba468827c..6f61c03076 100644
--- a/src/app/shared/browse-by/browse-by.component.ts
+++ b/src/app/shared/browse-by/browse-by.component.ts
@@ -38,6 +38,11 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   @Input() title: string;
 
+  /**
+   * Whether the title should be displayed
+   */
+  @Input() displayTitle = true;
+
   /**
    * The list of objects to display
    */
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index d0fd33a834..b0d72f4a72 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,4 +1,4 @@
-<h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
+<h2 class="comcol-browse-label">{{'browse.comcol.head' | translate}}</h2>
 <nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 
diff --git a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
index b7ca165dcc..bfe6840d72 100644
--- a/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
+++ b/src/app/shared/comcol/sections/comcol-browse-by/comcol-browse-by.component.html
@@ -1,3 +1,4 @@
 <ds-browse-by-switcher [browseByType]="browseByType$ | async"
+                       [displayTitle]="false"
                        [scope]="scope$ | async">
 </ds-browse-by-switcher>

From b240b2c160a9f6a5152667af908052d1be5be224 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 17 Dec 2023 22:09:55 +0100
Subject: [PATCH 12/14] 108588: Fixed scope not being set when browsing by
 taxonomy on community/collection pages

---
 .../browse-by-taxonomy.component.spec.ts      | 30 +++++++++++++++++++
 .../browse-by-taxonomy.component.ts           | 27 ++++++++++++-----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
index 02231a433d..ac8dbff598 100644
--- a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.spec.ts
@@ -43,6 +43,7 @@ describe('BrowseByTaxonomyComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(BrowseByTaxonomyComponent);
     component = fixture.componentInstance;
+    spyOn(component, 'updateQueryParams').and.callThrough();
     fixture.detectChanges();
     detail1 = new VocabularyEntryDetail();
     detail2 = new VocabularyEntryDetail();
@@ -62,6 +63,7 @@ describe('BrowseByTaxonomyComponent', () => {
     expect(component.selectedItems).toContain(detail1);
     expect(component.selectedItems.length).toBe(1);
     expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
   });
 
   it('should handle select event with multiple selected items', () => {
@@ -71,6 +73,7 @@ describe('BrowseByTaxonomyComponent', () => {
     expect(component.selectedItems).toContain(detail1, detail2);
     expect(component.selectedItems.length).toBe(2);
     expect(component.filterValues).toEqual(['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
   });
 
   it('should handle deselect event', () => {
@@ -83,6 +86,33 @@ describe('BrowseByTaxonomyComponent', () => {
     expect(component.selectedItems).toContain(detail2);
     expect(component.selectedItems.length).toBe(1);
     expect(component.filterValues).toEqual(['TECHNOLOGY,equals'] );
+    expect(component.updateQueryParams).toHaveBeenCalled();
+  });
+
+  describe('updateQueryParams', () => {
+    beforeEach(() => {
+      component.facetType = 'subject';
+      component.filterValues = ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'];
+    });
+
+    it('should update the queryParams with the selected filterValues', () => {
+      component.updateQueryParams();
+
+      expect(component.queryParams).toEqual({
+        'f.subject': ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'],
+      });
+    });
+
+    it('should include the scope if present', () => {
+      component.scope = '67f849f1-2499-4872-8c61-9e2b47d71068';
+
+      component.updateQueryParams();
+
+      expect(component.queryParams).toEqual({
+        'f.subject': ['HUMANITIES and RELIGION,equals', 'TECHNOLOGY,equals'],
+        'scope': '67f849f1-2499-4872-8c61-9e2b47d71068',
+      });
+    });
   });
 
   afterEach(() => {
diff --git a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
index 55f8fd48b2..d23a3dd15c 100644
--- a/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
+++ b/src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, OnChanges, OnDestroy, Input } from '@angular/core';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 import { rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
@@ -9,6 +9,7 @@ import { map } from 'rxjs/operators';
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 import { Context } from '../../core/shared/context.model';
+import { hasValue } from '../../shared/empty.util';
 
 @Component({
   selector: 'ds-browse-by-taxonomy',
@@ -71,7 +72,7 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
   /**
    * The parameters used in the URL
    */
-  queryParams: any;
+  queryParams: Params;
 
   /**
    * Resolved browse-by definition
@@ -99,6 +100,9 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
       this.vocabularyName = browseDefinition.vocabulary;
       this.vocabularyOptions = { name: this.vocabularyName, closed: true };
     }));
+    this.subs.push(this.scope$.subscribe(() => {
+      this.updateQueryParams();
+    }));
   }
 
   ngOnChanges(): void {
@@ -112,9 +116,9 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
    * @param detail VocabularyEntryDetail to be added
    */
   onSelect(detail: VocabularyEntryDetail): void {
-      this.selectedItems.push(detail);
-      this.filterValues = this.selectedItems
-        .map((item: VocabularyEntryDetail) => `${item.value},equals`);
+    this.selectedItems.push(detail);
+    this.filterValues = this.selectedItems
+      .map((item: VocabularyEntryDetail) => `${item.value},equals`);
     this.updateQueryParams();
   }
 
@@ -124,18 +128,25 @@ export class BrowseByTaxonomyComponent implements OnInit, OnChanges, OnDestroy {
    * @param detail VocabularyEntryDetail to be removed
    */
   onDeselect(detail: VocabularyEntryDetail): void {
-    this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => { return entry.id !== detail.id; });
-    this.filterValues = this.filterValues.filter((value: string) => { return value !== `${detail.value},equals`; });
+    this.selectedItems = this.selectedItems.filter((entry: VocabularyEntryDetail) => {
+      return entry.id !== detail.id;
+    });
+    this.filterValues = this.filterValues.filter((value: string) => {
+      return value !== `${detail.value},equals`;
+    });
     this.updateQueryParams();
   }
 
   /**
    * Updates queryParams based on the current facetType and filterValues.
    */
-  private updateQueryParams(): void {
+  updateQueryParams(): void {
     this.queryParams = {
       ['f.' + this.facetType]: this.filterValues
     };
+    if (hasValue(this.scope)) {
+      this.queryParams.scope = this.scope;
+    }
   }
 
   ngOnDestroy(): void {

From 6f51bd866ccccd17e70557b82028effa183263df Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 18 Dec 2023 00:01:59 +0100
Subject: [PATCH 13/14] 108588: Fixed browse by issue date show loading icon
 indefinitely when empty

---
 .../browse-by-date.component.spec.ts          |  7 ++++-
 .../browse-by-date.component.ts               | 27 +++++++++++--------
 .../browse-by-metadata.component.html         |  4 +--
 .../browse-by-metadata.component.spec.ts      |  7 ++++-
 .../browse-by-metadata.component.ts           | 13 ++++++++-
 5 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
index 0064c599e4..c5ef9020f1 100644
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
@@ -23,6 +23,7 @@ import { PaginationServiceStub } from '../../shared/testing/pagination-service.s
 import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
+import { cold } from 'jasmine-marbles';
 
 describe('BrowseByDateComponent', () => {
   let comp: BrowseByDateComponent;
@@ -112,9 +113,13 @@ describe('BrowseByDateComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should initialize the list of items', () => {
+  it('should initialize the list of items', (done: DoneFn) => {
+    expect(comp.loading$).toBeObservable(cold('(a|)', {
+      a: false,
+    }));
     comp.items$.subscribe((result) => {
       expect(result.payload.page).toEqual([firstItem]);
+      done();
     });
   });
 
diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
index c0dadd91ee..e655d88cc9 100644
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -1,10 +1,6 @@
 import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
-import {
-  BrowseByMetadataComponent,
-  browseParamsToOptions,
-  getBrowseSearchOptions
-} from '../browse-by-metadata/browse-by-metadata.component';
-import { combineLatest as observableCombineLatest } from 'rxjs';
+import { BrowseByMetadataComponent, browseParamsToOptions, getBrowseSearchOptions } from '../browse-by-metadata/browse-by-metadata.component';
+import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
@@ -87,12 +83,21 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
    * @param scope           The scope under which to fetch the earliest item for
    */
   updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
-    const firstItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
-    const lastItemRD = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    const firstItemRD$: Observable<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.ASC);
+    const lastItemRD$: Observable<RemoteData<Item>> = this.browseService.getFirstItemFor(definition, scope, SortDirection.DESC);
+    this.loading$ = observableCombineLatest([
+      firstItemRD$,
+      lastItemRD$,
+    ]).pipe(
+      map(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => firstItemRD.isLoading || lastItemRD.isLoading)
+    );
     this.subs.push(
-      observableCombineLatest([firstItemRD, lastItemRD]).subscribe(([firstItem, lastItem]) => {
-        let lowerLimit = this.getLimit(firstItem, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
-        let upperLimit = this.getLimit(lastItem, metadataKeys, new Date().getUTCFullYear());
+      observableCombineLatest([
+        firstItemRD$,
+        lastItemRD$,
+      ]).subscribe(([firstItemRD, lastItemRD]: [RemoteData<Item>, RemoteData<Item>]) => {
+        let lowerLimit = this.getLimit(firstItemRD, metadataKeys, this.appConfig.browseBy.defaultLowerLimit);
+        let upperLimit = this.getLimit(lastItemRD, metadataKeys, new Date().getUTCFullYear());
         const options = [];
         const oneYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.oneYearLimit) / 5) * 5;
         const fiveYearBreak = Math.floor((upperLimit - this.appConfig.browseBy.fiveYearLimit) / 10) * 10;
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
index db38704efa..ee5cb20024 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
@@ -1,6 +1,6 @@
 <section class="comcol-page-browse-section">
   <div class="browse-by-metadata w-100">
-    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+    <ds-browse-by *ngIf="!(loading$ | async)" class="col-xs-12 w-100"
                   title="{{'browse.title' | translate:{
                     field: 'browse.metadata.' + browseId | translate,
                     startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
@@ -15,7 +15,7 @@
                   (prev)="goPrev()"
                   (next)="goNext()">
     </ds-browse-by>
-    <ds-themed-loading *ngIf="!startsWithOptions"
+    <ds-themed-loading *ngIf="loading$ | async"
                        message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
   </div>
 </section>
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
index d3d19af7ef..9fef2b1a35 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
@@ -30,6 +30,7 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
 import { APP_CONFIG } from '../../../config/app-config.interface';
+import { cold } from 'jasmine-marbles';
 
 describe('BrowseByMetadataComponent', () => {
   let comp: BrowseByMetadataComponent;
@@ -147,9 +148,13 @@ describe('BrowseByMetadataComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should fetch items', () => {
+    it('should fetch items', (done: DoneFn) => {
+      expect(comp.loading$).toBeObservable(cold('(a|)', {
+        a: false,
+      }));
       comp.items$.subscribe((result) => {
         expect(result.payload.page).toEqual(mockItems);
+        done();
       });
     });
   });
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index acee38ac63..2b3d367672 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -1,4 +1,4 @@
-import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription, of as observableOf } from 'rxjs';
 import { Component, Inject, OnInit, OnDestroy, Input, OnChanges } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
@@ -133,6 +133,11 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   fetchThumbnails: boolean;
 
+  /**
+   * Observable determining if the loading animation needs to be shown
+   */
+  loading$ = observableOf(true);
+
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
                      protected dsoService: DSpaceObjectDataService,
@@ -207,6 +212,9 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   updatePage(searchOptions: BrowseEntrySearchOptions) {
     this.browseEntries$ = this.browseService.getBrowseEntriesFor(searchOptions);
+    this.loading$ = this.browseEntries$.pipe(
+      map((browseEntriesRD: RemoteData<PaginatedList<BrowseEntry>>) => browseEntriesRD.isLoading),
+    );
     this.items$ = undefined;
   }
 
@@ -221,6 +229,9 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   updatePageWithItems(searchOptions: BrowseEntrySearchOptions, value: string, authority: string) {
     this.items$ = this.browseService.getBrowseItemsFor(value, authority, searchOptions);
+    this.loading$ = this.items$.pipe(
+      map((itemsRD: RemoteData<PaginatedList<Item>>) => itemsRD.isLoading),
+    );
   }
 
   /**

From 6e29f306a75fd04dd5bdb5086eafd264f3259692 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 28 Jan 2024 23:18:13 +0100
Subject: [PATCH 14/14] 108588: Fixed browse by date tab's year dropdown always
 being empty

- The data passed to the injector in BrowseByComponent was not updated by ngOnChanges
- Also refactored the injector logic to StartsWithLoaderComponent
---
 .../browse-by-metadata.component.ts           |  2 +-
 .../shared/browse-by/browse-by.component.html |  3 +-
 .../shared/browse-by/browse-by.component.ts   | 57 +++------------
 src/app/shared/shared.module.ts               |  3 +-
 .../date/starts-with-date.component.spec.ts   | 37 ++++------
 .../date/starts-with-date.component.ts        | 22 +-----
 .../starts-with-abstract.component.ts         | 31 ++++----
 .../starts-with-loader.component.spec.ts      | 71 +++++++++++++++++++
 .../starts-with-loader.component.ts           | 33 +++++++++
 .../text/starts-with-text.component.spec.ts   | 27 ++++---
 .../text/starts-with-text.component.ts        | 11 ---
 11 files changed, 167 insertions(+), 130 deletions(-)
 create mode 100644 src/app/shared/starts-with/starts-with-loader.component.spec.ts
 create mode 100644 src/app/shared/starts-with/starts-with-loader.component.ts

diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index 2b3d367672..af1645daa3 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -109,7 +109,7 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    * The list of StartsWith options
    * Should be defined after ngOnInit is called!
    */
-  startsWithOptions;
+  startsWithOptions: (string | number)[];
 
   /**
    * The value we're browsing items for
diff --git a/src/app/shared/browse-by/browse-by.component.html b/src/app/shared/browse-by/browse-by.component.html
index 789399e627..7d7e726659 100644
--- a/src/app/shared/browse-by/browse-by.component.html
+++ b/src/app/shared/browse-by/browse-by.component.html
@@ -1,6 +1,7 @@
 <ng-container *ngVar="(objects$ | async) as objects">
   <h1 *ngIf="displayTitle">{{title | translate}}</h1>
-  <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
+  <ds-starts-with-loader [paginationId]="paginationConfig?.id" [startsWithOptions]="startsWithOptions" [type]="type">
+  </ds-starts-with-loader>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
         <ds-themed-results-back-button [back]="back" [buttonLabel]="buttonLabel"></ds-themed-results-back-button>
diff --git a/src/app/shared/browse-by/browse-by.component.ts b/src/app/shared/browse-by/browse-by.component.ts
index 6f61c03076..465d1e6ceb 100644
--- a/src/app/shared/browse-by/browse-by.component.ts
+++ b/src/app/shared/browse-by/browse-by.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, OnChanges } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
@@ -6,7 +6,7 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { fadeIn, fadeInOut } from '../animations/fade';
 import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
-import { getStartsWithComponent, StartsWithType } from '../starts-with/starts-with-decorator';
+import { StartsWithType } from '../starts-with/starts-with-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { RouteService } from '../../core/services/route.service';
@@ -26,7 +26,7 @@ import { TranslateService } from '@ngx-translate/core';
 /**
  * Component to display a browse-by page for any ListableObject
  */
-export class BrowseByComponent implements OnInit, OnDestroy {
+export class BrowseByComponent implements OnInit, OnChanges, OnDestroy {
 
   /**
    * ViewMode that should be passed to {@link ListableObjectComponentLoaderComponent}.
@@ -67,7 +67,7 @@ export class BrowseByComponent implements OnInit, OnDestroy {
   /**
    * The list of options to render for the StartsWith component
    */
-  @Input() startsWithOptions = [];
+  @Input() startsWithOptions: (string | number)[] = [];
 
   /**
    * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
@@ -99,16 +99,6 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   @Output() sortDirectionChange = new EventEmitter<SortDirection>();
 
-  /**
-   * An object injector used to inject the startsWithOptions to the switchable StartsWith component
-   */
-  objectInjector: Injector;
-
-  /**
-   * Declare SortDirection enumeration to use it in the template
-   */
-  public sortDirections = SortDirection;
-
   /**
    * Observable that tracks if the back button should be displayed based on the path parameters
    */
@@ -142,7 +132,7 @@ export class BrowseByComponent implements OnInit, OnDestroy {
    */
   back = () => {
     const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;
-    this.paginationService.updateRoute(this.paginationConfig.id, {page: page}, {[this.paginationConfig.id + '.return']: null, value: null, startsWith: null});
+    this.paginationService.updateRoute(this.paginationConfig.id, { page: page }, { [this.paginationConfig.id + '.return']: null, value: null, startsWith: null });
   };
 
   /**
@@ -159,44 +149,19 @@ export class BrowseByComponent implements OnInit, OnDestroy {
     this.next.emit(true);
   }
 
-  /**
-   * Change the page size
-   * @param size
-   */
-  doPageSizeChange(size) {
-    this.paginationService.updateRoute(this.paginationConfig.id,{pageSize: size});
-  }
-
-  /**
-   * Change the sort direction
-   * @param direction
-   */
-  doSortDirectionChange(direction) {
-    this.paginationService.updateRoute(this.paginationConfig.id,{sortDirection: direction});
-  }
-
-  /**
-   * Get the switchable StartsWith component dependant on the type
-   */
-  getStartsWithComponent() {
-    return getStartsWithComponent(this.type);
-  }
-
   ngOnInit(): void {
-    this.objectInjector = Injector.create({
-      providers: [
-        { provide: 'startsWithOptions', useFactory: () => (this.startsWithOptions), deps:[] },
-        { provide: 'paginationId', useFactory: () => (this.paginationConfig?.id), deps:[] }
-      ],
-      parent: this.injector
-    });
-
     const startsWith$ = this.routeService.getQueryParameterValue('startsWith');
     const value$ = this.routeService.getQueryParameterValue('value');
 
     this.shouldDisplayResetButton$ = observableCombineLatest([startsWith$, value$]).pipe(
       map(([startsWith, value]) => hasValue(startsWith) || hasValue(value))
     );
+  }
+
+  ngOnChanges(): void {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
     this.sub = this.routeService.getQueryParameterValue(this.paginationConfig.id + '.return').subscribe(this.previousPage$);
   }
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index bce7282e8b..e05e758515 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -282,6 +282,7 @@ import {
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { DynamicComponentLoaderDirective } from './abstract-component-loader/dynamic-component-loader.directive';
+import { StartsWithLoaderComponent } from './starts-with/starts-with-loader.component';
 
 const MODULES = [
   CommonModule,
@@ -374,7 +375,7 @@ const COMPONENTS = [
   ThemedStatusBadgeComponent,
   BadgesComponent,
   ThemedBadgesComponent,
-
+  StartsWithLoaderComponent,
   ItemSelectComponent,
   CollectionSelectComponent,
   MetadataRepresentationLoaderComponent,
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.spec.ts b/src/app/shared/starts-with/date/starts-with-date.component.spec.ts
index 2407f21fdf..4c26105890 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.spec.ts
+++ b/src/app/shared/starts-with/date/starts-with-date.component.spec.ts
@@ -3,9 +3,8 @@ import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { of as observableOf } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { StartsWithDateComponent } from './starts-with-date.component';
 import { ActivatedRouteStub } from '../../testing/active-router.stub';
@@ -17,29 +16,25 @@ import { PaginationServiceStub } from '../../testing/pagination-service.stub';
 describe('StartsWithDateComponent', () => {
   let comp: StartsWithDateComponent;
   let fixture: ComponentFixture<StartsWithDateComponent>;
-  let route: ActivatedRoute;
-  let router: Router;
-  let paginationService;
+
+  let route: ActivatedRouteStub;
+  let paginationService: PaginationServiceStub;
+  let router: RouterStub;
 
   const options = [2019, 2018, 2017, 2016, 2015];
 
-  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
-    params: observableOf({}),
-    queryParams: observableOf({})
-  });
+  beforeEach(waitForAsync(async () => {
+    route = new ActivatedRouteStub();
+    router = new RouterStub();
+    paginationService = new PaginationServiceStub();
 
-  paginationService = new PaginationServiceStub();
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
       declarations: [StartsWithDateComponent, EnumKeysPipe],
       providers: [
-        { provide: 'startsWithOptions', useValue: options },
-        { provide: 'paginationId', useValue: 'page-id' },
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: ActivatedRoute, useValue: route },
         { provide: PaginationService, useValue: paginationService },
-        { provide: Router, useValue: new RouterStub() }
+        { provide: Router, useValue: router },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -48,9 +43,9 @@ describe('StartsWithDateComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(StartsWithDateComponent);
     comp = fixture.componentInstance;
+    comp.paginationId = 'page-id';
+    comp.startsWithOptions = options;
     fixture.detectChanges();
-    route = (comp as any).route;
-    router = (comp as any).router;
   });
 
   it('should create a FormGroup containing a startsWith FormControl', () => {
@@ -156,10 +151,6 @@ describe('StartsWithDateComponent', () => {
   describe('when filling in the input form', () => {
     let form;
     const expectedValue = '2015';
-    const extras: NavigationExtras = {
-      queryParams: Object.assign({ startsWith: expectedValue }),
-      queryParamsHandling: 'merge'
-    };
 
     beforeEach(() => {
       form = fixture.debugElement.query(By.css('form'));
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.ts b/src/app/shared/starts-with/date/starts-with-date.component.ts
index 89d9361b6a..34eda812ae 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.ts
+++ b/src/app/shared/starts-with/date/starts-with-date.component.ts
@@ -1,10 +1,7 @@
-import { Component, Inject } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
+import { Component, OnInit } from '@angular/core';
 import { renderStartsWithFor, StartsWithType } from '../starts-with-decorator';
 import { StartsWithAbstractComponent } from '../starts-with-abstract.component';
 import { hasValue } from '../../empty.util';
-import { PaginationService } from '../../../core/pagination/pagination.service';
 
 /**
  * A switchable component rendering StartsWith options for the type "Date".
@@ -16,7 +13,7 @@ import { PaginationService } from '../../../core/pagination/pagination.service';
   templateUrl: './starts-with-date.component.html'
 })
 @renderStartsWithFor(StartsWithType.date)
-export class StartsWithDateComponent extends StartsWithAbstractComponent {
+export class StartsWithDateComponent extends StartsWithAbstractComponent implements OnInit {
 
   /**
    * A list of options for months to select from
@@ -33,14 +30,6 @@ export class StartsWithDateComponent extends StartsWithAbstractComponent {
    */
   startsWithYear: number;
 
-  public constructor(@Inject('startsWithOptions') public startsWithOptions: any[],
-                     @Inject('paginationId') public paginationId: string,
-                     protected paginationService: PaginationService,
-                     protected route: ActivatedRoute,
-                     protected router: Router) {
-    super(startsWithOptions, paginationId, paginationService, route, router);
-  }
-
   ngOnInit() {
     this.monthOptions = [
       'none',
@@ -133,13 +122,6 @@ export class StartsWithDateComponent extends StartsWithAbstractComponent {
     }
   }
 
-  /**
-   * Get startsWithYear as a number;
-   */
-  getStartsWithYear() {
-    return this.startsWithYear;
-  }
-
   /**
    * Get startsWithMonth as a number;
    */
diff --git a/src/app/shared/starts-with/starts-with-abstract.component.ts b/src/app/shared/starts-with/starts-with-abstract.component.ts
index ad9c56c970..22e069e2fb 100644
--- a/src/app/shared/starts-with/starts-with-abstract.component.ts
+++ b/src/app/shared/starts-with/starts-with-abstract.component.ts
@@ -1,9 +1,10 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { hasValue } from '../empty.util';
 import { PaginationService } from '../../core/pagination/pagination.service';
+import { StartsWithType } from './starts-with-decorator';
 
 /**
  * An abstract component to render StartsWith options
@@ -13,6 +14,13 @@ import { PaginationService } from '../../core/pagination/pagination.service';
   template: ''
 })
 export abstract class StartsWithAbstractComponent implements OnInit, OnDestroy {
+
+  @Input() paginationId: string;
+
+  @Input() startsWithOptions: (string | number)[];
+
+  @Input() type: StartsWithType;
+
   /**
    * The currently selected startsWith in string format
    */
@@ -28,11 +36,11 @@ export abstract class StartsWithAbstractComponent implements OnInit, OnDestroy {
    */
   subs: Subscription[] = [];
 
-  public constructor(@Inject('startsWithOptions') public startsWithOptions: any[],
-                     @Inject('paginationId') public paginationId: string,
-                     protected paginationService: PaginationService,
-                     protected route: ActivatedRoute,
-                     protected router: Router) {
+  public constructor(
+    protected paginationService: PaginationService,
+    protected route: ActivatedRoute,
+    protected router: Router,
+  ) {
   }
 
   ngOnInit(): void {
@@ -55,15 +63,6 @@ export abstract class StartsWithAbstractComponent implements OnInit, OnDestroy {
     return this.startsWith;
   }
 
-  /**
-   * Set the startsWith by event
-   * @param event
-   */
-  setStartsWithEvent(event: Event) {
-    this.startsWith = (event.target as HTMLInputElement).value;
-    this.setStartsWithParam();
-  }
-
   /**
    * Set the startsWith by string
    * @param startsWith
@@ -82,7 +81,7 @@ export abstract class StartsWithAbstractComponent implements OnInit, OnDestroy {
     if (resetPage) {
       this.paginationService.updateRoute(this.paginationId, {page: 1}, { startsWith: this.startsWith });
     } else {
-      this.router.navigate([], {
+      void this.router.navigate([], {
         queryParams: Object.assign({ startsWith: this.startsWith }),
         queryParamsHandling: 'merge'
       });
diff --git a/src/app/shared/starts-with/starts-with-loader.component.spec.ts b/src/app/shared/starts-with/starts-with-loader.component.spec.ts
new file mode 100644
index 0000000000..7eb0ec8819
--- /dev/null
+++ b/src/app/shared/starts-with/starts-with-loader.component.spec.ts
@@ -0,0 +1,71 @@
+import { StartsWithLoaderComponent } from './starts-with-loader.component';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DynamicComponentLoaderDirective } from '../abstract-component-loader/dynamic-component-loader.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { StartsWithTextComponent } from './text/starts-with-text.component';
+import { Router, ActivatedRoute } from '@angular/router';
+import { RouterStub } from '../testing/router.stub';
+import { ThemeService } from '../theme-support/theme.service';
+import { getMockThemeService } from '../mocks/theme-service.mock';
+import { StartsWithType } from './starts-with-decorator';
+import { ActivatedRouteStub } from '../testing/active-router.stub';
+import { PaginationService } from '../../core/pagination/pagination.service';
+import { PaginationServiceStub } from '../testing/pagination-service.stub';
+
+describe('StartsWithLoaderComponent', () => {
+  let comp: StartsWithLoaderComponent;
+  let fixture: ComponentFixture<StartsWithLoaderComponent>;
+
+  let paginationService: PaginationServiceStub;
+  let route: ActivatedRouteStub;
+  let themeService: ThemeService;
+
+  const type: StartsWithType = StartsWithType.text;
+
+  beforeEach(waitForAsync(() => {
+    paginationService = new PaginationServiceStub();
+    route = new ActivatedRouteStub();
+    themeService = getMockThemeService('dspace');
+
+    void TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        StartsWithLoaderComponent,
+        StartsWithTextComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        { provide: PaginationService, useValue: paginationService },
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: new RouterStub() },
+        { provide: ThemeService, useValue: themeService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(StartsWithLoaderComponent, {
+      set: {
+        changeDetection: ChangeDetectionStrategy.Default,
+        entryComponents: [StartsWithTextComponent],
+      }
+    }).compileComponents();
+  }));
+
+  beforeEach(waitForAsync(() => {
+    fixture = TestBed.createComponent(StartsWithLoaderComponent);
+    comp = fixture.componentInstance;
+    comp.type = type;
+    comp.paginationId = 'bbm';
+    comp.startsWithOptions = [];
+    spyOn(comp, 'getComponent').and.returnValue(StartsWithTextComponent);
+
+    fixture.detectChanges();
+  }));
+
+  describe('When the component is rendered', () => {
+    it('should call the getComponent function', () => {
+      expect(comp.getComponent).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/app/shared/starts-with/starts-with-loader.component.ts b/src/app/shared/starts-with/starts-with-loader.component.ts
new file mode 100644
index 0000000000..085daa4dd0
--- /dev/null
+++ b/src/app/shared/starts-with/starts-with-loader.component.ts
@@ -0,0 +1,33 @@
+import { Component, Input, } from '@angular/core';
+import { AbstractComponentLoaderComponent } from '../abstract-component-loader/abstract-component-loader.component';
+import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { getStartsWithComponent, StartsWithType } from './starts-with-decorator';
+import { StartsWithAbstractComponent } from './starts-with-abstract.component';
+
+/**
+ * Component for loading a {@link StartsWithAbstractComponent} depending on the "type" input
+ */
+@Component({
+  selector: 'ds-starts-with-loader',
+  templateUrl: '../abstract-component-loader/abstract-component-loader.component.html',
+})
+export class StartsWithLoaderComponent extends AbstractComponentLoaderComponent<StartsWithAbstractComponent> {
+
+  @Input() paginationId: string;
+
+  @Input() startsWithOptions: (string | number)[];
+
+  @Input() type: StartsWithType;
+
+  protected inputNames: (keyof this & string)[] = [
+    ...this.inputNames,
+    'paginationId',
+    'startsWithOptions',
+    'type',
+  ];
+
+  public getComponent(): GenericConstructor<StartsWithAbstractComponent> {
+    return getStartsWithComponent(this.type);
+  }
+
+}
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.spec.ts b/src/app/shared/starts-with/text/starts-with-text.component.spec.ts
index b717c72d76..e282294090 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.spec.ts
+++ b/src/app/shared/starts-with/text/starts-with-text.component.spec.ts
@@ -10,25 +10,31 @@ import { By } from '@angular/platform-browser';
 import { StartsWithTextComponent } from './starts-with-text.component';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../testing/pagination-service.stub';
+import { ActivatedRouteStub } from '../../testing/active-router.stub';
+import { RouterStub } from '../../testing/router.stub';
 
 describe('StartsWithTextComponent', () => {
   let comp: StartsWithTextComponent;
   let fixture: ComponentFixture<StartsWithTextComponent>;
-  let route: ActivatedRoute;
-  let router: Router;
+
+  let paginationService: PaginationServiceStub;
+  let route: ActivatedRouteStub;
+  let router: RouterStub;
 
   const options = ['0-9', 'A', 'B', 'C'];
 
-  const paginationService = new PaginationServiceStub();
+  beforeEach(waitForAsync(async () => {
+    paginationService = new PaginationServiceStub();
+    route = new ActivatedRouteStub();
+    router = new RouterStub();
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), NgbModule],
       declarations: [StartsWithTextComponent, EnumKeysPipe],
       providers: [
-        { provide: 'startsWithOptions', useValue: options },
-        { provide: 'paginationId', useValue: 'page-id' },
-        { provide: PaginationService, useValue: paginationService }
+        { provide: PaginationService, useValue: paginationService },
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: router },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -37,10 +43,9 @@ describe('StartsWithTextComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(StartsWithTextComponent);
     comp = fixture.componentInstance;
+    comp.paginationId = 'page-id';
+    comp.startsWithOptions = options;
     fixture.detectChanges();
-    route = (comp as any).route;
-    router = (comp as any).router;
-    spyOn(router, 'navigate');
   });
 
   it('should create a FormGroup containing a startsWith FormControl', () => {
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.ts b/src/app/shared/starts-with/text/starts-with-text.component.ts
index 9f44fc4d40..592f973aa6 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.ts
+++ b/src/app/shared/starts-with/text/starts-with-text.component.ts
@@ -35,15 +35,4 @@ export class StartsWithTextComponent extends StartsWithAbstractComponent {
     super.setStartsWithParam(resetPage);
   }
 
-  /**
-   * Checks whether the provided option is equal to the current startsWith
-   * @param option
-   */
-  isSelectedOption(option: string): boolean {
-    if (this.startsWith === '0' && option === '0-9') {
-      return true;
-    }
-    return option === this.startsWith;
-  }
-
 }