66156: Active tab in URL for tabbed related entities search

src/app/+item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html

@@ -1,5 +1,5 @@
-<ngb-tabset *ngIf="relationTypes.length > 1" [destroyOnHide]="true" #tabs="ngbTabset">
+<ngb-tabset *ngIf="relationTypes.length > 1" [destroyOnHide]="true" #tabs="ngbTabset" [activeId]="activeTab" (tabChange)="onTabChange($event)">
-  <ngb-tab *ngFor="let relationType of relationTypes" title="{{'item.page.relationships.' + relationType.label | translate}}">
+  <ngb-tab *ngFor="let relationType of relationTypes" title="{{'item.page.relationships.' + relationType.label | translate}}" [id]="relationType.filter">
     <ng-template ngbTabContent>
       <div class="mt-4">
         <ds-related-entities-search [item]="item"

src/app/+item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.spec.ts

@@ -0,0 +1,83 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Item } from '../../../../core/shared/item.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TabbedRelatedEntitiesSearchComponent } from './tabbed-related-entities-search.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MockRouter } from '../../../../shared/mocks/mock-router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { VarDirective } from '../../../../shared/utils/var.directive';
+
+describe('TabbedRelatedEntitiesSearchComponent', () => {
+  let comp: TabbedRelatedEntitiesSearchComponent;
+  let fixture: ComponentFixture<TabbedRelatedEntitiesSearchComponent>;
+
+  const mockItem = Object.assign(new Item(), {
+    id: 'id1'
+  });
+  const mockRelationType = 'publications';
+  const relationTypes = [
+    {
+      label: mockRelationType,
+      filter: mockRelationType
+    }
+  ];
+
+  const router = new MockRouter();
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), NoopAnimationsModule, NgbModule.forRoot()],
+      declarations: [TabbedRelatedEntitiesSearchComponent, VarDirective],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              queryParams: {
+                tab: mockRelationType
+              }
+            }
+          },
+        },
+        { provide: Router, useValue: router }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabbedRelatedEntitiesSearchComponent);
+    comp = fixture.componentInstance;
+    comp.item = mockItem;
+    comp.relationTypes = relationTypes;
+    fixture.detectChanges();
+  });
+
+  it('should initialize the activeTab depending on the current query parameters', () => {
+    expect(comp.activeTab).toEqual(mockRelationType);
+  });
+
+  describe('onTabChange', () => {
+    const event = {
+      currentId: mockRelationType,
+      nextId: 'nextTab'
+    };
+
+    beforeEach(() => {
+      comp.onTabChange(event);
+    });
+
+    it('should call router natigate with the correct arguments', () => {
+      expect(router.navigate).toHaveBeenCalledWith([], {
+        relativeTo: (comp as any).route,
+        queryParams: {
+          tab: event.nextId
+        },
+        queryParamsHandling: 'merge'
+      });
+    });
+  });
+
+});

src/app/+item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Item } from '../../../../core/shared/item.model';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'ds-tabbed-related-entities-search',
@@ -10,7 +11,7 @@ import { Item } from '../../../../core/shared/item.model';
  * Related items can be facetted, or queried using an
  * optional search box.
  */
-export class TabbedRelatedEntitiesSearchComponent {
+export class TabbedRelatedEntitiesSearchComponent implements OnInit {
   /**
    * The types of relationships to fetch items for
    * e.g. 'isAuthorOfPublication'
@@ -37,4 +38,35 @@ export class TabbedRelatedEntitiesSearchComponent {
    * @type {number}
    */
   @Input() sideBarWidth = 4;
+
+  /**
+   * The active tab
+   */
+  activeTab: string;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  /**
+   * If the url contains a "tab" query parameter, set this tab to be the active tab
+   */
+  ngOnInit(): void {
+    this.activeTab = this.route.snapshot.queryParams.tab;
+  }
+
+  /**
+   * Add a "tab" query parameter to the URL when changing tabs
+   * @param event
+   */
+  onTabChange(event) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {
+        tab: event.nextId
+      },
+      queryParamsHandling: 'merge'
+    });
+  }
+
 }