Datahub - add info when metadata has no online ressource

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

@@ -575,6 +575,15 @@ describe('dataset pages', () => {
             })
         })
       })
+
+      describe('When there is no link', () => {
+        beforeEach(() => {
+          cy.visit('/dataset/a3774ef6-809d-4dd1-984f-9254f49cbd0a')
+        })
+        it('display the error datasetHasNoLink error block', () => {
+          cy.get('[data-test="dataset-has-no-link-block"]').should('exist')
+        })
+      })
     })
   })
 })
@@ -795,7 +804,7 @@ describe('When the metadata does not exists', () => {
     cy.visit('/dataset/xyz')
   })
   it('should display an error message', () => {
-    cy.get('gn-ui-search-results-error').should('exist')
+    cy.get('gn-ui-error').should('exist')
     cy.screenshot({ capture: 'viewport' })
   })
 })

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -133,7 +133,12 @@
       <datahub-record-apis class="block mt-[32px]"></datahub-record-apis>
     </div>
   </div>
-
+  <ng-container *ngIf="displayDatasetHasNoLinkBlock$ | async">
+    <gn-ui-error
+      data-test="dataset-has-no-link-block"
+      [type]="errorTypes.DATASET_HAS_NO_LINK"
+    ></gn-ui-error>
+  </ng-container>
   <div id="related-records" *ngIf="displayRelated$ | async">
     <div>
       <div class="h-48 overflow-visible">
@@ -165,14 +170,14 @@
   class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
   *ngIf="metadataViewFacade.error$ | async as error"
 >
-  <gn-ui-search-results-error
+  <gn-ui-error
     *ngIf="error.notFound"
     [type]="errorTypes.RECORD_NOT_FOUND"
     [recordId]="(metadataViewFacade.metadata$ | async).uniqueIdentifier"
-  ></gn-ui-search-results-error>
-  <gn-ui-search-results-error
+  ></gn-ui-error>
+  <gn-ui-error
     *ngIf="error.otherError"
     [type]="errorTypes.RECEIVED_ERROR"
     [error]="error.otherError"
-  ></gn-ui-search-results-error>
+  ></gn-ui-error>
 </div>

apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts

@@ -10,10 +10,7 @@ import { By } from '@angular/platform-browser'
 import { SourcesService } from '@geonetwork-ui/feature/catalog'
 import { MapManagerService } from '@geonetwork-ui/feature/map'
 import { SearchService } from '@geonetwork-ui/feature/search'
-import {
-  ErrorType,
-  SearchResultsErrorComponent,
-} from '@geonetwork-ui/ui/elements'
+import { ErrorComponent, ErrorType } from '@geonetwork-ui/ui/elements'
 import { TranslateModule } from '@ngx-translate/core'
 import { BehaviorSubject, of } from 'rxjs'
 import { RecordMetadataComponent } from './record-metadata.component'
@@ -177,7 +174,7 @@ describe('RecordMetadataComponent', () => {
         MockDataOtherlinksComponent,
         MockDataApisComponent,
         MockRelatedComponent,
-        SearchResultsErrorComponent,
+        ErrorComponent,
         MockMetadataInfoComponent,
         MockMetadataCatalogComponent,
         MockMetadataContactComponent,
@@ -623,9 +620,9 @@ describe('RecordMetadataComponent', () => {
   describe('error handling', () => {
     describe('normal', () => {
       it('does not show errors', () => {
-        const result = fixture.debugElement.query(
-          By.directive(SearchResultsErrorComponent)
-        )
+        facade.otherLinks$.next([''])
+        fixture.detectChanges()
+        const result = fixture.debugElement.query(By.directive(ErrorComponent))
         expect(result).toBeFalsy()
       })
     })
@@ -635,9 +632,7 @@ describe('RecordMetadataComponent', () => {
         fixture.detectChanges()
       })
       it('shows error', () => {
-        const result = fixture.debugElement.query(
-          By.directive(SearchResultsErrorComponent)
-        )
+        const result = fixture.debugElement.query(By.directive(ErrorComponent))
 
         expect(result).toBeTruthy()
         expect(result.componentInstance.type).toBe(ErrorType.RECORD_NOT_FOUND)
@@ -653,14 +648,30 @@ describe('RecordMetadataComponent', () => {
         fixture.detectChanges()
       })
       it('shows error', () => {
-        const result = fixture.debugElement.query(
-          By.directive(SearchResultsErrorComponent)
-        )
+        const result = fixture.debugElement.query(By.directive(ErrorComponent))
 
         expect(result).toBeTruthy()
         expect(result.componentInstance.type).toBe(ErrorType.RECEIVED_ERROR)
         expect(result.componentInstance.error).toBe('This is an Error!')
       })
     })
+
+    describe('When there are no link (download, api or other links)', () => {
+      beforeEach(() => {
+        facade.apiLinks$.next([])
+        facade.downloadLinks$.next([])
+        facade.otherLinks$.next([])
+        fixture.detectChanges()
+      })
+      it('shows the no link error block', () => {
+        const result = fixture.debugElement.query(
+          By.css('[data-test="dataset-has-no-link-block"]')
+        )
+        expect(result).toBeTruthy()
+        expect(result.componentInstance.type).toBe(
+          ErrorType.DATASET_HAS_NO_LINK
+        )
+      })
+    })
   })
 })

apps/datahub/src/app/record/record-metadata/record-metadata.component.ts

@@ -54,6 +54,17 @@ export class RecordMetadataComponent {
     map((records) => records?.length > 0)
   )
 
+  displayDatasetHasNoLinkBlock$ = combineLatest([
+    this.displayDownload$,
+    this.displayApi$,
+    this.displayOtherLinks,
+  ]).pipe(
+    map(
+      ([displayDownload, displayApi, displayOtherLinks]) =>
+        !displayDownload && !displayApi && !displayOtherLinks
+    )
+  )
+
   organisationName$ = this.metadataViewFacade.metadata$.pipe(
     map((record) => record?.ownerOrganization?.name),
     filter(Boolean)

libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -42,16 +42,16 @@
 </div>
 
 <div class="p-4 max-w-[600px] m-auto text-[13px]">
-  <gn-ui-search-results-error
+  <gn-ui-error
     *ngIf="(errorCode$ | async) === 0"
     [type]="errorTypes.COULD_NOT_REACH_API"
   >
-  </gn-ui-search-results-error>
-  <gn-ui-search-results-error
+  </gn-ui-error>
+  <gn-ui-error
     *ngIf="(error$ | async) !== null && (errorCode$ | async) !== 0"
     [type]="errorTypes.RECEIVED_ERROR"
     [error]="errorMessage$ | async"
-  ></gn-ui-search-results-error>
+  ></gn-ui-error>
 </div>
 
 <ng-template #favoriteToggle let-record>

libs/ui/elements/src/index.ts

@@ -17,7 +17,7 @@ export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/search-results-error/search-results-error.component'
+export * from './lib/error/error.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'

libs/ui/elements/src/lib/search-results-error/search-results-error.component.html → libs/ui/elements/src/lib/error/error.component.html

@@ -1,7 +1,10 @@
 <div
   class="p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg"
 >
-  <div *ngIf="type === types.COULD_NOT_REACH_API">
+  <div
+    *ngIf="type === types.COULD_NOT_REACH_API"
+    data-test="could-not-reach-api-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
@@ -13,14 +16,26 @@
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
-  <div *ngIf="type === types.RECEIVED_ERROR">
+  <div
+    *ngIf="type === types.DATASET_HAS_NO_LINK"
+    data-test="dataset-has-no-link-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined face">computer</mat-icon>
+    </div>
+    <div translate>search.error.recordHasnolink</div>
+  </div>
+  <div *ngIf="type === types.RECEIVED_ERROR" data-test="received-error-error">
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
     </div>
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
-  <div *ngIf="type === types.RECORD_NOT_FOUND">
+  <div
+    *ngIf="type === types.RECORD_NOT_FOUND"
+    data-test="record-not-found-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"

libs/ui/elements/src/lib/error/error.component.spec.ts

@@ -0,0 +1,86 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ErrorComponent, ErrorType } from './error.component'
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'
+import { By } from '@angular/platform-browser'
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent
+  let fixture: ComponentFixture<ErrorComponent>
+  let compiled: DebugElement
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ErrorComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorComponent)
+    component = fixture.componentInstance
+    compiled = fixture.debugElement
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  describe('ErrorType', () => {
+    describe('ErrorType.COULD_NOT_REACH_API', () => {
+      beforeEach(() => {
+        component.type = ErrorType.COULD_NOT_REACH_API
+        fixture.detectChanges()
+      })
+
+      it('COULD_NOT_REACH_API block is displayed.', () => {
+        const errorBlock = compiled.query(
+          By.css('[data-test="could-not-reach-api-error"]')
+        )
+        expect(errorBlock).toBeTruthy()
+      })
+    })
+
+    describe('ErrorType.RECEIVED_ERROR', () => {
+      beforeEach(() => {
+        component.type = ErrorType.RECEIVED_ERROR
+        fixture.detectChanges()
+      })
+
+      it('RECEIVED_ERROR block is displayed.', () => {
+        const errorBlock = compiled.query(
+          By.css('[data-test="received-error-error"]')
+        )
+        expect(errorBlock).toBeTruthy()
+      })
+    })
+
+    describe('ErrorType.RECORD_NOT_FOUND', () => {
+      beforeEach(() => {
+        component.type = ErrorType.RECORD_NOT_FOUND
+        fixture.detectChanges()
+      })
+
+      it('RECORD_NOT_FOUND block is displayed.', () => {
+        const errorBlock = compiled.query(
+          By.css('[data-test="record-not-found-error"]')
+        )
+        expect(errorBlock).toBeTruthy()
+      })
+    })
+
+    describe('ErrorType.NO_LINK', () => {
+      beforeEach(() => {
+        component.type = ErrorType.DATASET_HAS_NO_LINK
+        fixture.detectChanges()
+      })
+
+      it('NO_LINK block is displayed.', () => {
+        const errorBlock = compiled.query(
+          By.css('[data-test="dataset-has-no-link-error"]')
+        )
+        expect(errorBlock).toBeTruthy()
+      })
+    })
+  })
+})

libs/ui/elements/src/lib/search-results-error/search-results-error.component.stories.ts → libs/ui/elements/src/lib/error/error.component.stories.ts

@@ -1,7 +1,4 @@
-import {
-  ErrorType,
-  SearchResultsErrorComponent,
-} from './search-results-error.component'
+import { ErrorComponent, ErrorType } from './error.component'
 import {
   applicationConfig,
   componentWrapperDecorator,
@@ -19,8 +16,8 @@ import { importProvidersFrom } from '@angular/core'
 import { MatIcon } from '@angular/material/icon'
 
 export default {
-  title: 'Elements/SearchResultsErrorComponent',
-  component: SearchResultsErrorComponent,
+  title: 'Elements/ErrorComponent',
+  component: ErrorComponent,
   decorators: [
     moduleMetadata({
       declarations: [MatIcon],
@@ -36,9 +33,9 @@ export default {
       (story) => `<div style="max-width: 800px">${story}</div>`
     ),
   ],
-} as Meta<SearchResultsErrorComponent>
+} as Meta<ErrorComponent>
 
-export const Primary: StoryObj<SearchResultsErrorComponent> = {
+export const Primary: StoryObj<ErrorComponent> = {
   args: {
     type: ErrorType.RECEIVED_ERROR,
     error: 'something wrong happened',
@@ -51,6 +48,7 @@ export const Primary: StoryObj<SearchResultsErrorComponent> = {
         ErrorType.RECEIVED_ERROR,
         ErrorType.COULD_NOT_REACH_API,
         ErrorType.RECORD_NOT_FOUND,
+        ErrorType.DATASET_HAS_NO_LINK,
       ],
     },
   },

libs/ui/elements/src/lib/search-results-error/search-results-error.component.ts → libs/ui/elements/src/lib/error/error.component.ts

@@ -4,15 +4,16 @@ export enum ErrorType {
   COULD_NOT_REACH_API,
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
+  DATASET_HAS_NO_LINK,
 }
 
 @Component({
-  selector: 'gn-ui-search-results-error',
-  templateUrl: './search-results-error.component.html',
-  styleUrls: ['./search-results-error.component.css'],
+  selector: 'gn-ui-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchResultsErrorComponent {
+export class ErrorComponent {
   @Input() type!: ErrorType
   @Input() error?: string
   @Input() recordId?: string