Hide duplicate back/cancel button on the collection mapper page

src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html

@@ -51,11 +51,15 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
                   (confirm)="mapItems($event)"
                 (cancel)="onCancel()"></ds-item-select>
               </div>
-            }
-            @if (!performedSearch) {
+            } @else {
               <div class="alert alert-info w-100" role="alert">
                 {{'collection.edit.item-mapper.no-search' | translate}}
               </div>
+              <div class="d-flex justify-content-end">
+                <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
+                  <i aria-hidden="true" class="fas fa-times"></i> {{ 'collection.edit.item-mapper.cancel' | translate }}
+                </button>
+              </div>
             }
           </ng-template>
         </li>

src/app/collection-page/edit-collection-page/edit-collection-page.component.spec.ts

@@ -32,6 +32,7 @@ describe('EditCollectionPageComponent', () => {
       ],
     },
     snapshot: {
+      data: {},
       firstChild: {
         routeConfig: {
           path: 'mockUrl',

src/app/community-page/edit-community-page/edit-community-page.component.spec.ts

@@ -32,6 +32,7 @@ describe('EditCommunityPageComponent', () => {
       ],
     },
     snapshot: {
+      data: {},
       firstChild: {
         routeConfig: {
           path: 'mockUrl',

src/app/item-page/edit-item-page/edit-item-page-routes.ts

@@ -105,12 +105,6 @@ export const ROUTES: Route[] = [
             component: ItemBitstreamsComponent,
             data: { title: 'item.edit.tabs.view.title', showBreadcrumbs: true }
           }, */
-          /* TODO - uncomment & fix when curate page exists
-          {
-            path: 'curate',
-            component: ItemBitstreamsComponent,
-            data: { title: 'item.edit.tabs.curate.title', showBreadcrumbs: true }
-          }, */
           {
             path: 'versionhistory',
             component: ItemVersionHistoryComponent,
@@ -126,7 +120,11 @@ export const ROUTES: Route[] = [
           {
             path: 'mapper',
             component: ItemCollectionMapperComponent,
-            data: { title: 'item.edit.tabs.item-mapper.title', showBreadcrumbs: true },
+            data: {
+              hideReturnButton: true,
+              showBreadcrumbs: true,
+              title: 'item.edit.tabs.item-mapper.title',
+            },
             canActivate: [itemPageCollectionMapperGuard],
           },
         ],

src/app/item-page/edit-item-page/edit-item-page.component.html

@@ -4,7 +4,7 @@
       <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
       <div class="pt-2">
         @if (pages.length > 0) {
-          <ul class="nav nav-tabs justify-content-start" role="tablist">
+          <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
             @for (page of pages; track page) {
               <li class="nav-item" role="presentation">
                 @if ((page.enabled | async)) {
@@ -36,7 +36,11 @@ <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
           </div>
           <div class="button-row bottom">
             <div class="text-end">
-              <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
+              @if (!hideReturnButton) {
+                <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary">
+                  <i aria-hidden="true" class="fas fa-arrow-left"></i> {{ 'item.edit.return' | translate }}
+                </a>
+              }
             </div>
           </div>
         </div>

src/app/item-page/edit-item-page/edit-item-page.component.spec.ts

@@ -52,6 +52,7 @@ describe('EditItemPageComponent', () => {
   const inaccessiblePages = ['inaccessible', 'inaccessibleDoubleGuard'];
   const mockRoute = {
     snapshot: {
+      data: {},
       firstChild: {
         routeConfig: {
           path: accessiblePages[0],

src/app/item-page/edit-item-page/edit-item-page.component.ts

@@ -72,6 +72,11 @@ export class EditItemPageComponent implements OnInit {
    */
   pages: { page: string, enabled: Observable<boolean> }[];
 
+  /**
+   * Hide the default return button?
+   */
+  public hideReturnButton: boolean;
+
   constructor(private route: ActivatedRoute, private router: Router, private injector: Injector) {
     this.router.events.subscribe(() => this.initPageParamsByRoute());
   }
@@ -110,5 +115,11 @@ export class EditItemPageComponent implements OnInit {
    */
   initPageParamsByRoute() {
     this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
+
+    let current: ActivatedRoute = this.route;
+    while (current.firstChild) {
+      current = current.firstChild;
+    }
+    this.hideReturnButton = current.snapshot.data.hideReturnButton ?? false;
   }
 }

src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html

@@ -1,4 +1,4 @@
-<div class="container mt-2">
+<div class="container">
   <div class="row">
     <div class="col-12">
       <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
@@ -49,11 +49,15 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
                   (confirm)="mapCollections($event)"
                 (cancel)="onCancel()"></ds-collection-select>
               </div>
-            }
-            @if (!performedSearch) {
+            } @else {
               <div class="alert alert-info w-100" role="alert">
                 {{'item.edit.item-mapper.no-search' | translate}}
               </div>
+              <div class="d-flex justify-content-end">
+                <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
+                  <i aria-hidden="true" class="fas fa-times"></i> {{ 'item.edit.item-mapper.cancel' | translate }}
+                </button>
+              </div>
             }
           </ng-template>
         </li>

src/app/item-page/edit-item-page/item-curate/item-curate.component.html

@@ -1,4 +1,4 @@
-<div class="container mt-3">
+<div class="container">
   <h2>{{'item.edit.curate.title' |translate:{item: (itemName$ |async)} }}</h2>
   @if (dsoRD$ | async; as dsoRD) {
     <ds-curation-form

src/app/item-page/edit-item-page/item-status/item-status.component.html

@@ -1,4 +1,4 @@
-<p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
+<p>{{'item.edit.tabs.status.description' | translate}}</p>
 <div class="row">
   @for (statusKey of statusDataKeys; track statusKey) {
     <div class="w-100 pt-1">

src/app/item-page/edit-item-page/item-version-history/item-version-history.component.html

@@ -1,4 +1,4 @@
-<div class="mt-2" *ngVar="(itemRD$ | async)?.payload as item">
+<div *ngVar="(itemRD$ | async)?.payload as item">
   @if (item) {
     <ds-item-versions [item]="item" [displayWhenEmpty]="true" [displayTitle]="false"
     [displayActions]="true"></ds-item-versions>

src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.spec.ts

@@ -56,6 +56,7 @@ describe('EditComColPageComponent', () => {
         ],
       },
       snapshot: {
+        data: {},
         firstChild: {
           routeConfig: {
             path: 'mockUrl',

src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts

@@ -74,7 +74,11 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
    */
   initPageParamsByRoute() {
     this.currentPage = this.route.snapshot.firstChild.routeConfig.path;
-    this.hideReturnButton = this.route.routeConfig.children
-      .find((child: any) => child.path === this.currentPage).data.hideReturnButton;
+
+    let current: ActivatedRoute = this.route;
+    while (current.firstChild) {
+      current = current.firstChild;
+    }
+    this.hideReturnButton = current.snapshot.data.hideReturnButton ?? false;
   }
 }

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -39,13 +39,13 @@
   }
   <div class="space-children-mr float-end" *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
-      <i class="fas fa-times"></i> {{cancelButton | translate}}
+      <i aria-hidden="true" class="fas fa-times"></i> {{ cancelButton | translate }}
     </button>
     <button class="btn collection-confirm"
       [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
       [dsBtnDisabled]="selectedIds?.length === 0"
       (click)="confirmSelected()">
-      <i class="fas" [ngClass]="{'fa-trash': dangerConfirm, 'fa-save': !dangerConfirm}"></i> {{confirmButton | translate}}
+      <i aria-hidden="true" class="fas" [ngClass]="{'fa-trash': dangerConfirm, 'fa-save': !dangerConfirm}"></i> {{ confirmButton | translate }}
     </button>
   </div>
 </ng-container>

src/app/shared/object-select/item-select/item-select.component.html

@@ -57,13 +57,15 @@
   @if (!itemsRD || itemsRD?.isLoading) {
     <ds-loading message="{{'loading.items' | translate}}"></ds-loading>
   }
-  <div *ngVar="(selectedIds$ | async) as selectedIds">
-    <button class="btn btn-outline-secondary item-cancel float-start" (click)="onCancel()">{{cancelButton | translate}}</button>
-    <button class="btn item-confirm float-end"
+  <div class="space-children-mr float-end" *ngVar="(selectedIds$ | async) as selectedIds">
+    <button class="btn btn-outline-secondary item-cancel" (click)="onCancel()">
+      <i aria-hidden="true" class="fas fa-times"></i> {{ cancelButton | translate }}
+    </button>
+    <button class="btn item-confirm"
       [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
       [dsBtnDisabled]="selectedIds?.length === 0"
       (click)="confirmSelected()">
-      {{confirmButton | translate}}
+      <i aria-hidden="true" class="fas" [ngClass]="{'fa-trash': dangerConfirm, 'fa-save': !dangerConfirm}"></i> {{ confirmButton | translate }}
     </button>
   </div>
 </ng-container>