Fix 6076: Item page search components reload entire page

src/app/collection-page/collection-page-routes.ts

@@ -4,6 +4,7 @@ import { collectionBreadcrumbResolver } from '@dspace/core/breadcrumbs/collectio
 import { communityBreadcrumbResolver } from '@dspace/core/breadcrumbs/community-breadcrumb.resolver';
 import { i18nBreadcrumbResolver } from '@dspace/core/breadcrumbs/i18n-breadcrumb.resolver';
 import { endUserAgreementCurrentUserGuard } from '@dspace/core/end-user-agreement/end-user-agreement-current-user.guard';
+import { rerunGuardsAndResolversOnPathChange } from '@dspace/core/router/utils/route.utils';
 
 import { ObjectAuditLogsComponent } from '../audit-page/object-audit-overview/object-audit-logs.component';
 import { browseByGuard } from '../browse-by/browse-by-guard';
@@ -57,7 +58,7 @@ export const ROUTES: Route[] = [
       dso: collectionPageResolver,
       breadcrumb: collectionBreadcrumbResolver,
     },
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: rerunGuardsAndResolversOnPathChange,
     children: [
       {
         path: COLLECTION_EDIT_PATH,

src/app/community-page/community-page-routes.ts

@@ -2,6 +2,7 @@ import { Route } from '@angular/router';
 import { authenticatedGuard } from '@dspace/core/auth/authenticated.guard';
 import { communityBreadcrumbResolver } from '@dspace/core/breadcrumbs/community-breadcrumb.resolver';
 import { i18nBreadcrumbResolver } from '@dspace/core/breadcrumbs/i18n-breadcrumb.resolver';
+import { rerunGuardsAndResolversOnPathChange } from '@dspace/core/router/utils/route.utils';
 
 import { ObjectAuditLogsComponent } from '../audit-page/object-audit-overview/object-audit-logs.component';
 import { browseByGuard } from '../browse-by/browse-by-guard';
@@ -52,7 +53,7 @@ export const ROUTES: Route[] = [
       dso: communityPageResolver,
       breadcrumb: communityBreadcrumbResolver,
     },
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: rerunGuardsAndResolversOnPathChange,
     children: [
       {
         path: COMMUNITY_EDIT_PATH,

src/app/core/router/utils/route.utils.ts

@@ -2,10 +2,20 @@ import {
   ActivatedRouteSnapshot,
   Router,
 } from '@angular/router';
-import { hasValue } from '@dspace/shared/utils/empty.util';
+import {
+  hasNoValue,
+  hasValue,
+} from '@dspace/shared/utils/empty.util';
 
 import { URLCombiner } from '../../url-combiner/url-combiner';
 
+/**
+ * The id of the element marking the top of a search component, used as a
+ * URL fragment so the browser scrolls back to the search component (instead
+ * of the top of the page) after a search interaction updates the URL.
+ */
+export const SEARCH_COMPONENT_ANCHOR_ID = 'search-component';
+
 /**
  * Util function to retrieve the current path (without query parameters) the user is on
  * @param router The router service
@@ -22,3 +32,31 @@ export function currentPathFromSnapshot(route: ActivatedRouteSnapshot): string {
   }
   return route.routeConfig ? route.routeConfig.path : '';
 }
+
+/**
+ * Function to use as `runGuardsAndResolvers` on routes that contain embedded
+ * search components (e.g. item, collection and community pages).
+ *
+ * Resolvers and guards are only re-run when the path of the route itself, or
+ * of any of its activated (grand)child routes, actually changes. Query
+ * parameter changes caused by search interactions (e.g. selecting a filter or
+ * submitting the search form) no longer re-run the resolvers, which prevented
+ * the page from being fully reloaded on every search update.
+ *
+ * @param from The previously activated route snapshot
+ * @param to The newly activated route snapshot
+ */
+export function rerunGuardsAndResolversOnPathChange(from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot): boolean {
+  if (JSON.stringify(from.url) !== JSON.stringify(to.url)) {
+    return true;
+  }
+  const fromChild = from.firstChild;
+  const toChild = to.firstChild;
+  if (hasValue(fromChild) || hasValue(toChild)) {
+    if (hasNoValue(fromChild) || hasNoValue(toChild)) {
+      return true;
+    }
+    return rerunGuardsAndResolversOnPathChange(fromChild, toChild);
+  }
+  return false;
+}

src/app/item-page/item-page-routes.ts

@@ -3,6 +3,7 @@ import { accessTokenResolver } from '@dspace/core/auth/access-token.resolver';
 import { authenticatedGuard } from '@dspace/core/auth/authenticated.guard';
 import { i18nBreadcrumbResolver } from '@dspace/core/breadcrumbs/i18n-breadcrumb.resolver';
 import { itemBreadcrumbResolver } from '@dspace/core/breadcrumbs/item-breadcrumb.resolver';
+import { rerunGuardsAndResolversOnPathChange } from '@dspace/core/router/utils/route.utils';
 
 import { REQUEST_COPY_MODULE_PATH } from '../app-routing-paths';
 import { ObjectAuditLogsComponent } from '../audit-page/object-audit-overview/object-audit-logs.component';
@@ -50,7 +51,7 @@ export const ROUTES: Route[] = [
       breadcrumb: itemBreadcrumbResolver,
       links: signpostingLinksResolver,
     },
-    runGuardsAndResolvers: 'always',
+    runGuardsAndResolvers: rerunGuardsAndResolversOnPathChange,
     children: [
       {
         path: '',

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

@@ -12,6 +12,7 @@ import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { DSpaceObjectDataService } from '@dspace/core/data/dspace-object-data.service';
 import { PaginationService } from '@dspace/core/pagination/pagination.service';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { Community } from '@dspace/core/shared/community.model';
 import { DSpaceObject } from '@dspace/core/shared/dspace-object.model';
 import { PaginationServiceStub } from '@dspace/core/testing/pagination-service.stub';
@@ -117,6 +118,7 @@ describe('SearchFormComponent', () => {
       expect(router.navigate).toHaveBeenCalledWith(comp.getSearchLinkParts(), {
         queryParams: { ...searchQuery, ...firstPage },
         queryParamsHandling: 'merge',
+        fragment: SEARCH_COMPONENT_ANCHOR_ID,
       });
     });
 
@@ -130,6 +132,7 @@ describe('SearchFormComponent', () => {
       expect(router.navigate).toHaveBeenCalledWith(comp.getSearchLinkParts(), {
         queryParams: { ...searchQuery, ...firstPage },
         queryParamsHandling: 'merge',
+        fragment: SEARCH_COMPONENT_ANCHOR_ID,
       });
     });
 
@@ -143,6 +146,7 @@ describe('SearchFormComponent', () => {
       expect(router.navigate).toHaveBeenCalledWith(comp.getSearchLinkParts(), {
         queryParams: { ...searchQuery, ...firstPage },
         queryParamsHandling: 'merge',
+        fragment: SEARCH_COMPONENT_ANCHOR_ID,
       });
     });
   });

src/app/shared/search-form/search-form.component.ts

@@ -11,7 +11,10 @@ import { Router } from '@angular/router';
 import { DSONameService } from '@dspace/core/breadcrumbs/dso-name.service';
 import { DSpaceObjectDataService } from '@dspace/core/data/dspace-object-data.service';
 import { PaginationService } from '@dspace/core/pagination/pagination.service';
-import { currentPath } from '@dspace/core/router/utils/route.utils';
+import {
+  currentPath,
+  SEARCH_COMPONENT_ANCHOR_ID,
+} from '@dspace/core/router/utils/route.utils';
 import { DSpaceObject } from '@dspace/core/shared/dspace-object.model';
 import { getFirstSucceededRemoteDataPayload } from '@dspace/core/shared/operators';
 import {
@@ -161,6 +164,7 @@ export class SearchFormComponent implements OnChanges {
     void this.router.navigate(this.getSearchLinkParts(), {
       queryParams: queryParams,
       queryParamsHandling: 'merge',
+      fragment: SEARCH_COMPONENT_ANCHOR_ID,
     });
   }
 

src/app/shared/search/advanced-search/advanced-search.component.ts

@@ -15,7 +15,10 @@ import {
   APP_CONFIG,
   AppConfig,
 } from '@dspace/config/app-config.interface';
-import { currentPath } from '@dspace/core/router/utils/route.utils';
+import {
+  currentPath,
+  SEARCH_COMPONENT_ANCHOR_ID,
+} from '@dspace/core/router/utils/route.utils';
 import { FilterType } from '@dspace/core/shared/search/models/filter-type.model';
 import { SearchFilterConfig } from '@dspace/core/shared/search/models/search-filter-config.model';
 import { FilterConfig } from '@dspace/core/shared/search/search-filters/search-config.model';
@@ -151,6 +154,7 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
       this.subs.push(this.searchConfigurationService.selectNewAppliedFilterParams(this.currentFilter, this.currentValue.trim(), this.currentOperator).pipe(take(1)).subscribe((params: Params) => {
         void this.router.navigate([this.getSearchLink()], {
           queryParams: params,
+          fragment: SEARCH_COMPONENT_ANCHOR_ID,
         });
         this.currentValue = '';
       }));

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -3,6 +3,7 @@
     [tabIndex]="-1"
     [routerLink]="[searchLink]"
     [queryParams]="addQueryParams$ | async"
+    [fragment]="'search-component'"
     (click)="announceFilter(); filterService.minimizeAll()"
     rel="nofollow">
     <label class="mb-0 d-flex w-100">

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html

@@ -2,6 +2,7 @@
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
    [queryParams]="removeQueryParams | async"
+   [fragment]="'search-component'"
    (click)="searchFilterService.minimizeAll()">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox" role="checkbox" tabindex="0"/>

src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.spec.ts

@@ -11,6 +11,7 @@ import { FormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-build.service';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { PageInfo } from '@dspace/core/shared/page-info.model';
 import { AppliedFilter } from '@dspace/core/shared/search/models/applied-filter.model';
 import { FacetValue } from '@dspace/core/shared/search/models/facet-value.model';
@@ -229,6 +230,7 @@ describe('SearchFacetFilterComponent', () => {
       expect(searchConfigService.selectNewAppliedFilterParams).toHaveBeenCalledWith(filterName1, testValue, 'equals');
       expect(router.navigate).toHaveBeenCalledWith(searchUrl.split('/'), {
         queryParams: { [mockFilterConfig.paramName]: [...selectedValues.map((value) => `${value},equals`), `${testValue},equals`] },
+        fragment: SEARCH_COMPONENT_ANCHOR_ID,
       });
     });
 

src/app/shared/search/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts

@@ -17,7 +17,10 @@ import {
   Router,
 } from '@angular/router';
 import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-build.service';
-import { currentPath } from '@dspace/core/router/utils/route.utils';
+import {
+  currentPath,
+  SEARCH_COMPONENT_ANCHOR_ID,
+} from '@dspace/core/router/utils/route.utils';
 import { getFirstSucceededRemoteDataPayload } from '@dspace/core/shared/operators';
 import { AppliedFilter } from '@dspace/core/shared/search/models/applied-filter.model';
 import { FacetValue } from '@dspace/core/shared/search/models/facet-value.model';
@@ -307,6 +310,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
       this.subs.push(this.searchConfigService.selectNewAppliedFilterParams(this.filterConfig.name, valueParts.slice(0, valueParts.length - 1).join(), valueParts[valueParts.length - 1]).pipe(take(1)).subscribe((params: Params) => {
         void this.router.navigate(this.getSearchLinkParts(), {
           queryParams: params,
+          fragment: SEARCH_COMPONENT_ANCHOR_ID,
         });
         this.filter = '';
         this.filterSearchResults$ = of([]);

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.spec.ts

@@ -17,6 +17,7 @@ import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-
 import { buildPaginatedList } from '@dspace/core/data/paginated-list.model';
 import { RemoteData } from '@dspace/core/data/remote-data';
 import { RequestEntryState } from '@dspace/core/data/request-entry-state.model';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { PageInfo } from '@dspace/core/shared/page-info.model';
 import { SearchFilterConfig } from '@dspace/core/shared/search/models/search-filter-config.model';
 import { VocabularyEntryDetail } from '@dspace/core/submission/vocabularies/models/vocabulary-entry-detail.model';
@@ -157,6 +158,7 @@ describe('SearchHierarchyFilterComponent', () => {
                 'definedBy_selectNewAppliedFilterParams',
               ],
             },
+            fragment: SEARCH_COMPONENT_ANCHOR_ID,
           });
         }));
       });

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts

@@ -19,6 +19,7 @@ import {
 } from '@dspace/config/app-config.interface';
 import { FilterVocabularyConfig } from '@dspace/config/filter-vocabulary-config';
 import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-build.service';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { PageInfo } from '@dspace/core/shared/page-info.model';
 import { FilterType } from '@dspace/core/shared/search/models/filter-type.model';
 import { VocabularyEntryDetail } from '@dspace/core/submission/vocabularies/models/vocabulary-entry-detail.model';
@@ -143,6 +144,7 @@ export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent i
         [this.getSearchLink()],
         {
           queryParams: params,
+          fragment: SEARCH_COMPONENT_ANCHOR_ID,
         },
       );
     }));

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.spec.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/router';
 import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-build.service';
 import { buildPaginatedList } from '@dspace/core/data/paginated-list.model';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { RouteService } from '@dspace/core/services/route.service';
 import { PageInfo } from '@dspace/core/shared/page-info.model';
 import { FacetValue } from '@dspace/core/shared/search/models/facet-value.model';
@@ -152,6 +153,7 @@ describe('SearchRangeFilterComponent', () => {
           [mockFilterConfig.paramName + maxSuffix]: [1950],
         },
         queryParamsHandling: 'merge',
+        fragment: SEARCH_COMPONENT_ANCHOR_ID,
       });
     });
   });

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts

@@ -11,6 +11,7 @@ import {
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { RemoteDataBuildService } from '@dspace/core/cache/builders/remote-data-build.service';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { RouteService } from '@dspace/core/services/route.service';
 import { FilterType } from '@dspace/core/shared/search/models/filter-type.model';
 import { yearFromString } from '@dspace/shared/utils/date.util';
@@ -183,6 +184,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
           [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: newMax,
         },
       queryParamsHandling: 'merge',
+      fragment: SEARCH_COMPONENT_ANCHOR_ID,
     });
     this.filter = '';
   }

src/app/shared/search/search-labels/search-label-range/search-label-range.component.html

@@ -3,6 +3,7 @@
     [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate, value: min }"
     [routerLink]="searchLink"
     [queryParams]="(removeParametersMin$ | async)"
+    [fragment]="'search-component'"
     (click)="searchFilterService.minimizeAll()"
     class="badge bg-primary">
     <span class="d-flex">
@@ -16,6 +17,7 @@
     [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate, value: max }"
     [routerLink]="searchLink"
     [queryParams]="(removeParametersMax$ | async)"
+    [fragment]="'search-component'"
     (click)="searchFilterService.minimizeAll()"
     class="badge bg-primary">
     <span class="d-flex">

src/app/shared/search/search-labels/search-label/search-label.component.html

@@ -2,6 +2,7 @@
    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter) | translate, value: appliedFilter.label }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters$ | async)"
+   [fragment]="'search-component'"
    (click)="searchFilterService.minimizeAll()">
   <span class="d-flex">
     <span class="flex-grow-1 text-start">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>

src/app/shared/search/search-settings/search-settings.component.ts

@@ -10,6 +10,7 @@ import {
   SortOptions,
 } from '@dspace/core/cache/models/sort-options.model';
 import { PaginationService } from '@dspace/core/pagination/pagination.service';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service';
@@ -59,6 +60,8 @@ export class SearchSettingsComponent {
       sortField: values[0],
       sortDirection: values[1] as SortDirection,
       page: 1,
+    }, {}, false, {
+      fragment: SEARCH_COMPONENT_ANCHOR_ID,
     });
   }
 }

src/app/shared/search/search-switch-configuration/search-switch-configuration.component.spec.ts

@@ -9,6 +9,7 @@ import {
   NavigationExtras,
   Router,
 } from '@angular/router';
+import { SEARCH_COMPONENT_ANCHOR_ID } from '@dspace/core/router/utils/route.utils';
 import { Context } from '@dspace/core/shared/context.model';
 import { RouterStub } from '@dspace/core/testing/router.stub';
 import { SearchConfigurationServiceStub } from '@dspace/core/testing/search-configuration-service.stub';
@@ -112,6 +113,7 @@ describe('SearchSwitchConfigurationComponent', () => {
     comp.selectedOption = configurationList[1];
     const navigationExtras: NavigationExtras = {
       queryParams: { configuration: MyDSpaceConfigurationValueType.Workflow },
+      fragment: SEARCH_COMPONENT_ANCHOR_ID,
     };
 
     fixture.detectChanges();

src/app/shared/search/search-switch-configuration/search-switch-configuration.component.ts

@@ -13,7 +13,10 @@ import {
   NavigationExtras,
   Router,
 } from '@angular/router';
-import { currentPath } from '@dspace/core/router/utils/route.utils';
+import {
+  currentPath,
+  SEARCH_COMPONENT_ANCHOR_ID,
+} from '@dspace/core/router/utils/route.utils';
 import { hasValue } from '@dspace/shared/utils/empty.util';
 import { TranslateModule } from '@ngx-translate/core';
 import findIndex from 'lodash/findIndex';
@@ -88,6 +91,7 @@ export class SearchSwitchConfigurationComponent implements OnDestroy, OnInit {
   onSelect() {
     const navigationExtras: NavigationExtras = {
       queryParams: { configuration: this.selectedOption.value },
+      fragment: SEARCH_COMPONENT_ANCHOR_ID,
     };
 
     this.changeConfiguration.emit(this.selectedOption);