From 1def8000f06e92a78297806a760be7fabdda3c6f Mon Sep 17 00:00:00 2001 From: davidcanonieto Date: Mon, 18 May 2020 09:39:58 +0100 Subject: [PATCH] [ACA-3317] Split About component into smaller components (#5708) --- .../app/components/about/about.component.html | 13 +++-- .../app/components/about/about.component.ts | 20 +++++-- .../about-github-link.component.html | 14 +---- .../about-github-link.component.spec.ts | 22 ++------ .../about-github-link.component.ts | 19 ++----- .../about-server-settings.component.html | 12 +++++ .../about-server-settings.component.scss | 3 ++ .../about-server-settings.component.spec.ts | 54 +++++++++++++++++++ .../about-server-settings.component.ts | 36 +++++++++++++ lib/core/about/about.module.ts | 7 ++- lib/core/about/public-api.ts | 1 + 11 files changed, 142 insertions(+), 59 deletions(-) create mode 100644 lib/core/about/about-server-settings/about-server-settings.component.html create mode 100644 lib/core/about/about-server-settings/about-server-settings.component.scss create mode 100644 lib/core/about/about-server-settings/about-server-settings.component.spec.ts create mode 100644 lib/core/about/about-server-settings/about-server-settings.component.ts diff --git a/demo-shell/src/app/components/about/about.component.html b/demo-shell/src/app/components/about/about.component.html index 82efb08802..128de1104d 100644 --- a/demo-shell/src/app/components/about/about.component.html +++ b/demo-shell/src/app/components/about/about.component.html @@ -1,12 +1,11 @@ - - + - - + + + + [showExtensions]="showExtensions" +> diff --git a/demo-shell/src/app/components/about/about.component.ts b/demo-shell/src/app/components/about/about.component.ts index 04c34daa83..09105d771e 100644 --- a/demo-shell/src/app/components/about/about.component.ts +++ b/demo-shell/src/app/components/about/about.component.ts @@ -15,22 +15,32 @@ * limitations under the License. */ -import { Component } from '@angular/core'; -import { name, version, commit, dependencies } from '../../../../../package.json'; +import { Component, OnInit } from '@angular/core'; +import { + name, + version, + commit, + dependencies +} from '../../../../../package.json'; +import { AppConfigService } from '@alfresco/adf-core'; @Component({ selector: 'app-about-page', templateUrl: './about.component.html', styleUrls: ['about.component.scss'] }) -export class AboutComponent { - +export class AboutComponent implements OnInit { url = `https://github.com/Alfresco/${name}/commits/${commit}`; version = version; dependencies = dependencies; showExtensions = true; + application = ''; - constructor() { + constructor(private appConfigService: AppConfigService) {} + ngOnInit() { + this.application = this.appConfigService.get( + 'application.name' + ); } } diff --git a/lib/core/about/about-github-link/about-github-link.component.html b/lib/core/about/about-github-link/about-github-link.component.html index 5a70770e04..07511416d3 100644 --- a/lib/core/about/about-github-link/about-github-link.component.html +++ b/lib/core/about/about-github-link/about-github-link.component.html @@ -1,9 +1,8 @@
-

{{ application }}

-

{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}

+

{{application}}

{{ 'ABOUT.VERSION' | translate }}: {{ version }}

@@ -14,15 +13,4 @@
- -

{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}

- {{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }} - -

- {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }} -

-

- {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }} -

-
diff --git a/lib/core/about/about-github-link/about-github-link.component.spec.ts b/lib/core/about/about-github-link/about-github-link.component.spec.ts index 94ec7e250e..d40a8cddb8 100644 --- a/lib/core/about/about-github-link/about-github-link.component.spec.ts +++ b/lib/core/about/about-github-link/about-github-link.component.spec.ts @@ -19,13 +19,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CoreTestingModule } from '../../testing/core.testing.module'; import { setupTestBed } from '../../testing/setup-test-bed'; import { AboutGithubLinkComponent } from './about-github-link.component'; -import { AppConfigService } from '../../app-config/app-config.service'; import { aboutGithubDetails } from '../about.mock'; describe('AboutGithubLinkComponent', () => { let fixture: ComponentFixture; let component: AboutGithubLinkComponent; - let appConfigService: AppConfigService; setupTestBed({ imports: [CoreTestingModule] @@ -34,14 +32,6 @@ describe('AboutGithubLinkComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(AboutGithubLinkComponent); component = fixture.componentInstance; - appConfigService = TestBed.get(AppConfigService); - appConfigService.config = Object.assign(appConfigService.config, { - 'ecmHost': aboutGithubDetails.ecmHost, - 'bpmHost': aboutGithubDetails.bpmHost, - 'application': { - 'name': aboutGithubDetails.appName - } - }); fixture.detectChanges(); }); @@ -49,7 +39,10 @@ describe('AboutGithubLinkComponent', () => { fixture.destroy(); }); - it('Should fetch appName for app.config and display as title', () => { + it('Should fetch appName for app.config and display as title', async () => { + component.application = 'mock-application-name'; + fixture.detectChanges(); + await fixture.whenStable(); const titleElement = fixture.nativeElement.querySelector('[data-automation-id="adf-github-app-title"]'); expect(titleElement === null).toBeFalsy(); expect(titleElement.innerText).toEqual('mock-application-name'); @@ -77,11 +70,4 @@ describe('AboutGithubLinkComponent', () => { const githubUrl = fixture.nativeElement.querySelector('[data-automation-id="adf-github-url"]'); expect(githubUrl.innerText).toEqual(aboutGithubDetails.url); }); - - it('should fetch process and content hosts from the app.config.json file', async() => { - await fixture.whenStable(); - expect(component.application).toEqual(aboutGithubDetails.appName); - expect(component.bpmHost).toEqual(aboutGithubDetails.bpmHost); - expect(component.ecmHost).toEqual(aboutGithubDetails.ecmHost); - }); }); diff --git a/lib/core/about/about-github-link/about-github-link.component.ts b/lib/core/about/about-github-link/about-github-link.component.ts index f5950244c8..0a1a9f2ed2 100644 --- a/lib/core/about/about-github-link/about-github-link.component.ts +++ b/lib/core/about/about-github-link/about-github-link.component.ts @@ -15,16 +15,14 @@ * limitations under the License. */ -import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'adf-about-github-link', templateUrl: './about-github-link.component.html', encapsulation: ViewEncapsulation.None }) -export class AboutGithubLinkComponent implements OnInit { - +export class AboutGithubLinkComponent { /** Commit corresponding to the version of ADF to be used. */ @Input() url = 'https://github.com/Alfresco/alfresco-ng2-components/commits/'; @@ -32,15 +30,8 @@ export class AboutGithubLinkComponent implements OnInit { /** Current version of the app running */ @Input() version: string; - ecmHost = ''; - bpmHost = ''; - application: string; + /** Current version of the app running */ + @Input() application: string; - constructor(private appConfig: AppConfigService) {} - - ngOnInit() { - this.ecmHost = this.appConfig.get(AppConfigValues.ECMHOST); - this.bpmHost = this.appConfig.get(AppConfigValues.BPMHOST); - this.application = this.appConfig.get('application.name'); - } + constructor() {} } diff --git a/lib/core/about/about-server-settings/about-server-settings.component.html b/lib/core/about/about-server-settings/about-server-settings.component.html new file mode 100644 index 0000000000..80707575e0 --- /dev/null +++ b/lib/core/about/about-server-settings/about-server-settings.component.html @@ -0,0 +1,12 @@ +
+

{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}

+ {{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }} + +

+ {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }} +

+

+ {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }} +

+ +
diff --git a/lib/core/about/about-server-settings/about-server-settings.component.scss b/lib/core/about/about-server-settings/about-server-settings.component.scss new file mode 100644 index 0000000000..16d6a6e6ac --- /dev/null +++ b/lib/core/about/about-server-settings/about-server-settings.component.scss @@ -0,0 +1,3 @@ +.adf-github-link-container { + padding: 10px; +} diff --git a/lib/core/about/about-server-settings/about-server-settings.component.spec.ts b/lib/core/about/about-server-settings/about-server-settings.component.spec.ts new file mode 100644 index 0000000000..8f3de788cd --- /dev/null +++ b/lib/core/about/about-server-settings/about-server-settings.component.spec.ts @@ -0,0 +1,54 @@ +/*! + * @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 { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CoreTestingModule } from '../../testing/core.testing.module'; +import { setupTestBed } from '../../testing/setup-test-bed'; +import { AboutServerSettingsComponent } from './about-server-settings.component'; +import { AppConfigService } from '../../app-config/app-config.service'; +import { aboutGithubDetails } from '../about.mock'; + +describe('AboutServerSettingsComponent', () => { + let fixture: ComponentFixture; + let component: AboutServerSettingsComponent; + let appConfigService: AppConfigService; + + setupTestBed({ + imports: [CoreTestingModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutServerSettingsComponent); + component = fixture.componentInstance; + appConfigService = TestBed.get(AppConfigService); + appConfigService.config = Object.assign(appConfigService.config, { + 'ecmHost': aboutGithubDetails.ecmHost, + 'bpmHost': aboutGithubDetails.bpmHost + }); + fixture.detectChanges(); + }); + + afterEach(() => { + fixture.destroy(); + }); + + it('should fetch process and content hosts from the app.config.json file', async() => { + await fixture.whenStable(); + expect(component.bpmHost).toEqual(aboutGithubDetails.bpmHost); + expect(component.ecmHost).toEqual(aboutGithubDetails.ecmHost); + }); +}); diff --git a/lib/core/about/about-server-settings/about-server-settings.component.ts b/lib/core/about/about-server-settings/about-server-settings.component.ts new file mode 100644 index 0000000000..674c6f6090 --- /dev/null +++ b/lib/core/about/about-server-settings/about-server-settings.component.ts @@ -0,0 +1,36 @@ +/*! + * @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, ViewEncapsulation } from '@angular/core'; +import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service'; + +@Component({ + selector: 'adf-about-server-settings', + templateUrl: './about-server-settings.component.html', + encapsulation: ViewEncapsulation.None +}) +export class AboutServerSettingsComponent implements OnInit { + ecmHost = ''; + bpmHost = ''; + + constructor(private appConfig: AppConfigService) {} + + ngOnInit() { + this.ecmHost = this.appConfig.get(AppConfigValues.ECMHOST); + this.bpmHost = this.appConfig.get(AppConfigValues.BPMHOST); + } +} diff --git a/lib/core/about/about.module.ts b/lib/core/about/about.module.ts index 9e2f4e3db3..04406362e1 100644 --- a/lib/core/about/about.module.ts +++ b/lib/core/about/about.module.ts @@ -23,6 +23,7 @@ import { DataTableModule } from '../datatable/datatable.module'; import { AboutApplicationModulesComponent } from './about-application-modules/about-application-modules.component'; import { AboutProductVersionComponent } from './about-product-version/about-product-version.component'; import { AboutGithubLinkComponent } from './about-github-link/about-github-link.component'; +import { AboutServerSettingsComponent } from './about-server-settings/about-server-settings.component'; @NgModule({ imports: [ @@ -34,12 +35,14 @@ import { AboutGithubLinkComponent } from './about-github-link/about-github-link. declarations: [ AboutApplicationModulesComponent, AboutProductVersionComponent, - AboutGithubLinkComponent + AboutGithubLinkComponent, + AboutServerSettingsComponent ], exports: [ AboutApplicationModulesComponent, AboutProductVersionComponent, - AboutGithubLinkComponent + AboutGithubLinkComponent, + AboutServerSettingsComponent ] }) export class AboutModule {} diff --git a/lib/core/about/public-api.ts b/lib/core/about/public-api.ts index 96c211aa7f..5aa4f1202f 100644 --- a/lib/core/about/public-api.ts +++ b/lib/core/about/public-api.ts @@ -18,5 +18,6 @@ export * from './about-github-link/about-github-link.component'; export * from './about-product-version/about-product-version.component'; export * from './about-application-modules/about-application-modules.component'; +export * from './about-server-settings/about-server-settings.component'; export * from './about.module';