diff --git a/docs/core/error-content.component.md b/docs/core/error-content.component.md index 7c20268571..5c6533c1a5 100644 --- a/docs/core/error-content.component.md +++ b/docs/core/error-content.component.md @@ -12,13 +12,26 @@ this.router.navigate(['/error', errorCode]); ```html
-

{{ errorCode }}

+

+ {{ errorCode }} +

-

{{ errorTitle | translate }}

-

{{ errorDescription | translate }} - {{ errorLinkText | translate }}

- +

+ {{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }} +

+

+ {{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }} +

+
+ + {{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }} + + + {{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }} + +
``` @@ -29,31 +42,28 @@ this.router.navigate(['/error', errorCode]); | Name | Type | Description | | ---- | ---- | ----------- | | errorCode | string | Error code | -| errorTitle | string | Error title | -| errorDescription | string | Short description about the error | -| errorLink | string | (Optional) This link will be attached at the end of the error description and itt will be highlighted. | +| returnButtonUrl | string | This is the text that will be displayed inside the secondary button | +| secondaryButtonText | string | (Optional) This is the text that will be displayed inside the secondary button | +| secondaryButtonUrl | string | (Optional) This is the link for the secondary button | + +Notice that you will also have to provide values for the variables used in the view template. ## Details -You can customize your errors by adding them to the tranlate files inside `lib/core/i18n`. +You can customize your errors by adding them to the translate files inside `lib/core/i18n`. ```json "ERROR_CONTENT": { - "HOME_BUTTON": "Back to home", - "403": { - "TITLE": "Error 403 forbidden!", - "DESCRIPTION": "Sorry, access to this resource on the server is denied. Either check URL or feel free to", - "LINK": { - "TEXT": "report this issue.", - "URL": "" - } - }, "404": { - "TITLE": "Whoops!", + "TITLE": "An error occurred.", "DESCRIPTION": "We couldn’t find the page you were looking for.", - "LINK": { + "SECONDARY_BUTTON": { "TEXT": "", "URL": "" + }, + "RETURN_BUTTON": { + "TEXT": "Back to home", + "ROUTE": "home" } } } diff --git a/lib/core/core.module.ts b/lib/core/core.module.ts index d91aac0514..9e0acf10fd 100644 --- a/lib/core/core.module.ts +++ b/lib/core/core.module.ts @@ -41,7 +41,7 @@ import { FormModule } from './form/form.module'; import { SidenavLayoutModule } from './sidenav-layout/sidenav-layout.module'; import { CommentsModule } from './comments/comments.module'; import { ButtonsMenuModule } from './buttons-menu/buttons-menu.module'; -import { TemplatetModule } from './templates/template.module'; +import { TemplateModule } from './templates/template.module'; import { DirectiveModule } from './directives/directive.module'; import { PipeModule } from './pipes/pipe.module'; @@ -155,7 +155,7 @@ export function providers() { DataColumnModule, DataTableModule, ButtonsMenuModule, - TemplatetModule, + TemplateModule, TranslateModule.forChild({ loader: { provide: TranslateLoader, @@ -193,7 +193,7 @@ export function providers() { DataTableModule, TranslateModule, ButtonsMenuModule, - TemplatetModule, + TemplateModule, SortingPickerModule ] }) @@ -228,7 +228,7 @@ export class CoreModuleLazy { DataColumnModule, DataTableModule, ButtonsMenuModule, - TemplatetModule, + TemplateModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, @@ -266,7 +266,7 @@ export class CoreModuleLazy { DataTableModule, TranslateModule, ButtonsMenuModule, - TemplatetModule, + TemplateModule, SortingPickerModule ], providers: [ diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json index efbbf1983e..bb046947f6 100644 --- a/lib/core/i18n/en.json +++ b/lib/core/i18n/en.json @@ -264,29 +264,40 @@ } }, "ERROR_CONTENT": { - "HOME_BUTTON": "Back to home", "UNKNOWN": { "TITLE": "Oops!", "DESCRIPTION": "Looks like something went wrong.", - "LINK": { + "SECONDARY_BUTTON": { "TEXT": "", "URL": "" + }, + "RETURN_BUTTON": { + "TEXT": "Back to home", + "ROUTE": "home" } }, "403": { - "TITLE": "Error 403 forbidden!", - "DESCRIPTION": "Sorry, access to this resource on the server is denied. Either check URL or feel free to", - "LINK": { - "TEXT": "report this issue.", + "TITLE": "Error 403 forbidden", + "DESCRIPTION": "Access to this resource on the server is denied.", + "SECONDARY_BUTTON": { + "TEXT": "Report issue", "URL": "" + }, + "RETURN_BUTTON": { + "TEXT": "Back to home", + "ROUTE": "home" } }, "404": { - "TITLE": "Whoops!", + "TITLE": "An error occurred.", "DESCRIPTION": "We couldn’t find the page you were looking for.", - "LINK": { + "SECONDARY_BUTTON": { "TEXT": "", "URL": "" + }, + "RETURN_BUTTON": { + "TEXT": "Back to home", + "ROUTE": "home" } } } diff --git a/lib/core/templates/error-content/error-content.component.html b/lib/core/templates/error-content/error-content.component.html index 935ba2c2a0..55ab5c899d 100644 --- a/lib/core/templates/error-content/error-content.component.html +++ b/lib/core/templates/error-content/error-content.component.html @@ -1,9 +1,22 @@
-

{{ errorCode }}

+

+ {{ errorCode }} +

-

{{ errorTitle | translate }}

-

{{ errorDescription | translate }} - {{ errorLinkText | translate }}

- {{ homeButton | translate}} +

+ {{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }} +

+

+ {{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }} +

+
+ + {{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }} + + + {{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }} + +
diff --git a/lib/core/templates/error-content/error-content.component.scss b/lib/core/templates/error-content/error-content.component.scss index ae88b499a0..89c17ed97d 100644 --- a/lib/core/templates/error-content/error-content.component.scss +++ b/lib/core/templates/error-content/error-content.component.scss @@ -39,11 +39,12 @@ min-width: 250px; margin-bottom: 60px; line-height: 30px; + } - &-link{ - color: mat-color($primary); - text-decoration: none; - } + &-buttons { + display: flex; + width: 100%; + justify-content: space-evenly; } } diff --git a/lib/core/templates/error-content/error-content.component.spec.ts b/lib/core/templates/error-content/error-content.component.spec.ts index 53514cc7d5..16708f88d6 100644 --- a/lib/core/templates/error-content/error-content.component.spec.ts +++ b/lib/core/templates/error-content/error-content.component.spec.ts @@ -15,8 +15,6 @@ * limitations under the License. */ -/*tslint:disable:ban*/ - import { TestBed, async } from '@angular/core/testing'; import { CoreTestingModule } from '../../testing/core.testing.module'; import { ErrorContentComponent } from './error-content.component'; @@ -76,17 +74,14 @@ describe('ErrorContentComponent', () => { expect(errorContentElement).toBeDefined(); })); - it('should render report issue links', async(() => { - errorContentComponent.errorLinkUrl = '403 Link'; + it('should render error description', async(() => { fixture.detectChanges(); - fixture.whenStable().then(() => { - const errorContentElement = element.querySelector('.adf-error-content-description-link'); - expect(errorContentElement).not.toBeNull(); - expect(errorContentElement).toBeDefined(); - }); + const errorContentElement = element.querySelector('.adf-error-content-description'); + expect(errorContentElement).not.toBeNull(); + expect(errorContentElement).toBeDefined(); })); - it('should hide link if this one is empty', async(() => { + it('should hide secondary button if this one has no value', async(() => { spyOn(translateService, 'instant').and.callFake((inputString) => { return ''; } ); @@ -97,4 +92,27 @@ describe('ErrorContentComponent', () => { }); })); + it('should render secondary button with its value from the translate file', async(() => { + spyOn(translateService, 'instant').and.callFake((inputString) => { + return 'Secondary Button'; + } ); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(errorContentComponent.secondaryButtonText).toBe('Secondary Button'); + const errorContentElement = element.querySelector('.adf-error-content-description-link'); + expect(errorContentElement).not.toBeNull(); + expect(errorContentElement).toBeDefined(); + }); + })); + + it('should render return button with its value from the translate file', async(() => { + spyOn(translateService, 'instant').and.callFake((inputString) => { + return 'Home'; + } ); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(errorContentComponent.returnButtonUrl).toBe('Home'); + }); + })); + }); diff --git a/lib/core/templates/error-content/error-content.component.ts b/lib/core/templates/error-content/error-content.component.ts index 3eb3d6b268..88a097f5b6 100644 --- a/lib/core/templates/error-content/error-content.component.ts +++ b/lib/core/templates/error-content/error-content.component.ts @@ -16,7 +16,7 @@ */ import { Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core'; -import { Params, ActivatedRoute } from '@angular/router'; +import { Params, ActivatedRoute, Router } from '@angular/router'; import { TranslationService } from '../../services/translation.service'; @Component({ @@ -30,15 +30,12 @@ import { TranslationService } from '../../services/translation.service'; export class ErrorContentComponent implements OnInit { errorCode: string; - - errorTitle: string; - errorDescription: string; - errorLinkText: string; - errorLinkUrl: string; - - homeButton: string; + secondaryButtonText: string; + secondaryButtonUrl: string; + returnButtonUrl: string; constructor(private route: ActivatedRoute, + private router: Router, private translateService: TranslationService) { } @@ -52,28 +49,26 @@ export class ErrorContentComponent implements OnInit { } this.getData(); - } getData() { - this.errorTitle = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.TITLE'); + this.returnButtonUrl = this.translateService.instant( + 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.ROUTE'); - if (this.errorTitle === 'ERROR_CONTENT.' + this.errorCode + '.TITLE') { - this.errorCode = 'UNKNOWN'; - this.errorTitle = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.TITLE'); + this.secondaryButtonText = this.translateService.instant( + 'ERROR_CONTENT.' + this.errorCode + '.SECONDARY_BUTTON.TEXT'); + + if (this.secondaryButtonText) { + this.secondaryButtonUrl = this.translateService.instant( + 'ERROR_CONTENT.' + this.errorCode + '.SECONDARY_BUTTON.URL'); } + } - this.errorDescription = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.DESCRIPTION'); - this.errorLinkText = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.LINK.TEXT'); - this.errorLinkUrl = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.LINK.URL'); - - this.homeButton = this.translateService.instant( - 'ERROR_CONTENT.HOME_BUTTON').toUpperCase(); + onSecondButton() { + this.router.navigate(['/' + this.secondaryButtonUrl]); + } + onReturnButton() { + this.router.navigate(['/' + this.returnButtonUrl]); } } diff --git a/lib/core/templates/template.module.ts b/lib/core/templates/template.module.ts index e357ac560c..fb6ec2d54e 100644 --- a/lib/core/templates/template.module.ts +++ b/lib/core/templates/template.module.ts @@ -37,4 +37,4 @@ import { EmptyContentComponent } from './empty-content/empty-content.component'; EmptyContentComponent ] }) -export class TemplatetModule {} +export class TemplateModule {}