Merged in dspacecris-7-DSC-1415 (pull request DSpace#1072)

Revert changes to breadcrumbs.component un order to be aligned with community implementation

Author: atarix83

src/app/breadcrumbs/breadcrumbs.component.html

@@ -10,25 +10,11 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-      <li class="breadcrumb-item" *ngVar="(text | translate) as label">
-        <div class="breadcrumb-item-limiter">
-          <a [routerLink]="url" class="text-truncate"
-             [ngbTooltip]="label | dsBreadcrumbTooltip"
-             placement="bottom"
-          >{{label | dsTruncateText}}</a>
-        </div>
-      </li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">
-      <li class="breadcrumb-item active" aria-current="page" *ngVar="(text | translate) as label">
-        <div class="breadcrumb-item-limiter">
-          <div class="text-truncate"
-               [ngbTooltip]="label | dsBreadcrumbTooltip"
-               placement="bottom"
-          >{{label | dsTruncateText}}</div>
-        </div>
-      </li>
+        <li class="breadcrumb-item active" aria-current="page"><div class="breadcrumb-item-limiter"><div class="text-truncate">{{text | translate}}</div></div></li>
     </ng-template>
 </ng-container>
 

src/app/breadcrumbs/breadcrumbs.component.spec.ts

@@ -10,30 +10,22 @@ import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of as observableOf } from 'rxjs';
 import { DebugElement } from '@angular/core';
-import { BreadcrumbTooltipPipe } from './breadcrumb/breadcrumb-tooltip.pipe';
-import { TruncateBreadcrumbItemCharactersPipe } from './breadcrumb/truncate-breadcrumb-item-characters.pipe';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('BreadcrumbsComponent', () => {
   let component: BreadcrumbsComponent;
   let fixture: ComponentFixture<BreadcrumbsComponent>;
   let breadcrumbsServiceMock: BreadcrumbsService;
-  let truncateTextPipe: TruncateBreadcrumbItemCharactersPipe;
 
   const expectBreadcrumb = (listItem: DebugElement, text: string, url: string) => {
     const anchor = listItem.query(By.css('a'));
-    const truncatedText = truncateTextPipe.transform(text);
+
     if (url == null) {
       expect(anchor).toBeNull();
-       // remove leading whitespace characters
-      const textWithoutSpaces = listItem.nativeElement.innerHTML.trimStart().replace(/^\s+/, '');
-      expect(textWithoutSpaces).toEqual(truncatedText);
+      expect(listItem.nativeElement.innerHTML).toEqual(text);
     } else {
       expect(anchor).toBeInstanceOf(DebugElement);
       expect(anchor.attributes.href).toEqual(url);
-       // remove leading whitespace characters
-      const textWithoutSpaces = anchor.nativeElement.innerHTML.trimStart().replace(/^\s+/, '');
-      expect(textWithoutSpaces).toEqual(truncatedText);
+      expect(anchor.nativeElement.innerHTML).toEqual(text);
     }
   };
 
@@ -43,7 +35,6 @@ describe('BreadcrumbsComponent', () => {
         // NOTE: a root breadcrumb is automatically rendered
         new Breadcrumb('bc 1', 'example.com'),
         new Breadcrumb('bc 2', 'another.com'),
-        new Breadcrumb('breadcrumb to be truncated', 'truncated.com'),
       ]),
       showBreadcrumbs$: observableOf(true),
     } as BreadcrumbsService;
@@ -52,11 +43,8 @@ describe('BreadcrumbsComponent', () => {
       declarations: [
         BreadcrumbsComponent,
         VarDirective,
-        BreadcrumbTooltipPipe,
-        TruncateBreadcrumbItemCharactersPipe,
       ],
       imports: [
-        NgbTooltipModule,
         RouterTestingModule.withRoutes([]),
         TranslateModule.forRoot({
           loader: {
@@ -67,12 +55,10 @@ describe('BreadcrumbsComponent', () => {
       ],
       providers: [
         { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock },
-        { provide: TruncateBreadcrumbItemCharactersPipe, useClass: TruncateBreadcrumbItemCharactersPipe },
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BreadcrumbsComponent);
-    truncateTextPipe = TestBed.inject(TruncateBreadcrumbItemCharactersPipe);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));
@@ -81,35 +67,12 @@ describe('BreadcrumbsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render the breadcrumbs accordingly', () => {
+  it('should render the breadcrumbs', () => {
     const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
-    expect(breadcrumbs.length).toBe(4);
+    expect(breadcrumbs.length).toBe(3);
     expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
     expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
     expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
-    expectBreadcrumb(breadcrumbs[3].query(By.css('.text-truncate')), 'breadcrumb...', null);
-  });
-
-  it('should show tooltip only for truncated text', () => {
-    const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item .text-truncate'));
-    expect(breadcrumbs.length).toBe(4);
-
-    const truncatable = breadcrumbs[3];
-    truncatable.triggerEventHandler('mouseenter', null);
-    fixture.detectChanges();
-    let tooltip = truncatable.parent.query(By.css('div.tooltip-inner'));
-    expect(tooltip).not.toBeNull();
-    expect(tooltip.nativeElement.innerText).toBe('breadcrumb to be truncated');
-    truncatable.triggerEventHandler('mouseleave', null);
-    fixture.detectChanges();
-
-    const notTruncatable = breadcrumbs[2];
-    notTruncatable.triggerEventHandler('mouseenter', null);
-    fixture.detectChanges();
-    const tooltip2 = notTruncatable.parent.query(By.css('div.tooltip-inner'));
-    expect(tooltip2).toBeNull();
-    notTruncatable.triggerEventHandler('mouseleave', null);
-    fixture.detectChanges();
   });
 
 });

src/app/root.module.ts

@@ -42,10 +42,6 @@ import {
 import { FooterModule } from './footer/footer.module';
 import { SocialModule } from './social/social.module';
 import { ExploreModule } from './shared/explore/explore.module';
-import { BreadcrumbTooltipPipe } from './breadcrumbs/breadcrumb/breadcrumb-tooltip.pipe';
-import {
-  TruncateBreadcrumbItemCharactersPipe
-} from './breadcrumbs/breadcrumb/truncate-breadcrumb-item-characters.pipe';
 import { OpenaireModule } from './openaire/openaire.module';
 
 const IMPORTS = [
@@ -89,8 +85,6 @@ const DECLARATIONS = [
   ThemedPageErrorComponent,
   PageErrorComponent,
   ContextHelpToggleComponent,
-  TruncateBreadcrumbItemCharactersPipe,
-  BreadcrumbTooltipPipe
 ];
 
 const EXPORTS = [

src/config/app-config.interface.ts

@@ -68,7 +68,6 @@ interface AppConfig extends Config {
   attachmentRendering: AttachmentRenderingConfig;
   advancedAttachmentRendering: AdvancedAttachmentRenderingConfig;
   searchResult: SearchResultConfig;
-  breadcrumbCharLimit: number;
 }
 
 /**

src/config/default-app-config.ts

@@ -737,6 +737,4 @@ export class DefaultAppConfig implements AppConfig {
     additionalMetadataFields: [],
     authorMetadata: ['dc.contributor.author', 'dc.creator', 'dc.contributor.*'],
   };
-
-  breadcrumbCharLimit = 10;
 }

src/environments/environment.test.ts

@@ -553,6 +553,4 @@ export const environment: BuildConfig = {
     ],
     authorMetadata: ['dc.contributor.author', 'dc.contributor.editor', 'dc.contributor.contributor', 'dc.creator'],
   },
-
-  breadcrumbCharLimit: 10,
 };