Merged in task/main-cris/DSC-2318 (pull request DSpace#3121)

Task/main cris/DSC-2318

Approved-by: Giuseppe Digilio

Author: FrancescoMolinaro

src/app/shared/loading/loading.component.ts

@@ -22,7 +22,7 @@ import { AlertComponent } from '../alert/alert.component';
 import { AlertType } from '../alert/alert-type';
 import { hasValue } from '../empty.util';
 
-enum MessageType {
+export enum MessageType {
   LOADING = 'loading',
   WARNING = 'warning',
   ERROR = 'error'

src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html

@@ -1,38 +1,50 @@
-<div class="row flex-nowrap">
-  <div [class.mb-2]="(viewMode$ | async) === ViewMode.ListElement" class="info-skeleton col-12">
-    <ngx-skeleton-loader/>
+@if (showFallbackMessages) {
+  <ng-container *ngVar="(delayTimer$ | async) as timer">
+    @defer (when timer >= errorMessageDelay) {
+      <ds-alert [type]="AlertTypeEnum.Error" [content]="errorMessage"></ds-alert>
+    }
+    @defer (when timer >= warningMessageDelay && timer < errorMessageDelay) {
+      <label aria-live="polite">{{ warningMessage }}</label>
+    }
+  </ng-container>
+}
+
+@if (!showFallbackMessages || ((delayTimer$ | async) < errorMessageDelay)) {
+  <div class="row flex-nowrap">
+    <div [class.mb-2]="(viewMode$ | async) === ViewMode.ListElement" class="info-skeleton col-12">
+      <ngx-skeleton-loader/>
+    </div>
   </div>
-</div>
 
-@if((viewMode$ | async) === ViewMode.ListElement) {
-  @for (result of loadingResults; track result; let first = $first) {
+  @if((viewMode$ | async) === ViewMode.ListElement) {
+    @for (result of loadingResults; track result; let first = $first) {
       <div [class.my-4]="!first" class="row">
-      @if(showThumbnails) {
-        <div class="col-3 col-md-2">
-          <div class="thumbnail-skeleton position-relative">
+        @if(showThumbnails) {
+          <div class="col-3 col-md-2">
+            <div class="thumbnail-skeleton position-relative">
+              <ngx-skeleton-loader/>
+            </div>
+          </div>
+        }
+        <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-md-12]="!showThumbnails">
+          <div class="badge-skeleton">
             <ngx-skeleton-loader/>
           </div>
-        </div>
-      }
-      <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-md-12]="!showThumbnails">
-        <div class="badge-skeleton">
-          <ngx-skeleton-loader/>
-        </div>
-        <div class="text-skeleton">
-          <ngx-skeleton-loader [count]="textLineCount"/>
+          <div class="text-skeleton">
+            <ngx-skeleton-loader [count]="textLineCount"/>
+          </div>
         </div>
       </div>
+    }
+  } @else if ((viewMode$ | async) === ViewMode.GridElement) {
+    <div class="card-columns row">
+      @for (result of loadingResults; track result) {
+        <div class="card-column col col-sm-6 col-lg-4">
+          <div class="card-skeleton">
+            <ngx-skeleton-loader/>
+          </div>
+        </div>
+      }
     </div>
   }
-} @else if ((viewMode$ | async) === ViewMode.GridElement) {
-  <div class="card-columns row">
-    @for (result of loadingResults; track result) {
-      <div class="card-column col col-sm-6 col-lg-4">
-        <div class="card-skeleton">
-          <ngx-skeleton-loader/>
-        </div>
-      </div>
-    }
-
-  </div>
 }

src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts

@@ -1,11 +1,23 @@
 import {
   ComponentFixture,
+  fakeAsync,
   TestBed,
+  tick,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+import { APP_CONFIG } from '../../../../../config/app-config.interface';
+import { environment } from '../../../../../environments/environment';
 import { SearchService } from '../../../../core/shared/search/search.service';
+import { AlertComponent } from '../../../alert/alert.component';
+import { TranslateLoaderMock } from '../../../mocks/translate-loader.mock';
 import { SearchServiceStub } from '../../../testing/search-service.stub';
+import { VarDirective } from '../../../utils/var.directive';
 import { SearchResultsSkeletonComponent } from './search-results-skeleton.component';
 
 describe('SearchResultsSkeletonComponent', () => {
@@ -14,19 +26,57 @@ describe('SearchResultsSkeletonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SearchResultsSkeletonComponent, NgxSkeletonLoaderModule],
+      imports: [
+        SearchResultsSkeletonComponent,
+        AlertComponent,
+        NgxSkeletonLoaderModule,
+        VarDirective,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }),
+      ],
       providers: [
         { provide: SearchService, useValue: new SearchServiceStub() },
+        { provide: APP_CONFIG, useValue: environment },
       ],
+    }).overrideComponent(SearchResultsSkeletonComponent, {
+      remove: {
+        imports: [
+          AlertComponent,
+        ],
+      },
     })
       .compileComponents();
 
     fixture = TestBed.createComponent(SearchResultsSkeletonComponent);
     component = fixture.componentInstance;
+    component.warningMessage = 'test warning message';
+    component.errorMessage = 'test error message';
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display warning message', fakeAsync(() => {
+    component.warningMessageDelay = 0;
+    fixture.detectChanges();
+    tick(100);
+    fixture.detectChanges();
+    const label = fixture.debugElement.query(By.css('label')).nativeElement;
+    expect(label.textContent).toContain(component.warningMessage);
+  }));
+
+  it('should display error message', fakeAsync(() => {
+    component.errorMessageDelay = 0;
+    fixture.detectChanges();
+    tick(100);
+    fixture.detectChanges();
+    const alert = fixture.debugElement.query(By.css('ds-alert'));
+    expect(alert).toBeTruthy();
+  }));
 });

src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts

@@ -1,26 +1,36 @@
-import {
-  AsyncPipe,
-  NgForOf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
+  Inject,
   Input,
   OnInit,
 } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Observable } from 'rxjs';
+import {
+  interval,
+  Observable,
+} from 'rxjs';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../../../config/app-config.interface';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { AlertComponent } from '../../../alert/alert.component';
+import { AlertType } from '../../../alert/alert-type';
 import { hasValue } from '../../../empty.util';
+import { VarDirective } from '../../../utils/var.directive';
 
 @Component({
   selector: 'ds-search-results-skeleton',
   standalone: true,
   imports: [
     NgxSkeletonLoaderModule,
     AsyncPipe,
-    NgForOf,
+    AlertComponent,
+    VarDirective,
   ],
   templateUrl: './search-results-skeleton.component.html',
   styleUrl: './search-results-skeleton.component.scss',
@@ -44,6 +54,26 @@ export class SearchResultsSkeletonComponent implements OnInit {
    */
   @Input()
   textLineCount = 2;
+  /**
+   * Whether to show fallback messages after a certain loading time
+   */
+  @Input() showFallbackMessages: boolean;
+  /**
+   * The message text for a warning
+   */
+  @Input() warningMessage: string;
+  /**
+   * The amount of time to wait for the warning message to be visible
+   */
+  @Input() warningMessageDelay: number;
+  /**
+   * The message text for an error
+   */
+  @Input() errorMessage: string;
+  /**
+   * The amount of time to wait for the error message to be visible
+   */
+  @Input() errorMessageDelay: number;
   /**
    * The view mode of the search page
    */
@@ -53,10 +83,26 @@ export class SearchResultsSkeletonComponent implements OnInit {
    */
   public loadingResults: number[];
 
+  /**
+   * Timer for fallback messages visualization
+   */
+  delayTimer$: Observable<any>;
+
+
   protected readonly ViewMode = ViewMode;
 
-  constructor(private searchService: SearchService) {
+
+  readonly AlertTypeEnum = AlertType;
+
+  constructor(
+    private searchService: SearchService,
+    private translate: TranslateService,
+    @Inject(APP_CONFIG) private appConfig: AppConfig,
+  ) {
     this.viewMode$ = this.searchService.getViewMode();
+    this.showFallbackMessages = this.showFallbackMessages ?? this.appConfig.loader.showFallbackMessagesByDefault;
+    this.warningMessageDelay = this.warningMessageDelay ?? this.appConfig.loader.warningMessageDelay;
+    this.errorMessageDelay = this.errorMessageDelay ?? this.appConfig.loader.errorMessageDelay;
   }
 
   ngOnInit() {
@@ -66,5 +112,16 @@ export class SearchResultsSkeletonComponent implements OnInit {
       // this is needed as the default value of show thumbnails is true but set in lower levels of the DOM.
       this.showThumbnails = true;
     }
+
+    if (this.showFallbackMessages) {
+      this.setFallBackMessages();
+    }
+  }
+
+  setFallBackMessages(): void {
+    this.warningMessage = this.warningMessage || this.translate.instant('loading.warning');
+    this.errorMessage = this.errorMessage || this.translate.instant('loading.error');
+
+    this.delayTimer$ = interval(1);
   }
 }

src/app/shared/search/search-results/search-results.component.html

@@ -40,6 +40,7 @@ <h1 *ngIf="!disableHeader">{{ (configuration ? configuration + '.search.results.
 
 <ds-search-results-skeleton
   *ngIf="isLoading()"
+  [showFallbackMessages]="true"
   [showThumbnails]="showThumbnails"
   [numberOfResults]="searchConfig.pagination.pageSize"
 ></ds-search-results-skeleton>

src/app/shared/search/search-results/search-results.component.spec.ts

@@ -12,6 +12,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { APP_CONFIG } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment';
 import { Community } from '../../../core/shared/community.model';
 import { SearchService } from '../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
@@ -44,6 +46,7 @@ describe('SearchResultsComponent', () => {
           provide: SearchConfigurationService,
           useValue: new SearchConfigurationServiceStub(),
         },
+        { provide: APP_CONFIG, useValue: environment },
       ],
       imports: [
         TranslateModule.forRoot(),