ADF-4201 About Component - added input params (#4435)

* ADF-4201 about-component added imput params

* ADF-4201 updated docs

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

@@ -1,51 +1 @@
-<h3>{{ 'ABOUT.TITLE' | translate }}</h3>
-<div class="adf-extension-details-container">
-    <mat-table [dataSource]="extensions$ | async">
-        <!-- $id Column -->
-        <ng-container matColumnDef="$id">
-            <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.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.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.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.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.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.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.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>
-
 <adf-about></adf-about>

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

@@ -16,8 +16,6 @@
  */
 
 import { Component } from '@angular/core';
-import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
-import { Observable } from 'rxjs';
 
 @Component({
     selector: 'app-about-page',
@@ -25,10 +23,8 @@ import { Observable } from 'rxjs';
     styleUrls: ['about.component.scss']
 })
 export class AboutComponent {
-    extensionColumns: string[] = ['$id', '$name', '$version', '$vendor', '$license', '$runtime', '$description'];
-    extensions$: Observable<ExtensionRef[]>;
 
-    constructor(appExtensions: AppExtensionService) {
+    constructor() {
-        this.extensions$ = appExtensions.references$;
+
     }
 }

docs/core/components/about.component.md

@@ -10,10 +10,27 @@ Last reviewed: 2018-11-14
 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://githubcom/Alfresco/alfresco-ng2-components/commits/"
+    showExtensions="false"
+    regexp="^(@alfresco)"
+></adf-about>
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| githubUrlCommitAlpha | `string` | https://githubcom/Alfresco/alfresco-ng2-components/commits/ | Version of ADF to be used |
+| showExtensions | `boolean` | true | Parameter for hide or show extensions block |
+| regexp | `string` | ^(@alfresco) | Regular expression for filtering dependencies packages |
 
 ## Details
 

lib/core/about/about.component.html

@@ -1,4 +1,53 @@
 <div class="adf-about-container">
+    <div class="adf-extension-details-container" *ngIf="showExtensions">
+        <h3>{{ 'ABOUT.TITLE' | translate }}</h3>
+        <mat-table [dataSource]="extensions$ | async">
+            <!-- $id Column -->
+            <ng-container matColumnDef="$id">
+                <mat-header-cell *matHeaderCellDef>{{ 'ABOUT.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.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.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.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.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.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.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>
     <h3>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
     <mat-list>
         <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
@@ -16,7 +65,8 @@
         <h3>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</h3>
         <label> {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }} </label> {{ bpmVersion.edition }}
         <p></p>
-        <label> {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }} </label> {{ bpmVersion.majorVersion }}.{{ bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
+        <label> {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }} </label> {{ bpmVersion.majorVersion }}.{{
+        bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
     </div>
     <div *ngIf="ecmVersion">
         <h3>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</h3>

lib/core/about/about.component.ts

@@ -15,13 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+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';
 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';
 
 @Component({
     selector: 'adf-about',
@@ -35,7 +37,11 @@ export class AboutComponent implements OnInit {
     status: ObjectDataTableAdapter;
     license: ObjectDataTableAdapter;
     modules: ObjectDataTableAdapter;
-    githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+    extensionColumns: string[] = ['$id', '$name', '$version', '$vendor', '$license', '$runtime', '$description'];
+    extensions$: Observable<ExtensionRef[]>;
+    @Input() githubUrlCommitAlpha = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+    @Input() showExtensions = true;
+    @Input() regexp = '^(@alfresco)';
 
     ecmHost = '';
     bpmHost = '';
@@ -46,7 +52,9 @@ export class AboutComponent implements OnInit {
     constructor(private http: HttpClient,
                 private appConfig: AppConfigService,
                 private authService: AuthenticationService,
-                private discovery: DiscoveryApiService) {
+                private discovery: DiscoveryApiService,
+                appExtensions: AppExtensionService) {
+                    this.extensions$ = appExtensions.references$;
     }
 
     ngOnInit() {
@@ -91,10 +99,9 @@ export class AboutComponent implements OnInit {
         }
 
         this.http.get('/versions.json?' + new Date()).subscribe((response: any) => {
-            const regexp = new RegExp('^(@alfresco)');
 
             const alfrescoPackages = Object.keys(response.dependencies).filter((val) => {
-                return regexp.test(val);
+                return new RegExp(this.regexp).test(val);
             });
 
             const alfrescoPackagesTableRepresentation = [];