diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index c6658996eb..c2a36d66e4 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -83,6 +83,8 @@ import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confi import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component'; import { environment } from '../environments/environment'; import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module'; +import { DemoErrorComponent } from './components/error/demo-error.component'; + import { UserPreferenceCloudService, PROCESS_FILTERS_SERVICE_TOKEN, @@ -171,6 +173,7 @@ registerLocaleData(localeSv); SharedLinkViewComponent, FormLoadingComponent, DemoPermissionComponent, + DemoErrorComponent, FormLoadingComponent, ReportIssueComponent, TreeViewSampleComponent, diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index a79b824203..14a23d5577 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/demo-shell/src/app/app.routes.ts @@ -57,6 +57,7 @@ import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-det import { TemplateDemoComponent } from './components/template-list/template-demo.component'; import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component'; import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component'; +import { DemoErrorComponent } from './components/error/demo-error.component'; export const appRoutes: Routes = [ { path: 'login', loadChildren: 'app/components/login/login.module#AppLoginModule' }, { path: 'logout', component: LogoutComponent }, @@ -414,7 +415,7 @@ export const appRoutes: Routes = [ }, { path: 'error/:id', - component: ErrorContentComponent + component: DemoErrorComponent }, { path: 'error/no-authorization', diff --git a/demo-shell/src/app/components/error/demo-error.component.html b/demo-shell/src/app/components/error/demo-error.component.html new file mode 100644 index 0000000000..ef9c274dd4 --- /dev/null +++ b/demo-shell/src/app/components/error/demo-error.component.html @@ -0,0 +1,15 @@ +
+ + + +
+ diff --git a/demo-shell/src/app/components/error/demo-error.component.scss b/demo-shell/src/app/components/error/demo-error.component.scss new file mode 100644 index 0000000000..d5a25c914a --- /dev/null +++ b/demo-shell/src/app/components/error/demo-error.component.scss @@ -0,0 +1,9 @@ +.adf-error-content { + + &-buttons { + display: flex; + width: 100%; + justify-content: space-evenly; + } +} + diff --git a/demo-shell/src/app/components/error/demo-error.component.ts b/demo-shell/src/app/components/error/demo-error.component.ts new file mode 100644 index 0000000000..e152d0f9da --- /dev/null +++ b/demo-shell/src/app/components/error/demo-error.component.ts @@ -0,0 +1,51 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Params, Router } from '@angular/router'; + +@Component({ + selector: 'app-demo-error', + styleUrls: ['./demo-error.component.scss'], + templateUrl: './demo-error.component.html' +}) +export class DemoErrorComponent implements OnInit { + + errorCode: string = ''; + + constructor(private route: ActivatedRoute, private router: Router) { + } + + ngOnInit() { + if (this.route) { + this.route.params.forEach((params: Params) => { + if (params['id']) { + this.errorCode = params['id']; + } + }); + } + } + + onReportIssue() { + this.router.navigate(['/report-issue']); + } + + onReturnButton() { + this.router.navigate(['/']); + } + +} diff --git a/docs/core/components/error-content.component.md b/docs/core/components/error-content.component.md index 79b32f4789..99cbc247e8 100644 --- a/docs/core/components/error-content.component.md +++ b/docs/core/components/error-content.component.md @@ -24,8 +24,6 @@ this.router.navigate(['/error', errorCode]); | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | | errorCode | `string` | | Error code associated with this error. | -| returnButtonUrl | `string` | "/" | Target URL for the return button. | -| secondaryButtonUrl | `string` | "report-issue" | Target URL for the secondary button. | ## Details @@ -49,6 +47,20 @@ You can customize your error messages by adding them to the translate files insi } ``` +## How to customise the action button. + +The errorContentComponent allows you to customise the actions section using the selector `adf-error-content-actions`. + +For example you can have a custom action button with the following code + +```html + +
+ +
+
+``` + ## See also - [Empty Content component](empty-content.component.md) diff --git a/e2e/core/error-component.e2e.ts b/e2e/core/error-component.e2e.ts index 6c32e6228a..9748ff413c 100644 --- a/e2e/core/error-component.e2e.ts +++ b/e2e/core/error-component.e2e.ts @@ -51,22 +51,6 @@ describe('Error Component', () => { await expect(await errorPage.getErrorDescription()).toBe('You\'re not allowed access to this resource on the server.'); }); - it('[C280563] Should back home button navigate to the home page', async () => { - await BrowserActions.getUrl(browser.params.testConfig.adf.url + '/error/404'); - - await errorPage.clickBackButton(); - - await expect(await browser.getCurrentUrl()).toBe(browser.params.testConfig.adf.url + '/'); - }); - - it('[C280564] Should secondary button by default redirect to report-issue URL', async () => { - await BrowserActions.getUrl(browser.params.testConfig.adf.url + '/error/403'); - - await errorPage.clickSecondButton(); - - await expect(await browser.getCurrentUrl()).toBe(browser.params.testConfig.adf.url + '/report-issue'); - }); - it('[C277304] Should display the error 404 when access to not found page', async () => { await BrowserActions.getUrl(browser.params.testConfig.adf.url + '/error/404'); await expect(await errorPage.getErrorCode()).toBe('404'); diff --git a/lib/core/templates/error-content/error-content.component.html b/lib/core/templates/error-content/error-content.component.html index c74df59e22..765e0ecdf0 100644 --- a/lib/core/templates/error-content/error-content.component.html +++ b/lib/core/templates/error-content/error-content.component.html @@ -9,14 +9,5 @@

{{ '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 daec3b990d..94d7048dcd 100644 --- a/lib/core/templates/error-content/error-content.component.scss +++ b/lib/core/templates/error-content/error-content.component.scss @@ -40,12 +40,6 @@ margin-bottom: 60px; line-height: 30px; } - - &-buttons { - display: flex; - width: 100%; - justify-content: space-evenly; - } } @media screen and ($mat-small) { 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 ed894cd388..01a6adf9e5 100644 --- a/lib/core/templates/error-content/error-content.component.spec.ts +++ b/lib/core/templates/error-content/error-content.component.spec.ts @@ -99,27 +99,6 @@ describe('ErrorContentComponent', () => { }); })); - it('should render secondary button with its value from the translate file', async(() => { - spyOn(translateService, 'instant').and.callFake(() => { - return 'Secondary Button'; - }); - fixture.detectChanges(); - fixture.whenStable().then(() => { - const errorContentElement = element.querySelector('#adf-secondary-button'); - expect(errorContentElement).not.toBeNull(); - expect(errorContentElement).toBeDefined(); - expect(errorContentElement.textContent).toContain('ERROR_CONTENT.UNKNOWN.SECONDARY_BUTTON.TEXT'); - - }); - })); - - it('should the default value of return button be /', async(() => { - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(errorContentComponent.returnButtonUrl).toBe('/'); - }); - })); - it('should navigate to the default error UNKNOWN if it does not find the error', async(() => { fixture.detectChanges(); fixture.whenStable().then(() => { diff --git a/lib/core/templates/error-content/error-content.component.ts b/lib/core/templates/error-content/error-content.component.ts index c37066691f..5ac7f93103 100644 --- a/lib/core/templates/error-content/error-content.component.ts +++ b/lib/core/templates/error-content/error-content.component.ts @@ -20,10 +20,9 @@ import { ChangeDetectionStrategy, Input, ViewEncapsulation, - OnInit, - AfterContentChecked + OnInit } from '@angular/core'; -import { Params, ActivatedRoute, Router } from '@angular/router'; +import { Params, ActivatedRoute } from '@angular/router'; import { TranslationService } from '../../services/translation.service'; @Component({ @@ -34,26 +33,15 @@ import { TranslationService } from '../../services/translation.service'; encapsulation: ViewEncapsulation.None, host: { class: 'adf-error-content' } }) -export class ErrorContentComponent implements OnInit, AfterContentChecked { +export class ErrorContentComponent implements OnInit { static UNKNOWN_ERROR = 'UNKNOWN'; - /** Target URL for the secondary button. */ - @Input() - secondaryButtonUrl: string = 'report-issue'; - - /** Target URL for the return button. */ - @Input() - returnButtonUrl: string = '/'; - /** Error code associated with this error. */ @Input() errorCode: string = ErrorContentComponent.UNKNOWN_ERROR; - hasSecondButton: boolean; - constructor(private route: ActivatedRoute, - private router: Router, private translateService: TranslationService) { } @@ -72,20 +60,4 @@ export class ErrorContentComponent implements OnInit, AfterContentChecked { return errorMessage !== ('ERROR_CONTENT.' + errorCode); } - getTranslations() { - this.hasSecondButton = this.translateService.instant( - 'ERROR_CONTENT.' + this.errorCode + '.SECONDARY_BUTTON.TEXT') ? true : false; - } - - ngAfterContentChecked() { - this.getTranslations(); - } - - onSecondButton() { - this.router.navigate(['/' + this.secondaryButtonUrl]); - } - - onReturnButton() { - this.router.navigate(['/' + this.returnButtonUrl]); - } } diff --git a/lib/testing/src/lib/core/pages/error.page.ts b/lib/testing/src/lib/core/pages/error.page.ts index 9cddc87152..cb3dc69e6c 100644 --- a/lib/testing/src/lib/core/pages/error.page.ts +++ b/lib/testing/src/lib/core/pages/error.page.ts @@ -25,16 +25,6 @@ export class ErrorPage { errorPageCode: ElementFinder = element(by.css('adf-error-content .adf-error-content-code')); errorPageTitle: ElementFinder = element(by.css('adf-error-content .adf-error-content-title')); errorPageDescription: ElementFinder = element(by.css('adf-error-content .adf-error-content-description')); - backButton: ElementFinder = element(by.id('adf-return-button')); - secondButton: ElementFinder = element(by.id('adf-secondary-button')); - - async clickBackButton(): Promise { - await BrowserActions.click(this.backButton); - } - - async clickSecondButton(): Promise { - await BrowserActions.click(this.secondButton); - } async checkErrorCode(): Promise { await BrowserVisibility.waitUntilElementIsVisible(this.errorPageCode);