removed code repetition

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss

@@ -1,5 +1,2 @@
 @import '../../../../../styles/variables.scss';
 
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss

@@ -1,5 +1 @@
 @import '../../../../../styles/variables.scss';
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss

@@ -1,5 +1 @@
 @import '../../../../../styles/variables.scss';
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.scss

@@ -1,5 +1 @@
 @import '../../../../../styles/variables.scss';
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field class="mr-auto" [item]="object">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/person/person.component.scss

@@ -1,5 +1 @@
 @import '../../../../../styles/variables.scss';
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="d-flex flex-row">
   <ds-item-page-title-field [item]="object" class="mr-auto">
   </ds-item-page-title-field>

src/app/entity-groups/research-entities/item-pages/project/project.component.scss

@@ -1,5 +1 @@
 @import '../../../../../styles/variables.scss';
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="row" *ngIf="iiifEnabled">
   <div class="col-12">
     <ds-mirador-viewer  id="iiif-viewer"

src/app/item-page/simple/item-types/publication/publication.component.scss

@@ -1,5 +1,2 @@
 @import '../../../../../styles/variables.scss';
 
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/item-page/simple/item-types/shared/item.component.spec.ts

@@ -38,12 +38,9 @@ import { VersionHistoryDataService } from '../../../../core/data/version-history
 import { RouterTestingModule } from '@angular/router/testing';
 import { AuthorizationDataService } from '../../../../core/data/feature-authorization/authorization-data.service';
 import { ResearcherProfileDataService } from '../../../../core/profile/researcher-profile-data.service';
-import { Router } from '@angular/router';
 
 import { buildPaginatedList } from '../../../../core/data/paginated-list.model';
 import { PageInfo } from '../../../../core/shared/page-info.model';
-import { ItemComponent } from './item.component';
-import { ItemVersionsSharedService } from '../../../../shared/item/item-versions/item-versions-shared.service';
 
 export function getIIIFSearchEnabled(enabled: boolean): MetadataValue {
   return Object.assign(new MetadataValue(), {
@@ -404,79 +401,4 @@ describe('ItemComponent', () => {
     },
   });
 
-  describe('back to results', () => {
-    let comp: ItemComponent;
-    let fixture: ComponentFixture<any>;
-    let router: Router;
-
-    const searchUrl = '/search?query=test&spc.page=2';
-    const browseUrl = '/browse/title?scope=0cc&bbm.page=3';
-    const recentSubmissionsUrl = '/collections/be7b8430-77a5-4016-91c9-90863e50583a?cp.page=3';
-
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          TranslateModule.forRoot({
-            loader: {
-              provide: TranslateLoader,
-              useClass: TranslateLoaderMock
-            }
-          }),
-          RouterTestingModule,
-        ],
-        declarations: [ItemComponent, GenericItemPageFieldComponent, TruncatePipe ],
-        providers: [
-          { provide: ItemDataService, useValue: {} },
-          { provide: TruncatableService, useValue: {} },
-          { provide: RelationshipDataService, useValue: {} },
-          { provide: ObjectCacheService, useValue: {} },
-          { provide: UUIDService, useValue: {} },
-          { provide: Store, useValue: {} },
-          { provide: RemoteDataBuildService, useValue: {} },
-          { provide: CommunityDataService, useValue: {} },
-          { provide: HALEndpointService, useValue: {} },
-          { provide: NotificationsService, useValue: {} },
-          { provide: HttpClient, useValue: {} },
-          { provide: DSOChangeAnalyzer, useValue: {} },
-          { provide: DefaultChangeAnalyzer, useValue: {} },
-          { provide: VersionHistoryDataService, useValue: {} },
-          { provide: VersionDataService, useValue: {} },
-          { provide: BitstreamDataService, useValue: {} },
-          { provide: WorkspaceitemDataService, useValue: {} },
-          { provide: SearchService, useValue: {} },
-          { provide: ItemDataService, useValue: {} },
-          { provide: ItemVersionsSharedService, useValue: {} },
-          { provide: RouteService, useValue: mockRouteService }
-        ],
-        schemas: [NO_ERRORS_SCHEMA]
-      }).overrideComponent(ItemComponent, {
-        set: {changeDetection: ChangeDetectionStrategy.Default}
-      });
-    }));
-
-    beforeEach(waitForAsync(() => {
-      router = TestBed.inject(Router);
-      spyOn(router, 'navigateByUrl');
-      TestBed.compileComponents();
-      fixture = TestBed.createComponent(ItemComponent);
-      comp = fixture.componentInstance;
-      comp.object = mockItem;
-      fixture.detectChanges();
-    }));
-
-    it('should hide back button',() => {
-      spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(''));
-      comp.showBackButton.subscribe((val) => {
-        expect(val).toBeFalse();
-      });
-    });
-    it('should show back button', () => {
-      spyOn(mockRouteService, 'getPreviousUrl').and.returnValue(observableOf(searchUrl));
-      comp.ngOnInit();
-      comp.showBackButton.subscribe((val) => {
-        expect(val).toBeTrue();
-      });
-    });
-  });
-
 });

src/app/item-page/simple/item-types/shared/item.component.ts

@@ -5,7 +5,6 @@ import { getItemPageRoute } from '../../../item-page-routing-paths';
 import { RouteService } from '../../../../core/services/route.service';
 import { Observable } from 'rxjs';
 import { getDSpaceQuery, isIiifEnabled, isIiifSearchEnabled } from './item-iiif-utils';
-import { filter, map, take } from 'rxjs/operators';
 
 @Component({
   selector: 'ds-item',
@@ -55,12 +54,5 @@ export class ItemComponent implements OnInit {
     if (this.iiifSearchEnabled) {
       this.iiifQuery$ = getDSpaceQuery(this.object, this.routeService);
     }
-    // Show the back to results button when the previous context was search, browse,
-    // or recent submissions pagination.
-    this.showBackButton = this.routeService.getPreviousUrl().pipe(
-      filter(url => /^(\/search|\/browse|\/collections|\/admin\/search|\/mydspace)/.test(url)),
-      take(1),
-      map(() => true)
-    );
   }
 }

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -1,9 +1,4 @@
-<div class="row" *ngIf="showBackButton | async">
-  <div class="col-12">
 <ds-themed-results-back-button></ds-themed-results-back-button>
-  </div>
-</div>
-
 <div class="row" *ngIf="iiifEnabled">
   <div class="col-12">
     <ds-mirador-viewer id="iiif-viewer"

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.scss

@@ -1,4 +1,2 @@
 @import '../../../../../styles/variables.scss';
-button.back-btn {
+
-  margin-bottom: 10px;
-}

src/app/shared/browse-by/browse-by.component.html

@@ -3,7 +3,7 @@
   <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">
-        <ds-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$"></ds-results-back-button>
+        <ds-themed-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$"></ds-themed-results-back-button>
       </div>
     <ds-viewable-collection
       [config]="paginationConfig"
@@ -18,7 +18,7 @@
   <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
   <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0">
     <div *ngIf="shouldDisplayResetButton$ |async" class="d-inline-block mb-4 reset">
-      <ds-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$" ></ds-results-back-button>
+      <ds-themed-results-back-button [paginationConfig]="paginationConfig" [previousPage$]="previousPage$" ></ds-themed-results-back-button>
     </div>
     <div class="alert alert-info w-100" role="alert">
       {{'browse.empty' | translate}}

src/app/shared/results-back-button/results-back-button.component.html

@@ -1,4 +1,5 @@
-<button class="btn btn-secondary btn-sm back-btn ng-tns-c242-28" (click)="back()">
+<button *ngIf="showBackButton | async" class="btn btn-secondary btn-sm mb-2 ng-tns-c242-28" (click)="back()">
   <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
   {{this.buttonLabel | async}}
 </button>
+

src/app/shared/results-back-button/results-back-button.component.scss

@@ -1,4 +0,0 @@
-
-button.back-btn {
-  margin-bottom: 10px;
-}

src/app/shared/results-back-button/results-back-button.component.spec.ts

@@ -9,6 +9,7 @@ import { Router } from '@angular/router';
 import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../testing/pagination-service.stub';
+import { By } from '@angular/platform-browser';
 
 describe('ResultsBackButtonComponent', () => {
 
@@ -23,12 +24,15 @@ describe('ResultsBackButtonComponent', () => {
   });
 
   const searchUrl = '/search?query=test&spc.page=2';
+  const nonSearchUrl = '/item';
 
-  const mockRouteService = {
+  function getMockRouteService(url) {
+    return {
       getPreviousUrl(): Observable < string > {
-      return of(searchUrl);
+        return of(url);
       }
     };
+  }
 
   router = jasmine.createSpyObj('router', {
     navigateByUrl: jasmine.createSpy('navigateByUrl')
@@ -40,6 +44,8 @@ describe('ResultsBackButtonComponent', () => {
 
   describe('back to results', () => {
 
+    const mockRouteService = getMockRouteService(searchUrl);
+
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         declarations: [ResultsBackButtonComponent],
@@ -73,7 +79,7 @@ describe('ResultsBackButtonComponent', () => {
 
       it('should navigate to previous pagination', () => {
         component.back();
-        expect(mockRouteService.getPreviousUrl).not.toHaveBeenCalled();
+        expect(mockRouteService.getPreviousUrl).toHaveBeenCalled();
         expect(paginationService.updateRoute).toHaveBeenCalled();
       });
 
@@ -97,7 +103,44 @@ describe('ResultsBackButtonComponent', () => {
         expect(router.navigateByUrl).toHaveBeenCalledWith(searchUrl);
       });
     });
-  });
 
   });
 
+  describe('back to results', () => {
+
+    const mockRouteService = getMockRouteService(nonSearchUrl);
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ResultsBackButtonComponent],
+        imports: [TranslateModule.forRoot(),
+          RouterTestingModule.withRoutes([])
+        ],
+        providers: [
+          {provide: RouteService, useValue: mockRouteService},
+          {provide: PaginationService, useValue: paginationService},
+          {provide: Router, useValue: router},
+          {provide: TranslateService, useValue: translate}
+        ],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+      spyOn(mockRouteService, 'getPreviousUrl').and.callThrough();
+    }));
+
+    describe('previous route not search or browse list', () => {
+      beforeEach(waitForAsync(() => {
+        fixture = TestBed.createComponent(ResultsBackButtonComponent);
+        component = fixture.componentInstance;
+        component.ngOnInit();
+        fixture.detectChanges();
+      }));
+
+      it('should hide back button', () => {
+        let button = fixture.debugElement.query(By.css('button'));
+        expect(button).toBeNull();
+      });
+    });
+
+  });
+});
+

src/app/shared/results-back-button/results-back-button.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { take } from 'rxjs/operators';
+import { filter, map, take } from 'rxjs/operators';
 import { RouteService } from '../../core/services/route.service';
 import { Router } from '@angular/router';
 import { PaginationService } from '../../core/pagination/pagination.service';
@@ -29,6 +29,11 @@ export class ResultsBackButtonComponent {
    */
   @Input() paginationConfig?: PaginationComponentOptions;
 
+  /**
+   * Used to configure search in mirador.
+   */
+  showBackButton: Observable<boolean>;
+
   /**
    * The button text
    */
@@ -47,13 +52,18 @@ export class ResultsBackButtonComponent {
     } else {
       this.buttonLabel = this.translateService.get('search.browse.item-back');
     }
+    // Show the back to results button when the previous context was a search or browse list.
+    this.showBackButton = this.routeService.getPreviousUrl().pipe(
+      filter(url => /^(\/search|\/browse|\/collections|\/admin\/search|\/mydspace)/.test(url)),
+      take(1),
+      map(() => true)
+    );
   }
 
   /**
    * Navigate back from the item to the previous pagination list.
    */
   public back() {
-
     if (isNotEmpty(this.paginationConfig) && isNotEmpty(this.previousPage$)) {
       // if pagination configuration is provided use it to update the route to the previous browse page.
       const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;

src/app/shared/results-back-button/themed-results-back-button.component.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../theme-support/themed.component';
 import { ResultsBackButtonComponent } from './results-back-button.component';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'ds-themed-results-back-button',
@@ -8,6 +10,11 @@ import { ResultsBackButtonComponent } from './results-back-button.component';
   templateUrl: '../theme-support/themed.component.html',
 })
 export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> {
+
+  @Input() previousPage$?: BehaviorSubject<string>;
+
+  @Input() paginationConfig?: PaginationComponentOptions;
+
   protected getComponentName(): string {
     return 'ResultsBackButtonComponent';
   }