Skip to content

Commit

Permalink
refactor(datahub): added an error message when record has no link.
Browse files Browse the repository at this point in the history
  • Loading branch information
Romuald Caplier committed May 31, 2024
1 parent cc25794 commit 48fd10a
Show file tree
Hide file tree
Showing 22 changed files with 187 additions and 68 deletions.
11 changes: 10 additions & 1 deletion apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
})
})
})
Expand Down Expand Up @@ -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' })
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -177,7 +174,7 @@ describe('RecordMetadataComponent', () => {
MockDataOtherlinksComponent,
MockDataApisComponent,
MockRelatedComponent,
SearchResultsErrorComponent,
ErrorComponent,
MockMetadataInfoComponent,
MockMetadataCatalogComponent,
MockMetadataContactComponent,
Expand Down Expand Up @@ -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()
})
})
Expand All @@ -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)
Expand All @@ -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
)
})
})
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion libs/ui/elements/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand Down
86 changes: 86 additions & 0 deletions libs/ui/elements/src/lib/error/error.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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()
})
})
})
})
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import {
ErrorType,
SearchResultsErrorComponent,
} from './search-results-error.component'
import { ErrorComponent, ErrorType } from './error.component'
import {
applicationConfig,
componentWrapperDecorator,
Expand All @@ -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],
Expand All @@ -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',
Expand All @@ -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,
],
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

This file was deleted.

Loading

0 comments on commit 48fd10a

Please sign in to comment.