[Datahub] : Handle erroneous api links

apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts

@@ -738,6 +738,16 @@ describe('api form', () => {
           .should('not.eq', url)
       })
   })
+  describe('When the api link has an error', () => {
+    beforeEach(() => {
+      cy.visit('/dataset/ee965118-2416-4d48-b07e-bbc696f002c2')
+      cy.get('gn-ui-api-card').last().find('button').eq(1).click()
+    })
+
+    it('should display the error message', () => {
+      cy.get('gn-ui-error').should('be.visible')
+    })
+  })
 })
 
 describe('userFeedback', () => {

libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -1,5 +1,8 @@
 <div class="flex flex-col gap-8">
-  <div class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8">
+  <div
+    class="flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8"
+    *ngIf="apiQueryUrl$ | async"
+  >
     <div class="flex flex-row">
       <div class="text-[16px] text-black truncate font-title w-11/12" translate>
         record.metadata.api.form.create
@@ -78,7 +81,7 @@
       </div>
     </div>
   </div>
-  <div class="flex flex-col gap-3 mb-3">
+  <div class="flex flex-col gap-3 mb-3" *ngIf="apiQueryUrl$ | async">
     <div class="text-sm text-black truncate font-title w-11/12" translate>
       record.metadata.api.form.customUrl
     </div>
@@ -88,4 +91,12 @@
       ></gn-ui-copy-text-button>
     </div>
   </div>
+  <ng-container *ngIf="isLoading">
+    <gn-ui-spinning-loader class="ml-[30rem]"></gn-ui-spinning-loader>
+  </ng-container>
+  <gn-ui-error
+    *ngIf="(apiQueryUrl$ | async) === undefined && !isLoading"
+    [type]="errorTypes.RECEIVED_ERROR"
+    [error]="'record.metadata.api.form.error' | translate"
+  ></gn-ui-error>
 </div>

libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -6,6 +6,7 @@ import {
 } from '@geonetwork-ui/common/domain/model/record'
 import { mimeTypeToFormat } from '@geonetwork-ui/util/shared'
 import { BehaviorSubject, combineLatest, filter, map, switchMap } from 'rxjs'
+import { ErrorType } from '../error/error.component'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -26,12 +27,20 @@ interface OutputFormats {
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
+    this.isLoading = true
     this.outputFormats = [{ value: 'json', label: 'JSON' }]
     this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
     this.apiFeatureType = value ? value.name : undefined
     if (value) {
       this.apiBaseUrl = value.url.href
-      this.createEndpoint().then(() => this.parseOutputFormats())
+      this.createEndpoint()
+        .then(() => {
+          this.parseOutputFormats()
+          this.isLoading = false
+        })
+        .catch(() => {
+          this.isLoading = false
+        })
     }
     this.resetUrl()
   }
@@ -49,17 +58,18 @@ export class RecordApiFormComponent {
   outputFormats = [{ value: 'json', label: 'JSON' }]
   endpoint: WfsEndpoint | OgcApiEndpoint | undefined
   firstCollection: string | undefined
+  errorTypes = ErrorType
+  isLoading = false
 
   apiQueryUrl$ = combineLatest([
     this.offset$,
     this.limit$,
     this.format$,
-    // only compute the url if the endpoint was created
-    this.endpoint$.pipe(filter((endpoint) => !!endpoint)),
+    this.endpoint$,
   ]).pipe(
-    switchMap(([offset, limit, format]) =>
-      this.generateApiQueryUrl(offset, limit, format)
-    )
+    switchMap(([offset, limit, format]) => {
+      return this.generateApiQueryUrl(offset, limit, format) || undefined
+    })
   )
 
   noLimitChecked$ = this.limit$.pipe(
@@ -85,6 +95,7 @@ export class RecordApiFormComponent {
     this.offset$.next(DEFAULT_PARAMS.OFFSET)
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
+    this.isLoading = false
   }
 
   async parseOutputFormats() {
@@ -146,23 +157,27 @@ export class RecordApiFormComponent {
     format: string
   ): Promise<string> {
     if (!this.apiBaseUrl || !this.endpoint || !this.apiFeatureType) return ''
-
     const options = {
       outputFormat: format,
       startIndex: offset ? Number(offset) : undefined,
       maxFeatures: limit !== '-1' ? Number(limit) : undefined,
       limit: limit !== '-1' ? Number(limit) : limit === '-1' ? -1 : undefined,
       offset: offset !== '' ? Number(offset) : undefined,
     }
-
-    if (this.endpoint instanceof WfsEndpoint) {
-      options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
-      return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
-    } else {
-      return await this.endpoint.getCollectionItemsUrl(
-        this.firstCollection,
-        options
-      )
+    try {
+      let url
+      if (this.endpoint instanceof WfsEndpoint) {
+        options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
+        url = this.endpoint.getFeatureUrl(this.apiFeatureType, options)
+      } else {
+        url = await this.endpoint.getCollectionItemsUrl(
+          this.firstCollection,
+          options
+        )
+      }
+      return url
+    } catch (error) {
+      return undefined
     }
   }
 }

translations/de.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "Formular schließen",
   "record.metadata.api.form.create": "Ihre Anfrage erstellen",
   "record.metadata.api.form.customUrl": "Benutzerdefinierte URL",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "Anzahl der Datensätze",
   "record.metadata.api.form.limit.all": "Alle",
   "record.metadata.api.form.offset": "Anzahl des ersten Datensatzes",

translations/en.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "Close the form",
   "record.metadata.api.form.create": "Create your request",
   "record.metadata.api.form.customUrl": "Custom URL",
+  "record.metadata.api.form.error": "The service returned an error.",
   "record.metadata.api.form.limit": "Count of records",
   "record.metadata.api.form.limit.all": "All",
   "record.metadata.api.form.offset": "Count of first record",

translations/es.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "",
   "record.metadata.api.form.limit.all": "",
   "record.metadata.api.form.offset": "",

translations/fr.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "Fermer le panneau de personnalisation",
   "record.metadata.api.form.create": "Paramétrer votre requête",
   "record.metadata.api.form.customUrl": "URL personnalisée",
+  "record.metadata.api.form.error": "Le service a renvoyé un message d'erreur.",
   "record.metadata.api.form.limit": "Nombre d'enregistrements",
   "record.metadata.api.form.limit.all": "Tous",
   "record.metadata.api.form.offset": "Numéro du 1er enregistrement",

translations/it.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "Chiudi il pannello di personalizzazione",
   "record.metadata.api.form.create": "Configura la sua richiesta",
   "record.metadata.api.form.customUrl": "URL personalizzata",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "Numero di record",
   "record.metadata.api.form.limit.all": "Tutti",
   "record.metadata.api.form.offset": "Numero del primo record",

translations/nl.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "",
   "record.metadata.api.form.limit.all": "",
   "record.metadata.api.form.offset": "",

translations/pt.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "",
   "record.metadata.api.form.create": "",
   "record.metadata.api.form.customUrl": "",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "",
   "record.metadata.api.form.limit.all": "",
   "record.metadata.api.form.offset": "",

translations/sk.json

@@ -282,6 +282,7 @@
   "record.metadata.api.form.closeForm": "Zavrieť formulár",
   "record.metadata.api.form.create": "Vytvoriť požiadavku",
   "record.metadata.api.form.customUrl": "Vlastná URL",
+  "record.metadata.api.form.error": "",
   "record.metadata.api.form.limit": "Počet záznamov",
   "record.metadata.api.form.limit.all": "Všetky",
   "record.metadata.api.form.offset": "Počet prvých záznamov",