Label as input parameter to button component

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-themed-results-back-button [back]="back" [buttonType]="backButtonType"></ds-themed-results-back-button>
+        <ds-themed-results-back-button [back]="back" [buttonLabel]="buttonLabel"></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-themed-results-back-button [back]="back" [buttonType]="backButtonType"></ds-themed-results-back-button>
+      <ds-themed-results-back-button [back]="back" [buttonLabel]="buttonLabel"></ds-themed-results-back-button>
     </div>
     <div class="alert alert-info w-100" role="alert">
       {{'browse.empty' | translate}}

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

@@ -12,6 +12,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
 import { RouteService } from '../../core/services/route.service';
 import { map } from 'rxjs/operators';
 import { hasValue } from '../empty.util';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-browse-by',
@@ -124,18 +125,19 @@ export class BrowseByComponent implements OnInit, OnDestroy {
 
   public constructor(private injector: Injector,
                      protected paginationService: PaginationService,
+                     protected translateService: TranslateService,
                      private routeService: RouteService,
   ) {
 
   }
 
   /**
-   * Used to set the back button label for metadata browsing.
+   * The label used by the back button.
    */
-  backButtonType = 'metadata-browse';
+  buttonLabel = this.translateService.get('browse.back.all-results');
 
   /**
-   * Used for back navigation in metadata browse.
+   * The function used for back navigation in metadata browse.
    */
   back = () => {
     const page = +this.previousPage$.value > 1 ? +this.previousPage$.value : 1;

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

@@ -3,22 +3,16 @@ import { ResultsBackButtonComponent } from './results-back-button.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { PaginationServiceStub } from '../testing/pagination-service.stub';
+import { of } from 'rxjs';
 
 describe('ResultsBackButtonComponent', () => {
 
   let component: ResultsBackButtonComponent;
   let fixture: ComponentFixture<ResultsBackButtonComponent>;
-  let router;
 
-
-  router = jasmine.createSpyObj('router', {
-    navigateByUrl: jasmine.createSpy('navigateByUrl')
-  });
-
-  const translate = jasmine.createSpyObj('TranslateService', ['get']);
-
-  const paginationService = new PaginationServiceStub();
+  const translate = {
+    get: jasmine.createSpy('get').and.returnValue(of('item button')),
+  };
 
   describe('back to results', () => {
 
@@ -39,14 +33,18 @@ describe('ResultsBackButtonComponent', () => {
     describe('from a metadata browse list', () => {
 
       beforeEach(waitForAsync(() => {
+        translate.get.calls.reset();
         fixture = TestBed.createComponent(ResultsBackButtonComponent);
         component = fixture.componentInstance;
-        component.buttonType = 'metadata-browse';
+        component.buttonLabel = of('browse button');
+        component.ngOnInit();
         fixture.detectChanges();
       }));
 
       it('should have back from browse label', () => {
-        expect(translate.get).toHaveBeenCalledWith('browse.back.all-results');
+        expect(translate.get).not.toHaveBeenCalled();
+        const el = fixture.debugElement.nativeElement;
+        expect(el.innerHTML).toContain('browse button');
       });
 
     });
@@ -54,13 +52,17 @@ describe('ResultsBackButtonComponent', () => {
     describe('from an item', () => {
 
       beforeEach(waitForAsync(() => {
+        translate.get.calls.reset();
         fixture = TestBed.createComponent(ResultsBackButtonComponent);
         component = fixture.componentInstance;
+        component.ngOnInit();
         fixture.detectChanges();
       }));
 
-      it('should have item label', () => {
+      it('should set item label by default', () => {
         expect(translate.get).toHaveBeenCalledWith('search.browse.item-back');
+        const el = fixture.debugElement.nativeElement;
+        expect(el.innerHTML).toContain('item button');
       });
 
     });

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

@@ -13,11 +13,6 @@ import { TranslateService } from '@ngx-translate/core';
  */
 export class ResultsBackButtonComponent implements OnInit {
 
-  /**
-   * The button type determines the button label.
-   */
-  @Input() buttonType?: string;
-
   /**
    * The function used for back navigation.
    */
@@ -26,17 +21,15 @@ export class ResultsBackButtonComponent implements OnInit {
   /**
    * The button label translation.
    */
-  buttonLabel: Observable<string>;
+  @Input() buttonLabel?: Observable<any>;
 
   constructor(private translateService: TranslateService) {
 
   }
 
   ngOnInit(): void {
-    // Set labels for metadata browse and item back buttons.
-    if (this.buttonType === 'metadata-browse') {
-      this.buttonLabel = this.translateService.get('browse.back.all-results');
-    } else {
+    if (!this.buttonLabel) {
+      // Use the 'Back to Results' label as default.
       this.buttonLabel = this.translateService.get('search.browse.item-back');
     }
   }

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

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../theme-support/themed.component';
 import { ResultsBackButtonComponent } from './results-back-button.component';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'ds-themed-results-back-button',
@@ -9,11 +10,11 @@ import { ResultsBackButtonComponent } from './results-back-button.component';
 })
 export class ThemedResultsBackButtonComponent extends ThemedComponent<ResultsBackButtonComponent> {
 
-  @Input() buttonType?: string;
+  @Input() buttonLabel?: Observable<any>;
 
   @Input() back: () => void;
 
-  protected inAndOutputNames: (keyof ResultsBackButtonComponent & keyof this)[] = ['back', 'buttonType'];
+  protected inAndOutputNames: (keyof ResultsBackButtonComponent & keyof this)[] = ['back', 'buttonLabel'];
 
   protected getComponentName(): string {
     return 'ResultsBackButtonComponent';