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 }}
+
+
```
@@ -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 }}
+
+
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 {}