[ADF-4878] Refactor, Split ADF About component (#5064)

* Refactor, Split ADF About component

* [ADF-4878] Add documentation

* [ADF-4878] Rename Component

* [ADF-4878] Implement comments

* [ADF-4878] Update documentation for about components

lib/core/about/about-application-modules/about-application-modules.component.html

@@ -0,0 +1,62 @@
+<div class="adf-about-container">
+    <h3>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</h3>
+    <small>{{ 'ABOUT.PACKAGES.DESCRIPTION' | translate }}</small>
+    <adf-datatable [data]="dependencyEntries"></adf-datatable>
+
+    <div class="adf-extension-details-container" *ngIf="showExtensions && extensions$">
+        <h3>{{ 'ABOUT.EXTENSIONS.TITLE' | translate }}</h3>
+        <mat-table [dataSource]="extensions$ | async">
+            <!-- $id Column -->
+            <ng-container matColumnDef="$id">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.ID' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$id}}</mat-cell>
+            </ng-container>
+
+            <!-- $name Column -->
+            <ng-container matColumnDef="$name">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.NAME' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$name}}</mat-cell>
+            </ng-container>
+
+            <!-- $version Column -->
+            <ng-container matColumnDef="$version">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VERSION' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$version}}</mat-cell>
+            </ng-container>
+
+            <!-- $vendor Column -->
+            <ng-container matColumnDef="$vendor">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VENDOR' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$vendor}}</mat-cell>
+            </ng-container>
+
+            <!-- $license Column -->
+            <ng-container matColumnDef="$license">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.LICENSE' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$license}}</mat-cell>
+            </ng-container>
+
+            <!-- $runtime Column -->
+            <ng-container matColumnDef="$runtime">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.RUNTIME' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$runtime}}</mat-cell>
+            </ng-container>
+
+            <!-- $description Column -->
+            <ng-container matColumnDef="$description">
+                <mat-header-cell
+                    *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.DESCRIPTION' | translate }}</mat-header-cell>
+                <mat-cell *matCellDef="let element">{{element.$description}}</mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="extensionColumns"></mat-header-row>
+            <mat-row *matRowDef="let row; columns: extensionColumns;"></mat-row>
+        </mat-table>
+    </div>
+</div>

lib/core/about/about-application-modules/about-application-modules.component.ts

@@ -0,0 +1,67 @@
+/*!
+ * @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, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ObjectDataTableAdapter } from '../../datatable/data/object-datatable-adapter';
+import { Observable } from 'rxjs';
+import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
+
+@Component({
+    selector: 'adf-about-application-modules',
+    templateUrl: './about-application-modules.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class AboutApplicationModulesComponent implements OnInit {
+
+    extensionColumns: string[] = ['$id', '$name', '$version', '$vendor', '$license', '$runtime', '$description'];
+
+    dependencyEntries: ObjectDataTableAdapter;
+    extensions$: Observable<ExtensionRef[]>;
+
+    /** Toggles showing/hiding of extensions block. */
+    @Input()
+    showExtensions = true;
+
+    /** Regular expression for filtering dependencies packages. */
+    @Input() regexp = '^(@alfresco)';
+
+    /** Current version of the app running */
+    @Input() dependencies: any;
+
+    constructor(appExtensions: AppExtensionService) {
+        this.extensions$ = appExtensions.references$;
+    }
+
+    ngOnInit() {
+        const alfrescoPackages = Object.keys(this.dependencies).filter((val) => {
+            return new RegExp(this.regexp).test(val);
+        });
+
+        const alfrescoPackagesTableRepresentation = [];
+        alfrescoPackages.forEach((val) => {
+            alfrescoPackagesTableRepresentation.push({
+                name: val,
+                version: (this.dependencies[val])
+            });
+        });
+
+        this.dependencyEntries = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+            { type: 'text', key: 'name', title: 'Name', sortable: true },
+            { type: 'text', key: 'version', title: 'Version', sortable: true }
+        ]);
+    }
+}

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

@@ -0,0 +1,28 @@
+<div class="adf-about-container">
+    <h1>{{ application }}</h1>
+
+    <div>
+        <h3>{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
+        <mat-card>
+            <p *ngIf="version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
+
+            <div *ngIf="url">
+                <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
+                <div>
+                    <a [href]="url" target="_blank">{{url}}</a>
+                </div>
+            </div>
+        </mat-card>
+    </div>
+
+    <h3>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
+    <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
+    <mat-card>
+        <p>
+            {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
+        </p>
+        <p>
+            {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }}
+        </p>
+    </mat-card>
+</div>

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

@@ -0,0 +1,10 @@
+.adf-about-container {
+    padding: 10px;
+}
+
+.adf-table-version {
+    width: 60%;
+    border: 0;
+    border-spacing: 0;
+    text-align: center;
+}

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

@@ -0,0 +1,46 @@
+/*!
+ * @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, Input, OnInit, 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 {
+
+    /** Commit corresponding to the version of ADF to be used. */
+    @Input()
+    url = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    /** Current version of the app running */
+    @Input() version: string;
+
+    ecmHost = '';
+    bpmHost = '';
+    application: string;
+
+    constructor(private appConfig: AppConfigService) {}
+
+    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-product-version/about-product-version.component.html

@@ -0,0 +1,39 @@
+<div class="adf-about-container">
+    <h3>{{ 'ABOUT.VERSIONS.TITLE' | translate }}</h3>
+    <div *ngIf="bpmVersion">
+        <mat-card>
+            <div *ngIf="bpmVersion">
+                <h3>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</h3>
+                <p>
+                    {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ bpmVersion.edition }}
+                </p>
+                <p>
+                    {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ bpmVersion.majorVersion }}.{{
+                    bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
+                </p>
+            </div>
+
+            <div *ngIf="ecmVersion">
+                <h3>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</h3>
+                <p>
+                    {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ ecmVersion.edition }}
+                </p>
+                <p>
+                    {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ ecmVersion.version.display }}
+                </p>
+
+            </div>
+        </mat-card>
+    </div>
+
+    <div *ngIf="ecmVersion">
+        <h3>{{ 'ABOUT.VERSIONS.LABELS.LICENSE' | translate }}</h3>
+        <adf-datatable [data]="license"></adf-datatable>
+
+        <h3> {{ 'ABOUT.VERSIONS.LABELS.STATUS' | translate }}</h3>
+        <adf-datatable [data]="status"></adf-datatable>
+
+        <h3>{{ 'ABOUT.VERSIONS.LABELS.MODULES' | translate }}</h3>
+        <adf-datatable [data]="modules"></adf-datatable>
+    </div>
+</div>

lib/core/about/about-product-version/about-product-version.component.scss

@@ -0,0 +1,10 @@
+.adf-about-container {
+    padding: 10px;
+}
+
+.adf-table-version {
+    width: 60%;
+    border: 0;
+    border-spacing: 0;
+    text-align: center;
+}

lib/core/about/about-product-version/about-product-version.component.ts

@@ -15,63 +15,28 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
-import { AuthenticationService } from '../services/authentication.service';
-import { BpmProductVersionModel, EcmProductVersionModel } from '../models/product-version.model';
-import { DiscoveryApiService } from '../services/discovery-api.service';
-import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter';
-import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
-import { Observable } from 'rxjs';
-import { ExtensionRef, AppExtensionService } from '@alfresco/adf-extensions';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { BpmProductVersionModel, EcmProductVersionModel } from '../../models/product-version.model';
+import { ObjectDataTableAdapter } from '../../datatable/data/object-datatable-adapter';
+import { AuthenticationService } from '../../services/authentication.service';
+import { DiscoveryApiService } from '../../services/discovery-api.service';
 
 @Component({
-    selector: 'adf-about',
-    templateUrl: './about.component.html',
-    styleUrls: ['./about.component.scss'],
+    selector: 'adf-about-product-version',
+    templateUrl: './about-product-version.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class AboutComponent implements OnInit {
-
-    dependencyEntries: ObjectDataTableAdapter;
-    status: ObjectDataTableAdapter;
-    license: ObjectDataTableAdapter;
-    modules: ObjectDataTableAdapter;
-    extensionColumns: string[] = ['$id', '$name', '$version', '$vendor', '$license', '$runtime', '$description'];
-    extensions$: Observable<ExtensionRef[]>;
-
-    /** Commit corresponding to the version of ADF to be used. */
-    @Input()
-    githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
-
-    /** Toggles showing/hiding of extensions block. */
-    @Input()
-    showExtensions = true;
-
-    /** Regular expression for filtering dependencies packages. */
-    @Input() regexp = '^(@alfresco)';
-
-    /** Current version of the app running */
-    @Input() version: string;
-
-    /** Current version of the app running */
-    @Input() dependencies: any;
-
-    ecmHost = '';
-    bpmHost = '';
-    application: string;
+export class AboutProductVersionComponent implements OnInit {
 
     ecmVersion: EcmProductVersionModel = null;
     bpmVersion: BpmProductVersionModel = null;
 
-    constructor(private appConfig: AppConfigService,
-                private authService: AuthenticationService,
-                private discovery: DiscoveryApiService,
-                appExtensions: AppExtensionService) {
-        this.extensions$ = appExtensions.references$;
-        this.ecmHost = this.appConfig.get<string>(AppConfigValues.ECMHOST);
-        this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
-        this.application = this.appConfig.get<string>('application.name');
-    }
+    status: ObjectDataTableAdapter;
+    license: ObjectDataTableAdapter;
+    modules: ObjectDataTableAdapter;
+
+    constructor(private authService: AuthenticationService,
+                private discovery: DiscoveryApiService) {}
 
     ngOnInit() {
         if (this.authService.isEcmLoggedIn()) {
@@ -79,25 +44,8 @@ export class AboutComponent implements OnInit {
         }
 
         if (this.authService.isBpmLoggedIn()) {
-           this.setBPMInfo();
+            this.setBPMInfo();
         }
-
-        const alfrescoPackages = Object.keys(this.dependencies).filter((val) => {
-            return new RegExp(this.regexp).test(val);
-        });
-
-        const alfrescoPackagesTableRepresentation = [];
-        alfrescoPackages.forEach((val) => {
-            alfrescoPackagesTableRepresentation.push({
-                name: val,
-                version: (this.dependencies[val])
-            });
-        });
-
-        this.dependencyEntries = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
-            { type: 'text', key: 'name', title: 'Name', sortable: true },
-            { type: 'text', key: 'version', title: 'Version', sortable: true }
-        ]);
     }
 
     setECMInfo() {

lib/core/about/about.component.html

@@ -1,121 +0,0 @@
-<div class="adf-about-container">
-    <h1>{{ application }}</h1>
-
-    <div>
-        <h3>{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
-        <mat-card>
-            <p *ngIf="version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
-
-            <div *ngIf="githubUrlCommitAlpha">
-                <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
-                <div>
-                    <a [href]="githubUrlCommitAlpha" target="_blank">{{githubUrlCommitAlpha}}</a>
-                </div>
-            </div>
-        </mat-card>
-    </div>
-
-    <h3>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
-    <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
-    <mat-card>
-        <p>
-            {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: { value: bpmHost } }}
-        </p>
-        <p>
-            {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: { value: ecmHost } }}
-        </p>
-    </mat-card>
-
-
-    <h3>{{ 'ABOUT.VERSIONS.TITLE' | translate }}</h3>
-    <div *ngIf="bpmVersion">
-        <mat-card>
-            <div *ngIf="bpmVersion">
-                <h3>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</h3>
-                <p>
-                    {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ bpmVersion.edition }}
-                </p>
-                <p>
-                    {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ bpmVersion.majorVersion }}.{{
-                    bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
-                </p>
-            </div>
-
-            <div *ngIf="ecmVersion">
-                <h3>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</h3>
-                <p>
-                    {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ ecmVersion.edition }}
-                </p>
-                <p>
-                    {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ ecmVersion.version.display }}
-                </p>
-
-            </div>
-        </mat-card>
-    </div>
-
-    <div *ngIf="ecmVersion">
-        <h3>{{ 'ABOUT.VERSIONS.LABELS.LICENSE' | translate }}</h3>
-        <adf-datatable [data]="license"></adf-datatable>
-
-        <h3> {{ 'ABOUT.VERSIONS.LABELS.STATUS' | translate }}</h3>
-        <adf-datatable [data]="status"></adf-datatable>
-
-        <h3>{{ 'ABOUT.VERSIONS.LABELS.MODULES' | translate }}</h3>
-        <adf-datatable [data]="modules"></adf-datatable>
-    </div>
-
-    <h3>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</h3>
-    <small>{{ 'ABOUT.PACKAGES.DESCRIPTION' | translate }}</small>
-    <adf-datatable [data]="dependencyEntries"></adf-datatable>
-
-    <div class="adf-extension-details-container" *ngIf="showExtensions">
-        <h3>{{ 'ABOUT.EXTENSIONS.TITLE' | translate }}</h3>
-        <mat-table [dataSource]="extensions$ | async">
-            <!-- $id Column -->
-            <ng-container matColumnDef="$id">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.ID' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$id}}</mat-cell>
-            </ng-container>
-
-            <!-- $name Column -->
-            <ng-container matColumnDef="$name">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.NAME' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$name}}</mat-cell>
-            </ng-container>
-
-            <!-- $version Column -->
-            <ng-container matColumnDef="$version">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VERSION' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$version}}</mat-cell>
-            </ng-container>
-
-            <!-- $vendor Column -->
-            <ng-container matColumnDef="$vendor">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.VENDOR' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$vendor}}</mat-cell>
-            </ng-container>
-
-            <!-- $license Column -->
-            <ng-container matColumnDef="$license">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.LICENSE' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$license}}</mat-cell>
-            </ng-container>
-
-            <!-- $runtime Column -->
-            <ng-container matColumnDef="$runtime">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.RUNTIME' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$runtime}}</mat-cell>
-            </ng-container>
-
-            <!-- $description Column -->
-            <ng-container matColumnDef="$description">
-                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.EXTENSIONS.TABLE_HEADERS.DESCRIPTION' | translate }}</mat-header-cell>
-                <mat-cell *matCellDef="let element">{{element.$description}}</mat-cell>
-            </ng-container>
-
-            <mat-header-row *matHeaderRowDef="extensionColumns"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: extensionColumns;"></mat-row>
-        </mat-table>
-    </div>
-</div>

lib/core/about/about.module.ts

@@ -19,9 +19,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../material.module';
-import { AboutComponent } from './about.component';
 import { DataTableModule } from '../datatable/datatable.module';
 import { DataColumnModule } from '../data-column/data-column.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';
 
 @NgModule({
     imports: [
@@ -32,10 +34,14 @@ import { DataColumnModule } from '../data-column/data-column.module';
         DataColumnModule
     ],
     declarations: [
-        AboutComponent
+        AboutApplicationModulesComponent,
+        AboutProductVersionComponent,
+        AboutGithubLinkComponent
     ],
     exports: [
-        AboutComponent
+        AboutApplicationModulesComponent,
+        AboutProductVersionComponent,
+        AboutGithubLinkComponent
     ]
 })
 export class AboutModule {}

lib/core/about/public-api.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
-export * from './about.component';
+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.module';