[ADF-4816] Refactor About component (#5000)

* [ADF-4816] Refactor About component

* Update package.json

angular.json

@@ -227,7 +227,8 @@
               "./demo-shell/src/tsconfig.app.json"
             ],
             "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
             ]
           }
         }
@@ -525,7 +526,8 @@
               "./demo-shell/src/tsconfig.app.json"
             ],
             "exclude": [
-              "**/node_modules/**/*"
+              "**/node_modules/**/*",
+              "package.json"
             ]
           }
         }

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

@@ -1 +1,5 @@
-<adf-about></adf-about>
+<adf-about
+    [githubUrlCommitAlpha]="githubUrlCommitAlpha"
+    [version]="version"
+    [dependencies]="dependencies">
+</adf-about>

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

@@ -16,6 +16,7 @@
  */
 
 import { Component } from '@angular/core';
+import { name, version, commit, dependencies } from '../../../../../package.json';
 
 @Component({
     selector: 'app-about-page',
@@ -24,6 +25,10 @@ import { Component } from '@angular/core';
 })
 export class AboutComponent {
 
+    githubUrlCommitAlpha = `https://github.com/Alfresco/${name}/commits/${commit}`;
+    version = version;
+    dependencies = dependencies;
+
     constructor() {
 
     }

demo-shell/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "resolveJsonModule": true,
     "outDir": "./dist/out-tsc",
     "baseUrl": "src",
     "sourceMap": true,

lib/core/about/about.component.html

@@ -1,4 +1,74 @@
 <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.TITLE' | translate }}</h3>
         <mat-table [dataSource]="extensions$ | async">
@@ -48,52 +118,4 @@
             <mat-row *matRowDef="let row; columns: extensionColumns;"></mat-row>
         </mat-table>
     </div>
-    <h3>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
-    <mat-list>
-        <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
-        <mat-list-item>
-            <h4 matLine> {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: { value: bpmHost } }}</h4>
-        </mat-list-item>
-        <mat-divider></mat-divider>
-        <mat-list-item>
-            <h4 matLine>{{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: { value: ecmHost } }}</h4>
-        </mat-list-item>
-    </mat-list>
-
-    <h3>{{ 'ABOUT.VERSIONS.TITLE' | translate }}</h3>
-    <div *ngIf="bpmVersion">
-        <h3>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</h3>
-        <div> {{ 'ABOUT.VERSIONS.divS.EDITION' | translate }} </div> {{ bpmVersion.edition }}
-        <p></p>
-        <div> {{ 'ABOUT.VERSIONS.divS.VERSION' | translate }} </div> {{ bpmVersion.majorVersion }}.{{
-        bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
-    </div>
-    <div *ngIf="ecmVersion">
-        <h3>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</h3>
-        <div>{{ 'ABOUT.VERSIONS.divS.EDITION' | translate }}</div> {{ ecmVersion.edition }}
-        <p></p>
-        <div> {{ 'ABOUT.VERSIONS.divS.VERSION' | translate }} </div> {{ ecmVersion.version.display }}
-        <p></p>
-        <h4>{{ 'ABOUT.VERSIONS.divS.LICENSE' | translate }}</h4>
-        <adf-datatable [data]="license"></adf-datatable>
-
-        <h4> {{ 'ABOUT.VERSIONS.divS.STATUS' | translate }}</h4>
-        <adf-datatable [data]="status"></adf-datatable>
-
-        <h4>{{ 'ABOUT.VERSIONS.divS.MODULES' | translate }}</h4>
-
-        <adf-datatable [data]="modules"></adf-datatable>
-    </div>
-
-    <div *ngIf="githubUrlCommitAlpha">
-        <h3>{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
-        <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
-        <div>
-            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
-        </div>
-    </div>
-
-    <h3>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</h3>
-    <small>{{ 'ABOUT.PACKAGES.DESCRIPTION' | translate }}</small>
-    <adf-datatable [data]="data"></adf-datatable>
 </div>

lib/core/about/about.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { AuthenticationService } from '../services/authentication.service';
 import { BpmProductVersionModel, EcmProductVersionModel } from '../models/product-version.model';
 import { DiscoveryApiService } from '../services/discovery-api.service';
@@ -33,7 +32,7 @@ import { ExtensionRef, AppExtensionService } from '@alfresco/adf-extensions';
 })
 export class AboutComponent implements OnInit {
 
-    data: ObjectDataTableAdapter;
+    dependencyEntries: ObjectDataTableAdapter;
     status: ObjectDataTableAdapter;
     license: ObjectDataTableAdapter;
     modules: ObjectDataTableAdapter;
@@ -51,150 +50,142 @@ export class AboutComponent implements OnInit {
     /** 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;
 
     ecmVersion: EcmProductVersionModel = null;
     bpmVersion: BpmProductVersionModel = null;
 
-    constructor(private http: HttpClient,
+    constructor(private appConfig: AppConfigService,
-                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');
     }
 
     ngOnInit() {
-
         if (this.authService.isEcmLoggedIn()) {
-            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+            this.setECMInfo();
-                this.ecmVersion = ecmVers;
-
-                this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
-                    { type: 'text', key: 'id', title: 'ABOUT.TABLE_HEADERS.MODULES.ID', sortable: true },
-                    { type: 'text', key: 'title', title: 'ABOUT.TABLE_HEADERS.MODULES.TITLE', sortable: true },
-                    { type: 'text', key: 'version', title: 'ABOUT.TABLE_HEADERS.MODULES.DESCRIPTION', sortable: true },
-                    {
-                        type: 'text',
-                        key: 'installDate',
-                        title: 'ABOUT.TABLE_HEADERS.MODULES.INSTALL_DATE',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'installState',
-                        title: 'ABOUT.TABLE_HEADERS.MODULES.INSTALL_STATE',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'versionMin',
-                        title: 'ABOUT.TABLE_HEADERS.MODULES.VERSION_MIN',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'versionMax',
-                        title: 'ABOUT.TABLE_HEADERS.MODULES.VERSION_MAX',
-                        sortable: true
-                    }
-                ]);
-
-                this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
-                    { type: 'text', key: 'isReadOnly', title: 'ABOUT.TABLE_HEADERS.STATUS.READ_ONLY', sortable: true },
-                    {
-                        type: 'text',
-                        key: 'isAuditEnabled',
-                        title: 'ABOUT.TABLE_HEADERS.STATUS.AUDIT_ENABLED',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'isQuickShareEnabled',
-                        title: 'ABOUT.TABLE_HEADERS.STATUS.QUICK_SHARE_ENABLED',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'isThumbnailGenerationEnabled',
-                        title: 'ABOUT.TABLE_HEADERS.STATUS.THUMBNAIL_ENABLED',
-                        sortable: true
-                    }
-                ]);
-
-                this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
-                    { type: 'text', key: 'issuedAt', title: 'ABOUT.TABLE_HEADERS.LICENSE.ISSUES_AT', sortable: true },
-                    { type: 'text', key: 'expiresAt', title: 'ABOUT.TABLE_HEADERS.LICENSE.EXPIRES_AT', sortable: true },
-                    {
-                        type: 'text',
-                        key: 'remainingDays',
-                        title: 'ABOUT.TABLE_HEADERS.LICENSE.REMAINING_DAYS',
-                        sortable: true
-                    },
-                    { type: 'text', key: 'holder', title: 'ABOUT.TABLE_HEADERS.LICENSE.HOLDER', sortable: true },
-                    { type: 'text', key: 'mode', title: 'ABOUT.TABLE_HEADERS.LICENSE.MODE', sortable: true },
-                    {
-                        type: 'text',
-                        key: 'isClusterEnabled',
-                        title: 'ABOUT.TABLE_HEADERS.LICENSE.CLUSTER_ENABLED',
-                        sortable: true
-                    },
-                    {
-                        type: 'text',
-                        key: 'isCryptodocEnabled',
-                        title: 'ABOUT.TABLE_HEADERS.LICENSE.CRYPTODOC_ENABLED',
-                        sortable: true
-                    }
-                ]);
-            });
         }
 
         if (this.authService.isBpmLoggedIn()) {
-            this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+           this.setBPMInfo();
-                this.bpmVersion = bpmVers;
-            });
         }
 
-        this.http.get('./versions.json?' + new Date()).subscribe((response: any) => {
+        const alfrescoPackages = Object.keys(this.dependencies).filter((val) => {
+            return new RegExp(this.regexp).test(val);
+        });
 
-            const alfrescoPackages = Object.keys(response.dependencies).filter((val) => {
+        const alfrescoPackagesTableRepresentation = [];
-                return new RegExp(this.regexp).test(val);
+        alfrescoPackages.forEach((val) => {
+            alfrescoPackagesTableRepresentation.push({
+                name: val,
+                version: (this.dependencies[val])
             });
+        });
 
-            const alfrescoPackagesTableRepresentation = [];
+        this.dependencyEntries = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
-            alfrescoPackages.forEach((val) => {
+            { type: 'text', key: 'name', title: 'Name', sortable: true },
-                alfrescoPackagesTableRepresentation.push({
+            { type: 'text', key: 'version', title: 'Version', sortable: true }
-                    name: val,
+        ]);
-                    version: (response.dependencies[val].version || response.dependencies[val].required.version)
+    }
-                });
-            });
 
-            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
+    setECMInfo() {
+        this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+            this.ecmVersion = ecmVers;
 
-            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+            this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
-                { type: 'text', key: 'name', title: 'Name', sortable: true },
+                { type: 'text', key: 'id', title: 'ABOUT.TABLE_HEADERS.MODULES.ID', sortable: true },
-                { type: 'text', key: 'version', title: 'Version', sortable: true }
+                { type: 'text', key: 'title', title: 'ABOUT.TABLE_HEADERS.MODULES.TITLE', sortable: true },
+                { type: 'text', key: 'version', title: 'ABOUT.TABLE_HEADERS.MODULES.DESCRIPTION', sortable: true },
+                {
+                    type: 'text',
+                    key: 'installDate',
+                    title: 'ABOUT.TABLE_HEADERS.MODULES.INSTALL_DATE',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'installState',
+                    title: 'ABOUT.TABLE_HEADERS.MODULES.INSTALL_STATE',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'versionMin',
+                    title: 'ABOUT.TABLE_HEADERS.MODULES.VERSION_MIN',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'versionMax',
+                    title: 'ABOUT.TABLE_HEADERS.MODULES.VERSION_MAX',
+                    sortable: true
+                }
             ]);
 
-        });
+            this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
+                { type: 'text', key: 'isReadOnly', title: 'ABOUT.TABLE_HEADERS.STATUS.READ_ONLY', sortable: true },
+                {
+                    type: 'text',
+                    key: 'isAuditEnabled',
+                    title: 'ABOUT.TABLE_HEADERS.STATUS.AUDIT_ENABLED',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'isQuickShareEnabled',
+                    title: 'ABOUT.TABLE_HEADERS.STATUS.QUICK_SHARE_ENABLED',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'isThumbnailGenerationEnabled',
+                    title: 'ABOUT.TABLE_HEADERS.STATUS.THUMBNAIL_ENABLED',
+                    sortable: true
+                }
+            ]);
 
-        this.ecmHost = this.appConfig.get<string>(AppConfigValues.ECMHOST);
+            this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
-        this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
+                { type: 'text', key: 'issuedAt', title: 'ABOUT.TABLE_HEADERS.LICENSE.ISSUES_AT', sortable: true },
+                { type: 'text', key: 'expiresAt', title: 'ABOUT.TABLE_HEADERS.LICENSE.EXPIRES_AT', sortable: true },
+                {
+                    type: 'text',
+                    key: 'remainingDays',
+                    title: 'ABOUT.TABLE_HEADERS.LICENSE.REMAINING_DAYS',
+                    sortable: true
+                },
+                { type: 'text', key: 'holder', title: 'ABOUT.TABLE_HEADERS.LICENSE.HOLDER', sortable: true },
+                { type: 'text', key: 'mode', title: 'ABOUT.TABLE_HEADERS.LICENSE.MODE', sortable: true },
+                {
+                    type: 'text',
+                    key: 'isClusterEnabled',
+                    title: 'ABOUT.TABLE_HEADERS.LICENSE.CLUSTER_ENABLED',
+                    sortable: true
+                },
+                {
+                    type: 'text',
+                    key: 'isCryptodocEnabled',
+                    title: 'ABOUT.TABLE_HEADERS.LICENSE.CRYPTODOC_ENABLED',
+                    sortable: true
+                }
+            ]);
+        });
     }
 
-    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+    setBPMInfo() {
-        const corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+        this.discovery.getBpmProductInfo().subscribe((bpmVersion) => {
-            return packageUp.name === '@alfresco/adf-core';
+            this.bpmVersion = bpmVersion;
         });
-
-        if (corePackage) {
-            const commitIsh = corePackage.version.split('-');
-            if (commitIsh.length > 1) {
-                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
-            } else {
-                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
-            }
-        }
     }
 }

lib/core/i18n/en.json

@@ -386,6 +386,7 @@
     }
   },
   "ABOUT": {
+    "VERSION": "Version",
     "SERVER_SETTINGS": {
       "TITLE": "Server settings",
       "DESCRIPTION": "The values below are taken from the AppConfigService",

package.json

@@ -1,5 +1,6 @@
 {
-  "name": "alfresco-components",
+  "name": "alfresco-ng2-components",
+  "commit": "b644b39d17396330d2a67509f58c5b9e890b9b13",
   "description": "Alfresco Angular components",
   "version": "3.4.0",
   "author": "Alfresco Software, Ltd.",