From 17ecc592f3b43b4cb1f83655e735ff44340580b8 Mon Sep 17 00:00:00 2001 From: FrancescoMolinaro <152612515+FrancescoMolinaro@users.noreply.github.com> Date: Thu, 23 Jan 2025 17:07:15 +0100 Subject: [PATCH] Exclude search and browse from Angular SSR (#3709) * [DURACOM-303] prevent possibly long-lasting search and browse calls in SSR * [DURACOM-303] implement skeleton component for search results * [DURACOM-303] add skeleton loader for search results and filters * [DURACOM-303] minor restyle of skeleton for mobile * [DURACOM-303] fix lint and tests * [DURACOM-303] adapt tests * [DURACOM-303] restyle skeleton, add filter badge skeleton * [DURACOM-303] add loop for filters count * [DURACOM-303] add grid layout, make SSR enabling configurable, minor restyle of skeletons * [DURACOM-303] refactor param, add example of configuration * [DURACOM-303] rename variable, minor code refactor * [DURACOM-303] add override possibility with input * [DURACOM-303] fix SSR check on template and on components missing the environment config. Add descriptive comment for skeleton component. Fix JS error on SSR. * [DURACOM-303] refactor thumbnail's skeleton style --- config/config.example.yml | 14 ++++ package-lock.json | 14 ++++ package.json | 1 + .../browse-by-date.component.spec.ts | 34 +++++++++ .../browse-by-date.component.ts | 11 ++- .../browse-by-metadata.component.html | 2 +- .../browse-by-metadata.component.spec.ts | 37 +++++++++- .../browse-by-metadata.component.ts | 20 +++++- .../browse-by-title.component.spec.ts | 35 ++++++++++ .../browse-by-title.component.ts | 11 ++- .../configuration-search-page.component.ts | 4 +- .../search-filter/search-filter.component.ts | 30 ++++++-- .../search-filters.component.html | 34 ++++++--- .../search-filters.component.scss | 12 +++- .../search-filters.component.spec.ts | 3 + .../search-filters.component.ts | 28 ++++++-- .../search-results-skeleton.component.html | 38 ++++++++++ .../search-results-skeleton.component.scss | 56 +++++++++++++++ .../search-results-skeleton.component.spec.ts | 32 +++++++++ .../search-results-skeleton.component.ts | 70 +++++++++++++++++++ .../search-results.component.html | 20 +++++- .../search-results.component.scss | 17 +++++ .../search-results.component.spec.ts | 15 +++- .../search-results.component.ts | 38 ++++++++-- .../shared/search/search.component.spec.ts | 31 ++++++++ src/app/shared/search/search.component.ts | 18 +++++ .../search-configuration-service.stub.ts | 4 ++ src/config/default-app-config.ts | 1 + src/config/search-page-config.interface.ts | 8 ++- src/config/ssr-config.interface.ts | 10 +++ src/environments/environment.production.ts | 2 + src/environments/environment.test.ts | 2 + src/environments/environment.ts | 2 + src/styles/_custom_variables.scss | 12 ++++ .../search-filters.component.ts | 10 +-- .../search-results.component.ts | 12 ++-- src/themes/custom/lazy-theme.module.ts | 3 + .../styles/_theme_css_variable_overrides.scss | 1 + 38 files changed, 641 insertions(+), 51 deletions(-) create mode 100644 src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html create mode 100644 src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss create mode 100644 src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts create mode 100644 src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts create mode 100644 src/app/shared/search/search-results/search-results.component.scss diff --git a/config/config.example.yml b/config/config.example.yml index 3ae2c51caec..099bea2614c 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -25,6 +25,14 @@ ssr: inlineCriticalCss: false # Path prefixes to enable SSR for. By default these are limited to paths of primary DSpace objects. paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/' ] + # Whether to enable rendering of Search component on SSR. + # If set to true the component will be included in the HTML returned from the server side rendering. + # If set to false the component will not be included in the HTML returned from the server side rendering. + enableSearchComponent: false, + # Whether to enable rendering of Browse component on SSR. + # If set to true the component will be included in the HTML returned from the server side rendering. + # If set to false the component will not be included in the HTML returned from the server side rendering. + enableBrowseComponent: false, # The REST API server settings # NOTE: these settings define which (publicly available) REST API to use. They are usually @@ -450,6 +458,12 @@ search: enabled: false # List of filters to enable in "Advanced Search" dropdown filter: [ 'title', 'author', 'subject', 'entityType' ] + # + # Number used to render n UI elements called loading skeletons that act as placeholders. + # These elements indicate that some content will be loaded in their stead. + # Since we don't know how many filters will be loaded before we receive a response from the server we use this parameter for the skeletons count. + # e.g. If we set 5 then 5 loading skeletons will be visualized before the actual filters are retrieved. + defaultFiltersCount: 5 # Notify metrics diff --git a/package-lock.json b/package-lock.json index 904bcc5c740..48ef9fa63b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,6 +67,7 @@ "ng2-nouislider": "^2.0.0", "ngx-infinite-scroll": "^16.0.0", "ngx-pagination": "6.0.3", + "ngx-skeleton-loader": "^9.0.0", "ngx-ui-switch": "^14.1.0", "nouislider": "^15.7.1", "orejime": "^2.3.1", @@ -16941,6 +16942,19 @@ "@angular/core": ">=13.0.0" } }, + "node_modules/ngx-skeleton-loader": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/ngx-skeleton-loader/-/ngx-skeleton-loader-9.0.0.tgz", + "integrity": "sha512-aO4/V6oGdZGNcTjasTg/fwzJJYl/ZmNKgCukOEQdUK3GSFOZtB/3GGULMJuZ939hk3Hzqh1OBiLfIM1SqTfhqg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0" + } + }, "node_modules/ngx-ui-switch": { "version": "14.1.0", "resolved": "https://registry.npmjs.org/ngx-ui-switch/-/ngx-ui-switch-14.1.0.tgz", diff --git a/package.json b/package.json index 482a400bcbf..e56780a76d6 100644 --- a/package.json +++ b/package.json @@ -154,6 +154,7 @@ "ng2-nouislider": "^2.0.0", "ngx-infinite-scroll": "^16.0.0", "ngx-pagination": "6.0.3", + "ngx-skeleton-loader": "^9.0.0", "ngx-ui-switch": "^14.1.0", "nouislider": "^15.7.1", "orejime": "^2.3.1", diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts index edd7cd951a4..fad573705c5 100644 --- a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts +++ b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts @@ -2,10 +2,13 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectorRef, NO_ERRORS_SCHEMA, + PLATFORM_ID, } from '@angular/core'; import { ComponentFixture, + fakeAsync, TestBed, + tick, waitForAsync, } from '@angular/core/testing'; import { @@ -26,6 +29,7 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search- import { SortDirection } from '../../core/cache/models/sort-options.model'; import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service'; import { PaginationService } from '../../core/pagination/pagination.service'; +import { BrowseEntry } from '../../core/shared/browse-entry.model'; import { Community } from '../../core/shared/community.model'; import { Item } from '../../core/shared/item.model'; import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component'; @@ -123,6 +127,7 @@ describe('BrowseByDateComponent', () => { { provide: ChangeDetectorRef, useValue: mockCdRef }, { provide: Store, useValue: {} }, { provide: APP_CONFIG, useValue: environment }, + { provide: PLATFORM_ID, useValue: 'browser' }, ], schemas: [NO_ERRORS_SCHEMA], }) @@ -172,4 +177,33 @@ describe('BrowseByDateComponent', () => { //expect(comp.startsWithOptions[0]).toEqual(new Date().getUTCFullYear()); expect(comp.startsWithOptions[0]).toEqual(1960); }); + + describe('when rendered in SSR', () => { + beforeEach(() => { + comp.platformId = 'server'; + spyOn((comp as any).browseService, 'getBrowseItemsFor'); + }); + + it('should not call getBrowseItemsFor on init', (done) => { + comp.ngOnInit(); + expect((comp as any).browseService.getBrowseItemsFor).not.toHaveBeenCalled(); + comp.loading$.subscribe((res) => { + expect(res).toBeFalsy(); + done(); + }); + }); + }); + + describe('when rendered in CSR', () => { + beforeEach(() => { + comp.platformId = 'browser'; + spyOn((comp as any).browseService, 'getBrowseItemsFor').and.returnValue(createSuccessfulRemoteDataObject$(new BrowseEntry())); + }); + + it('should call getBrowseItemsFor on init', fakeAsync(() => { + comp.ngOnInit(); + tick(100); + expect((comp as any).browseService.getBrowseItemsFor).toHaveBeenCalled(); + })); + }); }); diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts index 11818ff5f15..5c14f2109c7 100644 --- a/src/app/browse-by/browse-by-date/browse-by-date.component.ts +++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts @@ -1,5 +1,6 @@ import { AsyncPipe, + isPlatformServer, NgIf, } from '@angular/common'; import { @@ -7,6 +8,7 @@ import { Component, Inject, OnInit, + PLATFORM_ID, } from '@angular/core'; import { ActivatedRoute, @@ -17,6 +19,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { combineLatest as observableCombineLatest, Observable, + of as observableOf, } from 'rxjs'; import { map, @@ -28,6 +31,7 @@ import { APP_CONFIG, AppConfig, } from '../../../config/app-config.interface'; +import { environment } from '../../../environments/environment'; import { DSONameService } from '../../core/breadcrumbs/dso-name.service'; import { BrowseService } from '../../core/browse/browse.service'; import { @@ -99,11 +103,16 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements @Inject(APP_CONFIG) public appConfig: AppConfig, public dsoNameService: DSONameService, protected cdRef: ChangeDetectorRef, + @Inject(PLATFORM_ID) public platformId: any, ) { - super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService); + super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService, platformId); } ngOnInit(): void { + if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) { + this.loading$ = observableOf(false); + return; + } const sortConfig = new SortOptions('default', SortDirection.ASC); this.startsWithType = StartsWithType.date; this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig); diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html index 22e564ac27c..6642b724bb9 100644 --- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html +++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html @@ -1,4 +1,4 @@ -
+
{{filterLabel+'.filters.head' | translate}} -

{{filterLabel+'.filters.head' | translate}}

-
-
- -
-
- +@if (inPlaceSearch) { +

{{filterLabel+'.filters.head' | translate}}

+} @else { +

{{filterLabel+'.filters.head' | translate}}

+} + +@if ((filters | async)?.hasSucceeded) { +
+ @for (filter of (filters | async)?.payload; track filter.name) { + + } +
+} + +@if(filtersWithComputedVisibility !== (filters | async)?.payload?.length) { + +} + +@if (inPlaceSearch) { + +} + diff --git a/src/app/shared/search/search-filters/search-filters.component.scss b/src/app/shared/search/search-filters/search-filters.component.scss index b5b2816e891..6170b9281c6 100644 --- a/src/app/shared/search/search-filters/search-filters.component.scss +++ b/src/app/shared/search/search-filters/search-filters.component.scss @@ -1,2 +1,12 @@ @import '../../../../styles/variables'; -@import '../../../../styles/mixins'; \ No newline at end of file +@import '../../../../styles/mixins'; + +:host ::ng-deep { + ngx-skeleton-loader .skeleton-loader { + height: var(--ds-filters-skeleton-height); + margin-bottom: var(--ds-filters-skeleton-spacing); + padding: var(--ds-filters-skeleton-spacing); + background-color: var(--bs-light); + box-shadow: none; + } +} diff --git a/src/app/shared/search/search-filters/search-filters.component.spec.ts b/src/app/shared/search/search-filters/search-filters.component.spec.ts index 0277551eea1..878b3a5f7ec 100644 --- a/src/app/shared/search/search-filters/search-filters.component.spec.ts +++ b/src/app/shared/search/search-filters/search-filters.component.spec.ts @@ -11,6 +11,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; +import { APP_CONFIG } from '../../../../config/app-config.interface'; +import { environment } from '../../../../environments/environment'; import { SearchService } from '../../../core/shared/search/search.service'; import { SearchFilterService } from '../../../core/shared/search/search-filter.service'; import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service'; @@ -41,6 +43,7 @@ describe('SearchFiltersComponent', () => { { provide: SearchService, useValue: searchService }, { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() }, { provide: SearchFilterService, useValue: searchFilters }, + { provide: APP_CONFIG, useValue: environment }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).overrideComponent(SearchFiltersComponent, { diff --git a/src/app/shared/search/search-filters/search-filters.component.ts b/src/app/shared/search/search-filters/search-filters.component.ts index 97358ea8e9b..dad3bffb75d 100644 --- a/src/app/shared/search/search-filters/search-filters.component.ts +++ b/src/app/shared/search/search-filters/search-filters.component.ts @@ -1,8 +1,4 @@ -import { - AsyncPipe, - NgFor, - NgIf, -} from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { Component, Inject, @@ -14,19 +10,23 @@ import { RouterLink, } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { BehaviorSubject, Observable, } from 'rxjs'; import { map } from 'rxjs/operators'; +import { + APP_CONFIG, + AppConfig, +} from '../../../../config/app-config.interface'; import { RemoteData } from '../../../core/data/remote-data'; import { SearchService } from '../../../core/shared/search/search.service'; import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service'; import { SearchFilterService } from '../../../core/shared/search/search-filter.service'; import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service'; import { currentPath } from '../../utils/route.utils'; -import { AdvancedSearchComponent } from '../advanced-search/advanced-search.component'; import { AppliedFilter } from '../models/applied-filter.model'; import { SearchFilterConfig } from '../models/search-filter-config.model'; import { SearchFilterComponent } from './search-filter/search-filter.component'; @@ -36,7 +36,7 @@ import { SearchFilterComponent } from './search-filter/search-filter.component'; styleUrls: ['./search-filters.component.scss'], templateUrl: './search-filters.component.html', standalone: true, - imports: [NgIf, NgFor, SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, AdvancedSearchComponent], + imports: [SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, NgxSkeletonLoaderModule], }) /** @@ -81,15 +81,23 @@ export class SearchFiltersComponent implements OnInit { */ searchLink: string; + /** + * Filters for which visibility has been computed + */ + filtersWithComputedVisibility = 0; + subs = []; filterLabel = 'search'; + defaultFilterCount: number; constructor( protected searchService: SearchService, protected searchFilterService: SearchFilterService, protected router: Router, @Inject(SEARCH_CONFIG_SERVICE) protected searchConfigService: SearchConfigurationService, + @Inject(APP_CONFIG) protected appConfig: AppConfig, ) { + this.defaultFilterCount = this.appConfig.search.filterPlaceholdersCount ?? 5; } ngOnInit(): void { @@ -125,4 +133,10 @@ export class SearchFiltersComponent implements OnInit { this.searchFilterService.minimizeAll(); } } + + countFiltersWithComputedVisibility(computed: boolean) { + if (computed) { + this.filtersWithComputedVisibility += 1; + } + } } diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html new file mode 100644 index 00000000000..a42bda06748 --- /dev/null +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html @@ -0,0 +1,38 @@ +
+
+ +
+
+ +@if((viewMode$ | async) === ViewMode.ListElement) { + @for (result of loadingResults; track result; let first = $first) { +
+ @if(showThumbnails) { +
+
+ +
+
+ } +
+
+ +
+
+ +
+
+
+ } +} @else if ((viewMode$ | async) === ViewMode.GridElement) { +
+ @for (result of loadingResults; track result) { +
+
+ +
+
+ } + +
+} diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss new file mode 100644 index 00000000000..9345f1ab43b --- /dev/null +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss @@ -0,0 +1,56 @@ +:host ::ng-deep { + --ds-wrapper-grid-spacing: calc(var(--bs-spacer) / 2); + + .info-skeleton, .badge-skeleton, .text-skeleton{ + ngx-skeleton-loader .skeleton-loader { + height: var(--ds-search-skeleton-text-height); + } + } + + .badge-skeleton, .info-skeleton { + ngx-skeleton-loader .skeleton-loader { + width: var(--ds-search-skeleton-badge-width); + } + } + + .info-skeleton { + ngx-skeleton-loader .skeleton-loader { + width: var(--ds-search-skeleton-info-width); + } + } + + .thumbnail-skeleton { + max-width: var(--ds-thumbnail-max-width); + height: 100%; + + ngx-skeleton-loader .skeleton-loader { + margin-right: var(--ds-search-skeleton-thumbnail-margin); + border-radius: 0; + height: 100%; + } + } + + .card-skeleton { + ngx-skeleton-loader .skeleton-loader { + height: var(--ds-search-skeleton-card-height); + } + } + + ngx-skeleton-loader .skeleton-loader { + background-color: var(--bs-light); + box-shadow: none; + } + + .card-columns { + margin-left: calc(-1 * var(--ds-wrapper-grid-spacing)); + margin-right: calc(-1 * var(--ds-wrapper-grid-spacing)); + column-gap: 0; + + .card-column { + padding-left: var(--ds-wrapper-grid-spacing); + padding-right: var(--ds-wrapper-grid-spacing); + } + } +} + + diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts new file mode 100644 index 00000000000..68c8db5a8eb --- /dev/null +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts @@ -0,0 +1,32 @@ +import { + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; + +import { SearchService } from '../../../../core/shared/search/search.service'; +import { SearchServiceStub } from '../../../testing/search-service.stub'; +import { SearchResultsSkeletonComponent } from './search-results-skeleton.component'; + +describe('SearchResultsSkeletonComponent', () => { + let component: SearchResultsSkeletonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SearchResultsSkeletonComponent, NgxSkeletonLoaderModule], + providers: [ + { provide: SearchService, useValue: new SearchServiceStub() }, + ], + }) + .compileComponents(); + + fixture = TestBed.createComponent(SearchResultsSkeletonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts new file mode 100644 index 00000000000..3fba70b119e --- /dev/null +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts @@ -0,0 +1,70 @@ +import { + AsyncPipe, + NgForOf, +} from '@angular/common'; +import { + Component, + Input, + OnInit, +} from '@angular/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; +import { Observable } from 'rxjs'; + +import { SearchService } from '../../../../core/shared/search/search.service'; +import { ViewMode } from '../../../../core/shared/view-mode.model'; +import { hasValue } from '../../../empty.util'; + +@Component({ + selector: 'ds-search-results-skeleton', + standalone: true, + imports: [ + NgxSkeletonLoaderModule, + AsyncPipe, + NgForOf, + ], + templateUrl: './search-results-skeleton.component.html', + styleUrl: './search-results-skeleton.component.scss', +}) +/** + * Component to show placeholders for search results while loading, to give a loading feedback to the user without layout shifting. + */ +export class SearchResultsSkeletonComponent implements OnInit { + /** + * Whether the search result contains thumbnail + */ + @Input() + showThumbnails: boolean; + /** + * The number of search result loaded in the current page + */ + @Input() + numberOfResults = 0; + /** + * How many placeholder are displayed for the search result text + */ + @Input() + textLineCount = 2; + /** + * The view mode of the search page + */ + public viewMode$: Observable; + /** + * Array built from numberOfResults to count and iterate based on index + */ + public loadingResults: number[]; + + protected readonly ViewMode = ViewMode; + + constructor(private searchService: SearchService) { + this.viewMode$ = this.searchService.getViewMode(); + } + + ngOnInit() { + this.loadingResults = Array.from({ length: this.numberOfResults }, (_, i) => i + 1); + + if (!hasValue(this.showThumbnails)) { + // this is needed as the default value of show thumbnails is true but set in lower levels of the DOM. + this.showThumbnails = true; + } + } +} diff --git a/src/app/shared/search/search-results/search-results.component.html b/src/app/shared/search/search-results/search-results.component.html index 871b2b2ca8b..d56d69761b6 100644 --- a/src/app/shared/search/search-results/search-results.component.html +++ b/src/app/shared/search/search-results/search-results.component.html @@ -1,3 +1,15 @@ +@if ((activeFilters$ | async).length > 0 && (appliedFilters$ | async).length === 0) { +
+
+
+
+ +
+
+
+
+} +

{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}

@@ -19,7 +31,13 @@

{{ (configuration ? configuration + '.search.results. (selectObject)="selectObject.emit($event)">

- + + +
diff --git a/src/app/shared/search/search-results/search-results.component.scss b/src/app/shared/search/search-results/search-results.component.scss new file mode 100644 index 00000000000..6e369c729bc --- /dev/null +++ b/src/app/shared/search/search-results/search-results.component.scss @@ -0,0 +1,17 @@ +:host ::ng-deep { + .filter-badge-skeleton { + ngx-skeleton-loader .skeleton-loader { + background-color: var(--bs-light); + box-shadow: none; + width: var(--ds-search-skeleton-filter-badge-width); + height: var(--ds-search-skeleton-badge-height); + margin-bottom: 0; + margin-right: calc(var(--bs-spacer) / 4); + } + } + + .filters-badge-skeleton-container { + display: flex; + max-height: var(--ds-search-skeleton-badge-height); + } +} diff --git a/src/app/shared/search/search-results/search-results.component.spec.ts b/src/app/shared/search/search-results/search-results.component.spec.ts index fedea57e07c..33b8432b749 100644 --- a/src/app/shared/search/search-results/search-results.component.spec.ts +++ b/src/app/shared/search/search-results/search-results.component.spec.ts @@ -13,16 +13,20 @@ import { ActivatedRoute } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { Community } from '../../../core/shared/community.model'; +import { SearchService } from '../../../core/shared/search/search.service'; +import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service'; import { ErrorComponent } from '../../error/error.component'; -import { ThemedLoadingComponent } from '../../loading/themed-loading.component'; import { getMockThemeService } from '../../mocks/theme-service.mock'; import { ObjectCollectionComponent } from '../../object-collection/object-collection.component'; import { createFailedRemoteDataObject } from '../../remote-data.utils'; import { ActivatedRouteStub } from '../../testing/active-router.stub'; import { QueryParamsDirectiveStub } from '../../testing/query-params-directive.stub'; +import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub'; +import { SearchServiceStub } from '../../testing/search-service.stub'; import { ThemeService } from '../../theme-support/theme.service'; import { SearchExportCsvComponent } from '../search-export-csv/search-export-csv.component'; import { SearchResultsComponent } from './search-results.component'; +import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component'; describe('SearchResultsComponent', () => { let comp: SearchResultsComponent; @@ -35,6 +39,11 @@ describe('SearchResultsComponent', () => { providers: [ { provide: ActivatedRoute, useValue: new ActivatedRouteStub() }, { provide: ThemeService, useValue: getMockThemeService() }, + { provide: SearchService, useValue: new SearchServiceStub() }, + { + provide: SearchConfigurationService, + useValue: new SearchConfigurationServiceStub(), + }, ], imports: [ TranslateModule.forRoot(), @@ -48,8 +57,8 @@ describe('SearchResultsComponent', () => { imports: [ SearchExportCsvComponent, ObjectCollectionComponent, - ThemedLoadingComponent, ErrorComponent, + SearchResultsSkeletonComponent, ], }, add: { imports: [QueryParamsDirectiveStub] }, @@ -96,7 +105,7 @@ describe('SearchResultsComponent', () => { it('should display link with new search where query is quoted if search return a error 400', () => { (comp as any).searchResults = createFailedRemoteDataObject('Error', 400); - (comp as any).searchConfig = { query: 'foobar' }; + (comp as any).searchConfig = { query: 'foobar', pagination: { pageSize: 10 } }; fixture.detectChanges(); const linkDes = fixture.debugElement.queryAll(By.directive(QueryParamsDirectiveStub)); diff --git a/src/app/shared/search/search-results/search-results.component.ts b/src/app/shared/search/search-results/search-results.component.ts index 09186e8c6cd..f9da77ed753 100644 --- a/src/app/shared/search/search-results/search-results.component.ts +++ b/src/app/shared/search/search-results/search-results.component.ts @@ -1,4 +1,7 @@ -import { NgIf } from '@angular/common'; +import { + AsyncPipe, + NgIf, +} from '@angular/common'; import { Component, EventEmitter, @@ -7,12 +10,19 @@ import { } from '@angular/core'; import { RouterLink } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; +import { + BehaviorSubject, + Observable, +} from 'rxjs'; import { SortOptions } from '../../../core/cache/models/sort-options.model'; import { PaginatedList } from '../../../core/data/paginated-list.model'; import { RemoteData } from '../../../core/data/remote-data'; import { Context } from '../../../core/shared/context.model'; import { DSpaceObject } from '../../../core/shared/dspace-object.model'; +import { SearchService } from '../../../core/shared/search/search.service'; +import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service'; import { ViewMode } from '../../../core/shared/view-mode.model'; import { fadeIn, @@ -23,13 +33,15 @@ import { isNotEmpty, } from '../../empty.util'; import { ErrorComponent } from '../../error/error.component'; -import { ThemedLoadingComponent } from '../../loading/themed-loading.component'; import { CollectionElementLinkType } from '../../object-collection/collection-element-link.type'; import { ObjectCollectionComponent } from '../../object-collection/object-collection.component'; import { ListableObject } from '../../object-collection/shared/listable-object.model'; +import { AppliedFilter } from '../models/applied-filter.model'; import { PaginatedSearchOptions } from '../models/paginated-search-options.model'; +import { SearchFilter } from '../models/search-filter.model'; import { SearchResult } from '../models/search-result.model'; import { SearchExportCsvComponent } from '../search-export-csv/search-export-csv.component'; +import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component'; export interface SelectionConfig { repeatable: boolean; @@ -39,12 +51,13 @@ export interface SelectionConfig { @Component({ selector: 'ds-base-search-results', templateUrl: './search-results.component.html', + styleUrls: ['./search-results.component.scss'], animations: [ fadeIn, fadeInOut, ], standalone: true, - imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ThemedLoadingComponent, ErrorComponent, RouterLink, TranslateModule], + imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ErrorComponent, RouterLink, TranslateModule, SearchResultsSkeletonComponent, AsyncPipe, NgxSkeletonLoaderModule], }) /** @@ -52,6 +65,15 @@ export interface SelectionConfig { */ export class SearchResultsComponent { hasNoValue = hasNoValue; + /** + * Currently active filters in url + */ + activeFilters$: Observable; + + /** + * Filter applied to show labels, once populated the activeFilters$ will be loaded + */ + appliedFilters$: BehaviorSubject; /** * The link type of the listed search results @@ -125,10 +147,18 @@ export class SearchResultsComponent { @Output() selectObject: EventEmitter = new EventEmitter(); + constructor( + protected searchConfigService: SearchConfigurationService, + protected searchService: SearchService, + ) { + this.activeFilters$ = this.searchConfigService.getCurrentFilters(); + this.appliedFilters$ = this.searchService.appliedFilters$; + } + /** * Check if search results are loading */ - isLoading() { + isLoading(): boolean { return !this.showError() && (hasNoValue(this.searchResults) || hasNoValue(this.searchResults.payload) || this.searchResults.isLoading); } diff --git a/src/app/shared/search/search.component.spec.ts b/src/app/shared/search/search.component.spec.ts index 31c8a6e9b8e..8b533b4105c 100644 --- a/src/app/shared/search/search.component.spec.ts +++ b/src/app/shared/search/search.component.spec.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA, + PLATFORM_ID, } from '@angular/core'; import { ComponentFixture, @@ -246,6 +247,7 @@ export function configureSearchComponentTestingModule(compType, additionalDeclar }, { provide: APP_DATA_SERVICES_MAP, useValue: {} }, { provide: APP_CONFIG, useValue: environment }, + { provide: PLATFORM_ID, useValue: 'browser' }, ], schemas: [NO_ERRORS_SCHEMA], }).overrideComponent(compType, { @@ -415,5 +417,34 @@ describe('SearchComponent', () => { expect(result).toBeNull(); }); }); + + describe('when rendered in SSR', () => { + beforeEach(() => { + comp.platformId = 'server'; + }); + + it('should not call search method on init', (done) => { + comp.ngOnInit(); + //Check that the first method from which the search depend upon is not being called + expect(searchConfigurationServiceStub.getCurrentConfiguration).not.toHaveBeenCalled(); + comp.initialized$.subscribe((res) => { + expect(res).toBeTruthy(); + done(); + }); + }); + }); + + describe('when rendered in CSR', () => { + beforeEach(() => { + comp.platformId = 'browser'; + }); + + it('should call search method on init', fakeAsync(() => { + comp.ngOnInit(); + tick(100); + //Check that the last method from which the search depend upon is being called + expect(searchServiceStub.search).toHaveBeenCalled(); + })); + }); }); }); diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index 337cb67171e..45c7eb6f7e0 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -1,5 +1,6 @@ import { AsyncPipe, + isPlatformServer, NgIf, NgTemplateOutlet, } from '@angular/common'; @@ -12,6 +13,7 @@ import { OnDestroy, OnInit, Output, + PLATFORM_ID, } from '@angular/core'; import { NavigationStart, @@ -37,6 +39,7 @@ import { APP_CONFIG, AppConfig, } from '../../../config/app-config.interface'; +import { environment } from '../../../environments/environment'; import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths'; import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths'; import { SortOptions } from '../../core/cache/models/sort-options.model'; @@ -236,6 +239,11 @@ export class SearchComponent implements OnDestroy, OnInit { */ @Input() hideScopeInUrl: boolean; + /** + * Defines whether to fetch search results during SSR execution + */ + @Input() renderOnServerSide: boolean; + /** * The current configuration used during the search */ @@ -251,6 +259,7 @@ export class SearchComponent implements OnDestroy, OnInit { */ currentScope$: Observable; + /** * The current sort options used */ @@ -345,6 +354,7 @@ export class SearchComponent implements OnDestroy, OnInit { protected routeService: RouteService, protected router: Router, @Inject(APP_CONFIG) protected appConfig: AppConfig, + @Inject(PLATFORM_ID) public platformId: any, ) { this.isXsOrSm$ = this.windowService.isXsOrSm(); } @@ -357,6 +367,14 @@ export class SearchComponent implements OnDestroy, OnInit { * If something changes, update the list of scopes for the dropdown */ ngOnInit(): void { + if (!this.renderOnServerSide && !environment.ssr.enableSearchComponent && isPlatformServer(this.platformId)) { + this.subs.push(this.getSearchOptions().pipe(distinctUntilChanged()).subscribe((options) => { + this.searchOptions$.next(options); + })); + this.initialized$.next(true); + return; + } + if (this.useUniquePageId) { // Create an unique pagination id related to the instance of the SearchComponent this.paginationId = uniqueId(this.paginationId); diff --git a/src/app/shared/testing/search-configuration-service.stub.ts b/src/app/shared/testing/search-configuration-service.stub.ts index c567808e873..426dc72930a 100644 --- a/src/app/shared/testing/search-configuration-service.stub.ts +++ b/src/app/shared/testing/search-configuration-service.stub.ts @@ -26,6 +26,10 @@ export class SearchConfigurationServiceStub { return observableOf([]); } + getCurrentFilters() { + return observableOf([]); + } + getCurrentScope(a) { return observableOf('test-id'); } diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts index 3455ef5f92a..3c5e0ef0dac 100644 --- a/src/config/default-app-config.ts +++ b/src/config/default-app-config.ts @@ -516,6 +516,7 @@ export class DefaultAppConfig implements AppConfig { enabled: false, filter: ['title', 'author', 'subject', 'entityType'], }, + filterPlaceholdersCount: 5, }; notifyMetrics: AdminNotifyMetricsRow[] = [ diff --git a/src/config/search-page-config.interface.ts b/src/config/search-page-config.interface.ts index 699e3fd61f8..55733c98e4d 100644 --- a/src/config/search-page-config.interface.ts +++ b/src/config/search-page-config.interface.ts @@ -8,5 +8,11 @@ export interface SearchConfig extends Config { * Used by {@link UploadBitstreamComponent}. */ advancedFilters: AdvancedSearchConfig; - + /** + * Number used to render n UI elements called loading skeletons that act as placeholders. + * These elements indicate that some content will be loaded in their stead. + * Since we don't know how many filters will be loaded before we receive a response from the server we use this parameter for the skeletons count. + * For instance if we set 5 then 5 loading skeletons will be visualized before the actual filters are retrieved. + */ + filterPlaceholdersCount?: number; } diff --git a/src/config/ssr-config.interface.ts b/src/config/ssr-config.interface.ts index 1a01e4d1257..4def73962a3 100644 --- a/src/config/ssr-config.interface.ts +++ b/src/config/ssr-config.interface.ts @@ -25,4 +25,14 @@ export interface SSRConfig extends Config { * Paths to enable SSR for. Defaults to the home page and paths in the sitemap. */ paths: Array; + + /** + * Whether to enable rendering of search component on SSR + */ + enableSearchComponent: boolean; + + /** + * Whether to enable rendering of browse component on SSR + */ + enableBrowseComponent: boolean; } diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts index 35b0d394083..8159fff2eab 100644 --- a/src/environments/environment.production.ts +++ b/src/environments/environment.production.ts @@ -9,5 +9,7 @@ export const environment: Partial = { enablePerformanceProfiler: false, inlineCriticalCss: false, paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/' ], + enableSearchComponent: false, + enableBrowseComponent: false, }, }; diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts index 84229aa6591..17d4e8ed104 100644 --- a/src/environments/environment.test.ts +++ b/src/environments/environment.test.ts @@ -13,6 +13,8 @@ export const environment: BuildConfig = { enablePerformanceProfiler: false, inlineCriticalCss: false, paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/' ], + enableSearchComponent: false, + enableBrowseComponent: false, }, // Angular express server settings. diff --git a/src/environments/environment.ts b/src/environments/environment.ts index a02ef4a2a96..4ac586d8992 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -14,6 +14,8 @@ export const environment: Partial = { enablePerformanceProfiler: false, inlineCriticalCss: false, paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/' ], + enableSearchComponent: false, + enableBrowseComponent: false, }, }; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 6bddfd58e94..6bd2bef3788 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -150,4 +150,16 @@ --green1: #1c710a; // This variable represents the success color for the Orejime cookie banner --button-text-color-cookie: #fff; // This variable represents the text color for buttons in the Orejime cookie banner + + --ds-search-skeleton-text-height: 20px; + --ds-search-skeleton-badge-height: 18px; + --ds-search-skeleton-thumbnail-margin: 1em; + --ds-search-skeleton-text-line-count: 2; + --ds-search-skeleton-badge-width: 75px; + --ds-search-skeleton-filter-badge-width: 200px; + --ds-search-skeleton-info-width: 200px; + --ds-search-skeleton-card-height: 435px; + + --ds-filters-skeleton-height: 40px; + --ds-filters-skeleton-spacing: 12px; } diff --git a/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts b/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts index 5b10c841453..3e86e16c018 100644 --- a/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts +++ b/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts @@ -5,18 +5,14 @@ * * https://www.atmire.com/software-license/ */ -import { - AsyncPipe, - NgFor, - NgIf, -} from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { Component } from '@angular/core'; import { RouterLink } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { SearchConfigurationService } from '../../../../../../app/core/shared/search/search-configuration.service'; import { SEARCH_CONFIG_SERVICE } from '../../../../../../app/my-dspace-page/my-dspace-configuration.service'; -import { AdvancedSearchComponent } from '../../../../../../app/shared/search/advanced-search/advanced-search.component'; import { SearchFilterComponent } from '../../../../../../app/shared/search/search-filters/search-filter/search-filter.component'; import { SearchFiltersComponent as BaseComponent } from '../../../../../../app/shared/search/search-filters/search-filters.component'; @@ -34,7 +30,7 @@ import { SearchFiltersComponent as BaseComponent } from '../../../../../../app/s }, ], standalone: true, - imports: [NgIf, NgFor, SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, AdvancedSearchComponent], + imports: [SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, NgxSkeletonLoaderModule], }) export class SearchFiltersComponent extends BaseComponent { diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.ts b/src/themes/custom/app/shared/search/search-results/search-results.component.ts index b72297f32f6..e2c44277448 100644 --- a/src/themes/custom/app/shared/search/search-results/search-results.component.ts +++ b/src/themes/custom/app/shared/search/search-results/search-results.component.ts @@ -1,29 +1,33 @@ -import { NgIf } from '@angular/common'; +import { + AsyncPipe, + NgIf, +} from '@angular/common'; import { Component } from '@angular/core'; import { RouterLink } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { fadeIn, fadeInOut, } from '../../../../../../app/shared/animations/fade'; import { ErrorComponent } from '../../../../../../app/shared/error/error.component'; -import { ThemedLoadingComponent } from '../../../../../../app/shared/loading/themed-loading.component'; import { ObjectCollectionComponent } from '../../../../../../app/shared/object-collection/object-collection.component'; import { SearchExportCsvComponent } from '../../../../../../app/shared/search/search-export-csv/search-export-csv.component'; import { SearchResultsComponent as BaseComponent } from '../../../../../../app/shared/search/search-results/search-results.component'; +import { SearchResultsSkeletonComponent } from '../../../../../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component'; @Component({ selector: 'ds-themed-search-results', // templateUrl: './search-results.component.html', templateUrl: '../../../../../../app/shared/search/search-results/search-results.component.html', - // styleUrls: ['./search-results.component.scss'], + styleUrls: ['../../../../../../app/shared/search/search-results/search-results.component.scss'], animations: [ fadeIn, fadeInOut, ], standalone: true, - imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ThemedLoadingComponent, ErrorComponent, RouterLink, TranslateModule], + imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ErrorComponent, RouterLink, TranslateModule, SearchResultsSkeletonComponent, SearchResultsSkeletonComponent, AsyncPipe, NgxSkeletonLoaderModule], }) export class SearchResultsComponent extends BaseComponent { diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index 4ea749794e6..14e42d09e4f 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -12,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to'; import { RootModule } from '../../app/root.module'; +import { SearchResultsSkeletonComponent } from '../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component'; import { MetadataImportPageComponent } from './app/admin/admin-import-metadata-page/metadata-import-page.component'; import { AdminSearchPageComponent } from './app/admin/admin-search-page/admin-search-page.component'; import { AdminSidebarComponent } from './app/admin/admin-sidebar/admin-sidebar.component'; @@ -105,6 +106,7 @@ import { WorkflowItemDeleteComponent } from './app/workflowitems-edit-page/workf import { WorkflowItemSendBackComponent } from './app/workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component'; import { WorkspaceItemsDeletePageComponent } from './app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component'; + const DECLARATIONS = [ FileSectionComponent, HomePageComponent, @@ -198,6 +200,7 @@ const DECLARATIONS = [ ComcolPageContentComponent, AdminSearchPageComponent, AdminWorkflowPageComponent, + SearchResultsSkeletonComponent, ]; @NgModule({ diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss index 63a5535d958..863db57833d 100644 --- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss +++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss @@ -18,6 +18,7 @@ /* set the next two properties as `--ds-header-navbar-border-bottom-*` in order to keep the bottom border of the header when navbar is expanded */ + --ds-expandable-navbar-border-top-color: #{$white}; --ds-expandable-navbar-border-top-height: 0; --ds-expandable-navbar-padding-top: 0;