Skip to content

Commit

Permalink
[BP] 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 authored and jahow committed Jun 21, 2024
1 parent 0892e6d commit 05f9052
Show file tree
Hide file tree
Showing 20 changed files with 177 additions and 67 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
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 @@ -168,7 +165,7 @@ describe('RecordMetadataComponent', () => {
MockDataOtherlinksComponent,
MockDataApisComponent,
MockRelatedComponent,
SearchResultsErrorComponent,
ErrorComponent,
MockMetadataInfoComponent,
MockMetadataContactComponent,
MockRecordApiFormComponent,
Expand Down Expand Up @@ -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()
})
})
Expand All @@ -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)
Expand All @@ -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
)
})
})
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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),
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
3 changes: 1 addition & 2 deletions libs/ui/elements/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ export * from './lib/metadata-info/metadata-info.component'
export * from './lib/metadata-contact/metadata-contact.component'
export * from './lib/metadata-quality/metadata-quality.component'
export * from './lib/metadata-quality-item/metadata-quality-item.component'
export * from './lib/search-results-error/search-results-error.component'
export * from './lib/thumbnail/thumbnail.component'
export * from './lib/content-ghost/content-ghost.component'
export * from './lib/pagination-buttons/pagination-buttons.component'
Expand All @@ -15,7 +14,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'
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 05f9052

Please sign in to comment.