[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

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

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

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

@@ -25,9 +25,10 @@ import { name, version, commit, dependencies } from '../../../../../package.json
 })
 export class AboutComponent {
 
-    githubUrlCommitAlpha = `https://github.com/Alfresco/${name}/commits/${commit}`;
+    url = `https://github.com/Alfresco/${name}/commits/${commit}`;
     version = version;
     dependencies = dependencies;
+    showExtensions = true;
 
     constructor() {
 

docs/core/components/about-application-modules.md

@@ -0,0 +1,40 @@
+---
+Title: About Application Modules Component
+Added: v1.0.0
+Status: Experimental
+Last reviewed: 2019-09-09
+---
+
+# [About Application Modules Component](../../../lib/core/about/about-application-modules/about-application-modules.component.ts "Defined in about-application-modules.component.ts")
+
+Shows which ADF libraries and plugins an application is using.
+
+## Basic Usage
+
+With default input values:
+
+```html
+<adf-about-application-modules></adf-about-application-modules>
+```
+
+With custom input values:
+
+```html
+<adf-about-application-modules
+    [dependencies]="yourDependencies"
+    [showExtensions]="true"
+    [regexp]="^(@alfresco)">
+</adf-about-application-modules>
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| dependencies | `any` |  | The dependencies value defined in the package.json |
+| showExtensions | `boolean` | true | Toggles showing/hiding of extensions block. |
+| regexp | `string` | "^(@alfresco)" | Regular expression for filtering dependencies packages. |
+
+## Details
+
+Use this component to display an overview of the dependencies and plugins used by an application.

docs/core/components/about-github-link.md

@@ -0,0 +1,39 @@
+---
+Title: About GitHub Link Component
+Added: v1.0.0
+Status: Experimental
+Last reviewed: 2019-09-09
+---
+
+# [About GitHub Link Component](../../../lib/core/about/about-github-link/about-github-link.component.ts "Defined in about-github-link.component.ts")
+
+Shows which version of the application is running based on the latest GitHub commit, as well as the server settings for the application.
+
+## Basic Usage
+
+With default input values:
+
+```html
+<adf-about-github-link></adf-about-github-link>
+```
+
+With custom input values:
+
+```html
+<adf-about-github-link
+    [url]=yourUrl"
+    [version]="yourVersion">
+</adf-about-github-link>
+
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| url | `string` |  | The GitHub commit that corresponds to the version of ADF in use. |
+| version | `string` | "3.x.x" | A number displaying the version of ADF in use. |
+
+## Details
+
+Use this component to display an overview of the latest GitHub commit and the server settings used by an application.

docs/core/components/about-product-version.component.md

@@ -0,0 +1,22 @@
+---
+Title: About Product Version Component
+Added: v1.0.0
+Status: Experimental
+Last reviewed: 2019-09-09
+---
+
+# [About Product Version Component](../../../lib/core/about/about-product-version/about-product-version.component.ts "Defined in about-product-version.component.ts")
+
+Shows which version of Process Services (BPM) and Content Services (ECM) an application is running. It also shows the relevant license information, application status and Alfresco modules running in an application.
+
+## Basic Usage
+
+With default input values:
+
+```html
+<adf-about-product-version></adf-about-product-version>
+```
+
+## Details
+
+Use this component to display an overview of which version of Process Services and Content Services an application is running as well as the associated license information. It also displays application status and any modules running.

docs/core/components/about.component.md

@@ -1,47 +0,0 @@
----
-Title: About Component
-Added: v2.4.0
-Status: Experimental
-Last reviewed: 2019-03-19
----
-
-# [About Component](../../../lib/core/about/about.component.ts "Defined in about.component.ts")
-
-Shows a general version and status overview of the installed ADF library.
-
-## Basic Usage
-
-With default input values
-
-```html
-<adf-about></adf-about>
-```
-
-With custom input values:
-
-```html
-<adf-about
-    githubUrlCommitAlpha="https://github.com/Alfresco/alfresco-ng2-components/commits/"
-    showExtensions="false"
-    regexp="^(@alfresco)"
-></adf-about>
-```
-
-## Class members
-
-### Properties
-
-| Name | Type | Default value | Description |
-| ---- | ---- | ------------- | ----------- |
-| githubUrlCommitAlpha | `string` |  | Commit corresponding to the version of ADF to be used. |
-| regexp | `string` | "^(@alfresco)" | Regular expression for filtering dependencies packages. |
-| showExtensions | `boolean` | true | Toggles showing/hiding of extensions block. |
-
-## Details
-
-Use this component to get a general overview of the version of ADF installed and the status of the [Content service](../services/content.service.md) and [Process service](../../process-services/services/process.service.md).
-
-Note that at the moment this component is mostly for internal use and it requires you to:
-
--   create a version file : `npm list --depth=0 --json=true --prod=true > versions.json`
--   provide this version file in the `dist` folder

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 { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { AuthenticationService } from '../services/authentication.service';
+import { BpmProductVersionModel, EcmProductVersionModel } from '../../models/product-version.model';
-import { BpmProductVersionModel, EcmProductVersionModel } from '../models/product-version.model';
+import { ObjectDataTableAdapter } from '../../datatable/data/object-datatable-adapter';
-import { DiscoveryApiService } from '../services/discovery-api.service';
+import { AuthenticationService } from '../../services/authentication.service';
-import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter';
+import { DiscoveryApiService } from '../../services/discovery-api.service';
-import { AppConfigService, AppConfigValues } from '../app-config/app-config.service';
-import { Observable } from 'rxjs';
-import { ExtensionRef, AppExtensionService } from '@alfresco/adf-extensions';
 
 @Component({
-    selector: 'adf-about',
+    selector: 'adf-about-product-version',
-    templateUrl: './about.component.html',
+    templateUrl: './about-product-version.component.html',
-    styleUrls: ['./about.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class AboutComponent implements OnInit {
+export class AboutProductVersionComponent 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;
 
     ecmVersion: EcmProductVersionModel = null;
     bpmVersion: BpmProductVersionModel = null;
 
-    constructor(private appConfig: AppConfigService,
+    status: ObjectDataTableAdapter;
-                private authService: AuthenticationService,
+    license: ObjectDataTableAdapter;
-                private discovery: DiscoveryApiService,
+    modules: ObjectDataTableAdapter;
-                appExtensions: AppExtensionService) {
+
-        this.extensions$ = appExtensions.references$;
+    constructor(private authService: AuthenticationService,
-        this.ecmHost = this.appConfig.get<string>(AppConfigValues.ECMHOST);
+                private discovery: DiscoveryApiService) {}
-        this.bpmHost = this.appConfig.get<string>(AppConfigValues.BPMHOST);
-        this.application = this.appConfig.get<string>('application.name');
-    }
 
     ngOnInit() {
         if (this.authService.isEcmLoggedIn()) {
@@ -81,23 +46,6 @@ export class AboutComponent implements OnInit {
         if (this.authService.isBpmLoggedIn()) {
             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';