[ACA-4382 ] About Page refactoring to use it across all the platform (#…

…7365)

* about page refactor for global usage

* Development About

* add storybook

* fix build

* fix

* fix

* fix imports

* fix

* fix lint

* fix

* fix

* fix

* fix

demo-shell/resources/i18n/en.json

@@ -1,5 +1,8 @@
 {
   "APP": {
+    "ABOUT": {
+      "DEVELOPMENT":"Dev Mode"
+    },
     "INFO_DRAWER": {
       "TITLE": "Details",
       "COMMENTS": "Comments",

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

@@ -1,11 +1,4 @@
-<adf-about-github-link [application]="application" [url]="url" [version]="version"></adf-about-github-link>
+<mat-slide-toggle [(ngModel)]="dev">{{'APP.ABOUT.DEVELOPMENT' | translate }}</mat-slide-toggle>
 
-<adf-about-server-settings></adf-about-server-settings>
+<adf-about [dev]="dev" [pkg]="pkg"> </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

@@ -15,27 +15,20 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import pkg 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 implements OnInit {
-    url = `https://github.com/Alfresco/${pkg.name}/commits/${pkg.commit}`;
-    version = pkg.version;
-    dependencies = pkg.dependencies;
-    showExtensions = true;
-    application = '';
+export class AboutComponent {
+    pkg: any;
+    dev: true;
 
-    constructor(private appConfigService: AppConfigService) {}
-
-    ngOnInit() {
-        this.application = this.appConfigService.get<string>(
-            'application.name'
-        );
+    constructor() {
+        this.pkg = pkg;
     }
+
 }

lib/core/about/about-extension-list/about-extension-list.component.html

@@ -0,0 +1,11 @@
+<mat-table [dataSource]="data">
+  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

lib/core/about/about-extension-list/about-extension-list.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { ExtensionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'adf-about-extension-list',
+  templateUrl: './about-extension-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AboutExtensionListComponent {
+  columns = [
+    {
+      columnDef: 'name',
+      header: 'ABOUT.PLUGINS.NAME',
+      cell: (row: ExtensionRef) => `${row.$name}`
+    },
+    {
+      columnDef: 'version',
+      header: 'ABOUT.PLUGINS.VERSION',
+      cell: (row: ExtensionRef) => `${row.$version}`
+    }
+  ];
+
+  displayedColumns = this.columns.map((x) => x.columnDef);
+
+  @Input()
+  data: Array<ExtensionRef> = [];
+}

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

@@ -1,16 +1,14 @@
 <div class="adf-github-link-container">
-    <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>
+    <header data-automation-id="adf-github-source-code-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</header>
+    <mat-card class="mat-elevation-z0">
+        <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">
-                <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
-                <div data-automation-id="adf-github-url">
-                    <a [href]="url" target="_blank">{{url}}</a>
-                </div>
+        <div *ngIf="url">
+            <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
+            <div data-automation-id="adf-github-url">
+                <a [href]="url" target="_blank">{{url}}</a>
             </div>
-        </mat-card>
-    </div>
+        </div>
+    </mat-card>
 </div>