[BP] refactor(datahub): added an error message when record has no link.

backported from geonetwork/geonetwork-ui#874

Author: Romuald Caplier

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

@@ -542,6 +542,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')
+        })
+      })
     })
   })
 })
@@ -685,9 +694,86 @@ describe('api form', () => {
           .find('gn-ui-copy-text-button')
           .find('input')
           .invoke('val')
-          .then((newUrl) => {
-            expect(newUrl).to.not.eq(url)
-          })
+          .should('not.eq', url)
       })
   })
 })
+
+describe('userFeedback', () => {
+  describe('when not logged in', () => {
+    beforeEach(() => {
+      cy.visit('/dataset/accroche_velos')
+      cy.get('datahub-record-user-feedbacks').as('userFeedback')
+    })
+    it('should sort comments', () => {
+      cy.get('gn-ui-user-feedback-item')
+        .find('[data-cy="commentText"]')
+        .as('commentText')
+
+      cy.get('@commentText')
+        .first()
+        .then((div) => {
+          const firstCommentBeforeSort = div.text().trim()
+          cy.get('@userFeedback')
+            .find('gn-ui-dropdown-selector')
+            .openDropdown()
+            .children('button')
+            .eq(1)
+            .click()
+
+          cy.get('gn-ui-user-feedback-item')
+            .find('[data-cy="commentText"]')
+            .first()
+            .invoke('text')
+            .invoke('trim')
+            .should('not.eq', firstCommentBeforeSort)
+        })
+    })
+    it("shouldn't be able to comment", () => {
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-text-area')
+        .should('not.exist')
+    })
+  })
+
+  describe('when logged in', () => {
+    beforeEach(() => {
+      cy.login()
+      cy.visit('/dataset/accroche_velos')
+    })
+    it('should publish a comment', () => {
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-text-area')
+        .first()
+        .should('exist')
+        .type('Something')
+
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-button')
+        .eq(1)
+        .should('exist')
+    })
+    it('should answer to a comment', () => {
+      cy.get('gn-ui-user-feedback-item')
+        .find('gn-ui-text-area')
+        .first()
+        .should('exist')
+        .type('Something')
+
+      cy.get('gn-ui-user-feedback-item')
+        .find('gn-ui-button')
+        .eq(0)
+        .should('exist')
+    })
+  })
+})
+
+describe('When the metadata does not exists', () => {
+  beforeEach(() => {
+    cy.visit('/dataset/xyz')
+  })
+  it('should display an error message', () => {
+    cy.get('gn-ui-error').should('exist')
+    cy.screenshot({ capture: 'viewport' })
+  })
+})

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

@@ -130,7 +130,12 @@
       ></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">
@@ -150,14 +155,14 @@
   class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
   *ngIf="facade.error$ | async as error"
 >
-  <gn-ui-search-results-error
+  <gn-ui-error
     *ngIf="error.notFound"
     [type]="errorTypes.RECORD_NOT_FOUND"
     [recordId]="(facade.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'
@@ -168,7 +165,7 @@ describe('RecordMetadataComponent', () => {
         MockDataOtherlinksComponent,
         MockDataApisComponent,
         MockRelatedComponent,
-        SearchResultsErrorComponent,
+        ErrorComponent,
         MockMetadataInfoComponent,
         MockMetadataContactComponent,
         MockRecordApiFormComponent,
@@ -598,9 +595,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()
       })
     })
@@ -610,9 +607,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)
@@ -628,14 +623,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

@@ -49,6 +49,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
+    )
+  )
+
   sourceLabel$ = this.facade.metadata$.pipe(
     map((record) => record?.extras?.catalogUuid as string),
     filter((uuid) => !!uuid),

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

@@ -15,7 +15,7 @@ export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/pagination/pagination.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/user-preview/user-preview.component'
 export * from './lib/max-lines/max-lines.component'
 export * from './lib/record-api-form/record-api-form.component'

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

@@ -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/search-results-error/search-results-error.component.html libs/ui/elements/src/lib/error/error.component.html

@@ -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()
+      })
+    })
+  })
+})