[CST-4882] Show error message if the search query fails - Handle error 422 (invalid query) separately

src/app/my-dspace-page/my-dspace-results/my-dspace-results.component.html

@@ -10,5 +10,5 @@
   </ds-viewable-collection>
 </div>
 <ds-loading *ngIf="isLoading()" message="{{'loading.mydspace-results' | translate}}"></ds-loading>
-<ds-error *ngIf="searchResults?.hasFailed && (!searchResults?.errorMessage || searchResults?.statusCode != 400)" message="{{'error.search-results' | translate}}"></ds-error>
+<ds-error *ngIf="showError(searchResults)" message="{{errorMessageLabel(searchResults) | translate}}"></ds-error>
 <h3 *ngIf="searchResults?.payload?.page.length == 0" class="text-center text-muted" ><span>{{'mydspace.results.no-results' | translate}}</span></h3>

src/app/my-dspace-page/my-dspace-results/my-dspace-results.component.ts

@@ -58,4 +58,12 @@ export class MyDSpaceResultsComponent {
   isLoading() {
     return !this.searchResults || isEmpty(this.searchResults) || this.searchResults.isLoading;
   }
+
+  showError(searchResults: RemoteData<PaginatedList<SearchResult<DSpaceObject>>>): boolean {
+    return searchResults?.hasFailed && (!searchResults?.errorMessage || searchResults?.statusCode !== 400);
+  }
+
+  errorMessageLabel(searchResults: RemoteData<PaginatedList<SearchResult<DSpaceObject>>>): string {
+    return (searchResults?.statusCode  === 422) ? 'error.invalid-search-query' : 'error.search-results';
+  }
 }

src/app/shared/error/error.component.html

@@ -1,3 +1,4 @@
-<ds-alert [type]="'alert-danger'" [dismissible]="false">
-  {{ message }}
+<ds-alert [type]="AlertTypeEnum.Error" [dismissible]="false">
+  <!-- Using [innerHTML] instead of {{message}} allows to render HTML code -->
+  <span [innerHTML]="message"></span>
 </ds-alert>

src/app/shared/error/error.component.spec.ts

@@ -36,7 +36,7 @@ describe('ErrorComponent (inline template)', () => {
     comp = fixture.componentInstance; // ErrorComponent test instance
 
     // query for the message <label> by CSS element selector
-    de = fixture.debugElement.query(By.css('label'));
+    de = fixture.debugElement.query(By.css('ds-alert'));
     el = de.nativeElement;
   });
 

src/app/shared/error/error.component.ts

@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 import { Subscription } from 'rxjs';
+import { AlertType } from '../alert/aletr-type';
 
 @Component({
   selector: 'ds-error',
@@ -13,6 +14,12 @@ export class ErrorComponent {
 
   @Input() message = 'Error...';
 
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
   private subscription: Subscription;
 
   constructor(private translate: TranslateService) {

src/assets/i18n/en.json5

@@ -1331,6 +1331,8 @@
 
   "error.search-results": "Error fetching search results",
 
+  "error.invalid-search-query": "Search query is not valid. Please check <a href=\"https://solr.apache.org/guide/query-syntax-and-parsing.html\" target=\"_blank\">Solr query syntax</a> best practices for further information about this error.",
+
   "error.sub-collections": "Error fetching sub-collections",
 
   "error.sub-communities": "Error fetching sub-communities",