mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2753] Error Component throwing default error fixed (#3364)
* [ADF-1938] Overflowing text in reports section fidex * [ADF-1938] Long names in report section now fit * [ADF-1938] Reverted changes in container widget * [ADF-2753] New error component created * [ADF-2753] Unit test for Error Content Component * Deleting unused files * Deleting unused files * Deleting unused files * [ADF-2753] Documentation added * [ADF-2753] Error Component throwing default error fixed * [ADF-2753] White space removed * [ADF-2753] Removed unnecessary files and updated trnaslation file * [ADF-2753] Changed link for button in error component * [ADF-2753] Updated doc file * [ADF-2753] Removed fdescribe * [ADF-2753] Improved code coverage
This commit is contained in:
committed by
Eugenio Romano
parent
39f76a11c4
commit
fa2613f096
@@ -12,13 +12,26 @@ this.router.navigate(['/error', errorCode]);
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="adf-error-content">
|
<div class="adf-error-content">
|
||||||
<p class="adf-error-content-code">{{ errorCode }}</p>
|
<p class="adf-error-content-code">
|
||||||
|
{{ errorCode }}
|
||||||
|
</p>
|
||||||
<div class="adf-error-content-shadow"></div>
|
<div class="adf-error-content-shadow"></div>
|
||||||
<p class="adf-error-content-title">{{ errorTitle | translate }}</p>
|
<p class="adf-error-content-title">
|
||||||
<p class="adf-error-content-description">{{ errorDescription | translate }}
|
{{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }}
|
||||||
<a href="{{errorLinkUrl}}" *ngIf="errorLinkText"
|
</p>
|
||||||
class="adf-error-content-description-link" > {{ errorLinkText | translate }}</a></p>
|
<p class="adf-error-content-description">
|
||||||
<button mat-raised-button color="primary" routerLink="/home">{{ homeButton | translate}}</button>
|
{{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }}
|
||||||
|
</p>
|
||||||
|
<div class="adf-error-content-buttons">
|
||||||
|
<a href="/" mat-raised-button color="primary"
|
||||||
|
*ngIf="secondaryButtonText" (click)="onSecondButton()"
|
||||||
|
class="adf-error-content-description-link">
|
||||||
|
{{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
|
||||||
|
</a>
|
||||||
|
<a href="/" mat-raised-button color="primary" (click)="onReturnButton()">
|
||||||
|
{{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -29,31 +42,28 @@ this.router.navigate(['/error', errorCode]);
|
|||||||
| Name | Type | Description |
|
| Name | Type | Description |
|
||||||
| ---- | ---- | ----------- |
|
| ---- | ---- | ----------- |
|
||||||
| errorCode | string | Error code |
|
| errorCode | string | Error code |
|
||||||
| errorTitle | string | Error title |
|
| returnButtonUrl | string | This is the text that will be displayed inside the secondary button |
|
||||||
| errorDescription | string | Short description about the error |
|
| secondaryButtonText | string | (Optional) This is the text that will be displayed inside the secondary button |
|
||||||
| errorLink | string | (Optional) This link will be attached at the end of the error description and itt will be highlighted. |
|
| 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
|
## 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
|
```json
|
||||||
"ERROR_CONTENT": {
|
"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": {
|
"404": {
|
||||||
"TITLE": "Whoops!",
|
"TITLE": "An error occurred.",
|
||||||
"DESCRIPTION": "We couldn’t find the page you were looking for.",
|
"DESCRIPTION": "We couldn’t find the page you were looking for.",
|
||||||
"LINK": {
|
"SECONDARY_BUTTON": {
|
||||||
"TEXT": "",
|
"TEXT": "",
|
||||||
"URL": ""
|
"URL": ""
|
||||||
|
},
|
||||||
|
"RETURN_BUTTON": {
|
||||||
|
"TEXT": "Back to home",
|
||||||
|
"ROUTE": "home"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -41,7 +41,7 @@ import { FormModule } from './form/form.module';
|
|||||||
import { SidenavLayoutModule } from './sidenav-layout/sidenav-layout.module';
|
import { SidenavLayoutModule } from './sidenav-layout/sidenav-layout.module';
|
||||||
import { CommentsModule } from './comments/comments.module';
|
import { CommentsModule } from './comments/comments.module';
|
||||||
import { ButtonsMenuModule } from './buttons-menu/buttons-menu.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 { DirectiveModule } from './directives/directive.module';
|
||||||
import { PipeModule } from './pipes/pipe.module';
|
import { PipeModule } from './pipes/pipe.module';
|
||||||
@@ -155,7 +155,7 @@ export function providers() {
|
|||||||
DataColumnModule,
|
DataColumnModule,
|
||||||
DataTableModule,
|
DataTableModule,
|
||||||
ButtonsMenuModule,
|
ButtonsMenuModule,
|
||||||
TemplatetModule,
|
TemplateModule,
|
||||||
TranslateModule.forChild({
|
TranslateModule.forChild({
|
||||||
loader: {
|
loader: {
|
||||||
provide: TranslateLoader,
|
provide: TranslateLoader,
|
||||||
@@ -193,7 +193,7 @@ export function providers() {
|
|||||||
DataTableModule,
|
DataTableModule,
|
||||||
TranslateModule,
|
TranslateModule,
|
||||||
ButtonsMenuModule,
|
ButtonsMenuModule,
|
||||||
TemplatetModule,
|
TemplateModule,
|
||||||
SortingPickerModule
|
SortingPickerModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@@ -228,7 +228,7 @@ export class CoreModuleLazy {
|
|||||||
DataColumnModule,
|
DataColumnModule,
|
||||||
DataTableModule,
|
DataTableModule,
|
||||||
ButtonsMenuModule,
|
ButtonsMenuModule,
|
||||||
TemplatetModule,
|
TemplateModule,
|
||||||
TranslateModule.forRoot({
|
TranslateModule.forRoot({
|
||||||
loader: {
|
loader: {
|
||||||
provide: TranslateLoader,
|
provide: TranslateLoader,
|
||||||
@@ -266,7 +266,7 @@ export class CoreModuleLazy {
|
|||||||
DataTableModule,
|
DataTableModule,
|
||||||
TranslateModule,
|
TranslateModule,
|
||||||
ButtonsMenuModule,
|
ButtonsMenuModule,
|
||||||
TemplatetModule,
|
TemplateModule,
|
||||||
SortingPickerModule
|
SortingPickerModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
|
@@ -264,29 +264,40 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"ERROR_CONTENT": {
|
"ERROR_CONTENT": {
|
||||||
"HOME_BUTTON": "Back to home",
|
|
||||||
"UNKNOWN": {
|
"UNKNOWN": {
|
||||||
"TITLE": "Oops!",
|
"TITLE": "Oops!",
|
||||||
"DESCRIPTION": "Looks like something went wrong.",
|
"DESCRIPTION": "Looks like something went wrong.",
|
||||||
"LINK": {
|
"SECONDARY_BUTTON": {
|
||||||
"TEXT": "",
|
"TEXT": "",
|
||||||
"URL": ""
|
"URL": ""
|
||||||
|
},
|
||||||
|
"RETURN_BUTTON": {
|
||||||
|
"TEXT": "Back to home",
|
||||||
|
"ROUTE": "home"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"403": {
|
"403": {
|
||||||
"TITLE": "Error 403 forbidden!",
|
"TITLE": "Error 403 forbidden",
|
||||||
"DESCRIPTION": "Sorry, access to this resource on the server is denied. Either check URL or feel free to",
|
"DESCRIPTION": "Access to this resource on the server is denied.",
|
||||||
"LINK": {
|
"SECONDARY_BUTTON": {
|
||||||
"TEXT": "report this issue.",
|
"TEXT": "Report issue",
|
||||||
"URL": ""
|
"URL": ""
|
||||||
|
},
|
||||||
|
"RETURN_BUTTON": {
|
||||||
|
"TEXT": "Back to home",
|
||||||
|
"ROUTE": "home"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"404": {
|
"404": {
|
||||||
"TITLE": "Whoops!",
|
"TITLE": "An error occurred.",
|
||||||
"DESCRIPTION": "We couldn’t find the page you were looking for.",
|
"DESCRIPTION": "We couldn’t find the page you were looking for.",
|
||||||
"LINK": {
|
"SECONDARY_BUTTON": {
|
||||||
"TEXT": "",
|
"TEXT": "",
|
||||||
"URL": ""
|
"URL": ""
|
||||||
|
},
|
||||||
|
"RETURN_BUTTON": {
|
||||||
|
"TEXT": "Back to home",
|
||||||
|
"ROUTE": "home"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1,9 +1,22 @@
|
|||||||
<div class="adf-error-content">
|
<div class="adf-error-content">
|
||||||
<p class="adf-error-content-code">{{ errorCode }}</p>
|
<p class="adf-error-content-code">
|
||||||
|
{{ errorCode }}
|
||||||
|
</p>
|
||||||
<div class="adf-error-content-shadow"></div>
|
<div class="adf-error-content-shadow"></div>
|
||||||
<p class="adf-error-content-title">{{ errorTitle | translate }}</p>
|
<p class="adf-error-content-title">
|
||||||
<p class="adf-error-content-description">{{ errorDescription | translate }}
|
{{ 'ERROR_CONTENT.' + errorCode + '.TITLE' | translate }}
|
||||||
<a href="{{errorLinkUrl}}" *ngIf="errorLinkText"
|
</p>
|
||||||
class="adf-error-content-description-link" > {{ errorLinkText | translate }}</a></p>
|
<p class="adf-error-content-description">
|
||||||
<a href="" mat-raised-button color="primary" routerLink="/home">{{ homeButton | translate}}</a>
|
{{ 'ERROR_CONTENT.' + errorCode + '.DESCRIPTION' | translate }}
|
||||||
|
</p>
|
||||||
|
<div class="adf-error-content-buttons">
|
||||||
|
<a href="/" mat-raised-button color="primary"
|
||||||
|
*ngIf="secondaryButtonText" (click)="onSecondButton()"
|
||||||
|
class="adf-error-content-description-link">
|
||||||
|
{{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
|
||||||
|
</a>
|
||||||
|
<a href="/" mat-raised-button color="primary" (click)="onReturnButton()">
|
||||||
|
{{ 'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.TEXT' | translate | uppercase }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -39,11 +39,12 @@
|
|||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
|
||||||
&-link{
|
|
||||||
color: mat-color($primary);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-buttons {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -15,8 +15,6 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/*tslint:disable:ban*/
|
|
||||||
|
|
||||||
import { TestBed, async } from '@angular/core/testing';
|
import { TestBed, async } from '@angular/core/testing';
|
||||||
import { CoreTestingModule } from '../../testing/core.testing.module';
|
import { CoreTestingModule } from '../../testing/core.testing.module';
|
||||||
import { ErrorContentComponent } from './error-content.component';
|
import { ErrorContentComponent } from './error-content.component';
|
||||||
@@ -76,17 +74,14 @@ describe('ErrorContentComponent', () => {
|
|||||||
expect(errorContentElement).toBeDefined();
|
expect(errorContentElement).toBeDefined();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
it('should render report issue links', async(() => {
|
it('should render error description', async(() => {
|
||||||
errorContentComponent.errorLinkUrl = '403 Link';
|
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
fixture.whenStable().then(() => {
|
const errorContentElement = element.querySelector('.adf-error-content-description');
|
||||||
const errorContentElement = element.querySelector('.adf-error-content-description-link');
|
|
||||||
expect(errorContentElement).not.toBeNull();
|
expect(errorContentElement).not.toBeNull();
|
||||||
expect(errorContentElement).toBeDefined();
|
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) => {
|
spyOn(translateService, 'instant').and.callFake((inputString) => {
|
||||||
return '';
|
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');
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@@ -16,7 +16,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core';
|
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';
|
import { TranslationService } from '../../services/translation.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@@ -30,15 +30,12 @@ import { TranslationService } from '../../services/translation.service';
|
|||||||
export class ErrorContentComponent implements OnInit {
|
export class ErrorContentComponent implements OnInit {
|
||||||
|
|
||||||
errorCode: string;
|
errorCode: string;
|
||||||
|
secondaryButtonText: string;
|
||||||
errorTitle: string;
|
secondaryButtonUrl: string;
|
||||||
errorDescription: string;
|
returnButtonUrl: string;
|
||||||
errorLinkText: string;
|
|
||||||
errorLinkUrl: string;
|
|
||||||
|
|
||||||
homeButton: string;
|
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
|
private router: Router,
|
||||||
private translateService: TranslationService) {
|
private translateService: TranslationService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,28 +49,26 @@ export class ErrorContentComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.getData();
|
this.getData();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getData() {
|
getData() {
|
||||||
this.errorTitle = this.translateService.instant(
|
this.returnButtonUrl = this.translateService.instant(
|
||||||
'ERROR_CONTENT.' + this.errorCode + '.TITLE');
|
'ERROR_CONTENT.' + this.errorCode + '.RETURN_BUTTON.ROUTE');
|
||||||
|
|
||||||
if (this.errorTitle === 'ERROR_CONTENT.' + this.errorCode + '.TITLE') {
|
this.secondaryButtonText = this.translateService.instant(
|
||||||
this.errorCode = 'UNKNOWN';
|
'ERROR_CONTENT.' + this.errorCode + '.SECONDARY_BUTTON.TEXT');
|
||||||
this.errorTitle = this.translateService.instant(
|
|
||||||
'ERROR_CONTENT.' + this.errorCode + '.TITLE');
|
if (this.secondaryButtonText) {
|
||||||
|
this.secondaryButtonUrl = this.translateService.instant(
|
||||||
|
'ERROR_CONTENT.' + this.errorCode + '.SECONDARY_BUTTON.URL');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.errorDescription = this.translateService.instant(
|
onSecondButton() {
|
||||||
'ERROR_CONTENT.' + this.errorCode + '.DESCRIPTION');
|
this.router.navigate(['/' + this.secondaryButtonUrl]);
|
||||||
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();
|
|
||||||
|
|
||||||
|
onReturnButton() {
|
||||||
|
this.router.navigate(['/' + this.returnButtonUrl]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -37,4 +37,4 @@ import { EmptyContentComponent } from './empty-content/empty-content.component';
|
|||||||
EmptyContentComponent
|
EmptyContentComponent
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class TemplatetModule {}
|
export class TemplateModule {}
|
||||||
|
Reference in New Issue
Block a user