[ACA-3317] Split About component into smaller components (#5708)

demo-shell/src/app/components/about/about.component.html

@@ -1,12 +1,11 @@
-<adf-about-github-link
+<adf-about-github-link [application]="application" [url]="url" [version]="version"></adf-about-github-link>
-    [url]="url"
-    [version]="version">
-</adf-about-github-link>
 
-<adf-about-product-version>
+<adf-about-server-settings></adf-about-server-settings>
-</adf-about-product-version>
+
+<adf-about-product-version> </adf-about-product-version>
 
 <adf-about-application-modules
     [dependencies]="dependencies"
-    [showExtensions]="showExtensions">
+    [showExtensions]="showExtensions"
+>
 </adf-about-application-modules>

demo-shell/src/app/components/about/about.component.ts

@@ -15,22 +15,32 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { name, version, commit, dependencies } from '../../../../../package.json';
+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<string>(
+            'application.name'
+        );
     }
 }

lib/core/about/about-github-link/about-github-link.component.html

@@ -1,9 +1,8 @@
 <div class="adf-github-link-container">
-    <h1 data-automation-id="adf-github-app-title">{{ application }}</h1>
-
     <div>
         <h3 data-automation-id="adf-github-source-code-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
         <mat-card>
+            <h3 data-automation-id="adf-github-app-title">{{application}}</h3>
             <p *ngIf="version" data-automation-id="adf-github-version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
 
             <div *ngIf="url">
@@ -14,15 +13,4 @@
             </div>
         </mat-card>
     </div>
-
-    <h3 data-automation-id="adf-about-setting-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
-    <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
-    <mat-card>
-        <p data-automation-id="adf-process-service-host">
-            {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
-        </p>
-        <p data-automation-id="adf-content-service-host">
-            {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }}
-        </p>
-    </mat-card>
 </div>

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<AboutGithubLinkComponent>;
     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);
-    });
 });

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 { Component, Input, ViewEncapsulation } from '@angular/core';
-import { AppConfigService, AppConfigValues } from '../../app-config/app-config.service';
 
 @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 = '';
+    /** Current version of the app running */
-    bpmHost = '';
+    @Input() application: string;
-    application: string;
 
-    constructor(private appConfig: AppConfigService) {}
+    constructor() {}
-
-    ngOnInit() {
-        this.ecmHost = this.appConfig.get<string>(AppConfigValues.ECMHOST);
-        this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
-        this.application = this.appConfig.get<string>('application.name');
-    }
 }

lib/core/about/about-server-settings/about-server-settings.component.html

@@ -0,0 +1,12 @@
+<div class="adf-github-link-container">
+    <h3 data-automation-id="adf-about-setting-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
+    <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
+    <mat-card>
+        <p data-automation-id="adf-process-service-host">
+            {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
+        </p>
+        <p data-automation-id="adf-content-service-host">
+            {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }}
+        </p>
+    </mat-card>
+</div>

lib/core/about/about-server-settings/about-server-settings.component.scss

@@ -0,0 +1,3 @@
+.adf-github-link-container {
+    padding: 10px;
+}

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<AboutServerSettingsComponent>;
+    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);
+    });
+});

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<string>(AppConfigValues.ECMHOST);
+        this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
+    }
+}

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 {}

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';